:root {
    --darkBlue: #031F34;
    --blue: #0188B3;
    --blueHover: #0097c7;
    --lightBlue: #DEF7FF;
    --yellow: #FFDB01;
    --lightYellow: #FBF8D5;
    --yellowHover: #ffe026;
    --lightGreen: #DEF7EA;
    --red: #dc3545;
}

.bg-darkBlue {
    background-color: var(--darkBlue);
}

.bg-blue {
    background-color: var(--blue);
}

.bg-lightBlue {
    background-color: var(--lightBlue);
}

.bg-lightYellow {
    background-color: var(--lightYellow);
}

.bg-lightGreen {
    background-color: var(--lightGreen);
}

.bg-footer {
    background-color: #1A1A1A;
}

.text-blue {
    color: var(--blue);
}

.btn-blue {
    background-color: var(--blue) !important;
    color: white !important;
    transition: .2s;
}

.btn-blue:hover,
.btn-blue:active {
    background-color: var(--blueHover) !important;
    color: white !important;
}

.btn-yellow {
    background-color: var(--yellow) !important;
    color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity)) !important;
    border: 1px solid #c7ad00 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transition: .2s;
}

.btn-yellow:hover,
.btn-yellow:active {
    background-color: var(--yellowHover) !important;
    border: 1px solid #c7ad00 !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
    opacity: 1;
}

.btn-outline-blue {
    background-color: var(--bs-light-rgb) !important;
    border: 1px solid var(--blue) !important;
    color: var(--blue) !important;
    transition: .2s;
}

.btn-outline-blue:hover,
.btn-outline-blue:active {
    background-color: var(--blueHover) !important;
    color: white !important;
}

.border-blue {
    border-color: var(--blue) !important;
}

.navbar-text-white .nav-item > a,
.navbar-text-white .nav-link.active {
    color: white;
    transition: 0.2s;
}

.navbar-text-white .nav-link.show {
    color: white;
}

.navbar-text-white .nav-link.active {
    color: var(--blue);
}

.navbar-text-white .nav-item > a:hover {
    color: var(--blue);
}

.navbar-dropdown:hover {
    transition: 0.2s;
}

.navbar-dropdown:hover {
    background-color: var(--lightBlue);
}

.link {
    text-decoration: none;
    color: var(--blue);
    font-weight: 500;
}

.link:hover {
    text-decoration: underline;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-brand img {
    width: 200px;
}

@media (max-width: 768px) {
    .navbar-brand img {
        width: 150px;
    }

    .picServiziAltri {
        max-width: 280px;
    }
}

@media (max-width: 992px) {
    .picServiziSitiWeb,
    .picServiziGestione {
        max-height: 260px;
    }
}

@media (min-width: 768px) {
    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }
}

@media (min-width: 992px) {
    .picServiziSitiWeb,
    .picServiziGestione {
        margin-top: 110px;
        max-height: 350px;
    }

    .picServiziAltri {
        max-width: 260px;
    }
}

@media (min-width: 1200px) {
    .picServiziGestione {
        margin-top: 100px;
        max-height: 350px;
    }

    .picServiziSitiWeb {
        margin-top: 50px;
        max-height: 350px;
    }

    .picServiziAltri {
        max-width: 300px;
    }
}

@media (min-width: 1400px) {
    .bestHostingPlan {
        margin-top: -42px;
    }

    .picServiziSitiWeb {
        margin-top: 0px;
        max-height: 400px;
    }

    .picServiziGestione {
        margin-top: 30px;
        max-height: 400px;
    }
}

.pointer {
    cursor: pointer;
}

.cta-hero {
    transition: 0.2s;
}

.cta-hero:hover {
    transform: scale(1.03);
    transition: 0.2s;
}

.animated-section {
    overflow: hidden;
}

.scrolling-wrapper-left {
    animation: scroll-left 130s linear infinite;
}

.scrolling-wrapper-right {
    animation: scroll-right 130s linear infinite;
}

.scrolling-wrapper-left:hover,
.scrolling-wrapper-right:hover {
    animation-play-state: paused;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-6150px);
    }
}

@keyframes scroll-right {
    100% {
        transform: translateX(0);
    }
    0% {
        transform: translateX(-6150px);
    }
}

.nav-pills .nav-link.active {
    background-color: var(--lightBlue);
    color: var(--blue);
}

.nav-pills .nav-link {
    color: black;
    transition: .2s;
}

.nav-pills .nav-link:hover {
    background-color: var(--lightBlue);
    transition: .2s;
}

.accordion-button:not(.collapsed) {
    background-color: var(--lightBlue);
}

.accordion-button:hover {
    background-color: var(--lightBlue);
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-collapse {
    transition: .2s ease;
    opacity: 0.5;
}

.accordion-collapse.show {
    opacity: 1;
}

.bg-mesh {
    position: relative;
    overflow: hidden; /* keeps mesh inside */
}

/* Mesh overlay */
.bg-mesh::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/mash.svg') no-repeat center / cover;
    background-size: 70%;
    opacity: 0.05;
}

.bg-mesh > * {
    position: relative;
    z-index: 1; /* keeps content above mesh */
}

.pricingTableHosting .border-bottom-dashed {
    cursor: help;
    border-bottom: 2px dotted;
    border-radius: 0;
    border-color: #a0a0a0;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    line-height: 1.3;
}

.pricingTableHosting .border-dashed:active {
    border-color: transparent;
}

.tooltip-inner {
    text-align: left;
}

.custom-tooltip {
    --bs-tooltip-bg: var(--darkBlue);
    --bs-tooltip-max-width: 300px;
    --bs-tooltip-padding-x: 15px;
    --bs-tooltip-padding-y: 10px;
}

.checkServizi {
    color: green;
    font-size: 20px;
    margin-top: -3px;
}

label.required::after {
    content: " *";
    color: var(--red);
    margin-left: 0.15rem;
}

.form-check-input {
    margin-top: .12em;
    margin-right: .5em;
    cursor: pointer;
}

.plan-billing-selector .cycle {
    border: 0;
    background: transparent;
    z-index: 2;
    margin-left: -20px;
}

.plan-billing-selector .cycle.active {
    color: var(--blue);
    font-weight: bold;
}

.pricing-indicator {
    height: calc(100% - 8px);
    width: calc(50% - 4px);
    background: var(--lightBlue);
    border: #dee2e6 1px solid;
    border-radius: 50rem;
    transition: transform 0.25s ease;
    z-index: 1;
}