:root {
            /* Primary Brand Colors - Professional yet Child-Friendly */
            --primary-blue: #2563eb;
            --primary-teal: #0891b2;
            --primary-purple: #7c3aed;
            --accent-coral: #f97316;
            --accent-pink: #ec4899;
            
            /* Professional Gradients */
            --primary-gradient: linear-gradient(135deg, #2563eb 0%, #0891b2 50%, #7c3aed 100%);
            --secondary-gradient: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
            --hero-gradient: linear-gradient(135deg, #1e40af 0%, #0e7490 50%, #6d28d9 100%);
            
            /* Neutral Colors - Professional Base */
            --text-primary: #1f2937;
            --text-secondary: #4b5563;
            --text-muted: #6b7280;
            --white: #ffffff;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-800: #1f2937;
            
            /* Background Colors */
            --bg-primary: #ffffff;
            --bg-secondary: #f8fafc;
            --bg-accent: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            
            /* Professional Shadows */
            --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
            --shadow-moderate: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
            --shadow-prominent: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
            --shadow-large: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
            
            /* Border Radius */
            --radius-sm: 0.375rem;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
            --radius-xl: 1rem;
            --radius-2xl: 1.5rem;
            
            /* Transitions */
            --transition-fast: all 0.15s ease;
            --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            
            /* Typography Scale - Professional Sizing */
            --text-xs: 0.75rem;    /* 12px */
            --text-sm: 0.875rem;   /* 14px */
            --text-base: 1rem;     /* 16px */
            --text-lg: 1.125rem;   /* 18px */
            --text-xl: 1.25rem;    /* 20px */
            --text-2xl: 1.5rem;    /* 24px */
            --text-3xl: 1.875rem;  /* 30px */
            --text-4xl: 2.25rem;   /* 36px */
            --text-5xl: 3rem;      /* 48px */
            --text-6xl: 3.75rem;   /* 60px */
            
            /* Line Heights */
            --leading-tight: 1.25;
            --leading-normal: 1.5;
            --leading-relaxed: 1.625;
            --leading-loose: 2;
            
            /* Font Weights */
            --font-light: 300;
            --font-normal: 400;
            --font-medium: 500;
            --font-semibold: 600;
            --font-bold: 700;
            --font-extrabold: 800;
        }

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
#Home {
  background: linear-gradient(rgba(0, 0, 0, 0.5), #006688), url(images/car_image1.webp);
  background-size: cover;
  background-position: center;
  height: 100vh;
}
.logo {
  	width: 80px;          /* modest size, not too big */
	height: 80px;
    object-fit: cover;    /* keep aspect ratio, crop if needed */
    border-radius: 50%;   /* make circular */
    margin-bottom: 1rem;  /* space below image */
    display: block;
  position: absolute;
  top: 2%;
  left: 2%;
}


  .contact-container {
    display: flex;
    min-height: 500px; /* ensures a nice height for the split */
  }

  .contact-left {
    flex: 1;
    padding: 2rem;
  }

  .contact-right {
    flex: 1;
    background: url("images/front_shop1.webp") no-repeat center center;
    background-size: cover;
    border-radius: 0.75rem;
  }

  /* Responsive (stack on mobile) */
  @media (max-width: 768px) {
    .contact-container {
      flex-direction: column;
    }
    .contact-right {
      height: 300px; /* smaller height for mobile */
      border-radius: 0.75rem;
      margin-top: 1.5rem;
    }
  }
  

.banner-text {
  text-align: center;
  color: #fff;
  padding-top: 180px;
}
.banner-text h1 {
  font-size: 80px;
  font-family: "Kaushan Script", cursive;
}

.banner-text p {
  font-size: 20px;
  font-style: italic;
}
.banner-btn {
  margin: 70px auto 0;
}

.banner-btn a {
  width: 150px;
  text-decoration: none;
  display: inline-block;
  margin: 0 10px;
  padding: 12px 0;
  color: #fff;
  border: 0.5px solid #fff;
  position: relative;
  z-index: 1;
  transition: color 0.5s;
}

.banner-btn a span {
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  z-index: -1;
  transition: 0.5s;
}
.banner-btn a:hover span {
  width: 100%;
}
.banner-btn a:hover {
  color: #000;
}
#sideNav{
    width:250px;
    height:100vh;
    position:fixed;
    right:0;
    top:0;
    background:#004688;
    z-index:2;
    transition: 0.5s;
}

nav ul li{
    list-style: none;
    margin:50px 20px;
  }
nav ul li a{
  text-decoration: none;
  color:#fff;
}
#menuBtn{
    width: 50px;
    height: 50px;
    background: #009688;
    text-align: center;
    position: fixed;
    right: 30px;
    top: 20px;
    border-radius: 3px;
    z-index: 3;
    cursor: pointer;
}
#menuBtn img{
    width: 20px;
    margin-top: 15px;
}
@media screen and (max-width:770px)
{
    .banner-text h1{
        font-size: 35px;
    }
    .banner-btn a{
            display:block;
            margin:20px auto;
    }
}
    /* Features */
