/* Main container */
#main {
   width: 100vw;
   overflow-x: hidden;
   font-family: "Nunito", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
}

/* Hero Section */
.hero-section {
   width: 100%;
   height: fit-content;
   margin: 0;
   margin-bottom: 50px;
   padding: 5px;
   background-color: #fff;
   border-radius: 20px;
   position: relative;
   display: flex;
   justify-content: center;
}

/* Hero image container */
.hero-image {
   width: 100%;
   height: fit-content;
}

.hero-image .img {
   width: 100%;
   height: auto;
   border-radius: 20px;
   object-fit: cover;
   object-position: center;
}

/* Hero content overlay */
.hero-content {
   width: 88%;
   display: block;
   margin: 0 auto;
   position: absolute;
   bottom: -40px;
   background-color: #fff;
   border-radius: 20px;
   padding: 20px;
   z-index: 900;
}

.hero-content .title {
   font-size: 2.2rem;
   text-align: center;
}

/* About Us Section */
.about-us {
   padding: 30px 0;
   background-color: #FFFCF7;
}

.about-us .img {
   border-radius: 40% 35% 55% 45% / 55% 45% 60% 40%;
}

/* Experience Card */
.ex-card {
   width: 200px;
   height: 220px;
   padding: 20px;
   background-color: #F1F1F1;
   border-radius: 20px;
   box-shadow: var(--shadow-md);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.ex-card svg {
   width: 50px;
   height: 50px;
   stroke: var(--color-success);
   stroke-width: 2px;
   margin-bottom: 30px;
}

.ex-card .title {
   font-size: 2rem;
   font-weight: bold;
   text-align: center;
}

/* Swiper carousel */
.swiper {
   width: 100%;
}

.experience-swiper .swiper-wrapper {
   width: 100%;
   height: 250px;
   padding: 20px 0;
}

.swiper-wrapper .swiper-slide {
   display: flex;
   justify-content: center;
}

/* Swiper navigation buttons */
.swiper-button-next.ex-btn-next,
.swiper-button-prev.ex-btn-prev {
   background-color: var(--color-bg);
   color: var(--color-bg);
   width: 45px;
   height: 45px;
   border-radius: 50%;
}

.swiper-button-prev.ex-btn-prev {
   left: 10px;
}

.swiper-button-next.ex-btn-next {
   right: 30px;
}

/* Arrow icon styling */
.swiper-button-next.ex-btn-next::after,
.swiper-button-prev.ex-btn-prev::after {
   color: var(--color-text);
   font-size: 15px;
   font-weight: 800;
}

.swiper-pagination-bullet-active {
   background-color: #000 !important;
}

/* Desktop view (1024px and above) */
@media (min-width: 1024px) {
   .hero-section {
      padding: 20px;
      margin-bottom: 0;
   }

   .hero-image .img {
      height: 75vh;
      border-radius: 30px;
      object-position: center 30%;
   }

   .hero-content {
      width: 50%;
      top: 30px;
      bottom: auto;
      border-radius: 30px;
      padding: 30px 20px;
   }

   .hero-content .title {
      font-size: 2.5rem;
   }

   .about-us {
      padding: 30px 200px 60px;
   }
}