/*-body--------------------------------------------------*/

body {
	min-width: 991px;
	font-family: 'Helvetica Neue', Arial, sans-serif !important;
}

main{
overflow-y: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  touch-action: pan-y;
}

a:active {
  background-color: transparent !important; /* or background: none; */
  -webkit-tap-highlight-color: transparent;
}

/*-Header--------------------------------------------------*/

header {
	height: 70px;
}

.navbar {
	height: 70px;
}

.desktop-menu .nav-item.dropdown .dropdown-menu{
 border: none ;
 box-shadow :none;
 border-radius :none;
 padding: 40px;
}

/* --- Path A: Inline-Block Solution --- */

.dropdown-menu .horizontal-list {
    /* Set the container to allow horizontal flow */
    list-style: none;
    padding: 0;
    margin: 0;
    /* Ensure the container behaves like a single wide element */
    white-space: nowrap; 
    overflow-x: auto; /* Optional: adds a scrollbar if the menu is too wide */
}

.dropdown-menu .horizontal-list li {
    /* Key Change: Force list items to sit horizontally */
    display: inline-block !important; 
    
    /* Remove any default margins that might stack vertically */
    float: none !important; 
    
    /* Add spacing between the horizontal list items */
    margin-right: 15px; 
    padding: 0;
    
    /* Prevent the list item from getting a background color on hover */
    background-color: transparent !important;
}

.dropdown-menu  .dropdown-item {
	font-size:16px;
	font-weight:600;
}

ul.dropdown-menu {
	font-size:16px;
	font-weight:600;
    margin-top: 15px !important;
	/*left: auto !important; 
    right: auto !important;
    transform: none !important;*/
}

.dropdown-menu  ul.horizontal-list {
	max-width: none !important;
    overflow-x: visible !important;
}
	
/* Ensure the links are also inline-block to accept padding/margin correctly */
.dropdown-menu .horizontal-list li .dropdown-sub-item {
	font-size:14px;
	font-weight:100;
    display: inline-block; 
    white-space: nowrap; 
    padding: 10px 0 0 0;
	margin-right:30px;
    /*padding: .25rem .5rem;*/ 
}

.desktop-menu .dropdown-toggle::after {
    /* Critical property to remove the arrow */
    content: none; 
}

/* MOBILE FIX: Keep logo absolute/centered ONLY below the desktop breakpoint */

.logo img {
    height: 100%; /* Make the image take 100% of the parent's fixed height */
    width: auto; /* Preserve the aspect ratio */
}

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

	header {
		height: 150px;
	}
	
	.navbar {
		height: 150px;
	}
	
	.logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		height: 70px;
	}
	
	/* Target the specific Toggler button */
	.navbar-toggler {
		/* 1. Remove border */
		border: none !important; 
		
		/* 2. Remove default background color and shadow */
		background-color: transparent !important;
		box-shadow: none !important;
		
		/* Optional: Ensure a clean appearance on focus/active states */
		outline: 0 !important;
	}

	/* Target the Toggler Icon (the "hamburger" icon) */
	.navbar-toggler-icon {
		/* 3. Increase Size */
		/* Adjust width and height to make the icon container larger */
		width: 2em;
		height: 2em; 
		
		/* 2. Make it Black (Override Bootstrap's background image encoding) */
		/* This uses a filtered SVG to change the default white icon to black. */
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
	}
	
	.adj-burger{
		display:inline-block;
		width:37px;
	}
	.offcanvas.offcanvas-start{
		width: 680px !important;	
		bottom: auto !important;		
	}
	
	.offcanvas-header{
		padding:64px 49px 32px !important;
		justify-content: flex-start !important;
	}
	
	.offcanvas-header .btn-close {
		margin: 0 !important; /* Pushes the button to the left edge */
		width: 30px;
		height: 30px;
		/* Scales the X icon image by increasing its size */
		background-size: 30px; 
		
		/* Ensure the icon is vertically centered within the larger button area */
		background-position: center;
	}

	.offcanvas-body{
		padding:10px 49px 45px !important;
		justify-content: flex-start !important;
	}
	.offcanvas-body .nav-item{
		font-size:31pt;
		font-weight:600;
		color:#000;
	}
	.offcanvas-body .dropdown-divider{
		background-color: #6d6e71 !important;
		height: 2px;
	}
	.offcanvas-body .navbar-nav .nav-item 
	{
		line-height:51pt;
	}
	
	.offcanvas-body .dropdown-toggle {
		color: #6d6e71 !important;
		font-size:28pt;
		font-weight:normal;
		line-height:44pt;
	}
	
	.offcanvas-body .fix-margin{
		margin:20px;
	}
	
	.offcanvas-body .dropdown-toggle::after {
		/* Critical property to remove the arrow */
		content: none; 
	}
	.offcanvas-body .dropdown-menu{
		border:none;
		margin:0 !important;
	}
	.offcanvas-body .dropdown-menu .dropdown-item{
		color: #6d6e71 !important;
		font-size:24pt !important;
		font-weight:normal;
		line-height:38pt;
	}
}

