.elementor-6479 .elementor-element.elementor-element-7aee7cf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6479 .elementor-element.elementor-element-3045340.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-6479 .elementor-element.elementor-element-0908397{--display:flex;--min-height:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6479 .elementor-element.elementor-element-79d6499{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6479 .elementor-element.elementor-element-e2042ad{padding:42px 42px 42px 42px;}.elementor-6479 .elementor-element.elementor-element-e2042ad.elementor-element{--align-self:center;}.elementor-6479 .elementor-element.elementor-element-2b1d7f2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:90px;--margin-left:0px;--margin-right:0px;}.elementor-6479 .elementor-element.elementor-element-bb9f8bb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6479 .elementor-element.elementor-element-1e2b6b2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6479 .elementor-element.elementor-element-9c64408{--display:flex;}.elementor-6479 .elementor-element.elementor-element-7d2a54f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6479 .elementor-element.elementor-element-1cf8715{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6479 .elementor-element.elementor-element-29913bc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6479 .elementor-element.elementor-element-f9323b2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6479 .elementor-element.elementor-element-7039eec{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-6479 .elementor-element.elementor-element-7039eec:not(.elementor-motion-effects-element-type-background), .elementor-6479 .elementor-element.elementor-element-7039eec > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(77deg, #FFD0D0 0%, #FFFFFF 100%);}.elementor-6479 .elementor-element.elementor-element-9a9f379{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6479 .elementor-element.elementor-element-f98ef69{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-6479 .elementor-element.elementor-element-400218b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;}.elementor-6479 .elementor-element.elementor-element-ec4191b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}@media(max-width:1024px){.elementor-6479 .elementor-element.elementor-element-7039eec{--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-6479 .elementor-element.elementor-element-400218b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-6479 .elementor-element.elementor-element-0908397{--width:100%;}.elementor-6479 .elementor-element.elementor-element-9a9f379{--width:540px;}}@media(max-width:767px){.elementor-6479 .elementor-element.elementor-element-e006580{margin:39px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-6479 .elementor-element.elementor-element-e006580.elementor-element{--align-self:center;}.elementor-6479 .elementor-element.elementor-element-e2042ad{margin:39px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-6479 .elementor-element.elementor-element-e2042ad.elementor-element{--align-self:center;}.elementor-6479 .elementor-element.elementor-element-7039eec{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-6479 .elementor-element.elementor-element-9a9f379{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:35px;--padding-bottom:20px;--padding-left:25px;--padding-right:25px;}.elementor-6479 .elementor-element.elementor-element-9a9f379.e-con{--align-self:flex-start;}.elementor-6479 .elementor-element.elementor-element-400218b{padding:0px 0px 0px 0px;}}/* Start custom CSS for wc-categories, class: .elementor-element-3045340 *//* Carousel Container */
.slide {
  position: relative;
  overflow: hidden;
  padding: 0 40px;
  width: 100%;
}

/* Original categories hide korbo */
.slide .products,
.slide .woocommerce ul.products,
.slide .elementor-products-grid {
  display: none !important;
}

/* New Carousel Structure */
.slide-carousel-container {
  width: 100%;
  position: relative;
}

.slide-carousel-wrapper {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 10px 5px;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.slide-carousel-wrapper::-webkit-scrollbar {
  display: none;
}

/* Category Card Styling */
.slide-category-card {
  flex: 0 0 auto;
  text-decoration: none;
  color: #333;
  transition: transform 0.3s ease;
  border-radius: 10px;
  overflow: hidden;
  background: white;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

.slide-category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.slide-category-image {
  width: 100%;
  height: 180px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.slide-category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}

.slide-category-card:hover .slide-category-image img {
  transform: scale(1.05);
}

.slide-category-name {
  padding: 15px 10px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  background: white;
  margin: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 70px;
}

.slide-category-count {
  display: block;
  font-size: 13px;
  color: #666;
  font-weight: normal;
  margin-top: 5px;
  opacity: 0.8;
}

/* Navigation Buttons */
.slide-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  background: white;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
}

.slide-carousel-btn:hover {
  background: #4f46e5;
  box-shadow: 0 5px 20px rgba(79, 70, 229, 0.3);
}

.slide-carousel-btn:hover svg {
  stroke: white;
}

.slide-carousel-btn svg {
  width: 24px;
  height: 24px;
  stroke: #333;
  stroke-width: 2;
}

.slide-prev-btn {
  left: 10px;
}

.slide-next-btn {
  right: 10px;
}

/* Dots */
.slide-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 25px;
  padding: 0 10px;
}

.slide-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #ddd;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.slide-carousel-dot.active {
  background: #4f46e5;
  transform: scale(1.2);
}

/* =========== RESPONSIVE STYLES =========== */

/* Extra Small Phones (Portrait) - 320px to 479px */
@media (max-width: 479px) {
  .slide {
    padding: 0 15px;
  }
  
  .slide-category-card {
    width: calc((100% - 20px) / 2) !important; /* 2 items on very small phones */
    min-width: 140px;
  }
  
  .slide-category-image {
    height: 130px;
  }
  
  .slide-category-name {
    font-size: 14px;
    padding: 12px 8px;
    min-height: 60px;
  }
  
  .slide-carousel-btn {
    width: 40px;
    height: 40px;
    display: none; /* Hide arrows on very small screens */
  }
  
  .slide-prev-btn {
    left: 5px;
  }
  
  .slide-next-btn {
    right: 5px;
  }
}

/* Small Phones (Landscape) - 480px to 639px */
@media (min-width: 480px) and (max-width: 639px) {
  .slide {
    padding: 0 20px;
  }
  
  .slide-category-card {
    width: calc((100% - 20px) / 2.5) !important; /* 2.5 items (show partial next) */
  }
  
  .slide-category-image {
    height: 140px;
  }
  
  .slide-carousel-btn {
    display: block;
    width: 40px;
    height: 40px;
  }
}

/* Mobile Phones (Portrait) - 640px to 767px */
@media (min-width: 640px) and (max-width: 767px) {
  .slide {
    padding: 0 25px;
  }
  
  .slide-category-card {
    width: calc((100% - 30px) / 3) !important; /* 3 items on mobile */
  }
  
  .slide-category-image {
    height: 150px;
  }
  
  .slide-carousel-btn {
    display: block;
  }
}

/* Tablet (Portrait) - 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .slide {
    padding: 0 30px;
  }
  
  .slide-category-card {
    width: calc((100% - 45px) / 4) !important; /* 4 items on tablet */
  }
  
  .slide-category-image {
    height: 160px;
  }
  
  .slide-carousel-btn {
    width: 50px;
    height: 50px;
  }
}

/* Tablet (Landscape) - 1024px to 1199px */
@media (min-width: 1024px) and (max-width: 1199px) {
  .slide {
    padding: 0 35px;
  }
  
  .slide-category-card {
    width: calc((100% - 60px) / 5) !important; /* 5 items on landscape tablet */
  }
  
  .slide-category-image {
    height: 170px;
  }
}

/* Desktop - 1200px to 1439px */
@media (min-width: 1200px) and (max-width: 1439px) {
  .slide {
    padding: 0 40px;
  }
  
  .slide-category-card {
    width: calc((100% - 75px) / 6) !important; /* 6 items on desktop */
  }
  
  .slide-category-image {
    height: 180px;
  }
}

/* Large Desktop - 1440px and above */
@media (min-width: 1440px) {
  .slide {
    padding: 0 50px;
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .slide-category-card {
    width: calc((100% - 75px) / 6) !important;
  }
  
  .slide-category-image {
    height: 200px;
  }
  
  .slide-carousel-btn {
    width: 55px;
    height: 55px;
  }
  
  .slide-carousel-btn svg {
    width: 28px;
    height: 28px;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .slide-category-card:hover {
    transform: none;
  }
  
  .slide-category-card:active {
    transform: scale(0.98);
  }
  
  .slide-carousel-btn {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
  }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .slide-category-card {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .slide-category-card {
    background: #2d3748;
    color: #e2e8f0;
  }
  
  .slide-category-name {
    background: #2d3748;
    color: #e2e8f0;
  }
  
  .slide-category-count {
    color: #a0aec0;
  }
  
  .slide-carousel-btn {
    background: #4a5568;
  }
  
  .slide-carousel-btn svg {
    stroke: #e2e8f0;
  }
}

/* Print Styles */
@media print {
  .slide-carousel-btn,
  .slide-carousel-dots {
    display: none !important;
  }
  
  .slide-carousel-wrapper {
    overflow: visible !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
  }
  
  .slide-category-card {
    width: calc(25% - 15px) !important;
    page-break-inside: avoid;
  }
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
  .slide-carousel-wrapper {
    -webkit-overflow-scrolling: touch;
  }
  
  .slide-category-image {
    -webkit-transform: translateZ(0);
  }
}

/* Fix for Firefox scroll */
@-moz-document url-prefix() {
  .slide-carousel-wrapper {
    scrollbar-width: none;
  }
}

/* Loading State */
.slide.loading .slide-carousel-wrapper {
  display: none;
}

.slide.loading::after {
  content: "Loading categories...";
  display: block;
  text-align: center;
  padding: 40px;
  color: #666;
}

/* Empty State */
.slide-carousel-wrapper:empty::before {
  content: "No categories found";
  display: block;
  text-align: center;
  padding: 40px;
  color: #666;
  width: 100%;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-725d068 *//* Main container */
.wc-categories-carousel-container {
    position: relative;
    padding: 0 30px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Carousel styling */
.categories-carousel {
    display: flex;
    overflow: hidden;
    scroll-behavior: smooth;
    padding: 20px 10px;
    gap: 15px;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.categories-carousel::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
}

/* Category card styling */
.category-card {
    flex: 0 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 280px;
    text-decoration: none;
    color: #333;
}

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

.category-image {
    height: 180px;
    overflow: hidden;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.category-card:hover .category-image img {
    transform: scale(1.05);
}

.category-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.category-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #222;
}

.category-count {
    font-size: 14px;
    color: #777;
}

/* Navigation arrows */
.carousel-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

.carousel-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: all;
}

.carousel-arrow:hover {
    background: #4a6cf7;
    color: white;
    box-shadow: 0 5px 15px rgba(74, 108, 247, 0.3);
}

.carousel-arrow svg {
    width: 24px;
    height: 24px;
}

.prev-arrow {
    margin-left: -15px;
}

.next-arrow {
    margin-right: -15px;
}

/* Pagination dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.carousel-dot.active {
    background: #4a6cf7;
    transform: scale(1.2);
}

.carousel-dot:hover {
    background: #aaa;
}

/* Empty state styling */
.empty-categories {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 18px;
}

/* Loading state */
.loading {
    text-align: center;
    padding: 40px;
    font-size: 16px;
    color: #777;
}

/* Responsive styles */
/* Desktop: 6 items */
@media (min-width: 1025px) {
    .category-card {
        width: calc((100% - 75px) / 6); /* 6 items with gaps */
    }
}

/* Tablet: 4 items */
@media (min-width: 768px) and (max-width: 1024px) {
    .category-card {
        width: calc((100% - 45px) / 4); /* 4 items with gaps */
    }
    
    .carousel-arrow {
        width: 45px;
        height: 45px;
    }
    
    .prev-arrow {
        margin-left: -10px;
    }
    
    .next-arrow {
        margin-right: -10px;
    }
}

/* Mobile: 2 items */
@media (max-width: 767px) {
    .category-card {
        width: calc((100% - 15px) / 2); /* 2 items with gaps */
        height: 240px;
    }
    
    .category-image {
        height: 140px;
    }
    
    .carousel-nav {
        display: none; /* Hide arrows on mobile for better touch experience */
    }
    
    .wc-categories-carousel-container {
        padding: 0 15px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0ba8b38 */.section{
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 600px;
    background-color: red;
    padding: 10px 20px;
    
    
    background-image: url('https://lp.webersayaf.com/wp-content/uploads/2025/07/IMG-20250613-WA0006-300x300.jpg');
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
   
}

.section::before{
    content:"";
    position:absolute ;
    inset:0;
    
     background: rgba(0,0,0,0.6);   /* overlay color */
    backdrop-filter: blur(9px);   /* blur amount */
    -webkit-backdrop-filter: blur(6px);

    z-index: 1;
}




.main-div{
    max-width:1200px;
    margin:auto;
    display: flex;  
    gap: 10px;
    z-index: 1;
    background-color:rgba(255,255,255,16%);
}
.img-div{
    width: 50%;
    height: 400px;
      overflow:hidden;
      padding: 0 20px;
}

.img-div img{
    width: 100%;
    height: 100%;
     object-fit:cover;
     display:block;
     border-radius: 10px;
     border: 2px solid white;
    
}

.second-div{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid white;
    border-radius: 10px;
 
 
   
}

.second-div h1{
    color: white;
    font-size: 38px;
  
}

.second-div span{
    color: white;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 10px;
}

.second-div p{
    color: black;
    background-color: white;
    font-size: 15px;
    padding: 15px 10px;
    border-radius: 10px;
    text-align: center;
    width: 90%
    
}


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


.second-div button{
    padding:10px 18px;
    margin-right:10px;
    cursor:pointer;
    color: black;
    background-color: #FED337;
    margin-top: -15px;
}

.second-div button:hover{
    padding:10px 18px;
    margin-right:10px;
    cursor:pointer;
    color: white;
    background-color: black
}



@media (max-width: 768px){
    
 .section{
     height:auto;
 }

.main-div{
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.img-div{
    width: 100%;
    height: 250px;
    padding: 0
}

.second-div{
    width: 100%;
    padding: 10px;
    align-items: stretch;
    text-align: center;
}

.second-div h1{
    color: white;
    font-size: 28px;
  
}

.second-div p{
    width: 100%;
    margin: 0;
    font-size: 14px
}

.btn{
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 15px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e006580 *//* শুধু পলস বাটনের স্টাইল */
.pulse-button {
  padding: 10px;
  background: #5a99d4;

  color: white;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
  animation: pulse 1.5s infinite;
}


/* পলস এনিমেশন */
@keyframes pulse {
  0% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 18px rgba(90, 153, 212, 0);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5c40fe7 */@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');



.div-main{
  
    display: flex;
    padding: 20px;

    background-image: url('https://lp.webersayaf.com/wp-content/uploads/2025/10/WhatsApp-Image-2025-09-13-at-15.39.52_e2b0a8db-300x300.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    position: relative;
    overflow: hidden;
}

/* Overlay + Blur */
.div-main::before{
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,0.6);   /* overlay color */
    backdrop-filter: blur(9px);   /* blur amount */
    -webkit-backdrop-filter: blur(6px);

    z-index: 1;
}

/* Content উপরে রাখার জন্য */
.div-main > *{
    position: relative;
    z-index: 2;
}


.div-main img{
    border-radius: 30px 5px;
    border: 4px solid white;
    width: 500px;
}

.div-main .text {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
 
}

.div-main h1{
    color: white;
    text-align: center;
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 45px;
}

.div-main p{
    color: yellow;
    text-align: center;
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 25px;
}

 .div-main a{
   
     font-size:20px;
     color:white;
     font-weight:600;
     text-align: center;
     background-color: white;
     color: green;
     padding:6px 10px;
     border-radius: 10px;
     margin-top: -35px;
 }
 
  .div-main a:hover{
     background-color: black;
    color: white;
      transform: scale(1.1) translateY(-3px) rotate(-2deg);
     
  }
      
      

      

@media (max-width:768px){
   .div-main{
       flex-direction:column;
       width:100%;
       padding:15px;
       gap:15px;
        border-radius: 8px;
   }
   
   .div-main img {
        width: 100%;
        max-width: 300px;
        border-radius: 20px 5px;
   
    }
    
    .div-main h1{
        font-size:35px;
        font-weight: 700;
    background: linear-gradient(to left, white, yellow, red);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    
    }
   
    .div-main p{
        font-size:20px;
        color:white;
        font-weight:500;
    
    }
    
    
   
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2da79f5 */section{
    background-image:url('https://lp.webersayaf.com/wp-content/uploads/2025/09/Add-a-heading-1-1-300x300.png');
  
   
    position: relative;
      display: flex;
    justify-content: center;    /* horizontally center */
    align-items: center;  
    min-height: 30vh;
}
.div{
  text-align: center; 
  background-color: rgba(255, 255, 255, 10%);
  backdrop-filter: blur(5px);
  padding: 20px;
  border-radius: 8px;
}

.div h2{
      color: white;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-f98ef69 */.service {
    background: linear-gradient(1300deg, #111111 0%, #5a0000 50%, #ff1a1a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 10px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7b2fd6a */.root-box1{
    --main-box-hover:#EFEFFF;
    --icon-bg:#2F71F0;
    --head-hover-color:#2F71F0;
    --btn-color:#2F71F0;
    --btn-hover-color:#2F71F0;
    --p-color:black;
}


.main-box{
    display: flex;
    flex-direction: column;
    align-items: left;
    background-color:#FFF;
    padding: 25px 30px;
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    cursor: pointer;
    transition: 0.3s ease;
}

.icon{
    width: 60px;
    height: 60px;
    background-color:#2F71F0;
    border-radius:15%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    transition: all 0.5s ease;
}
.icon svg{
    width: 28px;
    height: 28px;
    color: white;
}
.head{
    font-size: 24px;
    color: black;
    transition: color 0.3s ease;
    margin-bottom:10px;
}

.sub-head{
    font-size: 16px;
    font-weight: 400;
}

.btn{
    color: #2F71F0;
      font-weight: 600;
}
.btn:hover{
    color: #2F71F0;
}
.btn span{
      font-size: 20px;
       font-weight: 800;
       display: inline-block;
       transition: 0.3S EASE;
}


.main-box:hover{
    transform: translateY(-8px);
    background-color: var(--main-box-hover);
}

.main-box:hover .icon{
    transform: scale(1.1) rotate(4deg);
     box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    }
.main-box:hover .head{
    color: #2F71F0;
}

}
.main-box:hover .btn span {
    transform: translateX(8px); /* 8px ডান দিকে সরবে */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-405cb4a */.root-box2{
    --main-box-hover:#FFE6D4;
    --icon-bg:#F97316;
    --head-hover-color:#F97316;
    --btn-color:#F97316;
    --btn-hover-color:#BC4F00;
    --p-color:black;
}


.main-box{
    display: flex;
    flex-direction: column;
    align-items: left;
    background-color:#FFF;
    padding: 25px 30px;
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    cursor: pointer;
    transition: 0.3s ease;
}

.icon{
    width: 60px;
    height: 60px;
    background-color:var(--icon-bg);
    border-radius:15%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    transition: all 0.5s ease;
}
.icon svg{
    width: 28px;
    height: 28px;
    color: white;
}
.head{
    font-size: 24px;
    color: black;
    transition: color 0.3s ease;
    margin-bottom:10px;
}

.sub-head{
    font-size: 16px;
    font-weight: 400;
}

.btn{
    color: var(--btn-color);
      font-weight: 600;
}
.btn:hover{
    color: var(--btn-hover-color);
}
.btn span{
      font-size: 20px;
       font-weight: 800;
       display: inline-block;
       transition: 0.3S EASE;
}


.main-box:hover{
    transform: translateY(-8px);
    background-color: var(--main-box-hover);
}

.main-box:hover .icon{
    transform: scale(1.1) rotate(4deg);
     box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    }
    
.main-box:hover .head {
    color: var(--head-hover-color);
}

.main-box:hover .btn span {
    transform: translateX(8px); /* 8px ডান দিকে সরবে */
}


/*mobile responsive*/
@media (max-width:768px){
    .head{
    font-size: 20px;
    color: black;
    transition: color 0.3s ease;
    margin-bottom:10px;
}

.sub-head{
    font-size: 14px;
    font-weight: 400;
}
    
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9a01da5 */.root-box3{
    --main-box-hover:#F0DFFF;
    --icon-bg:#8E2FE3;
    --head-hover-color:#8E2FE3;
    --btn-color:#8E2FE3;
    --btn-hover-color:#BC4F00;
    --p-color:black;
}


.main-box{
    display: flex;
    flex-direction: column;
    align-items: left;
    background-color:#FFF;
    padding: 25px 30px;
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    cursor: pointer;
    transition: 0.3s ease;
}

.icon{
    width: 60px;
    height: 60px;
    background-color:var(--icon-bg);
    border-radius:15%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    transition: all 0.5s ease;
}
.icon svg{
    width: 28px;
    height: 28px;
    color: white;
}
.head{
    font-size: 24px;
    color: black;
    transition: color 0.3s ease;
    margin-bottom:10px;
}

.sub-head{
    font-size: 16px;
    font-weight: 400;
}

.btn{
    color: var(--btn-color);
      font-weight: 600;
}
.btn:hover{
    color: var(--btn-hover-color);
}
.btn span{
      font-size: 20px;
       font-weight: 800;
       display: inline-block;
       transition: 0.3S EASE;
}


.main-box:hover{
    transform: translateY(-8px);
    background-color: var(--main-box-hover);
}

.main-box:hover .icon{
    transform: scale(1.1) rotate(4deg);
     box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    }
    
.main-box:hover .head {
    color: var(--head-hover-color);
}

.main-box:hover .btn span {
    transform: translateX(8px); /* 8px ডান দিকে সরবে */
}/* End custom CSS */