* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    scrollbar-width: thin;

    /* Options: auto, thin, none */

    scrollbar-color: #0A4833 #f1f1f1;

    /* thumb-color track-color */

}



*,

::before,

::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



:root {

    --primary-color: #0A4833;

    --light-color: #fff;

    --dark-color: #000;

    --head-color: #C5A554;

    --headtwo-color: #96824F;

    --line-height-tight: 1.2;

    --line-height-normal: 1.5;

    --line-height-relaxed: 1.65;

    --gray-two: #D9D9D9;

}



/* Custom Scrollbar Styles */

/* For WebKit browsers (Chrome, Safari, Edge) */

::-webkit-scrollbar {

    width: 12px;

    /* Width of vertical scrollbar */

    height: 12px;

    /* Height of horizontal scrollbar */

}



::-webkit-scrollbar-track {

    background: red;

    /* Light gray background for track */

    border-radius: 6px;

}



::-webkit-scrollbar-thumb {

    background: #0A4833;

    /* Your primary color */

    border-radius: 6px;

    border: 2px solid #f1f1f1;

    /* Creates a border effect */

}



::-webkit-scrollbar-thumb:hover {

    background: #0d5a3e;

    /* Slightly lighter shade on hover */

}



::-webkit-scrollbar-thumb:active {

    background: #083d2a;

    /* Darker shade when clicked */

}



::-webkit-scrollbar-corner {

    background: red;

    /* Corner where horizontal and vertical scrollbars meet */

}



/* For Firefox */

/* Alternative Firefox approach with more control (if needed) */

html {

    scroll-behavior: smooth;

    scrollbar-width: thin;

    scrollbar-color: #0A4833 transparent;

}



header,

main,

nav,

section {

    display: block

}



ul,

ol {

    list-style-type: none;

}



a {

    color: inherit;

    text-decoration: none;

}



button:focus {

    outline: none;

    box-shadow: none;

}



.wrapper {

    width: 100%;

    display: flex;

    flex-direction: column;

}



@font-face {

    font-family: 'lulu';

    src: url('../fonts/LufgaRegular.ttf') format('truetype');

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'lulu-light';

    src: url('../fonts/LufgaExtraLight.ttf') format('truetype');

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'lulu-medium';

    src: url('../fonts/LufgaMedium.ttf') format('truetype');

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'lulu-bold';

    src: url('../fonts/LufgaSemiBold.ttf') format('truetype');

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'italy';

    src: url('../fonts/Griffiths.otf') format('opentype');

    font-style: normal;

    font-display: swap;

}



body {

    margin: 0;

    padding: 0;

    font-family: 'lulu', Tahoma, Geneva, Verdana, sans-serif;

    line-height: 1.6;

    background-color: #f7f4ed;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



h1 {

    font-family: 'lulu-bold', sans-serif;

    font-size: clamp(2.25rem, 4vw + 1rem, 4.5rem);

    /* 36px - 72px */

    font-weight: 700;

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

    letter-spacing: -0.02em;

    margin-bottom: clamp(1rem, 2vw, 2rem);

}



h2 {

    font-family: 'lulu-bold', sans-serif;

    font-size: clamp(1.875rem, 3vw + 0.5rem, 3.5rem);

    /* 30px - 56px */

    font-weight: 600;

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

    letter-spacing: -0.015em;

    margin-bottom: clamp(0.875rem, 1.5vw, 1.75rem);

}



h3 {

    font-family: 'lulu-bold', sans-serif;

    font-size: clamp(1.5rem, 2.5vw + 0.25rem, 2.75rem);

    /* 24px - 44px */

    font-weight: 600;

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

    letter-spacing: -0.01em;

    margin-bottom: clamp(0.75rem, 1.25vw, 1.5rem);

}



h4 {

    font-family: 'lulu-bold', sans-serif;

    font-size: clamp(1.25rem, 2vw + 0.125rem, 2.125rem);

    /* 20px - 34px */

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

    letter-spacing: -0.005em;

    margin-bottom: clamp(0.625rem, 1vw, 1.25rem);

}



h5 {

    font-family: 'lulu', sans-serif;

    font-size: clamp(1.125rem, 1.5vw + 0.125rem, 1.625rem);

    /* 18px - 26px */

    font-weight: 500;

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

    letter-spacing: 0;

    margin-bottom: clamp(0.5rem, 0.75vw, 1rem);

}



h6 {

    font-family: 'lulu-bold', sans-serif;

    font-size: clamp(1rem, 1.25vw + 0.125rem, 1.375rem);

    /* 16px - 22px */

    font-weight: 500;

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

    letter-spacing: 0.01em;

    text-transform: uppercase;

    margin-bottom: clamp(0.5rem, 0.5vw, 0.875rem);

}



/* Paragraph styles with optimal reading experience */

p {

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

    font-size: clamp(1rem, 1vw + 0.125rem, 1.25rem);

    /* 16px - 20px */

    font-weight: 400;

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

    margin-bottom: clamp(1rem, 2vw, 1.5rem);

}



/* Special paragraph variants */

p.lead {

    font-size: clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem);

    /* 18px - 24px */

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

    margin-bottom: clamp(1.5rem, 2.5vw, 2rem);

}



p.small {

    font-size: clamp(0.875rem, 0.75vw + 0.125rem, 1rem);

    /* 14px - 16px */

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

}



p.caption {

    font-size: clamp(0.75rem, 0.5vw + 0.125rem, 0.875rem);

    /* 12px - 14px */

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

    font-style: italic;

}



/* Responsive adjustments for better mobile experience */

@media (max-width: 768px) {



    h1,

    h2,

    h3 {

        margin-bottom: clamp(0.75rem, 2vw, 1.25rem);

    }



    p {

        max-width: none;

    }

}



/* Print styles */

@media print {

    h1 {

        font-size: 28pt;

    }



    h2 {

        font-size: 24pt;

    }



    h3 {

        font-size: 20pt;

    }



    h4 {

        font-size: 18pt;

    }



    h5 {

        font-size: 16pt;

    }



    h6 {

        font-size: 14pt;

    }



    p {

        font-size: 12pt;

        line-height: 1.4;

    }

}



/* p {

    font-family: 'lulu', sans-serif;

    font-size: clamp(1rem, 1.5vw + 0.25rem, 1.25rem);

}

h1 {

    font-size: clamp(2rem, 5vw + 1rem, 4.5rem);

    font-family: 'lulu-bold', sans-serif;

    letter-spacing: 0.1rem;

}

h2 {

    font-size: clamp(1.5rem, 3.5vw + 0.5rem, 3rem);

    font-family: 'lulu-bold', sans-serif;

}

h4 {

    font-size: clamp(1.125rem, 2vw + 0.5rem, 1.75rem);

    font-family: 'lulu-bold', sans-serif;

}

h5 {

  font-size: clamp(1rem, calc(1rem + 0.5 * (100vw - 320px) / 100), 1.5rem);

}

h6 {

  font-size: clamp(0.75rem, 0.75rem + 0.5vw, 1.5rem);

} */

/* ==============Menu================== */

.img-fluid {

    max-width: 100%;

}



.navbar {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 1030;

    transition: all 0.3s ease;

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

    backdrop-filter: blur(3px);

}



.navbar-brand {

    font-size: 1.8rem;

    font-weight: bold;

    color: #333 !important;

    text-decoration: none;

}



.navbar .container-fluid {

    width: 90%;

    background-color: transparent;

    border-radius: 20px;

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    -ms-border-radius: 20px;

    -o-border-radius: 20px;

    padding: 0rem 2rem;

}



.navbar.scrolled {

    background: rgba(214, 32, 32, 0.9);

    backdrop-filter: blur(3px);

    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);

}



.burger-menu {

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px;

    transition: transform 0.3s ease;

}



.burger-menu:hover {

    transform: scale(1.1);

}



.enquire-btn {

    background: var(--head-color);

    border: none;

    color: var(--light-color);

    padding: 0.4rem 1rem;

    border-radius: 25px;

    transition: all 0.3s ease;

    -webkit-border-radius: 25px;

    -moz-border-radius: 25px;

    -ms-border-radius: 25px;

    -o-border-radius: 25px;

}



.enquire-btn:hover {

    background: linear-gradient(45deg, #b39200, #ffd650);

    transform: translateY(-2px);

    rgb(197, 197, 197) box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);

    color: white;

}



