/*Main*/
body {
     overflow-x: hidden;
}

h1 {
     font-family: Lexend Tera;
     font-size: 3.5rem;
     font-weight: 100;
     color: rgb(252, 252, 252);
     text-shadow: 0 0 5px black;
}

h2 {
     font-family: Noto Sans Display;
     font-size: 2.5rem;
     color: rgb(8, 7, 8)
}

h3 {
     font-family: Noto Sans Display;
     font-size: 2rem;
     color: rgb(18, 16, 20)
}

p {
     font-family: Noto Sans Display;
     color: rgb(25, 25, 26);
}

.title {
     font-family: Lexend Tera;
     font-size: 1.9rem;
     font-weight: normal;
     color: white;
     margin-bottom: 8%;
}

img {
     border-radius: 8px;
}

/*main dividers*/
.main-wrapper {
     display: flex;
     min-height: 100vh;
}

.sidebar {
     width: 15%;
     background-color: rgb(31, 32, 32);
     position: sticky;
     top: 0;
}

.maindiv {
     display: flex;
     flex-direction: column;
     width: 85%;
     background-color: white;
}

.div1 {
     width: 60%;
     margin: 2% auto;
}


/*Links*/
a:link {
     color: rgb(255, 255, 255);
     transition: transform 0.3s ease;
}

/*hero banner*/
.herobanner {
     width: 100%;
     padding: 3%;
     margin-bottom: 2%;
     text-align: center;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
}

.homebannerimg {
     background-image: url(https://res.cloudinary.com/dm7booaf5/image/upload/v1744852942/homebanner_kmnd6a.jpg);
}

.aboutbannerimg {
     background-image: url(https://res.cloudinary.com/dm7booaf5/image/upload/v1744852936/aboutbanner_l19f2m.jpg);
}

.citybannerimg {
     background-image: url(https://res.cloudinary.com/dm7booaf5/image/upload/v1744852943/citybanner_hacu3t.jpg);
}

.naturebannerimg {
     background-image: url(https://res.cloudinary.com/dm7booaf5/image/upload/v1744852952/naturebanner_vc64ed.jpg);
}

.spacebannerimg {
     background-image: url(https://res.cloudinary.com/dm7booaf5/image/upload/v1744852959/spacebanner_yvpsza.jpg);
}

/*Swipe gallery (from CLASS 9)*/
.swiper {
     height: 500px;
     width: 72%;
     position: relative;
}

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

.swiper-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
}

.swiper-button-next,
.swiper-button-prev {
     color: rgb(69, 179, 199);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
     color: rgb(193, 220, 255);
}

.swiper-pagination-bullet {
     height: 12px;
     width: 12px;
     background-color: rgba(153, 178, 214, 0.712);
}

.swiper-pagination-bullet-active {
     background: white;
}

/*Navigation bar (BS COMPONENT)*/
.nav-link:hover {
     color: rgb(0, 186, 219);
     transition: transform 0.3s ease;
     transform: scale(1.08) translateX(15px);
}

/*Cards for Home page (BS COMPONENT)*/
.card-group {
     margin: 5% 0;
}

.card {
     border-radius: 25px;
     border-color: rgb(192, 192, 192);
     border-width: 1px;
     margin: 0 2% 0;
     height: auto;
     overflow: hidden;
     transition: transform 0.3s ease;
}

.card:hover {
     transition: transform 0.3s ease-out;
     transform: scale(1.02);
}

.card-title {
     color: rgb(0, 150, 177);
     text-align: center;
     font-size: 1.6rem;
}


.card-img-top {
     height: 350px;
     object-fit: cover;
}

/*info at bottom*/
.info {
     background-color: rgb(52, 54, 54);
     width: 100%;
     padding: 2%;
     margin-top: auto;
     bottom: 0
}

.infocontent {
     color: white;
     text-align: center;
     display: flex;
     flex-direction: column;
     margin-top: 2%;
     justify-content: center;
}

.infoicons {
     display: flex;
     justify-content: space-evenly;
     margin: auto;
}

.logoimg:hover {
     transition: transform 0.3s ease-out;
     transform: scale(1.1);
}

.logoimg {
     width: min-content;
     height: 80px;
     object-fit: contain;
     transition: transform 0.3s ease;
}

.infotext {
     font-size: 1.2rem;
     padding-left: 0;
}

/*swiper css*/
.gallery-layout {
     display: grid;
     grid-template-columns: 33.33% 33.33% 33.33%;
     grid-template-rows: auto auto;
     gap: 20px;
     width: 65%;
     margin: 2% 0 2% 16%;
}

.gallery-img1-left {
     grid-column: 1 / 2;
     grid-row: 1 / 3;
}

.gallery-img2-stack {
     grid-column: 2 / 3;
     display: flex;
     flex-direction: column;
     gap: 20px;
}

.gallery-img1-right {
     grid-column: 3 / 4;
     grid-row: 1 / 3;
}

.gallery-img3 {
     grid-column: 1 / 4;
}

.gallery-layout img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

/*about css*/
.abtimg {
     width: 40%;
     height: fit-content;
     margin-right: 2%;
}

.div2 {
     display: flex;
     flex-direction: row;
     width: 50%;
     margin: 2% auto;
}

.div3 {
     margin: auto 2%;
}


/*Media screens*/
@media only screen and (max-width: 1500px) {
     .maindiv {
          width: 80%;
     }

     .sidebar {
          width: 20%;
     }

     .card-title {
          font-size: 1.3rem
     }

     .abtimg {
          width: 40%;
          height: fit-content;
          margin: auto 0
     }

     .div2 {
          width: 70%;
     }

     .gallery-layout {
          margin-left: 14%;
     }
}

@media only screen and (max-width: 1000px) {
     h1 {
          font-size: 2.8rem;
     }

     .nav-link.title {
          font-size: 1.7rem;
     }

     .nav-link {
          font-size: 0.9rem
     }

     .maindiv {
          width: 75%;
     }

     .sidebar {
          width: 25%;
     }

     .swiper {
          height: 300px;
          width: 80%;
     }

     .gallery-img2-stack {
          gap: 5px;
     }

     .card-title {
          font-size: 1.1rem
     }

     .abtimg {
          width: 50%;
          height: fit-content;
          margin: 0 auto
     }

     .div2 {
          width: 70%;
          flex-direction: column;
     }

     .div2 h2 {
          font-size: 2.3rem;
     }

     .card-group {
          margin-top: auto
     }
}

@media only screen and (max-width: 800px) {
     h1 {
          font-size: 2.2rem;
     }

     .nav-link.title {
          font-size: 1.5rem
     }

     .nav-link {
          font-size: 1rem
     }

     .maindiv {
          width: 70%;
     }

     .sidebar {
          width: 30%;
     }

     .infotext {
          font-size: 1rem;
     }

     .logoimg {
          height: 65px;
     }

     .div1 {
          width: 70%;
     }

     h2 {
          font-size: 2rem;
     }

     .div2 {
          width: 80%;
     }

     .div2 h2 {
          font-size: 1.8rem;
     }

     .gallery-layout {
          margin-left: 12%;
     }
}

@media only screen and (max-width: 600px) {

     .nav-link.title {
          font-size: 1.4rem
     }

     .nav-link {
          font-size: 0.9rem
     }

     .infotext {
          font-size: 0.9rem;
     }

     .logoimg {
          height: 60px;
     }

     .nav-link:hover {
          transform: scale(1.08) translateX(5px);
     }

     .div2 {
          width: 90%;
     }

     .div2 h2 {
          font-size: 1.6rem;
     }

     .div3 {
          margin-top: 2%
     }
}