@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 

*{

  font-family: 'Poppins', sans-serif;

}

body {

  height: 100%;

  margin:0;

  padding:0;

  overflow-x: hidden;

  overscroll-behavior-y: contain;

  overscroll-behavior-x: none;



  -webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

-o-user-select: none;

user-select: none;



}

.topnav {

  overflow: hidden;

  background-color: #5c2e23;

}



.topnav a {

  float: right;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 15px 35px;

  text-decoration: none;

  font-size: 17px;

}



.topnav a:hover {

  background-color: #ddd;

  color: black;

}



.topnav a.active {

  background-color: #cccc;

  color: white;

}



.topnav .icon {

  display: none;

}



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

  .topnav a:not(:first-child) {

    display: none;

  }

  .topnav a.icon {

    float: left;

    display: block;

  }

  .topnav.responsive {

    position: relative;

  }

  .topnav.responsive .icon {

    position: absolute;

    left: 0;

    top: 0;

  }

  .topnav.responsive a {

    float: none;

    display: block;

    text-align: right;

  }





}

h1

{

  text-align: center;

  color: #5c2e23;

}

.main{

  margin-left: 5%;

  margin-right: 10%;

  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

}

.content {

  display: flex;  

  justify-content: center;  

  position: relative;

  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;

  z-index: 1;

  height: 94vh;

}

.logo {

  width: 30%;

  position: absolute;

  top: 0%;

  left: 0;

  display: inline-block;



  animation-name: log;

  animation-duration: 3s;

}

.slider {

  display: block;

  width: 5vw;

  position: absolute;

  bottom: 10px;



  animation-name: sipka;

  animation-duration: 3s;

}

.content2 {

  position: relative;

}

.description{

  position: absolute;

  font-size: 17px;

  top: 9vw;

  right: 0;

  color: #5c2e23;

  margin-left: 40vw;

  margin-right: 5vw;

  padding: 20px 20px 20px 20px;

  border-radius: 0px 0px 0px 10px;

  border-color: #5c2e2386;

  border-left-style: solid;

  border-bottom-style: solid;

  background-color: #5c2e2318;



  animation-name: cont;

  animation-duration: 4s;

}



@keyframes sipka {

  0% {

    opacity: 0%;

    bottom: 30vh;

  }

  100% {

    opacity: 100%;

    bottom: 10px;

  }

}



@keyframes cont {

  0% {

    opacity: 0%;

  }

  50% {

    opacity: 0%;

  }

  100% {

    opacity: 100%;

  }

}



@keyframes log {

  0% {

    opacity: 0%;

  }

  100% {

    opacity: 100%;

  }

}

