/* rem and em do Not depend on html font-size in media queries! Instead, 1rem = 1em = 16px */

/*================================================
  BELOW 1168px (Smaller desktops)
==================================================*/
@media (max-width:73em){
    html{
        font-size: 56.25%;
    }
    .container{
        padding: 0 2%;
    }
    .text-box {
        gap: 3.2rem;
        width: 80%;
    }
    .navbar .navbar-list {
        gap: 2.4rem;
    }
    .shape_02{
        display: none;
    }
    .shape_04 {
        top: 19.5%;
        right: 16.5%;
    }
    .shape_05{
        right: 2%;
    }
   .shape_03 {
    right: 17%;
   }
   .hero-image img {
    top: 32%;
    right: 22%;
   }
}

/*================================================
  BELOW 992px (Smaller desktops)
==================================================*/
@media(max-width:62em){
    .hero-section{
        padding: 9.6rem 0;
    }
    .header{
        padding: 2rem 5%;
        background: #FC5156;
    }
    .header .header-row{
        height: 4rem;
    }
    .site-logo{
        padding-left: 0;
    }
    .heading{
      font-size: 3.2rem;
    } 
    .grid-col-2{
        grid-template-columns: 1fr;
        justify-content: center;
        gap: 4.8rem;
    }
    .heading-primary{
        font-size: 3.6rem;
        margin-bottom: 2.4rem;
        text-align: center;
    }
    .sticky .header{
        background: #FC5156;
    }
    .sticky .logo-white{
        display: block;
    }
    .sticky .logo-black{
        display: none;
    }
    .text-box{
        grid-template-columns: 1fr;
        justify-content: center;
        width: 100%;
    }
    .text-box div{
        text-align: center;
    }
    
    .text-box .hero-text{
        padding: 0;
        grid-row: 1; 
        text-align: center;
        font-size: 1.8rem; 
    }
    .hero-image::after,
    .hero-image::before{
        display: none;
    }
    .hero-image{
        justify-self: center;
        align-self: baseline;
    }
    .hero-image img {
        position: relative;
        z-index: -1;
    }
    .hero-btn{
        background: #FC5156;
    }
    .shape_01,
    .shape_05,
    .shape_03,
    .shape_04,
    .shape_06,
    .about_bg_shape{
        display: none;
    }
    .about-icons .play-btn {
        left: 47.2%;
    }
    .why_bg{
        top: -78%;
        left: -4%;
    }
    .row .heading-box .pos-7::before {
        left: 29%;
    }
    .navbar .navbar-list .main-nav-link:visited{
        color: #fff;
    }

    /* MOBILE NAVIGATION */
    .btn-mobile-nav{
        display: block;
        z-index: 9999;
    } 
   .navbar{
    background: #FC5156;
    position: absolute;
    top: 8rem;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateX(100%);
    padding: 4.8rem 5rem;

    display: flex;
    align-items: center;
    transition: all 0.3s ease-in;

    
    /* Hide Navigation */ 
    opacity: 0;

    pointer-events: none;
    visibility: hidden;
    }
    .nav-open .navbar{
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);
        z-index: 999;
    }
    .nav-open .icon-mobile-nav[name="close-outline"]{
        display: block;
    }
    .nav-open .icon-mobile-nav[name="menu-outline"]{
        display: none;
    }
    .navbar-list{
        flex-direction: column;
        gap: 4.8rem;
    }
    .nav-open .main-nav-link:link,
    .nav-open .main-nav-link:visited{
        font-size: 2rem;
        color: #fff;
    }
    .nav-open .navbar-list{
        align-items: start;
        gap: 3.2rem;
    }
}

/*================================================
  BELOW 768px (tab/tablet)
==================================================*/

 @media (max-width:48em){
    html{
        font-size: 50%;
    }
    .text-box{
        gap: 2rem;
    }
    
    .hero-image img {
        position: sticky;
        height: 25rem;
    }
    .grid-col-2{
        gap: 1.2rem;
    }

    .heading{
        font-size: 3.2rem;
    }
    .grid-cols-3{
        grid-template-columns: 1fr 1fr;
    }
    .grid-cols-2{
        grid-template-columns: 1fr;
        gap: 4.8rem;
    }
    .sub-heading::before{
        top: -49%;
        left: 42%;
    }
    .about .pos1::before{
        left: 38%;
    }
    .about_shape_01 {
        top: 19%;
        left: 27%;
    }
    .about_shape_02 {
        top: 15%;
        left: 27%;
    }
    .about-content{
        padding-top: 3.2rem;
    }
    .about-icons::before {
        left: 45.5%;
    }
    .why_bg{
        top: -21%;
        left: -10%;
    }
    .product .pos-3::before{
        left: 37%;
    }
    .faq-box{
        grid-template-columns: 1fr;
    } 
    .accoridian{
        font-size: 2rem;
    }
    .faq-image-box{
        display: none;
    }
    .testimonial .pos-5::before {
        left: 40%;
    }
    .contact .row::before,
    .contact .row::after{
        display: none;
    }
    .contact{
        padding-top: 3.2rem;
    }
    .contact .row{
        grid-template-columns: 1fr;
        justify-content: center;
    }
    .contact .heading-box{
        grid-row: 1;
        margin: 0;
    }
    .newsletter-box{
        width: 100%;
        margin-left: 0;
    }
    .newsletter-box .pos-6::before{
        left: -2%;
    }
    .row .heading-box .pos-7::before{
        top: -40%;
        left: 40%;
    }
    .contact-box{
        grid-template-columns: 1fr;
    
    }
    .contact-box .form{
        margin-bottom: 3.2rem;
    }
    .contact-box .contact-info{
        width: 100%;
    }

}

/*================================================
  BELOW 448px (Mobile phone)
==================================================*/
@media (max-width:28em){
    html{
        font-size: 43.75%;    
    }
    /* .section{
        padding: 2.4rem 5%;
    } */
  
    .heading-primary{
        font-size: 2.4rem;
    }
    .text-box .hero-text{
        font-size: 1.4rem;
    }
    .sub-heading::after,
    .sub-heading::before{
        display: none;
    }
    .box-size{
    width: 100%;
    }
    .sub-heading{
        font-size: 1.6rem;
    }
    .heading{
        font-size: 2.4rem;
    }
    .grid-cols-3{
        grid-template-columns: 1fr;
    }
    .feature-box .row .box h3 {
        font-size: 1.8rem;
    }
    .about_shape_01,
    .about_shape_02,
    .about-image-box,
    .why_bg{
        display: none;
    }
    .about-content {
        padding-bottom: 0;
    }
    .faq_content_box.active .panel{
        max-height: 16rem;
    }
}