/*--------------------------------------------------------------

This is main CSS file that contains custom style rules used in this template

--------------------------------------------------------------*/



/*------------------------------------*\

    Table of contents

\*------------------------------------*/



/*------------------------------------------------

CSS STRUCTURE:



1. VARIABLES

2. GENERAL TYPOGRAPHY



--------------------------------------------------------------*/

body {

    --heading-font: "Quattrocento", serif;

    --heading-font-weight: 400;

    --heading-line-height: 1.24;

    --swiper-theme-color: #567290;

    --swiper-pagination-color: #567290;



    /* bootstrap */

    --bs-body-font-family: "Jost", sans-serif;

    --bs-body-font-size: 19px;

    --bs-body-font-weight: 400;

    --bs-body-line-height: 1.5;

    --bs-body-color: #1A1A1A;

    --bs-body-color-rgb: 1.6, 1.6, 1.6;

    --bs-body-bg-rgb: 246, 244, 239;

    --bs-body-bg: #fff;



    --bs-primary: #181964;

    --bs-secondary: #F6F4EF;

    --bs-black: #000;

    --bs-white: #fff;

    --bs-light: #f8f8f8;

    --bs-dark: #1A1A1A;

    --bs-gray: #989898;

    --bs-gray-100: #F2F2F2;

    --bs-gray-200: #EFEFEF;

    --bs-gray-300: #DCDAD4;

    --bs-gray-800: #3D3A38;



    /*--bs-primary-rgb: 12, 51, 151;*/
    --bs-primary-rgb: 24, 25, 100;

    --bs-secondary-rgb: 246, 244, 239;

    --bs-black-rgb: 17, 17, 17;

    --bs-light-rgb: 241, 241, 240;

    --bs-dark-rgb: 23, 29, 32;



    --bs-link-color: #567290;

    --bs-link-color-rgb: 86, 114, 144;

    --bs-link-decoration: underline;

    --bs-link-hover-color: #567290;

    --bs-link-hover-color-rgb: 135, 169, 188;



    --bs-accordion-active-color: #567290;

    --bs-primary-text-emphasis: #567290;

    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csymbol xmlns='http://www.w3.org/2000/svg' id='plus' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z'/%3E%3C/symbol%3E");

}



body {

    letter-spacing: 0.03rem;

}



h1,

.h1,

h2,

.h2,

h3,

.h3,

h4,

.h4,

h5,

.h5,

h6,

.h6 {

    font-family: var(--heading-font);

    font-weight: var(--heading-font-weight);

    line-height: var(--heading-line-height);

    text-transform: capitalize;

}



h1.light,

.h1,

h2.light,

.h2,

h3.light,

.h3,

h4.light,

.h4,

h5.light,

.h5,

h6.light,

.h6 {

    color: var(--bs-light);

}



h1,

h2,

h3 {

    margin: 25px 0;

}



h5,

h6 {

    letter-spacing: 1px;

}



h1,

.h1 {

    font-size: 4.125rem;

}



h2,

.h2 {

    font-size: 3.6rem;

}



h3,

.h3 {

    font-size: 1.375rem;

}



h4,

.h4 {

    font-size: 1.8rem;

}



h5,

.h5 {

    font-size: 1.4rem;

}



h6,

.h6 {

    font-size: 1rem;

}



a {

    text-decoration: none;

    transition: all 0.3s ease-in-out;

}



a:hover {

    color: var(--bs-primary);

}



::selection {

    color: var(--bs-light);

    background: var(--bs-primary);

}



/* container fluid */

/* .container-fluid {

  max-width: 1800px;

} */



.bg-white-50 {

    background: rgba(255, 255, 255, 0.7);

}



@media (min-width: 1600px) {



    .container,

    .container-lg {

        max-width: 1430px;

    }



    .container,

    .container-md {

        max-width: 1200px;

    }

}



/* list group */

.list-group-item {

    --bs-list-group-item-padding-x: 0;

    --bs-list-group-border-width: 0;

}



/* btn */

.btn {

    --bs-btn-border-radius: 0;

    font-size: 18px;

    transition: all 0.3s ease-in-out;

}