.slide-menu {

    position: fixed;

    top: 0;

    left: -200px;

    width: 200px;

    height: 100vh;

    background: var(--primary-color);

    z-index: 1040;

    transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);

}



.slide-menu.active {

    left: 0;

}



.slide-menu-header {

    padding: 0.4rem 1rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.slide-menu-logo {

    color: white;

    font-size: 1.5rem;

    margin: 0;

}



.close-btn {

    background: none;

    border: none;

    color: white;

    cursor: pointer;

    border-radius: 50%;

    transition: all 0.3s ease;

    line-height: 0;

}



.close-btn:hover {

    box-shadow: rgba(255, 255, 255, 0.482) 0px 2px 8px 0px;

    transform: scale(1.1);

    -webkit-transform: scale(1.1);

    -moz-transform: scale(1.1);

    -ms-transform: scale(1.1);

    -o-transform: scale(1.1);

}



.slide-menu-items {

    padding: 0.3rem 0;

}



.slide-menu-item {

    display: block;

    padding: 0.6rem 1rem;

    color: white;

    text-decoration: none;

    font-size: 1.1rem;

    font-weight: 500;

    transition: all 0.3s ease;

    border-left: 4px solid transparent;

}



.slide-menu-item:hover {

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

    border-left-color: #fff;

    color: white;

    padding-left: 40px;

}



.slide-menu-item i {

    margin-right: 15px;

    width: 20px;

    text-align: center;

}



.menu-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    z-index: 1035;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}



.menu-overlay.active {

    opacity: 1;

    visibility: visible;

}



.hero {

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    height: 100vh;

    position: relative;

}



.hero-heading {

    position: relative;

    top: 30%;

    display: flex;

    justify-content: end;

    flex-direction: column;

    text-align: center;

}



.special-font {

    font-family: 'italy', sans-serif;

}



.main-button {

    position: relative;

    padding: 0.7rem 1.5rem;

    font-family: 'lulu-light', sans-serif;

    color: var(--light-color);

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

    border: unset;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

}



.main-button:hover {

    position: relative;

    /* background: linear-gradient(45deg, #0A4833, #00b155); */

    background: linear-gradient(45deg, #b39200, #ffd650);

    transform: scale(1.02);

    -webkit-transform: scale(1.02);

    -moz-transform: scale(1.02);

    -ms-transform: scale(1.02);

    -o-transform: scale(1.02);

    transition: ease-in 0.03s;

    -webkit-transition: ease-in 0.03s;

    -moz-transition: ease-in 0.03s;

    -ms-transition: ease-in 0.03s;

    -o-transition: ease-in 0.03s;

}



.choose-project {

    position: relative;

    justify-content: center;

    display: flex;

    justify-content: center;

    transform: translateY(-30px);

    -webkit-transform: translateY(-30px);

    -moz-transform: translateY(-30px);

    -ms-transform: translateY(-30px);

    -o-transform: translateY(-30px);

}



.drop-bar-style {

    padding: 0.5rem;

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

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    display: flex;

    gap: 1.2rem;

    align-items: center;

}



.dropdown-menu.show {

    display: block;

    width: 100%;

    border-radius: 20px;

    margin-top: 20px;

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    -ms-border-radius: 20px;

    -o-border-radius: 20px;

}



.drop-button {

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

    color: var(--light-color);

    border: 1px solid var(--light-color);

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    color: var(--light-color);

    padding: 0.3rem 2rem;

    transition: all 0.3s;

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -ms-transition: all 0.3s;

    -o-transition: all 0.3s;

}



.drop-button:hover {

    box-shadow: rgba(255, 255, 255, 0.482) 0px 2px 8px 0px;

    transform: scale(1.03);

    -webkit-transform: scale(1.03);

    -moz-transform: scale(1.03);

    -ms-transform: scale(1.03);

    -o-transform: scale(1.03);

}



.drop-button img {

    position: relative;

    transform: translateX(25px);

    width: 32px;

    -webkit-transform: translateX(25px);

    -moz-transform: translateX(25px);

    -ms-transform: translateX(25px);

    -o-transform: translateX(25px);

}



.drop-button-search {

    background-color: var(--headtwo-color);

    color: var(--light-color);

    border: 1px solid var(--light-color);

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    color: var(--light-color);

    padding: 0.4rem 4rem;

}



.drop-button-search:hover {

    box-shadow: rgba(255, 254, 249, 0.719) 0px 2px 8px 0px;

    background: linear-gradient(45deg, #b39200, #ffd650);

    transform: scale(1.01);

    color: white;

    -webkit-transform: scale(1.01);

    -moz-transform: scale(1.01);

    -ms-transform: scale(1.01);

    -o-transform: scale(1.01);

    transition: all 0.3s ease;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

}



.about-us {

    padding: clamp(1rem, 5vw, 3rem) 0;

}



.about-us img {

    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

    border-radius: 36px;

    -webkit-border-radius: 36px;

    -moz-border-radius: 36px;

    -ms-border-radius: 36px;

    -o-border-radius: 36px;

}



.about-us .heading h4 {

    color: var(--headtwo-color);

}



.why-us {

    padding: clamp(1rem, 5vw, 3rem) 0;

}



.why-us h3 {

    padding-bottom: 3rem;

}



.why-us h4 {

    padding-top: 1rem;

    color: var(--headtwo-color);

}



/* ======== hover image effects  */

.ongoing {

    padding: 3rem 0;

}



.hover-container {

    display: flex;

    overflow: hidden;

    gap: 1.2rem;

}



.hover-container .col-md-4 {

    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}



/* Default state - first column large, others small */

.hover-container .column-1 {

    flex: 2;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    height: 80vh;

}



.hover-container .column-2 {

    flex: 0.8;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    height: 80vh;

}



.hover-container .column-3 {

    flex: 0.5;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    height: 80vh;

}



.column {

    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-weight: bold;

    cursor: pointer;

}



/* Hover states */

.hover-container .column-2:hover {

    flex: 2.5;

}



.hover-container .column-3:hover {

    flex: 2.5;

}



.hover-container .column-2:hover~.column-3 {

    flex: 0.3;

}



.hover-container:has(.column-2:hover) .column-1 {

    flex: 1.2;

}



.hover-container:has(.column-3:hover) .column-1 {

    flex: 1.2;

}



.hover-container:has(.column-3:hover) .column-2 {

    flex: 0.3;

}



.column::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.4);

    transition: all 0.3s ease;

}



.column:hover::before {

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

}



.column-1::before {

    background: rgba(0, 0, 0, 0.3);

}



.column:hover {

    transform: scale(1.01);

    box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.1);

}



.overlay-content {

    position: relative;

    z-index: 2;

    padding: 20px;

    background-color: rgba(255, 255, 255, 0.8);

    width: 90%;

    border-radius: 30px;

    transition: all 0.4s ease 0.2s;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    margin: 2rem;

}



/* Column 1 content always visible */

.column-1 .overlay-content {

    opacity: 1;

    transform: translateY(40px);

    -webkit-transform: translateY(40px);

    -moz-transform: translateY(40px);

    -ms-transform: translateY(40px);

    -o-transform: translateY(40px);

}



/* Hide column 1 content when others are hovered */

.hover-container:has(.column-2:hover) .column-1 .overlay-content,

.hover-container:has(.column-3:hover) .column-1 .overlay-content {

    opacity: 0;

    transform: translateY(-20px);

}



/* Columns 2 & 3 content hidden by default, slides up on hover */

.column-2 .overlay-content,

.column-3 .overlay-content {

    opacity: 0;

    transform: translateY(20px);

    -webkit-transform: translateY(20px);

    -moz-transform: translateY(20px);

    -ms-transform: translateY(20px);

    -o-transform: translateY(20px);

}



.column-2:hover .overlay-content,

.column-3:hover .overlay-content {

    opacity: 1;

    transform: translateY(20px);

    -webkit-transform: translateY(20px);

    -moz-transform: translateY(20px);

    -ms-transform: translateY(20px);

    -o-transform: translateY(20px);

}



.overlay-content h4 {

    font-family: 'lulu-medium', sans-serif;

    color: var(--primary-color);

    width: 100%;

    border-bottom: 1px solid var(--primary-color);

    /* or any color you like */

    padding-bottom: 8px;

    /* adds space between text and line */

    margin: 0;

}



.overlay-content p {

    font-weight: normal;

    opacity: 0.9;

    margin-top: 1rem;

    color: var(--dark-color);

    padding-bottom: 1rem;

}



/* Remove indicator styles since all columns are visible */

