* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;

}

.linearcolor {
    background: linear-gradient(to right, #FF5BD1, #33E7FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

img {
    transition: all .2s ease;
}

img:hover {
    transform: scale(1.04);
}

/* header */
/* navbar */

.navbar-nav .nav-link {
    color: black;
    text-decoration: none;
    font-size: 16px;
    position: relative;
    padding: 8px;
}

.navbar .nav-item .nav-link {
    color: black;
}

.navbar .dropdown-menu {
    display: none;
    border-radius: 7px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    width: fit-content;
    transition: all .2s ease;

}

.navbar .dropdown .dropdown-menu::before{
    content: "";
    bottom: 100%;
    left: 16.5%;
    border-top: 1px solid #fffdfd;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 14px solid black;
    position: absolute;

}

.navbar .dropdown-menu.show {
    display: block;
}

.navbar .dropdown-menu a {
    padding: 9px 15px;
    font-weight: 400;
    transition: all .2s ease;
}

.navbar .dropdown-menu a:hover {
    background-color: transparent;
    color: #635BFF;
    margin-left: 3%;
}

/* Hover functionality for dropdown */
.nav-item:hover .dropdown-menu {
    display: block;
    width: fit-content;
}


.navbar-nav .nav-link:hover {
    color: #635BFF;
    /* Optional: Change text color on hover */
}

/* Underline Effect for Desktop */
.navbar-nav .navlink::before {
    content: '';
    position: absolute;
    width: 100%;
    /* Full width underline on larger screens */
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #635BFF;
    /* Color of the underline */
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out;
}

.navbar-nav .navlink:hover::before {
    visibility: visible;
    transform: scaleX(1);
}

.navbar .dropdown-menu .bi-chevron-compact-down {
    display: none;
}

/* Nav-animated-icon */
.settings-icon {
    width: 20px;
    height: 20px;
    position: relative;
    cursor: pointer;
    border-color: transparent;
}

.settings-icon span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: black;
    border-radius: 3px;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

.settings-icon span:nth-child(1) {
    top: 0;
}

.settings-icon span:nth-child(2) {
    top: calc(50% - 3px);
}

.settings-icon span:nth-child(3) {
    top: 100%;
    transform: translateY(-100%);
}

.settings-icon.active span:nth-child(1) {
    transform: rotate(45deg);
    top: calc(50% - 3px);
}

.settings-icon.active span:nth-child(2) {
    opacity: 0;
}

.settings-icon.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: calc(50% - 3px);
}

/* Search Box */
.navbar .search_box .src_prdt_btn {
    border-radius: 0%;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 0% 6.6%;
    border: none;
    background-color: #635BFF;
}

.navbar .search_box input {
    padding-right: 85px;
    font-size: small;
    border-radius: 0%;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.navbar-nav .product_div li a{
    font-size: 15px;
}
/* Responsive adjustments */
@media (max-width: 992px) {
    .navbar {
        transition: all .3s ease;
        width: 100%;
    }
    .navbar .dropdown-menu::before{
        display: none;

    }

    .navbar .dropdown-menu {
        box-shadow: none;
        border-radius: 0;
        transition: all .2s ease;
        width: 100%;
    }

    .navbar .nav-item:hover .dropdown-menu {
        display: block;
        width: 100%;
    }


    .navbar .dropdown-menu .category {
        transition: all .2x ease-in;
    }

    .navbar .dropdown-menu .category_list {
        transition: all .2x ease-in;
        border-bottom: .2px solid rgba(128, 128, 128, 0.466);
    }

    .navbar .dropdown-menu .bi-chevron-compact-down {
        display: block;
    }

    .navbar .product_toggle_Button {
        display: block;
        cursor: pointer;
        transition: all .2s linear;
    }

    .navbar .product_div {
        transition: all .2s linear;
    }

    .navbar .product_hide {
        display: none;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all .2x ease-in;
    }

    .navbar .product_show {
        display: block;
        max-height: 1000px;
        opacity: 1;
        transition: all .2x ease-in;
    }

    .navbar .dropdown-menu a {
        padding: 10px 15px;
    }

    .navbar .dropdown .dropdown-menu .product_div li::before {
        content: '';
        position: absolute;
        width: 1%;
        /* Full width underline on larger screens */
        height: 35px;
        top: 10;
        left: 0;
        background-color: #635BFF;
        /* Color of the underline */
        visibility: hidden;
        transform: scaleX(0);
        transition: all 0.3s ease-in-out;
    }

    .navbar .dropdown .dropdown-menu .product_div li:hover::before {
        visibility: visible;
        transform: scaleX(1);
    }


}

/* Responsive Underline Effect for smaller screens */
@media (max-width: 768px) {
    .navbar-nav .nav-link::before {
        width: 20% !important;
        /* Adjust underline width on medium screens */
    }
}

@media (max-width: 576px) {
    .navbar-nav .nav-link::before {
        width: 25% !important;
        /* Adjust underline width on smaller screens */
    }
}

/* navbar */
/* header */

/* herobanner */
.banner_division .hero_banner {
    padding: 6% 0;
    left: 10%;
}

.banner_division .caption h2 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: left;
    width: 80%;
}

.banner_division .caption p {
    font-size: .9rem;
    margin-bottom: 1rem;
    width: 80%;
    color: #c8c8c8;
}

.banner_division .hero_banner .banner_btn .btn {
    padding: 0.5rem 1.5rem;
    font-size: 13px;
    background: radial-gradient(86.8% 325.5% at 8% 0%, #D446F1 0%, #9A35EB 100%);
    padding-left: 2.5%;
    padding-right: 2%;
    width: fit-content;
}

.banner_division .hero_banner .banner_btn .btn:hover {
    padding-right: 2%;
}

.banner_division .hero_banner .banner_btn .btn i {
    visibility: hidden;
    transition: all .2s linear;
}

.banner_division .hero_banner .banner_btn .btn:hover i {
    visibility: visible;
    margin-left: 12px;
    padding-top: 1px;
    font-weight: bolder;
}

.banner_division h2 #banner_span {
    background: linear-gradient(to right, #FF5BD1, #33E7FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.banner_division .hero_banner .banner_btn .arrows .arrow_div {
    color: black;
    background-color: #ffffffc5;
    border-radius:30px;
    height: 56px;
    width: 56px;
    vertical-align: middle;
text-align: center;


}

.banner_division .hero_banner .banner_btn .arrows .arrow_div:hover {
    background-color: #ffffff;
}

.banner_division .hero_banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 4% 0;
    background-image: linear-gradient(to right,rgba(0, 0, 0, 0.702),rgba(0, 0, 0, 0.702));
    z-index: 2;
    outline: none;
    height: 500px;
}

.banner_division .carousel-inner {
    height: 500px;
}

.banner_division .carousel-inner .carousel-item img{
    object-fit: cover;
    height:500px;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

@media screen and (max-width:1300px) {

    .navbar .search_box input {
        /*width: 55%;
        padding-right: 15px;*/
    }

  
    .banner_division .carousel-inner {
        height: 60vh;
    }
}


@media screen and (max-width:992px) {

    .navbar .search_box input {
        width: 55%;
        padding-right: 15px;
    }

    .banner_division .carousel-inner {
        height: 54.5vh;
    }
}

@media screen and (max-width:768px) {


    .banner_division .caption h2 {
        font-size: 2.3rem;
        width: 83%;

    }

    .banner_division .carousel-inner {
        height: 52.5vh;
    }
}


@media screen and (max-width:576px) {

    .banner_division .carousel-inner {
        height: 53vh;
    }
    
.banner_division .hero_banner .banner_btn .arrows .arrow_div {
height: 46px;
width: 46px;
}
}


@media screen and (max-width:506px) {
    .banner_division .caption h2 {
        font-size: 2rem;
        width: 89%;

    }

    .banner_division .carousel-inner {
        height: 380px;
    }
    .banner_division .hero_banner .banner_btn .arrows .arrow_div {
        color: black;
        background-color: #ffffffc5;
        border-radius:30px;
    height: 42px;
    width: 42px;
    }
    .banner_division .hero_banner {
        height: 380px;
       
    }
}
/* herobanner */

/* banner2 */
.banner2 {
    background-color: #FFE9D9;

 
}

.banner2 h2 {
    font-size: 2.1rem;
    color: #000000;
}

.banner2 p {
    font-size: 13px;
    color: #474747;
}

.banner2 a {
    font-size: 14px;
}
/* banner2 */

/* banner3 */
.banner3 {
    background-color: #ffffff;
}

.banner3 h2 {
    font-size: 2.1rem;
    color: #000000;
}

.banner3 p {
    font-size: 13px;
    color: #474747;
}

.banner3 a {
    font-size: 14px;
}
/* banner3 */

/* banner4 */
.banner4 {
    background-color: #FEFFCF;
}

.banner4 h2 {
    font-size: 2.1rem;
    color: #000000;
}

.banner4 p {
    font-size: 13px;
    color: #474747;
}

.banner4 a {
    font-size: 14px;
}
/* banner4 */

/* testimonial */
.testimonial {
    padding: 7% 0;
    background-image: url(assets/img/testimonial/testimonial_bgimg.png);
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
  }
  
  .testimonial h2{
    background: linear-gradient(to right, #D446F1, #9A35EB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

  }
  
  .testimonial .slide-container {
    max-width: 1120px;
    width: 100%;
    padding: 40px auto;
  }
  
  .testimonial .slide-content {
    margin: 0 -45px;
    padding: 0 135px;
    border-radius: 25px;
  }
  
  .testimonial .image-content,
  .card-content {
    padding: 10px 14px;
  }
  
  .testimonial .image-content {
    position: relative;
    row-gap: 5px;
    padding: 25px 0;
  }
  
  .testimonial .cardbox {
    border-radius: 20px;
    background-color: white;
    transition: all .2s linear;
  
  }
  
  .testimonial .cardbox:hover {
    background-color: rgb(12, 12, 12);
    color: white;
  }
  
  .testimonial .cardbox:hover p {
    color: white;
  }
  
  .testimonial .cardbox:hover .card-image {
    transform: scale(1.09);
  }

  .testimonial .card-image {
    width: 70%;
    height: 90%;
  }
  
  .testimonial .description {
    font-size: 14px;
    color: #707070;
  }
  
  .testimonial .swiper-navBtn::before,
  .swiper-navBtn::after {
    font-size: 15px;
  }
  
  .testimonial .swiper-button-next,
  .swiper-button-prev {
    color: #000;
    width: 50px;
    height: 50px;
    background: rgb(255, 255, 255);
    border-radius: 50%;
    font-size: 24px;
    z-index: 10;
    transition: all .2s linear;
  }
  
  
  .testimonial .swiper-button-next:hover,
  .swiper-button-prev:hover {
    color: #000000;
    background: rgb(249, 209, 209);
    transform: scale(1.1);
  }
  
  
  .testimonial .swiper-pagination-bullet {
    background-color: rgba(83, 83, 83, 0.582);
    ;
    opacity: 1;
  }
  
  .testimonial .cardbox:hover .swiper-pagination-bullet-active {
    background-color: white;
  }
  
  .testimonial .swiper-pagination-bullet-active {
    background-color: rgb(132, 132, 132);
  }
  
  @media screen and (max-width: 768px) {
    .testimonial .slide-content {
      margin: 0 50px;
      padding: 0 35px;
    }
  }
/* testimonial */

/* blog */
.blog_section .blog {
    gap: 1rem;

}

.blog_section .card {
    width: 22rem;
    height: auto;
    background: #fff;
    border-radius: .6rem;
    padding: .8rem;
    overflow: hidden;
    position: relative;
}

.blog_section .card:hover {
    background: linear-gradient(to right, #7904c2,#f71cb9);
    box-shadow: 2px 3px 3px 3px rgba(255, 254, 254, 0.61);
    border: none;
}
.blog_section .card:hover .blogimg{
    transform: scale(1.04);
    border-radius: 1px;
}
.blog_section .card:hover .blog_profile_img{
    transform: scale(1.06);
}

.blog_section .card-img-holder {
    width: 100%;
    height: auto;
    position: relative;
}

.blog_section .card-img-holder img {
    width: 100%;
    height: auto;
    max-height: 15rem;
    object-fit: cover;
    border-radius: .6rem;
}

.blog_section .cardbox {
    background: #4B6BFB0D;
    color: #4B6BFB;
    width: fit-content;
    font-size: 11px;
    border-radius: 6px;
    padding: 2px 0;
}

.blog_section .card:hover .cardbox {
    background: #ffffff;
    color:#7904c2;
    width: fit-content;
    font-size: 11px;
    border-radius: 6px;
    padding: 2px 0;
}

.blog_section .card:hover .option span{
    color: white;
    }

.blog_section .blog-title {
    color: black;
    font-size: 1.3rem;
}

.blog_section .description {
    color: black;
    font-size: .1rem;
    cursor: pointer;
}

.blog_section  .card:hover .blog-title{
    color: rgb(255, 255, 255);
}

.blog_section .card:hover .options span {
    font-size: 14px;
    color: #fcfcfc;
}

.blog_section .btn {
    font-size: .8rem;
    padding: .7rem 1rem;
    border-radius: .5rem;
    background: white;
    border: 1px solid #696a75d8;
    color: #696A75;
    cursor: pointer;
}

.blog_section .btn:hover {
    background: #0d6efd;
    border: 1px solid #0d6efd;
    color: white;
}
/* blog */


/* footer */
footer {
    background-color: black;
}

footer p {
    color: #cfcfcf;
    cursor: pointer;

}

footer i {
    color: #cfcfcf;
    transition: all .2s linear;
}

footer i:hover {
    color: white;
    transform: scale(1.1);
}

footer span {
    color: #cfcfcf;
    cursor: pointer;

}

footer span:hover {
    color: white;
    transform: scale(1.1);
}

/* footer */



/* hero product image*/
.product_sw {
    background-image: url(assets/img/hero_banner/sanitarywarebgg.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 60vh;
}

.product_sw_link {
    /* padding-left: 150px; */
    font-weight: bold;
    font-size: larger;
}

.product_sw_link ul {
    text-align: center;
}

.product_sw_link ul li a {
    text-align: center;
    color: white;
}

.shop-area,
#pro {
    background-color: #F4F3FC;
    ;
}

#bgw {
    background-color: rgb(255, 255, 255);
}

.bp {

    border-radius: 30px;

}

.pro-pagination-style ul li a.activea {
    background-color: rgb(0, 191, 255);
    color: white;
}

.pro-pagination-style ul li a.activea:hover {
    background-color: rgb(0, 115, 255);
}

.pro-pagination-style ul li #pg {
    background-color: white;
    color: rgb(167, 167, 167);
}

.pro-pagination-style ul li #pg:hover {
    background-color: rgb(0, 115, 255);
    color: white;
}

.sli-arrow-up {
    background-color: rgb(0, 191, 255);
}

.sli-arrow-up:hover {
    background-color: rgb(0, 115, 255) !important;
}

#scrollup {
    background-color: rgb(0, 115, 255) !important;
}

