:root{
    --primary:#000066;
    --secondary:#FF9D47;
    --dark:#170000;
    --accent:#64C8BC;
    --white:#FFFFFF;
    --h1:45px;
    --h3:30px;
    --h4:24px;
    --h5:20px;
    --p:18px;

}
body{
    background: transparent linear-gradient(180deg, #F1F6F9 0%, #FEEEEE 100%) 0% 0% no-repeat padding-box;
   font-family: "Poppins", serif;
}


/** Poopins Font Import **/
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    src: 
        url('fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
}

/** Carvet font import **/
@font-face {
    font-family: 'Carvert';
    font-style: normal;
    font-display: swap;
    src: 
        url('fonts/Caveat-VariableFont_wght.ttf') format('truetype');
}

/** Avenir LT Pro Font Import **/
@font-face {
    font-family: 'Avenir LT Pro';
    font-style: normal;
    font-display: swap;
    src: 
       url('fonts/avenir-lt-pro/AvenirLTProLightOblique.otf') format('opentype');
    font-weight: 400;
}

 @font-face {
    font-family: 'Avenir LT Pro';
    font-style: normal;
    font-display: swap;
    src: 
       url('fonts/avenir-lt-pro/AvenirLTProMedium.otf') format('opentype');
    font-weight: 500;
}
@font-face {
    font-family: 'Avenir LT Pro';
    font-style: normal;
    font-display: swap;
    src: 
       url('fonts/avenir-lt-pro/AvenirLTProHeavyOblique.otf') format('opentype');
    font-weight: 700;
}
@font-face {
    font-family: 'Avenir LT Pro';
    font-style: normal;
    font-display: swap;
    src: 
       url('fonts/avenir-lt-pro/AvenirLTProBlack.otf') format('opentype');
    font-weight: 900;
}


/** Navbar **/
.navbar{
    background: var(--white) 0% 0% no-repeat padding-box !important;
    box-shadow: 0px 0px 6px #64C8BC45;
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
}

.nav-link{
    font-size: var(--p);
    color: var(--dark);
    font-weight: 400;
    font-family: "Poppins", serif;
    padding-left: 40px !important;
}
.pl-md{
    padding-left: 60px;
}
.btn-secondary{
    padding-left: 30px;
    padding-right: 30px;
    font-size: var(--p);
    color: var(--dark) !important;
    font-weight: 400 !important;
    background: var(--secondary) !important;
    border-radius: 8px;
    border: 1px solid var(--secondary) !important;
    font-family: "Poppins", serif;
}

/** Banner **/
.banner-block{
    padding-top:80px;
    padding-bottom: 80px;
    text-align: center;
}
.banner-block h2{
    font-family: 'Carvert', sans-serif;
    font-size: var(--h1);
    font-weight: bold;
    color: var(--primary);
    line-height: 57px;
}
.banner-block h2 span{
    color: var(--secondary);
}
.banner-block h5{
    font-size: var(--h3);
    font-weight: 500;
    color: var(--primary);
    font-family: 'Avenir LT Pro', sans-serif;
    line-height: 36px;
    margin-top: 20px;
}
.banner-block p{
    font-size: var(--p);
    color: var(--dark);
    font-weight: 500;
    margin-top: 30px;
}
.hero-section{
    background: url('../assets/hero-section-bg-svg.svg');
    background-size: cover;
    background-position: bottom;
}
.btn-primary{
    padding-left: 30px;
    padding-right: 30px;
    font-size: var(--p);
    color: var(--dark) !important;
    font-weight: 400 !important;
    background: var(--accent) !important;
    border-radius: 25px;
    border: 1px solid var(--accent) !important;
    font-family: "Poppins", serif;
    padding-top:10px;
    padding-bottom: 10px;
}

/** Slider Arrow Down **/
.slider-arrow-down-section{
    padding-top:30px;
    text-align: center;
}
.slider-arrow-down-section h6{
    font-size: var(--h4);
    color: var(--primary);
    font-family: 'Avenir LT Pro', sans-serif;
    line-height: 29px;
    font-weight: 500;
}
.slider-arrow-down-section img{
    width: 23px;
    height: 28px;
    margin-top: 10px;
}

/** Features List **/
.features-list .col-auto{
    width:20%
}
.features-list{
    padding-top:60px;
    padding-bottom: 60px;
}
.feature-card{
    margin-top:30px;
    text-align: center;
}
.feature-card img{
    width: 115px;
height: 115px;
}
.feature-card h5{
    font-size: var(--p);
    color: var(--dark);
    font-weight: 400;
    margin-top:20px;
    text-align: center;
}

/** Usage **/
.usage-block{
    background: var(--accent) 0% 0% no-repeat padding-box;
    border-radius: 20px;
    padding:50px;
    text-align: center;
    margin-top: 60px;
    position: relative;
}
.usage-block::after{
    content: '';
    position: absolute;
    background: url('../assets/arrow_doodle_1.svg');
    background-size: 100% 100%;
    width: 171px;
height: 208px;
 bottom: -140px;
  z-index: 1;
  right: 0px;
  right: 25%;
}
.usage-block h6{
    font-size: var(--h4);
    color: var(--dark);
    font-family: 'Avenir LT Pro', sans-serif;
    line-height: 29px;
    font-weight: 500;
    margin-top:10px;
}
.usage-block .btn-secondary{
    padding-top:10px;
    padding-bottom: 10px;
    border-radius: 25px;
    margin-top:30px;
}

/** Key features **/
.key-features{
    padding-top:60px;
}
.section-title h6{
    font-size: var(--h5);
    color: var(--primary);
    font-weight: 500;
}
.section-title h2{
    font-size: var(--h1);
    color: var(--dark);
    font-weight: bold;
    font-family: 'Carvert', sans-serif;
    line-height: 60px;
}
.key-feature-content ul li{
    color: var(--accent);
    font-size: var(--h3);
    margin-bottom: 10px;
}
.key-feature-content ul li span{
    font-size: var(--p);
    color: var(--dark);
}
.key-feature-image{
    padding-right: 30px;
}
.self-center{
    align-self: center;
}

/** Explore the Offers **/
.explore-features{
    padding-top: 60px;
    position: relative;
    padding-bottom: 60px;
}
.explore-features::before{
    content: '';
    position: absolute;
    background: url('../assets/arrow_doodle_2.svg');
    background-size: 100% 100%;
    width: 209px;
height: 212px;
left: 25%;
  top: -60px;
}
.offer-card{
    background: var(--white);
    padding: 30px;
    width: 500px;
    border-radius: 10px;
}
.offer-card h4{
    font-size: var(--h4);
    color: var(--secondary);
    font-weight: 500;
}
.offer-card p{
    font-size: var(--p);
    color: var(--dark);
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 0px;
}
.custom-prev,.custom-next{
    width: 28px;
    height: 28px;
}
.owl-next,.owl-prev{
    position: absolute;
    top: 45%;
}
.owl-prev{
    left: -20px;
}
.owl-next{
    right: -20px;
}
.owl-carousel{
    padding-left: 30px;
    padding-right: 30px;
}

/** tour-our **/
.tour-our{
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: center;
    position: relative;
}
.tour-our::before{
    content: '';
    position: absolute;
    background: url('../assets/arrow_doodle_3.svg');
    width: 136px;
    height: 165px;
    transform: matrix(0.95, 0.33, -0.33, 0.95, 0, 0);
    right: 26%;
  top: -60px;
}
.tour-our h3{
    font-size: var(--h3);
    color: var(--primary);
    font-family: 'Avenir LT Pro';
    font-weight: 500;
    margin-top:30px;
}
.tour-our h3 span{
    color: var(--secondary);
    font-weight: bold;
    font-family: 'Carvert', sans-serif;
    font-size: var(--h1);
}

/** Offerings **/
.offerings{
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: center;
    position: relative;
}

/** Copyright **/
.copyright{
    border-top:2px solid var(--dark);
    padding-top:20px;
    padding-bottom: 20px;
}
.copyright h6{
    font-size: var(--p);
    color: var(--dark);
    font-weight: 500;
    margin-bottom: 0px;
}

/** Contact us **/
.contact-hero-section{
    position: relative;
}
.contact-hero-section::after{
    content: '';
    position: absolute;
    background: url('../assets/hero-section-bg-svg.svg');
    height: 560px;
  left: 0px;
  right: 0px;
  top: 0px;
  background-size: 100% 100%;
}
.contact-us{
    padding-top: 60px;
    position: relative;
    z-index: 1;
}
.contact-us h5{
    font-size: var(--h4);
    color: var(--primary);
    font-weight: 500;
    font-family: 'Avenir LT Pro', sans-serif;
    line-height: 29px;
}
.contact-us h2{
    font-family: 'Carvert', sans-serif;
    font-size: var(--h1);
    font-weight: bold;
    color: var(--primary);
    line-height: 57px;
    margin-top:10px;
}
.form-control{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070 !important;
    border-radius: 10px !important;
    margin-top: 20px;
    padding:12px !important;
    font-size:var(--p);
}
.contact-hero-section .navbar{
    position: relative;
    z-index: 1;
}

.contact-us form h6{
    font-size: var(--p);
    color: var(--dark);
    font-weight: 500;
    margin-top:30px;
}
.contact-us form h6 span{
    color: var(--secondary);
}

/** Responsive Adjustments **/
@media only screen and (min-width:900px) and (max-width:1550px) {
    .tour-our::before {
        right:24%;
    }
}
@media only screen and (min-width:900px) and (max-width:1440px) {
    .tour-our::before {
        right:20%;
    }  
    .explore-features::before {
        left: 20%;
        top: -70px;
      }
}


/** Mobile Responsive **/
@media only screen and (max-width:800px) {
    .navbar-brand img{
        width: 180px;
    }
    .banner-block h2{
        font-size: 40px;
    }
    .banner-block h5,.tour-our h3{
        font-size: 24px;
    }
    .banner-block p,.key-feature-content ul li span, .btn-primary,.btn-secondary,.offer-card p,.copyright h6{
        font-size: 16px;
    }
    .key-feature-content ul li {
        font-size: 20px;
        margin-bottom: 0px;
        line-height: initial;
      }
    .banner-block p br,.usage-block h6 br,.tour-our h3 br{
        display: none;
    }
    .features-list .col-auto{
        width:50%;
    }
    .key-feature-image{
       padding-right: 0px;
    }
    .usage-block {
        padding: 20px;
    }
    .usage-block::after {
        width: 100px;
        height: 100px;
        bottom: -90px;
        z-index: 1;
        right: 0px;
    }
    .key-feature-content{
        margin-top:30px;
    }
    .explore-features::before {
        width: 120px;
        height: 120px;
        left: 0px;
        top: -60px;
    }
    .usage-block h6,.offer-card h4,.contact-us h5 {
        font-size: 20px;
    }
    .offer-card{
        width:340px;
    }
    .owl-prev {
        left: 13px;
    }
    .owl-next{
        right:13px;
    }
    .tour-our::before {
        width: 120px;
    height: 120px;
        right: 0px;
        top: -50px;
        background-size: 100% 100%;
    }
    .section-title h2,.contact-us h2 {
        font-size: 40px;
        line-height: initial;
    }
    .explore-features {
       padding-bottom: 30px;
    }
    .copyright .text-end{
        text-align: center !important;
        margin-top:10px;
    }
    .copyright{
        text-align: center;
    }
    html,body{
        overflow-x: hidden;
    }
    .offerings img{
        margin-top:20px;
    }

}
.offerings img{
    border-radius: 20px;
}

.cursor-pointer{
    cursor: pointer;
}