* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
.social-wrapper {
	position: fixed;
	bottom: 30px;
	right: 35px;
	width: 60px;
	height: 60px;
	z-index: 1000;
}

.main-icon img {
	width: 60px;
	height: 60px;
	cursor: pointer;
	z-index: 2;
	position: relative;
}

.social-icons {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 60px;
	height: 60px;
	z-index: 1;
	pointer-events: none;
}

.social-icons a {
	position: absolute;
	width: 48px;
	height: 48px;
	opacity: 0;
	transform: scale(0);
	transition: all 0.4s ease;
	pointer-events: auto;
}

/* Hover effect with staggered delay */
.social-wrapper:hover .social-icons a:nth-child(1) {
	transform: translate(-70px, 0) scale(1);
	opacity: 1;
	transition-delay: 0.07s;
}

.social-wrapper:hover .social-icons a:nth-child(2) {
	transform: translate(-50px, -50px) scale(1);
	opacity: 1;
	transition-delay: 0.18s;
}

.social-wrapper:hover .social-icons a:nth-child(3) {
	transform: translate(0, -70px) scale(1);
	opacity: 1;
	transition-delay: 0.29s;
}

.social-wrapper:hover .social-icons a:nth-child(4) {
	transform: translate(50px, -50px) scale(1);
	opacity: 1;
	transition-delay: 0.39s;
}

.social-icons img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: transform 0.3s;
}

.social-icons img:hover {
	transform: scale(1.1);
}

/* popup when website opens */
#popup-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

/* Popup box */
#popup-box {
	background: #fff;
	padding: 20px;
	border-radius: 8px;
	max-width: 400px;
	text-align: center;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	position: relative;
}

/* Close button */
#popup-close {
	position: absolute;
	top: 10px;
	right: 15px;
	background: none;
	border: none;
	font-size: 40px;
	cursor: pointer;
}

#popup-box img {
	max-width: 100%;
	height: auto;
	margin-bottom: 15px;
}

/* marquee */
.marquee {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	background: #222;
	color: #fff;
	padding: 10px 0;
	font-size: 1.2rem;
}

.marquee-text {
	display: inline-block;
	padding-left: 100%;
	animation: scroll-left 90s linear infinite;
}
@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* reservation form */
.ssform {
	height: 20vh;
	width: 90vw;
	margin: auto;
	/* border: 2px solid black; */
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06)
		0px 0px 0px 1px;
	margin-top:3vh;
}

.ssform>form {
	height: 100%;
	width: 100%;
	background-color: rgb(249, 249, 249);
	display: flex;
	justify-content: space-between;
	border-radius: 20px;
	padding: 0px 2%;
}

.ssform1 {
	height: 100%;
	width: 38%;
	/* border: 5px solid red; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	
}

.ssform2 {
	height: 100%;
	width: 38%;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5%;
}

.ssform3 {
	height: 100%;
	width: 20%;
	/* border: 5px solid red; */
	display: flex;
	justify-content: center;
	align-items: center;
}

.ssform-input {
	padding: 4% 4%;
	border-radius: 20px;
	border: 1px solid gray;
	cursor: pointer;
}

.ssform-inputbtn {
	padding: 4% 18%;
	border-radius: 20px;
	border: 1px solid gray;
	cursor: pointer;
	background-color: rgba(7, 55, 158, 0.801);
	color: white;
	font-weight: bold;
	border: none;
	outline: none;
}

@media ( max-width : 900px) {
	.ssform {
		height: 40vh;
	}
	.ssform>form {
		height: 40vh;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.ssform-input {
		width: 100%;
	}
	.ssform1, .ssform2 {
		width: 100%;
	}
	.ssform-inputbtn {
		padding: 10% 29%;
	}
}



















.ssection {
  margin: 0;
  font-family: "Georgia", serif;
  background: #f5f3ec;
  color: #2d1d17;
  margin-top:4vh;
}

.scontainer {
  max-width: 1300px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
}

.ssubtitle {
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.stitle {
  font-size: 2.8rem;
  margin-bottom: 50px;
  font-weight: bold;
}

.sdepartments-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #e0dcd4;
  border-left: 1px solid #e0dcd4;
}

.scard {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 40px 20px;
  border-right: 1px solid #e0dcd4;
  border-bottom: 1px solid #e0dcd4;
  transition: all 0.3s ease;
}

.scard .sicon {
  width: 70px;
  height: 70px;
  background: #3399cc;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  margin: 0 auto 20px;
}

.scard h3 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: bold;
}

