/*============================= Design First Frame =====================================*/
.businessHeader__smTag
{
    width : 25%;
}

.businessImg
{
    position : relative;
    z-index : 1;
}

.excalmanation
{
    position : absolute;
    top : -35%;
    right : 22%;
    width : 18px !important;
    animation : zoom-shake 3s linear infinite;
}

@keyframes zoom-shake 
{
    0%
    {
        transform : scale(100%) rotate(0deg);
    }

    20% 
    {
        transform : scale(105%) rotate(0deg);
    }

    40% 
    {
        transform: scale(105%) rotate(20deg);
    }

    60% 
    {
        transform: scale(105%) rotate(0deg);
    }
    80% 
    {
        transform: scale(105%) rotate(-20deg);
    }

    100%    
    {
        transform: scale(100%) rotate(0deg);
    }
}

.business__Frame1
{
    margin : 3rem 0rem;
    padding : 3rem 1rem;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    gap : 1rem;
}

.businessFrame1__TXT
{
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    gap : 1rem;
}

.businessFrame1__TXT h3 
{
    font-size : 2.7rem;
    font-weight : 700;
    color : #2d3c58;
    text-transform : capitalize;
}

.businessFrame1__TXT p 
{
    font-size : 1rem;
    font-weight : 400;
    color : #4c5671;
}

.businessFrame1__Cards
{
    margin : 1rem 0rem;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
    gap : 1rem;
}

.businessFrame__Card
{
    padding : 2rem;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    gap : 1rem;
    border-radius : 10px;
    background : linear-gradient(rgb(216, 234, 255), rgb(246, 246, 246))
}

.businessFrame__Card h4 
{
    font-size : 1.2rem;
    font-weight : 700;
    text-align : center;
    text-transform : capitalize;
    color : #2d3c58;
}

.businessFrame__Card p 
{
    font-size : 0.9rem;
    text-align : center;
    color : #4c5671;
    text-transform: capitalize;
}




/*========================== MEDIA QUERY FOR MEDIUM SIZE DEVICES ========================*/
@media screen and (max-width : 768px)
{
    .payment__HeaderContainer 
    {
        flex-direction : column-reverse;
    }

    .businessImg img 
    {
        width : 80%;
        margin : 1rem auto;
    }

    .excalmanation 
    {
        top: -36%;
        right: 28%;
    }

    .businessFrame1__TXT p 
    {
        font-size: 1.1rem;
    }

    .businessFrame1__Cards
    {
        display : grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

/*================================= MEDIA QUERY FOR SMALLER DEVICES =======================*/
@media screen and (max-width : 525px)
{

    .about__HeaderContainer 
    {
        margin: 3rem auto;
        padding : 3rem 2rem;
    }

    .about__HeaderH3 
    {
        font-size: 2rem;
        line-height: 2.2rem;
    }

    .businessImg img {
        width: 60%;
    }

    .excalmanation 
    {
        top: -37%;
        right: 33.5%;
        width: 10px !important;
    }

    .about__HeaderSmTxt p 
    {
        font-size: 0.9rem;
        line-height: 1.1rem;
    }

    
    .business__Frame1 
    {
        margin: 1rem 0rem;
        padding: 1rem 2rem;
    }

    .businessFrame1__TXT h3 
    {
        font-size: 2rem;
        line-height : 2.2rem;
        text-align : left;
    }

    .businessFrame1__TXT p 
    {
        font-size: 1rem;
    }

    .businessFrame1__Cards 
    {
        grid-template-columns: repeat(1, 1fr);
    }

    .businessFrame__Card {
        max-width: 400px;
    }

    .shareHosting__Frame2Txt h3 
    {
        font-size: 2rem;
        line-height : 2.2rem;
    }

    .shareHosting__Frame2Cards 
    {
        max-width : 400px;
        width : 100%;
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width : 425px)
{
    .about__HeaderContainer 
    {
        margin: 1rem auto;
        padding: 4rem 2rem;
    }

    .businessImg img 
    {
        width: 70%;
    }

    .excalmanation 
    {
        top: -37%;
        right: 30.5%;
        width: 9px !important;
    }

    .businessHeader__smTag 
    {
        width: 45%;
    }

    .about__HeaderH3 {
        font-size: 1.6rem;
        line-height: 2rem;
    }

    .about__HeaderSmTxt p 
    {
        width : 90%;
        font-size: 0.7rem;
        line-height: 1rem;
    }

    .about__HeaderPlanBtn {
        padding: 0.3rem 0.5rem;
    }

    .businessFrame1__TXT h3 {
        font-size: 1.6rem;
        line-height: 1.8rem;
    }

    .businessFrame1__TXT p 
    {
        font-size: 0.9rem;
    }

    .shareHosting__Frame2Txt h3 {
        font-size: 1.6rem;
        line-height: 2rem;
    }

    .shareHosting__Frame2Txt p 
    {
        width: 80%;
        font-size : 0.9rem;
    }

    .priceYear__SmImg {
        display : none;
    }
}







/* media query for larger devices */
@media screen and (min-width : 1920px)
{
    .businessImg img
    {
        transform : scale(1);
    }

    .excalmanation 
    {
        position: absolute;
        top: -35%;
        right: 23%;
        width: 25px !important;
    }
}