@media (max-width: 768px) {

    .hover-container {

        flex-direction: column;

        height: auto;

        min-height: 100vh;

    }



    .hover-container .col-md-4 {

        flex: 1;

        min-height: 33.33vh;

    }



    .column:hover {

        flex: 2;

        min-height: 40vh;

    }

}



.ongoing .overlay-content .arrow {

    float: right;

    width: 36px;

    transition: all 0.3s;

    -webkit-transition: all 0.2s;

    -moz-transition: all 0.3s;

    -ms-transition: all 0.3s;

    -o-transition: all 0.3s;

    border-radius: 30px;

}



.ongoing .overlay-content .arrow:hover {

    transform: scale(1.02);

    -webkit-transform: scale(1.02);

    -moz-transform: scale(1.02);

    -ms-transform: scale(1.02);

    -o-transform: scale(1.02);

    border-radius: 30px;

    box-shadow: rgba(0, 125, 39, 0.767) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

}



.founders {

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

    padding: 3rem 0;

}



.founder-img {

    height: 360px;

}



.founders h3 {

    color: var(--head-color);

}



.founders p {

    color: var(--light-color);

}



/* Custom Arrow Styles */

.custom-arrows {

    position: absolute;

    bottom: 20px;

    right: 0%;

    transform: translateX(-50%);

    display: flex;

    gap: 0;

    z-index: 10;

    -webkit-transform: translateX(-50%);

    -moz-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -o-transform: translateX(-50%);

}



.custom-arrow {

    width: 36px;

    height: 36px;

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

    border: none;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    color: #333;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    opacity: 0;

    visibility: hidden;

}



.custom-arrow:hover {

    background: white;

    box-shadow: rgba(252, 252, 252, 0.60) 0px 3px 8px;

}



.custom-arrow.show {

    opacity: 1;

    visibility: visible;

}



.custom-prev {

    position: absolute;

    z-index: 99;

}



.homeowners {

    padding: clamp(2rem, 10vw, 5rem) 0;

    background-image: url('../images/banner/home_owners.png');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

}



.testi-card {

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

    padding: 2rem 2rem 1.3rem;

    border-radius: 20px;

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    -ms-border-radius: 20px;

    -o-border-radius: 20px;

    color: var(--light-color);

    margin-left: 1rem;

}



.testi-card .quote {

    float: right;

    width: 50px;

}



.testi-card .img-group {

    display: flex;

    gap: 1rem;

    padding-top: 2rem;

}



.testi-card .img-group img {

    width: 60px;

}



.testi-card .img-group p {

    margin-bottom: 10px;

}



.homeowners .swiper-slide {

    width: fit-content;

    flex-shrink: 0;

}



.homeowners .heading h3 {

    padding-bottom: 1rem;

}



.ourblog {

    padding: 3rem 0;

}



.blog-card {

    padding: 1rem 1rem 2rem;

    border-radius: 40px;

    -webkit-border-radius: 40px;

    -moz-border-radius: 40px;

    -ms-border-radius: 40px;

    -o-border-radius: 40px;

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

    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;

}



.ourblog .heading h3 {

    text-align: center;

    padding-bottom: 1rem;

}



.dreamhome {

    padding: 5rem 0;

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    margin-bottom: 2rem;

}



.dreamhome p {

    font-size: 1.3rem;

}



/* ------------home-form--------------  */

.enquiry-card {

    background: linear-gradient(178deg, rgba(152, 131, 79, 1) 0%, rgba(167, 142, 81, 1) 11%, rgba(191, 160, 83, 1) 47%);

    border-radius: 20px;

    padding: 40px;

    max-width: 400px;

    width: 100%;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

    border: none;

}



.enquiry-title {

    color: var(--primary-color);

    margin-bottom: 30px;

    text-align: left;

}



.form-control {

    border: none;

    border-radius: 25px;

    padding: 12px 20px;

    background-color: #f8f5f0;

    color: #666;

    margin-bottom: 15px;

    font-size: 0.95rem;

    box-shadow: none;

    transition: all 0.3s ease;

}



.form-control:focus {

    background-color: #fff;

    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);

    border: none;

    outline: none;

}



.form-control::placeholder {

    color: #999;

    font-weight: 400;

}



.row-fields {

    display: flex;

    gap: 15px;

    margin-bottom: 15px;

}



.row-fields .form-control {

    margin-bottom: 0;

    flex: 1;

}



.submit-btn {

    background: var(--light-color);

    color: var(--primary-color);

    border: none;

    border-radius: 25px;

    padding: 12px 40px;

    font-size: 1rem;

    font-weight: 500;

    width: 60%;

    margin-top: 20px;

    transition: all 0.3s ease;

    cursor: pointer;

    position: relative;

    left: 20%;

    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

}



.submit-btn:hover {

    background: linear-gradient(45deg, #0A4833, #00b155);

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

    color: var(--light-color);

}



.submit-btn:active {

    transform: translateY(0);

}



@media (max-width: 576px) {

    .enquiry-card {

        padding: 30px 25px;

    }



    .row-fields {

        flex-direction: column;

        gap: 0;

    }



    .row-fields .form-control {

        margin-bottom: 15px;

    }

}



.main-footer {

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

    padding: 2rem 0 0;

}



.main-footer h5 {

    color: var(--light-color);

    text-decoration: underline;

    text-underline-offset: 10px;

    text-decoration-thickness: 0px;

    padding: 0 !important;

    font-size: 1rem;

}



.main-footer ul {

    padding: 0 !important;

    margin: 0;

    color: var(--light-color);

}



.main-footer ul:nth-child(1) li,

.main-footer ul:nth-child(2) li {

    padding: 1rem 0;

}



.main-footer ul li:hover {

    cursor: pointer;

    transition: all 0.3s;

    transform: scale(1.02);

    -webkit-transform: scale(1.02);

    -moz-transform: scale(1.02);

    -ms-transform: scale(1.02);

    -o-transform: scale(1.02);

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -ms-transition: all 0.3s;

    -o-transition: all 0.3s;

}



.main-footer h4 {

    color: var(--head-color);

    padding-top: 0.3rem;

    margin-bottom: 0.3rem;

    font-size: 1rem;

}



.main-footer h4:last-of-type {

    padding-top: 1rem;

}



.social-icon li:hover {

    transition: all 0.3s;

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -ms-transition: all 0.3s;

    -o-transition: all 0.3s;

    transform: scale(1.1);

    -webkit-transform: scale(1.1);

    -moz-transform: scale(1.1);

    -ms-transform: scale(1.1);

    -o-transform: scale(1.1);

    cursor: pointer;

}



.main-footer ul:nth-child(4) li img {

    position: relative;

    bottom: 20px;

}



.main-footer ul:nth-child(4) li {

    /* padding-bottom: 1rem; */

}



.main-footer ul:nth-child(6) li {

    padding-bottom: 1rem;

}



.main-footer ul:nth-child(6) li img {

    position: relative;

    bottom: 10px;

}



.main-footer ul:nth-child(6) li:nth-child(2) img {

    position: relative;

    bottom: 0px;

}



.main-footer ul:nth-child(4) li:nth-child(2) img {

    position: relative;

    bottom: 10px;

}



.ft-register {

    padding-top: 1rem;

    border-top: 1px solid var(--head-color);

    margin-top: 0.8rem;

    float: right;

    color: var(--light-color);

    text-align: end;

}



/* ---------whatsapp--------------- */

.whatsapp-container {

    position: fixed;

    bottom: 20px;

    right: 20px;

    opacity: 0;

    transform: scale(0.8);

    transition: opacity 0.5s ease, transform 0.5s ease;

    z-index: 9999;

}



.whatsapp-container.show {

    opacity: 1;

    transform: scale(1);

}



.pulse {

    animation: pulseAnim 1s infinite;

}



@keyframes pulseAnim {

    0% {

        transform: scale(1);

    }



    50% {

        transform: scale(1.1);

    }



    100% {

        transform: scale(1);

    }

}



.whatsapp-button {

    display: flex;

    align-items: center;

    gap: 10px;

    background: var(--primary-color);

    color: white;

    padding: 16px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 500;

    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);

    transition: all 0.3s ease;

    border: none;

    cursor: pointer;

    position: relative;

    overflow: hidden;

    min-width: 300px;

}



.whatsapp-button::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    transition: left 0.5s ease;

}



.whatsapp-button:hover::before {

    left: 100%;

}



