html, body {
  margin: 0;
  padding: 0;
  font-family: 'Raleway Regular', sans-serif;
  height: 100%;
  overflow: hidden;
}

#first-slider {
  width: 100%;
  height: 80vh;  /* Second section taking up 80% of viewport height */
  margin-top: 20px;
  margin-bottom: 20px;
}
/* First Slider Css */
.about {
   $cubic: cubic-bezier(0.64, 0.01, 0.07, 1.65);
   $transition: 0.6s $cubic;
   $size: 40px;
   position: fixed;
   z-index: 10;
   bottom: 10px;
   left: 10px;
   width: $size;
   height: $size;
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
   transition: all 0.2s ease;

  }

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i|IBM+Plex+Sans+Condensed:400,400i|IBM+Plex+Sans:100,100i,400,400i,700,700i|IBM+Plex+Serif:400,400i');

body {
   font-family: 'IBM Plex Mono', monospace;
   font-family: 'IBM Plex Sans', sans-serif;
   font-family: 'IBM Plex Serif', serif;
   margin: 0;
}

/* swiper */

.swiper-container {
   padding: 0;
   height: 80vh;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
}

.swiper-slide {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: left;
   transition: all 0.3s ease;
   background-position: fixed;
}

.swiper-item {
   width: 80%;
   height: 100%;
   background-size: cover;
   background-position:center;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   position: absolute;
}
.slide-text .btn a {
    color: white;
    text-decoration: none; /* Removes the underline for cleaner appearance */
  }

  .slide-text .btn a:hover {
    text-decoration: underline; /* Optional: Adds underline on hover for better accessibility */
  }


@media screen and (max-width: 512px) {
   .swiper-slide .number {
      display: none;}
   
   .swiper-item {
      width: 90%;
   }
}

.swiper-item:after {
   content:'';
   background-color: black;
   position: absolute;
   width: 100%;
   height: inherit;
   bottom:0;
   z-index: 1;
   opacity: 0.1;
}

.swiper-item:before {
   content:'';
   background-image: linear-gradient(to bottom, black 0%, transparent 100%);
   position: absolute;
   width: 100%;
   height: 30%;
   top:0;
   z-index: 1;
   opacity: 0.2;
}


/* swiper arrows */

.swiper-arrows {
   width: 400px;
   height: 80px;
   position: absolute;
   display: flex;
   justify-content:center;
   align-items: center;
   bottom: 0px;
   right: 20%;
   top: 70%;
}

@media screen and (max-width: 512px) {
   .swiper-arrows {
      right: 10%;
   }
}

.swiper-button-prev,
.swiper-button-next {
   width: 80px;
   height: 80px;
   background-image: none;
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   bottom: 0;
   margin:0;
   transition: all 0.3s ease;
}

.swiper-button-prev {
   right: 80px;
   left: auto;
   background-color: rgba(255, 255, 255, 0.7);
}

.swiper-button-next {
   right: 0px;
   background-color: rgba(255, 255, 255, 0.8);
}


.swiper-button-prev span,
.swiper-button-next span {
   width: 10px;
   height: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: transparent;
   position: absolute;
   border: solid 2px #666666;
   border-left:0;
   border-bottom: 0;
   transition: all 0.1s ease;
  
} 

.swiper-button-prev span {
   transform: rotate(-135deg);
   left: 49%;
}

.swiper-button-next span {
   transform: rotate(45deg);
   right: 49%;
}


.swiper-button-prev:hover span,
.swiper-button-next:hover span {
   width: 5px;
   height: 5px;
}


.swiper-button-prev:after,
.swiper-button-next:after {
   width: 0px;
   height: inherit;
   content:'';
   position: absolute;
   background-color: white;
   transition: all 0.4s ease-in-out;
   z-index: -1;
   opacity: 0.8;
}

.swiper-button-prev:after{
   right:0;
}

.swiper-button-next:after{
   left:0;
}

