@import url("nivo.slider.css");

:root {
    --font-family-body: 'Polymath';
    --font-family-heading: 'Mansory';
    --font-family-Montserrat: "Montserrat",
        sans-serif;
    /* --font-family-heading2: "Titillium Web",
        sans-serif; */
    --font-72: 7.2rem;
    --font-60: 6rem;
    --font-48: 4.8rem;
    --font-42: 4.2rem;
    --font-36: 3.6rem;
    --font-30: 3rem;
    --font-24: 2.4rem;
    --font-21: 2.1rem;
    --font-18: 1.8rem;
    --font-16: 1.6rem;
    --font-14: 1.4rem;
    --colorac: #bea05a;
    --color12: #2a3c7e;
    --color005: #005BAA;
    --color19: #191919;
    --color2e: #2E2E2E;
    --color-black: #000;
    --colorff: #ceab57;
    --colordb: #DBAA27;
    --colord2: #D2D9E1;
    --color2d: #2D2C2B;
    --colorfb: #FBFAF6;
    --colorff2: #ffffff;
    --color55: #555555;
    --colorf22: #F2F2F2;
    --colorf2: #F2F2F2;
    --colorfec: #ECEDED;
    --color70: #707070;
    --color00: #000000;
    --colorf9: #F9F9F9;    
    --colorfac: #ac9f4396;    
    --xspace: 4.8px;

    --line-height-21: 2.1rem;
    --line-height-30: 3rem;
    --line-height-36: 3.6rem;
    --titleHeight: 300px;
}

@media(min-width:2399px) {
    :root {
        --font-family-body: 'Polymath';
        --font-family-heading: 'Mansory';
        --font-family-Montserrat: "Montserrat",
            sans-serif;
        /* --font-family-heading2: "Titillium Web",
        sans-serif; */
        --font-72: 7.4rem;
        --font-60: 6.2rem;
        --font-48: 5.5rem;
        --font-42: 4.4rem;
        --font-36: 3.8rem;
        --font-30: 3.2rem;
        --font-24: 2.6rem;
        --font-21: 2.3rem;
        --font-18: 2rem;
        --font-16: 1.8rem;
        --font-14: 1.6rem;

        --line-height-21: 2.1rem;
        --line-height-30: 3rem;
        --line-height-36: 3.6rem;
        --titleHeight: 300px;
    }
}

@media (max-width:1599px) {
    :root {
        --font-72: 6.5rem;
        --font-60: 5.5rem;
        --font-48: 4.2rem;
        --font-42: 3.6rem;
        --font-36: 3rem;
        --font-30: 2.8rem;
        --font-24: 2.1rem;
        --font-21: 1.8rem;
        --font-18: 1.6rem;
        --font-16: 1.5rem;
        --font-14: 1.3rem;
        --xspace: 4.8px;

    }
}



.title16 {
    font-size: var(--font-16);
    font-weight: bold;
    color: var(--color12);
    line-height: var(--line-height-21);
    font-family: var(--font-family-body);
}

.title21 {
    font-size: var(--font-21);
font-weight: 400;
    color: var(--color12);
    line-height: var(--line-height-21);
    font-family: var(--font-family-body);
}

.title24 {
    font-size: var(--font-24);
    font-weight: 400;
    font-family: var(--font-family-body);
}

.title30 {
    font-size: var(--font-30);
    font-weight: 400;
    font-family: var(--font-family-body);
        line-height: 1.3;
}

.title36 {
    font-size: var(--font-36);
    font-weight: 400;
    color: var(--color-black);
    font-family: var(--font-family-heading);
}

.bggray {
    background-color: var(--colorf2);
}

@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl,
    .footer-container {
        max-width: 1320px;
    }

    .full-container {
        max-width: 1380px;
        margin: auto;
    }

}

@media (min-width: 1899px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl,
    .footer-container {
        max-width: 1640px;
    }

    .full-container {
        max-width: 1782px;
        margin: auto;
    }

}




html,
body {
    margin: 0;
    scroll-behavior: smooth;
    font-size: 62.5%;
    color: #000;
    font-family: var(--font-family-body);

}
body{scroll-behavior: auto !important;}
a {
    text-decoration: none;
}

figure {
    margin-bottom: 0;
}

p {
    font-size: var(--font-16);
    font-family: var(--font-family-body);
    font-weight: 300;
}

.links {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
}


.custom-btn {
    font-size: var(--font-18);
    color: #fff;
    display: flex;
    gap: 3rem;
    background-color: #bea05a;
    padding: 1.5rem 2rem;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.custom-btn:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background-color: #ceab57;
    transition: all 1.4s ease;
}

.custom-btn:hover {
    color: #fff;
}

.custom-btn:hover:after {
    left: 0;
    width: 100%;
}

.pb-100 {
    padding-bottom: 10rem;
}

.pt-100 {
    padding-top: 10rem;
}


