:root {

        /* Color Variables */

        --primary-color: #0f84b7;

        --primary-hover: #0a6a94;

        --success-color: #4CAF50;

        --error-color: #ff4444;

        --danger-color: #dc3545;

        --warning-color: #ffc107;

        --info-color: #17a2b8;

        --white: #ffffff;

        --black: #000000;

        --text-color: #333333;

        --border-color: #cfd8df;

        --light-gray: #f8f9fa;

        --overlay-dark: rgba(0, 0, 0, 0.75);

    }



    * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

    }



    html {

        scroll-behavior: smooth;

    }



    body {

        font-family: 'Plus Jakarta Sans', sans-serif;

        overflow-x: hidden;

    }



    /* ============================================

    HEADER SECTION

    ============================================ */

    .header {

        max-height: 500px;

        min-height: 600px;

        width: 100%;

        background-image: url("../assets/images/header-pic.png");

        background-size: cover;

        background-position: center;

        background-repeat: no-repeat;

        position: relative;

        padding-bottom: 40px;

    }



    .header::before {

        content: "";

        position: absolute;

        inset: 0;

        z-index: 1;

        background: linear-gradient(257deg, rgba(7, 28, 31, 0) 0%, #071C1F 90%);



    }



    .header-inner {

        position: relative;

        z-index: 100;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 20px 80px;

    }



    .logo img {

        height: 56.47px;

    }



    .nav ul {

        display: flex;

        gap: 40px;

        list-style: none;

    }



    .nav li a {

        color: white;

        text-decoration: none;

        font-size: 18px;

        font-weight: 600;

        line-height: 32.4px;

        cursor: pointer;

        transition: color 0.3s ease;

    }



    .nav li a:hover {

        color: var(--primary-color);

    }



    .contact {

        display: flex;

        align-items: center;

        gap: 14px;

    }



    .contact a {

        text-decoration: none;

        display: inline-flex;

    }



    .menu-toggle {

        display: none;

        flex-direction: column;

        justify-content: space-between;

        width: 30px;

        height: 22px;

        cursor: pointer;

        z-index: 101;

        background: none;

        border: none;

        padding: 0;

        position: relative;

    }



    .menu-toggle span {

        display: block;

        width: 100%;

        height: 3px;

        background: white;

        border-radius: 2px;

        transition: all 0.3s ease-in-out;

        transform-origin: center;

    }



    .menu-toggle span:nth-child(1) {

        transform: translateY(0) rotate(0);

    }



    .menu-toggle span:nth-child(2) {

        opacity: 1;

    }



    .menu-toggle span:nth-child(3) {

        transform: translateY(0) rotate(0);

    }



    .menu-toggle.active span:nth-child(1) {

        transform: translateY(9.5px) rotate(45deg);

    }



    .menu-toggle.active span:nth-child(2) {

        opacity: 0;

        transform: translateX(-20px);

    }



    .menu-toggle.active span:nth-child(3) {

        transform: translateY(-9.5px) rotate(-45deg);

    }



    .header-content-wrapper {

        position: relative;

        z-index: 10;

        display: flex;

        align-items: flex-start;

        justify-content: space-between;

        padding: 60px 80px 0;

        gap: 60px;

        flex: 1;

        max-width: 100%;

    }



    .whatsapp-img {

        height: 22px;

        cursor: pointer;

    }



    .contact .whatsapp-img {

        background: #25D366;

        border-radius: 50%;

        height: 46px;

        width: 46px;

        object-fit: contain;

        transition: transform 0.3s ease;

    }



    .contact .whatsapp-img:hover {

        transform: scale(1.1);

    }



    .call-us {

        display: flex;

        align-items: center;

        gap: 10px;

        background: #008fd0;

        color: white;

        font-size: 18px;

        font-weight: 600;

        padding: 12px 28px;

        border-radius: 40px;

        cursor: pointer;

        transition: background 0.3s ease;

    }



    .call-us:hover {

        background: var(--primary-hover);

    }



    .call-us img {

        height: 20px;

    }



    .content {

        flex: 1;

        max-width: 550px;

        color: #ffffff;

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        padding-top: 20px;

    }



    .content h1 {

        font-size: 80px;

        font-weight: 400;

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

        color: #008FD0;

        line-height: 80px;

        margin-bottom: 15px;

        text-transform: uppercase;

    }



    .content p {

        font-size: 24px;

        line-height: 34px;

        font-weight: 500;

        color: #ffffff;

    }



    /* ============================================

    FORM STYLES

    ============================================ */

    .form,

    .footer-form {

        width: 420px;

        padding: 40px 35px;

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

        background: #FFFFFF;

    }



    .form {

        flex-shrink: 0;

        border-radius: 4px;

        align-self: flex-start;

        position: relative;

        /* transform: translateY(10%); */

        z-index: 50;

    }



    .footer-form {

        background: #f5f5f5;

        display: flex;

        flex-direction: column;

        gap: 18px;

    }



    .form h3,

    .footer-form h3 {

        margin-bottom: 31px;

        position: relative;

        font-size: 22px;

        padding-left: 18px;

        color: black;

    }



    .form h3::before,

    .footer-form h3::before {

        content: "";

        position: absolute;

        left: 0;

        top: 50%;

        transform: translateY(-50%);

        width: 4px;

        height: 28px;

        background: #008FD0;

    }



    .form form,

    .footer-form form {

        display: flex;

        flex-direction: column;

        gap: 18px;

    }



    .input-field {

        position: relative;

    }



    .input-field input,

    .input-field textarea {

        width: 100%;

        padding: 14px 40px 14px 14px;

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

        font-size: 14px;

        outline: none;

        transition: border-color 0.3s ease;

    }



    .input-field input:focus,

    .input-field textarea:focus {

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

    }



    .input-field textarea {

        height: 100px;

        resize: none;

    }



    .input-field img {

        position: absolute;

        right: 12px;

        top: 50%;

        transform: translateY(-50%);

        width: 15px;

        height: 18px;

        pointer-events: none;

    }



    .input-field textarea+img {

        top: 14px;

        transform: none;

    }



    .form button,

    .footer-form button {

        margin-top: 10px;

        width: 197px;

        height: 50px;

        background: var(--primary-color);

        align-self: center;

        border: none;

        color: var(--white);

        font-size: 16px;

        font-weight: 400;

        cursor: pointer;

        transition: background 0.3s ease;

    }



    .form button:hover,

    .footer-form button:hover {

        background: var(--primary-hover);

    }



    .form button:disabled,

    .footer-form button:disabled {

        opacity: 0.6;

        cursor: not-allowed;

    }



    .form-message {

        display: none;

        margin-bottom: 15px;

        padding: 12px;

        border-radius: 5px;

        font-size: 14px;

        font-weight: 500;

        text-align: center;

    }



    .form-message.success {

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

        color: var(--white);

        display: block;

    }



    .form-message.error {

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

        color: var(--white);

        display: block;

    }



    .error-message {

        display: none;

        color: var(--error-color);

        font-size: 12px;

        margin-top: 5px;

    }



    .error-message.show {

        display: block;

    }



    .input-field input.error,

    .input-field textarea.error {

        border-color: var(--error-color);

    }



    /* ============================================

    ABOUT SECTION

    ============================================ */

    .about {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 80px;

        padding: 80px 120px;

        padding-top: 200px;

        background: white;

    }



    .about-content {

        flex: 1;

        max-width: 560px;

    }



    .about-content h2 {

        font-size: 36px;

        font-weight: 400;

        margin-bottom: 16px;

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

        text-transform: uppercase;

        color: #222222;

    }



    .about-content p {

        font-size: 16px;

        font-weight: 400;

        line-height: 24px;

        color: #6a6a6a;

    }



    .about-image {

        flex: 1;

        display: flex;

        justify-content: center;

    }



    .about-image img {

        width: 100%;

        max-width: 520px;

        height: auto;

        object-fit: cover;

    }



    /* ============================================

    PROJECTS SECTION

    ============================================ */

    .projects {

        display: flex;

        align-items: center;

        gap: 100px;

        background: #F5F5F5;

        padding: 80px 120px;

    }



    .projects-image {

        position: relative;

        width: 420px;

        flex-shrink: 0;

    }



    .projects-image img {

        width: 100%;

        height: auto;

        object-fit: cover;

    }



    .img-back {

        position: absolute;

        left: -60px;

        bottom: -60px;

        width: 280px;

        opacity: 0.6;

    }



    .img-front {

        position: relative;

        width: 340px;

        z-index: 2;

    }



    .projects-content {

        flex: 1;

        max-width: 600px;

    }



    .projects-content h2 {

        font-size: 36px;

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

        font-weight: 400;

        margin-bottom: 30px;

        color: #222222;

    }



    .projects-content ul {

        list-style: none;

    }



    .projects-content li {

        display: flex;

        align-items: flex-start;

        gap: 10px;

        margin-bottom: 8px;

        font-size: 16px;

        line-height: 1.4;

    }



    .projects-content li img {

        width: 18px;

        height: 18px;

        margin-top: 4px;

        flex-shrink: 0;

    }



    .highlight-text {

        flex: 1;

    }



    .highlight-text strong {

        display: inline;

        font-weight: 700;

        margin-right: 6px;

    }



    .highlight-text span {

        color: #4a4a4a;

        line-height: 1.4;

    }



    /* ============================================

    AMENITIES SECTION

    ============================================ */

    .amenities {

        text-align: center;

        background: #fff;

        padding: 80px 120px;

    }



    .amenities h2 {

        font-size: 40px;

        font-weight: 400;

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

        margin-bottom: 20px;

        color: #222222;

    }



    .amenities p {

        max-width: 720px;

        margin: 0 auto 50px;

        line-height: 24px;

        color: #6E6E6E;

        font-size: 16px;

    }



    .amenities-list {

        list-style: none;

        display: grid;

        grid-template-columns: repeat(2, max-content);

        gap: 15px 30px;

        justify-content: center;

        margin: 0 auto 20px;

    }



    .amenities-list li {

        display: flex;

        align-items: flex-start;

        gap: 10px;

        font-size: 18px;

        font-weight: 600;

        text-align: left;

    }



    .amenities-list img {

        width: 18px;

        height: 18px;

        margin-top: 4px;

        flex-shrink: 0;

    }



    .visit-btn {

        margin-top: 50px;

        padding: 16px 36px;

        background: #0f84b7;

        color: white;

        border: none;

        font-size: 16px;

        font-weight: 600;

        cursor: pointer;

        transition: background 0.3s ease;

    }



    .visit-btn:hover {

        background: var(--primary-hover);

    }



    /* ============================================

    INFRASTRUCTURE SECTION

    ============================================ */

    .infrastructure {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 80px;

        padding: 80px 120px;

        background: #f5f5f5;

    }



    .infrastructure-content {

        flex: 1;

        max-width: 520px;

    }



    .infrastructure-content h2 {

        font-size: 36px;

        font-weight: 400;

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

        margin-bottom: 30px;

        color: #222222;

    }



    .infrastructure-content ul {

        list-style: none;

        display: flex;

        flex-direction: column;

        gap: 12px;

    }



    .infrastructure-content li {

        display: flex;

        align-items: flex-start;

        gap: 10px;

        font-size: 18px;

        font-weight: 600;

        line-height: 1.3;

    }



    .infrastructure-content li img {

        width: 18px;

        height: 18px;

        margin-top: 4px;

        flex-shrink: 0;

    }



    .infrastructure-image {

        flex: 1;

        display: flex;

        justify-content: flex-end;

    }



    .infrastructure-image img {

        width: 100%;

        max-width: 520px;

        height: auto;

        object-fit: cover;

    }



    /* ============================================

    PAYMENT PLAN SECTION

    ============================================ */

    .payment-plan {

        padding: 80px 120px;

        background: white;

    }



    .payment-plan h2 {

        text-align: center;

        font-size: 36px;

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

        font-weight: 400;

        margin-bottom: 32px;

        color: #222222;

    }



    .payment-grid {

        display: grid;

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

        gap: 10px;

    }



    .card {

        background: #F5F5F5;

        padding: 20px 30px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        min-height: 100px;

    }



    .card h3 {

        color: #008FD0;

        font-size: 32px;

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

        font-weight: 400;

        margin-bottom: 10px;

    }



    .card span {

        font-size: 20px;

        font-weight: 700;

        color: #222;

    }



    .card.wide {

        grid-column: span 2;

    }



    /* ============================================

    FOOTER SECTION

    ============================================ */

    .footer {

        position: relative;

    }



    .footer-cta {

        background: #008FD0;

        padding: 60px 120px;

        position: relative;

    }



    .cta-text h2 {

        color: white;

        font-size: 60px;

        line-height: 60px;

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

        font-weight: 400;

    }



    .cta-text p {

        color: white;

        margin-top: 10px;

        font-size: 18px;

    }



    .footer-form {

        position: absolute;

        right: 120px;

        top: 0;

        z-index: 10;

    }



    .footer-bottom {

        background: url("../assets/images/footer.png") center/cover no-repeat;

        padding: 120px 120px 36px;

        color: white;

    }



    .footer-logo-image {

        width: 100%;

        max-width: 392px;

        height: auto;

        margin-bottom: 20px;

    }



    .footer-logo p {

        max-width: 420px;

        line-height: 26px;

        font-size: 16px;

        margin-bottom: 20px;

    }



    .footer-location {

        display: flex;

        gap: 10px;

        align-items: flex-start;

    }



    .footer-location img {

        width: 18px;

        height: 18px;

        flex-shrink: 0;

        margin-top: 2px;

    }



    .copyright {

        text-align: center;

        padding: 20px 0;

        color: white;

        font-size: 16px;

        margin-top: 100px;

        font-weight: 400;

    }



    .input-placeholder::placeholder {

        color: #B7B7B7;

        font-size: 14px;

        font-weight: 400;

    }

    /* ============================================
    MODAL POPUP
    ============================================ */

    .custom-modal {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(6px);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.35s ease, visibility 0.35s ease;
        z-index: 9999;
    }

    .custom-modal.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .custom-modal-content {
        background: white;
        width: 90%;
        max-width: 720px;
        border-radius: 6px;
        overflow: hidden;
        position: relative;
        transition: transform 0.35s ease;
    }

    .modal-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: 100%;
    }

    .modal-grid .form {
        box-shadow: none;
        padding-bottom: 0;
        z-index: 0;
    }

    .modal-image {
        position: relative;
        overflow: hidden;
    }

    .modal-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .modal-close {
        position: absolute;
        top: 12px;
        right: 14px;
        border: none;
        font-size: 26px;
        line-height: 1;
        background: none;
        color: #666;
        cursor: pointer;
        z-index: 100;
        transition: color 0.2s ease;
    }

    .modal-close:hover {
        color: #000;
    }

    .thankyou-modal-content {
        background-color: #ffffff;
        isolation: isolate;
        width: 90%;
        max-width: 440px;
        border-radius: 12px;
        padding: 20px;
        position: relative;
        text-align: center;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    }

    .thankyou-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .thankyou-body h2 {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .thankyou-body p {
        font-size: 1rem;
        color: #666;
        line-height: 1.6;
        max-width: 320px;
    }

    /* ============================================

    MEDIA QUERIES - RESPONSIVE DESIGN

    Breakpoints: 1440px, 1200px, 1024px, 768px, 480px

    ============================================ */



    /* Large Desktop (1440px and below) */

    @media (max-width: 1440px) {

        .header-inner {

            padding-left: 60px;

            padding-right: 60px;

        }



        .header-content-wrapper {

            padding-left: 60px;

            padding-right: 60px;

        }



        .about,

        .projects,

        .amenities,

        .infrastructure,

        .payment-plan,

        .footer-cta,

        .footer-bottom {

            padding-left: 80px;

            padding-right: 80px;

        }



        .footer-form {

            right: 80px;

        }

    }


    @media (max-width:1300px) {
        .cta-text h2 {

            font-size: 50px;

            line-height: 55px;

        }



        .cta-text p {

            font-size: 16px;

        }
    }

    @media (max-width:1100px) {
        .cta-text h2 {

            font-size: 48px;

            line-height: 52px;

        }



        .cta-text p {

            font-size: 16px;

        }
    }

    /* Desktop / Laptop (1200px and below) */

    @media (max-width: 1200px) {

        .header {

            min-height: 550px;

            padding-bottom: 40px;

        }



        .header-inner {

            padding: 18px 50px;

        }



        .header-content-wrapper {

            padding: 50px 50px 0;

            gap: 40px;

        }



        .content {

            max-width: 480px;

            padding-top: 15px;

        }



        .content h1 {

            font-size: 68px;

            line-height: 68px;

        }



        .content p {

            font-size: 22px;

            line-height: 32px;

        }



        .form {

            width: 380px;

            padding: 35px 30px;

        }



        .logo img {

            height: 48px;

        }



        .nav ul {

            gap: 30px;

        }



        .nav li a {

            font-size: 16px;

        }



        .call-us {

            padding: 10px 20px;

            font-size: 16px;

        }



        .contact .whatsapp-img {

            height: 40px;

            width: 40px;

        }



        .about,

        .projects,

        .amenities,

        .infrastructure,

        .payment-plan {

            padding: 60px;

        }



        .about {

            padding-top: 180px;

        }



        .about-content h2,

        .projects-content h2,

        .infrastructure-content h2 {

            font-size: 32px;

        }



        .amenities h2 {

            font-size: 36px;

        }



        .payment-plan h2 {

            font-size: 32px;

        }



        .projects {

            gap: 60px;

        }



        .projects-content li {

            font-size: 15px;

        }



        .card {

            padding: 18px 25px;

        }



        .card h3 {

            font-size: 28px;

        }



        .card span {

            font-size: 18px;

        }



        .footer-cta {

            padding: 50px 60px;

        }



        .footer-form {

            right: 60px;

            width: 380px;

        }



        .footer-bottom {

            padding: 100px 60px 36px;

        }

    }



    /* Tablet Landscape (1024px and below) */

    @media (max-width: 1024px) {

        .header {

            min-height: 500px;

            padding-bottom: 40px;

        }



        .header-inner {

            padding: 16px 40px;

        }



        .header-content-wrapper {

            padding: 50px 40px 0;

            gap: 30px;

        }



        .content {

            max-width: 100%;

            flex: 1;

            padding-top: 15px;

        }



        .content h1 {

            font-size: 58px;

            line-height: 58px;

        }



        .content p {

            font-size: 20px;

            line-height: 30px;

        }


        .cta-text h2 {

            font-size: 45px;

            line-height: 48px;

        }

        .form {

            width: 360px;

            padding: 30px 25px;

        }

        .modal-grid .form {
            box-shadow: none;
            z-index: 0;
        }



        .about,

        .projects,

        .amenities,

        .infrastructure,

        .payment-plan {

            padding: 50px 40px;

        }



        .about {

            padding-top: 170px;

        }



        .projects {

            gap: 40px;

        }



        .projects-image {

            width: 300px;

        }



        .amenities-list {

            gap: 12px 25px;

        }



        .amenities-list li {

            font-size: 16px;

        }



        .infrastructure-content li,

        .projects-content li {

            font-size: 16px;

        }



        .payment-grid {

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

        }



        .footer-cta {

            padding: 50px 40px;

        }



        .footer-form {

            right: 40px;

            top: 50px;

            width: 360px;

            padding: 30px 25px;

        }



        .footer-bottom {

            padding: 100px 40px 36px;

        }

    }



    @media (max-width: 960px) {

        .header {

            max-height: none;

            min-height: auto;

            padding-bottom: 0;

        }



        .header-inner {

            padding: 12px 20px;

        }



        .logo {

            order: 1;

        }



        .logo img {

            height: 42px;

        }



        .contact {

            order: 2;

            gap: 10px;

        }



        .menu-toggle {

            display: flex;

            order: 3;

        }



        .nav {

            order: 4;

            position: absolute;

            top: 100%;

            left: 0;

            width: 100%;

        }



        .nav ul {

            display: none;

            flex-direction: column;

            align-items: center;

            width: 100%;

            padding: 0;

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

            backdrop-filter: blur(10px);

            z-index: 99;

            gap: 0;

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

        }



        .header::before {

            background: linear-gradient(330deg, rgba(7, 28, 31, 0) 0%, #071C1F 90%);

        }



        .nav ul.active {

            display: flex;

        }



        .nav li {

            width: 100%;

            text-align: center;

            padding: 0;

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

        }



        .nav li:last-child {

            border-bottom: none;

        }



        .nav li a {

            font-size: 17px;

            display: block;

            width: 100%;

            padding: 18px 20px;

            transition: all 0.3s ease;

        }



        .nav li a:hover {

            background: rgba(15, 132, 183, 0.2);

            color: #008FD0;

        }



        .call-us {

            padding: 10px 18px;

            font-size: 14px;

            gap: 8px;

            border-radius: 30px;

        }



        .call-us img {

            height: 18px;

        }



        .contact .whatsapp-img {

            height: 42px;

            width: 42px;

        }
    }

    /* Tablet Portrait (768px and below) */

    @media (max-width: 768px) {

        .header {

            max-height: none;

            min-height: auto;

            padding-bottom: 0;

        }



        .header-inner {

            padding: 12px 20px;

        }



        .logo {

            order: 1;

        }



        .logo img {

            height: 42px;

        }



        .contact {

            order: 2;

            gap: 10px;

        }



        .menu-toggle {

            display: flex;

            order: 3;

        }



        .nav {

            order: 4;

            position: absolute;

            top: 100%;

            left: 0;

            width: 100%;

        }



        .nav ul {

            display: none;

            flex-direction: column;

            align-items: center;

            width: 100%;

            padding: 0;

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

            backdrop-filter: blur(10px);

            z-index: 99;

            gap: 0;

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

        }



        .header::before {

            background: linear-gradient(330deg, rgba(7, 28, 31, 0) 0%, #071C1F 90%);

        }



        .nav ul.active {

            display: flex;

        }



        .nav li {

            width: 100%;

            text-align: center;

            padding: 0;

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

        }



        .nav li:last-child {

            border-bottom: none;

        }



        .nav li a {

            font-size: 17px;

            display: block;

            width: 100%;

            padding: 18px 20px;

            transition: all 0.3s ease;

        }



        .nav li a:hover {

            background: rgba(15, 132, 183, 0.2);

            color: #008FD0;

        }



        .call-us {

            padding: 10px 18px;

            font-size: 14px;

            gap: 8px;

            border-radius: 30px;

        }



        .call-us img {

            height: 18px;

        }



        .contact .whatsapp-img {

            height: 42px;

            width: 42px;

        }



        .header-content-wrapper {

            flex-direction: column;

            padding: 40px 20px 0;

            gap: 40px;

        }



        .content {

            max-width: 100%;

            text-align: center;

            padding: 0;

        }



        .content h1 {

            font-size: 50px;

            line-height: 52px;

        }



        .content p {

            font-size: 18px;

            line-height: 26px;

        }



        .form {

            width: calc(100% - 20px);

            max-width: 450px;

            margin: 0 auto;

            padding: 30px 20px;

            transform: translateY(0);

            margin-bottom: 20px;

        }



        .about {

            flex-direction: column;

            text-align: center;

            padding: 50px 20px;

            gap: 40px;

        }



        .about-image {

            order: 1;

        }



        .about-content {

            order: 2;

        }



        .about-content h2 {

            font-size: 28px;

        }



        .about-content p {

            font-size: 14px;

        }



        .about-image img {

            max-width: 350px;

        }



        .projects {

            flex-direction: column;

            text-align: center;

            padding: 50px 20px;

            gap: 30px;

        }



        .projects-image {

            order: 1;

            width: auto;

        }



        .projects-image img {

            max-width: 320px;

        }



        .projects-content {

            order: 2;

            max-width: 100%;

        }



        .projects-content h2 {

            font-size: 28px;

        }



        .projects-content ul {

            text-align: left;

        }



        .projects-content li {

            font-size: 14px;

        }



        .projects-content li img {

            width: 16px;

            height: 16px;

        }



        .amenities {

            padding: 50px 20px;

        }



        .amenities h2 {

            font-size: 30px;

        }



        .amenities p {

            font-size: 14px;

            margin-bottom: 40px;

        }



        .amenities-list {

            grid-template-columns: 1fr;

            gap: 10px;

        }



        .amenities-list li {

            font-size: 15px;

        }



        .amenities-list img {

            width: 16px;

            height: 16px;

        }



        .visit-btn {

            margin-top: 40px;

            padding: 14px 30px;

            font-size: 15px;

        }



        .infrastructure {

            flex-direction: column;

            padding: 50px 20px;

            gap: 30px;

            text-align: center;

        }



        .infrastructure-image {

            order: 1;

            justify-content: center;

        }



        .infrastructure-image img {

            max-width: 320px;

        }



        .infrastructure-content {

            order: 2;

        }



        .infrastructure-content h2 {

            font-size: 28px;

        }



        .infrastructure-content ul {

            align-items: center;

        }



        .infrastructure-content li {

            font-size: 15px;

            justify-content: flex-start;

            max-width: 400px;

        }



        .infrastructure-content li img {

            width: 16px;

            height: 16px;

        }



        .payment-plan {

            padding: 50px 20px;

        }



        .payment-plan h2 {

            font-size: 28px;

            padding: 0 10px;

        }



        .payment-grid {

            grid-template-columns: 1fr;

            padding: 0 10px;

        }



        .card {

            padding: 16px 20px;

        }



        .card h3 {

            font-size: 24px;

        }



        .card span {

            font-size: 16px;

        }

    }

    @media(max-width: 960px) {
        .footer {

            display: flex;

            flex-direction: column;

        }



        .footer-cta {

            order: 2;

            padding: 40px 20px;

            display: flex;

            flex-direction: column;

            align-items: center;

            text-align: center;

        }



        .cta-text h2 {

            font-size: 40px;

            line-height: 42px;

        }



        .cta-text p {

            font-size: 14px;

        }



        .footer-form {

            position: static;

            order: 1;

            width: calc(100% - 40px);

            max-width: 450px;

            margin: 40px auto;

            padding: 35px 25px;

        }



        .footer-bottom {

            order: 3;

            padding: 80px 20px 36px;

            text-align: center;

        }



        .footer-logo {

            display: flex;

            flex-direction: column;

            align-items: center;

        }



        .footer-logo-image {

            max-width: 300px;

        }



        .footer-logo p {

            font-size: 14px;

        }



        .footer-location {

            justify-content: center;

        }



        .copyright {

            margin-top: 60px;

        }
    }



    /* Mobile Landscape (480px and below) */

    @media (max-width: 480px) {

        .header-inner {

            padding: 10px 16px;

        }



        .logo img {

            height: 36px;

        }



        .contact {

            gap: 8px;

        }



        .call-us {

            padding: 8px 14px;

            font-size: 13px;

            gap: 5px;

        }



        .call-us span {

            display: inline;

        }



        .call-us img {

            height: 16px;

        }



        .contact .whatsapp-img {

            height: 38px;

            width: 38px;

        }



        .menu-toggle {

            width: 26px;

            height: 20px;

        }



        .menu-toggle span {

            height: 2.5px;

        }



        .menu-toggle.active span:nth-child(1) {

            transform: translateY(8.75px) rotate(45deg);

        }



        .menu-toggle.active span:nth-child(3) {

            transform: translateY(-8.75px) rotate(-45deg);

        }



        .nav li a {

            font-size: 16px;

            padding: 16px 20px;

        }



        .header {

            padding-bottom: 0;

        }



        .header-content-wrapper {

            padding: 30px 16px 0;

            gap: 30px;

        }



        .content {

            padding: 0 4px;

        }



        .content h1 {

            font-size: 38px;

            line-height: 40px;

        }



        .content p {

            font-size: 15px;

            line-height: 23px;

        }



        .form {

            width: 100%;

            padding: 25px 16px;

            transform: translateY(0);

        }



        .form form,

        .footer-form form {

            gap: 14px;

        }



        .form h3,

        .footer-form h3 {

            font-size: 18px;

            margin-bottom: 20px;

        }



        .form button,

        .footer-form button {

            width: 100%;

            height: 48px;

            font-size: 15px;

            margin-top: 6px;

        }



        .input-field input,

        .input-field textarea {

            padding: 12px 35px 12px 12px;

            font-size: 13px;

        }

        .otp-input-group input.otp-box {
            padding: 10px 5px;
        }


        .about,

        .projects,

        .amenities,

        .infrastructure,

        .payment-plan {

            padding: 40px 16px;

        }



        .about-content h2,

        .projects-content h2,

        .infrastructure-content h2,

        .payment-plan h2 {

            font-size: 24px;

            margin-bottom: 12px;

        }



        .payment-plan h2 {

            padding: 0 4px;

        }



        .payment-grid {

            padding: 0 4px;

        }



        .about-content p,

        .amenities p {

            font-size: 13px;

            line-height: 20px;

        }



        .about-image img,

        .projects-image img,

        .infrastructure-image img {

            max-width: 280px;

        }



        .projects-content li,

        .infrastructure-content li {

            font-size: 13px;

        }



        .projects-content li img,

        .infrastructure-content li img {

            width: 14px;

            height: 14px;

        }



        .amenities h2 {

            font-size: 26px;

        }



        .amenities-list li {

            font-size: 14px;

        }



        .amenities-list img {

            width: 14px;

            height: 14px;

        }



        .visit-btn {

            margin-top: 30px;

            padding: 12px 24px;

            font-size: 14px;

        }



        .card {

            padding: 14px 16px;

        }



        .card h3 {

            font-size: 22px;

            margin-bottom: 6px;

        }



        .card span {

            font-size: 14px;

        }



        .footer-cta {

            padding: 30px 16px;

        }



        .cta-text h2 {

            font-size: 32px;

            line-height: 34px;

        }



        .cta-text p {

            font-size: 13px;

        }



        .footer-form {

            width: 100%;

            padding: 25px 16px;

            margin: 30px auto;

        }



        .footer-bottom {

            padding: 60px 16px 30px;

        }



        .footer-logo-image {

            max-width: 250px;

        }



        .footer-logo p {

            font-size: 13px;

            line-height: 22px;

        }



        .footer-location {

            font-size: 13px;

        }



        .copyright {

            margin-top: 40px;

            font-size: 14px;

        }
    }

    @media (max-width: 769px) {
        .modal-grid {
            grid-template-columns: 1fr;
        }

        .modal-image {
            display: none;
        }

        .custom-modal-content {
            width: 88%;
            height: auto;
            /* max-height: 90vh; */
            border-radius: 10px;
        }
    }

    /* OTP Input Styling */
    .otp-input-group input.otp-box {
        width: 100%;
        padding: 10px;
        border: 1px solid var(--border-color);
        font-size: 14px;
        outline: none;
        transition: border-color 0.3s ease;
        text-align: center;
        height: auto;
        max-width: none;
        flex: 1;
        border-radius: 4px;
        margin: 0;
        line-height: normal;
    }

    .otp-input-group input.otp-box.filled,
    .otp-input-group input.otp-box:focus {
        border-color: var(--primary-color) !important;
        box-shadow: none !important;
        transform: none !important;
    }