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

/* icons */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");


/* Important Variables */
:root {
    --primary-color: #FF5400;
    --white-color: #FFF;
    --black-color: #131318;
    --gray-color: #5A5A5D;
    --shadow-bg: rgba(255, 255, 255, 0.30);
}

/* Target All */
* {
    font-family: 'Mulish', sans-serif;
    outline: none;
    border: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1440px;
    width: 80%;
    margin: 0 auto;
}

/* header-section */
.header-section {
    margin-top: 50px;
}

.header-section nav {
    display: flex;
    justify-content: space-between;
}

.header-section nav>a {
    display: flex;
    align-items: center;
    font-size: 2.25rem;
    font-weight: 800;
}

.header-section nav>a i,
.logo-rav {
    color: var(--primary-color);
}

.header-section nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 40px;
}

.header-section nav ul li .nav-item {
    color: var(--gray-color);
    font-weight: 400;
}

.header-section nav ul .navbar-toggle {
    display: none;
}

.header-section nav ul li .active {
    color: var(--primary-color);
    font-size: 1.125rem;
    font-weight: 700;
}

/* banner-container */
.banner-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(19, 19, 24, 0.80) 0%, rgba(19, 19, 24, 0.00) 100%), url(../assets/Images/Group13.png);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 16px;
    padding: 120px 110px;
    margin-top: 40px;
}

.banner-container .banner-text {
    text-align: center;
}

.banner-container .banner-text h1 {
    color: var(--white-color);
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 24px;
}

.banner-container .banner-text h4 {
    margin-bottom: 15px;
    color: var(--white-color);
    font-size: 1.7rem;
}

.banner-container .banner-text h4>span {
    font-size: 1.2rem;
}

.banner-container form {
    background-color: var(--shadow-bg);
    padding: 20px;
    border-radius: 8px;
    display: flex;
    gap: 24px;

}

.banner-container form input,
select,
.banner-container form button {
    padding: 10px;
    border-radius: 8px;
    width: 130px;
    cursor: pointer;
}

.banner-container form input::placeholder,
select {
    color: var(--gray-color);
    font-weight: 400;
}

.banner-container form button {
    background-color: var(--primary-color);
    color: var(--white-color);
    font-weight: 700;
}


/* popular-tours */
.popular-tours {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 100px;
}

.popular-content {
    padding-right: 40px;
}

.popular-content,
.popular-img {
    width: 50%;
}

.popular-content h2 {
    color: var(--black-color);
    font-size: 2.5rem;
    font-weight: 800;
}

.popular-content p,
.popular-content ul {
    color: var(--gray-color);
    font-weight: 400;
    line-height: 20px;
    margin: 24px 0;
    text-align: justify;
}

.popular-content ul {
    padding-left: 30px;
}

.popular-content button {
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 1.2rem;
    border-radius: 8px;
    font-weight: 800;
    padding: 15px 24px;
    cursor: pointer;
}

.popular-img img {
    width: 100%;
}

/* choose-your-destination */
.choose-your-destination {
    margin-top: 70px;
}

.destination-text {
    text-align: center;
}

.destination-text h2 {
    color: var(--black-color);
    font-size: 2.5rem;
    font-weight: 800;
}

.destination-text p {
    color: var(--gray-color);
    font-weight: 400;
    line-height: 26px;
    max-width: 600px;
    margin: 24px auto;
}

/* destination-image-container */
.destination-image-container .grid-item1 {
    grid-area: grid-item1;
    background: url("../assets/Images/Rectangle5.png");
}

.destination-image-container .grid-item2 {
    grid-area: grid-item2;
    background: url("../assets/Images/Rectangle8.png");
}

.destination-image-container .grid-item3 {
    grid-area: grid-item3;
    background: url("../assets/Images/Rectangle6.png");
}

.destination-image-container .grid-item4 {
    grid-area: grid-item4;
    background: url("../assets/Images/Rectangle7.png");
}

.destination-image-container .grid-item5 {
    grid-area: grid-item5;
    background: url("../assets/Images/Rectangle9.png");
}

