body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  width: 100%;
  height: 100%;
  background-color: #faf8f4;
  overflow-x: hidden;
  box-sizing: border-box;
}



/* Main Wrapper */
.post-wrapper {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Post Title */
.post-meta {
  font-size: 16px;
  color: #6c757d;
  text-align: center;
}

.post-meta small {
  font-weight: normal;
}

/* Image Styling */
.blog-img img {
  max-height: 500px;
  object-fit: cover;
  border-radius: 8px;
}

/* Post Content */
.post-content {
  line-height: 1.6;
  color: #333;
  font-size: 1.1rem;
  margin-top: 20px;
}

/* Like Button */
.like-btn {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.like-btn:hover {
  background-color: #0056b3;
}

/* Admin Options */
.admin-options .btn {
  padding: 8px 15px;
  font-size: 14px;
  border-radius: 5px;
}

.admin-options .btn-warning {
  background-color: #ffc107;
}

.admin-options .btn-danger {
  background-color: #dc3545;
}

.admin-options .btn:hover {
  opacity: 0.9;
}

/* Comment Section */
.comments-section {
  background-color: #f1f1f1;
  padding: 20px;
  border-radius: 8px;
  margin-top: 30px;
}

.comment-item {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.comment-author {
  font-weight: bold;
  color: #333;
}

.comment-item small {
  color: #6c757d;
}

/* Related Posts Section */
.related-posts h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 20px;
}

.card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card img {
  height: 200px;
  object-fit: cover;
  transition: all 0.3s ease;
}

.card img:hover {
  transform: scale(1.05);
}

.card-body {
  padding: 15px;
}

.card-title {
  font-size: 1.2rem;
  color: #007bff;
  font-weight: 500;
}

.card-title:hover {
  color: #0056b3;
}

/* Form Input */
textarea.form-control {
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #ced4da;
}

textarea.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}


.related-posts img {
  height: 100px !important; /* Force a reduced height */
  object-fit: cover; /* Ensure images fit within the space */
  width: 100%; /* Ensure full width */
}


/* Default styles for desktop */
.responsive-star {
  width: 120px;
  max-width: 10%; /* Ensure it's responsive */
}

/* Tablet adjustments */
@media (max-width: 768px) {
  .responsive-star {
      width: 100px; /* Smaller size for tablets */
      bottom: -900px; /* Adjust position */
      right: 30px; /* Adjust alignment */
  }
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .responsive-star {
      width: 80px; /* Smaller size for mobile */
      bottom: -600px; /* Adjust position */
      right: 20px; /* Adjust alignment */
  }
}

.explore_div {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.explore_div img {
  width: 100%; /* Makes the image responsive */
  display: block;
}

/* Add the gradient overlay for the text */
.explore_div .overlay {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 40%; /* Height of the gradient */
  background: linear-gradient(to top, rgba(16, 128, 219, 0.8), rgba(173, 216, 230, 0)); /* Light blue gradient */
  z-index: 1; /* Ensure it stays behind the text */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.explore_div:hover .overlay {
  opacity: 1; /* Show overlay on hover */
}

/* Text content styling */
.explore_div a {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* Ensure text appears above the overlay */
  color: #000; /* Adjust text color as needed */
  text-decoration: none;
  background: transparent; /* No background for the text */
}

/* Ensure the height is respected */
.carousel-inner img {
  height: 600px !important; /* Force a reduced height */
  object-fit: cover; /* Ensure images fit within the space */
  width: 100%; /* Ensure full width */
}
 

.sliding-container {
  /* position: relative; */
  background-size: cover;
  overflow: hidden;
  width: 100%;
}

.sliding-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slider-item {
  flex-shrink: 0;
  width: 300px;
  margin-right: 10px;
}

.slider-dots-container {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}

.slider-dot {
  width: 10px;
  height: 10px;
  background-color: gray;
  border-radius: 50%;
  cursor: pointer;
}

.slider-dot.active {
  background-color: black;
}

.slider-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background-color: white;
  border: none;
  cursor: pointer;
  opacity: 0;
}

#prevBtn {
  left: 10px;
}

#nextBtn {
  right: 10px;
}



.navbar-toggler-icon {
  width: 12px;
  height: 14px;
}


/* Ensure the hero-subject styling is responsive and aligned */
.hero-subject {
  font-weight: bolder;
  position: relative;
  display: inline-block;
  font-size: 40px;
}