.btn-primary {

    --bs-btn-color: var(--bs-light);

    --bs-btn-bg: var(--bs-primary);

    --bs-btn-border-color: var(--bs-primary);

    --bs-btn-hover-color: var(--bs-light);

    --bs-btn-hover-bg: var(--bs-dark);

    --bs-btn-hover-border-color: var(--bs-dark);

    --bs-btn-focus-shadow-rgb: 49, 132, 253;

    --bs-btn-active-color: var(--bs-light);

    --bs-btn-active-bg: var(--bs-dark);

    --bs-btn-active-border-color: var(--bs-dark);

    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: var(--bs-light);

    --bs-btn-disabled-bg: var(--bs-primary);

    --bs-btn-disabled-border-color: var(--bs-primary);

}



.btn-outline-primary {

    --bs-btn-color: var(--bs-primary);

    --bs-btn-border-color: var(--bs-primary);

    --bs-btn-hover-color: #fff;

    --bs-btn-hover-bg: var(--bs-primary);

    --bs-btn-hover-border-color: var(--bs-primary);

    --bs-btn-focus-shadow-rgb: 13, 110, 253;

    --bs-btn-active-color: #fff;

    --bs-btn-active-bg: var(--bs-primary);

    --bs-btn-active-border-color: var(--bs-primary);

    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: var(--bs-primary);

    --bs-btn-disabled-bg: transparent;

    --bs-btn-disabled-border-color: var(--bs-primary);

    --bs-gradient: none;

}



.btn-light:hover {

    --bs-btn-color: var(--bs-light);

    --bs-btn-bg: var(--bs-primary);

    --bs-btn-border-color: var(--bs-primary);

    --bs-btn-hover-color: var(--bs-light);

    --bs-btn-hover-bg: var(--bs-primary);

    --bs-btn-hover-border-color: var(--bs-primary);

    --bs-btn-focus-shadow-rgb: 49, 132, 253;

    --bs-btn-active-color: var(--bs-light);

    --bs-btn-active-bg: var(--bs-primary);

    --bs-btn-active-border-color: var(--bs-primary);

    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: var(--bs-light);

    --bs-btn-disabled-bg: var(--bs-primary);

    --bs-btn-disabled-border-color: var(--bs-primary);

}



.btn-dark:hover {

    --bs-btn-color: var(--bs-light);

    --bs-btn-bg: var(--bs-primary);

    --bs-btn-border-color: var(--bs-primary);

    --bs-btn-hover-color: var(--bs-light);

    --bs-btn-hover-bg: var(--bs-primary);

    --bs-btn-hover-border-color: var(--bs-primary);

    --bs-btn-focus-shadow-rgb: 49, 132, 253;

    --bs-btn-active-color: var(--bs-light);

    --bs-btn-active-bg: var(--bs-primary);

    --bs-btn-active-border-color: var(--bs-primary);

    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: var(--bs-light);

    --bs-btn-disabled-bg: var(--bs-primary);

    --bs-btn-disabled-border-color: var(--bs-primary);

}



.btn-group-lg>.btn,

.btn-lg {

    --bs-btn-padding-y: 0.8rem;

    --bs-btn-padding-x: 4.5rem;

    --bs-btn-font-size: 1.25rem;

}



.btn.btn-shadow {

    box-shadow: 0px 6px 39px 0px rgba(91, 45, 42, 0.20);

}





/* dropdown menu */

.dropdown-menu {

    --bs-dropdown-link-color: var(--bs-primary);

    --bs-dropdown-link-hover-color: #fff;

    --bs-dropdown-link-hover-bg: var(--bs-primary);

    --bs-dropdown-link-active-color: #fff;

    --bs-dropdown-link-active-bg: var(--bs-primary);

}



.form-control {

    border-radius: 0;

}



.form-control:focus {

    border-color: var(--bs-gray-400);

    ;

    outline: 0;

    box-shadow: none;

}



.form-check-input:checked {

    background-color: var(--bs-primary);

    border-color: var(--bs-primary);

}



.form-check-input:focus {

    box-shadow: none;

}



