@import url('https://fonts.googleapis.com/css2?family=REM:wght@200;300;400;500;600&display=swap');

body{
    font-family: 'REM', sans-serif !important;
}
.navbar {
    margin: 20px 30px;
    box-shadow: 12px 12px 24px rgba(252, 125, 65, 0.4);
    border-radius: 16px;
    background-color: #B00D23 !important;
}
.navbar-nav{
    align-items: end;
}
.navbar-brand{
    margin-right: 50px !important;
}
.nav-item{
    padding-right: 20px;
}
.nav-item a{
    color: #fff;
}
.nav-item a:hover{
   color: #F9A602;
}
.nav-link{
    font-family: 'REM', sans-serif;
    font-size: 16px;
    font-weight: 400;
}
.color{
    color: #fb5e5e;
}
.dropdown-item{
    color: #fb5e5e !important;
}
.dropdown-item:hover{
   color: #F9A602;
}

/* First banner start from here */
.first-banner{
    width: 100%;
    height: 600px;
    position: absolute;
    margin-top: 160px;
}
.appleimage{
    box-shadow: 6px 6px 24px 0 rgba(0, 0, 0, 0.08);
}
.text h3{
    margin-top: 40px;
    font-weight: 400;
    font-size: 40px;
    letter-spacing: 2px;
    color: #fb5e5e;
}
.para p{
    font-size: 18px;
    font-weight: 300px;
    margin-top: 10px;
}

/* second banner start here */

.second-banner{
    width: 100%;
    height: 380px;
    padding: 40px;
    margin-top: 1090px ;
    position: absolute;
    background-color: #efeeef;

}
.second-banner p{
    font-size: 18px;
}
.second-banner ul li {
    list-style: none;
}
.second-banner h3{
    font-size: 26px;
    padding-bottom: 10px;
    color: #fb5e5e;
}
.icon{
    width: 2.5%;
    margin-right: 10px;
}


/* footer start here */
.index-footer{
    width: 100%;
    height: 200px;
    position: absolute;
    margin-top: 1530px;
   
}
.footer-box{
    height: 150px;
    padding: 30px;
    border-radius: 60px 0 60px 0;
    /* box-shadow: 1px 10px 30px rgba(0, 0, 0, 0.1); */
    box-shadow: 12px 12px 24px rgba(252, 125, 65, 0.4);
    background-color: #B00D23;
}
.d-flex{
    display: flex !important;
}
.links ul{
    margin-top: 13px;
    list-style: none;   
}
.links ul li {
    margin-left: 10px;
    padding-right: 12px;
}
.links ul li a {
    text-decoration: none;
    color: #fff;
}
.links ul li a:hover{
  color: #F9A602;
}
.copyright p{
    margin-top: 10px;
    text-align: center;
    color: #fff;
}

.copyright a{
    color: #F9A602;
    text-decoration: none;
}

/* about us page start from here */
.first-banner-about{
 width: 100%;
 height: 300px;
 margin-top: 160px;
 position: absolute;
}

.banner{
    width: 100%;
    height: 200px;
    /* position: absolute; */
    /* margin-top: 160px; */
    background-color: #efeeef;
}

.banner h3{
   
    /* margin-top: 50px; */
    font-weight: 200;
    text-align: center !important;
    color: #B00D23;
    font-size: 40px;
}

/* second-banner start from here */
.second-banner-about{
    width: 100%;
    height: 500px;
    margin-top: 480px;
    position: absolute;
}

.second-banner-about h3{
    color: #fb5e5e;
    font-size: 22px;
    margin-bottom: 20px;
}

.second-banner-about p {
    font-size: 18px;
}

.second-banner-about ul li{
    list-style: none;
}

/* about page start from here */

.about-footer{
    width: 100%;
    height: 200px;
    position: absolute;
    margin-top: 4280px;
}

/* Innovation page start from here */

.product{
    margin-top: 10px;
}
.innovation-footer{
    width: 100%;
    height: 200px;
    position: absolute;
    margin-top: 5580px;
}

/* experience page start here */
.experience-footer{
    width: 100%;
    height: 200px;
    position: absolute;
    margin-top: 1730px;
}


.dream-footer{
    width: 100%;
    height: 200px;
    position: absolute;
    margin-top: 3270px; 
}

.therapy-footer{
    width: 100%;
    height: 200px;
    position: absolute;
    margin-top: 3800px; 
}