/* --- Desktop Styles (>= Large breakpoint: 992px) --- */
@media (min-width: 991px) {
	
    /* 1. Target the main container-fluid */
    .container-fluid {
        /* CRITICAL CHANGE: Use flex-start instead of justify-content-between 
           and let flex-grow and margins control the spacing. */
        justify-content: flex-start !important; 
    }
	
    /* 1. RESET LOGO: Allow Flexbox to position it (Left) */
    .logo {
        position: static; /* Remove absolute positioning */
        left: auto;
        transform: none;
        order: 1; /* Position on the far left */
        margin-right: 20px; /* Add space next to the logo */
        margin-left: 65px; /* Add space next to the logo */
		height: 40px;
    }

    /* 2. DESKTOP MENU: Center (Uses Bootstrap utility classes) */
    /* .mx-auto (margin-left: auto; margin-right: auto;) is added in HTML for centering */
    .desktop-menu {
		order: 2;
        /* Remove the problematic mx-auto from the HTML: mx-auto is not needed here */
        margin-left: 0 !important; 
        margin-right: 0 !important; 
        
        /* CRITICAL: Use flex-grow to push the language selector away */
        flex-grow: 1; 
        
        /* The menu items are aligned to the center within this expanded space */
        justify-content: center !important;
    }
    
    .desktop-menu .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .desktop-menu .nav-link:hover {
        color:#52a4db;
    }

	.navbar-nav .nav-item a:hover{
		color: #52a4db !important; 
	}


    /* 3. LANGUAGE SELECT: Far Right */
    .flag-dropdown {
        order: 3; /* Position on the far right */
        margin-left: auto; /* Pushes the element to the right */
    }
    
    /* Ensure the button is not hidden by the Offcanvas margin adjustment */
    .navbar-toggler {
        display: none !important; 
    }
	
    
	.nav-link.dropdown-toggle{
		box-shadow:none !important;
	}
	
	/* 1. Ensure the dropdown container is the positioning reference */
    .desktop-menu .dropdown {
        position: relative; 
    }

    /* 2. Make the submenu float above the content */
    .desktop-menu .dropdown-menu {
		transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
		
		opacity: 0;       /* Start fully transparent */
        visibility: hidden; /* Prevent interaction when hidden */
		
        /* CRITICAL: Takes the submenu out of the normal document flow */
        position: absolute !important;
        
        /* Position it correctly right below the navigation link */
        top: 100%; 
        left: 0; 
        
        /* Optional: Add a shadow/border for visual separation */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
        z-index: 1000; /* Ensure it appears above everything else */
    }
	
	/* 2. Shown State (Faded In) */
    .desktop-menu .dropdown-menu.show {
        opacity: 1;        /* End fully opaque */
        visibility: visible; /* Make it interactive */
    }
	
    /* 3. If you used the multi-level submenu code: */
    .dropdown-menu .dropdown-submenu .dropdown-menu {
        /* Ensure the sub-submenu also uses absolute positioning */
        position: absolute;
        top: 0;
        left: 100%;
    }
	
}

/*--------------------------
Header -> dropdown
-------------------------------*/
/* Custom CSS - Add this to your style.css or in a <style> tag */
.flag-dropdown {
    color: black !important;
	font-size: 15px;
	font-weight: bold;
}

.flag-dropdown .btn-secondary {
	display: inline-flex; /* Use inline-flex to align items */
    align-items: center;
    background-color: transparent !important;
    color: black !important;
	font-size: 20px;
	font-weight: bold;
    border: none !important;
    box-shadow: none !important; /* Removes focus/active shadow */
    padding: 0; /* Remove default button padding */
    line-height: 1; /* Helps with vertical alignment */
}

.flag-dropdown .btn-secondary:hover {
    background-color: transparent !important;
}

/* 1. Make icon bolder and define its size */
.flag-dropdown #dropdownIcon {
    font-size: 24px; /* Adjust size as needed */
    font-weight: 900; /* Makes the icon look thicker/bolder */
    color: #000; /* Set a specific color if needed */
    vertical-align: middle;
    margin-left: 0.5rem !important; /* Adjust spacing */
}

.flag-dropdown .btn-secondary img,
.flag-dropdown .dropdown-item img {
    width: 35px; /* Set a specific, small width */
    height: 35px; 
    width: auto;
    margin-right: 15px; /* Add spacing between the flag and the text */
    vertical-align: middle;
}

.flag-dropdown .dropdown-item {
	font-size: 20px;
	font-weight: bold;
    padding-left: 0px;
    display: flex;
    align-items: center;
}

