/*==================================================
VG PROPERTIES
responsive.css
PART 1
1600px
1440px
1366px
1280px
====================================================*/


/*==================================================
≤ 1600px
Large Desktop
====================================================*/

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

:root{

    --container:1240px;

}
/* ===== Mobile Sticky Call / Enquiry Bar ===== */

.mobile-action-bar {
    display: none;
}

@media (max-width: 768px) {

    .mobile-action-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9998;
        border-radius: 22px 22px 0 0;
        overflow: hidden;
        box-shadow: 0 -6px 24px rgba(0,0,0,0.2);
    }

    .mobile-action-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 18px 10px;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        font-family: 'Poppins', sans-serif;
        border: none;
    }

    .mobile-action-btn.call {
        background: #6b1e3c;
        color: #fff;
    }

    .mobile-action-btn.enquiry {
        background: linear-gradient(135deg, #d4af37, #f0c96b);
        color: #2a2a2a;
    }

    .mobile-action-btn i {
        font-size: 18px;
    }

    /* Circular chat avatar overlapping the top-left corner */

    .mobile-chat-bubble {
        position: absolute;
        top: -26px;
        left: 14px;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        overflow: hidden;
        border: 3px solid #fff;
        box-shadow: 0 4px 14px rgba(0,0,0,0.3);
        background: #fff;
        z-index: 9999;
    }

    .mobile-chat-bubble img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Prevent page content from hiding behind the fixed bar */
    body {
        padding-bottom: 65px;
    }

    /* Hide the old floating Call + WhatsApp buttons on mobile
       so they don't stack on top of the new bar */
    .floating-btn.whatsapp,
    a[href^="tel:+919894517779"] {
        display: none;
    }

}
@media (max-width: 768px) {
    .floating-btn.whatsapp,
    .floating-btn.call {
        display: none;
    }
}
.hero-content{

    max-width:650px;

}

.hero-content h1{

    font-size:clamp(3.5rem,5vw,5rem);

}

.section{

    padding:100px 0;

}

.projects-grid{

    gap:28px;

}

.why-grid{

    gap:28px;

}

.counter-grid{

    gap:24px;

}

.footer-grid{

    gap:35px;

}

}


/*==================================================
≤ 1440px
Desktop
====================================================*/

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

:root{

    --container:1180px;

}

.navbar{

    padding:18px 0;

}

.logo img{

    width:160px;

}

.nav-menu{

    gap:30px;

}

.hero{

    min-height:720px;

}

.hero-content{

    max-width:620px;

}

.hero-content h1{

    font-size:clamp(3.2rem,4.8vw,4.8rem);

}

.hero-content p{

    max-width:560px;

}

.enquiry-card{

    padding:35px;

}

.form-grid{

    gap:18px;

}

.about-wrapper{

    gap:70px;

}

.investment-wrapper{

    gap:70px;

}

.section-header{

    margin-bottom:55px;

}

.project-image{

    height:260px;

}

.project-content{

    padding:28px;

}

.contact-wrapper{

    gap:40px;

}

.contact-map iframe{

    min-height:480px;

}

}


/*==================================================
≤ 1366px
Desktop / Laptop
====================================================*/

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

:root{

    --container:1140px;

}

.section{

    padding:90px 0;

}

.hero-content{

    max-width:600px;

}

.hero-content h1{

    font-size:clamp(3rem,4.5vw,4.5rem);

}

.hero-buttons{

    gap:15px;

}

.btn{

    padding:14px 30px;

}

.about-wrapper{

    gap:60px;

}

.about-highlights{

    gap:18px;

}

.highlight-card{

    padding:22px 18px;

}

.why-grid{

    gap:24px;

}

.why-card{

    padding:35px 26px;

}

.projects-grid{

    gap:24px;

}

.project-image{

    height:245px;

}

.project-content{

    padding:25px;

}

.benefits-list{

    gap:18px;

}

.benefit-item{

    padding:18px;

}

.counter-section{

    padding:80px 0;

}

.testimonial-card{

    padding:35px 25px;

}

.contact-form{

    padding:35px;

}

.footer{

    padding:70px 0 25px;

}

}


/*==================================================
≤ 1280px
Laptop
====================================================*/

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

