@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	line-height: 1.5;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

:root {
	--grey: #F5F5F5;
	--grey-1: #DDD;
	--grey-2: #888;
	--white: #FFF;
	--blue: #485BFF;
	--blue-1: #3344E1;
	--black: #222;
	--orange: #F5A810;
	--shadow: 0 4px 20px rgba(0,0,0,.05);
    --light: #F1F3FF; 
	--primary: #5539FB;
	--primary-shade: #4a30dd;
	--secondary: #2A3256;
	 --dark: #1F2647; 
}

html {
	scroll-behavior: smooth;
}

body {
	color: var(--black);
}


.container {
	max-width: 1750px;
	margin: 0 auto;
	padding: 0 4rem;
	width: 100%;
	height: 100%;
}

/* GLOBAL STYLES */
 header,
section {
	padding: 3rem 0;
	width: 100%;
}
.section__title {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: .5rem;
}
.section__detail {
	margin-bottom: 3rem;
	max-width: 768px;
}
.btn {
	padding: .75rem 1.25rem;
	border-radius: .25rem;
	border: none;
	cursor: pointer;
	transition: background .2s;
	outline: none;
	font-weight: 500;
	display: inline-block;
}
.btn-blue {
	background: var(--blue);
	color: var(--white);
}
.btn-blue:hover {
	background: var(--blue-1);
}
.btn-outline {
	padding: .75rem 1.25rem;
	border-radius: .25rem;
	border: 1px solid;
	cursor: pointer;
	transition: background .2s, color .2s;
	outline: none;
	font-weight: 500;
	display: inline-block;
}
.btn-outline-blue {
	border-color: var(--blue);
	color: var(--blue);
}
.btn-outline-blue:hover {
	background: var(--blue);
	color: var(--white);
}
/*GLOBAL STYLES */







/* NAVBAR */
nav {
	height: 5rem;
	border-bottom: 1px solid var(--grey);
	position: sticky;
	top: 0;
	background: var(--white);
	z-index: 999;
}
.nav__wrapper {
	display: flex;
	grid-gap: 3rem;
	align-items: center;
	height: 100%;
}
.nav__brand {
	display: flex;
	grid-gap: .5rem;
	align-items: center;
	transition: transform 0.3s ease;
}
   .nav__brand:hover {
		transform: scale(1.1);
	  }

.nav__logo {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--blue);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 1.5rem;
}
.nav__logo__name {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--black);
}
.nav__list__wrapper {
	flex: 1 1 0;
}
.nav__list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.2rem;
}

.nav__menu {
	display: flex;
	align-items: center;
	grid-gap: 2rem;
}
.nav__menu_2 {
	display: flex;
	align-items: center;
	grid-gap: 2rem;
	color: black;
	transition: transform 0.3s ease;
	
}
.nav__menu_2 a:hover{
    transform: scale(1.2);
	background-color:  var(--blue);
	color: white;
	border-radius: 15px;
	
}
.nav__menu__item {
	color: var(--black);
	transition: color .2s;
}
.nav__menu__item:hover {
	color: red;
}
.nav__toggle {
	font-size: 1.5rem;
	cursor: pointer;
	display: none;
}
.nav__menu a {
	display: inline-block;
	position: relative;
	transition: border-bottom 0.3s ease;
	transition: transform 0.3s ease;
  }
  
 .nav__menu a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color:var(--blue-1); /* Set the bottom line color */
	transform: scaleX(0); /* Initially hide the line */
	transition: transform 0.5s ease;
  }
  
  .nav__menu :hover::after {
	transform: scaleX(1);
	 /* Show the line on hover */
  }
  .nav__menu a:hover{
	transform: scale(1.1);
  }
  .nav-btn-2{
	display: inline-block;
      padding: 8px 16px;
      background-color:var(--white);
      color: var(--black);                  /*explr btn designig*/
      text-decoration: none;
      border-radius: 10px;
	  font-size: 1.3rem;
      transition: background-color 0.3s ease
	  
	  

}
.nav-btn-3{
	display: inline-block;
      padding: 8px 16px;
      background-color: var(--blue);
      color: var(--white);                  /*explr btn designig*/
      text-decoration: none;
      border-radius: 10px;
	  font-size: 1.3rem;

	 transition: background-color 0.3s ease
}
.nav__menu_2 .nav-btn-2:hover{
    transform: scale(1);
	background-color: var(--blue);
	color: var(--white);
	border-radius: 10px;
	
	
}
.nav__menu_2 .nav-btn-3:hover{
    transform: scale(1);
	background-color: var(--white);
	color: black;
	border:  var(--blue) solid 2px;
	
}
/* NAVBAR */







