curtorism.css

*{
    font-family:helvetica,arial,sans-serif;

}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    text-align: justify;

  }
  h2{
    height: 60px;
  }
  
  
  body{
    height: 100vh;
    /* display: flex; */
    justify-content: center;
    align-items: center;
  }
    
  .img-slider{
      display: grid;
      /* grid-template-columns:80% ; */
      
    position: relative;
    width: 1000px;
    height: 550px;
    margin: auto;
    background: #16181f;
    
  }
  
  #section2{
    /* border: 1px solid black; */
    width: 95%;
    display: grid;
    gap: 10px;
    grid-template-columns:40%  40%;
    margin-left:100px ;
    padding: 2%;
   
}
  
  .img-slider .slide{
    z-index: 1;
    position: absolute;
    width: 100%;
    clip-path: circle(0% at 0 50%);
  }
  
  .img-slider .slide.active{
    clip-path: circle(150% at 0 50%);
    transition: 2s;
    transition-property: clip-path;
  }
  
  .img-slider .slide img{
    z-index: 1;
    width: 100%;
    border-radius: 5px;
  }
  
  .img-slider .slide .info{
    position: absolute;
    top: 0;
    padding: 15px 30px;
  }
  
  .img-slider .slide .info h2{
    color: #fff;
    font-size: 45px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
  }
  
  .img-slider .slide .info p{
    color: #fff;
    background: rgba(0, 0, 0, 0.1);
    font-size: 16px;
    width: 60%;
    padding: 10px;
    border-radius: 4px;
  }
  
  .img-slider .navigation{
    z-index: 2;
    position: absolute;
    display: flex;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .img-slider .navigation .btn{
    background: rgba(255, 255, 255, 0.5);
    width: 12px;
    height: 12px;
    margin: 10px;
    border-radius: 50%;
    cursor: pointer;
  }
  
  .img-slider .navigation .btn.active{
    background: #2696E9;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  }
  
  @media (max-width: 820px){
    .img-slider{
      width: 600px;
      height: 375px;
    }
  
    .img-slider .slide .info{
      padding: 10px 25px;
    }
  
    .img-slider .slide .info h2{
      font-size: 35px;
    }
  
    .img-slider .slide .info p{
      width: 70%;
      font-size: 15px;
    }
  
    .img-slider .navigation{
      bottom: 25px;
    }
  
    .img-slider .navigation .btn{
      width: 10px;
      height: 10px;
      margin: 8px;
    }
  }
  
  @media (max-width: 620px){
    .img-slider{
      width: 400px;
      height: 250px;
    }
  
    .img-slider .slide .info{
      padding: 10px 20px;
    }
  
    .img-slider .slide .info h2{
      font-size: 30px;
    }
  
    .img-slider .slide .info p{
      width: 80%;
      font-size: 13px;
    }
  
    .img-slider .navigation{
      bottom: 15px;
    }
  
    .img-slider .navigation .btn{
      width: 8px;
      height: 8px;
      margin: 6px;
    }
  }
  
  @media (max-width: 420px){
    .img-slider{
      width: 320px;
      height: 200px;
    }
  
    .img-slider .slide .info{
      padding: 5px 10px;
    }
  
    .img-slider .slide .info h2{
      font-size: 25px;
    }
  
    .img-slider .slide .info p{
      width: 90%;
      font-size: 11px;
    }
  
    .img-slider .navigation{
      bottom: 10px;
    }
  }
  #head{
      padding: 3%;
      display: grid;
      width: 800px;
      gap: 10px;
      margin-left: 80px;

   } 
  a{
      text-decoration: none;
      color: black;
  }


   .hinditext{
    display: grid;
    grid-template-columns: 40% 40%;
    gap: 10px;
    margin-left: 80px;

     
    }
    .daynight{
        background-color: teal;
        color: white;
        width: 100px;
        height: 30px;
        border-radius: 5px;
        padding: 2%;
        text-align: center;

    }
    #hinditext1{
    padding: 3%;
    display: grid;
    grid-template-columns: 20% 30% 30% ;
    margin-top: 5px;
    width: 600px;
    margin-left: 80px;

    
    
    }
    #hinditext2{
        padding: 3%;
        display: grid;
        grid-template-columns: 20% 20% 20% 20% 20% ;
        margin-top: 5px;
        width: 700px;
        margin-left: 80px;
        
        
        }

    
    
    
  
 /*form*/


 