.ht-products .ht-product .ht-product-inner .ht-product-content .ht-product-content-inner .ht-product-price span.neww {
    color: gray;
    justify-content: center;
}

.im {
    transition: transform .2s;
    width: 270px;
}

.im:hover {
    -ms-transform: scale(1.);
    /* IE 9 */
    -webkit-transform: scale(1.);
    /* Safari 3-8 */
    transform: scale(1.1);

}

.ht-products .ht-product .ht-product-inner .ht-product-content .ht-product-content-inner .ht-product-title #tu::after {
    content: "";
    position: absolute;
    /* bottom: -9px; */
    top: 22px;
    height: 3px;
    width: 100%;
    left: 0;
    background-color: orangered;
    transition: 0.3s;
    transition-timing-function: ease-in-out;
    transform: scaleX(0);

}

.ht-products .ht-product .ht-product-inner .ht-product-content .ht-product-content-inner .ht-product-title #tu:hover::after {
    transform: scaleX(1);
}

.ht-products .ht-product .ht-product-inner {
    border-radius: 10px;
}

.ps:hover {
    background-color: rgba(201, 255, 225, 0.249);
}

/* bread crump*/

.shop-area>.breadcrumb-contentt ul li {
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    margin-right: 18px;
    text-transform: uppercase;
    position: relative;
}

