/* RESET STYLING */
*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {font-family: var(--ff-primary); font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased;}
h1,h2,h3,h4,h5,h6 {margin: 0; font-weight: 700; line-height: 100%; margin-bottom: 0.5rem;}
ul, ol {margin: 0; padding: 0;}
li {font-size: var(--fs-base, 16px);}
p {margin: 0; font-size: var(--fs-base, 16px); color: var(--c-phara); transition: var(--trans-4);}
a {width: fit-content; display: block; color: #000; font-size: var(--fs-base, 16px); text-decoration: none;}
p a {display: inline; font-weight: 500;}
button {font-family: var(--ff-primary); font-size: var(--fs-base, 16px); font-weight: 600; background-color: transparent; color: #fff; border: none; cursor: pointer;}
img, picture {max-width: 100%; height: auto; vertical-align: middle; font-style: italic; font-size: var(--fs-3xs, 14px);}
picture {display: block;}
svg {vertical-align: middle;}
input, textarea, select {width: 100%; font-family: var(--ff-primary); font-size: var(--fs-3xs, 14px); color: var(--c-bg); line-height: 25px; padding: 10px 15px; border: 1px solid transparent; border-radius: 7px;}
select {color: #000; }
input::placeholder, textarea::placeholder {color: #000;} 
input:focus, textarea:focus, select:focus {outline: none;}
input[type="number"]::-webkit-inner-spin-button, 
input[type="search"]::-webkit-search-cancel-button {appearance: none;}
textarea {resize: none;}

/* MODIFIER CLASES */
.container {max-width: var(--container-size); margin-inline: auto; padding-inline: var(--container-padding);}
.btn__primary {display: flex; align-items: center; justify-content: center; gap: 5px; font-size: var(--fs-base, 16px); font-weight: 600; line-height: 100%; background-color: var(--c-secondary); color: #fff; padding: 18px 38px 19px; border-radius: var(--br-base); position: relative; z-index: 1; overflow: hidden; transition: var(--trans-4);}
.btn__primary::after {width: 0; height: 100%; background-color: var(--c-bg); position: absolute; left: 0; top: 0; content: ""; transition: var(--trans-4); z-index: -1;}
.btn__primary:hover::after {width: 100%;}
.btn__secondary {display: flex; align-items: center; justify-content: center; gap: 5px; font-size: var(--fs-base, 16px); font-weight: 600; line-height: 100%; background-color: #fff; color: var(--c-secondary); padding: 18px 38px 19px; border-radius: var(--br-base); position: relative; z-index: 1; overflow: hidden; transition: var(--trans-4);}
.btn__secondary::after {width: 0; height: 100%; background-color: var(--c-bg); position: absolute; left: 0; top: 0; content: ""; transition: var(--trans-4); z-index: -1;}
.btn__secondary:hover {color: #fff;}
.btn__secondary:hover::after {width: 100%;}



/* Scrollbar */

 
/* FONT FAMILIES */
@font-face {
    font-family: 'proxima-nova-regular';
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/proxima-nova-regular.woff2'); 
}
@font-face {
    font-family: 'proxima-nova-semibold';
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/proxima-nova-semibold.woff2'); 
}
 
/* VARIABLES */
:root {
    /* Container Max-Width */
    --container-size: 1375px;
    --container-padding: 15px;
    /* Font Families */
    --ff-primary : Arial, Helvetica, sans-serif;
    --ff-secondary-regular : "proxima-nova-regular";
    --ff-secondary-semibold : "proxima-nova-semibold";
    /* Font-Sizes */
    --fs-base: 16px;
    /* Colors */
    --c-primary : #0a3b97;
    --c-secondary : #14224F;
    --c-text : #0e63b4;
    /* Transitions */
    --trans-4 : 0.4s;
    /* Border */
    --c-br : 10px;
    /* FILTER */
    --c-cart-filter : brightness(0) saturate(100%) invert(19%) sepia(29%) saturate(1383%) hue-rotate(120deg) brightness(96%) contrast(99%);
}

/* RESPONSIVE */
@media only screen and (max-width: 768px) {
    .container {padding-inline: 12px;}
}

/* PRIVATE VARIABLES */
header {
    --_c-ul-bg : #2f4a695e;
}
footer, .process, .service-brand, .submit-home {
    --c-footer-bg : #01423580;
    --c-footer-text : #AFE4F4;
}
.management, .success, .service-brand, .submit-home, .testimonial, .plan-banner {
    --_c-text : #28B08B;
    --_c-dots : #aabdf6;
    --_c-management-txt : #4e2a1e;
    --_c-management-bg : #f4eab1;
    --_c-arrows-filter : brightness(0) saturate(100%) invert(70%) sepia(27%) saturate(470%) hue-rotate(189deg) brightness(103%) contrast(93%);
}
.submit, .service-banner, .submit-home, .plan-banner {
    --_c-submit-anchor : #0b9965;
    --_c-submit-bg : #0b996587;
    --_c-submit-a-hover : #5bc9de;
}
.process, .service-brand, .submit-home, .about-banner, .process, .contact-form, .blog-banner {
    --_c-process-bg : #d5f2ef75;
    --_c-process-heading : #014235;
    --_c-process-br : #167794;
    --_c-process-about : #ffffff94;
}
.home-about, .plan-banner, .partnership-hero {
    --_c-home-about : #10A0CC;
}
.service-brand, .submit-home, .testimonial, .contact-form {
    --_c-service-bg : #014235c4;
    --_c-service-after : #a45f53;
    --_c-service-bg-lg : #1f26631a;
}
.service-hero {
    --_c-service-text-bg : #28b08bc4;
    --_c-service-heading : #1e1e1e;
}
.submit-home, .airbnb, .getway-text, .process, .contact-form {
    --_c-submit-bg : #01423563;
    --_c-label : #2f4a69;
    --_c-focus : #41baae;
    --_c-btn-hover : #0d1926;
    --_c-covid-box : #111c42f0;
}
.testimonial {
    --_c-img-filter : brightness(0) saturate(100%) invert(82%) sepia(46%) saturate(270%) hue-rotate(161deg) brightness(101%) contrast(91%);
    --_c-name : #ABDFF5;
}
.airbnb {
    --_c-airbnb-bg : #014235bf;
    --_c-airbnb-contact : #f7c77e;
}
.getway-text {
    --_c-primary-bg : #0b6e8c7d;
}
.privacy-policy {
    --_c-phara : #404040;
}
.about-banner {
    --_c-about-bg : #e6deca96;
    --_c-about-para : #163e3a;
}
.about-map {
    --_c-heading-bg : #014235cc;
}
.contact-form, .partnership-banner {
    --_c-contact-bg : #fbf3f3d9;
    --_c-contact-heading : #0C7A9C;
    --_c-contact-input : #0e86ab66;
}
.blog-banner {
    --_c-blog-heading : #0E86AB;
}
.blog-cards, .blog-detail {
    --_c-blog-bg : #0b6e8c70;
    --_c-blog-form : #0b6e8c8f;
    --_c-heart-filter : brightness(0) saturate(100%) invert(44%) sepia(10%) saturate(3373%) hue-rotate(314deg) brightness(97%) contrast(121%);
}
.blog-detail {
    --_c-detail-hover : #004033;
    --_c-detail-br : #aabdf6bf;
}
.partner-slider {
    --_c-slider-bg : #baceec70;
    --_c-slider-text : #1F2663;
}


/* =================================== */
/* HEADER AND FOOTER */
/* =================================== */

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    position: fixed;
    z-index: 4;
    right: 0;
    left: 0;
    background-color: aliceblue;
}
header .listed{background-color: #0d4fa6;border-radius: 5px;}
header li {list-style: none;}
header .listed > ul {display: flex; align-items: center; justify-content: center; gap: 30px;padding: 15px 15px 5px 15px;}
header .listed > ul > li {position: relative;}
header .listed > ul > li > a {padding-bottom: 10px;}
header .listed > ul a {font-family: var(--ff-secondary-semibold); line-height: 24px; color: #fff; transition: color 0.4s ease;}
/*header .listed > ul >li:hover > a {color: var(--c-primary);}*/
header ul ul {display: none; width: 186px; background-color: var(--_c-ul-bg); position: absolute; right: 50%; transform: translateX(50%); z-index: 2;}
header .listed > ul > li:hover ul {display: block;} 
header ul ul li {height: 31px; display: flex; align-items: center; justify-content: center;}
header ul ul a {width: 100%; display: block; text-align: center; transition: color 0.4s ease;}
header ul ul a:hover {color: var(--c-primary);}
header .cart-box {background-color: #0d4fa6; border-radius: 20px 0 20px 0; position: relative; padding: 11px; padding-left: 20px;}
header .cart-img {display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: -25px; transform: translateY(-50%);}
header .cart-img img {filter: var(--c-cart-filter);}
header .cart-img span { color: #fff; position: absolute; top: 63%; left: 50%; transform: translate(-50%, -50%);}

header .call {display: block; text-align: center; font-weight: 600; color:#fff;}
header .number {display: block; font-size: 22px; font-weight: 700; text-align: center; color: #fff;}
header .cart-box a {font-size: 14px; font-weight: 700; color: var(--c-primary); letter-spacing: 0.7px;}
header .listed .cart-box {display: none;}
header .menu-btn {display: none !important; width: 40px; height: 40px; background-color: #ffffffcf; border-radius: 5px;}
header .close-btn {width: 35px; height: 35px; display: none; align-content: center; justify-content: center; margin-left: auto; background-color: red; border-radius: 5px;}
header .close-btn img {filter: invert(1);}


/* FOOTER */
footer {background-color: darkslategrey; padding-block: 26px 21px;}
footer .container {display: flex; align-items: start; justify-content: start;}
footer .footer-social {gap: 4px; margin-left: auto; align-self: end;}
footer .footer-content {margin-left: 30px;}
footer .footer-text {color: var(--c-footer-text); margin-bottom: 29px;}
footer .footer-text p {font-size: 13px; font-style: italic;}
footer .footer-text span {font-size: 15px; font-style: italic;}
footer .footer-content ul li {font-size: 15px; color: #fff;}
footer li {list-style: none;}

.header-bg {display: none; width: 100%; height: 100%; background-color: #00000080; position: fixed; top: 0; left: 0; z-index: 3;}


@media only screen and (max-width: 1400px) {
    header .listed > ul {gap: 15px;}
}
@media only screen and (max-width: 1200px) {
    header {align-items: center; margin-top: 12px;}
    header .cart-box {display: none;}
    header ul ul {right: 0; transform: unset;}
}
@media only screen and (max-width: 991px) {
    header .listed {width: 100%; max-width: 350px; height: 100%; display: flex; flex-direction: column; background-color: #fff; padding: 17px; position: fixed; left: -100%; top: 0; z-index: 4; transition: var(--trans-4); overflow-y: auto;}
    header .listed.bar-active {left: 0;}
    header .listed > ul {flex-direction: column; margin-top: 5px;}
    header .listed .cart-box {width: 100%; max-width: 245px; display: block; margin-inline: auto; margin-top: auto;}
    header .menu-btn {display: flex !important;}
    header .listed li {width: 100%; }
    header .listed > ul a {width: 100%; text-align: start; color: #000; padding-bottom: 0 !important;}
    header .close-btn {display: flex; flex: none;}
    header ul ul {width: 100%; display: none; position: static; transform: unset; margin-top: 5px; border-radius: 5px; background-color: #2f4a690f;}
    header ul ul li {justify-content: start; padding-inline: 10px;}
    header .listed > ul > li:hover ul {display: none;}
    header ul ul.submenu-open {display: block !important;}
    header .listed > ul > li:has(ul) {display: flex; align-items: center; justify-content: start; flex-wrap: wrap;}
    header .listed > ul > li > a {order: 1; width: 70%;}
    header .listed > ul > li > button {order: 2; width: 30%; display: flex; align-items: center; justify-content: end;}
    header .listed > ul > li > button svg {transform: rotate(-90deg); transition: var(--trans-4);}
    header .listed > ul > li > button.active svg {transform: unset;}
    header ul ul {width: 100%; order: 3;}
    .header-bg.bg-active {display: block;}
}
@media only screen and (max-width: 768px) {
    footer .container {flex-wrap: wrap;}
}