/*  Sorrento Car Drivers CSS3 Ver. 1.0.0
    Copyright 1999 - 2023 JAM Studio
    Visit Us (https://www.jamstudio.it/)    */

/*  =====================================================
    =   PALETTE E TYPOGRAPHY                            =
    =   Font utilizzati                                 =
    =   font-family: 'Playfair Display', serif;         =
    =   font-family: 'Figtree', sans-serif;             =
    =====================================================   */
:root {
/*      --> Colors                                          */
    --blue          : #003C71;
    --blue-l        : #0076C0;
    --yellow        : #F3B927;
    --orange        : #FF5541;
    --green         : #2CB478;
    --red           : #F31040;
/*      --> Greyscale                                       */
    --black         : #2B2B2B;
    --grey-d        : #595959;
    --grey-m        : #808080;
    --grey          : #A4A4A4;
    --grey-c        : #D9D9D9;
    --grey-l        : #E5E5E5;
    --white-m       : #F5F5F5;
    --white         : #FFFFFF;
/*      --> Fonts sito                                      */
    --header-font   : 'Playfair Display', serif;
    --text-font     : 'Figtree', sans-serif;
}
/*  =====================================================
    =   SCROLL BAR                                      =
    =====================================================   */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { box-shadow: none; border-radius: 0; background: var(--white-m); }
::-webkit-scrollbar-thumb { background: var(--blue); border: 0; border-radius: 0; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-l); border: 0; background-clip: content-box; }
/*  =====================================================
    =   SETTING BASE PAGINA                             =
    =====================================================   */
html, body { height: 100vh; margin: 0; font-family: var(--text-font); color: var(--black); background-color: var(--white-m); }
html { scroll-padding-top: .5rem; }
img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
/*          --> Typography                      */
h1, h2, h3, h4, h5, h6 { font-family: var(--header-font); }
p, li, a, th, td { text-decoration: none; }
b, strong { font-weight: 700!important; }
a { color: var(--blue-l); text-decoration: none; }
a:hover { color: var(--blue); text-decoration: none; }
a:focus { outline: none; box-shadow: none; }
@media (max-width: 767.98px) {
    html { scroll-padding-top: .5rem; }
}
/*  =====================================================
    =   ICONS                                           =
    =====================================================   */
.icon { min-width: 1.25rem; height: 1.25rem; display: inline-block; }
.icon.white { background-color: var(--white); }
.icon.grey-d { background-color: var(--grey-d); }
.icon.grey { background-color: var(--grey); }
.icon.blue { background-color: var(--blue); }
.icon.blue-l { background-color: var(--blue-l); }
.icon.green { background-color: var(--green); }
.icon.yellow { background-color: var(--yellow); }
.icon.red { background-color: var(--red); }
.icon-sm { min-width: 1rem!important; height: 1rem!important; }
.icon-md { min-width: 1.5rem!important; height: 1.5rem!important; }
.icon-lg { min-width: 2rem!important; height: 2rem!important; }
.icon-xl { min-width: 2.5rem!important; height: 2.5rem!important; }
.icon-xxl { min-width: 3rem!important; height: 3rem!important; }
.icon-big { min-width: 4rem!important; height: 4rem!important; }
/*      --> Icone Navigazione                               */
.ico-chevron-x {
    -webkit-mask: url("../images/icons/nav-chevron-x.svg") no-repeat center;
    mask: url("../images/icons/nav-chevron-x.svg") no-repeat center;
}
.ico-chevron-y {
    -webkit-mask: url("../images/icons/nav-chevron-y.svg") no-repeat center;
    mask: url("../images/icons/nav-chevron-y.svg") no-repeat center;
}
/*      --> Icone Contatti                                  */
.ico-indirizzo {
    -webkit-mask: url("../images/icons/contatti-indirizzo.svg") no-repeat center;
    mask: url("../images/icons/contatti-indirizzo.svg") no-repeat center;
}
.ico-email {
    -webkit-mask: url("../images/icons/contatti-email.svg") no-repeat center;
    mask: url("../images/icons/contatti-email.svg") no-repeat center;
}
.ico-telefono {
    -webkit-mask: url("../images/icons/contatti-telefono.svg") no-repeat center;
    mask: url("../images/icons/contatti-telefono.svg") no-repeat center;
}
.ico-whatsapp {
    -webkit-mask: url("../images/icons/contatti-whatsapp.svg") no-repeat center;
    mask: url("../images/icons/contatti-whatsapp.svg") no-repeat center;
}
/*      --> Icone Social                                    */
.ico-facebook {
    -webkit-mask: url("../images/icons/social-facebook.svg") no-repeat center;
    mask: url("../images/icons/social-facebook.svg") no-repeat center;
}
.ico-instagram {
    -webkit-mask: url("../images/icons/social-instagram.svg") no-repeat center;
    mask: url("../images/icons/social-instagram.svg") no-repeat center;
}
.ico-tripadvisor {
    -webkit-mask: url("../images/icons/social-tripadvisor.svg") no-repeat center;
    mask: url("../images/icons/social-tripadvisor.svg") no-repeat center;
}
/*  =====================================================
    =   BUTTONS                                         =
    =====================================================   */