.breadcrumb-contentt ul li::before {
    position: absolute;
    width: 18px;
    height: 1px;
    background-color: #1f2226;
    content: "";
    right: -21px;
    top: 12px;
    z-index: 99;
    -webkit-transform: rotate(115deg);
    transform: rotate(115deg);
}

#ca {
    background-color: white;
    border-radius: 10px;
    align-content: space-between;

}

.pc {
    margin-top: 30px;
    height: 400px;
}

#cc {
    justify-content: space-evenly;
    margin-top: -50px;
}

#cd {
    background-color: white;
    border-radius: 10px;
    justify-content: space-around;
    margin-top: 50px;
}

.br {
    border-right: 1px solid gray;
    padding: 10px;
}

#sm {
    height: 30px;
    float: left;
    padding-right: 25px;
}

.features h3 {
    font-size: 24px;
    margin-top: 20px;
    color: #333;
}

.feature-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.feature-item {
     display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px;
    background-color: rgb(118, 118, 118);
    box-shadow: 1px 1px 1px 1px rgb(188, 188, 188) ;
    border-radius: 10px;
}

.feature-item img {
    width: 40px;
    height: 40px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 50%;
    margin-top: 10px;
}

.feature-item p {
   font-size: 12px;
    color: #ffffff;
}

.fc {
    margin-left: 23px;
}