/* text white */

.text-white {

    --heading-color: var(--bs-light);

    --bs-breadcrumb-item-active-color: var(--bs-light);

    --bs-breadcrumb-divider-color: var(--bs-light);

    --bs-link-color-rgb: var(--bs-light-rgb);

    --bs-link-hover-color-rgb: var(--bs-light-rgb);

}



.text-white .nav-link {

    --bs-nav-link-color: var(--bs-light);

    --bs-nav-link-hover-color: var(--bs-light);

    --bs-nav-link-active-color: var(--bs-light);

    --bs-navbar-active-color: var(--bs-light);

}



/*--- Image hover Effects

-----------------------------------------------*/

.image-zoom-effect {

    display: flex;

    flex-wrap: wrap;

}



.image-zoom-effect .image-holder {

    width: 100%;

    height: auto;

    overflow: hidden;

}



.image-zoom-effect img {

    transform: scale(1.1);

    will-change: transform;

    transition: transform 1s cubic-bezier(0.25, 0.26, 0.25, 0.24);

    z-index: 0;

}



.image-zoom-effect:hover img {

    transform: scale(1);

}



/* navbar */

.navbar.fixed-top {

    transition: background-color 0.6s ease-out;

}



/* margin */

.my-lg-6 {

    margin-top: 4.5rem;

    margin-bottom: 4.5rem;

}



.my-lg-7 {

    margin-top: 6.5rem;

    margin-bottom: 6.5rem;

}



.my-lg-8 {

    margin-top: 8.5rem;

    margin-bottom: 8rem;

}



.my-lg-9 {

    margin-top: 10.5rem;

    margin-bottom: 10rem;

}



.my-lg-10 {

    margin-top: 12.5rem;

    margin-bottom: 12.5rem;

}



.mt-lg-0 {

    margin-top: 0rem;

}



.mb-lg-0 {

    margin-bottom: 0rem;

}



/* padding top and bottom */

.py-lg-6 {

    padding-top: 4.5rem;

    padding-bottom: 4.5rem;

}



.py-lg-7 {

    padding-top: 6.5rem;

    padding-bottom: 6.5rem;

}



.py-lg-8 {

    padding-top: 8.5rem;

    padding-bottom: 8.5rem;

}



.py-lg-9 {

    padding-top: 10.5rem;

    padding-bottom: 10.5rem;

}



.py-lg-10 {

    padding-top: 12.5rem;

    padding-bottom: 12.5rem;

}



.py-lg-11 {

    padding-top: 14.5rem;

    padding-bottom: 14.5rem;

}



.py-lg-12 {

    padding-top: 16.5rem;

    padding-bottom: 16.5rem;

}



/* padding left and right */

.px-lg-6 {

    padding-left: 4.5rem;

    padding-right: 4.5rem;

}



.px-lg-7 {

    padding-left: 6.5rem;

    padding-right: 6.5rem;

}



.px-lg-8 {

    padding-left: 8.5rem;

    padding-right: 8.5rem;

}



.px-lg-9 {

    padding-left: 10.5rem;

    padding-right: 10.5rem;

}



.px-lg-10 {

    padding-left: 12.5rem;

    padding-right: 12.5rem;

}



.px-lg-11 {

    padding-left: 14.5rem;

    padding-right: 14.5rem;

}



.px-lg-12 {

    padding-left: 16.5rem;

    padding-right: 16.5rem;

}



/* padding none */

.pt-lg-0 {

    padding-top: 0rem;

}



.pb-lg-0 {

    padding-bottom: 0rem;

}



/* - Border Radius

------------------------------------------------------------- */

.rounded-6 {

    border-radius: 3rem;

}



.rounded-7 {

    border-radius: 4rem;

}



.rounded-8 {

    border-radius: 5rem;

}



.rounded-9 {

    border-radius: 6rem;

}



.rounded-10 {

    border-radius: 7rem;

}



.rounded-11 {

    border-radius: 8rem;

}



/* - Background Color

------------------------------------------------------------- */

.bg-white-trans {

    --bs-bg-opacity: 0.6;

    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;

}