.btn { --bs-btn-font-family: var(--text-font); --bs-btn-focus-shadow-rgb: none; --bs-btn-active-shadow: none; --bs-btn-border-radius: .5rem; }
.btn-icon { min-width: 3rem; min-height: 3rem; --bs-btn-padding-x: 0.5rem; --bs-btn-padding-y: 0.5rem; display: flex; align-items: center; justify-content: center; border:0!important;}
.btn-icon.small { min-width: 2rem; min-height: 2rem; --bs-btn-padding-x: 0.25rem; --bs-btn-padding-y: 0.25rem; }
.btn-submit {
    --bs-btn-color: var(--white);
    --bs-btn-bg: var(--blue-l);
    --bs-btn-border-color: var(--blue-l);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--blue);
    --bs-btn-hover-border-color: var(--blue);
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--blue);
    --bs-btn-active-border-color: var(--blue);
    --bs-btn-disabled-color: var(--white);
    --bs-btn-disabled-bg: var(--blue-l);
    --bs-btn-disabled-border-color: var(--blue-l);
    --bs-btn-font-weight: 400;
}
/*      --> Dropdown Cambio Lingua                          */
.btn-lang, .btn-lang:hover {
    min-width: 4.25rem;
    height: 2rem;
    color: var(--blue);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-lang-flag {
    width: 2rem;
    height: auto;
}
.btn-lang-icon {
    width: 1rem;
    height: 1rem;
    background-color: var(--blue);
    -webkit-mask: url("../images/icons/nav-chevron-y.svg") no-repeat center;
    mask: url("../images/icons/nav-chevron-y.svg") no-repeat center;
    display: inline-block;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}
.btn-lang.show .btn-lang-icon {
    background-color: var(--blue);
}
.btn-lang:not(.show) .btn-lang-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.lang-dropdown-menu {
    margin-top: 0!important;
    width: 100%;
    min-width: 8rem;
    background-color: var(--white);
    left: auto;
    right: 0;
    border: 0;
    border-radius: .25rem;
}
.lang-dropdown-item {
    padding: .25rem;
    font-size: 1rem;
    font-weight: 300;
    color: var(--blue);
    text-align: center;
    display: flex;
    align-items: center;
}
.lang-dropdown-flag {
    margin-left: .25rem;
    width: auto;
    height: 1rem;
}
.lang-dropdown-item:hover {
    color: var(--blue);
    background-color: var(--grey-l);
}
.lang-dropdown-item.active, .lang-dropdown-item:active {
    color: var(--white);
    text-decoration: none;
    background-color: var(--blue-l);
}
/*      --> Partners Button                                 */
.btn-partner {
    --bs-btn-color: var(--grey-m);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--grey-d);
    --bs-btn-hover-bg: var(--grey-c);
    --bs-btn-active-color: var(--grey-d);
    --bs-btn-active-bg: var(--grey-c);
    --bs-btn-disabled-color: var(--grey-m);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-radius: .5rem;
    border:0!important;
}
.partner-logo {
    width: 10rem;
    height: auto;
}

/*  =====================================================
    =   ELEMENTI COMUNI                                 =
    =====================================================   */
