*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,body{
    width: 100%;
    height: 100%;
    background-color: #cecec6
    ;
    position: relative;
    overflow-x: hidden;

}

#main{
    width: 100%;
    height: 100%;
}

#page1{
    
    width: 100%;
    height: 100vh;
    background-image: url(https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-position: center;
    background-size: cover;
}
nav{
    width: 100%;
    height: 10%;
   display: flex;
   align-items: center;
   justify-content: center;
    color: white;
    font-weight: 200;
    font-family: "Prata", serif;
    font-weight: 200;
    font-style: normal;
    letter-spacing:40px;
}
#pg1-tital{
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    font-family: "Prata", serif;
    font-weight: 400;
    font-style: italic;
    color: white;
}


#page2{
    width: 100%;
    height: 100vh;
   
}


#pg2-tital{
    width:100%;
    height:60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  
    /* background-color: #fff; */
}

.tital-top{
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    text-wrap: balance;
}

.tital-top p{
    width: 450px;
    font-weight: 200;
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  
}

.tital-top h3{
  
    font-weight: 300;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
  
}

.tital-bottom{
    width: 100%;
    height: 10%;
    /* background: #000; */
    text-align:center;
    font-weight: 100;
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  
}

#pg2-img{
    width: 100%;
    height: 100vh;
    align-items: end;
    justify-content: center;
    display: flex;
    padding-bottom: 30px;
    font-size: 60px;
    color: white;
    background-image: url(https://images.unsplash.com/photo-1623298317883-6b70254edf31?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-position: center;
    background-size: cover;
}

#page-demo{
    width: 100%;
    height: 100vh;
    
}

#page3{
    width: 100%;
    height: 120vh;
    
}


.pg3-tital{
    width: 100%;
    height: 20%;
    display: flex;
    align-items: start;
    justify-content: center;
    /* background-color: #fff; */
}

.pg3-tital h3{
    width: 600px;
    text-align: center;
    text-wrap: balance;
    font-size: 40px;
    font-family: "Prata", serif;
    font-weight: 100;
    font-style: normal;
}


.pg3-img{
    width: 100%;
    height: 60%;
    display: flex;
    align-items: center;justify-content: center;
}

.pg3-img img{
    width:500px;
    height: 700px;
    object-fit: cover;
}


.pg3-name-tital{
     width: 100%;
     height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    text-wrap: balance;
    
    font-family: "Prata", serif;
    font-weight: 400;
    font-style: italic;
}

.pg3-name-tital p{
    text-align:center;
    font-weight: 100;
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}


#page4{
    width: 100%;
    height: 100vh;
    /* background-color: red; */
}

#pg4-tital{
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align:center;
    font-weight: 100;
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

#pg4-card-section{
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pg4-card-for-swipers{
    width: 80%;
    height: 80%;
}

.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #1f1e1e;
    display: flex;
    justify-content: center;
    align-items: center;
  }

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


  .swiper-slide-content-card{
    width: 100%;
    height: 100%;
    /* background-color: #fff; */
    position: relative;
  }


  .swiper-slide-content-card img{
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
    overflow: hidden;
    /* background-color: #fff; */
  }
  .swiper-slide-content-card h2{
    font-family: "Prata", serif;
    font-weight: 400;
    font-style: italic;
    color: white;
    font-size: 40px;
    position: absolute;
    bottom: 3%;
    left: 3%;
  }






  #page5{
    width: 100%;
    height: 100vh;
  }


  #pg5-tital{
    width:100%;
    height:60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  
    /* background-color: #fff; */
}

.tital-top{
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    text-wrap: balance;
    
}

.tital-top p{
    width: 450px;
    font-weight: 200;
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  
}

.tital-top h3{
  
    font-family: "Prata", serif;
    font-weight: 400;
    font-style: italic;
  
}

.tital-bottom{
    width: 100%;
    height: 10%;
    /* background: #000; */
    text-align:center;
    font-weight: 100;
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  
}

#pg5-img{
    width: 100%;
    height: 100vh;
    background-image: url(https://images.unsplash.com/photo-1623298460174-371443cc45f0?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-position: center;
    background-size: cover;
    padding-bottom: 30px;
    font-size: 60px;
    display: flex;
    flex-direction: column;
}


#pg5-top{
    width: 100%;
    height: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;

}

#pg5-top p{
    font-weight: 400;
    font-family: "Poppins", sans-serif;
   font-size: 30px;
    font-style: normal;
    
  
}

#pg5-top h2{
    font-size: 80px;
    font-family: "Prata", serif;
    font-weight: 100;
    font-style: italic
    ;
  
}




#pg5-mid{
    width: 100%;
    height: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;

 

}


#pg5-mid p{
    font-weight: 400;
    font-family: "Poppins", sans-serif;
   font-size: 30px;
    font-style: normal;
  
}

