html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: poppins;
    src: url(poppins/Poppins-Regular.ttf);

}

@font-face {
    font-family: poiret;
    src: url(Poiret_One/PoiretOne-Regular.ttf);
}

@font-face {
    font-family: pom;
    src: url(Ysabeau_Infant/YsabeauInfant-VariableFont_wght.ttf);
}

body {
    font-family: pom;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

#logo {
    background-image: linear-gradient(rgba(0, 02, 0, 0.6), rgba(0, 0, 0, 0.6)), url(pics/realistic-water-drop-with-ecosystem.jpg);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    text-align: center;
    color: white;

    h1 {

        font-size: 600%;
        align-items: center;
        padding-top: 8%;
    }

    h2{
        font-size: 260%;
    }

    p {
        margin-top: 2%;
        font-size:110%;
        font-size: 130%;
        
        color: #ffffff
    }
}
#ctp{
    margin-top: 11%;
    font-size: 140%;
    
}
#bar {
  
    
    display: flex;
    margin: auto;
    color:white;
    width: 60%;
    justify-content: space-between;
  

    a {
        text-decoration: none;
        color:white;
        font-size: 90%;
        text-align: center;
        margin: auto;
        padding-top: 3%;
    }
}

#about {
    display: flex;
    justify-content: space-between;
    padding-top: 5%;
    margin: auto;
    width: 70%;
    line-height: 1.1;



    #about-text {
        width: 50%;
    }


    p {
        font-size: 145%;
        width: 75%;
    }

    h1 {
        color: #003729;
        font-size: 320%;
        padding-bottom: 5%;
        padding-top: 10%;
    }

    h2 {
        color: #003729;
        font-size: 260%;
        width: 80%;
        line-height: 1.1;
    }
}

#about-img {
    transform: rotate(-90deg);
    width: 40%;

    img {
        height: 70%;
    }

}

#shapes {
    padding-top: 1%;
    margin: auto;
    width: 50%;
    display: flex;
    justify-content: space-between;

    img {
        height: 20%;
        width: 15%;
    }
}

#offer-section {
    text-align: center;
    margin: auto;
    padding-top: 3%;

    h2 {
        color: #003729;
        font-size: 300%;
        padding-bottom: 4%;
    }
}

#offer {

    display: flex;
    margin: auto;
    gap: 10px;
 
    width: 70%;

    p {
        font-size: 20px;
    }

    #thinking {
        text-align: center;
        border: 1px solid #003729;
        box-shadow: 0px 8px 18px -2px rgb(55, 53, 53);
        padding: 1%;
        width: 50%;
        img {
            height: 30%;
            width: 20%;

        }

        h1 {
            color: #003729;
        }
    }

    #thinking:hover {
        color: black;
    }

    #science {
        text-align: center;
        border: px solid #003729;
        ;
        padding: 1%;
        width: 50%;
        box-shadow: 0px 10px 18px -5px rgb(55, 53, 53);

        h1 {
            color: #003729;
            
        }

        img {
            height: 30%;
            width: 25%;
        }
    }

    #tech {
        background-color: #003729;
        padding: 1%;
        color: white;
        box-shadow: 0px 10px 18px -5px rgb(55, 53, 53);
        width: 50%;

        img {
            height: 30%;
            width: 25%;
        }

        h1 {
            color: white;
        }
    }
}

#philosophy {
   
    padding-top: 7%;
    gap:5%;
    margin: auto;
    width: 40%;
    text-align: center;
    p {
        font-size: 130%;

    }

    h1 {
        color: #003729;
        font-size: 300%;
    }
    img {
        padding-top: 1.5%;
        height: 20%;
        width: 10%;

    }


}


#join-us {
  
    margin: auto;
    width: 40%;
    text-align: center;
    padding: 3%;

    p {
        font-size: 145%;
    
    }

    h1 {
        color: #003729;
        font-size: 320%;
     }

    img {
        padding-top: 1.5%;
        height: 20%;
        width: 10%;

    }
}