.flag-dropdown .dropdown-menu {
    /* 1. Remove border (Bootstrap often uses border-color or border property) */
    border: none !important; 
    
    /* 2. Remove rounded edges (Bootstrap's default border-radius) */
    border-radius: 0 !important;
}


/*--------------------------
Body
--------------------------*/
/*--------------------------
main-Carousel
--------------------------*/

/* Custom CSS - Add this to your style.css */

/* Define a fixed height for the carousel item row */
#carouse-main .carousel-item .row {
    /* Example height: Adjust this value as needed for your design */
    min-height: 400px; 
    /*height: 100%; /* Ensure the row takes available space */
}

/* Ensure the image takes the full height of its column (if needed) */
#carouse-main .carousel-image-content {
    height: 50vw;
	max-height: 561px;
    overflow: hidden; /* Hide anything that spills out */
}

/* Object-fit ensures the image covers the area without distortion */
#carouse-main .carousel-image-content img {
    height: 100%;
    object-fit: cover; /* Important for scaling image to cover column space */
}

/* Object-fit ensures the image covers the area without distortion */
#carouse-main .carousel-text-content {
	padding: 0 0 0 73.6px;
}

/* Custom CSS */

/* Optional: If controls are blending with the background, make them dark */
/* Styles for the button background (The circle) */

#carouse-main .carousel-control-prev,
#carouse-main .carousel-control-next {
	width: 7%;
	/* CRITICAL FIX: Center the circular div within the 7% button width */
    display: flex;             
    justify-content: center;   /* Center horizontally */
    align-items: center;       /* Center vertically */
    
    /* Vertical alignment for the button relative to the carousel */
    top: 50%;
    transform: translateY(-50%);
}

#carouse-main .carousel-control-prev {
    /* Pull the button further left (closer to the edge) */
    left: 0px; 
    /* The default is usually 0, but setting it explicitly is good practice. */
    /* If you want it slightly off the edge, use a small negative value, e.g., -5px */
}

#carouse-main .carousel-control-next {
    /* Pull the button further right (closer to the edge) */
    right: 0px; 
    /* The default is usually 0, but setting it explicitly is good practice. */
    /* If you want it slightly off the edge, use a small negative value, e.g., -5px */
}

#carouse-main .carousel-control-prev-div,
#carouse-main .carousel-control-next-div {
    /* Make the button circular */
    width: 68px; 
    height: 68px; 
    border-radius: 50%; 
    
	/* FIX: Re-enable Flexbox centering for the icon */
    display: flex;             
    justify-content: center;   /* Center horizontally */
    align-items: center;       /* Center vertically */
	
    /* Change background color for visibility */
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent black */
    /* Ensure the button itself is centered vertically within the carousel */
    top: 50%;
    transform: translateY(-50%);
    
    /* Optional: Remove the default hover effect if desired */
    opacity: 1; 
}

/* Styles for the icon inside the button */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* Make the icon color white (standard Bootstrap control icon color) */
    filter: brightness(0) invert(0); /* Forces the SVG icon to white */
    
    /* Optional: Increase icon size if the button is larger */
    width: 1.5rem;
    height: 1.5rem;
}

@media (max-width: 991px) {
	#carouse-main .carousel-image-content {
		height: 79vw;
		max-height: none;
		overflow: hidden; /* Hide anything that spills out */
	}
	#carouse-main .carousel-text-content {
		padding: 99.6px 0 99.6px 73.6px;
	}
}

@media (prefers-reduced-motion: reduce) {
  #carouse-main .carousel-item {
    transition: transform .6s ease !important; /* Adjust time if needed */
  }
}
/*
*/
.bestseller{ 
	position:relative;
}
.d-lg-block .bestseller .bestseller-btn{ 
	position:absolute;
	bottom:50px;
	left:80px;
}

.d-lg-none .bestseller .bestseller-btn{ 
	position:absolute;
	bottom:44px;
	left:0;
	right:0;
	text-align:center;
}



.bestseller-Text{
	color:#52a4db;
	font-size: 30px;
	font-weight: bold;
	height:120px;
	line-height:120px;
	padding-left:60px;
}
/*--------------------------
card carousel
--------------------------*/
.carousel-container {
    position: relative;
    width: 100%; /* Total visible carousel width */
    /*margin: 20px auto;*/
    overflow: hidden; /* CRITICAL: Hides cards outside the view */
}

.home-cat-container {
   padding:0 35px;
}

.carousel-wrapper {
    display: flex;
    /* CRITICAL: Enables the sliding animation */
	transition: transform 0.5s ease-in-out;
}

.card {
    /* Each card is slightly less than 33.33% to show three cards and a peek */
    flex: 0 0 var(--card-width, 600px); 
    text-align: center;
	/* Override Bootstrap's default border */
    border: none !important; 
    /* Set border-radius to 0 as well, just in case */
    border-radius: 0 !important; 
    background-color: transparent !important;
    /* Ensure no residual box shadow is making it look like a border */
    box-shadow: none !important;
	text-decoration:none;
}

