/* Apply box-sizing to all elements to avoid overflow */
*,
*::before,
*::after {
    box-sizing: border-box;
}


/***
====================================================================
.	Special Code Section
====================================================================
***/

	
/* Full-Width Background for Special Code Section */
.special-code-background {
    width: 100vw;
    background-color: #ABABAB; /* Background color for the full-width section */
    padding: 40px 0; /* Adds space above and below the inner content */
    display: flex;
    justify-content: center;
}

/* Centered Box within the Special Code Background */
.special-code-section {
    width: 400px; /* Fixed width for the inner content */
    background-color: #ffffff; /* Background color for the inner box */
    border: 2px solid #000000; /* Border around the inner box */
    padding: 20px;
    text-align: center;
    border-radius: 8px; /* Optional: rounded corners */
}

/* Text Styling */
.special-code-text {
    font-size: 20px;
    font-weight: bold;
    color: #333;
	line-height: 1.2;
}

.special-code-subtext {
    font-size: 13px;
    font-style: italic;
    color: #333;
    margin-bottom: 15px;
	line-height: 1.2;
}

/* Input Box Styling */
.code-input {
    font-size: 32px;
    padding: 10px;
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
    border: 2px solid #888;
    border-radius: 5px;
}

/* Title Caption Bar */
.caption-bar {
    background-color: black; /* Black background */
    color: white; /* White text */
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin: -20px -20px 20px -20px; /* Align with outer borders */
}

/***
====================================================================
.	Purchase Items Container
====================================================================
***/

/* Gallery Item Container */
.gallery-item {
	display: flex;
    flex-direction: column;
    position: relative;
    width: 330px; /* Adjust as needed */
    cursor: pointer;
    overflow: hidden;
    border: 2px solid #000; /* Border around each gallery item */
    border-radius: 8px; /* Optional: Adds rounded corners */
    margin: 10px; /* Adds space between items */
	padding: 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
}

/* Image Styling */
.gallery-image {
	margin: 0px;
	padding: 0px;
    width: 100%;   /* 350px */
    height: auto;
    display: block;
	object-fit: cover;
}

/* Top Banner for Status */
.status-banner {
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 1px 0;
    text-align: center;
    font-weight: bold;
	font-size: 16px;
    z-index: 1;
}
	
.status-open {
	background-color: rgba(0,100,30,0.80);
    color: white;
	}
	
.status-closing {
	background-color: rgba(190,118,0,0.80);
    color: white;
	}
	
.status-closed {
	background-color: rgba(161,0,0,0.80);
    color: white;
	}

.status-private {
	background-color: rgba(99,0,137,0.80);
    color: white;
	}

/* Bottom Information Box */
.info-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px;
    text-align: center;
    font-size: 16px;
    z-index: 1;
}

.info-box p {
    margin: 0;
}
	
.title_name {
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
}
	
.title_school {
	font-size: 15px;
	font-weight: normal;
	line-height: 16px;
}
	
.title_extra {
	font-size: 14px;
	font-weight: bold;
	color: black;
    background-color: rgba(255,159,2,0.90);	
    display: inline; /* Ensures background is only around the text */
    padding: 2px; /* Optional: Adds some space around the text */
    border-radius: 3px; /* Optional: Rounds the background edges */
}

.info-box .title_school {
    margin: 5px 0;
}


/* Base styles for all icons */
.icon {
    display: inline-block;
    background-size: contain; /* Ensures the image fits the element */
    background-repeat: no-repeat;
    width: 32px; /* Default width */
    height: 32px; /* Default height */
    vertical-align: middle;
	color: white;
}

/* Individual icons */
.icon-blank {
    background-image: url('/images/icons/icon-blank.png');
}

.icon-email {
    background-image: url('/images/icons/icon-email.png');
}

.icon-facebook {
    background-image: url('/images/icons/icon-facebook.png');
}

.icon-youtube {
    background-image: url('/images/icons/icon-youtube.png');
}

.icon-instagram {
    background-image: url('/images/icons/icon-instagram.png');
}

.icon-telephone {
    background-image: url('/images/icons/icon-telephone.png');
}

.icon-tiktok {
    background-image: url('/images/icons/icon-tiktok.png');
}

.icon-website {
    background-image: url('/images/icons/icon-website.png');
}

.icon-whatsapp {
    background-image: url('/images/icons/icon-whatsapp.png');
}

.icon-logo-1 {
    background-image: url('/images/icons/icon-logo-1.png');
}

.icon-logo-2 {
    background-image: url('/images/icons/icon-logo-2.png');
}

.icon-photography {
    background-image: url('/images/icons/photography.png');
}

.icon-videography {
    background-image: url('/images/icons/videography.png');
}