/* HEADER */
header {
	background: var(--grey); /* add background color for header section*/
}
.header__wrapper {
	display: flex;
	align-items: center;  /* desinging header section*/
	grid-gap: 4rem;
}
.header__content {
	flex: 1 1 0;  /* create flexbox sizeing*/
}
.header__title {
	font-size: 3.8rem;
	font-weight: 600;  /*header title coloring and sizing*/
	margin-bottom: 1rem;
}
.header__title span {
	 color: var(--blue);    /*highlight font color */
}
.header__detail {
	margin-bottom: 2rem;
	font-size: 1.2rem;     /* designing header details*/
}
.header__content__form {
	display: flex;
	align-items: center;
	grid-gap: 4rem;
	background: var(--white);
	padding: 2rem;
	border-radius: .5rem;
	box-shadow: var(--shadow);
}
.form-group {
	flex: 2 2 0;
}
.form-group select {
	width: 100%;
	display: block;
	background: transparent;
	border: none;
	font-size: 1.2rem;
	outline: none;
}
.form-group label {
	display: inline-block;
	margin-bottom: .5rem;
	color: var(--grey-2);
	font-weight: 600;
	font-size: 1.2rem;
	margin-left: .25rem;
}
.btn_e{
	padding-top: 1px;

}
.nav-button{
	display: inline-block;
      padding: 10px 20px;
      background-color: var(--white);
      color: var(--black);                  /*explr btn designig*/
      text-decoration: none;
      border-radius: 9px;
	  font-size: 1rem;
	  border:  var(--blue) solid 1px;
      transition: background-color 0.3s ease
	  

}
.nav-button:hover {
	background-color:  var(--blue);  
  }
.header__image {
	flex: .6 1 0;
	position: relative;        /*img sizing*/
	/* border: #1F2647 solid 1px; */
}
.header__image img {
	width: 120%;    /*img sizing*/
}
.header__image__content {
	position: absolute;
	top: 3rem;
	left: 2rem;
	background: var(--white);    /*create user and dis */
	padding: 1rem;
	border-radius: .5rem;
	box-shadow: var(--shadow);
}
.header__image__item {
	display: flex;
	grid-gap: .5rem;	 /*add a gap and inline img item*/
}
.header__image__item:not(:last-child) {
	margin-bottom: 1rem;
}
.header__image__item__wrapper h4 {
	line-height: 1;
	margin-bottom: .25rem;   /*item text designing*/
	font-size: 1.30rem;
}
.header__image__icon {
	font-size: 1.2rem;  /*add item size and color*/
	color: var(--blue);
}
/* HEADER */







/* ABOUT */
.about__wrapper {
	display: flex;
	align-items: center;
	grid-gap: 4rem;
}
.about__content {
	flex: 1 1 0;
}
.about__detail {
	margin-bottom: 1rem;
	font-size: 1.2rem;
}
.about__image {
	flex: 0.6 ;
	/* border: #1F2647 solid 1px; */

}
.about__image img {
	width: 100%;
}
.about__list {
	margin-bottom: 2rem;
}
.about__list li {
	font-weight: 500;
	font-size: 1.3rem;
	margin-bottom: .75rem;
	display: flex;
	align-items: center;
	grid-gap: .5rem;
}
.about__item__icon {
	font-size: 1.5rem;
	color: var(--blue);
}
.section__title{
	font-size: 2rem;
	padding-top: 35px;
}
/* ABOUT */


