style.css

	@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&family=Volkhov&display=swap');
*{
	 scroll-behavior: smooth;
}
	.container {
		width:100%;
		height: 100%;
	    box-sizing: border-box;
	    padding-right: 2%;
	    padding-left: 2%; 
	    max-width: 1800px;
        margin: auto;

	}
	.decore{
		z-index: -1;
		position: absolute;
		top: 0;
		right: 0;
	}
	.navbar{
		height: 80px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}
	nav li { 
	     list-style: none;
	     display: inline-block;
	 }
	.navbar a {
	 	text-decoration: none;
	 	margin-left :35px;
	 	font-family: 'Open Sans', sans-serif;
	 	color: #212832;
	 	font-size: 17px;
	 	transition: all .2s	 ease-in-out;
	 }
	 .navbar a:hover{
	 	border-bottom: 1px solid #212832;
	 	color: #DF6951;
	 }
	 .navbar button{
	 	width: 102px; 
	    height: 40px;
	    border-radius: 5px;
	    background: transparent;
	    border: 1px solid #212832;
	    font-family:  'Open Sans', sans-serif;
	    font-size: 17px;
	    padding: 5px;
	    cursor: pointer ;
	   transition: all .2s	 ease-in-out;
	 }
	 .navbar button:hover { 
	 scale: 1.05;
	 }
#more-icon{
	cursor: pointer;
	display: none;
	padding: 5px;
	border-radius: 50px;
	transition: all .2s ease;
}
#more-icon:hover{
	background: rgba(0, 0, 0, 0.4);
}

.res-navbar{
	background: rgba(255, 255, 255, 0.3);
  display: none;
	width: 100%;
	height: 100vh;
	text-align: center;
	}

.res-navbar li { 
	     list-style: none;
	     margin-bottom: 5px;
	 }

.res-navbar a {
	 	text-decoration: none;
	 	font-family: 'Open Sans', sans-serif;
	 	color: #212832;
	 	font-size: 17px;
	 	transition: all .2s	 ease-in-out;
	 }
.res-navbar button{
	width: 102px; 
	    height: 40px;
	    border-radius: 5px;
	    background: transparent;
	    border: 1px solid #212832;
	    font-family:  'Open Sans', sans-serif;
	    font-size: 17px;
	    padding: 5px;
	    cursor: pointer ;
	   transition: all .2s	 ease-in-out;
	 }
.res-navbar button:hover { 
	 scale: 1.05;
	 }

