/* custom font */
        @font-face {
        font-family: "ban_regular"; /* Choose a name for your font */
        src: url("/assets/font/Li\ Ador\ Noirrit\ A-V2\ Regular.ttf") format("truetype"); /* Path to your font file */
        /* Optional: Add other font formats for better browser compatibility */
        /* src: url("../fonts/myfont.woff2") format("woff2"), */
        /*      url("../fonts/myfont.woff") format("woff"); */
        }
        @font-face {
        font-family: "ban_semiB"; 
        src: url("/assets/font/Li\ Ador\ Noirrit\ A-V2\ SemiBold.ttf") format("truetype"); 
        }
    
        /* continer width of site */
        .conti{
        max-width: 1200px;
        margin: 0 auto; 
        }
        .bg-full-color{
            background-color:  #f2f2f2;
        }
    /* Basic reset */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

    /* Header layout */
    .site-header {
      background: #f2f2f2;
      color: #000000;
      padding: 1rem 1.3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 20;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-width: 0;
      flex: 1;
    }

    .logo {
      width: 44px; height: 44px; border-radius: 6px;
      background: linear-gradient(135deg,#ffd54f,#ffb74d);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; color: #222;
      flex-shrink: 0;
    }

    .site-title {
      font-family: "ban_regular", sans-serif; font-size: 1.4rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: .5rem;
    }

    /* Desktop horizontal nav */
    nav.main-nav {
    
      margin-left: auto; /* space after title */
      display: flex; align-items: center; gap: .5rem; 
      
    }

    .menu {
      display: flex; list-style: none; gap: 0.01rem; align-items: center;
      font-family: "ban_semiB", sans-serif; 
    }

    .menu > li { position: relative; }
    .active-nav{
      color: #00a651;
    }
    .menu a {
      display: block; padding: 0.5rem 0.85rem;  color: inherit; text-decoration: none; border-radius: 6px;
      font-weight: 600; font-size: 0.95rem;
    }

    .menu a:hover { background: rgba(255, 255, 255, 0); color: #00a651;}

    /* 1st level dropdown container */
    .submenu {
      position: absolute; left: 0; top: calc(100% + 6px);
      background: #fff; color: #222; min-width: 220px; border-radius: 8px; padding: 0.4rem; box-shadow: 0 8px 20px rgba(2,6,23,0.18);
      display: none; flex-direction: column; gap: 0.2rem; z-index: 50;
    }

    .menu > li:focus-within > .submenu,
    .menu > li:hover > .submenu { display: flex; }

    .submenu a { padding: 0.5rem 0.8rem; border-radius: 6px; color: inherit; }
    .submenu a:hover { background: rgba(23, 5, 2, 0.06); }

    /* 2nd level (sub-submenu) */
    .submenu .has-sub { position: relative; }
    .submenu .sub-submenu {
      position: absolute; left: 100%; top: 0; display: none; min-width: 200px; background: #fff; padding: 0.4rem; border-radius: 8px; box-shadow: 0 8px 20px rgba(2,6,23,0.12);
    }
    .submenu .has-sub:hover > .sub-submenu,
    .submenu .has-sub:focus-within > .sub-submenu { display: block; }

    /* Simple arrow indicator */
    .has-sub > a::after {
      content: '▸'; font-size: 0.7rem; margin-left: 0.5rem; opacity: 0.7;
    }

    /* Right side controls (hamburger) */
    .controls { margin-left: auto; display: flex; align-items: center; }
    .hamburger {
      display: none; background: transparent; border: none; color: inherit; font-size: 1.25rem; padding: 0.5rem; cursor: pointer;
    }

    /* Desktop-only: show full nav */
    @media (min-width: 880px) {
      .hamburger { display: none; }
      nav.main-nav { display: block; }
    }

    /* Mobile: collapse nav, show hamburger */
    @media (max-width: 879px) {
      nav.main-nav { display: none; }
      .hamburger { display: block; }
    }

    /* Slide-in left panel for mobile menu */
    .mobile-panel {
      position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 85%; background: #fff; transform: translateX(-110%);
      transition: transform 300ms cubic-bezier(.2,.9,.3,1); box-shadow: 8px 0 30px rgba(2,6,23,0.2); z-index: 100;
      display: flex; flex-direction: column; padding: 1rem; gap: 0.6rem; overflow-y: auto;
    }
    .mobile-panel.open { transform: translateX(0); }

    .mobile-panel .panel-header { display:flex; align-items:center; gap:0.6rem; }
    .mobile-panel .panel-header .close-btn { margin-left: auto; background: transparent; border: none; font-size: 1.2rem; cursor: pointer; }

    .mobile-menu { list-style: none; display:flex; flex-direction: column; gap: 0.2rem; }
    .mobile-menu a { padding: 0.6rem 0.6rem; display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: #111; border-radius:6px; }
    .mobile-menu a:hover { background: rgba(2,6,23,0.04); }

    .accordion { border: none; background: transparent; padding: 0.6rem 0.6rem; text-align: left; width: 100%; display:flex; justify-content:space-between; align-items: center; cursor: pointer; }
    .collapse { display: none; flex-direction: column; padding-left: 0.6rem; gap: 0.2rem; }

    /* small tweaks for nested mobile items */
    .mobile-menu .child a { padding-left: 1rem; }
    .mobile-menu .grandchild a { padding-left: 1.8rem; }

    /* overlay for panel */
    .overlay { position: fixed; inset: 0; background: rgba(2,6,23,0.35); opacity: 0; pointer-events: none; transition: opacity 200ms; z-index: 90; }
    .overlay.show { opacity: 1; pointer-events: auto; }

    /* tiny responsive polish */
    @media (max-width:420px) {
      .site-title { font-size: 0.95rem; }
      .logo { width: 40px; height: 40px; }
    }


  .all_con{
    font-family: ban_regular; padding: 5px 10px; font-size: large; background-color: #006c1d; border: none; border-radius: 8px; cursor: pointer; color: #fff;
  }
  .all_con:hover{
    background-color: #004a12;
  }

    .mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  /* max-width: 1000px; */
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

      .mid-btn-wrap{
          text-align: center;display: flex; flex-direction: column; justify-content: center; align-items: center;
      }
    .mid-float-btn{
        background: #036303; background: linear-gradient(0deg,rgba(3, 99, 3, 1) 17%, rgba(184, 9, 12, 1) 100%);  margin: 0; padding: 0; width: fit-content; border-radius: 25px; padding: 8px 25px 8px 25px; font-size: 2.3rem; font-family: ban_semiB; color: #fff; height: 62px; transform: translateY(-120px); border: 1px solid #00a651; cursor: pointer;
    }
    .mid-float-btn:hover{
        background: #0eb60e; background: linear-gradient(0deg,#c00515 17%, rgb(4, 80, 4) 100%); border: 1px solid #008f48; cursor: pointer; color: #72c779;
    }

  .responsive-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            transition: all 0.3s ease;
        }

        .div1 {
            flex: 1;
            min-width: 200px;
           
            color: rgb(0, 0, 0);
            border-radius: 8px;
            text-align: center;
            font-size: 2rem;
            font-weight: bold;
           
        }

        .div-group {
            /* flex: 2; */
            display: flex;
            
            min-width: 300px;
        }

        .div-group div {
            flex: 1;
            /* background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); */
            color: rgb(0, 0, 0);
            
            border-radius: 8px;
            text-align: center;
            font-size: 1.8rem;
            font-weight: bold;
            cursor: pointer;
            
         
        }
        .div-group div img {
          transform: scale(0.8); /* Initially scaled down */
            transition: transform 0.3s ease; /* Smooth transition */
        }
        .div-group div img:hover {
          transform: scale(1);/* Scales back to original size on hover */
        }
        /* Media Queries for Responsive Behavior */
        
        /* First breakpoint: Stack div-group below div1 */
        @media (max-width: 900px) {
            .responsive-container {
                flex-direction: column;
            }
            
            .div1 {
                width: 100%;
            }
            
            .div-group {
                width: 100%;
            }
            .mid-float-btn{
                font-size: 1.5rem;
                padding: 8px 30px 8px 30px;
                height: 50px;
                
            }
        }
        
        /* Second breakpoint: Stack div-group items vertically */
        @media (max-width: 600px) {
            .div-group {
                flex-direction: column;
            }
            
            .div-group div {
                width: 100%;
            }
            .mid-float-btn{
                font-size: 1rem;
                padding: 8px 9px 8px 9px;
                height: 38px;
                transform: translateY();
                
            }
        }

  /* Container for the entire carousel */
.carousel-container {
  width: 90%;
  margin: 0 auto;
  position: relative;
}

/* Wrapper to define the scrolling area */
.carousel-wrapper {
  position: relative;
  overflow: hidden;
}

/* The actual slider */
.carousel-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;

  /* Hide scrollbar for Chrome, Safari, and Opera */
  &::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge, and Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}


/* Style for each product card */
.product-card {
  flex-shrink: 0;
  width: 300px;
  margin-right: 1.5rem;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.product-card img {
  max-width: 100%;
  height: auto;
  display: block;
}

.card-content {
  padding: 1rem;
}

.product-card h3 {
  margin-top: 0;
}

.product-card .price {
  color: #0c047e;
  font-family: ban_regular;
  font-size: 1rem;
}

.add-to-cart {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  margin-top: 10px;
  cursor: pointer;
  border-radius: 4px;
}
.product-card:hover{
  transform: scale(1);
}
/* Navigation buttons */
.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 10;
  font-size: 1.5rem;
}

#prev-btn {
  left: 0;
}

