* {
   margin: 0;
   padding: 0;
   box-sizing: boarder-box;
 }

 body {
   font-family: 'Inter', sans-serif;
   background: #0a0a0a;
 }
header{
    position: fixed;
    width: 100%;
    z-index: 9999;
     background: #0a0a0a;
}
 /* Navbar styling */
 .navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #111;
   padding: 10px 20px;
   color: white;
   position: relative;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Inter', sans-serif;
 }

 .container {
   max-width: 90%;
   margin: auto;
   left: 0px;
   right: 0px;
   display: block;
 }

 .logo {
   display: flex;
   align-items: center;
   font-size: 20px;
   font-weight: bold;
 }

 .menu {
   display: flex;
   list-style: none;
 }

 .menu li {
   position: relative;
   margin-left: 20px;
 }

 .menu a {
   text-decoration: none;
   color: white;
   font-weight: 500;
   padding: 8px;
   display: block;
   z-index: 9;
 }

 /* Dropdown */
 .dropdown {
   display: none;
   position: absolute;
   top: 30px;
   left: 0;
   background: #222;
   list-style: none;
   padding: 10px 0;
   min-width: 180px;
   border-radius: 5px;
 }

 .dropdown li {
   margin: 0;
 }

 .dropdown a {
   padding: 10px 15px;
   color: white;
   font-weight: normal;
 }

 .menu li:hover .dropdown {
   display: block;
   /* Show on hover (desktop) */
 }

 /* Phone call section */
 .call {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 a {
   text-decoration: none;
 }

 .call {
   color: #fff;
 }

 .call-icon {
   background: red;
   color: white;
   border-radius: 50%;
   padding: 10px;
   font-size: 16px;
 }

 /* Hamburger menu button */
 .hamburger {
   display: none;
   flex-direction: column;
   cursor: pointer;
 }

 .hamburger span {
   height: 3px;
   width: 25px;
   background: white;
   margin: 4px 0;
   border-radius: 5px;
   transition: 0.3s;
 }

 /* Responsive */
 @media (max-width: 991px) {
   .menu {
     display: none;
     flex-direction: column;
     position: absolute;
     top: 60px;
     left: 0;
     width: 100%;
     background: #111;
     padding: 15px 0;
   }

   .menu li {
     margin: 20px 20;
     text-align: left;
   }

   .menu .dropdown {
     position: static;
     background: #222;
     display: none;
     margin-top: 5px;
   }

   .menu .dropdown li {
     text-align: left;
   }

   .menu li.active .dropdown {
     display: block;
     /* Show dropdown on click in mobile */
   }

   .hamburger {
     display: flex;
   }

   .menu.active {
     display: flex;
     z-index: 999999;
     width: 100%;
     text-align: left;
   }

   .call {
     display: none;
     /* hide call section in mobile */
   }
 }

 /* <----------banner------------> */
 .banner {
   background: url(http://smadivine.com/wp-content/uploads/2026/01/banner.jpg) no-repeat center center/cover;
   color: #fff;
   text-align: center;
   padding: 20px 20px 0px 20px;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
 }

 /* Overlay */
 .banner::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(17, 37, 168, 0.6);
   /* blue overlay */
   background: linear-gradient(135deg, rgba(17, 37, 168, 0.7), rgba(245, 45, 45, 0.7));
   z-index: 0;
 }

 .banner-content {
   position: relative;
   /* z-index: 1; */
   max-width: 900px;
   margin: auto;
 }

 .banner h5 {
   font-size: 16px;
   font-weight: 500;
   margin-bottom: 15px;
   display: inline-block;
   background: rgba(255, 255, 255, 0.1);
   padding: 6px 14px;
   border-radius: 20px;
 }

 .banner h1 {
   font-size: 50px;
   font-weight: 700;
   margin-bottom: 20px;
 }

 .banner p {
   font-size: 18px;
   margin-bottom: 30px;
   color: #e4e4e4;
 }

 .cta-btn {
   background: #f52d2d;
   color: #fff;
   padding: 12px 28px;
   font-size: 16px;
   font-weight: 500;
   text-decoration: none;
   border-radius: 6px;
   display: inline-block;
   transition: 0.3s;
 }

 .banner .btn:hover {
   background: #d32323;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .banner {
     padding: 60px 20px;
   }

   .banner h1 {
     font-size: 32px;
   }

   .banner p {
     font-size: 16px;
   }

   .banner h5 {
     font-size: 14px;
   }
 }

 @media (max-width: 480px) {
   .banner h1 {
     font-size: 26px;
   }

   .banner p {
     font-size: 14px;
   }
 }

 @media (min-width:1200px) {
   .banner {
     height: 100vh;
   }
 }

 /* <------about------> */
 .about-sec {
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
   max-width: 90%;
   margin: auto;
   padding: 90px 40px 140px 40px;
   align-items: center;

 }

 /* 
 .about-images {
   flex: 1 1 45%;
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(2, 1fr);
   position: relative;

 } */
 /* 
 .about-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 } */

 .about-image1 {
   border-radius: 20px;
   overflow: hidden;
   position: relative;

 }

 .about-images {
   position: relative;
 }

 /* .about-image3 img {
   box-shadow: 0px 0px 10px #ccc;
 } */

 .about-image1 img {
   border-radius: 20px 20px 20px 20px;
   position: relative;
   width: 70%;
   z-index: 7;
 }

 .about-image1::after {
   position: absolute;
   content: '';
   background-image: url(../image/about-icon1.png);
   background-repeat: no-repeat;
   width: 220px;
   height: 220px;
   top: 7%;
   right: 100px;
   border-radius: 20px;
   animation: upDown 2s ease-in-out infinite;
 }

 @keyframes upDown {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-10px);
   }
 }

 .about-image2 {
   position: absolute;
   bottom: -50px;
   right: -40px;
   z-index: 99;
 }

 .about-image2 img {
   width: 80%;
   border: 5px solid #f52d2d;
 }

 /* .about-image3 img {
   border-radius: 20px 20px 80px 20px;
 } */

 .abouttext {
   flex: 1 1 45%;
   padding-left: 30px;
 }

 .ourtitl {
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 12px;
   color: #fff;
   margin-bottom: 0.5rem;
   font-weight: 300;
 }

 .mainsubtitle {
   font-size: 35px;
   color: #fff;
   margin-bottom: 1rem;
    font-weight: 500;
    margin-bottom: 30px;

 }

 .abouttext p {
   font-size: 1rem;
   line-height: 1.6;
   margin-bottom: 2rem;
   color: #fff;
 }

 .d-flex {
   display: flex;
 }

 .about-subtitl {
   font-size: 25px;
   color: #fff;
   padding: 5px 0px 10px 0px;
 }

 .about-features ul {
   padding-left: 20px;
   margin-bottom: 15px;
 }

 .about-features ul li {
   padding: 3px;
   list-style-type: disc;
   color: #fff;
 }


 @media (max-width: 768px) {
   .about-sec {
     flex-direction: column;
   }

   .about-features {
     grid-template-columns: repeat(2, 1fr);
   }
 }


 /* <-------service-------------> */

 /* <-----------health beauty---------------> */
 .health-beauty.primary-wrapper {
   padding: 100px 0px;
   position: relative;
   background-color: #111111;
 }

 .health-beauty .content-grid {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   gap: 40px;
   align-items: center;
   position: relative;
 }

 .health-beauty .services-left,
 .health-beauty .services-right {
   display: flex;
   flex-direction: column;
   gap: 50px;
 }

 .health-beauty .wellness-card {
   padding: 5px;
   border-radius: 15px;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
 }

 .services-left .wellness-card {
   padding-right: 70px;
   text-align: right;
 }

 .services-right .wellness-card {
   padding-left: 70px;
   text-align: left;
 }

 .health-beauty .wellness-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(44, 95, 45, 0.1), transparent);
   transition: left 0.5s ease;
 }

 .health-beauty .wellness-card:hover::before {
   left: 100%;
 }

 .services-right .wellness-card .card-icon,
 .services-left .wellness-card .card-icon {
   overflow: hidden;
   display: inline-block;
   position: absolute;
   width: 60px;
   height: 60px;
   background-size: cover;
   background-position: center;
   border-radius: 100%;
 }

 .services-right .wellness-card .card-icon {
   left: 0px;
 }

 .services-left .wellness-card .card-icon {
   right: 0px;
 }

 .health-beauty .card-title {
   font-size: 1.3rem;
   color: #f52d2d;
   font-weight: 600;
   margin-bottom: 10px;
 }

 .health-beauty .card-text {
   color: #fff;
   font-size: 0.95rem;
   line-height: 1.6;
 }

 .health-beauty .center-display {
   position: relative;
   width: 400px;
   height: 400px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .health-beauty .main-image {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   object-fit: cover;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
   transition: all 0.5s ease;
   border: 8px solid #fff;
 }

 .text-center {
   text-align: center;
 }

 .services-right .wellness-card .card-icon,
 .services-left .wellness-card .card-icon {
   position: absolute;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background-size: cover;
   background-position: center;
   overflow: hidden;
 }

 .services-right .wellness-card .card-icon {
   left: 0;
 }

 .services-left .wellness-card .card-icon {
   right: 0;
 }

 @media(max-width:767px) {

   .health-beauty .content-grid {
     grid-template-columns: 1fr;
     gap: 20px;
   }

   .hours-box {
     text-align: left;
     padding: 30px 20px;
   }

 }

 @media(max-width:500px) {
   .health-beauty .center-display {
     width: auto;
     height: auto;
   }

   .health-beauty .main-image {
     width: 300px;
     height: 300px;
   }

 }


 /* <----faq------------> */
 .faq-section {
   padding: 60px 20px;
 }

 .faq-item {
   border: 1px solid #f52d2d;
   border-radius: 8px;
   margin-bottom: 15px;
   overflow: hidden;
 }

 .faq-question {
   transition: all 0.5s ease-in;

   text-align: left;
   padding: 15px 20px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   background: #fff;
   border: none;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #f52d2d;
 }
 .faq-item ul{padding-left: 20px;}


 .faq-item.active .faq-question {
   background: #f52d2d;
   color: #fff;
 }

 .faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease, padding 0.3s ease;
   background: #fff;
   padding: 0 20px;
 }

 .faq-answer p {
   margin: 15px 0;
   color: #444;
 }

 .faq-item.active .faq-answer {
   max-height: 200px;
   padding: 0 20px 15px;
 }

 .faq-question .icon::before {
   content: "+";
   font-size: 20px;
 }


 .faq-item.active .faq-question .icon::before {
   content: "−";
 }

 /* Footer - Redesigned */
 footer {
   background: #111;
   color: #d1d1d1;
   padding: 3rem 0 1rem;
   font-family: 'Inter', sans-serif;
 }

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

 .footer-content {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 2rem;
   margin-bottom: 2rem;
 }

 .footer-column h3 {
   font-size: 1.5rem;
   margin-bottom: 1.5rem;
   color: var(--accent-pink);
   font-family: 'Belleza', sans-serif;
 }

 .footer-column p {
   margin-bottom: 1rem;
   line-height: 1.6;
 }

 .footer-links {
   list-style: none;
 }

 .footer-links li {
   margin-bottom: 0.75rem;
 }

 .footer-links a {
   color: #d1d1d1;
   text-decoration: none;
   transition: var(--transition);
 }

 .footer-links a:hover {
   color: var(--accent-pink);
   padding-left: 5px;
 }

 .footer-sub-links {
   margin-top: 1rem;
 }

 .footer-sub-links h4 {
   font-size: 1.1rem;
   margin-bottom: 0.75rem;
   color: var(--white);
   font-family: 'Poppins', sans-serif;
 }

 .footer-sub-links ul {
   list-style: none;
 }

 .footer-sub-links ul li {
   margin-bottom: 0.5rem;
 }

 .footer-sub-links ul li a {
   color: #d1d1d1;
   text-decoration: none;
   transition: var(--transition);
   font-size: 0.95rem;
 }

 .footer-sub-links ul li a:hover {
   color: var(--accent-pink);
 }

 .contact-item-footer {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
 margin-bottom: 5px;
 }

 .contact-item-footer i {
   color: var(--accent-pink);
   font-size: 1.2rem;
   margin-top: 0.2rem;
 }

 .footer-bottom {
   border-top: 1px solid #444;
   padding-top: 1.5rem;
   margin-top: 2rem;
   text-align: center;
 }

 .footer-bottom p {
   margin-bottom: 0.5rem;
 }

 .footer-bottom a {
   color: var(--accent-pink);
   text-decoration: none;
   transition: var(--transition);
 }

 .footer-bottom a:hover {
   text-decoration: underline;
 }

 .social-links {
   display: flex;
   gap: 1rem;
   margin-top: 1.5rem;
 }

 .social-links a {
   color: #d1d1d1;
   font-size: 1.2rem;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   transition: var(--transition);
 }

 .social-links a:hover {
   color: var(--white);
   background: var(--accent-pink);
   transform: translateY(-3px);
 }