.res-navbar-open{
    display: flex;
	align-items: center;
	justify-content: center;
   flex-direction: column;

}

	 .hero {
	 	width: 100%;
	 	display: grid;
	grid-template-columns: 2fr 1fr;
	 	height:calc(1100px - 80px );
	 }
	 .col1  {

		padding-top: 15%;
	}
	.col2  {
		
		padding-top: 15%;
	}
	 .firstP{
	 	color: #DF6951;
	 	font-weight: 700;
	 	font-family: Poppins;
	    font-size: 20px;
	    text-transform: uppercase;
	 }
	 .col1 h1{
	color:  #181E4B;
	font-family: Volkhov;
	margin-top:35px ;
	margin-bottom:35px ;
	font-size: 84px;
	font-weight: 700;
	line-height: 89px;
	letter-spacing: -3.36px;
	}
	.description{
	color: #5E6282;
	font-family: Poppins;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
	}

	.col1 button{
	width: 170px;
	height: 60px;
	border: 0;
	border-radius: 10px;
	background: var(--yellow, #F1A501);
	box-shadow: 0px 20px 35px 0px rgba(241, 165, 1, 0.15);
	color:  #FFF;
	font-family:  'Open Sans', sans-serif;
	font-size: 18px;
	cursor: pointer;
	font-weight: 500;
	margin-top: 40px;
	transition: all .2s	 ease-in-out;
	}
	.col1 button:hover{
		scale : 1.05;
	}
	.col2 img{
		width: 650px;
		height: 650px;
	}
	.category h3{
	color:  #5E6282;
	text-align: center;
	 text-transform: uppercase;
	font-family: Poppins;
	font-size: 18px;
	font-weight: 600;
	}
	.category h2{
	color: #14183E;
	text-align: center;
	font-family: Volkhov;
	font-size: 50px;
	font-weight: 700;
	margin-bottom: 100px;
	text-transform: capitalize;
	}
	.cards {
  width:100%	;
	display: grid;
	gap : 20px;
	grid-template-columns:repeat(4, 1fr);
	margin-bottom: 120px;
	}
	.card {
	width: 267px;
 height: 314px;
	text-align: center;
	display: inline-block;
	border-radius: 24px;
	box-shadow: 0px 1.85185px 3.14815px 0px rgba(0, 0, 0, 0.00), 0px 8.14815px 6.51852px 0px rgba(0, 0, 0, 0.01), 0px 20px 13px 0px rgba(0, 0, 0, 0.01), 0px 38.51852px 25.48148px 0px rgba(0, 0, 0, 0.01), 0px 64.81481px 46.85185px 0px rgba(0, 0, 0, 0.02), 0px 100px 80px 0px rgba(0, 0, 0, 0.02);
	}
	.card img{
		margin-bottom: 20px;
	}
	.card h4{
	color: #1E1D4C;
	font-family: Open Sans;
	font-size: 20px;
	font-weight: 600;
	margin-bottom:40px;
	}
	.card p{
	color:  #5E6282;
	font-family: Poppins;
	font-size: 16px;
	font-weight: 500;
	line-height: 26px;
	}

#destinations h3{
color:  #5E6282;
text-align: center;
font-family: Poppins;
font-size: 18px;
font-weight: 600;
}
#destinations h2{
color:  #14183E;
text-align: center;
font-family: Volkhov;
font-size: 50px;
font-weight: 700;
margin-bottom: 100px;
}
.destin-cards{
width:100%	;
display: grid;
gap : 30px;
grid-template-columns:repeat(3, 1fr);
margin-left: 2%;
margin-right : 2%;
margin-bottom: 228px;
}
.destin-card{
width: 314px;
height: 600px;
border-radius : 24px;
box-shadow: 0px 1.85185px 3.14815px 0px rgba(0, 0, 0, 0.00), 0px 8.14815px 6.51852px 0px rgba(0, 0, 0, 0.01), 0px 20px 13px 0px rgba(0, 0, 0, 0.01), 0px 38.51852px 25.48148px 0px rgba(0, 0, 0, 0.01), 0px 64.81481px 46.85185px 0px rgba(0, 0, 0, 0.02), 0px 100px 80px 0px rgba(0, 0, 0, 0.02);
}
.destin-card img{
   border-top-left-radius: 24px;
   border-top-right-radius: 24px;
	transition: all .2s ease;
}
.destin-card img:hover {
	 transform: scale(1.05);
	 border-bottom-left-radius: 24px;
   border-bottom-right-radius: 24px;
}
.destin-card p {
color:  #5E6282;
font-family: Poppins;
font-size: 18px;
font-weight: 500;
line-height: 124.5%; 
text-align: center;
}

.booking{
	margin-bottom: 210px;
}

.booking-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap:118px;
}

.booking h3{
color:  #5E6282;
font-family: Poppins;
font-size: 18px;
font-weight: 600;
}

.booking h2{
color: #14183E;
font-family: Volkhov;
font-size: 50px;
font-weight: 700;
text-transform: capitalize;
}

.book-card{
border-radius: 24px;
box-shadow: 0px 1.85185px 3.14815px 0px rgba(0, 0, 0, 0.00), 0px 8.14815px 6.51852px 0px rgba(0, 0, 0, 0.01), 0px 20px 13px 0px rgba(0, 0, 0, 0.01), 0px 38.51852px 25.48148px 0px rgba(0, 0, 0, 0.01), 0px 64.81481px 46.85185px 0px rgba(0, 0, 0, 0.02), 0px 100px 80px 0px rgba(0, 0, 0, 0.02);
margin-bottom: 48px;
padding: 20px;
transition: all .2s ease;
}

.book-card:hover{
	scale : 1.05;
}

.book-card h4{
color:  #5E6282;
font-family: Poppins;
font-size: 16px;
font-weight: 700;
line-height: 124.5%;
}

.book-card p{
color: #5E6282;
font-family: Poppins;
font-size: 16px;
font-weight: 400;
line-height: 124.5%; 
}

.book-col2{
	display: flex;
	align-items: center;
	justify-content: center;
}

.book-col2 img{
	height: 400px;
	width: 500px;
}