.section-subject {
  font-weight: 700;
  position: relative;
  display: inline-block;
  font-size: 40px;
}


.hero-subject2 {
  font-weight: bolder;
  font-size: 30px;
}

.hero-subject svg {
  position: absolute;
  bottom: -10px;
  left: 100px;
  z-index: -1;
  transform: rotate(-5deg);
}

/* Adjust the layout for responsiveness */
@media (max-width: 768px) {
  .hero-subject {
    font-size: 1.5rem;
    /* text-align: center; */
  }

  .hero-subject svg {
    left: 50%;
    transform: rotate(0deg) translateX(-50%);
  }

}

#testimonial-indicators {
  display: flex;
  justify-content: center;
  gap: 10px; /* Space between dots */
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc; /* Default color */
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: #ff9900; /* Active dot color */
}


.post-title2 {
  width: 265px;
  height: 90px;
}
  
.no-events-container {
  animation: fadeIn 0.5s ease-in-out;
  max-width: 600px;
  margin: 0 auto;
}

.no-events-container .btn-primary {
  background-color: #007bff;
  border-color: #007bff;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;
  text-transform: uppercase;
}

.no-events-container i {
  color: #6c757d;
}

.liked {
  color: #007bff;
  font-weight: bold;
}

.full-width-image {
  width: 60%; /* Makes the image fill the container */
  height: 50%; /* Maintains aspect ratio */
  object-fit: cover; /* Ensures the image covers the entire container */
  display: block; /* Ensures the image behaves like a block element */
  margin: 0 auto; /* Centers the image horizontally */
}


/* Hero section */
.hero-title2 {
  font-family: 'Paytone One', sans-serif;
  width: 700px;
  font-size: 64px;
  font-weight: 400;
}

.hero-subtitle2 {
  width: 700px;
  font-size: 20px;
  font-weight: 500;
}

.hero-link {
  border: 2px solid white;
  border-radius: 25px;
  opacity: 80%;
  font-size: 1.5vw;
  padding-left: 30px;
  padding-right: 30px;
}

.hero-title {
  font-size: 3vw; /* Scales with viewport width */
  color: #fff;
}

.top-container {
  padding-top: 15rem;
}


#preloader {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 153, 0, 0.2);
  border-top: 5px solid #ff9900;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.blog-section {
  background-size: cover;
  background-position: center;
  height: 500px;
  display: flex;
  padding: 0;
}


.hero {
  position: relative;
  overflow: hidden; 
}

/* .hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
} */

.hero-content {
  z-index: 2;
  color: white;
  position: relative;
}

.hero-content2 {
  z-index: 2;
  color: white;
  position: relative;
  width: 500px;
}

.carousel-image-wrapper {
  position: relative;
  width: 100%;
}

.carousel-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* Darken the image with more opacity */
  z-index: 1; /* Ensure the overlay is on top of the image */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Optional: Additional dark overlay */
  z-index: 1;
}

/* Custom styling for staff section */

.card-body2 {
  padding-top: 200px; /* Adjust this based on the size of the image */
  /* margin-bottom: 5rem;; */
}

.card-body2 {
  padding-top: 130px;
  padding-bottom: 20px;
  margin-top: -7rem;
  border-radius: 15px;
  background-color: #feeed8;
}

.card-title2 {
  font-weight: bold;
  font-size: 1.1rem;
}

.card-text2 {
  color: #777;
}


.news_bg {
  background-color: #F2F2F2;
}

.slick-prev, .slick-next {
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  z-index: 1;
}
   /* Yellow arrow styling */
 
.arrow-container {
  position: absolute;
  bottom: 40px;
  right: 15px;
  width: 80px;
}

.news_img {
  position: absolute;
  right: -1px !important;
  bottom: 22px;
  width: 60px;
}

/* Custom class for col-lg-2.5 */
.col-lg-2-5 {
  flex: 0 0 20.8333%;
  max-width: 20.8333%;
}

/* Custom class for col-lg-2.5 */
.col-lg-2-5 {
  flex: 0 0 20.8333%;
  max-width: 20.8333%;
}

/* Custom class for col-lg-2.5 */
.col-lg-25 {
  flex: 0 0 24%;
}