.footer-column a{color: #fff;}

 /* <-----------responsive-----------> */
 @media (max-width:1180px) {
   .about-images {
     flex: 1 1 45%;
     padding-left: 0px;
   }

   .health-beauty .center-display {
     width: 300px;
     height: 300px;
   }

 }


 @media (max-width:767px) {
   .footer-content {
     grid-template-columns: 1fr;
     text-align: center;
   }

   .footer-column {
     margin-bottom: 2rem;
   }

   .footer-sub-links {
     margin-top: 1.5rem;
   }

   .contact-item-footer {
     justify-content: center;
   }

   .about-sec {
     max-width: 95%;

     padding: 70px 0px 70px 0px;

   }

   .services-left .wellness-card {
     padding-right: 0px;
     text-align: left;
     padding-left: 70px;
   }

   .about-image1 img {
     width: 100%;

   }

   .about-image1::after {
     display: none;
   }

   .about-image2 {
     position: absolute;
     bottom: -30px;
     right: -80px;
     z-index: 99;
   }

   .about-image2 img {
     width: 70%;
     border: 5px solid #f52d2d;
   }

   .services-left .wellness-card .card-icon {
     left: 0;
   }

   .mainsubtitle {
     font-size: 25px;
   }
 }


/* <---------contact----> */
 .contact-section {
   display: flex;
   margin: 80px 0px;
 }
 .emaillink{font-size: 18px;}
 .emaillink a{color: #f52d2d;font-weight: 400;}
.contact-section .cta-btn{margin: 0px 10px;}
 .contact-form-container,
 .contact-image-container {
   width: 50%;
 }

 .contact-image-container img {
   width:100%;
 }

 .contact-form-container {
   flex: 1;
   background-color: #2c3e50;
   color: white;
   padding: 60px 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

.form-group-flex{display: flex;flex-wrap: wrap;}
.form-group-flex .form-group{width: calc(50% - 20px);margin: 10px ;}
 .contact-info {
   padding: 20px;
   background-color: rgba(0, 0, 0, 0.6);
   color: white;
   width: 100%;
 }

 /* h1 {
   font-size: 2.5rem;
   margin-bottom: 10px;
   font-weight: 700;
 }

 h2 {
   font-size: 1.2rem;
   margin-bottom: 30px;
   font-weight: 400;
   opacity: 0.8;
 } */

 .form-group {
   margin-bottom: 10px;
 }

 input,
 textarea {
   width: 100%;
   padding: 12px 15px;
   background-color: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 4px;
   color: white;
   font-size: 1rem;
 }

 input::placeholder,
 textarea::placeholder {
   color: rgba(255, 255, 255, 0.6);
 }

 textarea {
   min-height: 80px;
   resize: vertical;margin: 10px;
   width: 96%;
 }

 .submit-btn {
   background-color: #e74c3c;
   color: white;
   border: none;
   padding: 15px 30px;
   font-size: 1rem;
   font-weight: 600;
   border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.3s;
   margin-top: 10px;
   width: 100%;
 }

 .submit-btn:hover {
   background-color: #c0392b;
 }

 .phone-number {
   font-size: 1.2rem;
   font-weight: 600;
 }

 /* Mobile Responsiveness */
 @media (max-width:991px) {
  .contact-image-container img {
    width: 90%;
    height: 300px;
    object-fit: cover;
}
 }
 @media (max-width: 768px) {
   .contact-section {
     flex-direction: column;
   }

   .contact-form-container {
     padding: 40px 20px;
   }

   .contact-image-container {
     min-height: 300px;
   }
 }

 @media (max-width: 480px) {
   .contact-form-container {
     padding: 30px 15px;
   }
.contact-form-container, .contact-image-container {
    width: 100%;
}
    .contact-image-container img {
        width: 100%;
        height: auto;
        object-fit: cover;
        margin-top: 20px;
    }

   .contact-image-container {
     min-height: 250px;
   }
 }