.card a{
	text-decoration:none;
}

.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    /* --- NEW STYLES FOR STANDARD CAROUSEL LOOK --- */
    
    /* Increase size to look more prominent */
    width: 68px; 
    height: 68px; 
    border-radius: 50%; 
    
    /* Make background partially transparent by default */
    background-color: rgba(255, 255, 255, 0.8);
    color: white;
    
    /* Use a circle shape */
    border-radius: 50%; 
    
    /* Remove default padding and use flex for centering the text/icon */
    padding: 0; 
    display: flex;
    justify-content: center;
    align-items: center;

    border: none;
    cursor: pointer;
    z-index: 10; /* Ensure buttons are above the cards */

    /* Add hover transition */
    transition: background-color 0.3s, opacity 0.3s;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

.prev-btn:hover, .next-btn:hover {
    background-color: rgba(255, 255, 255, 1);
}

.prev-btn:disabled, .next-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/*--------------------------
scroll-h
--------------------------*/

/* Container to set the viewport width and hide overflow */
.scroll-container {
    width: 100%;
    overflow: hidden; /* Hides the duplicated images initially */
    margin: 70px 0; /* Hides the duplicated images initially */
}

/* Wrapper to hold all images horizontally */
.scroll-wrapper {
    display: flex; /* Adjust speed here (longer time = slower) */
}

/* Style for individual images (Set consistent height) */
.scroll-wrapper img {
    height: 100%;      /* Set your desired fixed height */
    width: auto;        /* Maintain aspect ratio */
    object-fit: cover;
    
    /* CRITICAL: Ensure each image takes an equal, fixed width of the doubled wrapper */
    flex-shrink: 0;
    flex-grow: 0;
}


/* Keyframes for the continuous scrolling loop */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Translate exactly half the width of the wrapper (which is the original content's width) */
        transform: translateX(-50%); 
    }
}

/* Pause on Hover (CSS Method) */
.scroll-container:hover .scroll-wrapper {
    animation-play-state: paused;
}

.carousel-wrapper.home-cat{
	--card-width: 300px !important;
}

.home-cat-name {
	padding-top:70px;
	padding-bottom:20px;
	color:#67a3d7;
	font-size:30px;
	font-weight:bold;
}
.home-cat-img {
	padding:25px 7px 50px;
}
.home-cat-img img{
	width:100%;
}

.vid-header{
	padding:53px 0 53px 49px;
	color:#67a3d7;
	font-size:30px;
	font-weight:bold;
}
.vid-desktop-wrapper {
	display:flex;
	background-color:#eef6fb;
	border-radius:20px;
	margin: 0 42px 73px;
	padding: 29px 0;
	justify-content: center;
}

.vid-desktop-card {
	margin: 0 7px 0;
}

.vid-card-container img{
	width:280px;
	border-radius:20px;
	border: 1px solid black !important; 
}

@media screen and (max-width: 991px) {
	.vid-bg {
		background-color:#eef6fb;
		padding-bottom:40px;
	}
	.vid-card-container img{
		width:540px;
		border-radius:20px;
		border: 1px solid black !important; 
	}
}

/*----------- footer */
	.footer {
		/* Set a background color for the whole footer area */
		color: white;
		background-color:#83bee7;
		margin:0;
		padding:40px 60px 30px 60px;
	}

	.footer a{
		margin-right:55px;
		color: white;
		text-decoration: none;
	}

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


	.footer-content-wrapper {
		/* 1. Make it a Flex Container */
		display: flex; 
		
		/* 2. Push the items to opposite sides */
		justify-content: space-between;
		
		/* 3. Center items vertically if they have different heights */
		align-items: flex-start;
		
		/* Crucial: Constrain the width to prevent it from stretching across the entire viewport */
		/*max-width: 1200px; /* Adjust this based on your design */
		/*margin: 0 auto;    /* Center the whole content block on the page */
		/*padding: 0 20px;   /* Add horizontal padding inside the max-width container */
	}

	.footer p {
		/* Reset default P margin, as discussed previously */
		margin: 0;
	}

	.footer-right {
		padding-right: 60px;
		text-align: left;
	}
	.footer-left {
		text-align: left;
	}
	
	.footer-right-bottom {
		display: flex;
		margin-right:0;
	}
	
	.footer-logo {
		/* Reset default P margin, as discussed previously */
		margin: 0 0 30px;
	}

	.footer-logo img{
		/* Reset default P margin, as discussed previously */
		width: 120px;
	}

	.footer-menu-bold {
		font-size:24px;
		font-weight:bold;
		margin: 0 0 0;
	}
	.footer-menu {
		font-size:18px;
		margin: 0 0 0;
	}
	.footer-menu-distance {
		/* Reset default P margin, as discussed previously */
		height:35px;
	}
	.footer-menu-distance2 {
		/* Reset default P margin, as discussed previously */
		height:100px;
	}
	.footer-community {
		font-size:15px;
		font-weight:bold;
		margin:0 0 10px;
		/*text-align:center;*/
	}
	.footer-icon {
		display: flex;
		justify-content: flex-start;
		gap: 10px; /* Adds space between icons */
	}

	.footer-icon a{
		margin-right:0;
	}

	.footer-icon img{
		width: 20px; 
		height: 25px;
		
		/* The entire icon will fit inside the 32x32 box */
		object-fit: contain;
	}

	.footer hr {
		background-color: rgba(255,255,255,1) !important;
		height: 2px;
		margin-bottom: 30px;
		opacity: 1 !important;
		/* 3. CRITICAL: Zero out all border properties to guarantee removal */
		border: 0;        /* Resets all border properties to zero */
		/* Optional: Ensure any residual styling is gone */
		box-sizing: content-box;
	}