.swiper-button-prev:hover:after,
.swiper-button-next:hover:after {
   width: inherit;
}
.swiper-button-disabled {
   opacity: 1 !important;
   
}
.swiper-button-disabled.swiper-button-prev span,
.swiper-button-disabled.swiper-button-next span{
   opacity: 0.2;
   
}

/* swiper arrows mobile */

@media screen and (max-width: 512px) {
   .swiper-button-prev,
   .swiper-button-next {
      width: 60px;
      height: 60px;
      bottom: 0; 
   }
    .swiper-arrows{
      height: 60px;
   }
   
   .swiper-button-prev {
      right: 60px;
   }
   .swiper-button-prev span {
      left: 45%;
}

   .swiper-button-next span { 
      right: 45%;
   }
}
@media screen and (max-width: 512px) {
   .swiper-pagination {
      right: calc(10% - 60px);
   }
   
   .swiper-pagination-bullet, 
   .swiper-pagination-bullet:hover {
      width: 15px;
   }
   
   .swiper-container-horizontal > 
   .swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 8px 0px;
   }
   
   .swiper-pagination-bullet-active, 
   .swiper-pagination-bullet-active:hover {
      width: 25px;
   }
}


/* text content */

.slide-text {
   text-align: left;
   color: white;
   opacity: 1;
   z-index: 2;
   font-family: 'IBM Plex Sans', sans-serif;
   width: 40%;
   max-width:270px;
   padding: 30px;
   display:none;
   position: absolute;
   right: 5%;
   animation: transitionText 2s ease; 

}

.slide-text.playText {
   display:block;
   animation: transitionText 2s ease; 
}

@keyframes transitionText {
   0% {
      right: -100%;
   }
   100%{
      right: 5%;
   }
}

.slide-text h1 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 25px;
    letter-spacing: 0.03em;
    margin: 0;
    padding: 0;
    font-weight: 400;
    color: white; /* Optional: Set text color */
    transform-style: preserve-3d;
    animation: blowUp 2s ease-in-out infinite, rotateEffect 4s infinite;
}

/* Blowing effect */
@keyframes blowUp {
    0% {
        transform: scale(1) rotateY(0deg);
    }
    50% {
        transform: scale(1.2) rotateY(15deg);
    }
    100% {
        transform: scale(1) rotateY(0deg);
    }
}

/* 3D Rotation */
@keyframes rotateEffect {
    0% {
        transform: perspective(500px) rotateY(0deg);
    }
    50% {
        transform: perspective(500px) rotateY(15deg);
    }
    100% {
        transform: perspective(500px) rotateY(0deg);
    }
}


/* text content mobile */

@media screen and (max-width: 512px) {
   .slide-text {
      width: 60%;
   }
   
   .slide-text h1 {
      font-size: 15px;
      letter-spacing: 0.02em;
   }
}

/* button */

.slide-text .btn {
   font-family: 'IBM Plex Mono', monospace;
   background-color: transparent;
   font-size: 14px;
   letter-spacing: 2px;
   color: white;
   position: relative;
   transition: all 0.3s ease-in-out;
   cursor: pointer;
   margin-top: 20px;
   border: 0;
   padding: 0 15px;
   left: 0;
}

.slide-text .btn:before {
   content: '';
   background-color: white;
   width: 2px;
   height: 20px;
   position: absolute;
   z-index: 2;
   left: -1px;
   top: -1px;
   border-radius: inherit;
   transition: all 0.3s ease-in-out;
}

.slide-text .btn:after {
   content: '';
   width: 0px;
   height: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: transparent;
   position: absolute;
   border: solid 2px transparent;
   border-left:0;
   border-bottom: 0;
   transform: rotate(45deg);
   top: 3px;
   left: -10px;
   transition: all 0.3s ease-in-out;
}

.slide-text .btn:hover::before {
   left: 11px;
   transform: rotate(90deg);

}
.slide-text .btn:hover::after {
   border: solid 2px white;
   border-left:0;
   border-bottom: 0;
   left: 10px;
   width: 10px;
   height: 10px;
   opacity:1;

}

.slide-text .btn:hover {
   padding-left: 35px;
}

button:focus {outline:0;}