*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root{
    --secoundary-color:#54c69b;
    --primary-color:#61c5cf;

}
html body{
    overflow-x: hidden;
}
.tree{
    color: var(--secoundary-color);
    font-size: 40px;

}

.navbar-brand{
    color: var(--secoundary-color) !important;
    font-size: 25px !important;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}
.navbar-brand span{
    color: #096e48e8;
}
.btn-buy{
   background-color: var(--primary-color) !important;
   color: white !important;
   padding: 16px 22px !important;
   font-weight: 600 !important;
   border-radius: 4px !important;
   font-size: 13px !important;
}
.nav-item{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    
}
.navbar-nav {
  display: flex;
  gap: 15px;
  align-items: center;
  
}
h1,h2,h3,h4,h5 {
  font-family: 'Arima Madurai', sans-serif;

}
/* fixed navbar */
/* Default navbar */
.custom-navbar {
  transition: all 0.4s ease;
  background-color: transparent;
  padding: 18px 0;
}

/* On scroll */


.custom-navbar.scrolled {
  background-color:rgba(0, 0, 0, 0.769); /* dark color */
  padding: 10px 0;
  margin-top: 0px !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  
}
.custom-navbar.scrolled .navbar-brand span{
     color: var(--secoundary-color) !important;
   
}


/* Nav links color */
.custom-navbar .nav-link,
.custom-navbar .navbar-brand {
   
 
}
/* Remove focus, border & shadow */
.navbar-toggler {
  border: none;
}
.custom-navbar.scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Make hamburger icon white */
.navbar {
    margin-top: 0px !important;
  
}
/* Default (no scroll) */
.custom-navbar .nav-link,
.custom-navbar .navbar-brand {
  color: #000;   /* normal state */
  transition: color 0.3s ease;
  
}

/* Scroll state */
.custom-navbar.scrolled .nav-link,
.custom-navbar.scrolled .navbar-brand {
  color: #fff;   /* white on scroll */
}
.custom-navbar.scrolled .navbar-toggler{
    color: white !important;
}

/* Active & hover */
.custom-navbar.scrolled .nav-link.active,
.custom-navbar.scrolled .nav-link:hover {
  color: #096e48e8;
}


.custom-navbar .nav-link:hover {
  color: #4caf50;
}

/* Buy button */
.btn-buy {
  background: #4caf50;
  color: #fff;
  border-radius: 30px;
  padding: 8px 20px;
}