@media screen and (max-width: 991px) {
	.footer {
		/* Set a background color for the whole footer area */
		color: white;
		background-color:#83bee7;
		margin:0;
		padding:96px 49px 55px;
	}

	.footer a{
		margin-right:35px;
		color: white;
		text-decoration: none;
	}

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


	.footer-content-wrapper {
		/* 1. Make it a Flex Container */
		display: flex; 
		
		/* 2. Push the items to opposite sides */
		justify-content: space-between;
		
		/* 3. Center items vertically if they have different heights */
		align-items: flex-start;
		
		/* Crucial: Constrain the width to prevent it from stretching across the entire viewport */
		/*max-width: 1200px; /* Adjust this based on your design */
		/*margin: 0 auto;    /* Center the whole content block on the page */
		/*padding: 0 20px;   /* Add horizontal padding inside the max-width container */
	}

	.footer p {
		/* Reset default P margin, as discussed previously */
		margin: 0;
	}

	.footer-right {
		text-align: right;
	}
	.footer-left {
		text-align: left;
	}
		
	.footer-logo {
		/* Reset default P margin, as discussed previously */
		margin: 0 0 143px;
	}

	.footer-logo img{
		/* Reset default P margin, as discussed previously */
		width: 300px;
	}

	.footer-menu-bold {
		font-size:35px;
		font-weight:bold;
		margin: 0 0 0;
	}
	.footer-menu {
		font-size:35px;
		margin: 0 0 0;
	}
	.footer-menu-distance {
		/* Reset default P margin, as discussed previously */
		height:35px;
	}
	.footer-menu-distance2 {
		/* Reset default P margin, as discussed previously */
		height:265px;
	}

	.footer-community {
		font-size:20px;
		font-weight:bold;
		margin:0 0 20px;
		/*text-align:center;*/
	}
	.footer-icon {
		display: flex;
		justify-content: flex-end;
		gap: 20px; /* Adds space between icons */
	}

	.footer-icon a{
		margin-right:0;
	}

	.footer-icon img{
		width: 40px; 
		height: 40px;
		
		/* The entire icon will fit inside the 32x32 box */
		object-fit: contain;
	}

	.footer hr {
		background-color: rgba(255,255,255,1) !important;
		height: 2px;
		opacity: 1 !important;
		/* 3. CRITICAL: Zero out all border properties to guarantee removal */
		border: 0;        /* Resets all border properties to zero */
		/* Optional: Ensure any residual styling is gone */
		box-sizing: content-box;
	}
}
/* Optional: For smaller screens, you might want the sections to stack */
@media (max-width: 0px) {
    .footer-content-wrapper {
        flex-direction: column; /* Stack vertically */
        text-align: center; /* Center text when stacked */
    }
    
    .footer-left,
    .footer-right {
        width: 100%; /* Make each take full width when stacked */
        text-align: center;
    }

    .footer-left {
        margin-bottom: 15px; /* Add space between links and copyright when stacked */
    }
}

/*   video modal*/
/* Custom styles for your video container */
/* 1. Define the overall size of the container, NOT the aspect ratio */
#videoModal .modal-content {
    background-color: transparent; /* Makes the modal background completely transparent */
    border: none; /* Remove any white border from the modal content box */
}

/* Ensure the modal body is also transparent */
#videoModal .modal-body {
    background-color: transparent;
}

.video-responsive-container {
    position: relative;
    /* Set a reasonable maximum height for the modal content area */
    max-height: 80vh; /* 80% of the viewport height */
    height: 80vh; 
    /*width: 100%;*/
    margin: 0 auto;
    display: flex; /* Use flexbox to center the video vertically/horizontally */
    justify-content: center;
    align-items: center;
}

.video-responsive-container video {
    /* 2. Key Change: Use object-fit: contain */
    /* This makes the video fit *inside* the container without cropping. */
    object-fit: contain; 
    
    /* 3. Ensure the video can use the full dimensions of the container */
    max-width: 100%;
    max-height: 100%;
    
    /* Ensure no residual styles break the scale */
    width: auto; 
    height: auto;
}