#form{
  width:90%;
  height:740px;
  border: 1px solid rgba(145,151,163,.2);
  /* box-shadow: 0 5px 10px 0 #dddddd80; */
  font-family: helvetica,arial,sans-serif;
  margin: 0;
  padding-left:7px;
  /* margin-left: 50px; */
 }
 #verify{
   display: grid;
  width:90%;
  height:800px;
  border: 1px solid rgba(145,151,163,.2);
  box-shadow: 0 5px 10px 0 #dddddd80;
  font-family: helvetica,arial,sans-serif;
  margin: 0;
  padding-left:17px;
  margin-left: 150px;
       
}
 .cost{
   display: grid;
   grid-template-columns: 50% 50%;
 }
 #form>button{
   width:220px;  
   background: #2f9bdb;;
   color: white;
   border-radius: 4px;
   box-sizing: border-box;
   border:1px solid black;
   height: 30px;
   margin-left: 40px;
   padding: 5%;
   text-align: center;
   font-size: 20px;

 }
 #form>p{
     font-size:xx-small;

 }
 #div{
    border: 1px solid black;
    margin: 0 250px;
    width: 65%;
    margin-left:250px;
 }
 #comment{
     width: 700px;
     height: 100px;
     margin-left:70px;
     margin-top: 20px;
 }
 #btn1{

     background-color: #2f9bdb;
     color: white;
     margin-left:700px;
     border: none;
     cursor: pointer;
    
 }
 



input{
  width: 300px;
  height: 30px;
}












/*footer*/
*{
  margin: 0;
  padding: 0;
}
.footerFirst{
  display: grid;
  grid-template-columns: repeat(5,auto);
  width: 100%;
  gap: 10px;

}
.footerFirst>div{
  margin-top: 20px;
  width: 100%;
  margin-left: 1%;
  height: 350px;
  font-family:helvetica,arial,sans-serif;
}
.footerSecond{
  width: 98%;
  margin:0 auto;
  text-align: center;
  font-family:helvetica,arial,sans-serif;
}
.footerFirst>div>a{
 text-decoration: none;
 color: black;
 font-size:smaller;
}
.footerSecond>p{
  margin-top: 10px;
  font-size: smaller;
}
#logo{
  width: 180px;
  font-size: smaller;
  margin-left:25px;
}
.GooglePlaystore{
margin-left: 5px;
  margin-top:15px;
}
.social-icon{
  margin-top: 5px;
}
.social-icon>a>img{
  height: 25px;
}

/*impp*/

.container{
  width: 100%;
  font-family: circularairpro-bold, Helvetica, Arial, sans-serif;
 
  
   }
   .container>h1{
  margin-left:230px;
  font-family: circularairpro-bold, Helvetica, Arial, sans-serif;
  font-weight: 700;
  margin-bottom:20px;
  margin-top: 20px;

  
   }
   .TrendingTrips{
     display: grid;
     grid-template-columns: repeat(8,auto);
     width: 72%;
     height:400px;
     margin:0 auto;
  
  
   
   }
   .TravelGuides{
     display: grid;
     grid-template-columns: repeat(8,auto);
     width: 70%;
     height:280px;
     margin:0 auto;
    
   }
   .DiscoverNow{
   display: grid;
     grid-template-columns: repeat(8,auto);
     width: 70%;
     height:220px;
     margin:0 auto;
     
  }
   .img>img{
     width: 350px;
     height: 250px;
     border-radius: 10px;
   }
   .button{
     display: flex;
     width: 320px;
   }
   .discription{
     width: 320px;
   }
   .discription>h4{
    
     margin: 0;
   }
   .button>button{
    margin-left:200px;
    height:20px;
    margin-top: 5px;
  }
  .button>h5{
    margin-top: 5px;
  }
   .discription>p{
     font-size: smaller;
     margin-top: 0;
   }
   .img1>img{
     width: 250px;
     height:170px;
     margin-top: 5px;
     border-radius: 10px;
     cursor: pointer;
   }
   .img2>img{
     width: 180px;
     height:250px;
     margin-top: 5px;
     border-radius:5px;

   }
 .slick-arrow{
     color: black;
     font-size:0px;
     margin: 0;
     padding: 0;
   }

 .slick-next {
 right:0px;

 }
 .slick-prev {
 left: -45px;
}


 .slick-next, .slick-prev {
   line-height: 0;
 position: absolute;
 top: 40%;
 display: block;
 width: 50px;
 height: 20px;
 }
 .slick-next:before, .slick-prev:before {
 font-family: slick;
 font-size: 50px;
 line-height: 1;
 opacity: .75;
 color: rgb(177, 171, 171);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

 

  

/* comment */
 
#btn1{
  width: 75px;
  height: 30px;
  }
  #countComment{
    margin-top: 10px;
    margin-left: 20px;
  }
  #div>p{
    margin-left:20px;
    margin-bottom: 10px;
  }
  #comment{
    width: 700px;
    height: 100px;
    margin-left:70px;
    margin-top: 20px;
}