.icon-development {
    background-image: url('/images/icons/development.png');
}

.icon-illustration {
    background-image: url('/images/icons/illustration.png');
}

.icon-print {
    background-image: url('/images/icons/print.png');
}

.icon-consulting {
    background-image: url('/images/icons/consulting.png');
}

.inner-box:hover .icon-photography {
    background-image: url('/images/icons/photography2.png');
}

.inner-box:hover .icon-videography {
    background-image: url('/images/icons/videography2.png');
}

.inner-box:hover .icon-development {
    background-image: url('/images/icons/development2.png');
}

.inner-box:hover .icon-illustration {
    background-image: url('/images/icons/illustration2.png');
}

.inner-box:hover .icon-print {
    background-image: url('/images/icons/print2.png');
}

.inner-box:hover .icon-consulting {
    background-image: url('/images/icons/consulting2.png');
}


/* Example for size variations */
.icon-s {
    width: 16px;
    height: 16px;
}

.icon-m {
    width: 20px;
    height: 20px;
}

.icon-l {
    width: 64px;
    height: 64px;
}

.inner-box:hover h6 {
	color: black;
}


.swiper-container {
    width: 100%; /* Full width for the container */
    height: 400px; /* Optional: Adjust if needed */
	overflow: hidden; /* Ensure the images don’t overflow */
	position: relative; 
}

.swiper-slide img {
    width: 100%; /* Ensure images are responsive */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure image doesn't get cropped */
}

/* Style navigation buttons within the Swiper container */
.swiper-button-next, .swiper-button-prev {
    color: #000; /* Change button color (optional) */
    top: 50%; /* Center buttons vertically */
    transform: translateY(-50%); /* Center buttons relative to the container */
    width: 40px; /* Set button size */
    height: 40px;
    background: rgba(255, 255, 255, 0.8); /* Background for better visibility */
    border-radius: 50%; /* Make buttons round */
    z-index: 10; /* Ensure buttons appear above images */
}

/* Ensure buttons are inside the left column */
.swiper-button-next {
    right: 10px; /* Align next button to the right edge of the Swiper */
}
.swiper-button-prev {
    left: 10px; /* Align previous button to the left edge of the Swiper */
}

/* Style pagination dots (position indicator) */
.swiper-pagination {
    bottom: 10px; /* Position pagination dots at the bottom of the container */
    text-align: left; /* Align pagination dots to the left column */
    width: 100%; /* Make sure pagination takes up full width of Swiper */
    padding-left: 10px; /* Add padding for alignment */
}

.item-description {
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: white;
	margin: 0px;
}

.item-description-p {
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: white;
}

.item-description-heading {
	font-weight: 600;	
	font-size: 18px;
	line-height: 18px;
	color: white;
}

.item-button {
	padding: 1px 0px 0px 0px; /* Adds padding around the text */
    display: inline-block; /* Ensures the button behaves like an inline element */
	align-self: flex-start; /* Ensure the button doesn't stretch in flexbox */
    line-height: 1; /* Fix the line height for the button text */
	color: #faa61e;
	font-size: 22px;
	text-decoration: none; /* Remove underline from the button text */
    transition: color 0.3s ease; /* Smooth transition for the hover effect */
}

.item-button:hover {
    color: white; 
}

.item-price {
	font-weight: 600;	
	font-size: 18px;
	line-height: 18px;
	color: white;
}

.menu-item {
	font-weight: 400;	
	font-size: 14px;
	line-height: 18px;
	color: white;
	text-decoration: none;
}

.page-banner .image-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
}

.page-banner .shape-1 {
  position: absolute;
  right: 0;
  top: 0;
  width: 250px;
  max-width: 100%;
  height: 100%;
  background: url(../../images/b-shape-1.png) right bottom no-repeat;
  z-index: 1;
}

.page-banner .shape-2 {
  position: absolute;
  right: 0;
  top: 0;
  width: 250px;
  max-width: 100%;
  height: 100%;
  background: url(../../images/b-shape-2.png) right top no-repeat;
  z-index: 1;
}

.page-banner .banner-inner {
  position: relative;
  display: block;
  text-align: center;
  z-index: 3;
}

.page-banner .inner-container2 {
  position: relative;
  padding: 60px 0px 30px;
}

.page-banner-h1 {
  font-family: "Rubik", sans-serif;
  position: relative;
  font-size: 50px;
  color: #ffffff;
  line-height: 0.9em;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}


table.cart-table {
    width: 100%; /* Spread table across the container */
    table-layout: auto; /* Let the browser adjust column width based on content */
}

table.cart-table th, table.cart-table td {
    padding: 5px; /* Adds space between the content and the borders of cells */
    text-align: left; /* Align the text to the left inside each cell */
}