#projects{
    display: flex;
    margin-top: 5%;
    width: 80%;
}
#project-title{
    text-align: center;
    margin: auto;
    color: #003729;
    font-size: 200%;
    padding-bottom: 0.3%;
    width:30%;    
    transform: rotate(-10deg);
}
.team-heading{
    margin-top:5%;
    text-align: center;
}
#team{
    display: flex;
    justify-content: space-evenly;
    margin-top:2%;
    margin-bottom: 5%;
    margin-left: 2%;
    gap: 10px;
    img{
        height:350px;
        width:280px;
        border-radius: 20px;
    }
}


#photos- p{
       margin-left: 30%;
}
#photos p{
   margin-left: 30%;
  
}
#photos h4{
    width:90%
}

#feedback{
    background-image: linear-gradient(rgba(0, 02, 0, 0.6), rgba(0, 0, 0, 0.6)), url(pics/foot.png);
    height: 60vh;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    display: flex;

}

#contact{
    border: 2px solid #003729;
    padding-left: 5%;
    margin-top: 7%;
    height:50vh;
    width: 30%;
    background-color: #003729;

    input{
        font-size: 130%;
        margin-bottom: 2%;

    }
p{
    font-size: 130%;
    width: 70%;
    padding-bottom: 3%;
}
}
button{
    width:38%;
    height: 3vh;
    font-size: 100%;

}

label{
    font-size: 120%;
}

#description{
    width: 30%;
    padding: 7%;    
    font-size: 150%;
}

/* Image slide*/

.slide{
    display:flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    background-image: linear-gradient(rgba(0, 02, 0, 0.6), rgba(0, 0, 0, 0.6)), url(pics/realistic-water-drop-with-ecosystem.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 70%;
}

.mySwiper{
    max-width: 700px;
    width:100%;
    padding:40px 0;
}

.container{
    margin:0 40px;
    overflow: hidden;
}

.swiper-slide{
    font-size: 18px;
    width:600px; 
    
}

.box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


.box img {
    width:80%;
    height:300px;
    object-fit:cover;
    border-radius: 30px;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
}

.box span{
    position:absolute;
    bottom:10px;
    left:px;
    color:#fff;
    font-size:30px;
    font-weight:600;
    letter-spacing: 1px;
    backdrop-filter: blur(100px);
}

.box a{
    text-decoration: none;
    color: #fff;
}
.swiper-pagination-bullet {
    background: #fff;
    width: 9px;
    height:9px;
}

@media only screen and (max-width:400px){
    body{
        overflow-x: hidden;
    }
    #bar{
        margin: 0;
        a{
            padding: 5px;
        }
    }

    #logo{
        height: auto;
        h1{
            padding-top: 1%;
            font-size: 400%;
        }
        h2{
            font-size:220%;
        }
        span{
            display: none;
        }
    }

    #about{
        flex-direction: column;
        width: 100%;

        #about-text{
            width:100%;
        }
        p{
            width: 100%;
        }
        h1{
            text-align: center;
            padding-top: 5%;
        }
        h2{
            width: 100%;
            text-align: center;
        }
    }
    #about-img{
        width: 100%;
        img{
            width:80%;
        }
    }

  #offer{
    width: 100%;
    flex-direction: column;
    margin-left:25% ;
  } 
  #thinking, #science, #tech{
    width: 100%;
  }
#both{
    margin-top: 10%;
}
  #philosophy, #join-us{
    width: 100%;
    padding: 1%;
  }

  #projects{
    flex-direction: column;
  }
  #project-title{
    margin-left: 10%;
  }
  .slide{
    width: 100%;
    margin-left: 12%;
  }
  #team{
    flex-direction: column;
    justify-self: center;
  }
  #feedback{
    flex-direction: column;
    height: auto;
    padding: 8%;
  }
  #contact{
    width: 90%;
    margin: auto;
    height: auto; 
    padding-bottom: 20%;
    p{
        width: 100%;
    }
 }
 #description{
    width: 100%;
}
}