/* TESTIMONIAL */

#testimonial {
	background: var(--grey);
}
.testimonial__list {
	display: flex;
	grid-gap: 1.25rem;
}
.testimonial__item {
	padding: 1.5rem;
	background: var(--white);
	border-radius: .5rem;
	box-shadow: var(--shadow);
}
.testimonial__item__rating {
	color: var(--orange);
	display: flex;
	grid-gap: .5rem;
	font-size: 1.25rem;
	margin-bottom: 2rem;
}
.testimonial__item__text {
	margin-bottom: 2rem;
}
.testimonial__item__user {
	display: flex;
	align-items: center;
	grid-gap: 1rem;
}
.testimonial__item__user img {
	width: 3rem;
	height: 3rem;
	display: block;
	border-radius: 50%;
	object-fit: cover;
}
.testimonial__item__user__profile h4 {
	font-size: 1.125rem;
	font-weight: 600;
}
.testimonial__item__user__profile p {
	font-size: .875rem;
}
.section__detail{
	font-size: 1.2rem;
}
 .nav_btn{
	display: inline-block;
      padding: 6px 20px;
      background-color: var(--blue);
      color: var(--white);                  /*explr btn designig*/
      text-decoration: none;
      border-radius: 9px;
	  font-size: 1rem;
	  border:  var(--blue) solid 1px;
      transition: background-color 0.3s ease
	  
	   
	  

}
.nav-btnn {
	top: 10px;
}
.nav_btn:hover {
	background-color: var(--white);  
	color: var(--black);
  }
  #testimonial .ab{
	padding-left: 84%;
	
	padding-top: 20px;
  }
/* TESTIMONIAL */







/* BLOG */
.blog__list {
	display: flex;
	grid-gap: 1.25rem;
	overflow-x: auto;
	scrollbar-width: none;
	cursor: grab;
	scroll-snap-type: x;
	scroll-behavior: smooth;
}
.blog__list::-webkit-scrollbar {
	display: none;
}
.blog__item {
	min-width: 40%;
	scroll-snap-align: start;
}
.blog__item img {
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: .5rem;
	display: block;
	margin-bottom: 1.5rem;
}
.blog__item__title {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: .5rem;
}
.blog__item__description {
	margin-bottom: 2rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
}
/* BLOG */


/* FOOTER */
footer {
	background: var(--secondary);
	padding: 64px 0 0;
}
footer .top {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-gap: 36px;
	padding-bottom: 20px;
}
footer .top .brand {
	color: #fff;
	font-weight: 700;
	font-size: 1.7rem;
	margin-bottom: 24px;
	display: inline-block;
	transition: transform 0.3s ease;

}
footer .top .brand:hover{
	transform: scale(1.1);
	color: var(--blue);
}
footer .top p {
	color: #fff;
}
footer .top h5 {
	display: inline-block;
	position: relative;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 500;
	margin-bottom: 20px;
	position: relative;
	transition: border-bottom 0.3s ease;
	transition: transform 0.3s ease;

}
footer .top ul li {
	margin-bottom: 10px;
}
footer .top ul li a {
	color: #fff;
	font-size: 1.2rem;
	transition: all .3s ease;
}
footer .top ul li a:hover {
	color: var(--primary);
}
footer .bottom {
	background: var(--dark);
	padding: 16px 0;
}
footer .bottom .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	grid-gap: 16px;
}
footer .bottom p {
	color: #fff;
}
footer .bottom .links {
	display: flex;
	grid-gap: 24px;
}
footer .bottom .links a {
	color: #fff;
	transition: all .3s ease;
}
footer .bottom .links a:hover {
	color: var(--primary);
}
footer .top h5:hover{
	color: red;
	transform: scale(1.1);
	
}
footer .top h5:hover::after{
	
		transform: scaleX(1);
		/* Show the line on hover */
	  
}
footer .top h5::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--white); /* Set the bottom line color */
	transform: scaleX(0); /* Initially hide the line */
	transition: transform 0.5s ease
	
  }
  
  footer .top ul li a:hover{
	color: red;
  }