.bg-gray-1 {

    background-color: var(--bs-gray-100);

}



.bg-gray-1:hover {

    background-color: var(--bs-gray-200);

}



.bg-gray-2 {

    background-color: var(--bs-gray-200);

}



/* - Font Family

------------------------------------------------------------- */

.heading-font {

    font-family: var(--heading-font);

}



.body-font {

    font-family: var(--bs-body-font-family);

}



/* - Display Header

------------------------------------------------------------- */

@media (min-width: 1200px) {

    .display-1 {

        font-size: 3.25rem;

    }

}



/* - Svg Color

------------------------------------------------------------- */

.svg-primary {

    fill: var(--bs-primary);

    color: var(--bs-primary);

}



.svg-white {

    fill: var(--bs-white);

    color: var(--bs-white);

}



/* - Preloader

------------------------------------------------------------- */

*.preloader {

    width: 100%;

    height: 100%;

    position: fixed;

    z-index: 10000;

    background: var(--bs-gray-200);

    display: flex;

    justify-content: center;

    align-items: center;

}



.preloader:last-child {

    margin-right: 0;

}



.dot {

    display: inline-block;

    animation: loader 5s infinite ease-out;

}



@keyframes loadingInner {

    0% {

        transform: translate(0, 0);

    }



    50% {

        transform: translate(0, 30px);

    }



    100% {

        transform: translate(0, 0);

    }

}



/* =Animate the stuff

------------------------ */

.loader .dot:nth-last-child(1) {

    animation: loadingInner 0.6s 0.1s linear infinite;

}



.loader .dot:nth-last-child(2) {

    animation: loadingInner 0.6s 0.3s linear infinite;

}



.loader .dot:nth-last-child(3) {

    animation: loadingInner 0.6s 0.5s linear infinite;

}



/* - Header

------------------------------------------------------------- */

.offcanvas-body .navbar-nav a.nav-link.active,

.offcanvas-body .navbar-nav a.nav-link:hover {

    color: var(--bs-primary);

}



.user-items input::placeholder {

    color: var(--bs-light);

}



.offcanvas.show a.nav-link {

    color: var(--bs-black) !important;

    font-size: 2.8rem;

}



/* - Sticky Header

------------------------------------------------------------- */

.site-header {

    width: 100%;

    transition: background-color 0.3s ease;

}



.site-header.sticky {

    background-color: var(--bs-white);

    box-shadow: 0px 0px 20px 0px rgba(41, 41, 41, 0.16);

}



/* - Billboard

------------------------------------------------------------- */

#intro .banner-content {

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

}

@media (max-width: 1024px) {

    #intro .banner-content {
        top: 50%;
        left: 50%;
        right: unset; 
        bottom: unset; 
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        width: 95%;
        padding-bottom: 0 !important;
    }
}



/* - Trending

------------------------------------------------------------- */

.product-content .icon-caret-arrow {

    top: 40%;

    width: 73px;

    height: 73px;

    cursor: pointer;

    z-index: 3;

}



.product-content .icon-caret-arrow:hover {

    background-color: var(--bs-gray-300);

}



.product-content .icon-caret-arrow.left-side {

    left: 80px;

}



.product-content .icon-caret-arrow.right-side {

    right: 80px;

}



@media (max-width: 600px) {

    .product-content .icon-caret-arrow.left-side {

        left: 20px;

    }



    .product-content .icon-caret-arrow.right-side {

        right: 20px;

    }

}





/* - Collections

------------------------------------------------------------- */

#collection .product-info {

    top: 10px;

    bottom: 0;

    left: 0;

    right: 0;

    opacity: 0;

    transition: 0.7s ease-in-out;

    cursor: pointer;

    transform: rotate(5deg);

}



#collection .collection-item:hover .product-info {

    top: 0;

    opacity: 1;

    transform: rotate(0);

}



#collection .border {

    width: 96%;

    height: 96%;

}



/* - Testimonials

------------------------------------------------------------- */

#testimonials .icon-arrow {

    top: 50%;

    cursor: pointer;

    color: var(--bs-gray);

}