/* Ensure responsiveness for smaller devices */
@media (max-width: 992px) {
  .col-lg-25 {
      flex: 0 0 100%;
      max-width: 100%;
  }
}

.slider_link a{
  text-decoration: none;
  color: #333;
}

/* .slider_link {
  height: 360px;
} */

.slider-dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.slider-dot {
  width: 12px;
  height: 12px;
  background-color: #d3d3d3;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.slider-dot.active {
  background-color: #ff9900;
}

.slider_link a:hover {
  color:#f04e31;
}

.explore_div a{
  text-decoration: none;
  color: #ffff;
}

.explore_div {
  padding: 5px; /* Removes padding inside the columns */
  margin: 5px 0; /* Adjusts margin between the columns */
}
.explore_div img {
  width: 100%; /* Ensures images take full column width */
  height: auto; /* Maintains aspect ratio */
}

.img-res img{
  /* min-height: 250px;
  max-height: 250px; */
  object-fit: cover;
}

.img-res{
  min-height: 250px;
  max-height: 250px;
  object-fit: cover;
  width: 100%;
}

.text-with-stripe {
  position: absolute;
  background: url('/assets/img/stripe.png') no-repeat center bottom; /* Path updated */
  background-size: contain; /* Ensures the image maintains its aspect ratio */
}

.home-stripes {
  padding-bottom: 2rem;
}

/* Card Image Styles */
.card-img-top {
  max-height: 205px;
  object-fit: cover;
}

.fw-1 {
  font-weight: 500;
}
.fw-2 {
  font-weight: 700;
}


/* Contact Form */
form .form-group label {
  font-weight: bold;
}

/* Ensure the container takes the full height of its parent */
html, body {
  height: 100%;
}



.custom-img {
  width: 400px;  
  height: 400px;   
  object-fit: cover;  
}


/* First image should take full height */
.first-image {
  height: 470px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.first-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the entire div */
}

/* The second and third images should take half the height */
.second-third-images {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.6rem; /* Ensures consistent spacing */
}

.second-third-images img {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Makes sure the images fill their space without distortion */
}

.testimonial-item {
  margin-bottom: 2rem;
}

.rounded-start {
  border-radius: 0.5rem 0 0 0.5rem !important;
}

.row {
  display: flex;
  align-items: stretch;
}

/* Round corners for text and images */
.round_img {
  border-radius: 15px;
  overflow: hidden; /* Ensures images respect rounded corners */
}

.round_border {
  border-radius: 15px;
}

.round_border_2 {
  border-radius: 30px;
}

.enlarged-image {
  width: 100%;
}

.responsive-svg {
  width: 15%;
  height: auto;
}

.round_border {
  border-radius: 10px;
}

.enlarged-image {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .responsive-svg {
      width: 20%;
  }

  .enlarged-image {
      border-radius: 8px;
  }
}



/* Cards stretch to full height */
.card {
  height: 100%;
}

/* Optional: Style for image fit */
.round_img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures proper image scaling */
}

.element-zoom-out {
  display: block;
  transition: transform 0.3s ease-in-out;
}

.element-zoom-out:hover {
  transform: scale(1.02);
  /* Optional: Set origin for zoom to center */
  transform-origin: center;
}

.img_style_1 img{
  width:100px;
  height: 100px;
}


.latest-events {
  padding: 20px;
}

.event-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.event-card {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.event-title {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  font-size: 1.2rem;
  font-weight: bold;
  position: absolute;           
  bottom: 0;
}


.section-mt {
  margin-top: 5rem;
}

.section-pd {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.section-pd2 {
  padding-top: 4rem;
  padding-bottom: 2rem;
}



/* Navbar Styling */
.navbar {
  position: fixed;
  top: 10px;
  left: 50%;
  width: 90%;
  transform: translate(-50%, 0);
  background: none; 
  align-items: center;
  border-radius: 20px;
  padding: 4px 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 90%;
}

.navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5); /* 50% opacity for the background */
  border-radius: 30px; /* Same border radius as navbar */
  z-index: -1;
}

.navbar.hidden {
  transform: translate(-50%, -100%); /* Slide navbar up */
  opacity: 0; /* Make navbar invisible */
}

@media (max-width: 768px) {
  .navbar {
    left: 50%;
    transform: translateX(-50%);
  }
}

.navbar-toggler {
  background-color: #b2b2b2 !important;
  border-color: #9e9e9e !important;
  border-radius: 5px;
}


