/* RESET STYLING */
*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {font-family: var(--ff-primary); line-height: 1.5; -webkit-font-smoothing: antialiased;overflow-x: hidden;color: #212529;background-color: #fff;scrollbar-width: thin;}
h1,h2,h3,h4,h5,h6 {margin: 0;padding: 0; text-decoration: none; list-style: none; font-weight: 500; line-height: 1.2;}
ul, ol {margin: 0; padding: 0;}
li {font-size: 16px;}
p {margin: 0; color: var(--c-phara); margin-bottom: 1rem;}
a {color: var(--c-anchor); }
a {font-family: var(--ff-primary); color: var(--c-anchor); text-decoration: none; font-size: 16px; -webkit-tap-highlight-color: transparent;}
button {font-family: var(--ff-primary); font-size: 16px; background-color: transparent; color: #000; border: none; cursor: pointer;}
img, picture {max-width: 100%; height: auto; vertical-align: middle; font-style: italic;}
picture {display: block;}
svg {vertical-align: middle;}
input, textarea, select {width: 100%; font-family: var(--ff-primary);outline: none;border: none;}
input[type="number"]::-webkit-inner-spin-button,
input[type="search"]::-webkit-search-cancel-button {appearance: none;}
textarea {resize: none;font-family: var(--ff-primary);}
section {overflow-x: hidden;overflow-y: hidden;}
sup, sub {position: relative;line-height: 0;vertical-align: baseline;}
sup {top: -.5em;}
sub {bottom: -.25em;}

:root {
    /* CONTAINER SIZE */
    --container-size : 1200px;
    --container-px : 12px;
    /* FONT-FAMILY */
    --ff-primary : "NunitoSans", system-ui, sans-serif;
    /* COLORS */
    --c-primary : #ec8713;
    --c-secondary : #005b7f;
    --c-heading : #2e2e2e;
    --c-phara : #6f6f6f;
    --c-anchor : #0d6efd;
    /* BORDER RADIUS */
    --br-base : 10px;
    /* TRANSITION */
    --trans-3 : 0.3s ease;
    --trans-5 : 0.5s ease;
}

.container {
    width: 100%;
    max-width: var(--container-size);
    padding-inline: var(--container-px);
    margin-inline: auto;
}
.slider-box {gap: 20px;display: flex;overflow: hidden;}
.slider-arrow {padding: 0;}
.double-slider-wrapper {position: relative;width: 100%;overflow: hidden;}
.slider-content {position: relative;overflow: hidden;width: 100%;}
.slider-arrow {position: absolute;top: 50%;transform: translateY(-50%);z-index: 20;color: white;border: none;padding: 10px;font-size: 20px;border-radius: 50%;cursor: pointer;height: 56px;width: 56px;}
.slider-arrow img {width: 13px;height: 25px;}
.slider-arrow.prev {left: 10px;}
.slider-arrow.next {right: 10px;}
.slider-arrow.next img {transform: rotate(180deg);}
.slider-dots{display: flex !important;justify-content: center; gap: 10px; flex-wrap: wrap; position: relative;z-index: 5;}
.slider-dot {width: 10px;height: 10px;border-radius: 29px;background: #C7CBD3;border: none;cursor: pointer;opacity: 1;}


/* HEADER CSS */
.header-topbar {background-color: #2F6D86; padding-block: 10px;}
.header-topbar .container {max-width: 1250px; display: flex; justify-content: space-between; align-items: center;}
.header-topbar ul {display: flex; align-items: center; justify-content: center; gap: 6px;}
.header-topbar ul li {list-style: none;}
.header-topbar ul a {width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: 4px; cursor: pointer;}
.header-topbar .container > a {font-size: 16px; text-transform: capitalize; font-weight: 600; color: #fff;}

header {background-color: #F3FBFF; position: sticky; top: 0; z-index: 7;}
header .container {max-width: 1250px; display: flex; align-items: center; justify-content: center;}
header .logo {margin-right: auto;}
header .menu-btn {display: none; background-color: transparent; align-items: center; justify-content: center; border: 0; border-radius: 0;}
header li {list-style: none;}
header .container > ul {display: flex; align-items: center; justify-content: center; gap: 18px;}
header .close-menu {display: none;}
header li:has(ul) {padding-block: 38px; cursor: pointer; position: relative;}
header .container > ul a {font-size: 16px; font-weight: 700; color: #555555;}
header li:has(ul) > a {display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; padding-right: 16px;}
header li:has(ul) > a::after {width: 12px; height: 8px; background: no-repeat center / contain url("../images/icons/chevron-down.svg"); position: absolute; inset: 0; margin-block: auto; margin-left: auto; content: "";}
header ul ul {background-color: #fff; padding-block: 5px; position: absolute; top: 100%; visibility: hidden; opacity: 0; transform: translateY(10px); transition: transform var(--trans-5), visibility var(--trans-5), opacity var(--trans-5); box-shadow: 0 3px 5px #00000033; z-index: 4;}
header li:has(ul):hover ul {visibility: visible; opacity: 1; transform: translateY(0);}
header ul .submenu-toggle-btn {display: none;}
header .container ul ul li > a {display: block; font-size: 14px; text-wrap: nowrap; padding: 8px 20px; padding-right: 25px;}
header .more-links {margin-left: auto;}
header .more-links ul {display: flex; align-items: center; justify-content: center; gap: 12px;}
header .more-links a {height: 42px; display: flex; align-items: center; gap: 8px; background-color: #2F6D86; border-radius: 4px; padding-right: 11px; overflow: hidden;}
header .more-links a > :first-child {width: 40px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 4px;}
header .more-links ul > :first-child a > :first-child {background-color: #4BB04F;}
header .more-links a small {font-size: 16px; font-weight: 700; color: #fff;}
header .more-links ul > :nth-child(2) a > :first-child {background-color: #EC8713;}

/* NEWS LETTER */
.news-letter {background: no-repeat center / cover url("../images/banners/newsletter-bg.webp");  padding: 160px 0 160px;}
.news-letter .container {text-align: center;}
.news-letter .container > :first-child {font-size: 40px; font-weight: 700; line-height: 45px; color: #fff; margin-bottom: 10px;}
.news-letter .container > :first-child span {font-size: 40px;  line-height: 45px; font-weight: 700; color: #EC8713;}
.news-letter .container > p {width: 100%; max-width: 880px; font-size: 18px; font-weight: 500; line-height: 22px; color: #fff; margin-bottom: 20px; margin-inline: auto;}
.news-letter form {width: 100%; max-width: 600px; display: flex; justify-content: center; border-radius: 3px; overflow: hidden; margin: auto;}
.news-letter input {width: 70%; height: 49px; font-size: 16px; line-height: 48px; padding-inline: 14px;}
.news-letter button {width: 30%; height: 49px; font-size: 16px; font-weight: 700; line-height: 18px; text-align: center; background-color: var(--c-secondary); color: #fff; transition: background-color var(--trans-3);}
.news-letter button:hover {background-color: #023e56;}

/* FOOTER */
footer {padding-block: 30px; background-color: #125975;}
footer .container {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
footer .footer-logo {display: block; margin-bottom: 10px;} 
footer .first-box > :nth-child(2) { width: 100%; display: block; font-size: 18px; font-weight: 500; line-height: 20px; color: #fff; margin-bottom: 10px;}
footer .first-box p {font-size: 14px; line-height: 18px; color: #fff; margin-bottom: 10px;}
footer .payment-img {width: 278px; height: 96px; object-fit: contain;}
footer .iata-logo {width: 278px; height: 60px; object-fit: contain; margin-top: 10px;}
footer .center-box {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px;}
footer .link-box > :first-child {width: 100%; display: block; font-size: 18px; line-height: 20px; font-weight: 500; color: #fff; margin-bottom: 10px;}
footer .link-box li {width: 100%; list-style: none; padding-left: 15px; margin-bottom: 10px; position: relative;}
footer .link-box li::after {width: 10px; height: 10px;  background: no-repeat center / contain url("../images/icons/double-chevron.svg"); position: absolute; inset: 0; margin-block: auto; margin-right: auto; content: "";}
footer .link-box li a {display: block; font-size: 14px; width: 100%; color: #fff; text-align: start; transition: color var(--trans-3);}
footer .link-box li a:hover {color: var(--c-primary);}
footer .footer-description {grid-area: 2 / 1 / 3 / 3;}
footer .footer-description p {font-size: 14px; line-height: 18px; color: #fff;}
footer .last-box > :first-child {width: 100%; display: block; font-size: 18px; line-height: 20px; font-weight: 500; color: #fff; margin-bottom: 10px;}
footer .last-box li {list-style: none;}
footer .last-box li a {display: block; width: 100%; font-size: 14px; line-height: 18px; color: #fff; margin-bottom: 10px;}
footer .last-box li a img {display: inline-block; margin-right: 10px;}
footer .last-box address {width: 100%; max-width: 359px; font-size: 14px; font-style: normal; line-height: 18px; color: #fff; padding-left: 26px;}
footer .last-box address b {display: block; font-size: 16px; font-weight: 600; margin-block: 10px; margin-left: -26px;}
footer .last-box address b img {display: inline-block; margin-right: 10px;}

.copy-right-box {background-color: #fff; padding-block: 13px;}
.copy-right-box .container {display: flex; align-items: center; justify-content: space-between;}
.copy-right-box p {font-size: 14px; color: #125975; margin-bottom: 0;}
.copy-right-box ul {display: flex; align-items: center; justify-content: center; gap: 9px;}
.copy-right-box li {list-style: none;}
.copy-right-box li a {width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background-color: #e07800; border-radius: 3px;}
.copy-right-box li a img {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(246deg) brightness(106%) contrast(105%);}

.bottom-footer {background-color: #125975; padding-block: 10px;}
.bottom-footer p {font-size: 14px; line-height: 18px; color: #fff; margin: unset;}
.bottom-footer p a {font-size: 14px; font-weight: 400; color: #fff; text-decoration: underline;}

@media only screen and (max-width: 992px) {
    /* HEADER */
    header {padding-block: 10px;}
    header .container > ul {height: 100vh; width: 100%; max-width: 310px; flex-direction: column; align-items: start; justify-content: start; gap: 18px; position: fixed; left: -100%; top: 0; background-color: #fff; z-index: 4; overflow: hidden; overflow-y: auto; padding-inline: 15px; padding-bottom: 20px; transition: left var(--trans-3);}
    header .container > ul.menu-active {left: 0;}
    header .logo {margin-right: auto; order: 1;}
    header .more-links {order: 2; margin-left: auto;}
    header .more-links ul {gap: 20px;}
    header .menu-btn {display: flex; order: 3; padding: 1px 6px;}
    header li:has(.close-menu) {margin-left: auto;}
    header .close-menu {display: flex; align-items: center; justify-content: flex-end; font-size: 43px; padding-inline: 10px; cursor: pointer; background-color: transparent;      border: 0; border-radius: 0;}
    header li:has(ul) {width: 100%; display: flex; align-items: center; justify-content: start; flex-wrap: wrap; padding-block: 0;}
    header .container > ul > li > a {width: 80%; height: 35px; justify-content: start; padding-right: 0;}
    header ul .submenu-toggle-btn {width: 20%; display: flex; align-items: center; justify-content: end; font-size: 20px; font-weight: 700; color: #555555; text-align: end;}
    header li:has(ul) > a::after {content: unset;}
    header ul ul {display: none; position: static; visibility: visible; opacity: 1; transform: translateY(0); margin-top: 10px;}
    header ul ul.ul-active {width: 100%; display: block !important;}
    header li:has(ul):hover ul {display: none; visibility: visible; opacity: 1; transform: translateY(0);}
    /* NEWS LETTER */
    .news-letter .container > p {padding-inline: 15%;}
    /* FOOTER */
    footer {padding: 20px 0 0;}
    footer .container {grid-template-columns: repeat(2, 1fr); gap: 0 24px;}
    footer .first-box {margin-bottom: 20px;}
    footer .first-box > :nth-child(2) {margin-bottom: 15px;}
    footer .link-box {margin-bottom: 20px;}
    footer .link-box > :first-child, footer .last-box > :first-child {margin-bottom: 15px;}
    footer .last-box {text-align: center;}
    .copy-right-box .container {flex-direction: column; justify-content: center;}
    .copy-right-box ul {margin-top: 10px;}
    .copy-right-box p {font-size: 12px;}
}

@media only screen and (max-width: 768px) {
    /* HEADER */
    header .container > ul {max-width: 100%;}
    /* NEWS LETTER */
    .news-letter .container > :first-child, .news-letter .container > :first-child span {font-size: 35px;}
    .news-letter form {max-width: 500px;}
    .news-letter button {width: unset; font-size: 18px; text-wrap: nowrap; line-height: 1;}
    /* FOOTER */
    footer .container {grid-template-columns: 1fr;}
    footer .last-box {text-align: start;}
}

@media only screen and (max-width: 576px) {
    /* HEADER */
    .header-topbar ul a {width: 22px; height: 22px;}
    .header-topbar ul a > img {width: 14px; height: 14px; object-fit: contain;}
    header .more-links ul {gap: 10px; margin-right: 11px;}
    header .more-links a {width: 35px; height: 35px; padding-right: 0;}
    header .more-links a small {display: none;}
    /* NEWS LETTER */
    .news-letter .container > :first-child, .news-letter .container > :first-child span {font-size: 20px; margin-bottom: 15px;}
    .news-letter .container > p {font-size: 14px; margin-bottom: 20px;}
    .news-letter form {flex-direction: column;}
    .news-letter input {width: 100%; margin-bottom: 10px;}
    /* FOOTER */
    footer .first-box > :nth-child(2), footer .link-box > :first-child, footer .last-box > :first-child {font-size: 18px;}
}