:root{

    --container:1100px;

}

.logo img{

    width:150px;

}

.nav-menu{

    gap:25px;

}

.nav-right .btn{

    padding:12px 24px;

}

.hero{

    min-height:700px;

}

.hero-content{

    max-width:560px;

}

.hero-content h1{

    font-size:clamp(2.8rem,4.2vw,4.2rem);

}

.hero-content p{

    font-size:1rem;

}

.hero-buttons .btn{

    min-width:160px;

}

.enquiry-card{

    padding:30px;

}

.form-grid{

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

}

.form-group.message{

    grid-column:span 4;

}

.submit-btn{

    grid-column:span 4;

}

.about-wrapper{

    gap:55px;

}

.investment-wrapper{

    gap:55px;

}

.about-highlights{

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

}

.why-grid{

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

    gap:22px;

}

.project-image{

    height:230px;

}

.project-content{

    padding:22px;

}

.counter-grid{

    gap:20px;

}

.counter-box h2{

    font-size:3rem;

}

.contact-wrapper{

    gap:35px;

}

.footer-grid{

    gap:30px;

}

.floating-btn{

    width:54px;

    height:54px;

}

}

/*==================================================
END OF PART 1

NEXT:
1024px
992px
====================================================*/

/*==================================================
responsive.css
PART 2
1024px
992px
====================================================*/


/*==================================================
≤ 1024px
Laptop
====================================================*/

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

:root{

    --container:960px;

}

/*----------------------------
Section
-----------------------------*/

.section{

    padding:80px 0;

}

.section-header{

    margin-bottom:50px;

}

/*----------------------------
Navbar
-----------------------------*/

.logo img{

    width:145px;

}

.nav-menu{

    gap:20px;

}

.nav-menu>li>a{

    font-size:.92rem;

}

.nav-right .btn{

    padding:11px 22px;

    font-size:.90rem;

}

/*----------------------------
Hero
-----------------------------*/

.hero{

    min-height:680px;

}

.hero-content{

    max-width:520px;

}

.hero-content h1{

    font-size:clamp(2.7rem,5vw,4rem);

}

.hero-content p{

    max-width:520px;

    font-size:.98rem;

}

.hero-buttons{

    gap:14px;

}

.hero-buttons .btn{

    min-width:155px;

}

/*----------------------------
Floating Form
-----------------------------*/

.floating-form{

    margin-top:-60px;

}

.enquiry-card{

    padding:28px;

}

.form-grid{

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

}

.form-group.message{

    grid-column:span 2;

}

.submit-btn{

    grid-column:span 2;

}

/*----------------------------
About
-----------------------------*/

.about-wrapper{

    gap:45px;

}

.about-highlights{

    gap:16px;

}

.highlight-card{

    padding:20px 16px;

}

/*----------------------------
Why Choose
-----------------------------*/

.why-grid{

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

    gap:22px;

}

.why-card{

    padding:32px 24px;

}

/*----------------------------
Projects
-----------------------------*/

.projects-grid{

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

    gap:22px;

}

.project-image{

    height:220px;

}

/*----------------------------
Investment
-----------------------------*/

.investment-wrapper{

    gap:45px;

}

.benefit-item{

    padding:18px;

}

/*----------------------------
Counter
-----------------------------*/

.counter-grid{

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

    gap:24px;

}

/*----------------------------
Testimonials
-----------------------------*/

.testimonial-card{

    padding:32px 24px;

}

/*----------------------------
Contact
-----------------------------*/

.contact-wrapper{

    gap:30px;

}

.contact-form{

    padding:32px;

}

.contact-map iframe{

    min-height:420px;

}

/*----------------------------
Footer
-----------------------------*/

.footer-grid{

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

    gap:35px;

}

}


/*==================================================
≤ 992px
Tablet Landscape
====================================================*/

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

:root{

    --container:92%;

}

/*----------------------------
Header
-----------------------------*/

.header{

    background:rgba(8,17,31,.90);

    backdrop-filter:blur(16px);

}

/*----------------------------
Navbar
-----------------------------*/

.navbar{

    padding:16px 0;

}

.logo img{

    width:140px;

}

.hamburger{

    display:flex;

}

.nav-right .btn{

    display:none;

}