.whatsapp-button:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 35px rgba(37, 211, 102, 0.4);

}



.whatsapp-button:active {

    transform: translateY(0);

}



.whatsapp-icon {

    width: 32px;

    height: 32px;

    background: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.whatsapp-icon svg {

    width: 20px;

    height: 20px;

    fill: #25D366;

}



.button-text {

    flex: 1;

    text-align: center;

    letter-spacing: 0.5px;

}



.close-button {

    width: 24px;

    height: 24px;

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

    border: none;

    border-radius: 50%;

    color: white;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s ease;

    flex-shrink: 0;

    font-size: 16px;

    font-weight: bold;

}



.close-button:hover {

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

    transform: scale(1.1);

}



.close-button:active {

    transform: scale(0.95);

}



@keyframes pulse {

    0% {

        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);

    }



    50% {

        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);

    }



    100% {

        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);

    }

}



.whatsapp-button.pulse {

    animation: pulse 2s infinite;

}



/* ---------- back to the top ------------- */

.back-to-top {

    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    visibility: hidden;

    -webkit-transition: .3s all linear;

    transition: .3s all linear;

}



.back-to-top.show {

    bottom: 30px;

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    visibility: visible;

    z-index: 999;

}



.back-to-top a {

    width: 35px;

    height: 35px;

    background: var(--primary-color);

    box-shadow: 0px 5px 30px rgba(99, 145, 0, 0.724);

    -webkit-transition: all 0.5s;

    transition: all 0.5s;

    font-size: 16px;

    color: #fff;

    border-radius: 50%;

    display: inline-block;

    text-align: center;

    line-height: 35px;

    bottom: 18%;

    right: 4%;

    position: fixed;

    z-index: 998;

    -webkit-transform: scale(0);

    transform: scale(0);

}



.top-array {

    border-bottom: 2px solid #fff;

    border-left: 2px solid #fff;

    height: 8px;

    -webkit-transform: rotate(135deg);

    transform: rotate(135deg);

    width: 8px;

    position: absolute;

    left: 14px;

    top: 13px;

    -webkit-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

    -moz-transition: all 0.2s ease-in-out;

    -ms-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

}



.top-line {

    background-color: #fff;

    height: 10px;

    left: 18px;

    position: absolute;

    top: 14px;

    width: 2px;

    margin-left: -1px;

    -webkit-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

}



.back-to-top.show a:hover .top-line {

    height: 14px;

    border-color: #000;

    background: #000;

    top: 12px;

}



.back-to-top a:hover .top-array {

    border-color: #000;

    top: 11px;

}



.back-toop-tooltip {

    position: absolute;

    top: -65px;

    -webkit-transform: rotate(-90deg) translateX(20px);

    transform: rotate(-90deg) translateX(20px);

    width: 100px;

    left: -33px;

    -webkit-transition: .6s all ease;

    transition: .6s all ease;

    line-height: 1;

    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    visibility: hidden;

}



.back-toop-tooltip span {

    color: #7ec92e;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

}



.back-to-top a:hover .back-toop-tooltip {

    -webkit-transform: rotate(-90deg) translateX(5px);

    transform: rotate(-90deg) translateX(5px);

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    visibility: visible;

}



.back-to-top.show a {

    -webkit-transform: scale(1);

    transform: scale(1);

}



.back-to-top a:hover {

    background: #fff;

    color: #000;

}



.back-to-top.home6 a {

    background: #00c6c6;

}



/* ---------about-page-------------- */

.our-story {

    padding: clamp(1rem, 10vw, 3rem);

    text-align: center;

}



.our-text p:last-child {

    margin-bottom: 0;

}



.our-story h2{

    color: var(--headtwo-color);

}

.our-story .our-text p{

    color:var(--primary-color);

}

.our-story .our-text {

    padding: 1rem 0;

}



.our-story .our-text h4 {

    font-family: 'lulu', sans-serif;

    color: var(--headtwo-color);

}



.meet-founder {

    padding: clamp(1rem, 10vw, 3rem) 0;

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

}



.meet-founder .heading {

    padding: 1rem 0 2rem;

    text-align: center;

}



.meet-founder .heading h3 {

    color: var(--headtwo-color);

}



.meet-founder .heading h5 {

    font-family: 'lulu-light', sans-serif;

}



.meet-founder article {

    padding: clamp(1rem, 10vw, 2rem);

    background-color: var(--headtwo-color);

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    height: 100%;

}



.meet-founder article p {

    color: var(--light-color);

}



.meet-founder .founder-name {

    padding: 1rem 0;

}



.meet-founder .founder-name h4 {

    color: var(--primary-color);

    margin-bottom: 0;

}



.meet-founder .founder-name p {

    color: var(--primary-color);

    margin-bottom: 0;

}



.meet-founder article p:last-child {

    margin-bottom: 0;

}



.vision {

    padding: clamp(1rem, 10vw, 6rem) 0;

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

    position: relative;

    z-index: 0;

}



.vision::after {

    content: '';

    background-color: var(--headtwo-color);

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    opacity: 0.8;

    z-index: -1;

}



.vision .heading {

    text-align: center;

    color: var(--light-color);

    padding-bottom: 1rem;

}



.statement {

    padding: 0 0 clamp(1rem, 10vw, 3rem);

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

}



.statement .row {

    position: relative;

    overflow: hidden;

    border-radius: 30px;

}



.statement .state-head {

    padding: clamp(1rem, 10vw, 3rem);

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

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

}



.statement .state-head h3 {

    text-align: center;

    color: var(--light-color);

}



.statement .state-head h5 {

    font-family: 'lulu-light', sans-serif;

    text-align: center;

    color: var(--light-color);

}



/* --------why-mother land ------------- */

.why-hero {

    background-image: url('../images/banner/why/top-banner.png');

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    height: 100vh;

    position: relative;

}



.why-hero-heading {

    position: relative;

    top: 30%;

    display: flex;

    justify-content: end;

    flex-direction: column;

    text-align: center;

}



.why-choose {

    padding: clamp(1rem, 10vw, 3rem) 0 0;

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

}



.why-choose .heading {

    padding-bottom: 1rem;

    text-align: center;

}



.why-choose .heading h3 {

    color: var(--headtwo-color);

}



.why-choose .heading h5 {}



.why-choose .row {

    padding: 1rem 0;

}



.why-choose h4 {

    color: var(--headtwo-color);

}



.parent-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    grid-template-rows: repeat(1, 1fr);

    gap: 10px;

}



.what-apart {

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

}



.what-apart article {

    padding: clamp(1rem, 10vw, 1.4rem) 1rem;

    text-align: center;

    background-color: var(--headtwo-color);

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    height:100%;

    padding-bottom:0.4rem;

}



