.semi-bold {
    font-weight: 600 !important;
}

.medium {
    font-weight: 500 !important;
}

.f-s-10 {
    font-size: 10px !important;
}

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

.f-s-15 {
    font-size: 15px !important;
}

.f-s-17 {
    font-size: 17px !important;
}

.f-s-20 {
    font-size: 20px !important;
}

.f-s-30 {
    font-size: 30px !important;
}

.f-s-40 {
    font-size: 40px !important;
}

/* --- COLORS ---*/

.text-black {
    color: #000000 !important;
}

/* --- FONTS ---*/
.yellow-1 {
    color: #FFC980 !important;
}

.yellow-2 {
    color: #F2F1A1 !important;
}

.pink-1 {
    color: #FFDAC7 !important;
}

.pink-2 {
    color: #FFCBB8 !important;
}

.pink-3 {
    color: #EFA697 !important;
}

.green-1 {
    color: #80804C !important;
}

.green-2 {
    color: #A9DA81 !important;
}

.green-3 {
    color: #D0D59E !important;
}

.green-4 {
    color: #E3E292 !important;
}

.green-5 {
    color: #A4AB6B !important;
}

.green-6 {
    color: #BFC37C !important;
}

.brown-1 {
    color: #AB8A6C !important;
}

.brown-3 {
    color: #C69B6F !important;
}

.blue-1 {
    color: #7E9CC8 !important;
}


/* --- BACKGROUNDS ---*/

.brown-2-bg{
    background-color: #DBC798 !important;
}

.yellow-1-bg {
    background-color: #FFC980 !important;
}

.green-2-bg {
    background-color: #CED27C !important;
}

.green-3-bg {
    background-color: #D0D59E !important;
}

.green-4-bg {
    background-color: #E3E292 !important;
}

.pink-2-bg {
    background-color: #FFCBB8 !important;
}

.blue-1-bg {
    background-color: #FAFCFC !important;
}

.white-bg {
    background-color: #FFFFFF !important;
}

.bg-gradient-green {
    background-image: linear-gradient(195deg, #A4AB6B 0%, #A4AB6B 100%);
}


/* --- CONTAINER ---*/

.image-container {
    position: relative;
    display: inline-block;
    text-align: center;
}

.center-title {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center-subtitle {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.team-card {

    padding-right: 0px !important;
    padding-left: 0px !important;

}

.center-div {
    max-width: 90%; 
    margin:0px auto;
}

/* --- ROTATE LINK ---*/

.link {
    width: 10rem;
    height: 10rem;
    display: inline-block;
    letter-spacing: 0.1175em;
    word-spacing: 0.3em;
}

.link__svg {
    width: 100%;
    height: auto;
    transform-box: fill-box;
    fill: #2B3338;
    stroke: #efa697;
    font-weight: 600 !important;
    font-size: 30px;
    stroke-width: 0.05em;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.link__cloud {
    transform-origin: 50% 50%;
    -webkit-animation: rotate normal infinite 60s linear;
    animation: rotate normal infinite 60s linear;
    fill: rgba(255, 255, 255, 0.15);
}

.link__face,
.link__arrow {
    transform-origin: 50% 50%;
    transition: transform 0.15s cubic-bezier(0.32, 0, 0.67, 0);
}

.link:hover .link__face,
.link:hover .link__arrow {
    transform: scale(1.1);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.link__arrow {
    stroke-width: 0.230em;
}

.link__text {
    -webkit-animation: rotateReverse normal infinite 20s linear;
    animation: rotateReverse normal infinite 20s linear;
    transform-origin: 50% 50%;
}

.link:hover .link__text {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.link--alt {
    font-size: 1.15rem;
    letter-spacing: 0;
    word-spacing: 0;
}

@-webkit-keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotateReverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes rotateReverse {
    to {
        transform: rotate(-360deg);
    }
}

/* --- btn-flotante ---*/

.btn-flotante {
    /* Color de fondo */
    background-color: #7E9CC8;
    padding: 10px 10px;
    /* Relleno del boton */
    position: fixed;
    bottom: 20px;
    right: 20px;
    transition: all 300ms ease 0ms;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    z-index: 99;
    border-radius: 30px;
}

.btn-flotante:hover {
    background-color: #7E9CC8;
    /* Color de fondo al pasar el cursor */
    box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-7px);
}

@media only screen and (max-width: 600px) {
    .btn-flotante {
        font-size: 14px;
        padding: 12px 20px;
        bottom: 10px;
        right: 10px;
    }
}