.destination-image-container .grid-item6 {
    grid-area: grid-item6;
    background: url("../assets/Images/Rectangle10.png");
}

.destination-image-container .grid-item7 {
    grid-area: grid-item7;
    background: url("../assets/Images/Rectangle11.png");

}

.destination-image-container .grid-item1,
.destination-image-container .grid-item2,
.destination-image-container .grid-item3,
.destination-image-container .grid-item4,
.destination-image-container .grid-item5,
.destination-image-container .grid-item6,
.destination-image-container .grid-item7 {
    min-height: 250px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.destination-image-container {
    display: grid;
    grid-template-areas:
        "grid-item1   grid-item1  grid-item1   grid-item2  grid-item2  grid-item2"
        "grid-item3   grid-item4  grid-item4   grid-item4  grid-item5  grid-item5"
        "grid-item6   grid-item6   grid-item7  grid-item7  grid-item7 grid-item7";
    gap: 18px;
}

.destination-image-container p {
    color: var(--white-color);
    font-size: 1.75rem;
    font-weight: 800;
}

/* why-choose-us */
.why-choose-us {
    margin-top: 80px;
}

.why-choose-us>h2 {
    color: var(--black-color);
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
}

.why-choose-us>p {
    color: var(--gray-color);
    text-align: center;
    font-weight: 400;
    line-height: 26px;
    margin: 14px 0;
}

.choose-card-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
}

.choose-card-container .choose-items {
    width: 40%;
}

.choose-card-container .choose-items:nth-child(odd) {
    padding: 32px;
    border: 1px solid rgba(251, 181, 99, 0.20);
    background: rgba(251, 181, 99, 0.05);
    border-radius: 16px;
}

.choose-card-container .choose-items:nth-child(even) {
    padding: 32px;
    border-radius: 16px;
    border: 1px solid rgba(41, 206, 246, 0.20);
    background: rgba(41, 206, 246, 0.05);
}

.choose-card-container .choose-items p {
    color: #5A5A5D;
    font-weight: 400;
    line-height: 26px;
}

.choose-card-container .choose-items h2 {
    color: var(--black-color);
    font-size: 1.5rem;
    font-weight: 800;
    margin: 15px 0;
}

/* deals-discount */
.deals-discount {
    margin-top: 80px;
}

.deals-discount>h1 {
    color: var(--black-color);
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
}

.deals-discount .deals-title {
    color: var(--gray-color);
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    margin: 24px 0 48px 0;
}

.deals-discount .all-pack-btn {
    text-align: center;
}

.deals-discount .all-pack-btn>button {
    border-radius: 8px;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 1.2rem;
    font-weight: 700;
    padding: 12px 20px;
    cursor: pointer;
    margin-top: 24px;
}

.deals-discount .deals-card-container .deals-card-1 {
    background: url("../assets/Images/Group39.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: right;
    min-height: 500px;
    border-radius: 16px;
    margin-bottom: 20px;
}

.deals-discount .deals-card-container .deals-card-2 {
    background: url("../assets/Images/Group40.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: left;
    min-height: 500px;
    border-radius: 16px;
    margin-bottom: 20px;
}

.deals-discount .deals-card-container .deals-card-3 {
    background: url("../assets/Images/Group39.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: right;
    min-height: 500px;
    border-radius: 16px;
    margin-bottom: 20px;
}

.deals-discount .deals-card-container .deals-card-content {
    border-radius: 16px;
    border: 2px solid #FFF;
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(2.5px);
    width: 40%;
    padding: 50px;
    margin: 50px 80px;
}

.deals-discount .deals-card-container .deals-card-content p:nth-child(1) {
    color: var(--gray-color);
    font-weight: 400;
}

.deals-discount .deals-card-container .deals-card-content p:nth-child(1) i {
    color: var(--primary-color);
    margin-right: 5px;
}

.deals-discount .deals-card-container .deals-card-content h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 10px 0;
}

.deals-discount .deals-card-container .deals-card-content p:nth-child(3) {
    color: var(--gray-color);
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 16px;
}

.deals-discount .deals-card-container .deals-card-content h4 {
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight: 800;
}

.deals-discount .deals-card-container .deals-card-content button {
    border-radius: 8px;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 1.25rem;
    font-weight: 800;
    padding: 14px 24px;
    cursor: pointer;
    margin-top: 24px;
}

/* simple-perfact-place */
.simple-perfect-place {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 100px;
}

.simple-perfect-place .perfect-place-content,
.simple-perfect-place .perfect-place-video {
    width: 50%;
}

.perfect-place-content>h2 {
    color: var(--black-color);
    font-size: 2.5rem;
    font-weight: 800;
}

.perfect-place-content>p {
    color: var(--gray-color);
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    margin: 24px 0;
}

.perfect-place-content ul {
    color: var(--black-color);
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    padding: 0 10px;
}

.perfect-place-content ul li {
    margin: 10px 0;
}

.perfect-place-content button {
    color: var(--white-color);
    font-size: 1.25rem;
    font-weight: 800;
    border-radius: 8px;
    background: var(--primary-color);
    padding: 14px 35px;
    cursor: pointer;
    margin-top: 14px;
}

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

.perfect-place-video h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white-color);
    text-align: center;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 36px;
}