/*----------------------------
Hero
-----------------------------*/

.hero{

    min-height:650px;

}

.hero .container{

    justify-content:center;

}

.hero-content{

    max-width:700px;

    text-align:center;

}

.hero-content p{

    margin-inline:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero .swiper-button-next,
.hero .swiper-button-prev{

    display:none;

}

/*----------------------------
Floating Form
-----------------------------*/

.floating-form{

    margin-top:-50px;

}

.enquiry-card{

    padding:26px;

}

/*----------------------------
About
-----------------------------*/

.about-wrapper{

    grid-template-columns:1fr;

    gap:55px;

}

.about-content{

    text-align:center;

}

.about-content .section-title{

    margin-inline:auto;

}

.about-highlights{

    max-width:700px;

    margin:40px auto;

}

/*----------------------------
Why Choose
-----------------------------*/

.why-grid{

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

}

/*----------------------------
Projects
-----------------------------*/

.projects-grid{

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

}

/*----------------------------
Investment
-----------------------------*/

.investment-wrapper{

    grid-template-columns:1fr;

    gap:55px;

}

.investment-content{

    text-align:center;

}

.benefits-list{

    max-width:720px;

    margin:35px auto;

}

.benefit-item{

    text-align:left;

}

/*----------------------------
Counter
-----------------------------*/

.counter-grid{

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

}

/*----------------------------
Contact
-----------------------------*/

.contact-wrapper{

    grid-template-columns:1fr;

}

.contact-map iframe{

    min-height:380px;

}

/*----------------------------
Footer
-----------------------------*/

.footer-grid{

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

}

/*----------------------------
Floating Buttons
-----------------------------*/

.floating-btn{

    width:52px;

    height:52px;

    right:20px;

}

.call{

    bottom:175px;

}

.whatsapp{

    bottom:110px;

}

.top{

    bottom:45px;

}
/* ===== Floating Buttons (stacked, right side) ===== */

.floating-btn {
    position: fixed;
    right: 20px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 9999;
    border: none;
    cursor: pointer;
}

.floating-btn.call {
    bottom: 160px;
    background: #28a745;
    color: #fff;
}

.floating-btn.whatsapp {
    bottom: 90px;
    background: #25D366;
    color: #fff;
}

.floating-btn.top {
    bottom: 20px;
    background: #1a1a1a;
    color: #fff;
}
}

/*==================================================
END OF PART 2

NEXT:
768px
====================================================*/

/*==================================================
responsive.css
PART 3
768px
Tablet Portrait
====================================================*/

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

:root{

    --container:min(100% - 30px,720px);

}

/*=========================================
GLOBAL
=========================================*/

html{

    font-size:15px;

}

.section{

    padding:70px 0;

}

.section-header{

    margin-bottom:45px;

}

.section-title{

    max-width:100%;

}

.section-description{

    max-width:100%;

}


/*=========================================
NAVBAR
=========================================*/

.navbar{

    padding:15px 0;

}

.logo img{

    width:135px;

}

.nav-menu{

    width:100%;

    max-width:340px;

    padding:100px 30px 40px;

}

.nav-menu li{

    width:100%;

}

.nav-menu li a{

    width:100%;

    font-size:1rem;

}

.dropdown-menu{

    margin-top:10px;

}


/*=========================================
HERO
=========================================*/

.hero{

    min-height:100vh;

}

.hero .container{

    justify-content:center;

    text-align:center;

}

.hero-content{

    max-width:100%;

}

.hero-subtitle{

    margin-bottom:18px;

}

.hero-content h1{

    font-size:clamp(2.5rem,8vw,3.8rem);

    margin-bottom:20px;

}

.hero-content p{

    max-width:600px;

    margin:0 auto 35px;

    font-size:1rem;

}

.hero-buttons{

    justify-content:center;

    gap:15px;

}

.hero-buttons .btn{

    min-width:180px;

}

.hero .swiper-pagination{

    bottom:25px !important;

}


/*=========================================
FLOATING FORM
=========================================*/

.floating-form{

    margin-top:-40px;

}

.enquiry-card{

    padding:24px;

    border-radius:20px;

}

.form-grid{

    grid-template-columns:1fr;

    gap:18px;

}

