*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    cursor: default;
    scroll-behavior: smooth;
}
body {
    background-image: url("../images/largebg.jpg");
    background-size: 100%;
}

html{
    scroll-behavior: smooth;
}

@font-face {
    font-family: aquire;
    src: url("../fonts/AquireLight-YzE0o.otf") format("opentype");
}
@font-face {
    font-family: aquire-bold;
    src: url("../fonts/AquireBold-8Ma60.otf") format("opentype");
}
@-webkit-keyframes fade {
    from {opacity: .5} 
    to {opacity: 1}
  }
  
@keyframes fade {
    from {opacity: .5} 
    to {opacity: 1}
  }
@-webkit-keyframes bwfade {
    from {filter: grayscale(100%);} 
    to {filter: grayscale(0%);}
  }
  
@keyframes bwfade {
    from {filter: grayscale(100%);} 
    to {filter: grayscale(0%);}
  }
@keyframes scalex{
    from {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    to {
        transform: scale(1);
    }    
}
/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}


/* TITLTES STYLES */
.title-box{
    width: 80%;
    margin: 0 auto;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid rgb(134, 98, 46);
}
.title-style{
    background: -webkit-linear-gradient(#d6c4ac,#8a7033, #473419);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    text-align: center;
    font-size: 46px;
    font-family:aquire-bold;
}
/* HERO SECTION STYLES */
.mySlides {
    display: none;
    text-align: center;
} 
.hero-flex{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: 0 auto;
}
.project-details{
    margin-left: 20px;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
}
.project-desc{
    padding: 40px 20px;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 18px;
    text-align: justify;
}

.project-img {
    vertical-align: middle;
    width: 45vw;
    height: 60vh;
    object-fit: contain;
    align-items: center;
}
/* Slider Styles */
.slideshow-container {
    width: 45vw;
    position: relative;
    flex: 1;
}
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 22px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
.prev{
    left: 5px;
}
.next {
    right: 5px;
    border-radius: 3px 0 0 3px;
}

.project-title{
    font-family: aquire;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    width: 100%;
    color: #fff;
    padding: 20px 10px 5px 10px;
    letter-spacing: 1px;
}


button{
    border: none;
    background-color: transparent;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(23, 5vw);
    grid-gap: 8px;
    width: 80%;
    margin: 0 auto 100px auto;
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    cursor: pointer;
}
.gallery-img:hover{
    animation: bwfade 1s ease forwards;
    filter: brightness(300%);
}
.gallery-img-01{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 4;
}
.gallery-img-02{
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 4;
}
.gallery-img-03{
    grid-column-start: 7;
    grid-column-end: 9;
    grid-row-start: 1;
    grid-row-end: 7;
}
.gallery-img-04{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 9;
}
.gallery-img-05{
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 4;
    grid-row-end: 8;
}
.gallery-img-06{
    grid-column-start: 7;
    grid-column-end: 9;
    grid-row-start: 7;
    grid-row-end: 8;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gallery-img-07{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 9;
    grid-row-end: 14;
}
.gallery-img-08{
    grid-column-start: 4;
    grid-column-end: 9;
    grid-row-start: 8;
    grid-row-end: 13;
}
.gallery-img-09{
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 19;
    grid-row-end: 24;
}
.gallery-img-10{
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 14;
    grid-row-end: 19;
}
.gallery-img-11{
    grid-column-start: 6;
    grid-column-end: 9;
    grid-row-start: 13;
    grid-row-end: 17;
}
.gallery-img-12{
    grid-column-start: 6;
    grid-column-end: 9;
    grid-row-start: 17;
    grid-row-end: 20;
}
.gallery-img-13{
    grid-column-start: 6;
    grid-column-end: 9;
    grid-row-start: 20;
    grid-row-end: 24;
}
.gallery-img-14{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 13;
    grid-row-end: 14;
    padding: 5px;
}

.gallery-title-style{
    background: -webkit-linear-gradient(#d6c4ac,#8a7033, #473419);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: 6.7vw;
    font-family: aquire;
}


.marg-bot{
    margin-bottom: 9vh;
}

/* MEET THE TEAM STYLES */
.flex-team{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 70%;
    margin: 0 auto;
}
.team-card{
    width: 22vw;
    margin-bottom: 9vh;
}
.team-img{
    width: 100%;
    height: auto;
    margin-bottom: -5px;
}

.name-style{
    font-family: aquire;
    font-size: 22px;
    letter-spacing: 2px;
    font-weight: 400;
    text-align: center;
    width: 100%;
    color: #fff;
    padding: 5px;
}

/* OUR MISSION STYLES */

.mission-text{
    color: #fff;
    text-align:justify;
    font-size: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 10px 20px;
    width: 80vw;
    margin: 0 auto;
}

/*FOOTER STYLES */ 
footer{
    position: relative;
}
.footer-box{
    height: fit-content;
    background: -webkit-linear-gradient(#d6c4ac44,#8a703344, #47341944);
    position: relative;
    z-index: 5;
}
.scroll-up{
    position: absolute;
    right: 5vw;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;
    padding: 8px 0;
}
.scroll-up-text{
    font-family: aquire;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}
.scroll-up-text:active{
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}
.flex-gotop{
    display: flex;
    flex-direction: row;
}
.angle-up{
    width: 16px;
    margin-bottom: 3px;
}


.footer-info{
    display: flex;
    flex-direction: row;
    width: 70vw;
    margin: 0 auto 10px auto;
}
.footer-left{
    flex: 1;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    margin-top: 3vh;
}
.mail-style, .phone-style, .mail-style:active, .phone-style:active{
    text-decoration: none;
    color: #fff;
}

.footer-mid{
    flex: 1;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    margin-top: 3vh;
}
.footer-text{
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0.7vh 0.3vw;
}
.footer-right{
    margin-top: 3vh;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.social-container{
    display: flex;
    margin: 0 auto;
    height: fit-content;
}
.footer-text{
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0vh 0.3vw 1vh 0.3vw;
}
.sm-logo{
    width: 32px;
    flex: 1;
    margin: 0 0.65vw;
    cursor: pointer;
}

.text-copyright{
    color: #fff;
    font-size: 12px;
    letter-spacing: 2px;
    font-family: aquire;
    padding: 8px 12px;
    width: 50vw;
    text-align: center;
    margin: 0 auto;
}
@media only screen and (max-width: 600px){
    .marg-bot{
        margin-bottom: 6vh;
    }
    body{
        background-image: url(../images/smallbg.jpg);
        background-size: contain;
    }
    .title-box{
        width: 90%;

    }
    .title-style{
        font-size: 36px;
    }
    .project-desc{
        padding: 30px 15px;
        font-size: 16px;
        text-align: justify;
    }
    .slideshow-container {
        width: 85vw;
    }
    .prev, .next,.text {
        font-size: 12px;
    }
    .hero-flex{
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0 auto 50px auto;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(12, 5vw);
        grid-gap: 8px;
        width: 90%;
        margin: 0 auto;
    }
    .project-img{
        width: 80vw;
        height: auto;
    }
    .project-details{
        margin: 0px;
    }
    /* MEET THE TEAM */
    .flex-team{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 90%;
        margin: 0 auto;
    }
    .team-card{
        width: 35vw;
    }
    .name-style{
        font-size: 14px;
    }
    /* OUR MISSION */
    
    .mission-text{
        width: 90vw;
        margin: 0 auto;
        font-size: 16px;
    }
    /* FOOTER */
    .footer-info{
        display: flex;
        flex-direction: column;
        width: 100vw;
    }
    .footer-mid{
        margin: 0px;
    }
    .scroll-up-text{
        font-size: 12px;
    }
    .scroll-up{
        padding: 15px 0;
        right: 3vw;
    }
    .footer-text{
        font-size: 16px;
    }
    .sm-logo{
        width: 8vw;
        margin: 0 1vw;
    }
    .text-copyright{
        font-size: 12px;
        width: 180px;
        letter-spacing: 1px;
        line-height: 12px;
    }
  }

  @media only screen and (min-width: 600px) and (max-width: 1024px) {
    body{
        background-image: url(../images/mediumbg.png);
        background-size: contain;
    }
    .slideshow-container {
        width: 80vw;
    }
     .hero-flex{
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0 auto 50px auto;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(12, 5vw);
        grid-gap: 8px;
        width: 90%;
        margin: 0 auto;
    }
    .project-img{
        width: 80vw;
        height: 55vh;
    }
    .project-details{
        margin: 0px;
    }
    .team-card{
        width: 28vw;
    }
  }