.navbar img {
  padding: 0;
}

.navbar-toggler {
  z-index: 105;
  background-color: #333;
  border: 2px solid #555;
  border-radius: 5px;
  padding: 0.4rem 0.7rem;
  margin-top: 0;
  color: #fff;
  font-size: 0.7rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#navi .nav-link {
  color: black;
  padding: 5px 20px;
  top: 3px;
  display: block;
  line-height: 60px;
  text-decoration: none;
  position: relative;
  transition: background-color 0.3s;
}

#navi .nav-link:hover {
  background: linear-gradient(to bottom, rgba(251, 186, 186, 1) 90%, rgba(139, 69, 19, 1) 10%);
  color: #fff;
}



/* Dropdown Styling */
.navbar-nav .dropdown-menu {
  border-radius: 0;
  border: 1px solid #ddd; /* Subtle border for visibility */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  background-color: #f8f9fa;
}

.dropdown-item {
  padding: 10px 15px; /* Added padding for better spacing */
  color: #333; /* Standard text color for visibility */
}

.dropdown-item:hover {
  background-color: #fbbaba;
  color: #fff;
  font-weight: bold; /* Makes hover state more distinct */
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  border: 1px solid #ddd; /* Matches parent dropdown */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Consistent shadow */
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropdown-menu .dropdown-toggle::after {
  display: none;
}


/* Footer Styling */
.footer {
  color: #ffffff;
  padding: 40px 0;
}

footer a:hover {
  text-decoration: underline;
  color: rgb(242, 191, 183);
}

footer a {
  color: #ffff;
  text-decoration: none;
}

.footer h4 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

.footer-contact {
  margin: 5px 0;
}

.social-links a {
  margin-right: 15px;
  font-size: 18px;
  color: #FFA500;
}

.social-links a:hover {
  color: #FF8C00;
}

.newsletter-form {
  display: flex;
  gap: 10px;
}

.newsletter-form input[type="email"],
.newsletter-form input[type="submit"] {
  border-radius: 4px;
}

.newsletter-form input[type="submit"] {
  background-color: #FFA500;
}

.newsletter-form input[type="submit"]:hover {
  background-color: #FF8C00;
}

.copyright {
  margin-top: 20px;
  font-size: 14px;
}

.credits {
  font-size: 12px;
  margin-top: 5px;
}


.contact-info {
  position: fixed;
  right: 0;
  background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent */
  padding: 10px 20px;
  border-radius: 5px 0 0 5px; /* Rounded left edge */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 9999; /* Always on top */
  font-size: 14px;
  color: #333;
  text-align: left;
  white-space: nowrap; /* Prevent text from wrapping */
  transition: top 0.3s ease; /* Smooth transition */
}
.contact-info i {
  margin-right: 5px;
  color: #007bff; /* Icon color */
}


/* Sticky Element */
.sticky-top {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 60px; /* Adjust to match navbar height */
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  z-index: 10;
}

/* Blog Link Styling */
.blog-link {
  border: 2px;
  text-decoration: none;
  background-color: black;
  color: white;
  padding: 10px;
  display: inline-block;
  text-decoration: none; /* Removes underline */
}

.blog-link a{
  color: white;
}

.blog-link:hover {
  background-color: white;
  color: black;
}

/* Active Nav Link */
#navi .nav-link.active {
  background: linear-gradient(to bottom, rgba(251, 186, 186, 1) 90%, rgba(139, 69, 19, 1) 10%);
  color: #fff;
  font-weight: bold; /* Make it bold for emphasis */
} 

html {
  scroll-behavior: smooth;
}

.ctb {
  font-size: 12px;
}

.card-body {

  overflow: hidden; /* Prevents text overflow */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-body .d-flex {
  flex-grow: 1; /* Makes sure the 'Read More' button stays at the bottom */
  align-items: flex-end;
}


/* Initially hide the sidebar */
#sidebar.d-none {
  display: none;
}

