/* ===== RESET & BASE STYLES ===== */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    /* Base font size for rem calculations (1rem = 16px by default) */
    font-size: 16px;
    /* Color variables */
    --primary-color: hsl(257, 40%, 49%);
    --accent-color: hsl(300, 69%, 71%);
    --white: #ffffff;
}

/* ===== BODY & BACKGROUND ===== */
body {
    background: url(images/bg-desktop.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: var(--primary-color);
    height: 100vh;
    padding: 4rem 5rem 6.6875rem 5rem; /* 64px 80px 107px 80px */
    position: relative;
    font-family: "Open Sans", sans-serif;
    color: var(--white);
}

/* ===== HEADER/LOGO ===== */
.logo-sec {
    margin-bottom: 6.5rem; /* 104px */
    width: 12.5rem; /* 200px - adjust as needed */
}

/* ===== MAIN CONTENT LAYOUT ===== */
main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem; /* 32px */
}

.right-section {
    padding: 3rem 3.625rem; /* 48px 58px */
}

/* ===== TYPOGRAPHY ===== */
.main-heading {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 2.1875rem; /* 35px */
    line-height: 1.3;
    margin-bottom: 2.5rem; /* 40px */
}

.main-para {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 1rem; /* 16px - adjust if needed */
    line-height: 1.6;
    margin-bottom: 1.6875rem; /* 27px */
    opacity: 0.9;
}

/* ===== BUTTON STYLES ===== */
.register-button {
    border: none;
    padding: 1.25rem 4rem; /* 20px 64px */
    border-radius: 4rem; /* 64px */
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    color: var(--primary-color);
    background-color: var(--white);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2); /* 4px 8px */
}

.register-button:hover {
    color: var(--white);
    background-color: var(--accent-color);
    transform: translateY(-0.125rem); /* -2px */
}

/* ===== SOCIAL ICONS ===== */
.social-icons {
    position: absolute;
    bottom: 2.5rem; /* 40px */
    right: 5rem; /* 80px */
    display: flex;
    gap: 1.375rem; /* 22px */
}

.social-icon {
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    filter: invert(100%);
    cursor: pointer;
    transition: all 0.3s ease;
}

.social-icon:hover {
    filter: invert(48%) sepia(79%) saturate(2476%) 
            hue-rotate(286deg) brightness(118%) contrast(119%);
    transform: translateY(-0.25rem); /* -4px */
}

/* ===== MOBILE RESPONSIVE STYLES ===== */
@media (max-width: 50rem) { /* 800px */
    body {
        background: url(images/bg-mobile.svg);
        background-size: contain;
        background-position: top center;
        height: auto;
        min-height: 100vh;
        background-color: hsl(257, 40%, 49%);
        padding: 2.375rem 2.4375rem 2.5rem 2.5rem; /* 76px 78px 80px 80px */
    }

    .logo-sec {
        margin-bottom: 4.375rem; /* 140px */
        width: 7.5rem; /* 240px */
    }

    main {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .right-section {
        padding: 4.375rem 0 0 0; /* 140px */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .main-heading {
        margin-bottom: 1.78125rem; /* 57px */
        font-size: 1.5rem; /* 48px */
    }

    .main-para {
        margin-bottom: 1.625rem; /* 52px */
        font-size: 0.96875rem; /* 31px */
    }

    .register-button {
        padding: 1rem 4.8125rem; /* 32px 154px */
        margin-bottom: 4rem; /* 128px */
        font-size: 0.5625rem; /* 18px */
        width: 100%;
        max-width: 12.5rem; /* 400px */
    }

    .social-icons {
        position: static;
        justify-content: center;
        margin-top: 1rem;
        gap: 0.6875rem; /* 22px */
    }

    .social-icon {
        width: 1.5rem; /* 40px */
        height: 1.5rem; /* 40px */
    }
}