﻿/*Black: #121212
White: #f9f9f9
Red: #f74014
Purple: #753586 - > #5d2b7c - <font color="rgb(118, 54, 135)" > </font >
Azzurro (Light Blue): #28b6a8
Gradient (Red > Purple > Azzurro): #74014 > #753586 > #28b6a8*/

.text-Black {
    color: #121212 !important;
}

.text-White {
    color: #f9f9f9 !important;
    transition-delay: 0.1s;
    transition-duration: 0.3s;
    transition-property: color, background-color;
}

.text-Red {
    color: #f74014 !important;
}

.text-Purple {
    color: #5d2b7c !important;
}

.text-Azzurro {
    color: #28b6a8 !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-18 {
    font-size: 18px !important;
}

a:link {
    color: #753586;
}

/*a:link {
    color: #5d2b7c !important;
}
a:visited {
    color: #f9f9f9 !important;
}
a:hover {
    color: #5d2b7c !important;
}
a:active {
    color: red;
}*/

.btn gradient-color {
    background: linear-gradient(135deg, #6a2cff, #ff5c8d);
}

.gradient-bg {
    background: linear-gradient(to right, #ff0000, #ff0070, #00b3ff82, #00ffffdb);
}

.whitesmoke-bg {
    background-color: rgb(254 254 254); /*whitesmoke*/
}

.purple-bg {
    background-color: #5d2b7c !important;
}

.red-bg {
    background-color: #f74014 !important;
}
.text-White a,
.text-White a:link,
.text-White a:visited,
.text-White a:hover,
.text-White a:active,
.text-White a:focus {
    color: #f9f9f9 !important;
}
.route-2-details-btn,
.route-2-details-btn:link,
.route-2-details-btn:visited,
.route-2-details-btn:hover,
.route-2-details-btn:active,
.route-2-details-btn:focus {
    color: #fff !important;
    text-decoration: none;
}
.cta-button,
.cta-button:link,
.cta-button:visited,
.cta-button:hover,
.cta-button:active,
.cta-button:focus {
    display: inline-block;
    background-color: #121212;
    color: #ffffff !important;
    padding: 6px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none !important;
    transition: background-color 0.3s ease, transform 0.2s ease;
}


.flex-center
{
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center; /* vertical center */
}


.btn-gradient,
.btn-gradient:link,
.btn-gradient:visited,
.btn-gradient:hover,
.btn-gradient:active,
.btn-gradient:focus {
    position: absolute;
    /*right: 50%;*/
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 26px;
    min-height: 36px;
    background: linear-gradient(135deg, #6a2cff, #ff5c8d);
    color: #ffffff !important;
    border: none;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    z-index: 5;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}

.route-1-btn-experience,
.route-1-btn-experience:link,
.route-1-btn-experience:visited,
.route-1-btn-experience:hover,
.route-1-btn-experience:active,
.route-1-btn-experience:focus {
    position: absolute;
    right: 50%;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 26px;
    min-height: 36px;
    background: linear-gradient(135deg, #6a2cff, #ff5c8d);
    color: #ffffff !important;
    border: none;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    z-index: 5;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}
.nav-item .nav-link {
    color: #ffffff !important;
    transition-delay: 0.1s;
    transition-duration: 0.3s;
    transition-property: color, background-color;
}
.parent {
    position: relative; /* optional */
    display: flex;
    justify-content: center; /* horizontal */
    align-items: center; /* vertical */
}