/* 4. Optional: Reduce the modal size to better fit portrait content */
#videoModal .modal-dialog {
    /* Allow the modal to be wide, but center the video within it */
    max-width: 800px; 
}


/*-- about --*/

.about-head1{
	font-size:50pt;
	font-weight:regular;
	color:#52a4db;
	padding:0 60px !important;
}

.about-head2{
	font-size:40pt;
	font-weight:200;
	color:#52a4db;
	padding:0 60px !important;
}

.about1{
	font-size:22pt;
	font-weight:regular;
	margin:85px 0 85px;
}

.about2{
	font-size:22pt;
	font-weight:regular;
	margin:85px 0 203px;
}

/*-- category --*/
.category-container{
	padding:0 40px !important;
}

.category-banner{
	background-color:#f7f7f7;
}
.category-banner-img{
	max-height:405px;
	overflow:hidden;
}
.category-banner-img img{
	width:auto;
	height:100%;
}

.d-lg-none:has(.category-banner-mobile-text) {
	font-size:56pt;
	font-weight:600;
	color:#67a3d7;
  position: relative; /* Styles .parent if it contains an element with class .child */
}
	
.category-banner-mobile-text{
	position: absolute;
	top: 85px; /* Align to the top edge of the relative parent */
	left: 49px; /* Align to the right edge of the relative parent */
	z-index: 10; /* Ensures the badge is drawn above the main image */
	/* Optional styling for the badge background/shadow */
	
}

.category-banner-mobile-img{
	height:100vw;
	overflow:hidden;
}
.category-banner-mobile-img img{
	height:100%;
}

.category-banner-text{
	font-size:50pt;
	font-weight:600;
	color:#67a3d7;
}

.category-subgroup{
	font-size:26pt;
	font-weight:600;
	color:#67a3d7;
	padding:30px 49px 15px;
}

.category-subgroup-item{
	font-size:17pt;
	font-weight:600;
	color:#000;
	padding:60px 40px 40px !important;
}

.category-subgroup-item a{
	text-decoration:none;
}


.category-subgroup-item-img{
	position: relative;
}
	
.category-subgroup-item-img img{
	width:80%;
}

.category-subgroup-item-name{
	height:90px;
	color:#000;
}
.category-subgroup-item-shop img{
	width:100%
}

.category-margin-top {
	height:50px;
}

.category-margin-bottom {
	height:160px;
}

.best-seller-tag {
	position: absolute;
	top: 0; /* Align to the top edge of the relative parent */
	right: 0; /* Align to the right edge of the relative parent */
	z-index: 10; /* Ensures the badge is drawn above the main image */
	/* Optional styling for the badge background/shadow */
	padding: 5px 10px;
	/*background: rgba(255, 255, 255, 0.9); /* Slight background for visibility */
	/*border-bottom-left-radius: 8px;
	/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);*/
}

/* Optional: Style the image inside the tag to control its size */
.best-seller-tag img {
	width: 3em; /* Adjust size as needed */
	height: auto;
}
		
/*------- product ------*/

pre {
	white-space: pre-wrap;
	word-wrap: break-word;
	font-family: 'Helvetica Neue', Arial, sans-serif !important;
}

/*
.product-carousel-thumbnail-nav {
    display: flex; 
    justify-content: center; 
    margin-top: 15px; 
    padding: 0 20px;
}

.product-carousel-thumbnail-nav a {
    opacity: 0.6; 
    border: 3px solid transparent; 
    margin: 0 5px;
    transition: all 0.2s ease-in-out;
}

.product-carousel-thumbnail-nav img {
	width: 200px !important;  
    height: 200px !important; 
    object-fit: cover; 
    display: block;
}

.product-carousel-thumbnail-nav a.active,
.product-carousel-thumbnail-nav a:hover {
    opacity: 1; 
    border-color: #007bff; 
}

.product-controls-bottom {
    display: flex; 
    text-align: center;
    margin-bottom: 10px;
}

.product-controls-bottom .carousel-control-prev,
.product-controls-bottom .carousel-control-next {
    position: static; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    opacity: 1; 
    margin: 0 10px;
    background: #333; 
    border-radius: 50%; 
    width: 40px !important;
    height: 40px !important;
    border: none;
}
/**/

/* Style the Thumbnail Wrapper *//* Style the Thumbnail Wrapper */
.product-carousel-thumbnail-nav {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    padding: 0 20px;
}

/* Style the individual Thumbnail Links */
.product-carousel-thumbnail-nav a {
    opacity: 0.6;
    border: 3px solid transparent;
    margin: 0 5px;
    transition: all 0.2s ease-in-out;
}

/* Style the Thumbnail Images */
.product-carousel-thumbnail-nav img {
    width: 200px;
    height: 200px;
    object-fit: cover; /* Keeps original proportions */
    display: block;
}

