/*---logo responsive css----*/
    .developer-logo {
  max-height: 50px; /* ya jitna chhota karna ho */
  width: auto;
}

@media (max-width: 576px) {
  .developer-logo {
    max-height: 35px; /* Mobile screen par logo aur chhota ho jayega */
  }
}
/*---logo responsive css----*/

/* 1. Base Styling (Ensure transition is present for smooth motion) */
.btn-mirror {
    /* ... (Rest of your existing styles like padding, font, border-radius) ... */
    position: relative;
    overflow: hidden;
    z-index: 1;
    
    /* Smooth Transition added here - VERY IMPORTANT for motion */
    transition: all 0.4s ease-in-out; 

    /* Default background color */
    background-color: #fa9807;/* Blue Gradient Example */
    color: #ffffff; /* White text */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
}

/* 2. Hover Effect (Color Change and Motion) */
.btn-mirror:hover {
    /* === COLOR CHANGE === */
    /* Background Gradient Change: This gives the 'color change' look */
    background: linear-gradient(90deg, #4DCCBD, #4DCCBD); /* Example: Orange Gradient */
    
    /* === MOTION EFFECT === */
    /* 1. Lift Up: translateY(-5px) lifts the button 5 pixels up */
    /* 2. Scale: scale(1.05) makes the button 5% bigger */
    transform: translateY(-5px) scale(1.05);
    
    /* 3. Shadow Change: Gives depth perception */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); 
}