table.cart-table {
    border-collapse: collapse; /* Optional: Remove space between table cells */
}

.cart_item_picture {
	width: 13%;
}

.cart_item_picture2 {
	width: 6%;
}

.cart_item_productid {
	width: 15%;
}

.cart_item_description {
	width: 35%;
}

.cart_item_qty {
	width: 16%;
}

.cart_item_qty2 {
	width: 8%;
}

.cart_item_price {
	width: 10%;
}

.cart_item_total {
	width: 10%;
}

.cart_item_remove {
	width: 8%;
}

.cart_item_status {
	width: 22%;
}

.cart-desc-1 {
	font-weight: 600;
	font-size: 16px;
	line-height: 16px;
	margin: 0px;
	padding: 0px;
}

.cart-desc-2 {
	font-weight: 400;
	font-size: 16px;
	line-height: 16px;
	margin: 0px;
	padding: 0px;
}

.field-inner2 input[type=text] {
  width: 100%;
  border-radius: 8px;
  background-color: #F0EAC2 !important;
  height: 40px;
  padding: 0 10px !important;
  font-size: 14px;
  color: #000000 !important;
  font-weight: 400;
  font-family: "Rubik", sans-serif;
  margin-bottom: 2px !important;
  border: 1px solid #ccc;
  transition: background-color 0.3s, border-color 0.3s;
}

.bank-details-left {
	font-weight: bold;
	font-size: 13px;
	line-height: 14px;
}

.bank-details-right {
	font-weight: normal;
	font-size: 13px;
	line-height: 14px;
}

.remove-icon {
    color: black; /* Default color */
    cursor: pointer;
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

.remove-icon:hover {
    color: red; /* Change to red on hover */
}

/* Make the table scrollable on small screens */
.table-responsive {
    overflow-x: auto;
}

.filter-list.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 👈 centers the items */
    gap: 20px; /* optional spacing between items */
}

.policy-content {
  max-width: 900px;
  margin: auto;
}

.policy-content h1,
.policy-content h2 {
  color: #000;
}

.policy-content h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
}

.policy-content h2 {
  font-size: 1.4em;
  margin-top: 1.5em;
}

.policy-content h4 {
  font-size: 3em;
  margin-top: 1.5em;
  color: white;
}

.policy-content p,
.policy-content ul {
  margin-bottom: 1em;
}

.policy-content ul {
  padding-left: 1.5em;
}

.policy-content .section-divider {
  border-top: 1px solid #ccc;
  margin: 2em 0;
}

.warning-banner {
  background-color: #B11818;
  color: white;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  font-weight: bold;
  padding: 12px;
}

.warning-banner p {
  margin: 0;
  line-height: 1.5;
}

.filter-controls select.filter {
    font-family: var(--thm-b-font); /* Or replace with a real font name */
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    appearance: none;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.filter-controls select.filter:focus {
    border-color: #888;
    box-shadow: 0 0 5px rgba(136, 136, 136, 0.5);
}

@media (prefers-color-scheme: dark) {
    .filter-controls select.filter {
        background-color: #222;
        color: #eee;
        border: 1px solid #555;
    }

    .filter-controls select.filter:focus {
        border-color: #888;
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }
}

.filter-controls .col-md-3 {
    margin-bottom: 15px;
}

.filter-box {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.filter-label {
    margin-right: 10px;
    white-space: nowrap;
    font-weight: bold;
    min-width: 60px;
    color: #333;
}

.filter-controls select.filter {
    flex: 1;
    font-family: var(--thm-b-font); /* Or replace with a fallback font */
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    appearance: none;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.filter-controls select.filter:focus {
    border-color: #888;
    box-shadow: 0 0 5px rgba(136, 136, 136, 0.5);
}

@media (prefers-color-scheme: dark) {
    .filter-label {
        color: #eee;
    }

    .filter-controls select.filter {
        background-color: #222;
        color: #eee;
        border: 1px solid #555;
    }

    .filter-controls select.filter:focus {
        border-color: #888;
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }
}

@media (max-width: 768px) {
    .cart-table {
        display: none;
    }
    .cart-mobile-view {
        display: block;
    }
}

.cart-mobile-item {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}
.cart-mobile-img img {
    width: 60px;
    height: auto;
    margin-right: 15px;
}
.cart-mobile-details {
    flex: 1;
}
.cart-mobile-details p {
    margin: 4px 0;
	line-height: 18px;
	padding: 0px;
}
.cart-mobile-details .quantity-box {
    display: flex;
    align-items: center;
}
.cart-mobile-details input[type="number"] {
    width: 50px;
    margin: 0 5px;
}