.About_bannerr {
    background-image: linear-gradient(rgba(3, 3, 3, 0.304), rgba(0, 0, 0, 0.687)), url(assets/img/hero_banner/contect\ ban.png);
    background-size: cover;
    height: 400px;
}

.gt {
    background: linear-gradient(120deg, rgb(207, 23, 248), rgb(33, 195, 228));
    background-clip: text;
    color: transparent;
    width: 200px;
    font-weight: bolder;
}

.fp {

    height: 500px;
}

.ci {
    height: 500px;
    margin-top: 50px;
    margin-bottom: 20px;
    max-width: 100%;
    max-height: 100%;
}

#cu {
    color: rgb(253, 118, 68);
    font-weight: bolder;
    margin-bottom: 10px;
    margin-top: 10px;
}

.cc {
    margin-bottom: 50px;
}

.cc>p {
    color: black;
    text-wrap: wrap;

}

.product-titlee {
    color: rgb(253, 118, 68);
    font-weight: bolder;

}

.product-descriptionn>p {
    margin-left: 50px;
}

.form-controll {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.ff {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

/* about css */
.About_banner {
    background-image:url('about_image/banner.png') !important;
    background-repeat: no-repeat;
    background-size: cover;
    /* Ensure the background image covers the entire container */
    background-position: center center;
    /* Center the background image */
    height: 70vh;
    /* Height of the banner */
    width: 100%;
    /* Ensure the banner spans the full width of its container */
  }
  
  
  
  .about_banner_link {
    text-align: center;
    /* color: white; */
    font-weight: bold;
    font-size: larger;
  }
  
  .explore {
    padding: 0.5rem 1.5rem;
    font-size: 10px;
    background: radial-gradient(86.8% 325.5% at 8% 0%, #D446F1 0%, #9A35EB 100%)
  }
  
  .midd {
    margin: 0;
    width: 100%;
  }
  
  .image-container {
    flex: 1 1 calc(100% - 2rem);
    /* Flex property for full width on small screens */
    max-width: 18rem;
    /* Limit the maximum width for larger screens */
  }
  
  /* Media query for larger screens */
  @media (min-width: 576px) {
    .image-container {
      flex: 1 1 calc(50% - 2rem);
      /* Two cards per row on medium screens */
    }
  }
  
  @media (min-width: 768px) {
    .image-container {
      flex: 1 1 calc(33.33% - 2rem);
      /* Three cards per row on large screens */
    }
  }
  
  @media (min-width: 992px) {
    .image-container {
      flex: 1 1 calc(25% - 2rem);
      /* Four cards per row on extra large screens */
    }
  }
  
  .abt_sec2 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  
    /* width: 100%; */
  }
  
  .abt_sec2>.col {
    width: 50%;
  }
  
  .abt_sec2img {
    position: relative;
    display: flex;
    padding: 25px;
  }
  
  .about_img1 {
    display: flex;
    justify-self: center;
    width: 70%;
    height: 350px;
    position: absolute;
    z-index: -1;
    top: 0;
    /* z-index: 1; */
  }
  
  .about_img2 {
    display: flex;
    justify-self: center;
    width: 100%;
    height: 350px;
  /*   position: absolute;*/
  /*  top:0;right: 10;*/
  /*z-index: 2; */
  }
  
  @keyframes moveLeftRight {
    0% {
      transform: translateX(0);
    }
  
    50% {
      transform: translateX(20px);
      /* Adjust the distance as needed */
    }
  
    100% {
      transform: translateX(0);
    }
  }
  
  .about_img1 {
    animation: moveLeftRight 3s ease-in-out infinite;
    /* 3s is the duration; adjust as needed */
  }
  
  /* Heading Styles */
  .middle_text>h2 {
    font-style: italic;
    font-size: 36px;
    line-height: 45.25px;
    font-weight: 600;
    position: relative;
    padding-left: 30px;
  }
  
  .mid_txt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background-color: #DD6F2B;
  }
  
  .mid_txt::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #DD6F2B;
    transform: translateY(-50%);
    animation: moveUpDown 1s infinite alternate;
  }
  
  /* Animation Keyframes */
  @keyframes moveUpDown {
    0% {
      transform: translateY(-80%) translateY(-8px);
    }
  
    100% {
      transform: translateY(-80%) translateY(8px);
    }
  }
  
  /* Paragraph Styles */
  .mid_para {
    font-weight: 400;
    font-size: 16px;
    /* line-height: 20.11px; */
  }
  
  /* Icons and Header Text */
  .hq {
    font-weight: 700;
    font-size: 26px;
    line-height: 45.25px;
  }
  
  /* Background */
  .second_mid {
    background-color: #E9E8E85E;
    margin-top: 150px;
  
  }
  
  
  
  .sec_mid {
    text-align: center;
    color: #DD6F2B;
    font-style: italic;
    font-size: 36px;
    line-height: 45.25px;
    font-weight: 600;
    position: relative;
    padding-left: 30px;
    padding-top: 20px;
  
  }
  
  .sec_mid::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #DD6F2B;
  }
  
  .sec_mid::after {
    content: "";
    position: absolute;
    top: 50%;
    /* Start at the vertical center */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    /* Create a right-facing triangle */
    border-color: transparent transparent transparent #DD6F2B;
    /* Triangle color */
    transform: translateY(-50%);
    /* Center vertically */
    animation: moveUpDown 1s infinite alternate;
    /* Animation for up and down movement */
  }
  
  @keyframes moveUpDown {
    0% {
      transform: translateY(-80%) translateY(-8px);
    }
  
    /* Move up */
    100% {
      transform: translateY(-80%) translateY(8px);
    }
  
    /* Move down */
  }
  
  .sec_mid_head {
    font-weight: 700;
    font-size: 36px;
    line-height: 45.25px;
    text-align: center;
  }
  
  
  .text-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .mid_txt1 {
    font-style: italic;
    font-size: 36px;
    line-height: 45.25px;
    font-weight: 600;
    position: relative;
    padding-left: 30px;
    display: inline-flex;
    align-items: center;
  }
  
  .mid_txt1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background-color: #DD6F2B;
  }
  
  .mid_txt1::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #DD6F2B;
    transform: translateY(-50%);
    animation: moveUpDown 1s infinite alternate;
  }
  
  /* Animation Keyframes */
  @keyframes moveUpDown {
    0% {
      transform: translateY(-80%) translateY(-8px);
    }
  
    100% {
      transform: translateY(-80%) translateY(8px);
    }
  }
  
  
  
  .card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
  }
  
  .icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -40px auto 0;
    position: relative;
    z-index: 1;
  }
  
  .icon-1 {
    position: absolute;
    z-index: 0;
    width: 353.5px;
    height: 396.83px;
  
  }
  
  .icon-2 {
    position: absolute;
    z-index: 1;
    width: 55px;
    animation: rotate 55s linear infinite;
    /* 5s for duration; adjust as needed */
  
  }
  
  /* Rotating Animation */
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  
  
  
  .icon-3 {
    position: absolute;
    z-index: 2;
    width: 35.45px;
    height: 35.47px;
  }
  
  .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    /* Adjust as per design */
    margin-top: 16px;
  }
  
  .card-body {
    padding-top: 40px;
    /* Adjust padding to make space for overlapping icon */
  }
  
  .over-para {
    font-size: 18px;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    background:
      linear-gradient(to top, rgb(255, 145, 0), transparent),
      url('about_image/overlay1.png');
    /* Adding gradient and image */
    background-repeat: no-repeat;
    background-size: cover;
    /* Ensures background covers the entire area */
    background-blend-mode: overlay;
    /* Blends the gradient with the image */
    transform: scale(0) rotateX(90deg);
    opacity: 0;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease;
  }
  
  .image-container:hover .overlay {
    transform: scale(1) rotateX(0deg);
    opacity: 1;
  }
  
  .image-container:hover .image {
    transform: scale(1.1);
    /* Zoom-in effect on the image */
  }
  
  
  
  
  .overlay1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    background:
      linear-gradient(to top, rgb(255, 145, 0), transparent),
      url('about_image/overlay2.png');
    /* Adding gradient and image */
    background-repeat: no-repeat;
    background-size: cover;
    /* Ensures background covers the entire area */
    background-blend-mode: overlay;
    /* Blends the gradient with the image */
    transform: scale(0) rotateX(90deg);
    opacity: 0;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease;
  }
  
  .image-container:hover .overlay1 {
    transform: scale(1) rotateX(0deg);
    opacity: 1;
  }
  
  
  
  .overlay2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    background:
      linear-gradient(to top, rgb(255, 145, 0), transparent),
      url('about_image/overlay3.png');
    /* Adding gradient and image */
    background-repeat: no-repeat;
    background-size: cover;
    /* Ensures background covers the entire area */
    background-blend-mode: overlay;
    /* Blends the gradient with the image */
    transform: scale(0) rotateX(90deg);
    opacity: 0;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease;
  }
  
  .image-container:hover .overlay2 {
    transform: scale(1) rotateX(0deg);
    opacity: 1;
  }
  
  .overlay3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    background:
      linear-gradient(to top, rgb(255, 145, 0), transparent),
      url('about_image/overlay4.png');
    /* Adding gradient and image */
    background-repeat: no-repeat;
    background-size: cover;
    /* Ensures background covers the entire area */
    background-blend-mode: overlay;
    /* Blends the gradient with the image */
    transform: scale(0) rotateX(90deg);
    opacity: 0;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease;
  }
  
  .image-container:hover .overlay3 {
    transform: scale(1) rotateX(0deg);
    opacity: 1;
  }
  
  
  .image-container {
    flex: 1 1 calc(100% - 2rem);
    /* Flex property for full width on small screens */
    max-width: 18rem;
    /* Limit the maximum width for larger screens */
  }
  
  /* Media query for larger screens */
  @media (min-width: 576px) {
    .image-container {
      flex: 1 1 calc(50% - 2rem);
      /* Two cards per row on medium screens */
    }
  }
  
  @media (min-width: 768px) {
    .image-container {
      flex: 1 1 calc(33.33% - 2rem);
      /* Three cards per row on large screens */
    }
 
  }
  
  @media (min-width: 992px) {
    .image-container {
      flex: 1 1 calc(25% - 2rem);
      /* Four cards per row on extra large screens */
    }
    
  }
  .details>h5{
    color: #9A35EB;
}
.product-details-content>h1{
    background: linear-gradient(120deg, rgb(207, 23, 248),rgb(33, 195, 228));
    background-clip: text;
    color: transparent;
    width: 100%;
    font-weight: bolder;
}
.shop-area>.pd,.breadcrumb-contentt{
    margin-left: 90px;
}
#about_span{
    background: linear-gradient(to right, #FF5BD1, #33E7FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 300px;
    
}
.shop-area>.pd,.breadcrumb-contentt{
    margin-left: 100px;
}
@media only screen and (min-width: 1200px) {.sec_mid_head {
  font-weight: 500;
  font-size: 36px;
  line-height: 45.25px;
  text-align: center;
}}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {.sec_mid_head {
  font-weight: 300;
  font-size: 36px;
  line-height: 45.25px;
  text-align: center;
}}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {.sec_mid_head {
  font-weight: 200;
  font-size: 28px;
  line-height: 45.25px;
  text-align: center;
}}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {.sec_mid_head {
  font-weight: 200;
  font-size: 25px;
  line-height: 45.25px;
  text-align: center;
}}