.form-group,

.form-group.message,

.submit-btn{

    grid-column:auto;

}

.form-group input,
.form-group select,
.form-group textarea{

    height:56px;

}

.form-group textarea{

    min-height:110px;

    padding-top:16px;

}

.submit-btn{

    width:100%;

}


/*=========================================
ABOUT
=========================================*/

.about-wrapper{

    grid-template-columns:1fr;

    gap:50px;

}

.about-content{

    text-align:center;

}

.about-content .section-title{

    margin-inline:auto;

}

.about-highlights{

    grid-template-columns:1fr;

    gap:18px;

    margin:35px 0;

}

.highlight-card{

    padding:24px;

}


/*=========================================
WHY CHOOSE
=========================================*/

.why-grid{

    grid-template-columns:1fr;

    gap:22px;

}

.why-card{

    padding:30px 24px;

}

.why-icon{

    width:72px;

    height:72px;

    font-size:30px;

}


/*=========================================
PROJECTS
=========================================*/

.projects-grid{

    grid-template-columns:1fr;

    gap:25px;

}

.project-image{

    height:240px;

}

.project-content{

    padding:24px;

}


/*=========================================
INVESTMENT
=========================================*/

.investment-wrapper{

    grid-template-columns:1fr;

    gap:45px;

}

.investment-content{

    text-align:center;

}

.benefits-list{

    gap:18px;

}

.benefit-item{

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:22px;

}

.benefit-item i{

    margin-bottom:10px;

}


/*=========================================
COUNTER
=========================================*/

.counter-section{

    padding:70px 0;

}

.counter-grid{

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

    gap:25px;

}

.counter-box h2{

    font-size:2.8rem;

}


/*=========================================
TESTIMONIALS
=========================================*/

.testimonial-card{

    padding:30px 22px;

}

.testimonial-image{

    width:80px;

    height:80px;

}


/*=========================================
CONTACT
=========================================*/

.contact-wrapper{

    grid-template-columns:1fr;

    gap:30px;

}

.contact-form{

    padding:28px;

}

.contact-map iframe{

    min-height:340px;

}


/*=========================================
FOOTER
=========================================*/

.footer{

    padding:65px 0 25px;

}

.footer-grid{

    grid-template-columns:1fr;

    gap:35px;

    text-align:center;

}

.footer-logo{

    margin-inline:auto;

}

.footer-social{

    justify-content:center;

}

.footer-contact li{

    justify-content:center;

}


/*=========================================
FLOATING BUTTONS
=========================================*/

.floating-btn{

    width:50px;

    height:50px;

    font-size:20px;

    right:16px;

}

.call{

    bottom:160px;

}

.whatsapp{

    bottom:95px;

}

.top{

    bottom:30px;

}

}

/*==================================================
END OF PART 3

NEXT:
576px
480px
====================================================*/

/*==================================================
responsive.css
PART 4
576px
480px
====================================================*/


/*==================================================
≤ 576px
Large Mobile
====================================================*/

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

:root{

    --container:min(100% - 24px,540px);

}

/*=========================================
GLOBAL
=========================================*/

html{

    font-size:14px;

}

.section{

    padding:60px 0;

}

.section-header{

    margin-bottom:40px;

}

.section-subtitle{

    font-size:.75rem;

    letter-spacing:1.2px;

}

.section-title{

    font-size:clamp(2rem,8vw,2.6rem);

}

.section-description{

    font-size:.95rem;

}

/*=========================================
NAVBAR
=========================================*/

.navbar{

    padding:14px 0;

}

.logo img{

    width:125px;

}

.hamburger{

    width:44px;

    height:44px;

}

.nav-menu{

    max-width:100%;

    padding:90px 24px 30px;

}

/*=========================================
HERO
=========================================*/

.hero{

    min-height:100vh;

}

.hero-subtitle{

    padding:8px 16px;

    font-size:.72rem;

}

.hero-content h1{

    line-height:1.15;

    margin-bottom:18px;

}

.hero-content p{

    font-size:.95rem;

    margin-bottom:30px;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

}

.hero-buttons .btn{

    width:100%;

    min-width:100%;

}

/*=========================================
FLOATING FORM
=========================================*/