#feature{
    width: 100%;
    padding: 40px 0;
}
.title-text{
    text-align: letf;
    padding-bottom: 70px;
}
.title-text p{
    margin:auto;
    font-size: 20px;
    color:#009688;
    font-weight: bold;
    position: relative;
    z-index: 1;
    display: inline-block;

}
.title-text p::after{
    content:'';
    width:50px;
    height:35px;
    background: linear-gradient(#019587,#fff);
    position: absolute;
    top:-20px;
    left:0;
    z-index: -1;
    transform: rotate(10deg);
    border-top-left-radius:35px;
     border-bottom-right-radius: 35px ;
}
.title-text h1{
    font-size: 50px;
}
.feature-box{
    width:80%;
    margin:auto;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
}
.feature{
    flex-basis: 50%;
}
.feature-img{
    flex-basis: 50%;
    margin:auto;
}
.feature-img img{
    width:70%;
    border-radius: 10px;
}
.feature h1{
    text-align:left;
    margin-bottom: 10px;
    font-weight:100;
    color:#009688;
}
.feature-desc{
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
.feature-icon .fa{
    width: 50px;
    height: 50px;
    font-size:30px;
    line-height:50px;
    border-radius:8px;
    color:#009688;
    border: 1px solid #009688;
}
.feature-text p{
    padding:0 20px;
    text-align: initial;
   
}

.announcement p {
            font-size: var(--text-lg);
            color: var(--text-secondary);
            line-height: var(--leading-relaxed);
        }

        /* Professional Section Headings */
        .section-heading {
            text-align: center;
            font-family: 'Poppins', sans-serif;
            font-size: var(--text-2xl);
            font-weight: var(--font-semibold);
            margin: 3rem 0 2rem 0;
            color: var(--text-primary);
            line-height: var(--leading-tight);
        }

        .section-heading span {
            color: var(--primary-blue);
            font-weight: var(--font-bold);
        }

        /* Professional Services Grid */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin: 2rem 0;
        }


        .service-card {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            padding: 2.5rem;
            border-radius: var(--radius-xl);
            text-align: center;
            transition: var(--transition-normal);
            box-shadow: var(--shadow-moderate);
            border: 1px solid var(--gray-200);
            position: relative;
            overflow: hidden;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--primary-gradient);
        }

        .service-card:hover {
            transform: translateY(-10px) rotateZ(1deg);
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }

        .service-card h3 {
            font-family: 'Poppins', sans-serif;
            color: #333;
            margin-bottom: 1rem;
            font-size: var(--text-xl);
            font-weight: var(--font-semibold);
            line-height: var(--leading-tight);
        }

        .service-card p {
            color: #333;
            font-size: var(--text-base);
            line-height: var(--leading-relaxed);
        }

        .emojis {
            font-size: var(--text-5xl);
            margin-bottom: 1.5rem;
            display: block;
            opacity: 0.8;
        }
        
.contact-item {
            display: flex;
            align-items: flex-start;
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            border-left: 4px solid #4ecdc4;
            transition: all 0.3s ease;
        }

        .contact-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

        .transport-item {
            grid-column: 1 / -1;
        }

        .contact-icon {
            font-size: 1.5rem;
            margin-right: 1rem;
            background: linear-gradient(135deg, #4ecdc4, #44a08d);
            color: white;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .contact-details {
            flex: 1;
        }

        .contact-label {
            display: block;
            color: #2c3e50;
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .contact-value {
            color: #5a6c7d;
            font-size: 1rem;
            line-height: 1.6;
        }
        
        
@media screen and (max-width:770px)
{
    .title-text h1{
        font-size: 35px;
    } 
        .feature{
            flex-basis:100%
    }
    .feature-img img{
        width:100%;
    }
}
/* Service */
#service{
    width:100%;
    padding:70px 0;
    background:#efefef;
}
.service-box{
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: auto;   
}
.single-service{
    flex-basis: 48%;
    text-align: center;
    border-radius: 7px;
    margin-bottom: 20px;
    color:#fff;
    position:relative;
}
.single-service img{
    width:100%;
    border-radius: 7px;
}
.overlay{
     width:100%;
     height:100%;
     position: absolute;
     top:0;
     border-radius: 7px;
     cursor:pointer;
     background:linear-gradient(rgba(0,0,0,0.5),#009688);
     opacity: 0;
     transition: 1s;
}
.single-service:hover .overlay{
    opacity:1;
}
.service-desc{
    width:80%;
    position:absolute;
    bottom: 0%;
    left:50%;
    opacity: 0;
    transform: translateX(-50%);
    transition: 1s;
}
hr{
    background: #fff;
    height: 2px;
    border: 0;
    margin:15px auto;
    width: 60%;
}
.service-desc p{
    font-size:14px
}
.single-service:hover .service-desc{
bottom:40%;
opacity: 1;
}

.services-section {
    margin: 3rem 0;
}


.service-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: var(--leading-tight);
}

.service-price {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--accent-coral);
    margin-bottom: 0.5rem;
    text-align: center;
    padding: 0.75rem;
    background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
    border-radius: 0.75rem;
    border: 2px solid #fecaca;
}

.service-duration {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--accent-color);
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    background: #f0f9ff;
    border-radius: 0.5rem;
}