.container .pp{
	padding-left: 40%;
}

/* FOOTER */




  @media (max-width: 950px) {
	.container{
	  width: 90%;
	  padding: 30px 40px 40px 35px ;
	}
	.container .content .right-side{
	 width: 75%;
	 margin-left: 55px;
  }
  }
  @media (max-width: 820px) {
	.container{
	  margin: 40px 0;
	  height: 100%;
	}
	.container .content{
	  flex-direction: column-reverse;
	}
   .container .content .left-side{
	 width: 100%;
	 flex-direction: row;
	 margin-top: 40px;
	 justify-content: center;
	 flex-wrap: wrap;
   }
   .container .content .left-side::before{
	 display: none;
   }
   .container .content .right-side{
	 width: 100%;
	 margin-left: 0;
   }
  }


/* BREAKPOINTS */
@media screen and (max-width: 1000px) {
	.container {
		max-width: 800px;
		
	}
	.container .header__title{
		font-size: 30px;
	}
	.container  .header__detail{
		font-size: 15px;
	}
	.container  .header__content__form{
		font-size: 15px;
	}
	.container .form-group label,select,option{
		font-size:15px ;
	}
}







@media screen and (max-width: 1200px) {
	.container {
		max-width: 800px;
	}
	.container .section__title{
		font-size: 30px;
		padding-bottom: 10px;
	}
	.container.about__detail{
		font-size: 10px;
	}
}







@media screen and (max-width: 991px) {
	.container {
		max-width: 768px;
	}



	/* NAVBAR */
	.nav__list__wrapper {
		position: fixed;
		top: 5rem;
		background: var(--white);
		padding: 1rem 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s;
		z-index: 999;
	}
	.nav__list__wrapper.show {
		opacity: 1;
		visibility: visible;
	}
	.nav__list,
	.nav__menu {
		flex-direction: column;
		align-items: flex-start;
		grid-gap: 1rem;
	}
	.nav__list {
		max-width: 768px;
		padding: 0 1rem;
		margin: 0 auto;
	}
	.nav__toggle {
		display: block;
		margin-left: auto;
	}
	/* NAVBAR */



	/* HEADER */
	.header__image {
		display: none;
	}
	/* HEADER */
}







@media screen and (max-width: 768px) {
	.container {
		max-width: 576px;
	}



	/* NAVBAR */
	.nav__list {
		max-width: 576px;
	}
	/* NAVBAR */



	/* ABOUT */
	.about__wrapper {
		flex-direction: column;
	}
	/* ABOUT */



	/* DESTINATIONS */
	.destinations__list {
		grid-template-columns: 1fr;
	}
	.destinations__item:nth-child(2) {
		grid-row: unset;
		aspect-ratio: 16 / 9;
	}



	/* TESTIMONIAL */
	.testimonial__list {
		flex-direction: column;
	}
	/* TESTIMONIAL */



	/* BLOG */
	.blog__item {
		min-width: 70%;
	}
	/* BLOG */




	/* FOOTER */
	.footer__wrapper {
		flex-direction: column;
		grid-gap: 1.5rem;
	}
}







@media screen and (max-width: 576px) {
	/* HEADER */
	.header__content__form {
		flex-direction: column;
		align-items: flex-start;
	}
	.form-group {
		width: 100%;
	}
	/* HEADER */



	/* BLOG */
	.blog__item {
		min-width: 90%;
	}
	/* BLOG */
}
/* BREAKPOINTS */