html {scroll-behavior: smooth; height:-webkit-fill-available;}
* {padding:0px; margin:0px; outline:0px;}
body {font-family: "Roboto", sans-serif; background-color: #fff; color: #eee; margin: 0; font-size: 12px; letter-spacing: 1px; height:-webkit-fill-available;}
a {text-decoration: none; color: #eee;} .bold {font-weight: 600;}
header {width:100%; margin: auto; height:60px; display: flex; align-items: center; justify-content: center; position: fixed; top:0; z-index:999; background-color:rgba(0,164,217,.9);}
header nav .m-social-contact-icon a {display: none;}
header nav {height: 100%; width: 100%;}
header nav .nav-container {float: right;}
header nav .nav-container .icon-container a {text-transform: lowercase;}
header nav a.logo {padding:0px; position:fixed; left:20px; top:5px;}
header nav a.logo:hover {border:none; background-color:transparent;}
header nav a {font-size: 14px; line-height: 24px; padding:18px 16px; text-transform: uppercase; float: left;}
header nav a:hover {background: #00a4d9; color: #333; background-color: #fff; transition: 0.5s linear;}
header nav div.m-navigatior {display: none;}
section {width: 100%; height: 100vh;}
.carousel {width: calc(100vw - 17px); height: 100vh; overflow: hidden; margin-top:0px; position: relative;}
.carousel .list .item {position: absolute; inset:0 0 0 0;}
.carousel .list .item img {width: 100%; height: 100%; object-fit: cover;}
.carousel .list .item .content {position: absolute; top:25%; width: auto; left:100px; color: white; text-shadow: 0 5px 10px #0004;} 
.carousel .list .item .content .text-content {max-width: 450px; text-transform: uppercase; background-color: rgba(0,0,0,0.5); width: 100%; display: inline-block; padding:42px 32px; border-radius: 10px;}
.carousel .list .item .content .author {font-weight: bold; letter-spacing: 10px;}
.carousel .list .item .content .title, .carousel .list .item .content .topic {font-weight: bold; font-size: 4em; list-style: 1.3em;}
.carousel .list .item .content .topic {color: #f1683a; color: #fff;}
.carousel .list .item .content .des {font-size: 16px; display: block; margin-top: 8px; line-height: 24px;}
.carousel .list .item .content .buttons {display: flex; gap: 5px; margin-top: 20px;}
.carousel .list .item .content .buttons button {border: none; display: inline-block; background-color:#00a4d9; color: #fff; letter-spacing: 3px; padding:12px; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-weight: 600;}
.carousel .list .item .content .buttons button:nth-child(2) {background-color: transparent; color: #eee; border:1px solid #eee;}

.thumbnail {position:absolute; bottom: 50px; left: 50%; width: max-content; z-index: 100; display: flex; gap: 20px;}
.thumbnail .item {width: 150px; height:150px; flex-shrink: 0; position:relative; border:solid 2px #fff; border-radius: 22px;}
.thumbnail .item img {width: 100%; height: 100%; object-fit: cover; border-radius: 20px;}
.thumbnail .item .content {position:absolute; bottom:0px; left:0px; right:0px; padding:8px 5px; text-align: center; border-radius: 0px 0px 25px 25px; background-color: rgba(0,0,0,0.5);}
.thumbnail .item .content .title {font-weight: bold;}
.thumbnail .item .content h2.des {font-size:10px;}
.arrows {position:absolute; top:0; left: 0; width:100%; height:100vh; display: flex; align-items: center;}
.arrows button {width:50px; height:50px; background-color: rgba(56, 56, 56, 0.7); border: none; font-family: Arial, Helvetica, sans-serif; color: #fff; font-weight: bold; font-size: large; transition: .5s; z-index:100; border-radius:4px;}
.arrows button#next {right:10px; position:absolute; background-color:#00a4d9; color: #fff; cursor: pointer;}
.arrows button#prev {left:10px; position:absolute; background-color:#00a4d9; color: #fff; cursor: pointer;}

.carousel .list .item:nth-child(1) {z-index: 1;}
.carousel .list .item:nth-child(1) .text-content,
.carousel .list .item:nth-child(1) .author,
.carousel .list .item:nth-child(1) .title,
.carousel .list .item:nth-child(1) .topic,
.carousel .list .item:nth-child(1) .des,
.carousel .list .item:nth-child(1) .buttons {transform: translateY(50px); filter: blur(20px); opacity: 0; animation: showContent 0.5s 1s linear 1 forwards;}
.carousel .list .item :nth-child(1) .title {animation-delay: 1.3s;}
.carousel .list .item :nth-child(1) .topic {animation-delay: 1.4s;}
.carousel .list .item :nth-child(1) .des {animation-delay: 1.6s;}
.carousel .list .item :nth-child(1) .buttons {animation-delay: 1.8s;}

.carousel.next .list .item:nth-child(1) img {width: 150px; height: 150px; position:absolute; left: 50%; bottom: 50px; border-radius: 20px; animation:showImage 0.5s linear 1 forwards;}
.carousel.next .thumbnail .item:nth-last-child(1) {width: 0; overflow: hidden; animation: showThumbnail .5s linear 1 forwards;}
.carousel.next .thumbnail {transform: translateX(150px); animation: transformThumbnail .5s linear 1 forwards;}

.carousel.prev .list .item:nth-child(2) {z-index: 2;}
.carousel.prev .list .item:nth-child(2) img {position:absolute; bottom: 0; left: 0; animation: outImage 0.5s linear 1 forwards;}
.carousel.prev .thumbnail .item:nth-child(1) {width: 0; overflow: hidden; animation: showThumbnail .5s linear 1 forwards;}

.carousel.prev .list .item:nth-child(2) .text-content,
.carousel.prev .list .item:nth-child(2) .author,
.carousel.prev .list .item:nth-child(2) .title,
.carousel.prev .list .item:nth-child(2) .topic,
.carousel.prev .list .item:nth-child(2) .des,
.carousel.prev .list .item:nth-child(2) .buttons {animation: contentOut 1.5s linear 1 forwards;}
.carousel.next .arrows button,
.carousel.prev .arrows button {pointer-events: none;}
.time {width:0%; height: 5px; background-color: #f1683a; position:absolute; z-index: 100; top: 0; left: 0;}
/* .carousel.next .time,
.carousel.prev .time {width: 100%; animation: timeRunning 2s linear 1 forwards;} */
.whatsAppChat {position: fixed; right: 30px; bottom: 20px; z-index:999;}
.whatsAppChat a {font-size: 50px !important; color:#25D366 !important;}
.whatsAppChat a i {color:#25D366;}

@keyframes showContent {
    to {opacity: 1; filter: blur(0px); transform: translateY(0px);}
}
@keyframes showImage {
 to {width: 100%; height: 100%; left: 0; bottom: 0; border-radius: 0;}
}
@keyframes showThumbnail {
    to {width: 150px;}
   }
   @keyframes transformThumbnail {
    to {transform: translateX(0);}
   }
   @keyframes outImage {
    to{width: 150px; height: 150px; border-radius: 20px; left: 50%; bottom: 50px;}
   }
   @keyframes contentOut {
    to{transform: translateY(-150px); filter: blur(20px); opacity: 0;}
   }
   @keyframes timeRunning {
    to{width: 0;}
   }

   @media screen and (max-width:678px){
    .carousel .list .item .content {padding-right: 0px;}
    .carousel .list .item .content .title { font-size: 30px;}
   }

section.about {background: #fff !important; display: flex; align-items: center; justify-content: center; height:auto; padding: 64px 0px !important;}
section.about aside.left span.img-1 {position: relative;}
section.about aside.left span.img-1 img,section.about aside.left span.img-2 img {width:340px; height:auto;}
section.about aside.right {max-width:50%; padding-left:64px;}
section.about aside.right h2 {text-transform: uppercase; color:#00a4d9; font-size: 24px;}
section.about aside.right p.about-text {color:#1d1d1d; font-size:14px; line-height: 20px; margin-top: 16px;}
button.btn {background-color:#00a4d9; color:#fff; padding:12px 16px; opacity:1; transition: 0.5s; cursor: pointer; display:inline-block; border:solid 1px #00a4d9; border-radius: 4px;}
a.btn {background-color:#00a4d9; color:#fff; padding:12px 16px; opacity:1; transition: 0.5s; cursor: pointer; display:inline-block; border:solid 1px #00a4d9; border-radius: 4px;}
button.secondarybtn,a.secondarybtn {background-color:#fff; color:#00a4d9; border: solid 1px #00a4d9; padding:12px 16px; line-height: 16px; transition: 0.5s; cursor: pointer; display:inline-block; border-radius: 4px;}
.mr-t-16 {margin-top:16px;} .mr-t-42 {margin-top:42px;}

section.packages {display: flex; justify-content: center; align-items: center; background-color:#daf5ff; height: auto; padding:24px 0px;}
section.packages .container {width: 80%; max-width: 1320px;}
section.packages .slider-wrapper1 {position:relative; width:100%; overflow: auto; padding:0 32px; background-color: #fff;}
section.packages .slider-wrapper:last-child {left:0px; padding-left:36px;}
section.packages .slider-wrapper-container {display: flex; flex-direction:column;}
section.packages .slider-wrapper1 h3 {text-transform: uppercase; color: #00a4d9;font-size:18px; letter-spacing: 1px; text-align: center; display: block; padding: 16px; margin-top:16px;}
section.packages .slider-wrapper1 .image-list {display: flex; flex-wrap: wrap; justify-content: center;}
section.packages .slider-wrapper1 .image-list span {width:32.3%; height: 290px; border: solid 4px #fff; border-radius: 20px; overflow: hidden;}
section.packages .slider-wrapper1 .image-list .image-item {width:100%; height:100%; transition: 0.5s; object-fit: cover;}
section.packages .slider-wrapper1 .image-list .image-item:hover {transform:scale(1.5);}
section.packages .heading-text h2 {text-transform: uppercase; color: #00a4d9; font-size:24px; text-align: center; padding:8px 0px;}
section.packages .heading-text p.sub-text {max-width:60%; margin:0 auto; font-size:14px; line-height:20px; color:#00a4d9; text-align:center; letter-spacing:1px; padding-bottom:24px;}
section.packages .button-container {display: flex; justify-content: center; margin-bottom: 16px;}

section.clients {background-color: #fff; width: 100%; height: auto; display: flex; justify-content: center; padding: 32px 0px;}
section.clients .container {width:80%; position: relative; padding: 0px;}
section.clients .container h2 {text-transform: uppercase; color: #00a4d9;font-size: 24px;text-align: center;padding:50px 0px 32px 0px;}
section.clients .container .clents-logo {width: 100%; display: flex; padding:30px 0px 50px 0px;}

section.contact {display: flex; justify-content: center; align-items: center; background-color:#696969; background-image:url(../img/group-tour-1.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; position:relative; height: auto; padding:100px 0px 50px 0px;}
section.contact::after {content:''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.8);}
section.contact .container {width:80%; position: relative; z-index:9;}
section.contact .container .detail-container {display:flex; justify-content:space-between; align-items: center;}
section.contact .heading-text h2 {text-transform: uppercase; color: #fff;font-size:24px; text-align: left; margin-bottom:24px;}
section.contact .left {min-width: 45%;}
section.contact .left .icon-container {display:block; width:100%; font-size:16px; line-height: 24px; margin-bottom:16px;}
section.contact .left .icon-container i {margin-right:6px;}
section.contact .left .social-icon i {font-size:36px; margin-right: 16px; transition: 0.5s;}
section.contact .left .social-icon i:hover {color: #00a4d9; cursor: pointer;}
section.contact .left h3 {text-transform: uppercase; color: #fff; font-size:18px; text-align: left; margin-bottom:8px;}
section.contact .left h3 + p {font-size: 14px; line-height: 20px; padding-bottom: 14px; max-width:80%;}
section.contact .right {max-width: 40%; border:solid 5px #fff; border-radius: 10px; padding:24px; text-align: center;}
section.contact .right .input-container {width: 100%; position:relative; margin-bottom:42px;}
section.contact .right .input-container input[type="email"] {width:calc(100% - 82px); height:40px; border: none; padding-left:16px; padding-right:16px; border-radius: 4px 0px 0px 4px;}
section.contact .right .input-container .send-icon {width: 50px; height: 40px; opacity:0.8; display: inline-block; transition: 0.5s; position: absolute; right: 0px; top:0px; background-color:#00a4d9; text-align: center; border: solid 1px #00a4d9; color: #fff; border-radius: 0px 4px 4px 0px;}
section.contact .right .input-container .send-icon:hover {opacity: 1; cursor: pointer;}
section.contact .right .input-container .send-icon i {font-size: 20px;}
section.contact .copyright {margin-top:60px; width: 100%; display: flex; justify-content: center;}
section.contact .copyright .designBy {color: #00a4d9; font-weight: bold; text-decoration: underline;}
section.contact .copyright span.copyright-text {color: #fff; font-size: 12px;}
section.contact .contact-form {width:100%;}
section.contact .contact-form .alert.alert-danger {background-color:#f00; padding:14px 10px; margin-bottom:8px; font-size:14px;}
section.contact .contact-form .alert.alert-success {background-color:rgb(0, 168, 36); padding:14px 10px; margin-bottom:8px; font-size:14px;}
section.contact .contact-form h3 {text-transform: uppercase; padding:12px; font-size: 20px;}
section.contact .contact-form input {width:-webkit-fill-available; height:45px; font-size: 14px; letter-spacing: 1px; margin-bottom: 8px; border-radius:4px; padding: 0 8px;}
section.contact .contact-form textarea {width:-webkit-fill-available; font-size: 17px; letter-spacing: 1px; margin-bottom: 8px; padding:8px; border-radius: 4px;}
section.contact .contact-form button.send {width: 100%; padding:16px; font-size: 18px; letter-spacing: 1px;}
section.contact.h-100vh-150px {height: calc(100vh - 150px);}
.reveal {position:relative; transform: translateY(150px); opacity: 0; transition: all 1s ease;}
.reveal.active {transform: translateY(0px); opacity:1; background:none; padding-top:24px;}
#myBtn {display:none; position:fixed; bottom:80px; right:32px; z-index:99; font-size:16px; font-weight: 600; transition: 0.5s; border:none; outline:none; background-color:rgba(0,0,0,0.3); border: solid 2px #fff; color:white; cursor:pointer; padding:8px 12px; border-radius:4px;}
#myBtn:hover {background-color:#00a4d9;}

section.testimonial {width: 100%; height: auto; position: relative; display: flex; background-color:#00a4d9;}
section.testimonial .container {background-color:#00a4d9;}
section.testimonial .container h2 {text-align: center; color: #fff; text-transform: uppercase; letter-spacing: 1px;}
section.testimonial .container .slider-wrapper {overflow: hidden; max-width:100%; margin:52px 70px 120px 70px;}
section.testimonial .container .slider-wrapper .card-list .card-item {color: #fff; user-select: none; padding:12px 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius:8px; min-height:300px; backdrop-filter: blur(30px); background:rgba(0,0,0,0.1); }
section.testimonial .container .slider-wrapper .card-list .card-item i.quote-left {position: absolute; left: 16px; top: 10px;font-size:24px;opacity: 0.8;}
section.testimonial .container .slider-wrapper .card-list .card-item i.quote-right {position: absolute;right: 16px;bottom: 10px;font-size:24px;opacity: 0.8;}
section.testimonial .container .slider-wrapper .card-list .card-item .user-image  {width:80px; height:80px; display: flex; justify-content: center; align-items: center; border-radius:50%; margin-bottom:10px; border:solid 3px #fff; padding:4px;}
section.testimonial .container .slider-wrapper .card-list .card-item .user-image i {font-size:42px;}
section.testimonial .container .slider-wrapper .card-list .card-item .review-text {font-size:14px; line-height:20px; text-align: center; letter-spacing: 1px; color:#fff; font-weight: 500; margin:10px 0 24px; padding:0px 32px;}
section.testimonial .container .slider-wrapper .card-list .card-item .reviewer-name {display: inline-block; margin-top:8px; letter-spacing: 1px; text-transform: uppercase;}
section.testimonial .container .slider-wrapper .swiper-pagination-bullet {background:#fff; height:15px; width: 15px;}
section.testimonial .container .slider-wrapper .swiper-slider-button { color: #fff; transition: 0.2s;}
section.testimonial .container .slider-wrapper .swiper-slider-button:hover { color: #6b6b6b;}
section.testimonial .container .slider-wrapper .swiper-pagination {bottom: 40px;}
.mr-t-60 {margin-top:60px;} .light-grey-color {color:#8d8d8d;} .bg-transparent {background-color: transparent !important;}
footer {padding:16px 0px; text-align:center; width:100%; background-color: #333;}
/* Responsive CSS */

@media(max-width:1024px) {
    header nav .m-social-contact-icon {position: absolute; left: 50%;transform: translateX(-50%);}
    header nav .m-social-contact-icon a {display: inline-block; width: auto; font-size:14px; padding:5px 10px 0px 10px;}
    header nav .m-social-contact-icon a i {border:solid 2px #fff; padding:6px; border-radius:50%; position:relative; top:3px;}
    header nav .m-social-contact-icon a i + span{ display: block; font-size: 9px;font-weight: bold; letter-spacing: 1px; margin-top:2px;}
    header nav .m-social-contact-icon:has(+ .m-navigatior.active) {display: none;}
    header {height:60px; overflow: hidden; background-color: rgba(0,0,0,.8);}
    header:has(nav div.m-navigatior.active) {height: 100%; background-color: rgba(0,164,217,1);}
    header nav a.logo {width: auto; position: absolute; left:10px; top:5px; display: inline-block; border: none;}
    header nav div.m-navigatior {display: inline-block; position: absolute; right:0px; top:0px; padding:12px 16px; background-color: transparent; width: auto; font-size:32px; z-index:99;}
    header nav div.m-navigatior span.close {display: none;}
    header nav div.m-navigatior.active {background-color: #00a4d9;}
    header nav div.m-navigatior.active span.close {display: block;}
    header nav div.m-navigatior.active span.humberger {display: none;}
    header nav a {width: 100%; text-align: center; padding:19px 0px; display: none;}
    header nav div.m-navigatior.active ~ div {height: 100vh; overflow-y:auto ;}
    header nav div.m-navigatior.active ~ div a {display: block; position: relative; border-radius: 0px;border-bottom: solid 1px #0089b6;}
    header nav div.m-navigatior.active ~ div a.logo {border-bottom: none;}
    header nav div a:hover,header nav div a:active {border: none; background-color: transparent;}
    .carousel {width: calc(100vw - 0px);}
    .carousel .list .item .content {top:20%; left:46%; transform: translateX(-50%); width: calc(100% - 100px); text-align: center;}
    .carousel .list .item .content .text-content {max-width:100%; padding:32px 16px;}
    .carousel .list .item .content .title, .carousel .list .item .content .topic {font-size: 1rem;}
    .carousel .list .item .content .des {font-size: 12px; line-height: 16px;}
    .carousel .list .item .content .buttons {flex-direction: column; justify-content: center;}
    .thumbnail {width: 100%; left:0%; gap:5px;  display: flex; justify-content: center;}
    .thumbnail .item {width:22%; height: 80px;}
    @keyframes showThumbnail {to {width:22%;}}
    @keyframes outImage {to{width:22%; height:80px; left:27%; border-radius: 20px; bottom:50px;}}
    .carousel.next .list .item:nth-child(1) img {width:22%; height: 80px; left: 27%; bottom: 50px;}
    .carousel.next .thumbnail {transform: translateX(22%);}
    section.about {flex-direction: column; height: auto; text-align: center;}
    section.about aside.right {max-width:90%; padding-left:0px;}
    section.about aside:first-child {height:225px;}
    section.about aside.left span.img-1 img, section.about aside.left span.img-2 img {width: 150px; height: 200px;}
    section.packages .container {width: 95%;}
    section.packages .container .heading-text h2 {text-align: center;}
    section.packages .container .heading-text p.sub-text {max-width:90%; font-size: 12px; line-height: 16px;}
    section.packages .container .heading-text p.heading-sub-text {text-align: center; color: #000000; font-size: 14px; margin-bottom: 16px;}
    section.packages .slider-wrapper1:first-child {border: none;}
    section.packages .slider-wrapper1:last-child {padding-left: 0;}
    section.packages .slider-wrapper1 {width: 100%; padding:0;}
    section.contact .container .detail-container {flex-direction: column-reverse;}
    section.contact .left {width: 100%; max-width: 100%; margin-top: 50px;}
    section.contact .right {width: 100%; max-width:89%;}
    section.contact .right .input-container {max-width: 332px;}
    section.packages .slider-wrapper1 .image-list span {width:47%; height:160px;}
    /* section.packages .slider-wrapper .image-list .image-item {width: 120px; height: 100px;} */
    .arrows {justify-content: center;}
    .arrows button#next {right: auto; bottom: 20%; margin-left: 70px;}
    .arrows button#prev {left: auto; bottom: 20%; margin-right: 70px;}
    section.contact .copyright {justify-content: start;}
    section.contact .copyright span.copyright-text .developer-text {display:block; padding-top: 8px;}
    section.clients .container {width: 100%; padding:0px 24px;}
    .whatsAppChat {right:8px;} #myBtn {right:10px;}
    section.testimonial .container .slider-wrapper .card-list .card-item {min-height: 360px;}
    section.contact {padding:24px 0px 24px 0px;}
    section.contact .left .icon-container {font-size: 14px;}
    section.contact .left h3 {font-size: 14px;}
    section.contact.h-100vh-150px {height: auto; padding-top: 100px;}
    section.banner-section .banner-text {width:80% !important; top:45% !important;}
    section.banner-section .banner-text h2 {white-space: normal !important; font-size:18px !important;}
    section.banner-section .banner-text p {font-size: 14px !important;}
    footer .copyright .copyright-text .developer-text {display: block !important; padding-top: 8px; width: 100% !important;}
}