body {
        margin: 0;
        background-color: #fcfff5;
    }
    
    html {
        scroll-behavior: smooth;
    }

    #hero {
        width: 100%;
        height: 700px;
        object-fit: cover;
        transition: opacity 2s ease-in-out;
        opacity: 1;
    }

    .hidden {
        opacity: 0;
    }

    .heading {
        font-size: 2em;  
        text-align: center;
        color: #12491C;
        margin-top: 7%;
    }

    .about_us_img {
        border-radius: 20px;
        box-shadow: 0 10px 50px rgba(0,0,0,0.2);
    }

    .lead {
      text-align: center;
    }

    #teamParra {
        background-color: #eeffea;
        padding-top: 1%;
    }



    .arrow_icon {
        color: #363636;
        text-decoration: none;
    }

    .arrow_icon:hover {
        color: #363636;
        text-decoration: none;
        transform: scale(1.2);
    }

    .center {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        transition: transform 0.3s ease-in-out;
    }

    .center:hover {
        transform: scale(1.1);
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin: 0 auto;
        max-width: 1200px;
    }
    
    .gallery img {
        width: 90%;
        height: 90%;
        border-radius: 10px;
    }


    @media (max-width: 768px) {
        .gallery{
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 480px) {

        
        #hero {
            width: 100%;
            height: 500px;
        }

        .row {
            justify-content: center;
        }

        .gallery{
            grid-template-columns: 1fr;
        }

        .gallery img {
            width: 70%;
            margin-left: 15%;
            height: 200px;
            border-radius: 10px;
        }

        #gallery-section {
            margin-top: 25%;
        }


    }



/*
==================
QUICK LINK CSS 
==================
*/

.container-quick {
    margin: 10%;
    display: flex;
    justify-content: space-around;
}

.main-card-container {
    background-color: #d7f1dc;
    border-radius: 7px;
    padding: 10%;
    cursor: pointer;
    width: auto;
    height: 150px;
    overflow: hidden;
    transition: transform 0.3s ease-in, box-shadow 0.2s ease-in;
}

.quick-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.main-card-container:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); 
}

.quick-card > svg {
   width: 40px;
}

a .main-card-container {
    text-decoration: none;
    color: #000;
 }

 .conatiner-quick a, .container-quick a:hover, .conatiner-quick a, .container-quick a *{
    text-decoration: none;
    color: #000;
 }

 .main-card-container:hover h5 {
    text-decoration: none;
    color: #000;
}

.quick-icon {
    width: 100px;
    margin-top: 10%;
}


@media (max-width: 480px) {

    .main-card-container {
        width: 90px;
        height: 65px;
    }

    .quick-icon {
        width: 40px;
        margin-top: 10%;
    }

    .quick-card > h5 {
        font-size: 0.7rem;
     }

     .quick-card > svg {
        width: 20px;
     }
}



/*
******************
SWIPER CSS
*/

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&family=Roboto:wght@300;400;500;900&display=swap");

.ttfp.ttfp.swiper-container {
	 position: relative;
	 width: calc(min(90rem, 90%));
	 margin: 0 auto;
	 min-height: 80vh;
	 column-gap: 3rem;
	 padding-block: min(20vh, 3rem);
     display: flex;
     align-items: center;
}

 .bg {
	 position: absolute;
	 bottom: 0;
	 left: -80px;
	 z-index: -1;
	 opacity: 0;
}

.ttfp.swiper-container > div h1 {
	 text-transform: capitalize;
	 letter-spacing: 0.8px;
	 font-family: "Roboto", sans-serif;
	 font-weight: 800;
	 font-size: clamp(2.4375rem, 2.5rem, 2.5rem);
	 background-color: #005baa;
	 background-image: linear-gradient(45deg, #09aa00, #000);
	 background-size: 100%;
	 background-repeat: repeat;
	 -webkit-background-clip: text;
	 -webkit-text-fill-color: transparent;
	 -moz-background-clip: text;
	 -moz-text-fill-color: transparent;
}
.ttfp.swiper-container > div hr {
	 display: block;
	 background: #12491C;
	 height: 0.25rem;
	 width: 6.25rem;
	 border: none;
	 margin: 1.125rem 0 1.875rem 0;
}
.ttfp.swiper-container > div p {
	 line-height: 1.6;
}
.ttfp.swiper-container a {
	 display: inline-block;
	 text-decoration: none;
	 text-transform: uppercase;
	 color: #717171;
	 font-weight: 500;
	 background: #fff;
	 border-radius: 3.125rem;
	 transition: 0.3s ease-in-out;
}

.ttfp.swiper {
	 width: 100%;
	 padding-top: 3.125rem;
}
.swiper-pagination-bullet, .swiper-pagination-bullet-active {
	 background: #fff;
}
.ttfp.swiper-pagination {
	 bottom: 1.25rem !important;
}
.ttfp.swiper-slide {
	 width: 23.75rem;
	 height: 28.125rem;
	 display: flex;
	 flex-direction: column;
	 justify-content: end;
	 align-items: self-start;
     border-radius: 10px;
}

.ttfp.swiper-slide p {
	 color: #dadada;
	 font-family: "Roboto", sans-serif;
	 font-weight: 300;
	 padding: 0 1.563rem;
	 line-height: 1.6;
	 font-size: 0.75rem;
	 display: -webkit-box;
	 -webkit-line-clamp: 4;
	 -webkit-box-orient: vertical;
	 overflow: hidden;
     margin: 1.25rem 1.563rem 3.438rem 1.563rem;
     padding: 0.438em 1.875rem;
}

.ttfp.swiper-slide div {
	 display: none;
	 opacity: 0;
	 padding-bottom: 0.625rem;
}
 .swiper-slide-active div {
	 display: block;
	 opacity: 1;
}
 .swiper-slide--one {
	 background: url("../../assets/images/maddani-mobile.webp") no-repeat 50% 50% / cover, linear-gradient(to top, #0f2027, #203a43 0, #2c5364 0);
}
 .swiper-slide--two {
	 background: url("../../assets/images/maddani-garden-2.jpg") no-repeat 50% 50% / cover, linear-gradient(to top, #0f2027, #203a43 0, #2c5364 0);
}
 .swiper-slide--three {
	 background: url("../../assets/images/ttfg2.jpg") no-repeat 50% 50% / cover;
}
 .swiper-slide--four {
	 background: url("../../assets/images/ttfg3.jpg") no-repeat 50% 50% / cover;
}
 .swiper-slide--five {
	 background: url("../../assets/images/maddani-garden-6.jpg") no-repeat 50% 50% / cover;
}
 .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right {
	 background-image: none;
}


.bg,
.bg2 {
  opacity: 0.1;
}

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

    .ttfp.swiper-container {
        flex-direction: column;
      }
      .bg,
      .bg2 {
        opacity: 0;
      }

    .ttfp.swiper-container > div > h1 {
        font-size: clamp(1.4375rem, 1.7rem, 2.5rem)
    }

}
@media screen and (max-width: 768px) {

    .ttfp.swiper {
        width: 85%;
      }
    
    .ttfp.swiper-container > div h1 {
        font-weight: 700;
        font-size: clamp(1.4375rem, 1.7rem, 2.5rem)
    }
}
 

/*
==================
EVENTS CSS 
==================
*/

.fol {
    margin-top: 8em;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('../../assets/images/folbg.jpg') no-repeat scroll;
}


.fos {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('../../assets/images/fosbg.jpg') no-repeat scroll;
}



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

    .fos {
        margin-top: 20%;
        flex-direction: column-reverse;
    }
}