.service-subtitle {
    font-size: var(--text-base);
    color: var(--text-color);
    margin-bottom: 1.5rem;
    font-style: italic;
    text-align: center;
}

.service-description {
    font-size: var(--text-base);
    color: var(--text-color);
    line-height: var(--leading-relaxed);
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.service-includes {
    font-size: var(--text-sm);
    color: var(--text-color);
    background: #f8fafc;
    padding: 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid var(--accent-color);
    margin-top: auto;
}

.service-includes strong {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

/* Service Options for Parent Services */
.service-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.service-option {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
}


@media screen and (max-width:770px)
{
    .single-service{
        flex-basis: 100%;
        margin-bottom: 30px;
    }
    .service-desc p{
        font-size: 12px;
    }
    hr{
        margin:5px auto;
    }
    .single-service:hover  .service-desc{
        bottom:25% !important;
    }
}
/* Testimonial */

#testimonial{
    width: 100%;
    padding: 70px 0;
}
.testimonial-row{
    width: 80%;
    margin:auto;
    display: flex;
    justify-self:space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.testimonial-col{
     
    flex-basis: 28%;
    padding: 10px;
    margin-bottom: 30px;
    border-radius: 5px;
    box-shadow: 0 10px 20px 3px #00968814;
    cursor:pointer;
 

    transition: transform 0.5s;
}
.testimonial-col p{
    font-size: 10px;
    text-align: justify;
    justify-self: space-between;
}


.testimonial-col p:hover{
    font-size: 14px;
transition: 0s;
}

.user{
    display: flex;
    align-items: center;
    margin: 20px 0;
}
.user img{
    width: 40px;
    margin-right: 20px;
    border-radius: 3px;   
}
.user-info .fa{
    margin-left:10px;
    color:#27c0ff;
    font-size: 20px;
}
.user-info small{
    color:#009688;
}

.testimonial-col:hover{
    transform: translateY(-7px);
}
@media screen and (max-width:770px)
{
    .testimonial-col{
        flex-basis: 100%;
    }
}

/* Footer */
#footer{
    padding: 100px 0 20px;
    background: #efefef;
    position: relative;
}
.footer-row{
     width: 80%;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
}
.footer-left, .footer-right{
flex-basis: 45%;
padding: 10px;
margin-bottom: 20px;
}
.footer-right{
    text-align:right;
}
.footer-row h1{
    margin:10px 0;
}
.footer-row p{
    margin: 35px;
}
.footer-left .fa,.footer-right .fa{
    font-size: 20px;
    color:#009688;
    margin:10px
}
.footer-img{
    max-width: 370px;
    opacity: 0.1;
    position: absolute;
    left: 50%;
    top:35%;
    transform: translate(-50%, -50%);
}
.social-links{
    text-align: center;
}
.social-links .fa{
    height: 40px;
    width: 40px;
    font-size:20px;
    line-height: 40px;
    border:1px solid #009688;
    margin: 40px 4px 0;
    color: #009688;
    cursor: pointer;
    transition: .5s;
}
.social-links .fa:hover{
    background: #009688;
    color: #fff;
    transform: translateY(-7px);
}

 /* Professional About Page Styles */
        .about-card {
            background: var(--bg-primary);
            padding: 2.5rem;
            border-radius: var(--radius-xl);
            margin-bottom: 2rem;
            box-shadow: var(--shadow-moderate);
            border: 1px solid var(--gray-200);
        }

        .about-card h3 {
            font-family: 'Poppins', sans-serif;
            color: var(--primary-blue);
            margin-bottom: 1.5rem;
            font-size: var(--text-xl);
            font-weight: var(--font-semibold);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .about-card p {
            color: var(--text-secondary);
            font-size: var(--text-base);
            line-height: var(--leading-relaxed);
        }

        .about-card ul {
            margin-left: 1.5rem;
            color: var(--text-secondary);
        }

        .about-card li {
            margin-bottom: 0.75rem;
            font-size: var(--text-base);
            line-height: var(--leading-normal);
        }

        /* Professional Staff Section */
        .staff-grid {
            background: linear-gradient(135deg, var(--gray-50) 0%, #f0f9ff 100%);
            padding: 3rem;
            border-radius: var(--radius-2xl);
            margin-bottom: 3rem;
            border: 1px solid var(--gray-200);
        }

        .staff-grid h4 {
            font-family: 'Poppins', sans-serif;
            text-align: center;
            margin-bottom: 2rem;
            color: var(--text-primary);
            font-size: var(--text-2xl);
            font-weight: var(--font-semibold);
        }

        .staff-card {
            background: var(--bg-primary);
            padding: 2rem;
            border-radius: var(--radius-xl);
            text-align: center;
            box-shadow: var(--shadow-subtle);
            border: 1px solid var(--gray-200);
            transition: var(--transition-normal);
        }

        .staff-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-moderate);
        }

        .staff-emoji {
            font-size: var(--text-5xl);
            margin-bottom: 1rem;
        }

        .staff-card h5 {
            font-family: 'Poppins', sans-serif;
            color: var(--text-primary);
            font-size: var(--text-xl);
            font-weight: var(--font-semibold);
            margin-bottom: 0.5rem;
        }

        .staff-card p {
            color: var(--text-muted);
            font-size: var(--text-xl);
            line-height: var(--leading-normal);
        }
        
        .staff-photo {
    	width: 160px;          /* modest size, not too big */
   		 height: 160px;
    	object-fit: cover;    /* keep aspect ratio, crop if needed */
    	border-radius: 50%;   /* make circular */
    	margin-bottom: 1rem;  /* space below image */
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
		}


       .faq-item {
            background: #f8f9fa;
            margin: 1rem 0;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .faq-question {
            background: linear-gradient(45deg, #4ecdc4, #44a08d);
            color: white;
            padding: 1.5rem;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .faq-question:hover {
            background: linear-gradient(45deg, #44a08d, #4ecdc4);
        }

        .faq-answer {
            padding: 1.5rem;
            display: none;
            background: white;
        }

        .faq-answer.show {
            display: block;
            animation: slideDown 0.3s ease;
        }
        
                @keyframes slideDown {
            from { opacity: 0; max-height: 0; }
            to { opacity: 1; max-height: 200px; }
        }
       .reviews-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }

        .review-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.08);
            border: 1px solid rgba(102, 126, 234, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .review-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
        }

        .review-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
        }

        .stars {
            font-size: 1.5rem;
            margin-bottom: 20px;
            text-align: center;
            filter: drop-shadow(0 2px 4px rgba(255,193,7,0.3));
        }

        .review-content {
            margin-bottom: 25px;
        }

        .review-content p {
            margin-bottom: 15px;
            color: #555;
            font-size: 1rem;
            line-height: 1.7;
            text-align: justify;
        }

        .review-content p:last-of-type {
            margin-bottom: 0;
        }

        .reviewer-info {
            text-align: right;
            font-weight: 600;
            color: #667eea;
            font-size: 0.95rem;
            padding-top: 20px;
            border-top: 1px solid rgba(102, 126, 234, 0.2);
        }
      .social-feed {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }

        .social-post {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            padding: 1.5rem;
            border-radius: 15px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .social-post:hover {
            transform: scale(1.05);
        }
       .contact-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .contact-header h2 {
            color: #4ecdc4;
            font-size: 2.5rem;
            font-weight: 600;
            margin: 0;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .contact-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        .contact-info-section {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 20px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            border: 1px solid #e9ecef;
        }

        .section-title {
            color: #2c3e50;
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 2rem;
            text-align: center;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            border-left: 4px solid #4ecdc4;
            transition: all 0.3s ease;
        }

        .contact-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

        .transport-item {
            grid-column: 1 / -1;
        }

        .contact-icon {
            font-size: 1.5rem;
            margin-right: 1rem;
            background: linear-gradient(135deg, #4ecdc4, #44a08d);
            color: white;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .contact-details {
            flex: 1;
        }

        .contact-label {
            display: block;
            color: #2c3e50;
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .contact-value {
            color: #5a6c7d;
            font-size: 1rem;
            line-height: 1.6;
        }

        .grand-opening-section {
            margin-top: 2rem;
        }

        .opening-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2.5rem;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
            position: relative;
            overflow: hidden;
        }

        .opening-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
            pointer-events: none;
        }

        .opening-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .opening-main-text {
            font-size: 1.3rem;
            margin: 1rem 0;
            font-weight: 500;
        }

        .opening-sub-text {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .opening-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

	/* Photo Gallery Section */
		.photo-gallery {
        .photo-gallery {
    margin: 40px 0;
    text-align: center;
	}

	.gallery-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
	}

	.gallery-row:last-child {
    margin-bottom: 0;
	}

	.photo-item img {
    width: 450px;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	}
.contact-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 3rem 2rem;
    border-radius: 1rem;
    margin: 2rem 0;
    text-align: center;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
	}

	.contact-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 1rem;
	}

	.contact-subtitle {
    font-size: var(--text-lg);
    color: var(--text-color);
    margin-bottom: 2.5rem;
    line-height: var(--leading-relaxed);
	}
/* Professional Navigation */
        nav {
            background: var(--bg-primary);
            padding: 1.5rem;
            border-radius: var(--radius-xl);
            margin-bottom: 3rem;
            box-shadow: var(--shadow-moderate);
            border: 1px solid var(--gray-200);
        }

        nav ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.75rem;
        }

        nav button {
            background: var(--primary-gradient);
            color: var(--white);
            border: none;
            padding: 0.875rem 1.5rem;
            border-radius: var(--radius-lg);
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
            transition: var(--transition-normal);
            box-shadow: var(--shadow-subtle);
            min-height: 44px;
            min-width: 44px;
            letter-spacing: 0.025em;
            position: relative;
            overflow: hidden;
        }

        nav button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }

        nav button:hover::before {
            left: 100%;
        }

        nav button:hover,
        nav button:focus {
            transform: translateY(-2px);
            box-shadow: var(--shadow-moderate);
            outline: 2px solid var(--primary-blue);
            outline-offset: 2px;
        }

        nav button.active {
            background: var(--secondary-gradient);
            transform: scale(1.05);
            box-shadow: var(--shadow-prominent);
        }
        
    .contact-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 3rem 2rem;
    border-radius: 1rem;
    margin: 2rem 0;
    text-align: center;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
	}

	.contact-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 1rem;
	}

	.contact-subtitle {
    font-size: var(--text-lg);
    color: var(--text-color);
    margin-bottom: 2.5rem;
    line-height: var(--leading-relaxed);
	}
	

	.contact-buttons {
            display: flex;
            flex-direction: row;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .contact-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1.5rem 1rem;
            border-radius: 20px;
            text-decoration: none;
            font-weight: bold;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
            min-height: 80px;
            flex: 1;
            text-align: center;
        }

        .btn-primary {
            background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
            color: white;
        }

        .btn-secondary {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
            color: white;
        }

        .btn-tertiary {
            background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
            color: white;
        }

        .contact-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        .btn-icon {
            margin-right: 0;
            margin-bottom: 0.5rem;
            font-size: 2rem;
        }

        .phone-display {
            font-size: 0.75rem;
            display: block;
            margin-top: 0.3rem;
            opacity: 0.9;
        }

/* latin-ext */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kaushanscript/v18/vm8vdRfvXFLG3OLnsO15WYS5DG72wNJVMJ8br5Y.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kaushanscript/v18/vm8vdRfvXFLG3OLnsO15WYS5DG74wNJVMJ8b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.social-links p{
    font-size: 12px;
    margin-top: 20px;
}

 .grand-opening-section {
            margin-top: 2rem;
        }

        .opening-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2.5rem;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
            position: relative;
            overflow: hidden;
        }

        .opening-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
            pointer-events: none;
        }

        .opening-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .opening-main-text {
            font-size: 1.3rem;
            margin: 1rem 0;
            font-weight: 500;
        }

        .opening-sub-text {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .opening-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

  /* Professional About Page Styles */
.about-card {
            background: var(--bg-primary);
            padding: 2.5rem;
            border-radius: var(--radius-xl);
            margin-bottom: 2rem;
            box-shadow: var(--shadow-moderate);
            border: 1px solid var(--gray-200);

@media screen and (max-width:770px){
    .footer-left,.footer-right{
        flex-basis: 100%;
        font-size: 14px;
    }
    .footer-img{
        top: 25%;
    }
}