.testimonials{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap:124px;
}

.test-col1 h3{
color: #5E6282;
font-family: Poppins;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
}

.test-col1 h2{
color: #14183E;
font-family: Volkhov;
font-size: 50px;
font-weight: 700;
text-transform: capitalize;
margin-bottom: 82px;
}

.box {
margin-top: 10px;
width: 504px;
height: 245px;
border-radius: 10px;
background: var(--white, #FFF);
box-shadow: 0px 1.85185px 3.14815px 0px;
padding:20px;
}

.box p{
color:  #5E6282;
font-family: Poppins;
font-size: 16px;
font-weight: 500;
line-height: 32px;
}

.box h4{
color:  #5E6282;
font-family: Poppins;
font-size: 18px;
font-weight: 600;
margin: 0;
}

.box h5{
color: #5E6282;
font-family: Poppins;
font-size: 14px;
font-weight: 500;
margin: 0;
}

#second-box{
	position: relative;
   top: -220px;
   right: -7px;
	z-index: -100;
}

.up-down{
	position: relative;
    top: -177px;
    right: -530px;
}
.companies{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 70px;
	align-items: center;
	margin-left: 20px;
	margin-right 20px;
}
.company{
filter:  grayscale(100%);
margin-bottom: 200px;
cursor: pointer;
transition: all .2s ease;
}

.company:hover{
 filter :grayscale(0%);
 scale: 1.05;
 }

.subscribe{
border-radius: 129px  20px 20px 20px;
background: rgba(223, 215, 249, 0.2);
padding: 30px;
width: 1100px;
height: 407px;
margin-bottom: 180px;
 }

 .subscribe h3{
color: #5E6282;
text-align: center;
font-family: Poppins;
font-size: 33px;
font-weight: 600;
line-height: 54px;
 }

.subscribe img{
	position: relative;
   top: -240px;
   right: -900px;
}

 .text-field{
 	display: flex;
 	align-items: center;
 	justify-content: center;
}
.subscribe input{
width: 421px;
height: 68px;
border-radius: 10px;
border: 0;
background:  #FFF;
margin-right: 24px;
padding-left:66px;
}

.subscribe input::-webkit-input-placeholder{
color: #39425D;
font-family: Poppins;
font-size: 14px;
font-weight: 400;
} 

.subscribe input:focus{
color: #39425D;
font-family: Poppins;
}

.subscribe button{
width: 180px;
height: 68px;
border-radius: 10px;
border: 0;
background: linear-gradient(180deg, #FF946D 0%, #FF7D68 100%);
color:  #FFF;
font-family: Open Sans;
font-size: 17px;
font-weight: 600;
cursor: pointer;
transition: all .2s ease;
}

.subscribe button:hover{
	scale : 1.05;
}

.text-field svg{
	position: relative;
	right:-55px;
}

.footer{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.footer h1{
color:#181E4B;
font-family: Poppins;
font-size: 44px;
font-weight: 500;
margin: 0;
margin-bottom: 20px;
}

.foot-col1 p {
color:  #5E6282;
font-family: Poppins;
font-size: 13px;
font-weight: 500;
line-height: 124.5%; 
}

.footer h5{
color:  #080809;
font-family: Poppins;
font-size: 21px;
font-weight: 700;
line-height: 124.5%;
margin: 0;
margin-bottom: 40px;
margin-left: 37px;
}

.footer li{
	list-style: none;
	margin-bottom: 14px;
}

.footer li a{
text-decoration:none;
color:  #5E6282;
font-family: Poppins;
font-size: 18px;
font-weight: 500;
line-height: 124.5%;
transition: all .2s	 ease-in-out;
}

.footer li a:hover{
border-bottom: 1px solid #212832;
color: #DF6951;
}

.socials{
	display: flex;
	align-items: center;
	margin:0;
	margin-bottom: 30px;
}
.socials img{
	transition: all .2s ease;
	cursor: pointer;
}
.socials img:hover{
	scale : 1.05;
}

.app{
	display: flex;
	align-items: center;	
	}

.app img{
	cursor: pointer;
	transition: all .2s ease;
}

.app img:hover{
	scale : 1.05;
}

.app svg{
	cursor: pointer;
	margin-left: 10px;
	transition: all .2s ease;

}

.app svg:hover{
	scale : 1.05;
}


.footer h6{
color:  #5E6282;
font-family: Poppins;
font-size: 20px;
font-weight: 500;
line-height: 124.5%;
letter-spacing: 0.1px;
margin:0;
margin-bottom: 16px;
}

.copyright{
color:  #5E6282;
font-family: Poppins;
font-size: 14px;
font-weight: 500;
line-height: 124.5%;
text-align: center;
grid-column-start: 1;
grid-column-end: 6;
margin-top:86px;
}

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

#more-icon{
	display: inline-block;
	height: 30px;
}



nav{
	display:none;
}
#login{
	display: none;
}
	 .col1 h1{
	font-size: 44px;;
	line-height: 49px;
	}