#pg5-mid h2{
    font-size: 80px;
    font-family: "Prata", serif;
    font-weight: 100;
    font-style: italic
    ;
  
}


#pg5-btom{
    width: 100%;
    height: 34%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    font-weight: 100;
    font-family: "Poppins", sans-serif;
   font-size: 20px;
    font-style: normal;
    color: white;

   
}








@media (max-width: 481px) { 
    
    nav{
        width: 100%;
        height: 10%;
        color: white;
        font-weight: 200;
        font-family: "Prata", serif;
        font-weight: 200;
        font-style: normal;
        letter-spacing:30px;
        font-size: 10px;
    }
 
  
    #pg1-tital h2{
    
        font-size: 20px;
        background-color: #fff;
        
      
    }
    
    

    
    #pg2-tital{
        width:100%;
        height:50vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      
        /* background-color: #fff; */
    }
    
    .tital-top{
        width: 100%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        text-align: center;
        text-wrap: balance;
    }
    
    .tital-top p{
        width: 400px;
        font-weight: 250;
        font-family: "Poppins", sans-serif;
        font-weight: 200;
        font-style: normal;
       font-size: 2.7vw;
    }
    
    .tital-top h3{
        font-size: 3.5vw;
      
        font-weight: 350;
        font-family: "Poppins", sans-serif;
        font-weight: 300;
        font-style: normal;
      
    }
    
    .tital-bottom{
    
        font-weight: 250;
     
      
    }
    
    #pg2-img{
   
        height: 70vh;
        padding-bottom: 90px;
        font-size: 35px;
       
    }

    #page3{
        width: 100%;
        height: 100vh;
        
    }
    
    
    .pg3-tital{
      
        height: 20%;
      
        /* background-color: #fff; */
    }
    
    .pg3-tital h3{
        width: 500px;
        text-align: center;
        text-wrap: balance;
        font-size: 25px;
        font-family: "Prata", serif;
        font-weight: 100;
        font-style: normal;
    }
    
    
    .pg3-img{
        width: 100%;
        height: 40%;
        display: flex;
        /* background-color: #1f1e1e; */
        align-items: center;
        justify-content: center;
    }
    
    .pg3-img img{
        width:350px;
        height: 400px;
        object-fit: cover;
    }
    
    
    .pg3-name-tital{
         width: 100%;
         height: 20%;
       
        
        
        font-weight: 400;
     
    }
    
    .pg3-name-tital p{
     
        font-weight: 200;

    }
    
    
    #page4{
        width: 100%;
        height: 100vh;
        /* background-color: red; */
    }
    
   
    
    #pg4-card-section{
        width: 100%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
       
    }

   
#pg5-mid p{
    font-weight: 400;
    font-family: "Poppins", sans-serif;
   font-size: 30px;
    font-style: normal;
  
}

#pg5-mid h2{
    font-size: 60px;
   
   
  
}
    
     
    
    
    
    


}




@media (max-width: 337px) {
    .tital-top p{
        width: 300px;
       font-size: 2.9vw;
    }
    
    .tital-top h3{
        font-size: 3.8vw;
      
    }

    #pg5-mid h2{
        font-size: 45px;
    
      
      
    }
        

}




@media (max-width: 750px) { 
    #page1{
        width: 100%;
        height: 100vh;
        background-image: url(https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
        background-position: center;
        background-size: cover;
    }
    nav{
        width: 100%;
        height: 10%;
        padding: 5px;
        font-size: 5px;
    }
    #pg1-tital{
        width: 100%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1w;
        font-family: "Prata", serif;
        font-weight: 400;
        font-style: italic;
        color: white;
        
    }

    #pg1-tital h1{
          
            font-size: 10vw;
    }

    #page3{
        width: 100%;
        height: 100vh;
        
    }
    
    
    .pg3-tital{
      
        height: 20%;
      
        /* background-color: #fff; */
    }
    
    .pg3-tital h3{
        width: 500px;
        text-align: center;
        text-wrap: balance;
        font-size: 25px;
        font-family: "Prata", serif;
        font-weight: 100;
        font-style: normal;
    }
    
    
    .pg3-img{
        width: 100%;
        height: 40%;
        display: flex;
        /* background-color: #1f1e1e; */
        align-items: center;
        justify-content: center;
    }
    
    .pg3-img img{
        width:350px;
        height: 400px;
        object-fit: cover;
    }
    
    
    .pg3-name-tital{
         width: 100%;
         height: 20%;
       
        
        
        font-weight: 400;
     
    }
    
    .pg3-name-tital p{
     
        font-weight: 200;

    }
    
    #pg5-btom{
        gap: 10px;
      flex-direction: column;
       
       
    }

}