@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,800&display=swap');

:root {
    /**
    * Colors 
    */

    --white: #ffffff;
    --white-second: #f4f4f4;
    --line-color: #283A8D;
    --font-color: #211921;
    --button-color: #2E74D9;

    /**
    * Typography 
    */

    --font-family: var(--font-family);
    --font-size-h1: 60px;  /* Reduced */
    --font-size-h2: 45px;  /* Reduced */
    --font-size-h3: 20px;  /* Reduced */
    --font-size-p: 16px;   /* Reduced */
    --font-weight-regular: 400;
    --font-weight-semi: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 700;

    /**
    * Spacing
    */

    --section-spacing-large: 40px 40px; /* Reduced */
    --section-spacing-medium: 20px 20px; /* Reduced */
}

/**
* Reused Styles
*/

#automotive-section h2 {
    color: var(--font-color);
    font-family: var(--font-family);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semi);
    line-height: 52px; /* Reduced */
}

#automotive-section h3 {
    color: var(--font-color);
    font-family: var(--font-family);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semi);
    line-height: 28px; /* Reduced */
}

#automotive-section p, #automotive-section h5 {
    color: var(--font-color);
    font-family: var(--font-family);
    font-size: var(--font-size-p);
    font-weight: var(--font-weight-semi);
    line-height: 25px; /* Reduced */
}

/* ... other styles remain the same ... */

#automotive-section #automotive-banner h1 {
    text-align: left;
    color: var(--white);
    font-family: var(--font-family);
    font-size: 60px; /* Reduced */
    font-weight: var(--font-weight-semi);
}

#automotive-section #automotive-banner p {
    text-align: left;
    color: #FFFFFF99;
    font-family: var(--font-family);
    font-size: 20px; /* Reduced */
    font-weight: var(--font-weight-regular);
    width: 756px;
}

/* ... rest of the CSS continues unchanged ... */

@media (min-width: 300px) and (max-width: 767px) {
    #automotive-section #automotive-banner h1 {
        font-size: 45px; /* Adjusted for smaller screens */
    }

    #automotive-section h2 {
        font-size: 36px; /* Adjusted */
    }

    /* ... other responsive styles ... */
}

@media (max-width: 360px) {
    #automotive-section #automotive-banner h1 {
        font-size: 35px; /* Further reduced */
        line-height: 35px;
    }

    #automotive-section h2 {
        font-size: 28px !important; /* Further reduced */
        line-height: 36px;
    }
}

/* ... rest of the media queries ... */