.floating-form{

    margin-top:-35px;

}

.enquiry-card{

    padding:20px;

    border-radius:18px;

}

.form-group input,
.form-group select,
.form-group textarea{

    height:54px;

    font-size:.92rem;

}

.form-group textarea{

    min-height:100px;

}

.submit-btn{

    height:54px;

}

/*=========================================
ABOUT
=========================================*/

.about-wrapper{

    gap:40px;

}

.about-highlights{

    gap:16px;

}

.highlight-card{

    padding:22px 18px;

}

.highlight-card h3{

    font-size:1.8rem;

}

/*=========================================
WHY
=========================================*/

.why-card{

    padding:28px 20px;

}

.why-icon{

    width:68px;

    height:68px;

    font-size:28px;

}

/*=========================================
PROJECTS
=========================================*/

.project-image{

    height:220px;

}

.project-content{

    padding:20px;

}

.project-location{

    font-size:.85rem;

}

/*=========================================
INVESTMENT
=========================================*/

.investment-wrapper{

    gap:40px;

}

.benefit-item{

    padding:18px;

}

.benefit-item i{

    width:46px;

    height:46px;

    font-size:20px;

}

/*=========================================
COUNTER
=========================================*/

.counter-grid{

    grid-template-columns:1fr;

    gap:30px;

}

.counter-box h2{

    font-size:2.6rem;

}

/*=========================================
TESTIMONIALS
=========================================*/

.testimonial-card{

    padding:26px 18px;

}

.testimonial-image{

    width:75px;

    height:75px;

}

/*=========================================
CONTACT
=========================================*/

.contact-form{

    padding:22px;

}

.contact-map iframe{

    min-height:300px;

}

/*=========================================
FOOTER
=========================================*/

.footer{

    padding:55px 0 20px;

}

.footer-grid{

    gap:28px;

}

.footer-logo{

    width:150px;

}

.footer-widget h4{

    margin-bottom:16px;

}

/*=========================================
FLOATING BUTTONS
=========================================*/

.floating-btn{

    width:48px;

    height:48px;

    font-size:18px;

    right:14px;

}

.top{

    bottom:18px;

}

.whatsapp{

    bottom:78px;

}

.call{

    bottom:138px;

}

}


/*==================================================
≤ 480px
Standard Mobile
====================================================*/

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

:root{

    --container:min(100% - 20px,460px);

}

html{

    font-size:13.5px;

}

/*----------------------------
Navbar
-----------------------------*/

.logo img{

    width:118px;

}

.nav-menu{

    padding:85px 20px 25px;

}

/*----------------------------
Hero
-----------------------------*/

.hero-content h1{

    font-size:clamp(2rem,9vw,2.8rem);

}

.hero-content p{

    font-size:.92rem;

}

.hero-buttons{

    gap:12px;

}

/*----------------------------
Floating Form
-----------------------------*/

.enquiry-card{

    padding:18px;

}

.form-grid{

    gap:16px;

}

/*----------------------------
About
-----------------------------*/

.highlight-card{

    padding:20px 16px;

}

/*----------------------------
Why
-----------------------------*/

.why-card{

    padding:26px 18px;

}

/*----------------------------
Projects
-----------------------------*/

.project-image{

    height:200px;

}

.project-content{

    padding:18px;

}

.status{

    top:14px;

    left:14px;

    padding:6px 12px;

    font-size:.68rem;

}

/*----------------------------
Investment
-----------------------------*/

.benefit-item{

    padding:16px;

}

/*----------------------------
Counter
-----------------------------*/

.counter-section{

    padding:60px 0;

}

/*----------------------------
Testimonials
-----------------------------*/

.testimonial-card{

    padding:24px 16px;

}

/*----------------------------
Contact
-----------------------------*/

.contact-form{

    padding:20px;

}

.contact-map iframe{

    min-height:260px;

}

/*----------------------------
Footer
-----------------------------*/

.footer{

    padding:50px 0 18px;

}

.footer-logo{

    width:140px;

}

.footer-widget p,

.footer-widget li,

.footer-bottom p{

    font-size:.9rem;

}

}

/*==================================================
END OF PART 4

NEXT:
414px
390px
375px
360px
320px
====================================================*/