/* ========================================
   Maldini
======================================== */

:root {

    --ridley-blue: #2980B9;
    --ridley-yellow: #FFCC4A;
    --ridley-black: #000000;
    --ridley-bg: #F7FAFC;
    --ridley-text: #4B5563;

    --font-ridley: 'Shippori Antique', sans-serif;

}

/* ========================================
   Pirlo
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========================================
   Nesta
======================================== */

html {
    scroll-behavior: smooth;
}

/* ========================================
   Xavi
======================================== */

body {

    font-family: var(--font-ridley);
    background: #ffffff;
    color: var(--ridley-black);
    overflow-x: hidden;

}

/* ========================================
   Iniesta
======================================== */

img {
    max-width: 100%;
    display: block;
}

/* ========================================
   Beckham
======================================== */

a {
    text-decoration: none;
    color: inherit;
}

/* ========================================
   Kaká
======================================== */

.ridley-container {

    width: 100%;
    max-width: 1280px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 24px;
    padding-right: 24px;

}

/* ========================================
   Lampard
======================================== */

.ridley-section {

    padding-top: 100px;
    padding-bottom: 100px;

}

/* ========================================
   Gerrard
======================================== */

.ridley-title {

    font-size: clamp(2.2rem, 5vw, 4.5rem);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.03em;

}

/* ========================================
   Kroos
======================================== */

.ridley-text {

    color: var(--ridley-text);
    line-height: 1.8;

}

/* ========================================
   Zidane
======================================== */

.ridley-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 16px 28px;

    border-radius: 18px;

    background: var(--ridley-blue);
    color: white;

    font-weight: 800;
    font-size: 0.95rem;

    transition: all 0.35s ease;

    box-shadow:
        0 10px 25px rgba(41, 128, 185, 0.18);

}

/* ========================================
   Ronaldinho
======================================== */

.ridley-btn:hover {

    transform: translateY(-4px);

    background: #216694;

    box-shadow:
        0 18px 40px rgba(41, 128, 185, 0.28);

}

/* ========================================
   Del Piero
======================================== */

.ridley-outline-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 16px 28px;

    border-radius: 18px;

    border: 1px solid rgba(0,0,0,0.12);

    background: white;
    color: var(--ridley-black);

    font-weight: 800;
    font-size: 0.95rem;

    transition: all 0.35s ease;

}

/* ========================================
   Totti
======================================== */

.ridley-outline-btn:hover {

    background: var(--ridley-black);
    color: white;

    transform: translateY(-4px);

}

/* ========================================
   Modric
======================================== */

.ridley-noise {

    position: relative;
    overflow: hidden;

}

.ridley-noise::before {

    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.03;

    pointer-events: none;

    background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

}

/* ========================================
   Bellingham
======================================== */

@media (max-width: 768px) {

    .ridley-section {

        padding-top: 70px;
        padding-bottom: 70px;

    }

    .ridley-container {

        padding-left: 20px;
        padding-right: 20px;

    }

}