.nav-item {
     font-family: 'Montserrat', sans-serif;
  font-weight: 500 !important; 
color: black !important;


}
.navbar-nav .nav-link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color: black;
  font-size: 12px;
  line-height: 1.8;      /* MOST IMPORTANT */
  padding: 10px 14px;   /* space fix */
}


 .active{
    color:#61c5cf !important;
 }
 .nav-link:hover{
    color: var(--primary-color) !important;
 }

 /*banner-section  */
 .help-button{
background-color: var(--secoundary-color);
padding: 10px 25px;
color: white;
border-radius: 5px;
border: none;
font-weight: 500;
margin-top: 15px;
transition: all 0.5s ease;
border: 2px solid transparent;

 }
 .help-button:hover{
    border: 2px solid aqua;
   transform: translateY(-5px);
   background-color: var(--primary-color);
 }
 .banner-img{
    border-radius: 7px;
    background-image: url(images/banner.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
   width: 100%;
   height: 500px;
   overflow-x: hidden;
   
    

 }
 
 .banner{
    margin-top: 8px;
    padding-left: 50px;
    padding-right: 50px;
    position: relative;
  width: 100%;
  height: 500px; 
  padding-top: 100px;

 }
 .banner-text{
    padding-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

          
}
p{
      font-family: 'Merriweather', serif;
     font-weight: 400;
     font-size: 14px;
     color: #6B7C93;
     letter-spacing: 0.5px;

}
.paragraph-banner{
   margin-top: 150px;
     font-family: 'Merriweather', serif;
     font-weight: 400;
     font-size: 14px;
     color: #6B7C93;
     letter-spacing: 0.5px;
    
   
  

}
.heading-banner{
    position: absolute;
    z-index: 999;
    top: 10%;
    left: 3%;
    font-size: 58px;
    font-weight: 900;
}
.banner-row{
    position: relative;
}
.main-cards{
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.card h3{
    font-size: 21px;
    text-align: center;
    color: white;
    font-weight: 600;
   
    
}
.banner-card-h {
    font-weight: 600;
    margin-top: 140px;
}
.icon-box{
    text-align: center !important;
    font-size: 50px;
    color: white;
    
}

.card p{
    text-align: start;
    color: white;
  padding-top: 20px;
  font-weight: 300;
  line-height: 29px;
}
.card-pink{
    background-color: #f190b4 !important;
}
.card-orange{
    background-color: #ff926b !important;
}
.card-teal{
    background-color: #5bc6d0 !important;
}
.card{
    padding: 20px;
    border: none;
}
.banner-card-p{
    color: black !important;
    font-weight: 300;
    margin-top: 15px; 
}

.main-card {
    position: absolute;
    top: 130%;          
    left: 66%;         
    transform: translate(-50%, -50%);    
    z-index: 10;
    width: 55%;
}
.Service{
margin-top: 200px;
}
.service-h-2{
    text-align: center;
    font-size: 30px;
    color: var(--primary-color);

}
.banner-card-h{
   
    font-family: 'Arima Madurai', sans-serif;
}
.service-h{
    text-align: center;
    font-size: 35px;
    color: black;
    font-weight: 700;
}
.service-p{
    text-align: center;
    color: black;
    font-size: 14px;
    font-weight: 300;
    margin-top: 10px;
    letter-spacing: 0.5px;
    line-height: 30px;
    margin-bottom: 40px;
}
/*card-2   */
.custom-card-container {
  position: relative;
  padding-top: 50px; /* Space for the floating icon */
  text-align: center;
  margin-top: 30px;
}





/* The Icon floating at the top */
.icon-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 45px;
  z-index: 5;
}

/* The Main Card with the "U" shape cut */
.content-card {
  padding: 80px 30px 40px;
  border-radius: 20px;
  min-height: 500px;
  /* This creates the curved cutout at the top center */
  mask-image: radial-gradient(circle at 50% 0%, transparent 55px, black 56px);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, transparent 55px, black 56px);
}