.mw-1920 { max-width: 1920px; }
.mw-1600 { max-width: 1600px; }
.mw-1400 { max-width: 1400px; }
.mw-1200 { max-width: 1200px; }
.mw-992 { max-width: 992px; }
.mw-960 { max-width: 960px; }
.mw-800 { max-width: 800px; }
.mw-768 { max-width: 768px; }
.mw-576 { max-width: 576px; }
.mw-480 { max-width: 480px; }
.mw-360 { max-width: 360px; }
.mw-320 { max-width: 320px; }
.logo-container {
    position: absolute;
    top: 2.5rem;
    background-color: var(--white-m);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}
.logo-header {
    width: 20rem;
}
.logo-small {
    width: 15rem;
    height: auto;
}
.logo-large {
    width: 100%;
    max-width: 20rem;
    min-width: 15rem;
    height: auto;
}
.lang-box {
    min-width: 5rem;
}
.fullheight-header {
    height: 100%;
    max-height: 960px;
    position: relative;
    overflow: hidden;
}
.header-top {
    padding-left: 5rem;
    padding-right: 0;
}
.header-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1rem;
}
.header-img.homepage {
    background-image: url("../images/header/homepage1920.webp");
}
.section-title {
    font-weight: 900;
    color: var(--blue-l);
    line-height: 1;
}
.section-subtitle {
    font-weight: 500;
    color: var(--orange);
}
.card-info {
    color: var(--black);
    background-color: var(--white);
    border-radius: 1rem;
}
.card-info.presentation {
    margin-top: -15%;
    z-index: +1;
    position: relative;
}
.card-title {
    font-weight: 800;
    color: var(--blue);
}
.card-subtitle {
    font-family: var(--text-font);
    font-weight: 500;
    color: var(--orange);
}
.card-text {
    font-size: .875rem;
}
.dest-img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
}
.dest-card {
    color: var(--black);
    background: rgba(255, 255, 255, 0.7);
    border-radius: 1rem;
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(.25rem);
    -webkit-backdrop-filter: blur(.25rem);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.dest-card.rightside {
    margin-left: -40%;
}
.dest-card.leftside {
    margin-right: -40%;
}
@media (max-width: 1199.98px) {
    .header-img.homepage {
        background-image: url("../images/header/homepage1200.webp");
    }
}
@media (max-width: 991.98px) {
    .dest-card.rightside, .dest-card.leftside {
        margin-top: -25%;
        margin-left: 0;
        margin-right: 0
    }
}
@media (max-width: 767.98px) {
    .section-text {
        font-size: .875rem;
    }
}
@media (max-width: 575.98px) {
    .lang-box {
        min-width: 0;
    }
    .header-top {
        padding-left: .5rem;
    }
    .logo-container {
        width: 100%;
    }
    .logo-header {
        width: 17rem;
    }
    .fullheight-header {
        height: 75%;
    }
    .header-img {
        background-position: center top;
        border-radius: .75rem;
    }
    .card-text {
        font-size: .75rem;
    }
}
/*  =====================================================
    =   FOOTER                                          =
    =====================================================   */
.footer-container {
    color: var(--blue);
    background: rgb(229,229,229);
    background: -moz-linear-gradient(135deg, rgba(229,229,229,1) 0%, rgba(217,217,217,1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(229,229,229,1) 0%, rgba(217,217,217,1) 100%);
    background: linear-gradient(135deg, rgba(229,229,229,1) 0%, rgba(217,217,217,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5e5e5",endColorstr="#d9d9d9",GradientType=1);    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1a517b",endColorstr="#083045",GradientType=1);
    border-radius: 1rem;
}
.footer-info {
    color: var(--white);
}
.footer-info a {
    margin-bottom: 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--blue);
}
.footer-info a:hover {
    color: var(--blue-l);
}
.footer-link {
    font-size: .875rem;
    font-weight: 500;
    color: var(--blue);
    text-decoration: none;
    white-space: nowrap;
}
.footer-link:hover {
    color: var(--blue-l);
    text-decoration: none;
}
.footer-category {
    font-weight: 800;
    line-height: 1;
}
.footer-bottom {
    background-color: rgba(164,164,164,.25);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
.footer-bottom p {
    font-size: .875rem;
    color: var(--grey-d);
}
@media (max-width: 767.98px) {
    .footer-bottom {
        padding-right: 0;
    }
}
@media (max-width: 575.98px) {
    .footer-container {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .footer-bottom {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}
/*      --> Firma                                           */
#jamstudio {
    width: auto;
    height: 1.625rem;
}
.logo-signature {
    fill: var(--grey-d);
}