#testimonials .icon-arrow.left-side {

    left: 20%;

}



#testimonials .icon-arrow.right-side {

    right: 20%;

}



@media only screen and (max-width: 767px) {

    #testimonials .icon-arrow {

        top: 85%;

    }



    #testimonials .icon-arrow.left-side {

        left: 40%;

    }



    #testimonials .icon-arrow.right-side {

        right: 40%;

    }

}



/* - Video

------------------------------------------------------------- */

.video-content a.youtube.play-btn {

    width: 90px;

    height: 90px;

}



/* - Instagram

------------------------------------------------------------- */

#instagram-wrap .insta-item {

    top: 0;

    bottom: 0;

    left: 6px;

    right: 0;

    opacity: 0;

    transition: 0.7s ease-in-out;

    cursor: pointer;

    transform: rotate(5deg);

}



#instagram-wrap .image-holder:hover .insta-item {

    top: 6px;

    opacity: 1;

    transform: rotate(0);

    background-color: rgba(0, 0, 0, 0.2);

}



#instagram-wrap .border {

    width: 94%;

    height: 94%;

}



/* - Footer

------------------------------------------------------------- */

.footer-menu svg.send {

    right: 0;

}



/* - Hero Content

------------------------------------------------------------- */

.hero-content {

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

}



/* - About Us Page

------------------------------------------------------------- */



/* -Our Team

------------------------------------------------------------- */

.team-member ul.social-links {

    top: 0;

}



.team-member ul li {

    width: 30px;

    padding: 5px;

    transform: rotatey(-90deg) perspective(100px);

    transform-origin: left;

    cursor: pointer;

    transition: .5s ease-in-out;

    background-color: var(--bs-light);

}



.team-member ul li:first-of-type {

    transition-delay: .3s;

}



.team-member ul li:nth-of-type(2) {

    transition-delay: 0.6s;

}



.team-member ul li:nth-of-type(3) {

    transition-delay: 0.9s;

}



.team-member ul li:last-of-type {

    transition-delay: 1.3s;

}



.team-member:hover ul li {

    transform: rotatey(0deg);

}



/* - Single Product Page

------------------------------------------------------------- */

.product-quantity .input-group {

    width: 170px;

    gap: 2px;

}



.product-quantity #quantity,

.product-quantity .btn-number {

    width: 50px;

    height: 50px;

    background: var(--bs-light);

    color: var(--bs-dark);

}



.nav-tabs .nav-item.show .nav-link,

.nav-tabs .nav-link.active {

    color: var(--bs-light);

    background-color: var(--bs-primary);

    border: none;

}



/* - FAQs Page

------------------------------------------------------------- */

#faqs .accordion-button.collapsed::after {

    content: "";

    background-repeat: no-repeat;

    background-size: 2rem;

    width: 1.5rem;

    height: 1.5rem;

    transform: rotate(0deg);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");

}



#faqs .accordion-button:not(.collapsed)::after {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='minus' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");

}



#faqs .accordion-button:focus {

    border-color: var(--bs-light);

    box-shadow: var(--bs-light);

}



/*Custom Css*/

#intro {

    background-image: url(images/banner-image1.jpg);

    background-repeat: no-repeat;

    background-position: center;

    width: 100%;

    height: 100vh;

    background-size: cover;

}



#intro .banner-content .heading {

    font-family: Dancing Script, cursive;

    font-size: 70px;
    text-shadow: 2px 2px #000;

}



#ctaAvailability {

    background-image: url(images/blog-item.jpg);

    background-repeat: no-repeat;

    background-position: center;

    background-attachment: fixed;

    width: 100%;

    height: 600px;

    background-size: 100% auto  ;



}

@media (min-width: 1200px) and (max-width: 1299.98px) {
    #ctaAvailability {
        min-height: 750px;
        height: 750px;
        background-size: auto 100%;
    }
}


@media (min-width: 1100px) and (max-width: 1199.98px) {
    #ctaAvailability {
        min-height: 900px;
        height: 900px;
        background-size: auto 100%;
    }
}