.what-apart article:hover {

    transform: scale(1.02);

    background: linear-gradient(45deg, #b39200, #ffd650);

    transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    -webkit-transform: scale(1.02);

    -moz-transform: scale(1.02);

    -ms-transform: scale(1.02);

    -o-transform: scale(1.02);

}



.what-apart article img {

    width: 120px;

}



.what-apart article p {

    padding-top: 1.3rem;

    margin-bottom: 0;

    color: #f3f0f0;

}



.what-apart .heading h3 {

    color: var(--headtwo-color);

}



.what-apart p {

    color: #000;

    padding: 1rem 0;

    margin-bottom: 0;

}



.what-apart .main-button {

    width: 20%;

    display: flex;

    justify-content: center;

}



.what-apart {

    padding: clamp(1rem, 10vw, 3rem) 0;

}



.build-today {

    padding: clamp(1rem, 10vw, 3rem) 0;

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

}



.build-today .heading h3 {

    text-align: center;

    padding-bottom: 1rem;

    color: var(--head-color);

}



.build-today img {

    height: 100%;

    width: 100%;

}



.build-today p {

    color: var(--light-color);

    margin-bottom: 0;

}



.build-today .hori-icon {

    display: flex;

    gap: 10px;

    align-items: center;

    padding: 0.6rem 0;

}



.build-today .hori-icon img {

    width: 52px;

}



.invest {

    padding: clamp(1rem, 10vw, 3rem) 0;

    text-align: center;

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

}



.invest .down {

    padding: 1rem 0;

    margin-bottom: 0;

}



.invest .invest-icon img {

    padding: 1rem 0;

}



.invest .invest-icon p {

    padding: 0.5rem 0;

}



.see-difference {

    padding: 0 0 clamp(1rem, 10vw, 3rem);

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

}



.see-difference .heading {

    text-align: center;

    padding: clamp(0.5rem, 10vw, 1rem) 0;

}



.see-difference .heading h3 {

    color: var(--headtwo-color);

}



.book-visit {

    background-color: var(--headtwo-color);

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    margin: 0 0 clamp(1rem, 10vw, 3rem);

    padding: clamp(1rem, 10vw, 4rem) 0;

}



.book-visit h5 {

    text-align: center;

    color: #ffffff;

    padding-bottom: 1rem;

}



/* --------- nri-page ----------  */

.nri-main .heading {

    padding: clamp(1rem, 10vw, 3rem) 0;

    text-align: center;

}



.nri-main .heading h3 {

    color: var(--dark-color);

    margin-bottom: 0;

}



.nri-main .heading h5 {

    color: var(--dark-color);

    margin-bottom: 0;

}



.nri-main .heading p {

    color: var(--headtwo-color);

}



.your-mother {

    padding: clamp(1rem, 10vw, 3rem) 0;

    text-align: center;

}



.your-mother .heading h4 {

    color: var(--primary-color);

}



.your-mother .parent-three {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-rows: repeat(1, 1fr);

    gap: 20px;

}



.your-mother .nri-iconbox {

    padding: clamp(1rem, 10vw, 2rem) 1rem;

    background-color: var(--gray-two);

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

}



.your-mother .parent-three .nri-iconbox {

    min-height: 100%;

}



.your-mother .parent-five .nri-iconbox {

    min-height: 100%;

}



.your-mother .nri-iconbox img {

    width: 80px;

    padding-bottom: 1rem;

}



.your-mother .nri-iconbox h5 {

    color: var(--primary-color);

    font-family: 'lulu-bold', sans-serif;

}



.your-mother .nri-iconbox p {

    font-size: 0.8rem;

}



.your-mother .parent-five {

    display: grid;

    grid-template-columns: 0.455fr 1fr 1fr 0.455fr;

    grid-template-rows: 1fr;

    gap: 20px;

    padding-top: 1.3rem;

}



.perfact-for {

    padding: clamp(1rem, 10vw, 3rem) 0;

}



.perfact-for .heading {

    text-align: center;

}



.perfact-for img {

    padding: 1rem 0;

}



.nri-contact {

    padding: clamp(1rem, 10vw, 3rem);

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    background-color: var(--headtwo-color);

    margin-bottom: clamp(1rem, 10vw, 3rem);

}



.nri-contact .heading {

    text-align: center;

}



.nri-contact .heading h3 {

    color: var(--primary-color);

}



.nri-contact .heading p {

    color: var(--light-color);

}



/* --------Project styles --------------- */

.prj-main {}



.project-price-card {

    position: relative;

    padding: 1rem;

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

    border-radius: 0 0 20px 20px;

    -webkit-border-radius: 0 0 20px 20px;

    -moz-border-radius: 0 0 20px 20px;

    -ms-border-radius: 0 0 20px 20px;

    -o-border-radius: 0 0 20px 20px;

    top: -31%;

    border-top-right-radius: 14px;

    box-shadow: rgba(0, 89, 6, 0.4) 0px 30px 90px;

}



.project-price-card .ribbon {

    position: relative;

    --r: 24px;

    height: 3rem;

    aspect-ratio: 0.8;

    background: var(--primary-color);

    border-top-left-radius: var(--r);

    mask: radial-gradient(var(--r) at 100% 100%, #0000 100%, #000 calc(100% + 1px)) 0 100% / var(--r) var(--r) no-repeat, linear-gradient(0, #0000 var(--r), #000 0);

    transform: rotate(90deg);

    position: absolute;

    width: 49px;

    top: 0;

    left: -23px;

    z-index: 2;

}



.project-price-card::before,

.project-price-card::after {

    content: '';

    position: absolute;

    width: 2rem;

    height: 57px;

    top: 0px;

    background: linear-gradient(190deg, rgba(10, 72, 51, 1) 0%, rgba(5, 128, 87, 1) 51%, rgba(0, 189, 126, 1) 100%);

    transform: translateY(0);

    border-top-left-radius: 15px;

    -webkit-transform: translateY(0);

    -moz-transform: translateY(0);

    -ms-transform: translateY(0);

    -o-transform: translateY(0);

    transform: translateX(-47px);

    -webkit-transform: translateX(-47px);

    -moz-transform: translateX(-47px);

    -ms-transform: translateX(-47px);

    -o-transform: translateX(-47px);

}



.project-price-card .ribbon::before {

    background: linear-gradient(190deg, rgba(10, 72, 51, 1) 0%, rgba(5, 128, 87, 1) 51%, rgba(0, 189, 126, 1) 100%);

}



.project-price-card .ribbon::after {

    background: linear-gradient(190deg, rgba(10, 72, 51, 1) 0%, rgba(5, 128, 87, 1) 51%, rgba(0, 189, 126, 1) 100%);

}



.about-project {

    padding: clamp(1rem, 10vw, 3rem) 0;

}



.for-down {

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

}



.project-pricebtn {

    color: var(--headtwo-color);

}



.project-price-card p {

    text-align: center;

    color: var(--light-color);

}



.project-price-card .project-pricebtn {

    background-color: var(--ckc-color);

    color: #fff;

    font-size: 14px;

    width: 80%;

    padding: 1rem 2rem;

    text-align: center;

    overflow: hidden;

    position: relative;

    background-color: var(--headtwo-color);

    border: unset;

    border-radius: 20px;

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    -ms-border-radius: 20px;

    -o-border-radius: 20px;

    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(255, 255, 255, 0.2) 0px -3px 0px inset;



    span {

        z-index: 20;

    }



    &:after {

        background: #fbfbfb;

        content: "";

        height: 155px;

        left: -75px;

        opacity: .2;

        position: absolute;

        top: -50px;

        transform: rotate(35deg);

        transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);

        width: 50px;

        z-index: -10;

    }

}



.project-price-card .project-pricebtn:hover {

    &:after {

        left: 120%;

        transition: all 750ms cubic-bezier(0.19, 1, 0.22, 1);

        -webkit-transition: all 750ms cubic-bezier(0.19, 1, 0.22, 1);

        -moz-transition: all 750ms cubic-bezier(0.19, 1, 0.22, 1);

        -ms-transition: all 750ms cubic-bezier(0.19, 1, 0.22, 1);

        -o-transition: all 750ms cubic-bezier(0.19, 1, 0.22, 1);

    }



    transform: scale(1.0122);

    -webkit-transform: scale(1.0122);

    -moz-transform: scale(1.0122);

    -ms-transform: scale(1.0122);

    -o-transform: scale(1.0122);

    transition: ease-in 0.22s;

    -webkit-transition: ease-in 0.22s;

    -moz-transition: ease-in 0.22s;

    -ms-transition: ease-in 0.22s;

    -o-transition: ease-in 0.22s;

    cursor: pointer;

    cursor: pointer;

    box-shadow: rgb(200, 173, 106) 0px 1px 3px 0px,

    rgb(206, 179, 111) 0px 0px 0px 1px;

}



.project-price-card .project-pricebtn h3 {

    margin-bottom: 0;

}



.hover-border {

    position: relative;

    display: inline-block;

    color: #333;

    text-decoration: none;

    padding-bottom: 4px;

    cursor: pointer;

}



.hover-border::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    height: 1px;

    width: 0%;

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

    /* Customize border color */

    transition: width 0.3s ease;

}



.hover-border:hover::after {

    width: 100%;

}



.project-pricebtn h3 {

    margin-bottom: 0;

}



.project-specification {

    padding: clamp(1rem, 10vw, 3rem) 0;

}



.project-specification #outerTab {

    display: flex;

    justify-content: center;

    border-bottom: 0;

}



.project-specification #innerTab {

    display: flex;

    justify-content: center;

    border-bottom: 0;

}



.project-specification .group-tabs {

    display: flex;

    justify-content: center;

    margin: 1rem 0 0;

    padding: 0.3rem;

    background: var(--primary-color);

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

}



.project-specification .group-tabs button {

    border: unset;

    border-radius: 20px;

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    -ms-border-radius: 20px;

    -o-border-radius: 20px;

    padding: 0.5rem 3rem;

    color: var(--light-color);

    font-family: 'lulu-bold', sans-serif;

}



.project-specification .group-tabs .nav-tabs .nav-item.show .nav-link,

.nav-tabs .nav-link.active {

    color: var(--headtwo-color);

    font-family: 'lulu-medium', sans-serif;

}