#next-btn {
  right: 0;
}
#prev-btnn {
  left: 0;
}

#next-btnn {
  right: 0;
}


  .com-body{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    flex-wrap: wrap;
    gap: 20px;
    font-family: ban_regular;
    margin-left: 15px;
    margin-right: 15px;
  }
.com-left-side{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    /* background-color: aqua; */
   
    
}
.com-right-side{
    display: flex;
    flex: 1;
    background: #FFF8A8; background: linear-gradient(0deg,rgba(255, 248, 168, 1) 9%, rgba(255, 255, 255, 1) 89%);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 18px;
    border: 8px solid #fff;
}
.red-btn-com{
border: none; border-radius: 10px; padding: 8px 15px; font-size: 1.5rem; font-family: ban_regular; font-weight: 600; color: #fff; background-color: red; cursor: pointer;
}

.red-btn-com:hover{
background-color: darkred; color: #f0f0f0;
} 
.com-ro-jante{
    font-family: ban_regular; width: 150px; background-color: #0e7356; height: 38px; font-size: 20px; color: #fff; border: none; border-radius: 15px; cursor: pointer;
}
.com-ro-jante:hover{
    background-color: #0b4b3e; color: #e0e0e0;
}

.container-btn {
  position: relative;
  width: 500px; /* Set your desired width */
  height: 310px; /* Set your desired height */
  border-radius: 18px;
  border: 8px solid #fff;
  overflow: hidden; /* This ensures the image respects the border radius */
}
.container-btn2 {
  position: relative;
  width: 500px; /* Set your desired width */
  height: 165px; /* Set your desired height */
  border-radius: 18px;
  border: 8px solid #fff;
  overflow: hidden; /* This ensures the image respects the border radius */
}

