html {
scroll-behavior: smooth;
}

/* * {
	box-sizing: border-box;
} */

body {
font-family: Arial, sans-serif;
background: #f2f2f2;
/* padding: 20px; */
margin: 0;
}

.button {
	border: none;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 4px 2px;
}

/* Button Styling */
.btn-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 30px;
}

.btn-container button {
flex: 1 1 140px;
min-width: 120px;
max-width: 180px;
padding: 10px 20px;
border: none;
background: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}

.btn-container button:hover {
background: #0056b3;
}

.btn-container button:disabled {
background: #ccc;
cursor: not-allowed;
}

/* Close Button */
.close-btn {
position: absolute;
top: 16px;
right: 12px;
width: 30px;
height: 30px;
display: flex;
color: #cc0000;
align-items: center;
justify-content: center;
cursor: pointer;
}

.close-btn i{
	font-size: 20px;
}

.close-btn:hover {
background-color: #cc0000;
color: #fff;
border-radius: 6px;
}



hr {
    border: none; /* Removes the default border */
    height: 4px; /* Adjust thickness */
	background-color: #FFAA00; /* Change to your preferred color; or use the gradient below */
    background: linear-gradient(to right, #2c17b1, #FFAA00);
}



/* Backdrop */
/* .overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 998;
} */

.wrapper-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.wrapper {
	flex: 1 1 calc(33.33% - 20px); /* 3 Columns with spacing */
	background: #fff;
	padding-left: 20px;
	padding-right: 20px;
	max-height: auto;
	align-items: stretch;
	
	/* flex: 1 1 100%; /* or 50%, 33.33% depending on the layout */ */
	/* display: flex; */
	/* flex-direction: column; */
	/* height: 100%;  */ /* stretch to match the tallest in the row */
}

.wrapper-flex-inc {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.wrapper-inc {
	flex: 1 1 calc(33.33% - 20px); /* 3 Columns with spacing */
	background: #fff;
	padding-left: 20px;
	padding-right: 20px;
	height: 400px;
	align-items: stretch;
}



/* Gradient border */
.box {
        position: relative;
        transform-style: preserve-3d;
        border-radius: 10px;
        width: 200px;
        min-height: 300px;
        background-color: rgb(255, 255, 255);
        padding: 20px;
        margin: 20px;
        transition: transform 0.3s ease;
      }
	  
	  .box::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: linear-gradient(
          40deg,
          #fafa00,
          #f79d03,
          #ee6907,
          #e6390a,
          #de0d0d,
          #d61039,
          #cf1261,
          #c71585,
          #cf1261,
          #d61039,
          #de0d0d,
          #ee6907,
          #f79d03,
          #ffd700,
          #ffd700,
          #ffd700
        );
        filter: blur(4px);
        transform: translate3d(0px, 0px, -10px);
        border-radius: inherit;
        pointer-events: none;
        transition: transform 0.3s ease;
      }
      .box:hover {
        transform: translateY(-15px);
      }
      .box:hover::before {
        transform: translate3d(5px, 5px, -10px);
      }

/* Modal Main Container */
.main-container {
display: none;
opacity: 0;
transition: opacity 0.5s ease;
width: 90%;
max-width: 500px;
background: white;
border-radius: 20px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
z-index: 999;
max-height: 70vh;
overflow: hidden;
}

/* When modal is visible */
.main-container.show {
display: flex;
opacity: 1;
}

/* Sticky Header */
.modal-header {
position: sticky;
top: 0;
z-index: 2;
background: #333;
padding: 10px 5%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
font-size: 18px;
font-weight: bold;
}

.modal-title {
color: #FFAA00;	
text-transform: uppercase;
font-size: 1.6em;
font-weight: 600;
font-style: bold;
}

/* Sticky Footer */
.modal-footer {
position: sticky;
bottom: 0;
z-index: 2;
background: #333;
padding: 20px 5%;
border-top: 1px solid #eee;
font-size: 14px;
}

.footer-text{
	position: absolute;
	color: #FFAA00;
	left: 2%;
}

/* Scrollable Content */
.sub-container {
	max-height: 50vh;
	overflow-y: scroll;
	flex: 1;
	padding: 5%;
	scroll-behavior: smooth;
	animation: fadeIn 0.5s ease-in-out;
	/*If this enables, ios devices hides the scrollbar, ios limitation */
	/* -webkit-overflow-scrolling: touch; */ 
}

/* Scrollbar Styling (Cross-browser) */
.sub-container {
scrollbar-width: thick;
scrollbar-color: #2c17b1 transparent;
}

/* Webkit Scrollbar - Auto-hide using overlay trick */
.sub-container::-webkit-scrollbar {
width: 10px;
}

.sub-container::-webkit-scrollbar-track {
background: transparent;
}

.sub-container::-webkit-scrollbar-thumb {
background-color: #2c17b1;
border-radius: 6px;
opacity: 1;
transition: opacity 0.3s ease;
}

/* Show scrollbar only when scrolling */
.sub-container:hover::-webkit-scrollbar-thumb {
opacity: 1;
}

@supports(-webkit-touch-callout:none) {
	.sub-container {
		overflow-y: scroll !important;
	}
}

/* Fade-in Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* Responsive Tweaks */
@media (max-width: 600px) {
.btn-container {
flex-direction: column;
align-items: center;
}

.btn-container button {
width: 80%;
font-size: 16px;
}

.main-container {
width: 95%;
max-height: 85vh;
z-index: 3;
}

.modal-header, .modal-footer{
	font-size: 16px;
}

.close-btn {
font-size: 24px;
}
}	

/* Responsive for Tablets (iPad Portrait and Landscape) */
@media (max-width: 1024px) {
	.wrapper {
		flex: 1 1 calc(50%-20px); /* 2 Columns */
	}
	
	.wrapper-flex {
		display: flex;
		flex-wrap: wrap;
	}
}

@media (max-width: 768px) {
	.wrapper {
		flex: 1 1 100%; /* 1 Column on smaller screens */
	}
	
	.wrapper-flex {
		display: flex;
		flex-wrap: wrap;
	}
}


/* @media (min-width: 768px) and (max-width: 1024px) {
	.wrapper-flex {
		display: flex;
		flex-wrap: wrap;
	}
}	 */