.perfect-place-video video {
    border-radius: 16px;
    width: 100%;
}

/* testimonials */
.testimonials{
    margin-top: 80px;
}
.testimonials h2{
    text-align: center;
    color: var(--black-color);
    font-size: 2.5rem;
    font-weight: 800;
}
.testimonials .reviews{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}
.testimonials .reviews div{
    text-align: center;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 50px 20px;
}
.testimonials .reviews div img{
    width: 50px;
}
.testimonials .reviews div h4{
    margin: 14px 0;
}
.testimonials .reviews div p{
    color: #5A5A5D;
    text-align: center;
    font-weight: 400;
    line-height: 26px;
}






/* newsletter */
.newsletter {
    display: flex;
    gap: 10px;
    margin-top: 80px;
}

.newsletter .newsletter-form-content,
.newsletter .newsletter-img {
    width: 50%;
}

.newsletter .newsletter-form-content {
    border-radius: 16px;
    border: 1px solid var(--primary-color);
    padding: 28px;
}

.newsletter .newsletter-form-content h4 {
    color: var(--black-color);
    font-size: 1.25rem;
    font-weight: 800;
}

.newsletter .newsletter-form-content p {
    color: var(--gray-color);
    font-weight: 400;
    line-height: 26px;
    margin: 16px 0;
}

.newsletter .newsletter-form-content form {
    padding: 10px;
}

.newsletter .newsletter-form-content form>input {
    width: 94%;
    border-radius: 8px;
    background: rgba(19, 19, 24, 0.05);
    margin: 18px 0;
    padding: 16px;
}

.newsletter .newsletter-form-content form button {
    width: 100%;
    color: var(--white-color);
    font-size: 1.25rem;
    font-weight: 800;
    border-radius: 8px;
    background: var(--primary-color);
    padding: 14px;
}

.newsletter-img {
    background: url(../assets/Images/rrrrr.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 50px;
    width: 100%;
}

.newsletter-img div {
    display: inline-block;
    border-radius: 16px;
    background: #FF5400;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: rotate(-19deg);
    padding: 20px;
}

.newsletter-img div p {
    color: #FFF;
    font-weight: 400;
}

.newsletter-img div p , .newsletter-img div h3{
    color: #FFF;
    font-weight: 800;
}


/* footer-section */
.footer-section {
    background: rgba(19, 19, 24, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
    padding: 100px;
}

.footer-section h2 a {
    font-size: 2rem;
    font-weight: 800;
}

.footer-section h2 a i,
.footer-section h2 a .footer-logo-rav {
    color: #FF5400;
    font-weight: 800;
}

.footer-section p {
    width: 50%;
    color: #5A5A5D;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
    margin: 16px auto;
}
.footer-section .footer-logo{
    display: flex;
    gap: 20px;
    margin: 10px 0;
}
.footer-section .footer-logo i{
    cursor: pointer;
}
.footer-section hr{
    width: 100%;
    border: 1px solid rgba(146, 142, 142, 0.644);
    margin: 10px 0;
}