.hero .col2 img{
	width: 400px;
	height:400px;
}
.category h2{
	font-size:35px;
}
#destinations h2{
	font-size: 35px;
}
.booking h2{
	font-size: 35px;
}
.testimonials h2{
	font-size: 35px;
}
.cards {
    width:100%	;
	gap : 15px;
	grid-template-columns:repeat(2, 1fr);
	}
	.card {
 height: 250px;
 padding: 12px;
}

.destin-cards{
grid-template-columns:repeat(2, 1fr);
margin-left: 2%;
margin-right : 2%;
margin-bottom: 128px;
}
.booking-grid{
	grid-template-columns: repeat(1, 1fr);
}
.testimonials{
	grid-template-columns: repeat(1, 1fr);
}
.companies{
	grid-template-columns: repeat(2, 1fr);
}
.subscribe{
width: 585px;
height: 170px;
margin-bottom: 80px;
 }

.subscribe img{
    top: -160px;
right: -561px;

}

 .subscribe h3{
font-size: 23px;
font-weight: 600;
line-height: 34px;
 }
 .footer{
	grid-template-columns: repeat(4, 1fr);
}
 .foot-col5{
 	 margin-top: 10px;
    margin-left: 10px;
    display: flex;
    grid-column-start: 1;
    grid-column-end: 6;
    align-items: center;
    flex-direction: column;
}

}


@media only screen and (max-width: 600px) {
#more-icon{
	display: inline-block;
	height: 16px;
}

.logo{
	height: 20px;
}



nav{
	display:none;
}
#login{
	display: none;
}

.hero .col2 img{
	width: 200px;
	height:200px;
}

.category h2{
	font-size:20px;
}

#destinations h2{
	font-size: 20px;
}

.booking h2{
	font-size: 20px;
}

.testimonials h2{
	font-size: 20px;
}

.cards {
    width:100%	;
	gap : 15px;
	grid-template-columns:repeat(1, 1fr);
}

.destin-cards{
grid-template-columns:repeat(1, 1fr);
margin-left: 2%;
margin-right : 2%;
margin-bottom: 128px;
}

.booking-grid{
	grid-template-columns: repeat(1, 1fr);
}

.book-card{
	width: 300px;
}

.book-col2 img {
	height: 230px;
    width: 300px;
}

.testimonials{
	grid-template-columns: repeat(1, 1fr);
}

.companies{
	grid-template-columns: repeat(1, 1fr);
}

.box {
    width: 188px;
}

.box p {
  font-size: 10px;
  line-height: 28px;
}

.up-down svg{
	display: none;
}
.text-field {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.text-field svg {
    position: relative;
    right: 60px;
    top: 32px;
}

.subscribe {
    width: 160px;
    height: 387px;
}

 .subscribe input {
    width: 121px;
    height: 43px;
    border-radius: 10px;
    border: 0;
    background: #FFF;
    padding-left: 66px;
        margin-left: 19px;
}

.subscribe img {
    top: -257px;
    right: -93px;
}

 .subscribe h3 {
 	font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin: 0;
    margin-top: 35px;
}
.subscribe button {
	margin-top: 10px;
    width: 119px;
    height: 37px;
}

 .footer{
	grid-template-columns: repeat(4, 1fr);
}

.foot-col1{
	display: flex;
	grid-column-start: 1;
    grid-column-end: 6;
    flex-direction: column;
    align-items: center;
}

 .foot-col5{
 	 margin-top: 10px;
    margin-left: 10px;
    display: flex;
    grid-column-start: 1;
    grid-column-end: 6;
    align-items: center;
    flex-direction: column;
}

}