.project-specification .group-tabstwo {

    display: flex;

    justify-content: center;

    margin: 1rem 0 0;

    padding: 0.3rem;

    background: var(--gray-two);

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

}



.project-specification .group-tabstwo button {

    border: unset;

    border-radius: 20px;

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    -ms-border-radius: 20px;

    -o-border-radius: 20px;

    padding: 0.3rem 3rem;

    color: var(--dark-color);

    font-family: 'lulu', sans-serif;

    font-size: 0.8rem;

}



.project-amenities .heading h3 {

    text-align: center;

    color: var(--headtwo-color);

    margin-bottom: clamp(1rem, 10vw, 2rem);

}



.counter {

    text-align: center;

    position: relative;

    background: var(--primary-color);

    padding: 0 0 1rem;

    color: #ffffff;

    z-index: 999;

    font-family: "Afacad", sans-serif;

}



.current-slide {

    font-size: 20px;

}



.gallery-slider {

    width: 100%;

    height: auto;

    margin-bottom: -2px;

    overflow-x: hidden;

}



.gallery-slider .swiper-slide {

    width: auto;

    height: 100%;

}



.gallery-slider .swiper-slide img {

    display: block;

    width: 100%;

    height: auto;

    margin: 0 auto;

}



.gallery-thumbs {

    position: relative;

    width: 100%;

    padding: 0;

    overflow: hidden;

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

    padding: 1rem 0 0;

}



.gallery-thumbs p {

    margin-bottom: 0;

}



.gallery-thumbs .swiper-slide {

    width: auto;

    text-align: center;

    opacity: 0.4;

    transform: scale3d(0.8, 0.8, 0.8);

}



.gallery-thumbs .swiper-slide-active {

    opacity: 1;

    transform: scale3d(1, 1, 1);

}



.gallery-thumbs .swiper-slide img {

    width: 70%;

    height: 100%;

}



.swiper-button-prev-gall,

.swiper-button-next-gall {

    width: 40px;

    height: 40px;

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    position: absolute;

    z-index: 10;

}



.swiper-button-prev-gall {

    cursor: pointer;

    left: 10px;

    top: 50%;

    transform: translateY(-50%);

    background-image: url('../images/icons/project/nav/next.svg');

}



.swiper-button-next-gall {

    cursor: pointer;

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

    background-image: url('../images/icons/project/nav/prev.svg');

}



.swiper-button-prev-prj,

.swiper-button-next-prj {

    width: 40px;

    height: 40px;

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    position: absolute;

    z-index: 10;

}



.swiper-button-prev-prj:hover,

.swiper-button-next-prj:hover {

    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

}



.swiper-button-prev-prj {

    cursor: pointer;

    left: 10px;

    top: 50%;

    transform: translateY(-50%);

    background-image: url('../images/icons/white-prev.svg');

}



.swiper-button-next-prj {

    cursor: pointer;

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

    background-image: url('../images/icons/white-next.svg');

}



.gallery {

    padding: clamp(1rem, 10vw, 3rem) 0;

}



.gallery .heading h3 {

    text-align: center;

    padding-bottom: 1rem;

    color: var(--headtwo-color);

}



.project-location {

    padding: clamp(1rem, 10vw, 3rem) 0;

}



.project-location .heading h3 {

    text-align: center;

    color: var(--headtwo-color);

    padding-bottom: 1rem;

}



.project-location iframe {

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

}



.projects-dream-home {

    padding: 0 0 clamp(1rem, 10vw, 3rem);

}



.projects-dream-home .row {

    text-align: center;

    background-color: var(--headtwo-color);

    padding: clamp(2rem, 10vw, 04rem) 0;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    overflow: hidden;

    position: relative;

}



.projects-dream-home .heading h3 {

    padding-bottom: 1rem;

    color: var(--light-color);

    position: relative;

    z-index: 99;

}



.gradient-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 200%;

    height: 100%;

    background: linear-gradient(90deg, #96824F 0%, #BFA35B 50%, #96824F 100%);

    animation: moveGradient 8s ease-in-out infinite;

    -webkit-animation: moveGradient 8s ease-in-out infinite;

}



@keyframes moveGradient {

    0% {

        transform: translateX(0);

    }



    50% {

        transform: translateX(-50%);

    }



    100% {

        transform: translateX(0);

    }

}



.gradient-green-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 200%;

    height: 100%;

    background: linear-gradient(90deg, #0A4833 0%, #019c4c 50%, #0A4833 100%);

    animation: moveGradient 8s ease-in-out infinite;

    -webkit-animation: moveGradient 8s ease-in-out infinite;

}



@keyframes moveGradient {

    0% {

        transform: translateX(0);

    }



    50% {

        transform: translateX(-50%);

    }



    100% {

        transform: translateX(0);

    }

}



/* -------emi-calculator----------- */

/* Chrome, Safari, Edge, Opera */

.emi-cal input[type=number]::-webkit-inner-spin-button,

.emi-cal input[type=number]::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

}



/* Firefox */

.emi-cal input[type=number] {

    -moz-appearance: textfield;

}



/* WebKit browsers (Chrome, Safari, Edge) */

/* Base slider styles */

.emi-cal input[type=range].duration-slider {

    -webkit-appearance: none;

    appearance: none;

    width: 100%;

    height: 8px;

    border-radius: 4px;

    background: transparent;

    outline: none;

    position: relative;

    z-index: 3;

}



/* Chrome/Safari/WebKit */

.emi-cal input[type=range].duration-slider::-webkit-slider-runnable-track {

    width: 100%;

    height: 8px;

    background: transparent;

    border-radius: 4px;

    border: none;

    -webkit-appearance: none;

}



.emi-cal input[type=range].duration-slider::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: 20px;

    height: 20px;

    background: var(--head-color);

    border: 2px solid white;

    border-radius: 50%;

    cursor: pointer;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    margin-top: -8px;

    /* (thumb_height - track_height) / 2 = (20 - 8) / 2 = -6px, adjusted for border */

}



.emi-cal input[type=range].duration-slider::-webkit-slider-thumb:hover {

    transform: scale(1.1);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);

}



/* Firefox */

.emi-cal input[type=range].duration-slider::-moz-range-track {

    width: 100%;

    height: 8px;

    background: transparent;

    border-radius: 4px;

    border: none;

}



.emi-cal input[type=range].duration-slider::-moz-range-thumb {

    width: 20px;

    height: 20px;

    background: var(--head-color);

    border: 2px solid white;

    border-radius: 50%;

    cursor: pointer;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    /* Remove default border and background */

    -moz-appearance: none;

    appearance: none;

}



.emi-cal input[type=range].duration-slider::-moz-range-thumb:hover {

    transform: scale(1.1);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);

}



/* Internet Explorer/Edge */

.emi-cal input[type=range].duration-slider::-ms-track {

    width: 100%;

    height: 8px;

    background: transparent;

    border-color: transparent;

    color: transparent;

    border-radius: 4px;

}



.emi-cal input[type=range].duration-slider::-ms-fill-lower {

    background: #ddd;

    border-radius: 4px;

}



.emi-cal input[type=range].duration-slider::-ms-fill-upper {

    background: #ddd;

    border-radius: 4px;

}