.scard p {
  color: #555;
}

.scard:hover,
.scard.shighlight:hover {
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-radius: 25px;
}

.scard.shighlight {
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.scard.shighlight .sicon,
.sicon.syellow {
  background: #3399cc;
}

/* Responsive */
@media (max-width: 992px) {
  .sdepartments-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .sdepartments-grid {
    grid-template-columns: 1fr;
  }
  .stitle {
    font-size: 2rem;
  }
}

.scard:hover .sicon {
  background: #f4b400;
}








/* ss-section-2 */



    .ss-section-2 {
        font-family: "Inter", sans-serif;
        background-color: #f8f8f8; /* Light gray background to match the image */
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 4rem 1rem; /* Equivalent to py-16 px-4 */
        margin: 0; /* Reset default body margin */
      }

      .ss-section-header {
        text-align: center;
        margin-bottom: 3rem; /* Equivalent to mb-12 */
      }

      .ss-section-subtitle {
        font-size: 1rem; /* Equivalent to text-sm */
        font-weight: 400; /* Equivalent to font-normal */
        color: #666;
        margin-bottom: 0.5rem;
      }

      .ss-section-title {
        font-size: 2.5rem; /* Equivalent to text-4xl */
        font-weight: 700; /* Equivalent to font-bold */
        color: #333;
      }

      .ss-grid-container {
        display: grid;
        gap: 1.5rem; /* Equivalent to gap-6 */
        grid-template-columns: repeat(
          1,
          1fr
        ); /* Default to single column for mobile */
        max-width: 72rem; /* Equivalent to max-w-6xl */
        width: 100%; /* Equivalent to w-full */
      }

      .ss-card {
        border-radius: 0.5rem; /* Equivalent to rounded-lg */
        padding: 1.5rem; /* Equivalent to p-6 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        min-height: 180px; /* Ensure consistent card height */
        transition: transform 0.3s ease-in-out; /* Smooth transition for hover effects */
      }

      .ss-card:hover {
        transform: translateY(-5px); /* Lift card slightly on hover */
      }

      .ss-card-value {
        font-size: 2.25rem; /* Equivalent to text-4xl */
        font-weight: 600; /* Equivalent to font-semibold */
        margin-bottom: 0.5rem;
      }

      .ss-card-description {
        font-size: 1rem; /* Equivalent to text-base */
        line-height: 1.5; /* Equivalent to leading-relaxed */
      }

      /* Specific card colors and text colors based on the image */
      .ss-card-gray {
        background-color: #5a6671; /* Dark gray */
        color: #ffffff;
      }

      .ss-card-red {
        background-color: #8c262e; /* Dark red */
        color: #ffffff;
      }

      .ss-card-yellow {
        background-color: #f7b42c; /* Yellow/Orange */
        color: #ffffff;
      }

      .ss-card-image-overlay {
        position: relative;
        background-size: cover;
        background-position: center;
        border-radius: 0.5rem;
        overflow: hidden; /* Ensure image doesn't overflow rounded corners */
        transition: transform 0.3s ease-in-out; /* Smooth transition for hover effects */
      }

      .ss-card-image-overlay::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3); /* Dark overlay */
        border-radius: 0.5rem;
        transition: background 0.3s ease-in-out; /* Smooth transition for overlay */
      }

      .ss-card-image-overlay:hover {
        transform: scale(1.01); /* Slightly enlarge image card on hover */
      }

      .ss-card-image-overlay:hover::before {
        background: rgba(0, 0, 0, 0.5); /* Darker overlay on hover */
      }

      .ss-card-image-overlay .ss-card-content {
        position: relative;
        z-index: 10;
        color: white;
        padding: 1.5rem;
      }

      /* Responsive adjustments */
      @media (min-width: 640px) {
        /* sm breakpoint */
        .ss-section-2 {
          padding: 4rem 1.5rem; /* Equivalent to px-6 */
        }
        .ss-grid-container {
          grid-template-columns: repeat(
            2,
            1fr
          ); /* 2 columns for small screens */
        }
      }

      @media (min-width: 1024px) {
        /* lg breakpoint */
        .ss-section-2 {
          padding: 4rem 2rem; /* Equivalent to px-8 */
        }
        .ss-section-title {
          font-size: 3.75rem; /* Equivalent to lg:text-6xl */
        }
        .ss-grid-container {
          grid-template-columns: repeat(
            3,
            1fr
          ); /* 3 columns for large screens */
        }
        /* Specific grid spans to match the image layout */
        .ss-grid-container > div:nth-child(1) {
          grid-column: span 1;
        }
        .ss-grid-container > div:nth-child(2) {
          grid-column: span 1;
        }
        .ss-grid-container > div:nth-child(3) {
          grid-column: span 1;
        }
        .ss-grid-container > div:nth-child(4) {
          grid-column: span 1;
        }
        .ss-grid-container > div:nth-child(5) {
          grid-column: span 1;
        }
        .ss-grid-container > div:nth-child(6) {
          grid-column: span 1;
        }
      }
      
      
      
      
      /*  s1-section*/
      
      
    
      .s1-section {
        font-family: "Inter", sans-serif;
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Prevent horizontal scroll */
        background-color: #f7f7f7; /* Light background for the overall page */
        height:100vh;
      }

      .s1hero-section {
        position: relative;
        width: 100%;
        height: 100%; /* Full viewport height */
        background-image: url("https://images.unsplash.com/photo-1592930954854-7d00c87d0cf4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); /* Placeholder for university students */
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #333; /* Darker text for readability over light background */
      }

      .s1hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(
          255,
          255,
          255,
          0.85
        ); /* Increased opacity for more subtle background */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box; /* Include padding in element's total width and height */
      }

      .s1subtitle {
        font-family: "Playfair Display", serif; /* Script-like font for "Let's Get Started" */
        font-size: 1.8rem;
        margin-bottom: 10px;
        color: #6a5acd; /* A subtle purple, similar to the screenshot */
      }

      .s1title {
        font-family: "Playfair Display", serif; /* Elegant font for the main title */
        font-size: 3.5rem;
        font-weight: 700;
        margin-bottom: 20px;
        color: #333; /* Dark text for contrast */
      }

      .s1description {
        max-width: 800px;
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 40px;
        color: #555; /* Slightly lighter text for body content */
      }

      .s1button-container {
        display: flex;
        flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
        gap: 20px; /* Space between buttons */
        justify-content: center;
      }

      .s1action-button {
        background-color: #fff; /* White background for buttons */
        color: #333; /* Dark text on buttons */
        padding: 15px 30px;
        border-radius: 9999px; /* Fully rounded corners */
        font-weight: 600;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        transition: all 0.3s ease; /* Smooth transition for hover effects */
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd; /* Light border */
        cursor: pointer; /* Indicate it's clickable */
      }

      .s1action-button:hover {
        background-color: #ffd700; /* Yellow background on hover */
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
        transform: translateY(-2px); /* Slight lift effect */
      }

      .s1action-button svg {
        margin-left: 10px;
        width: 20px;
        height: 20px;
        fill: currentColor; /* Use button text color for icon */
      }

      /* Scroll to top button */
      .s1scroll-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #6a5acd; /* Purple background */
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        cursor: pointer;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease;
        z-index: 1000; /* Ensure it's above other content */
      }

      .s1scroll-to-top:hover {
        background-color: #5a4acb; /* Darker purple on hover */
      }

      /* Responsive adjustments */
      @media (max-width: 768px) {
        .s1title {
          font-size: 2.5rem;
        }
        .s1subtitle {
          font-size: 1.5rem;
        }
        .s1description {
          font-size: 1rem;
          padding: 0 15px;
        }
        .s1button-container {
          flex-direction: column; /* Stack buttons vertically on small screens */
          gap: 15px;
        }
        .s1action-button {
          width: 90%; /* Make buttons wider on small screens */
          max-width: 300px; /* Limit max width */
          margin: 0 auto; /* Center buttons */
        }
      }

      @media (max-width: 480px) {
        .s1title {
          font-size: 2rem;
        }
        .s1subtitle {
          font-size: 1.2rem;
        }
        .s1action-button {
          font-size: 0.9rem;
          padding: 12px 20px;
        }
      }
   
   
   
   
   
   /* s2-section */
   
   
 
      /* Custom styles */
      .s2-section {
        font-family: "Inter", sans-serif;
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Prevent horizontal scroll */
        /* Light background for the overall page */
        background: linear-gradient(
  to top right,
  #d2e3ff 0%,
  #f0e1ff 50%,
  #fbc6ff 100%
);
      }

      /* Carousel specific styles */
      .s2carousel-section {
        padding: 50px 0;
       background: linear-gradient(
  to top right,
  #d2e3ff 0%,
  #f0e1ff 50%,
  #fbc6ff 100%
);
        overflow: hidden; /* Hide overflowing content */
        width: 100%; /* Ensure it takes full width */
        box-sizing: border-box; /* Include padding in width */
      }

      .s2carousel-title {
        text-align: center;
        font-size: 2.5rem;
        font-weight: 700;
        color: #007bff; /* Changed 100+ Elements included. text color to blue */
        margin-bottom: 40px;
      }

      /* Style for "YOU DON'T NEED ANY EXTERNAL PLUGINS." line */
      .s2plugin-text {
        width: 30%;
        text-align: center;
        margin: 0 auto 30px auto; /* Center the element and add margin-bottom */
        color: #007bff; /* Changed text color to blue */
        font-size: 1rem;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.5px;
        background-color: #e0e6f0; /* Gray-blue background color */
        border-radius: 5px; /* Added border radius */
        padding: 8px 15px; /* Added padding for better appearance */
      }

      .s2carousel-row-wrapper {
        width: 100%;
        overflow: hidden; /* Ensure content outside is hidden */
        /* Increased margin-bottom for space between carousel rows */
        margin-bottom: 30px; /* Added space between rows */
      }

      .s2carousel-row-wrapper:last-of-type {
        margin-bottom: 0; /* No margin after the last row */
      }

      .s2carousel-row {
        display: flex;
        width: fit-content; /* Allow content to dictate width for animation */
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        /* Removed margin-bottom from here as it's now on the wrapper */
      }

      .s2carousel-item {
        flex-shrink: 0; /* Prevent items from shrinking */
        width: 250px; /* Default fixed width for carousel items */
        height: 90px; /* Fixed height for carousel items */
        background-color: #fff;
        margin: 0 10px;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.1rem;
        font-weight: 500;
        color: #333;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        cursor: pointer;
      }

      .s2carousel-item:hover {
        background-color: #007bff; /* Blue background on hover */
        color: white;
        transform: scale(1.02); /* Scale effect on hover */
      }

      /* Animation for right to left sliding */
      @keyframes slide-right-to-left {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-50%);
        } /* Slide half of the duplicated content */
      }

      /* Animation for left to right sliding */
      @keyframes slide-left-to-right {
        0% {
          transform: translateX(-50%);
        } /* Start from half of the duplicated content */
        100% {
          transform: translateX(0%);
        }
      }

      /* Apply animations */
      .s2carousel-row.rtl {
        animation-name: slide-right-to-left;
        animation-duration: 30s; /* Adjust speed as needed */
      }

      .s2carousel-row.ltr {
        animation-name: slide-left-to-right;
        animation-duration: 30s; /* Adjust speed as needed */
      }

      /* Responsive adjustments for carousel */
      @media (max-width: 1024px) {
        .s2carousel-item {
          width: 200px; /* Smaller width for tablet screens */
          height: 80px;
          font-size: 1rem;
        }
        .s2carousel-title {
          font-size: 2rem;
        }
        .s2carousel-row-wrapper {
          margin-bottom: 25px; /* Adjust spacing for smaller screens */
        }
        .s2plugin-text {
          width: 50%;
        }
      }

      @media (max-width: 768px) {
        .s2carousel-item {
          width: 180px; /* Even smaller width for mobile screens */
          height: 70px;
          font-size: 0.9rem;
          margin: 0 8px;
        }
        .s2carousel-title {
          font-size: 1.8rem;
        }
        .s2plugin-text {
          font-size: 0.85rem;
          padding: 6px 12px;
          width: 80%;
        }
        .s2carousel-row-wrapper {
          margin-bottom: 20px; /* Adjust spacing for smaller screens */
        }
      }

      @media (max-width: 480px) {
        .s2carousel-item {
          width: 120px; /* Smallest width for very small screens */
          height: 50px;
          text-align: center;
          font-size: 0.8rem;
          margin: 0 5px;
        }
        .s2carousel-title {
          font-size: 1.5rem;
        }
        .s2plugin-text {
          font-size: 0.75rem;
          padding: 5px 10px;
        }
        .s2carousel-row-wrapper {
          margin-bottom: 15px; /* Adjust spacing for smallest screens */
        }
      }
  
  
  
  
  
  
  /* s3 - section */
  
  

      /* Basic Reset and Body Styles */
     

      .s3-section {
        font-family: "Inter", sans-serif;
        background-color: #f3f3f3;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 80vh;

        background: linear-gradient(
          135deg,
          #d2e3ff 0%,
          #f0e1ff 50%,
          #fbc6ff 100%
        );
      }

      .s3a {
        text-decoration: none;
        color: inherit;
        transition: color 0.3s ease;
      }

      .s3button {
        border: none;
        background: none;
        cursor: pointer;
        font-family: inherit;
      }

      .s3container {
        width: 100%;
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
      }

      /* Main Content Section */
      .s3main-content {
        padding-top: 4rem;
        padding-bottom: 4rem;
        width: 100%;
      }

      .s3section-title {
        text-align: center;
        margin-bottom: 3rem;
      }

      .s3section-title h1 {
        font-size: 2.25rem;
        font-weight: 800;
        color: #1f2937;
      }

      /* Carousel Styles */
      .s3carousel-container {
        position: relative;
      }

      .s3carousel-viewport {
        overflow: hidden;
        width: 100%;
      }

      .s3cards-grid {
        display: flex;
        flex-wrap: nowrap;
        transition: transform 0.5s ease-in-out;
      }

      /* Card Styling */
      .s3card {
  background-color: white;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0px 20px 50px 0px rgba(26, 46, 89, 0.05);
  display: flex;
  flex-direction: column;
  flex: 0 0 100%; /* on mobile: full width */
  margin: 0 0.5rem;
}