.benefit-footer{
    width: 100%;
    height: 200px;
    position: absolute;
    margin-top: 2240px;
}

.icon-apple{
    width: 3.5%;
    margin-right: 10px;
}

.healing-footer{
    width: 100%;
    height: 200px;
    position: absolute;
    margin-top: 3800px;
}

.yoga-footer{
    width: 100%;
    height: 200px;
    position: absolute;
    margin-top: 1265px;
}

.support-footer{
    width: 100%;
    height: 200px;
    position: absolute;
    margin-top: 2025px;
}

.paper-footer{
    width: 100%;
    height: 200px;
    position: absolute;
    margin-top: 1030px;
}
.paper a{
    text-decoration: none;
    color: #fb5e5e;
    
}

.inline{
    display: flex;
}
.contact a{
    text-decoration: none;
    color: #000;
}

/* mobile phone start here */

@media(min-width: 320px) and (max-width: 767px){
   
    /* .navbar{
        width: 54%;
    } */
    .index-footer{
        width: 100%;
        height: 200px;
        position: absolute;
        margin-top: 1530px;
       
    }
    .footer-box{
        height: 378px;
        padding: 30px;
        border-radius: 60px 0 60px 0;
        /* box-shadow: 1px 10px 30px rgba(0, 0, 0, 0.1); */
        box-shadow: 12px 12px 24px rgba(252, 125, 65, 0.4);
        background-color: #B00D23;
    }

    .index-footer {
        width: 100%;
        height: 378px;
        position: absolute;
        margin-top: 3360px;
    }

    .second-banner {
        width: 100%;
        height: 1004px;
        padding: 40px;
        margin-top: 2265px;
        position: absolute;
        background-color: #efeeef;
    }

    .inline{
        display: list-item;
    }
    .icon {
        width: 7%;
    }
     
    /* about footer start here */
    .about-footer {
        margin-top: 7540px;
    }
    .second-banner-about {
        margin-top: 264px;
    }
    .second-banner-about p {
        font-size: 16px;
    }
    .second-banner-about h3 {
        font-size: 18px;
    }
      /* apple benefit start from here */
   .benefit-footer {
    width: 100%;
    height: 380px;
    position: absolute;
    margin-top: 3750px;
}
/* dream footer start from here */

.dream-footer {
    width: 100%;
    height: 400px;
    position: absolute;
    margin-top: 5820px;
}
/* healing effect footer start from here */
.healing-footer {
    width: 100%;
    height: 400px;
    position: absolute;
    margin-top: 5960px;
}
.icon-apple {
    width: 5.5%;
    margin-right: 8px;
}
 
/* innovation footer start from here */
.innovation-footer {
    width: 100%;
    height: 400px;
    position: absolute;
    margin-top: 9335px;
}
/* experiance footer */
.experience-footer {
    width: 100%;
    height: 400px;
    position: absolute;
    margin-top: 2430px;
}

/* support footer start from here */

.support-footer {
    width: 100%;
    height: 401px;
    position: absolute;
    margin-top: 3340px;
}
.therapy-footer {
    width: 100%;
    height: 403px;
    position: absolute;
    margin-top: 5710px;
}

/* yoga page start from here */

.yoga-footer {
    width: 100%;
    height: 400px;
    position: absolute;
    margin-top: 1970px;
}

   }
 



   @media(min-width: 820px) and (max-width: 1110px){
    .second-banner {
        height: 600px;
        margin-top: 1630px;
    }
    .footer-box{
        height: 240px;
   
    }

    .index-footer {
        margin-top: 2300px;
        width: 100%;
        height: 330px;
    
    }
    /* yoga footer start from here */
    .yoga-footer {
        width: 100%;
        height: 383px;
        position: absolute;
        margin-top: 1550px;
    }
    .second-banner-about {
        margin-top: 373px;

    }
    /* therepy footer start here */
    .therapy-footer {
        width: 100%;
        height: 308px;
        position: absolute;
        margin-top: 4386px;
    }
   }

   @media(min-width: 768) and (max-width: 1024){

    .second-banner-about {
        margin-top: 362px;
 
    }
    .second-banner {
        height: 500px;
        margin-top: 1642px;
      
    }
    .index-footer {
        width: 100%;
        height: 250px;
        position: absolute;
        margin-top: 2190px;
    }
    .footer-box {
        height: 230px !important;
    }
    

   }