.btn-custom {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Gradient backgrounds */
.btn-mirror {
    background: linear-gradient(135deg, #FF8484, #FF8484);
}

.btn-enquire {
    background: linear-gradient(135deg, #795548, #795548);
}

/* Hover animations */
.btn-custom::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: skewX(-45deg);
    transition: left 0.6s;
}

.btn-custom:hover::before {
    left: 150%;
}

/* Subtle scale & shadow on hover */
.btn-custom:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.btn-custom:active {
    transform: translateY(-1px) scale(1.01);
}

/* Button container with 15% gap */
.d-flex.justify-content-between {
    gap: 15%;
}

.d-flex.justify-content-between .btn {
    flex: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 15px;
    }
}




/*-----start footer-----*/
.sticky-footer {
            display: none;
            position: fixed;
            z-index: 2000;
            bottom: 0;
            width: 100%;
            background: #EFEFEF;
            color: white;
            padding-block: 4px;
            text-align: center;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 0, 0, 0.42);
            background: linear-gradient(697deg, rgba(0, 91, 83, 0.98), rgba(0, 30, 18, 0.3), rgba(0, 91, 83, 0.9));
        }

        .sticky-footer a,
        .sticky-footer button {
            color: white;
            text-decoration: none;
            font-size: 12px;
            padding: 6px 10px;
            border: none;
            /* background: #FFA500; */
            border-radius: 5px;
            cursor: pointer;
            margin: 0;
        }

        .button-call {
            background: linear-gradient(98deg, #000000c9, #1094bd);
            border-color: #004d46;
        }

        .button-enquiry {
            background: linear-gradient(98deg, #000000c9, #1094bd);
            border-color: #00695c;
        }

        .button-whatsapp {
            background: #25d366;
            border-color: #007d57;
        }

        .sticky-footer i {
            margin-right: 1px;
            font-size: 17px;
        }

        .sticky-footer i::before {
            margin-top: 0 !important;
        }

        .whatapp.whatapp {
            background: #25d366;
        }

        @media (width < 1160px) {
            .sticky-footer {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                padding-inline: 3px;
                gap: 3px;
            }

            .footer-section {
                padding-bottom: 1.5rem;
            }

            .slide-in-form {
                padding-bottom: 5rem;
            }
        }

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


/*---starting about 5 box css-----*/
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
            color: #333;
            min-height: 100vh;
            justify-content: center;
            align-items: center;

        }

        .container {
            max-width: 1400px;
            width: 100%;
        }

        .section-title {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }

        .section-title h1 {
            font-size: 2rem;
            font-weight: 800;
            color: #2374ab;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .section-title p {
            font-size: 1.3rem;
            margin-top: 15px;
            color: #666;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
        }

        .features-container {
            display: flex;
            gap: 25px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .feature-box {
            border-radius: 20px;
            padding: 15px 10px;
            width: calc(20% - 25px);
            min-width: 230px;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            color: white;
            
            /* 3D Box Shadow Effect - Static */
            box-shadow: 
                0 15px 30px rgba(0, 0, 0, 0.2),
                0 10px 20px rgba(0, 0, 0, 0.15),
                inset 0 -5px 15px rgba(0, 0, 0, 0.3);
            
            /* Static 3D tilt with transition for smooth hover */
            transform: rotateX(5deg) rotateY(5deg);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .feature-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        /* Hover effects - subtle movement */
        .feature-box:hover {
            transform: rotateX(2deg) rotateY(2deg) translateY(-8px);
            box-shadow: 
                0 20px 35px rgba(0, 0, 0, 0.25),
                0 15px 25px rgba(0, 0, 0, 0.2),
                inset 0 -5px 15px rgba(0, 0, 0, 0.3);
        }

        .feature-box:hover::before {
            transform: scaleX(1);
        }

        /* Individual box colors with 3D depth */
        .feature-box:nth-child(1) {
            background: linear-gradient(145deg, #ff8484, #ff8484, #ff8484db);
            transform: rotateX(5deg) rotateY(-8deg);
        }

        .feature-box:nth-child(1):hover {
            transform: rotateX(2deg) rotateY(-5deg) translateY(-8px);
        }

        .feature-box:nth-child(2) {
            background: linear-gradient(145deg, #2374ab, #2374abc9, #2374abb0);
            transform: rotateX(5deg) rotateY(-4deg);
        }

        .feature-box:nth-child(2):hover {
            transform: rotateX(2deg) rotateY(-1deg) translateY(-8px);
        }

        .feature-box:nth-child(3) {
            background: linear-gradient(145deg, #4dccbd, #4dccbd, #4dccbdad);
            transform: rotateX(5deg) rotateY(0deg);
        }

        .feature-box:nth-child(3):hover {
            transform: rotateX(2deg) rotateY(3deg) translateY(-8px);
        }

        .feature-box:nth-child(4) {
            background: linear-gradient(145deg, #ff8484, #ff8484, #ff8484db);
            transform: rotateX(5deg) rotateY(4deg);
        }

        .feature-box:nth-child(4):hover {
            transform: rotateX(2deg) rotateY(7deg) translateY(-8px);
        }

        .feature-box:nth-child(5) {
            background: linear-gradient(145deg, #2374ab, #2374abc9, #2374abb0);
            transform: rotateX(5deg) rotateY(8deg);
        }

        .feature-box:nth-child(5):hover {
            transform: rotateX(2deg) rotateY(11deg) translateY(-8px);
        }

        .feature-icon {
            width: 90px;
            height: 90px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 25px;
            font-size: 2.5rem;
            color: white;
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            
            /* 3D icon effect with transition */
            box-shadow: 
                0 8px 16px rgba(0, 0, 0, 0.3),
                inset 0 2px 4px rgba(255, 255, 255, 0.3);
            transform: rotate(5deg);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .feature-box:hover .feature-icon {
            transform: scale(1.05) rotate(8deg);
            box-shadow: 
                0 10px 20px rgba(0, 0, 0, 0.4),
                inset 0 3px 6px rgba(255, 255, 255, 0.4);
        }

        .feature-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 18px;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
        }

        .feature-box:hover .feature-title {
            transform: translateY(-2px);
        }

        .feature-description {
            font-size: 1rem;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }

        .feature-box:hover .feature-description {
            transform: translateY(-1px);
        }

        .feature-highlights {
            list-style-type: none;
            text-align: left;
            width: 100%;
            margin-top: 15px;
        }

        .feature-highlights li {
            padding: 10px 0;
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.9);
            position: relative;
            padding-left: 30px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }

        .feature-box:hover .feature-highlights li {
            transform: translateX(3px);
        }

        .feature-highlights li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: white;
            font-weight: bold;
            font-size: 1.1rem;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        .connectivity-section {
            margin-top: 80px;
            text-align: center;
            padding: 40px 30px;
            background: linear-gradient(145deg, #ffffff, #f0f0f0);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            
            /* 3D effect for connectivity section */
            box-shadow: 
                0 15px 30px rgba(0, 0, 0, 0.1),
                0 10px 20px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .connectivity-title {
            font-size: 2rem;
            margin-bottom: 30px;
            color: #2374ab;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .connectivity-content {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .connectivity-item {
            background: linear-gradient(145deg, #8B4513, #A0522D);
            padding: 15px 30px;
            border-radius: 50px;
            font-size: 1.1rem;
            border: none;
            color: white;
            font-weight: 600;
            transition: all 0.3s ease;
            
            /* 3D button effect */
            box-shadow: 
                0 6px 12px rgba(0, 0, 0, 0.2),
                0 3px 6px rgba(0, 0, 0, 0.15),
                inset 0 -3px 5px rgba(0, 0, 0, 0.3);
        }

        .connectivity-item:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow: 
                0 8px 16px rgba(139, 69, 19, 0.3),
                0 5px 10px rgba(0, 0, 0, 0.2),
                inset 0 -3px 5px rgba(0, 0, 0, 0.3);
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .feature-box {
                width: calc(33.333% - 25px);
                transform: rotateX(5deg) rotateY(0deg) !important;
            }
            
            .feature-box:hover {
                transform: rotateX(2deg) rotateY(0deg) translateY(-8px) !important;
            }
        }

        @media (max-width: 900px) {
            .feature-box {
                width: calc(50% - 25px);
                transform: rotateX(5deg) rotateY(0deg) !important;
            }
            
            .feature-box:hover {
                transform: rotateX(2deg) rotateY(0deg) translateY(-8px) !important;
            }
            
            .section-title h1 {
                font-size: 2.5rem;
            }
        }

        @media (max-width: 576px) {
            .feature-box {
                width: 100%;
                transform: rotateX(5deg) rotateY(0deg) !important;
            }
            
            .feature-box:hover {
                transform: rotateX(2deg) rotateY(0deg) translateY(-8px) !important;
            }
            
            .section-title h1 {
                font-size: 1.5rem;
            }
            
            .connectivity-item {
                width: 100%;
            }
        }

/*---starting about 5 box css-----*/


/*----project drop Shadow with Motion----*/

.col-lg-6 {
}

.project_box {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
    
    border-radius: 15px;
    background-color: #2374AB;
    transition: box-shadow 0.3s ease;
}

.project_box:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.30);
}     
/*----project drop Shadow with Motion----*/


/*----project Image Zoom in----*/
/* 1. Ensure the image container hides any overflow during zoom */
.project_img {
    overflow: hidden; 
}

/* 2. Apply transition to the image itself for a smooth zoom */
.project_img_1 {
    transition: transform 0.4s ease-in-out; 
    /* The transition property ensures the zoom effect is smooth over 0.4 seconds */
    
    /* Ensure the image fills the container */
    width: 100%;
    height: 100%;
    display: block;
}

/* 3. Define the zoom-in effect on hover */
.project_img:hover .project_img_1 {
    /* Increases the size of the image by 5% (1.05) when the mouse hovers over the parent div */
    transform: scale(1.05); 
}
/*----project Image Zoom in----*/


/*-----PROJECT ADVANTAGES-----*/  
  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background: #ffffff;
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .section-header {
            width: 100%;
            /*padding: 40px 20px;*/
            background-color: #ffffff;
            text-align: center;
        }

        .section-header h2 {
            display: inline-block;
            background-color: #ffffff;
            padding: 15px 30px;
            border-radius: 8px;
            margin: 0;
            font-size: 36px;
            font-weight: 700;
            color: #00a1bc;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .highlights-section {
            padding: 30px 20px;
            width: 100%;
            max-width: 1400px;
        }

        .highlights-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 25px;
            width: 100%;
        }

        .highlight-box {
            flex: 0 0 auto;
            width: 160px;
            perspective: 1000px;
        }

        .circle-box {
            background-color: #2374ab;
            padding: 25px 15px;
            border-radius: 16px;
            text-align: center;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            
            /* 3D Effect */
            box-shadow: 
                0 10px 20px rgba(0, 0, 0, 0.15),
                0 6px 6px rgba(0, 0, 0, 0.1),
                inset 0 -5px 10px rgba(0, 0, 0, 0.2);
            transform: rotateX(5deg) rotateY(5deg);
        }

        .circle-box.lightblue {
            background-color: #ff8484;
        }

        .circle-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, rgba(255,255,255,0.7), rgba(255,255,255,0.3));
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        /* Hover Effects */
        .highlight-box:hover .circle-box {
            transform: rotateX(0deg) rotateY(0deg) translateY(-10px);
            box-shadow: 
                0 20px 30px rgba(0, 0, 0, 0.2),
                0 15px 20px rgba(0, 0, 0, 0.15),
                inset 0 -5px 10px rgba(0, 0, 0, 0.2);
        }

        .highlight-box:hover .circle-box::before {
            transform: scaleX(1);
        }

        .highlight-box:hover .icon-img {
            transform: scale(1.1) rotate(5deg);
        }

        .icon-img {
            width: 60px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }

        .circle-box p {
            color: #fff;
            font-size: 13px;
            line-height: 1.4;
            margin: 0;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }

        /* Individual box 3D angles for visual interest */
        .highlight-box:nth-child(1) .circle-box {
            transform: rotateX(5deg) rotateY(-5deg);
        }
        
        .highlight-box:nth-child(2) .circle-box {
            transform: rotateX(5deg) rotateY(-3deg);
        }
        
        .highlight-box:nth-child(3) .circle-box {
            transform: rotateX(5deg) rotateY(-1deg);
        }
        
        .highlight-box:nth-child(4) .circle-box {
            transform: rotateX(5deg) rotateY(1deg);
        }
        
        .highlight-box:nth-child(5) .circle-box {
            transform: rotateX(5deg) rotateY(3deg);
        }
        
        .highlight-box:nth-child(6) .circle-box {
            transform: rotateX(5deg) rotateY(5deg);
        }
        
        .highlight-box:nth-child(7) .circle-box {
            transform: rotateX(5deg) rotateY(7deg);
        }

        /* Desktop - All boxes in one line, perfectly centered */
        @media (min-width: 1200px) {
            .highlights-container {
                flex-wrap: nowrap;
                gap: 20px;
                justify-content: center;
                margin: 0 auto;
            }
            
            .highlight-box {
                flex: 0 0 auto;
                width: 160px;
            }
        }

        /* Large Desktop - Slightly larger boxes */
        @media (min-width: 1400px) {
            .highlight-box {
                width: 170px;
            }
            
            .circle-box {
                padding: 25px 18px;
            }
            
            .circle-box p {
                font-size: 13.5px;
            }
        }

        /* Tablet - 3-4 boxes per row */
        @media (max-width: 1199px) and (min-width: 768px) {
            .highlights-container {
                gap: 20px;
            }
            
            .highlight-box {
                flex: 0 0 calc(25% - 20px);
                max-width: calc(25% - 20px);
                width: auto;
            }
            
            .circle-box {
                padding: 20px 15px;
            }
            
            .icon-img {
                width: 55px;
            }
        }

        /* Small Tablet - 2 boxes per row */
        @media (max-width: 767px) and (min-width: 576px) {
            .highlight-box {
                flex: 0 0 calc(50% - 20px);
                max-width: calc(50% - 20px);
                width: auto;
            }
            
            .circle-box {
                padding: 20px 15px;
                transform: rotateX(5deg) rotateY(0deg) !important;
            }
            
            .highlight-box:hover .circle-box {
                transform: rotateX(0deg) rotateY(0deg) translateY(-8px) !important;
            }
        }

        /* Mobile - Single box per row */
        @media (max-width: 575px) {
            .highlights-container {
                flex-direction: column;
                align-items: center;
                gap: 20px;
            }
            
            .highlight-box {
                flex: 1 1 100%;
                max-width: 280px;
                width: 100%;
            }
            
            .circle-box {
                padding: 25px 20px;
                transform: rotateX(5deg) rotateY(0deg) !important;
            }
            
            .highlight-box:hover .circle-box {
                transform: rotateX(0deg) rotateY(0deg) translateY(-8px) !important;
            }
            
            .icon-img {
                width: 65px;
            }
            
            .circle-box p {
                font-size: 14px;
                line-height: 1.5;
            }
            
            .section-header h2 {
                font-size: 28px;
                padding: 12px 25px;
            }
            
            .section-header {
                padding: 1px 1px;
            }
        }

        /* Small Mobile */
        @media (max-width: 480px) {
            .section-header h2 {
                font-size: 24px;
            }
            
            .highlight-box {
                max-width: 100%;
            }
            
            .circle-box {
                padding: 20px 15px;
            }
            
            .icon-img {
                width: 60px;
            }
            
            .circle-box p {
                font-size: 18px;
            }
        }
/*-----PROJECT ADVANTAGES-----*/   



/*----Project Page Layout Css----*/
 /* --- General CSS --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f0f2f5; 
            color: #333;
            line-height: 1.6;

        }
        
        .container {
            max-width: 1605px; 
            margin: 0 auto;

        }
        
        /* --- Header and Title CSS --- */
        header {
            text-align: center;
            padding: 40px 0;
            background: linear-gradient(135deg, #2374ab 0%, #2374ab 100%); 
            color: white;
            border-radius: 15px; 
            margin-bottom: 40px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); 
            /*position: relative;*/
            overflow: hidden;
            margin-top: 15px;
        }
        
        header::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 35%;
            height: 100%;
            /*background: linear-gradient(135deg, rgba(251, 153, 28, 0.9) 0%, rgba(255, 183, 77, 0.9) 100%);*/
            clip-path: polygon(100% 0, 30% 0, 100% 100%); 
        }
        
        h1 {
            font-size: 2rem;
            margin-bottom: 10px;
            font-weight: 700;
            letter-spacing: 1px;
        }
        
        .tagline {
            font-size: 1.3rem;
            font-weight: 400;
            max-width: 900px;
            margin: 0 auto;
        }
        
        .section-title {
            text-align: center;
            margin: 50px 0 40px;
            color: #2374ab; 
            font-size: 2.2rem;
            font-weight: 600; 
            position: relative;
        }
        
        .section-title:after {
            content: '';
            display: block;
            width: 100px; 
            height: 5px;
            background: linear-gradient(to right, #2374ab, #ff8484);
            margin: 10px auto;
            border-radius: 2px;
        }
        
        /* Project Highlights Grid (3 Columns) */
        .cards-container {
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
            gap: 30px;
        }
        
        /* --- Project Highlight Card CSS: Background Fix Applied --- */
        .card {
            background: white; /* Default background */
            border-radius: 15px; 
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 
            transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1); 
            transform-style: preserve-3d;
            position: relative;
            z-index: 1;
            border-left: 5px solid #ff8484;
        }
        
        .card:hover {
            /* 3D Rotate and Lift */
            transform: translateY(-15px) rotateY(8deg) scale(1.02); 
            box-shadow: 0 50px 100px rgba(0, 0, 0, 0.45); 
            /* 🔥 FIX: Background change applied directly to :hover 🔥 */
            background-image: linear-gradient(135deg, #2374ab 0%, #ff8484 100%); 
            color: #f0f2f5; /* Change text color to white/light */
        }
        
        /* Ensure content inherits the white color from :hover */
        .card:hover .card-content {
            color: inherit; 
        }
        
        .card:hover .icon {
            color: #ff8484; /* Keep icon color orange */
            transform: scale(1.1);
        }
        
        .card-content {
            padding: 35px; 
            transition: color 0.7s ease;
            position: relative;
            z-index: 2;
        }
        
        .icon {
            font-size: 3rem; 
            margin-bottom: 25px;
            color: #2374ab;
            transition: all 0.7s ease;
        }
        
        .card h3, .card p {
            color: inherit; /* Will be white on hover */
        }
        
        .card h3 {
            font-size: 1.6rem;
            margin-bottom: 15px;
        }
        
        .card p {
            margin-bottom: 15px;
        }
        
        /* --- Location Cards Grid (3 Columns) --- */
        .location-cards {
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
            gap: 30px; 
        }
        
        .location-card {
            background: white;
            border-radius: 8px;
            padding: 20px; 
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); 
            transform-style: preserve-3d;
            border-left: 6px solid #2374ab; 
            display: flex;
            align-items: center;
        }
        
        .location-card:hover {
            transform: translateY(-5px) rotateY(5deg); 
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35); 
            background: #2374ab; 
            color: white;
        }
        
        .location-card:hover .location-icon {
            color: #ff8484;
        }
        
        .location-icon {
            font-size: 2rem;
            margin-right: 15px;
            color: #2374ab;
            transition: color 0.5s ease;
        }
        
        .location-info h4 {
            font-size: 1.15rem;
            margin-bottom: 3px;
            font-weight: 600;
        }
        
        .location-info p {
            font-size: 0.95rem;
            opacity: 0.9;
        }
        
        /* --- Amenities Cards Grid (3 Columns) --- */
        .amenities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
            gap: 20px;
        }
        
        .amenity-item {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
            display: flex;
            align-items: center;
            transition: all 0.5s ease-out;
            transform-style: preserve-3d;
            border-bottom: 3px solid #ff8484;
        }
        
        .amenity-item:hover {
            transform: scale(1.03) rotateX(5deg); 
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); 
            background: linear-gradient(45deg, #2374ab 0%, #ff8484 100%); 
            color: white;
        }
        
        .amenity-item:hover .amenity-icon {
            color: #ff8484;
        }
        
        .amenity-icon {
            font-size: 2rem;
            margin-right: 15px;
            color: #2374ab;
            transition: color 0.5s ease;
        }
        
        .amenity-item h3 {
             font-size: 1.1rem;
             font-weight: 500;
        }
        
        /* --- Footer CSS --- */
        footer {
            text-align: center;
            margin-top: 60px;
            padding: 30px 20px;
            background-color: #e9ecef; 
            color: #555;
            font-size: 0.95rem;
            border-top: none;
            border-radius: 10px;
        }
        
        /* --- Media Queries --- */
        @media (max-width: 1400px) {
            .cards-container, .amenities-grid, .location-cards {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
            }
        }

        @media (max-width: 768px) {
            .container {
                max-width: 100%; 
                padding: 15px;
            }
            .cards-container, .amenities-grid, .location-cards {
                grid-template-columns: 1fr; 
                gap: 20px;
            }
        }


/* --- GALLERY SECTION CSS --- */
.gallery-grid {
    display: grid;
    /* Creates a responsive grid with columns that are at least 350px wide */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden; /* CRITICAL for zoom effect */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    height: 300px; /* Fixed height for consistent look */
    cursor: pointer;
    border: 4px solid white;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease-in-out; /* Smooth transition for zoom */
}

.gallery-item:hover img {
    transform: scale(1.15) rotate(1deg); /* ZOOM IN effect */
}


/* --- PRICE LIST SECTION CSS (NEW) --- */
.price-table-container {
    overflow-x: auto;
    margin-bottom: 50px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    min-width: 600px; /* Ensures readability on small screens */
}

.price-table th, .price-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.price-table th {
    background-color: #2374ab; /* Primary color */
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-table tbody tr:nth-child(even) {
    background-color: #f8f8f8;
}

.price-table tbody tr:hover {
    background-color: #e6f7f3; /* Light hover effect */
    transition: background-color 0.3s ease;
}

.price-action-btn {
    background-color: #ff8484; /* Accent color */
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.price-action-btn:hover {
    background-color: #e58b19;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
    .price-table {
        /* This ensures the table can scroll horizontally on mobile */
        min-width: 100%; 
    }
}




/*-----Start Price List----*/ 
.section-title {
            text-align: center;

            margin-bottom: 50px;
            color: #2c3e50;
            position: relative;
            font-weight: 700;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: linear-gradient(to right, #3498db, #2ecc71);
            border-radius: 2px;
        }
        
        .content-box {
            overflow-x: auto;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }
        
        .price-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
        }
        
        .price-table thead {
            background: linear-gradient(-45deg, #003d68, #4aa3d1, #375585);
            color: white;
        }
        
        .price-table th {
            padding: 20px 15px;
            text-align: left;
            font-weight: 600;
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .price-table th:first-child {
            border-top-left-radius: 15px;
        }
        
        .price-table th:last-child {
            border-top-right-radius: 15px;
        }
        
        .price-table tbody tr {
            border-bottom: 1px solid #e9ecef;
            transition: all 0.3s ease;
        }
        
        .price-table tbody tr:hover {
            background-color: #f8f9fa;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .price-table td {
            padding: 25px 15px;
            font-size: 1.1rem;
            color: #495057;
        }
        
        .price-table td:first-child {
            font-weight: 600;
            color: #2c3e50;
            display: flex;
            align-items: center;
        }
        
        .property-icon {
            margin-right: 15px;
            font-size: 1.5rem;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: rgba(52, 152, 219, 0.1);
            color: #3498db;
        }
        
        .price {
            font-weight: 700;
            font-size: 1.3rem;
            color: #2c3e50;
        }
        
        .price.highlight {
            color: #e74c3c;
            position: relative;
        }
        
        .price.highlight::after {
            content: 'Most Popular';
            position: absolute;
            top: -25px;
            right: 0;
            background: #e74c3c;
            color: white;
            font-size: 0.7rem;
            padding: 3px 10px;
            border-radius: 20px;
            font-weight: 600;
        }
        
        .enquiry-btn {
            padding: 12px 25px;
            background: linear-gradient(135deg, #3498db, #2ecc71);
            color: white;
            border: none;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .enquiry-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4);
        }
        
        .enquiry-btn i {
            margin-left: 8px;
            font-size: 0.9rem;
        }
        
        .note {
            text-align: center;
            margin-top: 30px;
            color: #6c757d;
            font-style: italic;
        }
        
        /* Responsive design */
        @media (max-width: 768px) {
            .container {
                padding: 5px 5px;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .price-table th, .price-table td {
                padding: 15px 10px;
                font-size: 1rem;
            }
            
            .property-icon {
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
                margin-right: 10px;
            }
            
            .enquiry-btn {
                padding: 10px 20px;
                font-size: 0.9rem;
            }
        }
        
        @media (max-width: 576px) {
            .price-table {
                display: block;
            }
            
            .price-table thead {
                display: none;
            }
            
            .price-table tbody, .price-table tr, .price-table td {
                display: block;
                width: 100%;
            }
            
            .price-table tr {
                margin-bottom: 20px;
                border: 1px solid #e9ecef;
                border-radius: 10px;
                padding: 15px;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            }
            
            .price-table td {
                padding: 10px 0;
                border: none;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            
            .price-table td:before {
                content: attr(data-label);
                font-weight: 600;
                color: #2c3e50;
                margin-right: 10px;
            }
            
            .price-table td:first-child {
                font-size: 1.2rem;
                border-bottom: 1px dashed #e9ecef;
                padding-bottom: 15px;
            }
        }
        
/*-----Start floor plan----*/


/*---FAQ-----*/

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;

            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        

        
        .section-title {
            text-align: center;

            color: #2374ab;
            font-size: 2rem;
            position: relative;
        }
        
        .section-title:after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: linear-gradient(to right, #2374ab, #ff8484);
            margin: 10px auto;
            border-radius: 2px;
        }
        
        /* FAQ Section Styles */
        .faq-container {
            max-width: 900px;
            margin: 0 auto;
        }
        
        .faq-item {
            background: white;
            border-radius: 8px;
            margin-bottom: 15px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: all 0.3s ease;
            border-left: 4px solid #ff8484;
        }
        
        .faq-item:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
            transform: translateY(-3px);
        }
        
        .faq-question {
            padding: 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
        
        .faq-question:hover {
            background: #f5f5f5;
        }
        
        .faq-question h3 {
            font-size: 1.3rem;
            color: #2374ab;
            margin: 0;
            font-weight: 800;
        }
        
        .faq-icon {
            color: #ff8484;
            font-size: 1.2rem;
            transition: transform 0.3s ease;
        }
        
        .faq-answer {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: #f9f9f9;
        }
        
        .faq-item.active .faq-answer {
            padding: 20px;
            max-height: 500px;
        }
        
        .faq-item.active .faq-icon {
            transform: rotate(180deg);
        }
        
        @media (max-width: 768px) {
            .faq-question h3 {
                font-size: 1.1rem;
            }
        }
        


/*--Starting Banner Points---*/
/* Desktop + Tablet View */
.typo-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.typo-item i {
    width: 18px;
    font-size: 16px;
    margin-top: 3px;
}


/* ------------------ MOBILE FIX ------------------ */
@media (max-width: 576px) {

    .typo-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        flex-wrap: nowrap;
        line-height: 1.3;
    }

    .typo-item span {
        white-space: normal;
        word-break: break-word;

        /* ------------------ MAIN FIX ------------------ */
        text-align: left !important;   /* FORCE FULL LEFT ALIGN */
        display: block;
        width: 100%;
    }
}
    




/*--Starting Banner Price Box---*/
.price-box {
    width: 100%;
    display: flex;
    justify-content: center;   /* center align */
}

.price-text {
    font-size: 22px;
    font-weight: 600;
    background: #ff8484;           /* your button color */
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-block;
    margin: 0;
}

.price-text .onwards {
    font-size: 15px;
}

/* ------- MOBILE VIEW FIX ------- */
@media (max-width: 576px) {
    .price-text {
        font-size: 18px;   /* reduce font for mobile */
        padding: 8px 14px;
        text-align: center;
        white-space: normal;   /* allow wrapping */
    }

    .price-text .onwards {
        font-size: 14px;
    }
}



/*----===footer======----*/
.footer-bar {
  width: 100%;
  background: #000;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  padding: 18px 0 0 0;
}
.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  flex-wrap: wrap;
}
.footer-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 260px;
}
.footer-section img {
  max-width: 220px;
  margin-top: 15px;
}
.footer-title {
  color: #18c5ff;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 5px;
}
.footer-contact i {
  color: #ff8484;
  margin-right: 8px;
  font-size: 1.08em;
  min-width: 22px;
}
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  color: #fff;
}
.footer-copy {
  width: 100%;
  text-align: center;
  padding: 13px 0 50px 0;
  font-size: 0.99em;
  color: #fff;
  opacity: 0.92;
  letter-spacing: .2px;
}

@media (max-width: 700px) {
  .footer-flex {
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 0 12px;
  }
  .footer-section,
  .footer-contact {
    align-items: center;
    min-width: unset;
    width: 100%;
  }
  .footer-title {
    text-align: center;
    width: 100%;
  }
}    
/*----====footer====----*/  



/*-- 🔥 ABOUT COMMERCIAL SECTION START --*/

/* ✅ FULLY RESPONSIVE FULL-WIDTH BACKGROUND */
        .about-commercial-section {
            position: relative;
            width: 100%;
            padding: 80px 0;
            background-image: url('https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&w=1500&q=80');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            overflow: hidden;
        }

        /* Dark Overlay */
        .about-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.55);
        }

        /* Content Wrapper */
        .about-content-wrapper {
            max-width: 1100px;
            margin: auto;
            padding: 0 20px;
        }

        /* Glassmorphism Box */
        .about-content {
            position: relative;
            background: rgba(255, 255, 255, 0.13);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 45px 40px;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.25);
            box-shadow: 0 10px 40px rgba(0,0,0,0.35);
        }

        .about-content h2 {
            text-align: center;
            font-size: 34px;
            font-weight: 700;
            margin-bottom: 22px;
        }

        .about-content p {
            font-size: 17px;
            line-height: 1.7;
            margin-bottom: 18px;
        }

        /* RESPONSIVE FOR MOBILE */
        @media(max-width: 768px) {
            .about-commercial-section {
                padding: 50px 0;
            }

            .about-content {
                padding: 25px 20px;
                backdrop-filter: blur(7px);
            }

            .about-content h2 {
                font-size: 26px;
            }

            .about-content p {
                font-size: 15.5px;
            }
        }     
/*-- 🔥 End ABOUT COMMERCIAL SECTION START --*/    


/* MOBILE TEXT SIZE FIX – Bigger & Balanced */
@media (max-width: 767px) {

    .project_content {
        width: 100% !important;
        text-align: center !important;
        padding: 20px 15px !important;
    }

    .project_content h4 {
        font-size: 20px !important;   /* पहले small था → अब बड़ा */
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .project_content .project_name {
        font-size: 22px !important;   /* Title bigger */
        font-weight: 700;
    }

    .project_content p {
        font-size: 17px !important;   /* paragraph bigger */
        line-height: 1.5;
        margin-bottom: 8px;
    }

    /* Price Text Bigger */
    .project_content h4[style] {
        font-size: 30px !important;
    }

    /* Buttons Full Width */
    .project_content .d-flex {
        flex-direction: column;
        gap: 12px;
    }

    .project_content .btn-custom {
        width: 100% !important;
        font-size: 13px !important;
        padding: 10px 0;
    }
}