@media (min-width: 768px) {
  .s3card {
    flex: 0 0 calc(50% - 1rem); /* on tablet+: two cards with spacing */
  }
}
      
      .s3card-content {
        flex-grow: 1;
      }

      .s3card h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 0.75rem;
      }

      .s3card p {
        color: #6b7280;
        margin-bottom: 1.5rem;
      }

      .s3card-features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem 1rem;
        color: #4b5563;
        margin-bottom: 2rem;
      }

      .s3feature-item {
        display: flex;
        align-items: center;
      }

      .s3feature-item svg {
        width: 1.25rem;
        height: 1.25rem;
        color: #a855f7;
        margin-right: 0.5rem;
      }

      /* Button Styling */
      .s3read-more-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 10rem;
        color: white;
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        transition: box-shadow 0.3s ease;
        background-image: linear-gradient(to right, #8364e2, #6043c9);
      }

      .s3read-more-btn:hover {
        box-shadow: 0 10px 15px -3px rgba(96, 67, 201, 0.3),
          0 4px 6px -2px rgba(96, 67, 201, 0.2);
      }

      .s3read-more-btn svg {
        width: 1.25rem;
        height: 1.25rem;
        margin-left: 0.5rem;
      }

      /* Carousel Navigation Buttons */
      .s3carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: white;
        border-radius: 50%;
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 10;
        color: #333;
        transition: opacity 0.3s, background-color 0.3s;
      }
      .s3carousel-btn:hover:not(:disabled) {
        background-color: #f3f4f6;
      }
      .s3carousel-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
      .s3prev-btn {
        left: -1.5rem;
      }
      .s3next-btn {
        right: -1.5rem;
      }

      /* Responsive Media Queries */
      @media (min-width: 768px) {
        .s3card {
          flex-basis: calc(50% - 1rem); /* 2 cards visible */
        }
        .s3section-title h1 {
          font-size: 3rem;
        }
      }

      @media (min-width: 1024px) {
        .s3container {
          padding-left: 2rem;
          padding-right: 2rem;
        }
        .s3prev-btn {
          left: -2.5rem;
        }
        .s3next-btn {
          right: -2.5rem;
        }
      }