/* google fonts import |Mulish| */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800;900;1000&display=swap');
/* basic typrography */
*, ::before, ::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Mulish', sans-serif;
}
html{
    font-size: 62.5%;
}
body{
    font-size: 1.6rem;
}
a{
    display: inline-block;
    text-decoration: none;
}
li{
    list-style-type: none;
    line-height: 3rem;
}
section{
    margin: 6rem 0;
}
img{
    width: 100%;
    height: auto;
    object-fit: cover;
    vertical-align: bottom;
}
/* some variables */
:root{
    --primary-color: #FF5400;
    --dark-color: #424247;
    --black-color: #131318;
    --white-color: #FFF;
    --gray-color: #5A5A5D;
}
/* basic typrography class created */
.container{
    width: 98%;
    max-width: 1170px;
    margin: 0 auto;
}
.btn{
    color: var(--white-color);
    font-size: 2rem;
    font-weight: 700;
    padding: 1.5rem 2.5rem;
    border-radius: .8rem;
    background-color: var(--primary-color);
    border: 1px solid transparent;
    transition: all .5s ease;
    cursor: pointer;
}
.btn:hover{
    border-color: var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
}
.main-heading-title{
    color: var(--black-color);
    font-size: 4rem;
    font-weight: 800;
}
.paragraph-desc{
    color: var(--gray-color);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.6rem;
}
/* navigation Start */
nav#nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4rem 2rem;
    flex-wrap: wrap;
}
/* logo title */
a.logo-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.6rem;
    font-weight: 800;
    color: var(--black-color);
}
a.logo-title img {
    max-width: 4.8rem;
    margin-right: 1rem;
}
a.logo-title span{
    color: var(--primary-color);
}
/* menu */
ul#menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 4.4rem;
}

ul#menu li a {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--dark-color);
    transition: color .5s ease;
}
a.active-menu{
    color: var(--primary-color) !important;
}
ul#menu li a:hover{
    color: var(--primary-color);
}
.bars{
    font-size: 2.4rem;
    color: var(--black-color);
    display: none;
    cursor: pointer;
    transition: color .5s ease;
}
.bars:hover{
    color: var(--primary-color);
}
/* navigation end */
/* banner start */
.banner{
    background: linear-gradient(180deg, rgba(19, 19, 24, 0.80) 0%, rgba(19, 19, 24, 0.00) 100%), url(../images/Group13.png) no-repeat center center;
    background-size: cover;
    border-radius: 1.6rem;
    padding: 10rem 1rem;
}
/* banner content */
.banner-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2.4rem 0;
    max-width: 700px;
    margin: 0 auto;
    color: var(--white-color);
}
h1.banner-content-title {
    font-size: 6.4rem;
    font-weight: 800;
}
p.banner-content-desc {
    color: var(--white-color);
}
/* find now form */
form#find-now-form{
    max-width: 800px;
    margin: 4.8rem auto 0;
    padding: 1.6rem;
    border-radius: .8rem;
    background: rgba(255, 255, 255, 0.30);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
}
form#find-now-form input,
 form#find-now-form select {
    border: none;
    outline: none;
    padding: 1.5rem 2.5rem;
    border-radius: .8rem;
    width: 160px;
    color: var(--gray-color);
    font-size: 1.6rem;
    font-weight: 400;
}
form#find-now-form input::placeholder{
    color: var(--gray-color);
    font-size: 1.6rem;
    font-weight: 400;
}
button.btn.find-now-btn svg {
    margin-right: .5rem;
}
button.btn.find-now-btn:hover {
    background: transparent;
    color: var(--white-color);
    border-color: var(--white-color);
}
/* banner end */
/* popular tours start */
.popular-tours,
.perfect-place {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
}
.popular-tours-content,
.perfect-place-content {
    flex-basis: calc(60% - 3rem);
}
.popular-tours-content,
.perfect-place-content {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}
ul.popular-tour-list,
ul.perfect-place-list {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}
ul.popular-tour-list li,
ul.perfect-place-list li {
    list-style-type: disc;
    color: var(--gray-color);
    margin-left: 2rem;
}
button.read-more-btn,
button.see-more-btn {
    margin-right: auto;
}
/* popular tours end */

/* extra part */
/* latest travel start */
.latest-travel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
}
.latest-travel-item {
    display: flex;
    flex-direction: column;
}
.latest-travel-item img {
    height: 350px;
    width: 100%;
    border-radius: 1.6rem;
}
.latest-travel-info h2 {
    margin: 1rem 0;
    font-size: 2.4rem;
}
.latest-travel-info {
    padding: 2rem;
}
.latest-travel-item {
    background: #ece3e9ce;
    border-radius: 1.6rem;
}
/* latest travel end */