/* Slide-in animation */
@keyframes slideIn {
  from {
      transform: translateX(100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}

@keyframes slideOut {
  from {
      transform: translateX(0);
      opacity: 1;
  }
  to {
      transform: translateX(100%);
      opacity: 0;
  }
}

/* Slide-in class */
.slide-in {
  animation: slideIn 0.3s ease forwards;
}

/* Slide-out class */
.slide-out {
  animation: slideOut 0.3s ease forwards;
}



.hero2 {
  max-width: 450px;
}


/* Scroll to Top Button */
.scroll-top {
  position: fixed;
  bottom: 3px;
  left: 46.9%; /* Center horizontally */
  transform: translateX(-50%); /* Adjust to center based on button width */
  width: 37px; /* Same size as chat icon */
  height:37px; /* Same size as chat icon */
  background: #f04e31; /* Bright color for visibility */
  color: #fff;
  border-radius: 50%; /* Makes it perfectly round */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
  z-index: 999;
}
.scroll-top:hover {
  background: #c93d29; /* Darker shade on hover */
  transform: scale(1.1); /* Slightly enlarge */
}
.scroll-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


.hero2 a {
  font-size: 14px;
  display: inline-block;
  margin-top: 1rem;
}

img {
  max-width: 100%;
  height: auto;
}


div.image-23{
  position: absolute;
  width: 302px;
  height: 521px;
  right: 0px;
  margin-top: -400px;
  z-index: -100;
  background: url('/assets/img/image_23.png') no-repeat center bottom; /* Path updated */
  background-size: contain; /* Ensures the image maintains its aspect ratio */
  overflow: hidden;
}

div.image-23 .half-star{
  width: 175.05px;
  height: 129.45px;
  border-radius: 15.66px 0px 0px 0px;
  transform: rotate(3.2deg);
  position: absolute;
  bottom: 65px;
  right: -10px;
}





/* Frame 28 */

div.frame-28{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  padding: 0px;
  gap: 24px;

  position: absolute;
  width: 1128px;
  height: 542px;

}


div.frame-28 div.frame-25{

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 25px 21px;
  gap: 10px;

  width: 395px;
  height: 259px;

  background: #FEEED8;
  border-radius: 16px;

  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}


div.frame-28 div.frame-25 div.frame-24{

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 10px;

  width: 335px;
  height: 202px;


  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}

div.frame-28 div.frame-25 div.frame-24 div.cle{

  width: 311px;
  height: 144px;

  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-size: 40px;
  line-height: 120%;
  /* or 48px */

  color: #6F4300;


  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;

}


div.frame-28 div.frame-25 div.frame-24 div.wowfc{

/* With our well furnished classrooms equipped to academic standard */

  width: 335px;
  height: 48px;

  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;

  color: #000000;


  /* Inside auto layout */
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}


/* Mask group */

div.frame-28 div.mask-group{
  width: 394px;
  height: 259px;


  /* Inside auto layout */
  flex: none;
  order: 1;
  flex-grow: 0;
}



div.frame-28 div.mask-group div.rectangle-24{

  position: absolute;
  width: 394px;
  height: 259px;
  left: 419px;
  top: 0px;

  background: #D9D9D9;
  border-radius: 16px;
}

div.frame-28 div.mask-group img{

  position: absolute;
  width: 558px;
  height: 500.52px;


  background: url(image.png);
}


/* display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 33px 29px;
gap: 10px;

width: 289px;
height: 259px;

background: #CE2E20;
border-radius: 16px;

flex: none;
order: 2;
flex-grow: 0;


width: 217px;
height: 192px;

font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 120%; 

color: #FFFFFF;


flex: none;
order: 0;
flex-grow: 0;


width: 339px;
height: 259px;


flex: none;
order: 3;
flex-grow: 0;


position: absolute;
width: 339px;
height: 259px;
left: 0px;
top: 283px;

background: #D9D9D9;
border-radius: 16px;


position: absolute;
width: 590.47px;
height: 394px;
left: -160px;
top: 216px;

background: url(image.png);

display: flex;
flex-direction: column;
align-items: flex-start;
padding: 45px 56px;
gap: 10px;

width: 765px;
height: 259px;

background: #246FB2;
border-radius: 16px;

flex: none;
order: 4;
flex-grow: 0;


display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 15px;

width: 531px;
height: 159px;

flex: none;
order: 0;
flex-grow: 0;


width: 508px;
height: 96px;

font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 120%;

color: #FFFFFF;


flex: none;
order: 0;
flex-grow: 0;


width: 531px;
height: 48px;

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;

color: #FFFFFF;

flex: none;
order: 1;
align-self: stretch;
flex-grow: 0; */