@media screen and (min-width: 61.25em) {

    .m-post__image:after,
    .m-post__summary:after {
        background: var(--color12);
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
        transition: transform .36s ease-out;
    }

    figure.a-img.m-post__image {
        position: relative; height:100%;
    }

    .m-landingPanel__image:before {
        content: "";
        position: absolute;
        z-index: 2;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: var(--color12);
        /* -webkit-backdrop-filter: grayscale(100%);
        backdrop-filter: grayscale(100%); */
        mix-blend-mode: screen;
        opacity: 0;
        transition: opacity .25s ease-out;
        transform: translateZ(0);
        will-change: transform, opacity;
    }



}

.bx2 {
    position: relative;
    /* Make sure position context is correct */
}

.bx2:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--color12);
    -webkit-backdrop-filter: grayscale(100%);
    backdrop-filter: grayscale(100%);
    mix-blend-mode: screen;
    transform: translate3D(0, 0, 0);
    opacity: 0;
    transition: transform 0.36s ease-out, opacity 0.36s ease-out;
}

.bx2:hover:before {
    transform: translate3D(20px, -20px, 0);
    opacity: 1;
}



.m-post__image img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;height: 100%;
        object-fit: cover;
    z-index: 2;
    transition: transform .36s ease-in-out; 
}

.m-landingPanel__image {
    margin: 0;
    position: relative;
    transition: transform .36s ease-in-out;
    z-index: 2;
}

.m-landingPanel__image img {
    transform: scale(1);
    transition: transform .56s ease-in-out;
}

.m-landingPanel__image:hover img {
    transform: scale(1.1);
}

.swiper-slide {
    transition: opacity 0.3s, transform 1.3s;
}




.home_banner .swiper-slide .banner_text h2 {
    transform: translateY(-40px);
    opacity: 0;
    transition-duration: 2.2s;
    transition-delay: 1.25s;
}

.home_banner .swiper-slide .banner_text p {
    transform: translateY(30px);
    opacity: 0;
    transition-duration: 1.5s;
    transition-delay: 1.85s;
}

.home_banner .swiper-slide-active .banner_text,
.home_banner .swiper-slide-active .banner_text h2,
.home_banner .swiper-slide-active .banner_text p {
    transform: none;
    opacity: 1;
}

.arrow-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--color12);
    border-radius: 50%;
    background: none;
    font-size: var(--font-18);
    cursor: pointer;
    display: flex !important;
    align-items: center;
    padding: 0 !important;
    justify-content: center;
    overflow: hidden;
}

a.arrow-btn:after {
    background: #123985;
    content: "";
    width: 0px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    transition: .3s ease-in-out all;
    left: 0;
}

a.arrow-btn:hover:after {
    width: 30px;
    /* transition: transform .36s ease-in-out; */
}

.arrow-btn:hover svg path {
    color: #fff;
    stroke: currentColor;
}

a.arrow-btn svg {
    position: relative;
    z-index: 1;
}
.streched_link{position: absolute;top:0; right: 0; left: 0;z-index:99;width:100%; height:100%;}
/*animation css*/

/* .image,
.image2,
.image3 {
    opacity: 0;
} */

.image4::before {
    scale: 0 1;
}

.reveal-image,
.reveal-image:after {
    position: absolute;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-duration: 1600ms;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

.reveal-image2,
.reveal-image2:after {
    position: absolute;
    animation-delay: .1s;
    animation-iteration-count: 1;
    animation-duration: 1800ms;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

.reveal-image {
    opacity: 1;
    position: relative;
    animation-name: reveal-image;
}

.reveal-image2 {
    opacity: 1;
    position: relative;
    animation-name: reveal-image2;
}

.reveal-image3 {
    opacity: 1;
    position: relative;
    animation-name: fadeInline1;
    animation-delay: .1s;
    animation-iteration-count: 1;
    animation-duration: 1800ms;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    transform-origin: top;
}

.reveal-image4::before {
    scale: 0 1;
    position: relative;
    animation-name: fadeInline2;
    animation-delay: .5s;
    animation-iteration-count: 1;
    animation-duration: 3500ms;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    transform-origin: left;
}

/* .reveal-image3 {opacity: 1;position: relative;animation-name: fadeInline1;animation-delay: .1s;animation-iteration-count: 1;animation-duration: 1800ms;animation-fill-mode: both;animation-timing-function: ease-in-out; transform-origin: top;} */

@keyframes reveal-image {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes reveal-image2 {
    from {
        clip-path: inset(0 0% 100% 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        margin-left: -25%;
    }

    to {
        opacity: 1;
        margin-left: 0%;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        margin-left: 30%;
    }

    to {
        opacity: 1;
        margin-left: 0%;
    }
}

@keyframes fadeInline1 {
    0% {
        opacity: 0;
        scale: 1 0
    }

    100% {
        opacity: 1;
        scale: 1 1;
    }
}

@keyframes fadeInline2 {
    0% {
        opacity: 0;
        scale: 0 1
    }

    100% {
        opacity: 1;
        scale: 1 1;
    }
}

.image-container {
    position: relative;
    overflow: hidden;
    padding-bottom: calc(50% / (var(--ratio)));
}

.reveal-image {
    opacity: 1;
    position: relative;
    animation-name: reveal-image;
}

.anachor-tag {
    position: relative;
    top: -100px;
    transform: translateZ(0);
    transition: transform .6s ease-in-out;
    backface-visibility: hidden;
}