/* Style the Active Thumbnail */
.product-carousel-thumbnail-nav a.active,
.product-carousel-thumbnail-nav a:hover {
    opacity: 1;
    border-color: #007bff;
}

/* Updated: Style the relocated control buttons wrapper */
.product-controls-bottom {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-left: 100px; /* 100px distance from left side */
}

/* CRITICAL FIX: Style the actual button elements */
.product-controls-bottom .carousel-control-prev,
.product-controls-bottom .carousel-control-next {
    /* 1. Force the position to static to override Bootstrap's default absolute rule */
    position: static !important;
    
    /* 2. Reset any potential lingering absolute positioning values */
    top: auto !important; 
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    display: inline-flex;
    align-items: center; 
    justify-content: center;
    opacity: 1;
    background: white; /* White background */
    border: 1px solid black; /* 1px black border */
    border-radius: 50%;
    width: 70px; /* Button size 70px */
    height: 70px; /* Button size 70px */
}

/* Prev button: 20px margin-right to create 20px gap from next button */
.product-controls-bottom .carousel-control-prev {
    margin-right: 20px;
}

/* Next button: no left margin needed */
.product-controls-bottom .carousel-control-next {
    margin-left: 0;
}

/* Ensure the icons are sized and visible */
.product-controls-bottom .carousel-control-prev-icon,
.product-controls-bottom .carousel-control-next-icon {
    width: 1rem; 
    height: 1rem;
    /* Make icons black for visibility on white background */
    filter: brightness(0); /* Makes the icon black */
}

/* product detail wrapper */
.product-detail-wrapper{
	padding:40px 80px;
}

/* producct name text */
.product-name-text{
	font-size:33pt;
	font-weight:600;
	color:#000;
	padding-bottom:25px;
}

.product-size{
	padding-bottom:25px;
}
	
.product-size img{
	margin-right:25px;
	width:135px;
}

.product-size-inactive{
	border:0.5pt solid #67a3d7;
}

.product-size-active{
	border:0.8pt solid #000;
}

/* product shop button */
.product-shop-button{
    margin-top: 20px;
	width:100%;
}

/* product thumbnail */

/* Thumbnail Container: Scrollable horizontal navigation bar */
#custom-thumbnails {
    display: flex;
    justify-content: flex-start;
    margin-top: 1.5rem; /* Spacing below the main carousel */
    padding: 0 1rem;
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Prevent vertical scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: thin; /* Thin scrollbar for Firefox */
    scrollbar-color: #888 transparent; /* Scrollbar color for Firefox */
}

/* Custom scrollbar styling for webkit browsers (Chrome, Safari, Edge) */
#custom-thumbnails::-webkit-scrollbar {
    height: 8px; /* Height of horizontal scrollbar */
}

#custom-thumbnails::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

#custom-thumbnails::-webkit-scrollbar-thumb {
    background: #888; /* Gray scrollbar thumb */
    border-radius: 4px; /* Rounded corners */
}

#custom-thumbnails::-webkit-scrollbar-thumb:hover {
    background: #555; /* Darker on hover */
}
.product-carousel{
    margin-top: 50px;
}
.product-carousel-card{
	border: 1px solid #ddd !important;
	border-radius: 0;
    margin: 0 20px;
}
/* Individual Thumbnail Link: Sets up the interaction and border */
.thumb-link {
    /* Make the links flexible containers to center the image */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Inactive state styles */
    opacity: 0.6; 
    border: 1px solid transparent; /* Border placeholder */
    margin: 0 5px;
    
    /* Define the overall size of the clickable area */
    width: 200px; /* 200px × 200px */
    height: 200px;
    flex-shrink: 0; /* Prevent thumbnails from shrinking */ 

    cursor: pointer;
    transition: all 0.2s ease-in-out;
    /*border-radius: 0.25rem; /* Subtle rounding */
    overflow: hidden; /* Hide anything outside the box */
}

/* Thumbnail Image: Ensures the image fills the container */
.thumb-link img {
    /* Use 100% width/height of the parent link */
    width: 100%;
    height: 100%; 
    
    /* Cover the container completely, may crop parts of the image */
    object-fit: cover; 
    
    display: block;
}

/* Active State: 1px black border on active item */
.thumb-link.active {
    opacity: 1; /* Fully opaque */
    border: 1px solid black; /* 1px black border */
}

/* Hover State */
.thumb-link:hover {
    opacity: 1; /* Fully opaque */
}

/* 1. Wrapper: Centers the buttons horizontally and resets container styles */
.custom-controls-bottom {
    /* Use flexbox to align content */
    display: flex; 
    align-items: center;
    
    /* Add vertical space above the controls */
    margin-top: 15px; 
    margin-bottom: 10px;
    margin-right: 100px; /* 100px distance from left side */
    
    justify-content: flex-end;
    /* Ensure the wrapper flows normally */
    position: relative;
    /* Contain positioned children */
    overflow: visible;
}

