body {
     font-family: "DM Sans", sans-serif;
 }

 .logo {
    width:200px;
    height:42px;
 }
.logo img{width:100%;height:100%;object-fit:contain}
 header {
     flex-wrap: wrap;
 }
 .footer-logo{
     width:200px;
}
.footer-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.logo a{color:#000;text-decoration:none;}
 header nav a {
     font-size: 16px;
     color: #404040;
     text-decoration: none;
 }
 .new-drop-down li{margin-bottom:5px;}
 .new-drop-down li:last-child{margin-bottom:0;}
 .outer-ul li:hover .new-drop-down{display:block;}
.outer-ul{display:flex;gap:20px;margin-bottom:0;}
.new-drop-down {
    display: none;
    position: absolute;
    /* width: 100%; */
    background: #fff;
    margin: 0;
    padding:10px 20px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.outer-ul li{list-style:none; cursor:pointer;}
 header nav {
     display: flex;
     gap: 20px;
 }

 .left-part h1 {
     font-size: 60px;
     color: #171717;
     font-weight: bold;
 }

 .main-container {
     padding: 20px;
 }

 .rgt-part {
     height: 618px;
 }

 .feature-img {
     height: 400px;
 }

 .feature-img img {
     height: 100%;
     object-fit: cover;
     width: 100%;
     border-radius: 10px;
 }

 .left-part {
     padding-right: 30px;
 }

 .rgt-part img {
     border-radius: 20px;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .banner-sec {
     margin-top: 25px;
     background-color: #fafafa;
     padding: 50px 0;
 }

 .top-sec-p-banner {
     font-size: 20px;
     color: #404040;
 }

 .btn-cntnr a.shop-now {
     gap: 5px;
     height: 50px;
     font-size: 16px;
     background-color:#b64ea2;
     color: #fff;
     font-weight: bold;
     border-radius: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
     text-decoration: none;
     padding: 0 20px;
 }

 .btn-cntnr a.its-looks {
     padding: 0 20px;
     height: 50px;
     font-size: 16px;
     background-color: #fff;
     color: #000;
     font-weight: bold;
     border-radius: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
     text-decoration: none;
     border: solid 1px #ccc;
 }

 .btn-cntnr {
     gap: 20px;
     margin-top: 30px;
 }

 .feature-sec {
     margin-top: 70px;
 }

 .feature-sec h1 {
     font-size: 36px;
     color: #171717;
     text-align: center;
     font-weight: bold;
 }

 .feature-img-wrap {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 40px;
 }

 .feature-img-outer {
     padding: 1.5rem;
     background-color: rgb(247 245 245);
     border-radius: 10px;
     overflow: hidden;
 }

 .text-sec {
     padding-top: 20px;
 }

 .text-sec h1 {
     color: #171717;
     font-size: 20px;
     text-align: left;
 }

 .text-sec p {
     font-size: 16px;
     color: #404040;
 }

 .feature-img-outer:hover {
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
         0 2px 4px -2px rgba(0, 0, 0, 0.1);
 }

 p.feat-text {
     font-size: 18px;
     color: #404040;
     text-align: center;
     margin-bottom: 50px;
 }

 button.explore-btn {
     background-color: #000;
     font-size: 16px;
     color: #fff;
     border-radius: 10px;
     display: block;
     margin: 50px auto;
     padding: 10px 20px;
     border: 0;
 }

 .testimonials-sec {
     background-color: #f5f5f5;
     padding: 100px 0;
 }

 .testimonials-sec h1 {
     font-size: 36px;
     color: #171717;
     text-align: center;
     font-weight: bold;
 }

 .testimonials-sec p {
     font-size: 18px;
     color: #404040;
     text-align: center;
     margin-top: 10px;
 }

 .rating-sec {
     justify-content: center;
     display: flex;
     gap: 10px;
 }

 .rating-svg svg {
     color: #eab308;
     fill: #eab308;
 }

 .count {
     font-size: 20px;
     color: #171717;
 }

 .test-head-text {
     color: #525252;
     font-size: 16px;
     text-align: center;
     margin-top: 5px;
 }

 .test-box {
     box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     border-radius: 20px;
     background-color: #fff;
     padding: 20px;
 }

 .image-test {
     max-width: 48px;
     height: 48px;
     border-radius: 50px;
     overflow: hidden;
 }

 .name-text label {
     font-size: 16px;
 }

 .name-text .rating-svg svg {
     width: 15px;
 }

 .image-test-outer {
     display: flex;
     gap: 10px;

 }

 p.client-text-new {
     font-size: 16px;
     color: #404040;
     text-align: left;
 }

 p.client-text-another {
     font-size: 14px;
     color: #737373;
     text-align: left;
 }

 .test-box-outer {
     display: flex;
     gap: 30px;
     margin-top: 30px;
 }

 .test-large-image {
     gap: 30px;
     margin-top: 40px;
 }

 .stylist-text {
     color: #404040;
     font-size: 16px;
     font-style: italic;
     margin-top: 20px;
     text-align: center;
 }

 .stylist-name {
     font-size: 14px;
     color: #525252;
     text-align: center;
 }

 .shop-now-text {
     font-size: 16px;
     color: #fff;
     background-color: #000;
     border-radius: 10px;
     padding: 10px 20px;
     display: flex;
     margin: 40px auto 0 auto;
     width: fit-content;
     text-decoration: none;
 }

 .about-img img {
     border-radius: 10px;
 }

 .why-choose-us h1,
 .promo-section h2 {
     color: #1f2937;
     font-size: 36px;
     text-align: center;
     font-weight: bold;
     text-transform: capitalize;
 }

 .why-chose-p-text {
     color: #000;
     font-size: 16px;
     text-align: center;
     margin-bottom: 10px;
     width: 72%;
     margin: auto;
     margin-bottom: 20px;
 }

 .quote-form {
     margin-top: 40px;
     align-items: center;
 }

 .why-choose-us {
     padding-top: 50px;
 }

 .why-choose-us .feature-img-outer {
     padding: 0;
     background-color: #fff;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
 }

 .why-choose-us .text-sec h1 {
     font-size: 20px;
     color: #1f2937;
     text-align: left;
 }

 .why-choose-us .text-sec p {
     color: #000;
     font-size: 16px;
     margin-bottom: 0;
 }

 .why-choose-us .text-sec {
     padding: 20px;
 }

 .why-choose-us .feature-img {
     height: 256px;
 }

 .why-choose-us .feature-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .quote-form label {
     color: #000;
     font-size: 16px;
 }

 .quote-image-left {
     padding-right: 30px;
     overflow: hidden;
 }

 .quote-head {
     font-size: 36px;
     color: #171717;
     text-align: center;
     font-weight: bold;

 }

 .quote-image-left img {
     border-radius: 10px;
 }

 .why-choose-us .feature-img-wrap {
     grid-template-columns: repeat(4, 1fr);
 }

 .why-choose-us .feature-img-outer {
     transition: transform 0.3s ease;
     /* Smooth animation */
 }

 .why-choose-us .feature-img-outer:hover {
     transform: scale(1.05);
     /* Zoom-in effect on hover */
 }

 .shop-col-btn-space {
     margin-top: 50px;
 }

 .faq-sec {
     margin-top: 20px;
 }

 .faq-sec h2 {
     color: #1f2937;
     font-size: 36px;
     text-align: center;
     font-weight: bold;
 }

 .faq-head-text {
     color: #000;
     font-size: 16px;
     text-align: center;
 }

 /*faq sec start*/
 .faq-section {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
     margin: auto;
     padding: 20px;
     align-items: start;
     /* ✅ Fix height issue */
 }

 .text-prom-grid {
     display: grid;
     gap: 20px;
     grid-template-columns: repeat(2, 1fr);
 }

 .feature-img-wrap-text h3 {
     font-size: 20px;
     font-weight: bold;
     text-transform: capitalize;
 }

 .feature-img-wrap-text ul li {
     font-size: 16px;
     color: #000;
 }

 .feature-img-wrap-text p {
     font-size: 16px;
     color: #000;
 }

 .accordion-answer-inner {
     max-height: 200px;
     overflow-y: auto;
 }

 .accordion-question {
     font-weight: bold;
 }

 .faq-item,
 .accordion-item {
     background: white;
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
     cursor: pointer;
     transition: transform 0.2s ease;
     height: auto;
     margin-bottom: 20px;
     /* ✅ Let it grow */
 }

 .faq-item:hover {
     transform: scale(1.02);
 }

 .faq-question {
     font-weight: 600;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 20px;
     color: #1f2937;
 }

 .faq-answer {
     display: none;
     margin-top: 10px;
     color: #000;
     line-height: 1.5;
     font-size: 16px;
 }

 .faq-item.active .faq-answer {
     display: block;
 }

 .faq-item.active .icon {
     transform: rotate(45deg);
     /* + to × */
 }

 .faq-img {
     border-radius: 10px;
     overflow: hidden;
     margin-top: 10px;
     max-width: 100%;
     height: auto;
 }

 .have-question {
     color: #000;
     font-size: 16px;
     text-align: center;
 }

 /*faq sec end*/
 /*order today start*/
 .promo-section {
     display: flex;
     flex-wrap: wrap;
     gap: 40px;
     background: #fff;
     padding: 40px 0;
     border-radius: 12px;
     /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); */

 }

 .promo-image {
     flex: 1 1 45%;
     max-width: 600px;
     border-radius: 12px;
     overflow: hidden;

     transition: transform 0.3s ease-in-out;
 }

 .large-image-test,
 .feature-img {
     transition: transform 0.3s ease-in-out;
 }

 .large-image-test:hover,
 .feature-img:hover {
     transform: scale(1.05);
     /* 5% zoom */
 }

 .promo-image:hover {
     transform: scale(1.05);
     /* 5% zoom */
 }

 .promo-image img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     border-radius: 12px;
 }

 .promo-content {
     flex: 1 1 50%;
     padding: 40px;
     border-radius: 10px;
 }

 .badge {
     display: inline-block;
     background: #fef3c7;
     color: #854d0e;
     font-weight: bold;
     padding: 6px 12px;
     border-radius: 20px;
     font-size: 16px;
     margin-bottom: 20px;
 }

 .promo-content h2 {
     font-size: 27px;
     color: #1f2937;
     margin-bottom: 10px;
     font-weight: 600;
 }

 .promo-content p {
     font-size: 16px;
     color: #000;
     margin-bottom: 15px;
 }

 .features {
     display: flex;
     gap: 20px;
     list-style: none;
     padding: 0;
     margin: 10px 0;
     font-weight: 500;
     color: #000;
     flex-wrap: wrap;
 }

 .stock .title {
     font-weight: bold;
     margin-top: 20px;
     color: #111827;
 }

 .progress-bar {
     background: #e5e7eb;
     height: 8px;
     border-radius: 20px;
     overflow: hidden;
     margin: 8px 0;
 }

 .progress {
     width: 25%;
     height: 100%;
     background-color: #ef4444;
 }

 .stock-left {
     font-size: 14px;
     color: #6b7280;
 }

 .buttons {
     display: flex;
     gap: 12px;
     margin-top: 20px;
 }

 .btn-primary {
     background-color: #000;
     color: #fff;
     padding: 10px 20px;
     font-weight: bold;
     border: none;
     cursor: pointer;
     border-radius: 8px;
 }

 .btn-outline {
     background: transparent;
     border: 2px solid #000;
     color: #000;
     padding: 10px 20px;
     font-weight: bold;
     border-radius: 8px;
     cursor: pointer;
 }

 .btn-outline:hover {
     background: #000;
     color: #fff;
 }

 .purchase-info {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-top: 20px;
     font-size: 14px;
     color: #6b7280;
 }

 .avatar {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid #fff;
     box-shadow: 0 0 0 1px #ccc;
 }

 .shadow-lg {
     box-shadow:
         0 10px 15px -3px rgba(0, 0, 0, 0.1),
         0 4px 6px -4px rgba(0, 0, 0, 0.1);
     background: #fff;
 }

 /*order today end*/
 /*footer sec*/
 .footer {
     background: #fff;
     padding: 60px 40px 20px;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;

 }

 .footer-col {
     flex: 1 1 220px;
     margin: 20px;
 }

 .footer-col h4 {
     margin-bottom: 15px;
     font-size: 18px;
 }

 .service-sec-page .left-part {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-bottom: 30px;
 }

 .footer-col p,
 .footer-col a {
     font-size: 16px;
     color: #000;
     text-decoration: none;
     display: block;
     margin-bottom: 10px;
 }

 .footer-col a:hover {
     color: #000;
 }

 .social-icons {
     margin-top: 20px;
 }

 .social-icons a {
     display: inline-block;
     margin-right: 10px;
     color: #555;
     font-size: 18px;
 }

 .subscribe-box {
     display: flex;
     margin-top: 10px;
 }

 .subscribe-box input {
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 4px 0 0 4px;
     width: 200px;
 }

 .subscribe-box button {
     padding: 10px 16px;
     border: none;
     background: #b64ea2;
     color: #fff;
     border-radius: 0 4px 4px 0;
     cursor: pointer;
 }

 .footer-bottom {
     text-align: center;
     padding: 20px;
     font-size: 14px;
     color: #777;
 }

 .social-icons a svg {
     width: 25px;
     color: #000;
 }

 @media (max-width: 768px) {
     .footer {
         flex-direction: column;
         align-items: flex-start;
     }
 }

 /*footer sec end*/
 /*service section*/
 .benefits {
     display: flex;
     gap: 60px;
     color: #1f2937;
     justify-content: center;
 }

 .benefit {
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 600;
 }

 .icon {
     font-size: 24px;
     color: #9ca3af;
 }

 .benefit svg {
     width: 40px;
     height: 40px;
 }

 .service-sec-top {
     background-color: #E1EBE6;
     padding: 50px 0;
     text-align: center;
 }

 .service-sec-top .left-part h1 {
     font-size: 40px;
     color: #171717;
     font-weight: 600;
 }

 .service-sec-top .btn-cntnr {
     justify-content: center;
     margin-bottom: 30px;
 }

 .contact-banner {
     height: 500px;
     width: 100%;
 }

 .contact-banner img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /*contact page start*/
 .phone-email-wrap {
     margin-bottom: 50px;
 }

 .phone-email-wrap h3 {
     font-weight: 700;
     margin: 0 0 20px;
     padding: 0 40px 10px 0;
     text-transform: uppercase;
     font-size: 16px;
     line-height: 16px;
     color: #343434;
     letter-spacing: 1px;
     border-bottom: solid 1px #e5e5e5;
 }

 .phone {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .phone a,
 .phone p {
     font-size: 14px;
     color: #343434;
 }

 .phone a,
 .phone p {
     font-size: 14px;
     color: #343434;
 }

 p.hear {
     font-size: 16px;
     color: #777;
 }

 .qyote-outer-color {
     background-color: #fafafa;
     padding: 30px 0;
     margin-top: 30px;
 }

 .right-pnl-contact {
     padding-left: 40px;
 }

 button.submit {
     width: 170px;
     height: 40px;
     font-size: 16px;
     color: #fff;
     border-radius: 50px;
     border: 0;
     background-color: #b64ea2;
     text-transform: uppercase;
     margin-top: 20px;
 }

 .right-pnl-contact h3 {
     font-size: 25px;
     color: #343434;
     font-weight: bold;
 }

 .phone-email-wrap {
     margin-bottom: 50px;
 }

 .form-label {
     font-size: 14px;
     color: #666;
 }

 .phone-email-wrap h3 {

     font-weight: 700;
     margin: 0 0 20px;
     padding: 0 40px 10px 0;
     text-transform: uppercase;
     font-size: 16px;
     line-height: 16px;
     color: #343434;
     letter-spacing: 1px;
     border-bottom: solid 1px #e5e5e5;
 }

 .top-banner h1 {
     color: var(--black);
     font-size: 56px;
     font-weight: bold;
     text-align: center;
     width: 100%;
     margin-bottom: 50px;
 }

 .phone {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .right-pnl-contact {
     margin-bottom: 20px;
 }

 .error {
     color: red;
     font-size: 12px
 }

 .top-contact-wrap {
     margin-top: 30px;
 }

 @media(min-width:767px) {
     .humburger {
         display: none;
     }
 }

 @media(max-width:767px) {
     .promo-image{flex: 1 1 100%;}
     .new-drop-down{position:static;}
     .new-drop-down li {
    margin-bottom: 5px;
    border-bottom: solid 1px #ccc;
    padding: 5px 0;
}
     .outer-ul{width:100%;padding:15px;}
     .new-drop-down{
    
    
    padding: 15px;
}
     .outer-ul {

    flex-direction: column;
}
     .testimonials-sec h1 {
         font-size: 25px;
     }

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

     .promo-section {
         gap: 10px;
     }

     .text-prom-grid {
         grid-template-columns: repeat(1, 1fr);
     }

     .why-choose-us h1,
     .promo-section h2 {
         font-size: 25px;
     }

     .right-pnl-contact {
         padding-left: 0;
     }

     .mobile-nav {
         display: none;
     }

     header nav {
         display: flex;
         gap: 20px;
         justify-content: center;
         flex-wrap: wrap;
         align-items: center;
         margin-top: 20px;
     }
 }

 .test-large-image .large-image-test {
     height: 350px;
 }

 .test-large-image .large-image-test img {
     height: 100%;
     object-fit: cover;
     width: 100%;
     border-radius: 10px;
 }

 /*contact page end*/

 @media(max-width:768px) {
     .mobile-nav {
         width: 100%;
         box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
         padding: 10px;
         position: absolute;
         left: 0;
         right: 0;
         background: #fff;
         top: 68px;
     }

     header nav {
         display: flex;
         gap: 20px;
         flex-wrap: wrap;
         margin-top: 20px;
         flex-direction: column;
         width: 100%;
         align-items: flex-start;
         justify-content: flex-start;
     }

     .qyote-outer-color {
         padding: 20px 0;
     }

     .footer {
         padding: 0;
     }

     .social-icons a {
         margin-bottom: 0;
     }

     .footer-col {
         flex: 0;
         margin: 10px;
     }

     .quote-image-left {
         padding-right: 0;
     }

     p.feat-text,
     .testimonials-sec p,
     .test-head-text,
     .count {
         font-size: 14px;
     }

     .benefits {
         flex-wrap: wrap;
     }

     .faq-question {
         font-size: 14px;
         font-weight: bold;
     }

     .faq-answer {
         font-size: 14px;
     }

     .faq-section {
         grid-template-columns: repeat(1, 1fr);
     }

     .why-choose-us h1 {
         font-size: 25px;
     }

     .why-chose-p-text {
         font-size: 14px;
     }

     .shop-now-text {
         font-size: 14px;
         padding: 10px;
     }

     .test-box-outer,
     .test-large-image {
         flex-wrap: wrap;
     }

     .feature-img {
         height: 300px;
     }

     .feature-img-wrap,
     .why-choose-us .feature-img-wrap {

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

     .features li {
         font-size: 14px;
     }

     .promo-content {
         padding: 20px;
     }

     .promo-content p {
         font-size: 15px;
     }

     .promo-section {
         flex-wrap: wrap;
     }

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

     .rgt-part {
         height: auto;
     }

     .left-part h1 {
         font-size: 30px;
     }

     .left-part {
         padding-right: 0;
     }

     .banner-sec {
         padding: 20px 0;
     }

     .btn-cntnr {
         margin-bottom: 30px;
     }

     .top-sec-p-banner {
         font-size: 15px;
     }

     .btn-cntnr svg {
         width: 15px;
     }

     .btn-cntnr a.shop-now,
     .btn-cntnr a.its-looks {
         font-size: 12px;
         padding: 0 10px;
     }

     .btn-cntnr {
         justify-content: center;
     }
 }