/* dentination start */
.destination {
    display: grid;
    /* grid-template-columns: repeat(12, 1fr); */
    grid-template-areas:
     'Maldives Maldives Maldives Maldives Maldives Maldives Indonesia Indonesia Indonesia Indonesia Indonesia Indonesia'
     'Srilanka Srilanka Srilanka North-America North-America North-America North-America North-America North-America Kashmir Kashmir Kashmir'
     'Bangladesh Bangladesh Bangladesh Bangladesh Bandarban Bandarban Bandarban Bandarban Bandarban Bandarban Bandarban Bandarban'
     ;
    grid-template-rows: 300px 285px 300px;
    gap: 2.4rem;
}
.destination-item {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    cursor: pointer;
}
.destination-item h4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white-color);
    font-size: 2.8rem;
    font-weight: 800;
}
.destination-item img {
    height: 100%;
    width: 100%;
}
.destination-item1 {
    grid-area: Maldives;
}
.destination-item2 {
    grid-area: Indonesia;
}
.destination-item3 {
    grid-area: Srilanka;
}
.destination-item4 {
    grid-area: North-America;
}
.destination-item5 {
    grid-area: Kashmir;
}
.destination-item6 {
    grid-area: Bangladesh;
}
.destination-item7 {
    grid-area: Bandarban;
}
/* dentination end */
/* why choose us start */
.why-choose-us-content,
.destination-content,
.deals-discounts-content,
.latest-travel-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4.8rem;
}

h2.why-choose-us-content-title,
.destination-content-title,
.deals-discounts-content-title {
    margin-bottom: 2.4rem;
}
.why-choose-us-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
}

.why-choose-item img {
    max-width: 6.4rem;
}
.why-choose-item {
    padding: 3.2rem;
    border-radius: 1.6rem;
    border: 1px solid rgba(251, 181, 99, 0.20);
    background: rgba(251, 181, 99, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-basis: calc(50% - 2.4rem);
    transition: all .5s ease;
}
.why-choose-item:hover{
    border: 1px solid rgba(41, 206, 246, 0.20);
    background: rgba(41, 206, 246, 0.05);
}
.why-choose-item-active{
    border: 1px solid rgba(41, 206, 246, 0.20);
    background: rgba(41, 206, 246, 0.05);
}
.why-choose-item h3 {
    color: var(--black-color);
    font-size: 2.4rem;
    font-weight: 800;
}
/* why choose us end */

/* deals & discount start */
.deals-discount-package{
    margin: 3rem 0;
    background-size: cover !important;
    padding: 4rem 2rem;
    border-radius: 1.6rem;
}
.deals-discount-package1{
    background: url(../images/Group39.png) no-repeat center center;
}
.deals-discount-package2{
    background: url(../images/Group40.png) no-repeat center center;
}
.deals-discount-package3{
    background: url(../images/Group39.png) no-repeat center center;
}
.deals-discount-package2 > div{
    margin-right: auto;
    margin-left: 0 !important;
}
.deals-discount-package-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 600px;
    margin-left: auto;
    background: #ece3e9ce;
    border-radius: 1.6rem;
    padding: 5rem;
}
.deals-discount-package-info p {
    font-size: 2rem;
}
p.paragraph-desc.deals-discount-package-info-where-title svg {
    color: var(--primary-color);
    margin: 0 1.6rem;
}

p.paragraph-desc.deals-discount-package-info-where-title svg:first-child {
    margin-left: 0;
}
button.btn.book-now-btn {
    margin-right: auto;
}
.deals-discount-package-info h4 {
    font-size: 2.4rem;
    font-weight: 800;
}
.package-price{
    color: var(--primary-color);
    font-weight: 800;
}

.see-all-packages-btn{
    margin: 2rem auto 0;
    display: block;

}
/* deals & discount end */

/* perfect place video start */
video.mountain-video {
    max-width: 600px;
}

.perfect-place-video {
    position: relative;
}

h3.video-desc {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    color: var(--white-color);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 3.6rem;
}
/* perfect place video end */

/* newsletter start */
.newsletter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2.4rem;
}
.newletter-img img {
    width: 100%;
    height: auto;
    max-height: 415px;
}
.newletter-img {
    position: relative;
    overflow: hidden;
    border-radius: 1.6rem;
}
button.btn.travel-save-btn {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 3.2rem;
    position: absolute;
    right: -1rem;
    bottom: 8.5rem;
    transform: rotateZ(-45deg);
}
button.btn.travel-save-btn span {
    font-size: 2.4rem;
    font-weight: 400;
}
form#newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 2.4rem;
    border-top: 2px solid rgba(19, 19, 24, 0.05);
    margin-top: 2.4rem;
}
.newsletter-content {
    padding: 4rem;
    border: 1px solid var(--primary-color);
    border-radius: 1.6rem;
}
form#newsletter-form input {
    border-radius: .8rem;
    background: rgba(19, 19, 24, 0.05);
    outline: none;
    border: none;
    padding: 1.6rem;
    color: var(--black-color);
    font-size: 1.6rem;
    font-weight: 400;
}
form#newsletter-form input:focus{
    outline: 1px solid var(--primary-color);
}
/* newsletter end */
/* footer start */
footer{
    text-align: center;
    color: var(--white-color);
    background-color: #F3F3F3;
    padding: 5rem 0;
}
.footer{
    max-width: 700px;
    margin: 0 auto;
}
.footer-content {
    text-align: center;
}
.footer-content-desc{
    margin: 1.6rem 0;
}
ul#social-menu{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
}
.copyright-desc{
    text-align: center;
    margin: 2rem 0 0;
    border-top: 1px solid #ddd;
    padding-top: 4rem;
}
/* social menu */
ul.social-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 4rem 0;
}
ul.social-menu li a {
    background: transparent;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--black-color);
    transition: all .5s ease;
    font-size: 2rem;
}
ul.social-menu li a:hover {
    background: var(--primary-color);
    color: var(--white-color);
}
/* footer end */
/* |MEHEDI HASSAN MIRAJ| */