.new_collection .col_img {
  display: grid;
  grid-template-columns: 25% 30% 15% 25%;
  gap: 15px;
  place-content: center;
  grid-template-rows: repeat(2, 50%);
  height: 80vh;
  min-height: 460px;
  padding: max(2vh, 1.5rem);

  @include mQ(1024px) {
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns on medium screens */
  }

  @include mQ(768px) {
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns on smaller screens */
  }

  @include mQ(470px) {
    grid-template-columns: 1fr;
    /* 1 column on mobile screens */
    grid-template-rows: repeat(4, auto);
    /* Each card takes full width */
  }
}

.new_collection .card {
  border-radius: 12px;

  @include mQ(470px) {
    grid-column: span 1;
  }

  &:nth-child(1) {
    grid-column: 1;
    grid-row: span 2;

    @include mQ(690px) {
      grid-column: span 1;
      grid-row: span 1;
    }
  }

  &:nth-child(2) {
    grid-column: 2/3;
    grid-row: span 2;

    @include mQ(690px) {
      grid-column: span 1;
      grid-row: span 1;
    }
  }

  &:nth-child(3) {
    grid-column: span 2;

    @include mQ(690px) {
      grid-column: 2/4;
      grid-row: 1/2;
    }
  }

  &:nth-child(4) {
    grid-column: span 2;

    @include mQ(690px) {
      grid-column: 2/4;
      grid-row: 1/2;
    }
  }
}