.container-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This makes the image fill the container */
  display: block;
}

.container-btn button {
  position: absolute;
  bottom: 20px;
  right: 0;
  transform: translateX(-270px);
  padding: 5px 15px;
  background-color: #a00b0b;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  z-index: 2; /* Ensures button stays above the image */
}
.container-btn2 img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This makes the image fill the container */
  display: block;
}

.container-btn2 button {
  position: absolute;
  bottom: 2px;
  right: 0;
  transform: translateX(-15px);
  padding: 2px 15px;
  background-color: #a00b0b;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  z-index: 2; /* Ensures button stays above the image */
}
.container-btn .dofate {
  position: absolute;
  bottom: 20px;
  right: 0;
  transform: translateX(-15px);
  padding: 5px 15px;
  background-color: #a00b0b;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  z-index: 2; /* Ensures button stays above the image */
}
#downdofa:hover{
    background-color: #7a0808;
}

@media (max-width: 1150px) {
   
    .com-left-side, .com-right-side{
        min-width: 100%;
    }
}
@media (max-width: 700px) {
    #shovapoti{
        flex-direction: column;
    }
    .com-left-side, .com-right-side{
        min-width: 100%;
    }
}
@media (max-width: 500px) {
    
    .com-left-side, .com-right-side{
        min-width: 100%;
    }
    .container-btn2{
     transform: scale(.6);
     padding: 0;
    }
    .container-btn{
     transform: scale(.6);
      padding: 0;
    }
}


    .arojanete{
      font-family: ban_regular; width: 150px; background-color: #0e7356; height: 38px; font-size: 20px; color: #fff; border: none; border-radius: 15px; cursor: pointer;
    }
    .arojanete:hover{
      background-color: #0b4b3e; color: #e0e0e0;
    }

.prokasona-body {
   display: flex; gap: 1rem; justify-content: center; margin-left: 15px; margin-right: 15px; flex-wrap: wrap;
}
.prokasona-div1{
  flex: 1; text-align: center; flex-shrink: 1;
}
.prokasona-div1-div{
  display: flex; gap: 1rem; justify-content: center; 
}

.prokasona-div2{
  flex: 1; text-align: left; flex-shrink: 1;
}

  @media (max-width: 900px) {
    .prokasona-body {
      flex-direction: column;
      align-items: center;
    }
    .prokasona-div2 {
      justify-self: center;
      /* text-align: center; */
      width: 100%;
    }
  }
  @media (max-width: 600px) {
    .prokasona-div1-div{
      flex-direction: column;
    }
  }


.links a {
    text-decoration: none;
    color: #ffffff;
}
.links a:hover {
    text-decoration: none;
    color:  #0a785a;
}

.card-content a {
    text-decoration: none;
    color: #0c047e;
}
.card-content a:hover {
    text-decoration: none;
    color: #07263c;
}