*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
}

body {
    font-family: "tt-commons-pro", sans-serif;
    background-color: #00091E;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

:root {
    --color-primary: #00091E;
    --color-secondary: #E9ECF1;

    --color-red: #F50000;
    --color-white: #FFFFFF;
    --color-gray: #5D687E;
    --color-black: #000000;
}

.container {
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: 100px;

    @media (max-width: 992px) {
        padding-inline: 20px;
    }
}

.xl-title {
    font-weight: 700;
    font-size: clamp(1.875rem, 1.695vw + 1.43rem, 3.125rem);
    /* 30 / 50*/
    line-height: clamp(1.875rem, 2.034vw + 1.341rem, 3.375rem);
    /* 30 / 54*/
    /* 420 / 1600*/
}

.l-title {
    font-weight: 400;
    font-size: clamp(1.25rem, 0.678vw + 1.072rem, 1.75rem);
    /* 20 / 28*/
    /* 420 / 1600*/
    line-height: 34px;
    letter-spacing: 0.02em;
}

.m-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.02em;
}

.ctab-live {
    display: flex;
    align-items: center;
    gap: 10px;

    background-color: var(--color-red);
    color: var(--color-white);
    padding: 12px 18px;
    border-radius: 30px;

    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.02em;

    transition: background-color 0.4s ease;

    &::before {
        content: "";
        width: 10px;
        height: 10px;
        background-color: var(--color-white);
        border-radius: 50%;
    }

    &:hover {
        background-color: hsl(0, 100%, 38%);
    }
}

.main {
    display: flex;
    align-items: center;
    justify-content: center;
}

header {
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    .wrap {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-block: 12px;
    }

    .wrap__right {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .wrap__right-mic {
        position: relative;
        display: flex;
        align-items: center;
        gap: 5px;

        font-weight: 600;
        font-size: 15px;
        line-height: 19px;

        color: var(--color-primary);
        cursor: pointer;
        padding-block: 12px;

        transition: color 0.4s ease;

        svg {
            padding: 3.5px 6px;
            width: 24px;
            height: 24px;
        }

        &:hover {
            color: hsla(0, 0%, 60%);

            .mic-dropdown {
                opacity: 1;
                visibility: visible;
            }
        }

        @media (max-width: 768px) {
            display: none;
        }
    }

    .wrap__right-tv {
        display: flex;
        align-items: center;
        gap: 5px;

        font-weight: 600;
        font-size: 15px;
        line-height: 19px;

        color: var(--color-primary);
        cursor: pointer;
        padding-block: 12px;

        transition: color 0.4s ease;

        svg {
            padding: 3.5px 1.5px;
            width: 24px;
            height: 24px;
        }

        &:hover {
            color: hsla(0, 0%, 60%);
        }
    }

    .wrap__right-line {
        width: 0px;
        border: 1px solid var(--color-primary);
        height: 23px;

        @media (max-width: 768px) {
            display: none;
        }
    }

    .mic-dropdown {
        position: absolute;
        top: 100%;
        right: -20px;

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

        padding: 15px 21px;
        border-radius: 10px;

        display: flex;
        flex-direction: column;
        gap: 30px;

        width: 176px;

        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease;

        z-index: 200;
    }

    .mic-dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;

        color: var(--color-primary);

        font-weight: 700;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0.02em;
        text-transform: uppercase;

        transition: color 0.3s ease;

        .dot {
            width: 10px;
            height: 10px;
            background-color: currentColor;
            border-radius: 50%;
            transition: background-color 0.3s ease;
            flex: 0 0 auto;
        }

        &:hover {
            color: hsl(221, 100%, 26%);
        }
    }

    .logo {
        width: clamp(9.188rem, 3.814vw + 8.186rem, 12rem);
        /* 147 / 196*/
        /* 344 / 1600*/

        height: auto;
        aspect-ratio: 196 / 80;
        object-fit: contain;
    }

}

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 534px;
    padding-block: 152px 70px;
    background-color: var(--color-secondary);
}

footer {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-block: 80px 50px;
    color: var(--color-white);

    @media (max-width: 768px) {
        padding-block: 80px 70px;
    }

    .footer-bg-right {

        width: clamp(19.25rem, 29.857vw + 12.831rem, 42.688rem);
        /* 308 / 683*/
        /* 420 / 1600*/
        aspect-ratio: 1;

        position: absolute;
        top: 0;
        right: calc(clamp(13rem, -10.424vw + 15.736rem, 5.313rem) * -1);
        /* -208 / -85*/
        /* 420 / 1600*/

        background-color: #1F2940;
        border-radius: 30%;
        pointer-events: none;

        z-index: -1;
    }

    .footer-bg-left {
        width: clamp(30.25rem, 49.831vw + 17.169rem, 67rem);
        /* 484 / 1072*/
        /* 344 / 1600*/
        aspect-ratio: 1;

        position: absolute;
        bottom: calc(clamp(16.5rem, 52.203vw + 2.797rem, 55rem) * -1);
        /* -264 / -880 */
        /* 420 / 1600 */

        left: calc(clamp(10.375rem, -13.136vw + 13.823rem, 0.688rem) * -1);
        /* -166 / -11*/
        /* 420 / 1600*/

        background-color: #1F2940;
        border-radius: 30%;
        pointer-events: none;

        z-index: -1;
    }

    .wrap {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    .wrap__top {
        display: flex;
        align-items: center;
        gap: clamp(0.313rem, 2.389vw - 0.201rem, 2.188rem);
        /* 5 / 35*/
        /* 344 / 1600*/
        margin-bottom: 176px;

        @media (max-width: 768px) {
            margin-bottom: 80px;
        }
    }

    .wrap__top img {
        width: clamp(6.125rem, 4.936vw + 5.064rem, 10rem);
        /* 98 / 160*/
        /* 344 / 1600*/
        height: auto;
        aspect-ratio: 163 / 65;
        object-fit: cover;
    }

    .wrap__middle {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
        margin-bottom: 100px;

        @media (max-width: 768px) {
            margin-bottom: 80px;
        }
    }

    .wrap__middle--content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }

    .s-title {
        font-weight: 700;
        font-size: 20px;
        line-height: 28px;
        text-transform: uppercase;
        color: var(--color-white);
    }

    .link {
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        color: hsl(0, 0%, 60%);

        transition: color 0.3s ease;

        &:hover {
            color: var(--color-white);
        }
    }

    .wrap__bottom {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .rights {
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        color: hsl(0, 0%, 60%);

        transition: color 0.3s ease;

        &:hover {
            color: var(--color-white);
        }
    }
}