@media (min-width: 992px) and (max-width: 1099.98px) {
    #ctaAvailability {
        min-height: 800px;
        height: 800px;
        background-size: auto 100%;
    }
}

@media only screen and (max-width:991.98px) {


    #ctaAvailability {

        height: 1000px;
        min-height: 1000px;
        background-size: auto 100%;

    }

}

@media only screen and (max-width:767.98px) {


    #ctaAvailability {

        height: 1100px;
        min-height: 1100px;

    }

}


@media only screen and (max-width:575px) {


    #ctaAvailability {

        height: 1100px;
        min-height: 1100px;

    }

}

@media only screen and (max-width: 381px) {


    #ctaAvailability {

        height: 1200px;
        min-height: 1200px;

    }

}

@media only screen and (max-width: 320px) {


    #ctaAvailability {

        height: 1300px;
        min-height: 1300px;

    }

}


@media (min-width: 1400px) and (max-width: 1799px) {
    .col-xxxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}


@media only screen and (min-width:1200px) {



    .hamburger,

    .kebab-toggler,

    .social-menu,

    #navbarCollapse .submenu-button {

        display: none;

    }

}



@media only screen and (max-width:1199.98px) {



    .hamburger {

        padding: 10px 15px;

        display: inline-block;

        cursor: pointer;

        transition-property: opacity, filter;

        transition-duration: .15s;

        transition-timing-function: linear;

        font: inherit;

        color: inherit;

        text-transform: none;

        background-color: transparent;

        border: 0;

        margin: 0;

        overflow: visible;

        position: absolute;

        top: 50%;

        right: 5px;

        z-index: 999;

        transform: translateY(-50%);

        margin-top: 5px;

    }



    .hamburger-box {

        width: 32px;

        height: 21px;

        display: inline-block;

        position: relative;

    }



    .hamburger-inner {

        display: block;

        top: 50%;

        margin-top: -1.5px;

    }



    .hamburger-inner,

    .hamburger-inner::before,

    .hamburger-inner::after {

        width: 32px;

        height: 3px;

        background-color: rgba(var(--bs-primary-rgb), 1);

        border-radius: 4px;

        position: absolute;

        transition-property: transform;

        transition-duration: .15s;

        transition-timing-function: ease;

    }



    .hamburger-inner::before,

    .hamburger-inner::after {

        content: "";

        display: block;

    }



    .hamburger-inner::before {

        top: -9px;

    }



    .hamburger-inner::after {

        bottom: -9px;

    }



    .hamburger--collapse .hamburger-inner {

        top: auto;

        bottom: 0;

        transition-duration: .13s;

        transition-delay: .13s;

        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

    }



    .hamburger--collapse .hamburger-inner::after {

        top: -18px;

        transition: top .2s .2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity .1s linear;

    }



    .hamburger--collapse .hamburger-inner::before {

        transition: top .12s .2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform .13s cubic-bezier(0.55, 0.055, 0.675, 0.19);

    }



    .hamburger--collapse.is-active .hamburger-inner {

        transform: translate3d(0, -9px, 0) rotate(-45deg);

        transition-delay: .22s;

        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

    }



    .hamburger--collapse.is-active .hamburger-inner::after {

        top: 0;

        opacity: 0;

        transition: top .2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity .1s .22s linear;

    }



    .hamburger--collapse.is-active .hamburger-inner::before {

        top: 0;

        transform: rotate(-90deg);

        transition: top .1s .16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform .13s .25s cubic-bezier(0.215, 0.61, 0.355, 1);

    }



    .slide-out-nav {

        position: fixed;

        right: 0;

        bottom: 0;

        width: 100%;

        height: 20px;

        padding: 30px 20px !important;

        background-color: #fff;

        z-index: 999;

        visibility: hidden;

        opacity: 0;

        border: 0;

        transform: translateY(100%) perspective(1px);

        transition: height .8s ease-in-out;

        overflow-y: scroll;

        border: 0;

        border-radius: 0;

        text-align: center;

    }



    .slide-out-nav.nav-open {

        height: calc(100% - 96px);

        opacity: 1;

        transform: translateY(0) perspective(1px);

        visibility: visible;

        opacity: 1;

        padding: 30px 20px !important;

    }



    .slide-out-nav #navigation {

        width: 100%

    }



    .slide-out-nav #navigation li {

        display: block;

        text-align: center;

        margin: 0;

    }



    .navbar-light .navbar-nav .nav-link,

    .sticky-top.navbar-light .navbar-nav .nav-link {

        font-size: 18px;

        padding: 10px 20px;

    }



    .navbar .navbar-nav .nav-link:hover,

    .navbar .navbar-nav .nav-link.active {

        color: #e0ab20;

    }



    .slide-out-nav.fadeInDown {

        -webkit-animation-name: unset;

        animation-name: unset;

    }







    .social-menu {

        color: #e0ab20;

        background: #fff;

        display: none;

        text-align: center;

        z-index: 9;

        padding-top: 10px;

    }



    .social-menu.menu-on {

        display: block;

        position: fixed;

        width: 100%;

        left: 0;

        top: 110px;

    }



    .social-menu li {

        position: relative;

        padding: 5px 30px;

    }



    .social-menu .contact-info {

        margin-top: 10px;

    }



    .social-menu .contact-info a {

        color: #e0ab20;

    }



    .social-menu .contact-info a strong {

        color: var(--tertiary);

        display: block;

        font-size: 18px;

        font-weight: 700;

    }



    .social-menu .icon {

        color: #e0ab20;

    }



    .socmedia {

        background: #fff;

    }



    .socmedia .social-info {

        padding: 8px 15px;

    }



    .socmedia .social-info a {

        background-color: #e0ab20;

        color: #ffffff;

        border-radius: 50%;

        width: 40px;

        height: 40px;

        line-height: 14px;

        text-align: center;

        display: inline-block;

    }



    .socmedia .social-info a span {

        position: relative;

        bottom: -9px;

    }



    .socmedia .social-info a svg {

        margin-top: -4px;



    }



    .sticky-top.navbar-light .navbar-brand img {

        max-height: 50px;

    }



    .header-carousel .header-carousel-item {

        margin-top: 0;

    }



    body.nav-open {

        overflow: hidden;

        margin: 0;

        touch-action: none;

        -ms-touch-action: none;

        height: 100vh;

    }



    .padding-small {

        padding-top: 3rem !important;

        padding-bottom: 3rem !important;

    }



    .navbar .dropdown-toggle::after {

        display: none;

    }



    .navbar-nav .dropdown-menu.open {

        position: relative;

        display: block;

    }



    .navbar .nav-item {

        position: relative;

        padding: 15px 30px;

    }



    .navbar .submenu-button {

        color: #fff;

        position: absolute;

        top: 10px;

        right: 0;

        padding: 10px;

    }



    .navbar .dropdown-item {

        white-space: normal;

    }



    .navbar-brand {

        margin: 0;

        padding: 0;

    }



    .navbar-brand img {

        max-width: 150px;

        height: auto;

    }



    #intro {

        height: 70vh;

    }



    #intro .banner-content .heading {

        font-size: 70px;

    }



    h2,

    .h2 {

        font-size: 3.2rem;

    }



    #header{

      position: relative;

    }

}



@media only screen and (max-width:991.98px) {

    #intro .banner-content .heading {

        font-size: 55px;

    }



    h2,

    .h2 {

        font-size: 3rem;

    }


    .py-lg-6{

      padding-top: 3rem;

      padding-bottom: 3rem;

    }



}



@media only screen and (max-width:767.98px) {

    #intro {

        height: 50vh;

    }

    #footer{

      padding-bottom: 0;

    }

    #intro .banner-content .heading {

        font-size: 45px;

    }

}

@media only screen and (max-width:575.98px) {

    #intro .banner-content .heading {

        font-size: 40px;

    }

}


#mapid {

    width: 100%; 
    height: 480px; 
    position: relative;
    z-index: 1;

}

@media only screen and (max-width:575.98px) {

    #mapid {
        
        width: 100%; 
        height: 420px;

    }

}

@media only screen and (max-width:414.98px) {
    .detail-entry .page-title {
        font-size: 38px;
    }
}