.new_collection .card__img {
  position: relative;
  height: 100%;
  /* Default height for larger screens */

  @include mQ(670px) {
    height: 80%;
    /* Reduce height on smaller screens */
  }
}


.new_collection .responsive-image1 {
  height: 100%;
}

@media (max-width: 300px) {
  .new_collection.card__img {
    height: 80%;
    /* Further reduction for very small screens */
  }

  .new_collection .responsive-image {
    height: 10%;
    /* Adjust height for specific class */
  }

}

/* For screens larger than 600px */
@media (min-width: 601px) {
  .new_collection .card__img {
    height: 100%;
    /* Maintain height for larger screens */

  }

  .new_collection .card {
    border: none;
  }

  .new_collection .card {
    border-radius: 12px;

    @include mQ(470px) {
      grid-column: span 1;
    }

    &:nth-child(1) {
      grid-column: 1;
      grid-row: span 2;

      @include mQ(690px) {
        grid-column: span 1;
        grid-row: span 1;
      }
    }

    &:nth-child(2) {
      grid-column: 2/3;
      grid-row: span 2;

      @include mQ(690px) {
        grid-column: span 1;
        grid-row: span 1;
      }
    }

    &:nth-child(3) {
      grid-column: span 2;

      @include mQ(690px) {
        grid-column: 2/4;
        grid-row: 1/2;
      }

    }

    &:nth-child(4) {
      grid-column: span 2;

      @include mQ(690px) {
        grid-column: 2/4;
        grid-row: 1/2;
      }
    }
  }

  @media screen and(max-width:578px) {
    .new_collection .gridimg {
      visibility: hidden;
    }
  }

}