/* 2. Buttons: Force the buttons to ignore absolute/fixed positioning */
/* We target the buttons using their custom classes (prev-btn, next-btn) */
.custom-controls-bottom .prev-btn,
.custom-controls-bottom .next-btn {
    /* CRITICAL FIX: Overrides any default absolute positioning from Bootstrap-like styles */
    position: static !important; 
    
    /* Reset positioning properties that might cause issues */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    
    /* Ensure they line up horizontally */
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    /* Aesthetics and spacing */
    opacity: 1;
    background: white; /* White background */
    border: 1px solid black; /* 1px black border */
    border-radius: 50%;
    width: 70px; /* Button size 70px */
    height: 70px; /* Button size 70px */
    cursor: pointer;
    transition: background-color 0.2s;
}

/* Prev button: 20px margin-right to create 20px gap from next button */
.custom-controls-bottom .prev-btn {
    margin-right: 20px;
}

/* Next button: no left margin needed */
.custom-controls-bottom .next-btn {
    margin-left: 0;
}

.custom-controls-bottom .prev-btn:hover,
.custom-controls-bottom .next-btn:hover {
    background-color: #f0f0f0; /* Light gray hover effect for white background */
}

/* Ensure the icon inside the span is visible */
.custom-controls-bottom .carousel-control-prev-icon,
.custom-controls-bottom .carousel-control-next-icon {
    width: 1.5rem;
    height: 1.5rem;
    background-size: 100% 100%;
    /* Make icons black for visibility on white background */
    filter: brightness(0); /* Makes the icon black */
}

/*--------------------------
Product Accordion
--------------------------*/
.product-accordion-wrapper {
    padding: 40px 0;
}

.accordion {
    --bs-accordion-border-color: #dee2e6;
    --bs-accordion-border-radius: 0;
    --bs-accordion-transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.accordion-item {
    border: none;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    overflow: hidden;
    border: 0px solid #fff !important;;
    border-radius: 0 !important;
}

.accordion-item:hover {
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);*/
}

.accordion-header .accordion-button {
    background-color: #fff;
    border-left: 0px solid #fff !important;
    border-right: 0px solid #fff !important;
    border-top: 0px solid #fff !important;
    border-bottom: 1px solid #979797;
    color: #67a3d7 !important;
    font-weight: 600;
    padding: 20px 0;
    font-size: 26pt;
    transition: all 0.3s ease;
    position: relative;
    border-radius: 0 !important;
}

.accordion-button::after {
    /*transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);*/
}

.accordion-button:hover {
    /*background-color: #f0f0f0;*/
    /*transform: translateX(2px);*/
}

.accordion-header .accordion-button:not(.collapsed) {
    background-color: #fff;
    color: #000;
    box-shadow: none;
}

.accordion-button:focus {
    border-bottom-color: #979797;
    box-shadow: none;
}

.accordion-collapse {
    transition: height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 0px solid #fff !important;
    border-radius: 0 !important;
}

.accordion-collapse .accordion-body {
    padding: 20px 0;
    font-size: 18pt;
    line-height: 1.6;
    border-radius: 0 !important;
}

/* Fade in animation when expanding */
.accordion-collapse.show .accordion-body {
    /*animation: fadeIn 0.4s ease-in-out;*/
}

.product-suggest-wrapper {
	padding: 40px 0;
}

.product-suggest-container {
	padding: 0 40px !important;
}

.product-suggest {
	font-size: 17pt;
	font-weight: 600;
	color: #000;
	padding: 30px 40px 40px !important;
}

.product-suggest a {
	text-decoration: none;
}

.product-suggest-img {
	text-align: center;
}

.product-suggest-img img {
	width: 80%;
}

.product-suggest-name {
	height: 90px;
	color: #000;
}

.product-suggest-shop img {
	width: 100%;
}
/*

.category-container{
	padding:0 40px !important;
}

.category-banner-text{
	font-size:50pt;
	font-weight:600;
	color:#67a3d7;
}

.category-subgroup{
	font-size:26pt;
	font-weight:600;
	color:#67a3d7;
	padding:30px 49px 15px;
}

.category-subgroup-item{
	font-size:17pt;
	font-weight:600;
	color:#000;
	padding:60px 40px 40px !important;
}

.category-subgroup-item a{
	text-decoration:none;
}

.category-subgroup-item-img img{
	width:80%;
}

.category-subgroup-item-name{
	height:90px;
	color:#000;
}
.category-subgroup-item-shop img{
	width:100%
}
*/

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 991px) {
    .product-accordion-wrapper {
        padding: 20px 0;
    }
    
    .accordion-button {
        padding: 15px 0;
        font-size: 21pt;
    }
    
    .accordion-body {
        padding: 15px 0;
        font-size: 18pt;
    }
}