.copy {

  

  font-size: small;

  text-align: center;

  background-color: #5c2e23;

  color: white;

  position: static;

  padding: 3px;

  bottom: 0;

}





 #ig:hover{

    background-color: rgb(185, 68, 103);

  }

  #fb:hover{

    background-color: rgb(32, 92, 170);

  }

  .contact-wrap {

    transform: scale(1);

    width: 70%;

    height: auto;

    margin: auto;

    margin-top: 10vh;

    margin-bottom: 10vh;

    

    display: flex;

    flex-wrap: wrap;

    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 0 8px 25px 0 rgba(0, 0, 0, 0.19);

  }



  .contact-in {

    padding: 4vh 3vh;

  }



  .contact-in:nth-child(1) {

    flex: 30%;

    background-color: #b8988f;

    color: #fff;

  }



  .contact-in:nth-child(2) {

    flex: 45%;

    background: #8a655c;

  }



  .contact-in:nth-child(3) {

    flex: 25%;

    padding: 0;

  }



  .contact-in h1 {

    font-size: 24px;

    color: #fff;

    text-transform: uppercase;

    font-weight: 500;

    margin-bottom: 50px;

    margin-top: 20px;

  }



  .contact-in h2 {

    font-size: 20px;

    font-weight: 400;

    margin-bottom: 15px;

  }



  .contact-in h2 i {

    font-size: 16px;

    width: 40px;

    height: 40px;

    margin-right: 10px;

    background: #f5f5f5;

    color: #000;

    border-radius: 50px;

    line-height: 40px;

    text-align: center;

  }



  .contact-in p {

    font-size: 15px;

    font-weight: 300;

    margin-bottom: 20px;

  }



  .contact-in ul {

    padding: 0;

    margin: 0;

  }



  .contact-in ul li {

    list-style: none;

    display: inline-block;

    margin-right: 5px;

    margin-top: 5px;

  }



  .contact-in ul li a {

    display: block;

    width: 30px;

    height: 30px;

    text-align: center;

    background: #fff;

    border-radius: 50px;

  }



  .contact-in ul li a i {

    font-size: 14px;

    line-height: 30px;

    color: #000;

  }



  .contact-in form {

    width: 100%;

    height: auto;

  }



  .contact-in-input {

    width: 100%;

    height: 40px;

    margin-bottom: 20px;

    border: 1px solid #b8988f;

    outline: none;

    padding-left: 5px;

    background: transparent;

    color: #fff;

    font-size: 12px;

    font-weight: 300;

  }



  .contact-in-input::placeholder {

    color: #fff;

  }



  .contact-in-textarea {

    width: 100%;

    height: 15vh; /*140px;*/

    margin-bottom: 20px;

    border: 1px solid #b8988f;

    outline: none;

    padding-top: 5px;

    padding-left: 5px;

    background: transparent;

    color: #fff;

    font-size: 12px;

    font-weight: 300;

  }



  .contact-in-textarea::placeholder {

    color: #fff;

  }



  .contact-in-btn {

    background: transparent;

    width: 100%;

    height: 40px;

    border: 1px solid #fff;

    outline: none;

    color: #fff;

    font-size: 12px;

    font-weight: 300;

    cursor: pointer;

  }

  .contact-in-btn:hover{

    background-color: rgba(255, 255, 255, 0.582);

    color: #5c2e23; 

  }



  .contact-in iframe {

    width: 100%;

    height: 100%;

  }

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

    .content{

      height: 92vh;

    }

    .description{

      top: 10vh;

      font-size: 14px; 

      padding: 20px 5px 5px 20px;

     border-width: 2px;

     margin-right: 8vh;

     }

     .desc1{

       font-size: 20px;

       margin: 0;

     }

   .contact-wrap{

    width: 80%;

    margin-bottom: 0;

    margin-top: 5%;

   }

   .contact-in p {

      font-size: 11px;

      margin-bottom: 20px;

    }

    .contact-in h1 {

      font-size: 17px;

      margin-bottom: 20px;

      margin-top: 20px;

      padding-bottom: 20px;

    }

    .contact-in h2 {

      font-size: 15px;

      margin-bottom: 15px;

    }

  }

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

    .description{

      top:5vh;

    }

     .logo{

       width: 50%;

     }

     .slider{

       width: 15%;

     }

    .contact-wrap{

      margin-top: 5%;

      margin-bottom: 5%;

    }

   

    .contact-in:nth-child(1) {

      flex: 100%;

    }



    .contact-in:nth-child(2) {

      flex: 50%;

    }



    .contact-in:nth-child(3) {

      flex: 50%;

    }

  }

 

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

    .content{

      height: 85vh;

    }

    .copy{

      font-size: 8px;

    }

    .description{

      top: 3vh;

     font-size: 9px; 

     padding: 5px 5px 5px 5px;

    border-width: 2px;

    margin-top: 2vh;

    margin-right: 5vh;

    }

    .desc1{

      font-size: 15px;

      margin: 0;

    }

    .desc2{

      margin: 0;

    }

    .logo{

      width: 50%;

    }

    .slider{

      width: 15%;

    }

    .main{

      margin: 0;

    }

    .contact-in{

      width: 100%;

    }

    .contact-in:nth-child(1) {

      flex: 50%;

    }



    .contact-in:nth-child(2) {

      flex: 50%;

    }



    .contact-in:nth-child(3) {

      flex: 100%;

    }

    .contact-wrap{

      margin-bottom: 5%;

      margin-top: 5%;

    }

    .contact-in p {

      font-size: 11px;

    }

    .contact-in h1 {

      font-size: 18px;

      margin-top: 15px;

      padding-bottom: 10px;

    }

    .contact-in h2 {

      font-size: 15px;

    }

  }

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

    .contact-in p {

      font-size: 13px;

      font-weight: 300;

      margin-right: 50px;

    }

    .desc1{

      font-size: 10px;

    }

    .description{

      font-size: 6px;

    }

    .topnav a {

      font-size: 15px;

    }

  }

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

    .desc1{

      font-size: 7px;

    }

    .description{

      font-size: 4px;

    }

  }