@media screen and (min-width:401px) and (max-width: 429px){
#bar {
  
    
    display: flex;
    margin: auto;
    color:white;
    width: 90%;
    justify-content: space-between;
  

    a {
    
        margin: auto;
        padding-top: 9%;
    }
}

    #about-img{
        width: 60%;
       margin-left: 19%;
        margin-top: -2%;
        margin-bottom: 19%;
        img{
            width:30%;
        }
    }
    #about{
        flex-direction: column;
        width: 100%;

        #about-text{
            width:100%;
        }
        p{
            width: 100%;
        }
        h1{
            text-align: center;
            padding-top: 5%;
        }
        h2{
            width: 100%;
            text-align: center;
        }
    }
  #offer{
    width: 140%;
   
    flex-direction: column;
    margin-left:15% ;
  } 

#philosophy, #join-us{
    width: 100%;
    padding: 1%;
    margin-top: 5%;
  }

#projects{
    flex-direction: column;
  }

.slide{
    width: 100%;
    margin-left: 12%;
  }
#team{
flex-direction: column;
margin-left: 17%;
}

#feedback{
    flex-direction: column;
    height: auto;
    padding: 8%;

  }
 #description{
    width: 100%;
}  #contact{
    width: 90%;
    margin: auto;
    height: auto; 
    padding-bottom: 20%;
    p{
        width: 100%;
    }
 }
 #project-title{
    margin-left: 10%;
  }



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

#bar {
  
    
    display: flex;
    margin: auto;
 
    color:white;
    width: 90%;
    justify-content: space-between;
  

    a {
        gap:3%;
    
        margin: auto;
        padding-top: 9%;
    }
}


#about-img{
        width: 60%;
       margin-left: 19%;
        margin-top: -2%;
        margin-bottom: 19%;
        img{
            width:30%;
        }
    }

   #about{
        flex-direction: column;
        width: 100%;

        #about-text{
            width:100%;
        }
        p{
            width: 100%;
        }
        h1{
            text-align: center;
            padding-top: 5%;
        }
        h2{
            width: 100%;
            text-align: center;
        }
    }
    #logo {

        height: 120vh;
    }
#offer{
    width: 140%;
   
    flex-direction: column;
    margin-left:15% ;
  } 
#philosophy, #join-us{
    width: 100%;
    padding: 1%;
    margin-top: 5%;
  }

  #projects{
    flex-direction: column;
  }

.slide{
    width: 100%;
    margin-left: 12%;
  }
#team{
flex-direction: column;
margin-left: 17%;
}

#feedback{
    flex-direction: column;
    height: auto;
    padding: 8%;

  }
 #description{
    width: 100%;
}  #contact{
    width: 90%;
    margin: auto;
    height: auto; 
    padding-bottom: 20%;
    p{
        width: 100%;
    }
 }
 #project-title{
    margin-left: 10%;
  }



}


@media screen and (min-width:431px) and (max-width: 800px){
#logo{
    width: 130vw;
}

#about{
        flex-direction: column;
        width: 100%;

        #about-text{
            width:100%;
        }
        p{
            width: 100%;
        }
        h1{
            text-align: center;
            padding-top: 5%;
        }
        h2{
            width: 100%;
            text-align: center;
        }
    }
    #about-img{
        width: 120%;
       margin-left: -14%;
        margin-top: -30%;
        margin-bottom: 40%;
        img{
            width:30%;
        }
    }


#offer{
    width: 105%;
   
  

  } 

#philosophy, #join-us{
    width: 100%;
    padding: 1%;
    margin-top: 5%;
  }


.slide{
    width: 100%;
    margin-left: 12%;
  }

  #projects{
    flex-direction: column;
  }

#contact{
    width: 90%;
    margin: auto;
    height: auto; 
    padding-bottom: 20%;
    p{
        width: 100%;
    }
 }
#feedback{
    width:120vw;
   

}
#team{

     flex-direction: column;
     margin-left: 25%;
      img{
        height:400px;
        width:360px;
        border-radius: 20px;
    }
}


}