/* Background Colors (Very light/pastel) */
.green-bg { background-color: #f0fbf7; }
.orange-bg { background-color: #fff6f3; }
.pink-bg { background-color: #fff4f8; }

/* Text & Accent Colors */
.green-text, .green-checks i { color: #69d3a7; }
.orange-text, .orange-checks i { color: #ff926b; }
.pink-text, .pink-checks i { color: #f190b4; }

/* Typography */
.card-title {
  font-family: 'Arima Madurai', sans-serif;
  font-weight: 600;
  font-size: 1.8rem;
  color: #333;
  line-height: 1.2;
}

.divider {
  width: 50px;
  height: 4px;
  margin: 20px auto;
  border-radius: 2px;
}
.green-line { background-color: #69d3a7; }
.orange-line { background-color: #ff926b; }
.pink-line { background-color: #f190b4; }

.card-text {
  font-size: 14px;
  color: #777;
  margin-bottom: 30px;
  text-align: start;
}

/* List Styling */
.card-list {
  list-style: none;
  padding: 0;
  text-align: left;
}

.card-list li {
  margin-bottom: 12px;
  font-size: 14px;
  color: #555;
  display: flex;
  align-items: center;
}

.card-list i {
  margin-right: 10px;
  font-size: 18px;
}
/* cta */
/* Typography from the image */
.cta-heading {
    font-family: 'Arima Madurai', sans-serif;
    font-weight: 600 !important;
    font-size: 32px;
    color: #333;
    line-height: 1.3;
    margin-bottom: 50px;
}
.cta-section{
    margin-top: 20px !important;
}

.phone-color {
    color: #5bc6d0; /* Teal color identified from your banner */
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
     
}

/* Split Button Styling */
.split {
    display: inline-flex;
    align-items: center;
    background-color: #5bc6d0; /* Main teal background */
    color: white;
    text-decoration: none;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin-bottom: 20px;
}

.btn-split:hover {
    transform: translateY(-3px);
    color: white;
}

.label {
    padding: 0px 20px !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* The darker teal box on the right of the button */
.btn-icon {
    background-color: rgba(0, 0, 0, 0.1); /* Slightly darker shade */
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.btn-icon i {
    font-size: 20px;
}
/* abbout */
.about-container {
    display: flex;
    width: 100%;
    max-width: 900px;
    background-color: #f0fafa; /* Light blue background */
    align-items: center;
    
}

/* Content Styles */
.content-side {
  width: 700px;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 80px;
    padding-right: 50px;
}

.sub-heading {
    color: #4dc2c2;
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 400;
}

.main-name {
    font-family: 'Arima Madurai', sans-serif;
    font-size: 50px;
    color: #000;
    margin-bottom: 30px;
    font-weight: 700 !important;
    
}

.description p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

/* Contact Info Styles */
.contact-info {
    margin-top: 40px;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #000;
}

.icon {
    color: #4dc2c2;
    margin-right: 15px;
    font-size: 1.2rem;
}
.about-main{
  position: relative;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

/* Image Styles */
.image-side {
  
  position: absolute;
  right: 50px;
  top: 8%;
   
}

.image-side img {
    width: 100%;
    max-width: 431px;
    height: 433px;
    border-radius: 12px;
  
    object-fit: cover;
}
.text{
    font-family: 'Montserrat', sans-serif;
   font-weight: 300 !important;
  
}

/* pricing and plan section */
/* Typography */
.pricing-section{
    margin-top: 40px !important;
    margin-bottom: 40 !important;
}
.pricing-main-title {
    font-size: 3rem;
    font-weight: 700;
     font-family: 'Arima Madurai', sans-serif;
}

.text-teal { color: #5bc6d0;
 font-family: 'Arima Madurai', sans-serif; 

}

/* The Pricing Box (Replacing .card) */
.price-box {
    padding: 60px 40px;
    text-align: center;
    border: 1px solid #eee;
    transition: all 0.5s ease;
    height: 100%;
}

.price-white {
  background-color: #ffffff;

  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.04);
}


.price-white:hover { 
    background-color: #5bc6d0; 
    border: none;
    transform: scale(1.05); /* Middle card slightly larger */
    z-index: 2;
    box-shadow: 0 15px 45px rgba(0,0,0,0.1);
    color: white !important;
}
.price-box:hover * {
    color: #fff !important;
}
.price-box:hover .price-amount,
.price-box:hover .price-amount sup,
.price-box:hover .price-amount span {
    color: #fff !important;
}
.price-box:hover i {
    color: #fff !important;
}
.price-box:hover .price-divider {
    background-color: #fff;
}
.price-box:hover .price-btn {
    background-color: #fff;
    color: teal !important;
}
.price-box:hover .price-btn i,
.price-box:hover .price-btn span {
    color: teal !important;
}


/* Icons & Header */
.price-icon { font-size: 60px; margin-bottom: 20px; }
.orange-text { color: #ff926b !important; }
.green-text { color: #69d3a7 !important; }
.white-text { color: #ffffff !important; }
.black-text{color: black !important;}
.price-amount {
    font-size: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: #444;
}
.price-amount sup { font-size: 20px; top: -1em; }
.price-amount span { font-size: 14px; color: #aaa;
  font-family: 'Playfair Display', serif !important;

}

.price-divider { width: 100%; height: 3px; background: #eee; margin: 30px 0; }
.white-op { background: rgba(255,255,255,0.3); }

/* List Styling */
.price-list { list-style: none; padding: 0; margin-bottom: 30px; text-align: left;
}
.price-list li { margin-bottom: 15px; font-size: 15px; display: flex; align-items: center; }
.price-list i { margin-right: 10px; font-size: 18px; }

.orange-checks i { color: #ff926b; }
.green-checks i { color: #69d3a7; }
.white-checks i { color:#69d; }

.price-footer-info p {
    font-size: 14px;
    padding: 12px 0;
    border-top: 1px solid #f5f5f5;
    margin: 0;
    text-align: start;
}
.price-teal .price-footer-info p { border-top: 1px solid rgba(255,255,255,0.1); 
text-align: start;
}

/* Split Button Styling */
.price-btn {
    display: inline-flex;
    text-decoration: none;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 30px;
}

.btn-teal { background-color: #5bc6d0; color: white; }
.btn-white { background-color: #ffffff; color: #5bc6d0; }

.p-btn-icon {
    padding: 12px 15px;
    background: rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    
}

.btn-white .p-btn-icon { background: rgba(0,0,0,0.05); }

.p-btn-text {
    padding: 12px 20px;
    font-weight: 500;
    font-size: 14px;
   
}


/* slidar */
.testimonials-section {
    position: relative;
    overflow: hidden;
}
.testimonials-section::before {
    content: "";
    position: absolute;
    top: 65%;
    left: -140px;              /* bahar nikal ke cut look */
    transform: translateY(-50%);

    width: 250px;
    height: 300px;

    background-image: url("images/banner.jpeg");
    background-size: cover;
    background-position: center;

    border-radius: 0 200px 200px 0; /* LEFT cut */
    opacity: 0.2;

    z-index: 1;
}
.testimonials-section::after {
    content: "";
    position: absolute;
    top: 65%;
    right: -140px;             /* bahar nikal ke cut look */
    transform: translateY(-50%);

    width: 250px;
    height: 300px;

    background-image: url("images/banner.jpeg");
    background-size: cover;
    background-position: center;

    border-radius: 200px 0 0 200px; /* RIGHT cut */
    opacity: 0.2;

    z-index: 1;
}






/* Typography */
.text-teal {
    color: #5bc6d0;
    font-size:40px;
    font-weight: 600;
     font-family: 'Arima Madurai', sans-serif;
}

.testimonial-title {
    font-family: 'Arima Madurai', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #333;
}

/* Slide Content Styling */
.testimonial-content {
    max-width: 850px;
    position: relative;
}

.client-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    object-position: center 30%;
}

/* The light-shaded box around the text */
.quote-box {
    background-color: rgba(240, 251, 252, 0.5); /* Very light teal tint */
    padding: 40px 60px;
    border-radius: 10px;
    position: relative;
}

.quote-icon {
    font-size: 40px;
    color: #e0e0e0;
    position: absolute;
    top: 20px;
    left: 20px;
    opacity: 0.5;
}

.testimonial-text {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    font-style: italic;
    
}
.testimonial-text span {
    border-bottom:  1px solid rgba(169, 169, 169, 0.686);
    padding-bottom: 7px;

}

.client-name {
      font-family: 'Arima Madurai', sans-serif;
    font-weight: 500;
    color:black;

}

/* Custom Dots (Indicators) Styling */
.custom-dots {
    position: relative;
    margin-top: 40px;
    bottom: 0;
}

.custom-dots button {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #5bc6d0 !important; /* Teal dots */
    border: none !important;
    margin: 0 5px !important;
    opacity: 0.3 !important;
    transition: opacity 0.3s ease;
}

.custom-dots button.active {
    opacity: 1 !important;
}
.testimonials-section{
    position: relative;
}
.deco-img{
    display: block;
    position: absolute ;
    top: 20% ;
  

    opacity: 0.8 ;
    z-index: -1; 
    pointer-events: none;
}
.deco-left{
    left: -80px; 
}
.deco-right{
    right: -70px;
}
/* images section */
/* Typography */
.text-teal { color: #5bc6d0; 
font-family: 'Arima Madurai', sans-serif;

}

.section-main-title {
 font-family: 'Arima Madurai', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: #333;
}

/* Article Box Styling */
.article-box {
    text-align: left;
    height: 100%;
    padding-bottom: 20px;
}


.article-img {
    border-radius: 6px;
    width: 100%;
    height: 200px;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.article-title {
 font-family: 'Arima Madurai', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.4;
    color: #333;
    margin-bottom: 15px;
    cursor: pointer;
}

.article-divider {
    width: 68px;
    height: 6px;
    background-color: #d1f1f4; /* Very light teal */
    margin-bottom: 20px;
    border-radius: 2px;
}

.article-text {
    font-size: 0.9rem;
    color: black;
    line-height: 1.6;
    margin-bottom: 25px;
    font-weight: 100 !important;
    cursor: pointer;
}

/* Circular Arrow Button */
.article-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #d1f1f4;
    color: #5bc6d0;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
}

.article-link-btn:hover {
    background-color: #5bc6d0;
    color: white;
}

.article-link-btn i {
    font-size: 20px;
}

.article-img-wrapper{
  overflow: hidden;           
  border-radius: 6px;  
  cursor: pointer;      
}

.article-img{
  transition: transform 0.4s ease;
}

.article-box:hover .article-img{
  transform: scale(1.15);     
}
/* contact section */
.contact-section {

    padding: 60px 20px;
}

.contact-wrapper {
    
    background-color: #d1f1f4b0 !important;
    padding: 60px 140px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.btn-custom {
    background-color:var(--primary-color) !important;
    color: white !important;
    width: 100% !important;
    
}
/* footer section */
/* Color & Font Styles */
.text-teal { color: #5bc6d0; text-decoration: none; }

.brand-subname {
    color: #5bc6d0;
   font-family: 'Arima Madurai', sans-serif;
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 8px;
}

.brand-address {
    font-family: 'Arima Madurai', sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: #333;
    line-height: 1.6;
}

/* Social Icon Circles */
.footer-socials {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.social-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background-color: #5bc6d0;
    color: white !important;
    border-radius: 50%;
    text-decoration: none;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

.social-circle:hover {
    background-color: #4ab5bf;
}

/* Scroll Up Button */
.scroll-up-btn {
    color: #999;
    font-size: 28px;
    text-decoration: none;
}

.scroll-up-btn:hover {
    color: #5bc6d0;
}

/* Copyright Text */
.copyright-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #bbb;
}
.footer-logo{
     color: var(--secoundary-color) !important;
    font-size: 25px !important;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}
.footer-logo span{
    color: #096e48e8;
}
.teal{
    color: #5bc6d0;
    text-decoration: none !important;
    font-family: 'Arima Madurai', sans-serif;
    font-size: 18px;
}
.footer-copyright{
    border: none;
}
.copyright{
    border: none !important;
}
.back{
    font-size: 40px;
    font-weight: 200;
}

/* slidar */
.testimonials-section {
    position: relative;
    overflow: hidden;
}
.testimonials-section::before {
    content: "";
    position: absolute;
    top: 65%;
    left: -140px;              /* bahar nikal ke cut look */
    transform: translateY(-50%);

    width: 250px;
    height: 300px;

    background-image: url("images/banner.jpeg");
    background-size: cover;
    background-position: center;

    border-radius: 0 200px 200px 0; /* LEFT cut */
    opacity: 0.2;

    z-index: 1;
}
.testimonials-section::after {
    content: "";
    position: absolute;
    top: 65%;
    right: -140px;             /* bahar nikal ke cut look */
    transform: translateY(-50%);

    width: 250px;
    height: 300px;

    background-image: url("images/banner.jpeg");
    background-size: cover;
    background-position: center;

    border-radius: 200px 0 0 200px; /* RIGHT cut */
    opacity: 0.2;

    z-index: 1;
}



/* ========================================
   LARGE TABLET & BELOW (≤992px)
   ======================================== */
@media (max-width: 992px) {
    .help-button {
        font-size: 13px;
        font-weight: 300;
    }
    
      .navbar-collapse {
    background-color:white; /* change color */
    padding: 10px 50px;
    border-radius: 8px;
    
  }
  .btn-buy{
    margin-top: 0px !important;
  }

  .navbar-nav .nav-link {
    color: black !important;
    padding: 10px 0;
  }
    .about-container {
    max-width: 100%;
    padding: 0 20px;
  }

  /* Content side */
  .content-side {
    max-width: 420px;
    padding: 40px 30px 40px 40px;
  }

  .main-name {
    font-size: 38px;
    margin-bottom: 25px;
  }

  .description p {
    font-size: 0.95rem;
  }

  /* Image side */
  .image-side {
    right: 0px;
    top: 12%;
  }

  .image-side img {
    max-width: 360px;
    height: auto;
  }

  .navbar-nav .nav-link:hover {
    color: var(--secoundary-color) !important;
  }
        .paragraph-banner {
            font-size: 13px;
            margin-top: 72px;
        }
            .heading-banner{
                font-size: 40px;
            }
    
    .navbar-nav { gap: 10px; }
    .btn-buy { padding: 12px 20px !important; font-size: 13px !important; margin-top: 10px; }
    .banner { height: auto;  padding-top: 120px; padding-left: 20px; padding-right: 20px; }
    .heading-banner { font-size: 48px !important; top: 8%; left: 5%; }
    .paragraph-banner { margin-top: 100px; }

    /* Banner bottom cards */
    .main-card { position: static; transform: none; width: 100%; left: 0; margin-top: 50px;
    }
    .card-pink{
        
        margin-left: 10px !important;
    }
    .card-orange{
        margin-bottom: 50px;
        margin-left: 10px !important;
    }
    .banner-cards .row > div:first-child { margin-bottom: 50px; text-align: center; }
    .card-teal{
        margin-left: 10px !important;
    }
    
}




/* ========================================
   TABLET & MOBILE (≤768px)
   ======================================== */
@media (max-width: 768px) {
    /* Navbar (keep as is) */
    .banner-text{
        flex-direction: column;
        text-align: center !important;
    }
    .about-main {
    margin: 30px 0 !important;
    position: static;
  }

  /* Container becomes column */
  .about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 0;
    background-color: #f0fafa; /* keep background */
  }

  /* Content side */
  .content-side {
    width: 100%;
    padding: 20px;
    text-align: left;
  }

  .sub-heading {
    font-size: 1.3rem;
  }

  .main-name {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .description p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 15px;
  }

  /* Contact info */
  .contact-info {
    margin-top: 20px;
  }

  .info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .icon {
    font-size: 1.2rem;
    margin-right: 10px;
  }

  /* Image side */
  .image-side {
    width: 100%;
    text-align: center;
    margin-top: 25px;
    position: static; /* remove absolute */
  }

  .image-side img {
    max-width: 85%;
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
  }
    .navbar-nav { text-align: center; }
    .nav-item { justify-content: center; gap: 15px; }

    /* Banner – Text overlay on background image (like desktop) */
    .banner {
        position: relative;
       /* Top padding for navbar space */
        text-align: left; /* Keep text left-aligned like desktop */
    }
      .navbar-collapse {
    background-color:white; /* change color */
    padding: 10px 50px;
    border-radius: 8px;
    
  }

  .navbar-nav .nav-link {
    color: black !important;
    padding: 10px 0;
  }

  .navbar-nav .nav-link:hover {
    color: var(--secoundary-color) !important;
  }

    .banner-row {
        flex-direction: column;
        height: 100%;
    }

    .banner-text {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 0;
        text-align: left; /* Left align text */
        max-width: 600px; /* Optional: limit text width for better look */
    }

    .heading-banner {
        position: static; /* Remove absolute */
        font-size: 25px !important;
        color: white; /* White text for visibility on image */
        text-shadow: 2px 2px 8px rgba(0,0,0,0.7); /* Shadow for readability */
        margin-bottom: 20px;
        margin-top: 20px;
        line-height: 35px;
    }

    .paragraph-banner {
        color: white !important;
        text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
        margin-top: 20px;
        font-size: 12px;
        margin-top: 0px !important;
    }

    .help-button {
        background-color: rgba(84, 198, 155, 0.9);
         margin-bottom: 20px;
         padding: 6px 12px;
    }

    /* Background Image – Full overlay */
    .banner-img {

        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("images/banner.jpeg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 1;
        margin-top: 0 !important;
        
    }
    
.banner-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.65),   /* left dark */
        rgba(0, 0, 0, 0.35),   /* middle */
        rgba(0, 0, 0, 0.05)    /* right light */
    );

    /* Hide the empty column if needed */
    .banner-row > div:last-child {
        /* Optional: hide empty right column */
    }

    /* Rest of your code (services, about, etc.) remains same */
    .custom-card-container { margin-bottom: 60px; }
    .content-card { padding-top: 100px; min-height: auto; }

    /* About section – stack image below text */
    .about-container { flex-direction: column; }
    .content-side { width: 100%; padding: 40px 30px; }
    .image-side { position: static; margin-top: 40px; text-align: center; }
    .image-side img { max-width: 400px; height: 400px; margin: 0 auto; display: block; }

    /* Pricing */
    .price-box { margin-bottom: 40px; }

    /* Testimonials decorative elements */
    .testimonials-section::before,
    .testimonials-section::after { display: none; }

    /* Contact */
    .contact-wrapper { padding: 50px 40px; }
}}
/* form section */
/* ===============================
   TABLET VIEW (760px and below)
   =============================== */

@media (max-width: 760px) {
    .contact-section {
        padding: 60px 15px;
    }

    .contact-wrapper {
        padding: 30px 20px;
    }

  /* CONTACT INFO */
  .contact-info {
    margin-top: 25px;
  }

  .info-item {
    margin-bottom: 12px;
  }

    .display-4 {
        font-size: 2.2rem;
    }
    .service{
        margin-top: 55px !important;
    }

    .form-control {
        padding: 12px 14px;
        font-size: 15px;
    }

    textarea.form-control {
        rows: 6;
    }

    .btn-custom {
        width: 100%;
    }
}

/* ===============================
   MOBILE VIEW (480px and below)
   =============================== */
@media (max-width: 480px) {
    .contact-section {
        padding: 40px 10px;
    }
    .help-button{
        padding: 2px 20px;
        font-size: 12px;
        font-weight: 200;

    }
    .testimonial-title {
        font-size: 22px;
    }
    .testimonial-text{
        font-size: 12px;
    }
    .section-main-title{
        font-size: 22px;
    }
    .brand-address{
        font-size: 15px;
    }
    .brand-subname {
        font-size: 18px;
    }
    .navbar-brand{
        font-size: 20px !important;
    }
   .navbar-toggler{
    font-size: 13px !important;
   }
    .navbar-brand i{
        font-size: 20px;
    }
    .footer-logo{
        font-size: 21px;
    }
    .article-text{
        font-size: 12px;
    }
    .pricing-main-title{
        font-size: 22px;
    }
      .navbar-collapse {
    background-color:white; /* change color */
    padding: 10px 50px;
    border-radius: 8px;
    
  }

  .navbar-nav .nav-link {
    color: black !important;
    padding: 10px 0;
  }

  .navbar-nav .nav-link:hover {
    color: var(--secoundary-color) !important;
  }

.service-h {
    font-size: 25px;
}
.card-text{
    font-size: 11px;
}
.card-title{
    font-size: 22px;
}
.card-list li{
    font-size: 11px;
}
.cta-heading{
    font-size: 22px;
    margin-bottom: 0px !important;
}

.service-p{
    line-height: 23px;
    font-size: 11px;
}
    .contact-wrapper {
        padding: 25px 15px;
    }
    .service{
        margin-top: 50px !important;
    }

    .text-teal {
        font-size: 28px;
    }

    .display-4 {
        font-size: 1.8rem;
        line-height: 1.3;
    }

    .form-control {
        font-size: 14px;
        padding: 10px 12px;
    }

    textarea.form-control {
        rows: 5;
    }

    .btn-custom {
        font-size: 15px;
        padding: 12px;
        width: 100%;
    }
}
/* about section */
@media (max-width: 480px) {

  /* MAIN WRAPPER */
  .about-main {
    position: static;
    margin: 20px 0;
  }

  /* FLEX COLUMN */
  .about-container {
    flex-direction: column;
    max-width: 100%;
  }

  /* CONTENT SIDE */
  .content-side {
    width: 100%;
    padding: 30px 20px;
    text-align: left;
  }

  .main-name {
    font-size: 26px;
    margin-bottom: 20px;
  }
  
.price-list li {
    font-size: 12px !important ;
}
.price-footer-info p {
    font-size: 12px;
}
  .text{
    font-size: 14px;
  }
  .description p {
    font-size: 12px;
  }

  /* IMAGE FIX */
  .image-side {
    position: static;        /* 🔴 MOST IMPORTANT */
    width: 100%;
    margin-top: 20px;
    text-align: center;
  }

  .image-side img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }

  /* CONTACT INFO */
  .contact-info {
    margin-top: 25px;
  }

  .info-item {
    font-size: 14px;
  }
}