.emi-cal input[type=range].duration-slider::-ms-thumb {

    width: 20px;

    height: 20px;

    background: var(--head-color, #28a745);

    border: 2px solid white;

    border-radius: 50%;

    cursor: pointer;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}



/* Container and other styles */

.emi-cal .input-group {

    position: relative;

    display: block;

    width: 100%;

    margin-bottom: 1rem;

}



.emi-cal .form-control {

    width: 100% !important;

    border-radius: 30px !important;

    -webkit-border-radius: 30px !important;

    -moz-border-radius: 30px !important;

    -ms-border-radius: 30px !important;

    -o-border-radius: 30px !important;

}



.slider-container {

    position: relative;

    padding: 0 0 1rem;

}



.emi-result {

    background: white;

    border-radius: 20px;

    padding: 5rem 0;

    text-align: center;

    margin-top: 2rem;

    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

}



.emi-cal .btn-close {

    padding: 0.4rem;

    border-radius: 50%;

    border: 1px solid #000;

    font-size: 0.8rem;

    opacity: 1;

    filter: brightness(0%) invert(2%);

    position: relative;

}



.emi-cal .btn-close:hover {

    transform: scale(1.02);

    -webkit-transform: scale(1.02);

    -moz-transform: scale(1.02);

    -ms-transform: scale(1.02);

    -o-transform: scale(1.02);

    transition: all 0.3s;

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -ms-transition: all 0.3s;

    -o-transition: all 0.3s;

}



.emi-label {

    font-size: 18px;

    color: #666;

    margin-bottom: 10px;

}



.emi-amount {

    font-size: 36px;

    font-weight: bold;

    color: #333;

    margin-bottom: 5px;

}



.emi-period {

    font-size: 18px;

    color: #666;

}



/* Progress track styles (if you're using custom progress indication) */

.slider-track {

    position: absolute;

    top: 20%;

    left: 0;

    right: 0;

    height: 8px;

    background: #fff;

    border-radius: 4px;

    transform: translateY(-50%);

    z-index: 1;

    pointer-events: none;

}



.slider-progress {

    position: absolute;

    top: 50%;

    left: 0;

    height: 8px;

    background: var(--primary-color, #28a745);

    border-radius: 4px;

    transform: translateY(-50%);

    z-index: 2;

    transition: width 0.3s ease;

    -webkit-transition: width 0.3s ease;

    -moz-transition: width 0.3s ease;

    -ms-transition: width 0.3s ease;

    -o-transition: width 0.3s ease;

    pointer-events: none;

}



.slider-labels {

    display: flex;

    justify-content: space-between;

    margin-top: 10px;

    font-size: 14px;

    color: #666;

}



.talk-button {

    background: var(--primary-color);

    color: white;

    border: none;

    border-radius: 25px;

    padding: 15px 30px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    margin-top: 20px;

    width: 100%;

    font-family: 'lulu-light', sans-serif;

}



.talk-button:hover {

    background: #218838;

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);

}



.emi-cal .modal-dialog {

    max-width: 880px;

}



.emi-cal .modal-dialog .modal-content .modal-body {

    background-color: var(--gray-two);

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

}



.emi-cal .modal-dialog .modal-content {

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    margin-top: 100px;

}



/* ----------explore-project------------ */

.exp-project {

    position: relative;

}



.exp-project .main-button {

    position: absolute;

    right: 2%;

    bottom: 0;

    margin-bottom: 2%;

}



.exp-our-project {

    padding: clamp(1rem, 10vw, 3rem) 0;

}



.exp-our-project .heading h3 {

    color: var(--headtwo-color);

    text-align: center;

}



.exp-our-project .heading h5 {

    padding-bottom: 1rem;

    text-align: center;

    padding-bottom: 2rem;

}



.exp-our-project h4 {

    color: var(--headtwo-color);

}



.exp-project-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: repeat(2, 1fr);

    gap: 0 2rem;

}



.exp-project-grid .div1 {

    grid-column: span 2 / span 2;

    margin-bottom: 1.3rem;

}



.exp-project-grid .div2 {

    grid-column-start: 3;

    margin-bottom: 1.3rem;

}



.exp-project-grid .div3 {

    grid-row-start: 2;

    margin-bottom: 1.3rem;

}



.exp-project-grid .div4 {

    grid-row-start: 2;

    margin-bottom: 1.3rem;

}



.exp-project-grid .div5 {

    grid-row-start: 2;

    margin-bottom: 1.3rem;

}



.exp-project-form .exp-form-control {

    border: none;

    border-radius: 20px;

    padding: 12px 20px;

    font-size: 14px;

    background-color: rgba(255, 255, 255, 0.95);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

    width: 100%;

}



.exp-project-form .exp-form-control:focus {

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

    transform: translateY(-1px);

    border: none;

    outline: none;

}



.exp-project-form .exp-form-control::placeholder {

    color: #999;

    font-size: 13px;

}



.exp-project-form .exp-keyword-search {

    position: relative;

}



.exp-project-form .exp-search-tabs {

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    display: flex;

    align-items: center;

    z-index: 10;

}



.exp-project-form .exp-tab-sale {

    background-color: #1e5f4f;

    color: white;

    padding: 0.4rem 2rem;

    border-radius: 15px;

    margin-left: 5px;

    border: none;

    cursor: pointer;

}



.exp-project-form .exp-tab-rent {

    background: transparent;

    color: #666;

    padding: 8px 16px;

    border: none;

    font-size: 12px;

    cursor: pointer;

}



.exp-project-form .exp-keyword-input {

    padding-left: 120px !important;

    width: 100%;

}



.exp-project-form {

    background: linear-gradient(135deg, #a8926b, #9c8b63);

    border-radius: 30px;

    padding: clamp(1rem, 10vw, 3rem) clamp(1rem, 10vw, 2rem);

    margin: 0 auto;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    margin: 2rem 0;

}



.exp-project-form .heading {

    color: var(--light-color);

}



.exp-onging {

    padding: clamp(1rem, 10vw, 3rem) 0;

}



.exp-onging .heading h3 {

    margin-bottom: 2rem;

}



.exp-project-card {

    position: relative;

    margin: 0 0.6rem;

    box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;

    border-radius: 45px;

    -webkit-border-radius: 45px;

    -moz-border-radius: 45px;

    -ms-border-radius: 45px;

    -o-border-radius: 45px;

}



.exp-project-card .exp-card-title p {

    position: absolute;

    bottom: 0;

    padding: 1rem;

    background: red;

    margin: 1rem auto;

    border-radius: 30px;

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

    border-radius: 16px;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    backdrop-filter: blur(4.8px);

    -webkit-backdrop-filter: blur(4.8px);

    border: 1px solid rgba(255, 255, 255, 0.3);

    width: 90%;

    text-align: center;

}



.exp-project-card .exp-card-title {

    display: flex;

    justify-content: center;

}



.gal-img-arrow {

    position: absolute;

    padding: 0.18rem 4px 4px;

    z-index: 999;

    right: 10px;

    top: 10px;

    cursor: pointer;

    border-radius: 30px;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    backdrop-filter: blur(4.8px);

    background: rgba(159, 159, 159, 0.54);

    border-radius: 30px;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    backdrop-filter: blur(4.8px);

    -webkit-backdrop-filter: blur(4.8px);

    border: 1px solid rgba(0, 110, 57, 0.21);

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    opacity: 0;

}



.gal-img-arrow img {

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    border-radius: 30px;

}



.exp-project-card:hover .gal-img-arrow {

    opacity: 1;

    transform: translateY(0);

    transition: all 0.3s;

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -ms-transition: all 0.3s;

    -o-transition: all 0.3s;

    transform: scale(1.08);

    -webkit-transform: scale(1.08);

    -moz-transform: scale(1.08);

    -ms-transform: scale(1.08);

    -o-transform: scale(1.08);

    animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

}



@keyframes slide-in-bottom {

    0% {

        -webkit-transform: translateY(100px);

        transform: translateY(100px);

        opacity: 0;

        -moz-transform: translateY(100px);

        -ms-transform: translateY(100px);

        -o-transform: translateY(100px);

    }



    100% {

        -webkit-transform: translateY(0);

        transform: translateY(0);

        opacity: 1;

    }

}



.exp-project-card:hover .exp-card-title p {

    background: #fff;

}



.exp-project-card:hover {

    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;

    border-radius: 45px;

    -webkit-border-radius: 45px;

    -moz-border-radius: 45px;

    -ms-border-radius: 45px;

    -o-border-radius: 45px;

    transform: translateY(-2px);

    -webkit-transform: translateY(-2px);

    -moz-transform: translateY(-2px);

    -ms-transform: translateY(-2px);

    -o-transform: translateY(-2px);

    transition: all steps(4) 0.2s;

    -webkit-transition: all steps(4) 0.2s;

    -moz-transition: all steps(4) 0.2s;

    -ms-transition: all steps(4) 0.2s;

    -o-transition: all steps(4) 0.2s;

}



.complete-prj {

    padding: clamp(1rem, 10vw, 3rem) 0;

}



.complete-prj .heading h3 {

    margin-bottom: 2rem;

}



.exp-project-card img {

    width: 100%;

}



.contact-form {

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

    padding: clamp(1rem, 5vw, 3rem) 2rem;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

}



.contact-btn {

    background: var(--headtwo-color);

    color: white;

    border: none;

    border-radius: 25px;

    padding: 12px 40px;

    font-size: 1rem;

    font-weight: 500;

    margin-top: 20px;

    transition: all 0.3s ease;

    cursor: pointer;

}



.contact-btn:hover {

    background: linear-gradient(45deg, #b39200, #C5A554);

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

}



.contact-form h3 {

    color: var(--light-color);

}



.contact-form label {

    color: var(--light-color);

    margin-left: 0.8rem;

    padding-bottom: 0.4rem;

    font-family: 'lulu-light', sans-serif;

}



input[type="number"]::-webkit-outer-spin-button,

input[type="number"]::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}



input[type="number"] {

    -moz-appearance: textfield;

}



.contact-details {

    padding: clamp(2rem, 5vw, 3rem) 0;

    padding-bottom: 0;

}



.contact-details h4 {

    color: var(--primary-color);

    font-family: 'lulu-bold', sans-serif;

}



.contact-details h5 {

    color: var(--primary-color);

    padding-top: 0.5rem;

    font-family: 'lulu-bold', sans-serif;

}



.contact-details ul {

    padding: 0;

}



.contact-details li {

    margin-bottom: 0.8rem;

}



.contact-details li:first-child {

    font-family: 'lulu-light', sans-serif;

}



.contact-location {

    padding: clamp(1rem, 10rem, 3rem) 0;

}



.contact-location h4 {

    color: var(--primary-color);

    padding-bottom: 1rem;

}



.contact-location iframe {

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

}



.gallery-img {

    padding: clamp(1rem, 10vw, 3rem) 0;

}



.gallery-img img {

    padding: 0.5rem 0;

}



.gallery-img .heading h3 {

    text-align: center;

    color: var(--headtwo-color);

    padding-bottom: 1rem;

}



.lazy-bg.fallback {

    opacity: 1;

    transition: none;

}



*[data-onovo-overlay] {

    position: relative;

}



.onovo-overlay {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: #fff;

    transition: transform 0.6s cubic-bezier(0.3, 0, 0.3, 1);

    -webkit-transition: transform 0.6s cubic-bezier(0.3, 0, 0.3, 1);

    transform-origin: top right;

    transform: scaleX(1);

    z-index: 2;

    pointer-events: none;

}



.animated--active [data-scroll=in] .onovo-overlay {

    transform: scaleX(0);

}



*[data-main-overlay] {

    position: relative;

}



.main-overlay {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: #f7f4ed;

    transition: transform 0.6s cubic-bezier(0.3, 0, 0.3, 1);

    -webkit-transition: transform 0.6s cubic-bezier(0.3, 0, 0.3, 1);

    transform-origin: left top;

    transform: scaleY(1);

    z-index: 2;

    pointer-events: none;

    -webkit-transform: scaleY(1);

    -moz-transform: scaleY(1);

    -ms-transform: scaleY(1);

    -o-transform: scaleY(1);

}



.animated--active [data-scroll=in] .main-overlay {

    transform: scaleY(0);

    -webkit-transform: scaleY(0);

    -moz-transform: scaleY(0);

    -ms-transform: scaleY(0);

    -o-transform: scaleY(0);

}



*[data-green-overlay] {

    position: relative;

}



.green-overlay {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: var(--primary-color);

    transition: transform 0.6s cubic-bezier(0.3, 0, 0.3, 1);

    -webkit-transition: transform 0.6s cubic-bezier(0.3, 0, 0.3, 1);

    transform-origin: left bottom;

    transform: scaleY(1);

    z-index: 2;

    pointer-events: none;

    -webkit-transform: scaleY(1);

    -moz-transform: scaleY(1);

    -ms-transform: scaleY(1);

    -o-transform: scaleY(1);

}



.animated--active [data-scroll=in] .green-overlay {

    transform: scaleY(0);

    -webkit-transform: scaleY(0);

    -moz-transform: scaleY(0);

    -ms-transform: scaleY(0);

    -o-transform: scaleY(0);

}



.splitting span:not(.whitespace) {

    position: relative;

    overflow: hidden;

    display: inline-block;

    vertical-align: top;

}



.splitting span .word {

    position: relative;

    transform: translate(0, 100%);

    transition: transform 0.6s cubic-bezier(0.3, 0, 0.3, 1);

    -webkit-transition: transform 0.6s cubic-bezier(0.3, 0, 0.3, 1);

}



.splitting span .word {

    -webkit-transition-delay: calc(100ms + 100ms * var(--line-index));

    transition-delay: calc(100ms + 100ms * var(--line-index));

}



.animated--active .splitting[data-scroll=in] span .word,

.animated--swiper--active .swiper-slide-active .splitting span .word {

    transform: translate(0, 0%);

}



/* ----------preloader---------- */

.preloader {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background: var(--primary-color);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    z-index: 9999;

    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);

}



.preloader.slide-up {

    transform: translateY(-100%);

}



.loader-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;

}



.loading-bars {

    display: flex;

    gap: 8px;

    opacity: 0;

    animation: fadeInUp 0.6s ease-out 0.4s forwards;

}



.bar {

    width: 4px;

    height: 40px;

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

    border-radius: 2px;

    animation: barAnimation 1.4s ease-in-out infinite;

}



.bar:nth-child(2) {

    animation-delay: 0.1s;

}



.bar:nth-child(3) {

    animation-delay: 0.2s;

}



.bar:nth-child(4) {

    animation-delay: 0.3s;

}



.bar:nth-child(5) {

    animation-delay: 0.4s;

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes barAnimation {



    0%,

    100% {

        transform: scaleY(0.3);

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

    }



    50% {

        transform: scaleY(1);

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

    }

}



@keyframes progressAnimation {

    from {

        width: 0%;

    }



    to {

        width: 100%;

    }

}



.exp-form-cls .row {

    position: relative;

    overflow: hidden;

}



*[data-zoom-out] {

    transform: scale(1.2);

    transition: transform 0.8s ease-out;

    -webkit-transform: scale(1.2);

    -moz-transform: scale(1.2);

    -ms-transform: scale(1.2);

    -o-transform: scale(1.2);

}



*[data-zoom-out][data-scroll="in"] {

    transform: scale(1);

}



.why-con-ban .row {

    text-align: center;

    background-color: var(--headtwo-color);

    padding: clamp(2rem, 10vw, 04rem) 0;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    overflow: hidden;

    position: relative;

}



.popup-form .modal-content {

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

    color: var(--light-color);

    padding: 0.2rem;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

}



.popup-form .modal-header {

    border-bottom: 1px dashed #41a40a;

    display: flex;

    justify-content: space-between;

}



.popup-form .form-select {

    width: 100%;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    padding: 0.7rem 0rem 0.7rem 0.7rem;

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

    color: var(--primary-color);

}



.popup-form .form-check-input:checked {

    background-color: #02060c;

    border-color: unset;

}



.form-cls-btn {

    background-color: transparent;

    border: 0;

}



.why-icon {

    width: 130px;

    height: 130px;

    border-radius: 50%;

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

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 auto;

    padding: 1.5rem;

}



.why-icon:hover {

    transform: scale(1.02);

    -webkit-transform: scale(1.02);

    transition: all 0.3s ease;

    background: linear-gradient(45deg, #b39200, #ffd650);

    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    -moz-transform: scale(1.02);

    -ms-transform: scale(1.02);

    -o-transform: scale(1.02);

}



.flexi-icon {

    width: 130px;

    height: 130px;

    border-radius: 50%;

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

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 auto;

    padding: 1.5rem;

}



.flexi-icon:hover {

    transform: scale(1.02);

    -webkit-transform: scale(1.02);

    transition: all 0.3s ease;

    background: linear-gradient(45deg, #b39200, #ffd650);

    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    -moz-transform: scale(1.02);

    -ms-transform: scale(1.02);

    -o-transform: scale(1.02);

}



.nri-icon {

    width: 130px;

    height: 130px;

    border-radius: 50%;

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

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 auto;

    padding: 2rem !important;

    margin-bottom: 0.4rem;

}



.nri-icon:hover {

    transform: scale(1.02);

    -webkit-transform: scale(1.02);

    transition: all 0.3s ease;

    background: linear-gradient(45deg, #b39200, #ffd650);

    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    -moz-transform: scale(1.02);

    -ms-transform: scale(1.02);

    -o-transform: scale(1.02);

}



.mob-enq-button {

    width: 100%;

    background-color: var(--headtwo-color);

    color: var(--gray-two);

    border: 1px solid var(--light-color);

    padding: 0.5rem 1rem;

}



.mob-enq {

    position: fixed;

    bottom: 0;

    right: 0;

    width: 100%;

    z-index: 999;

}



.about-us .special-font{

    margin-right: -10px;

}