/* RESPONSIVENESS ADJUSTMENTS */

/* STYLING FOR EVERY DEVICE BELOW A WIDTH OF 768PX */

@media (max-width:768px) 
{
    
    /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

    /* (HOMEPAGE STYLING FOR MOBILE DEVICES) */

    .homepage
    {

        padding: 0 10px; /* Adjust horizontal padding for smaller screens */

        padding-top: 2vh; /* Maintain top padding */

    }   

    /* (NAVBAR STYLING FOR MOBILE DEVICES) */
      
    .hamburger 
    {

        display: block;

    }

    .links
    {

        display: none; /* Hide links by default on small screens */

        position: absolute;

        top: 70px; /* Adjust based on your navbar height */

        right: 0;

        background-color: white;

        flex-direction: column;

        gap: 24px;

        padding: 24px;

        width: 70%;

        box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);

        z-index: 1000;

    }

    .links.show 
    {

        display: flex;          /* Show when toggled */

    }

    .navbar
    {

        position: relative;

    }

    /* (HERO TEXT STYLING FOR MOBILE DEVICES) */

    .herotitle
    {

        font-size: clamp(24px, 14vw, 64px);

    }
    
    /* (HERO SUBTITLE STYLING) */

    .herosubtitle
    {

        font-size: 16px;

        padding: 0 2px;         /* Adjust horizontal padding for smaller screens */

    }

    /* (BUTTON STYLING FOR MOBILE DEVICES) */

    .button
    {

        padding: 16px 16px;     /* Adjust padding for smaller screens */

        font-size: 14px;        /* Smaller font size */

        border-radius: 27px;

    }

    /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

    /* (ABOUT PAGE 1 STYLING FOR MOBILE DEVICES) */

    .About
    {

        padding: 0 10px;            /* Horizontal padding */

        gap:0;

        flex-wrap: wrap;

        padding-top: 2vh;           /* Top padding for spacing */

        padding-bottom: 2vh;

    }

    /* (IMAGE CONTAINER) */

    .ellipse-container 
    {

        width: 100%;      /* Width FILL */

    }

    /* (IMAGE STYLING FOR MOBILE DEVICES) */

    .ellipse
    {

        width:240px;

        height:240px;

    }

    /* (EVERYTHING IN THE RIGHT CONTAINER) */

    .right-container
    {

        justify-content: center;

        gap: 2vh;

        /*min-width: 360px; /* Minimum width for smaller screens */
    }

    /* (TEXT CONTAINER) */

    .content 
    {

        justify-content: center;

        gap:2vh;

    }

    /* (TITLE STYLING FOR MOBILE DEVICES) */

    .title
    {

        text-align:center;

        font-size: clamp(24px, 8vh, 64px);

    }
    
    /* (SUBTITLE STYLING FOR MOBILE DEVICES) */

    .subtitle 
    {

        padding:0 8px;

        text-align: justify;

        font-size: 16px;

    }

    /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    /* (ABOUT PAGE 2 STYLING FOR MOBILE DEVICES) */

    .Aboutpage2
    {

        padding-top: 2vh;           /* Top padding for spacing */

        padding-bottom: 2vh;

        height: 100dvh;             /* Height hug */

        padding: 0 10px;            /* Adjust horizontal padding for smaller screens */

        flex-wrap: wrap;

        position:relative;

        min-width:fit-content;

        gap:2vw;

    }

    /* (TEXT CONTAINER STYLING FOR MOBILE DEVICES) */

    .AboutTILE 
    {

        min-height: fit-content;

        max-height: fit-content;

        min-width: fit-content;

        padding: 16px 8px; /* Adjust padding for smaller screens */

        gap:2vh;

    }

    /* (TITLE STYLING FOR MOBILE DEVICES) */

    .Tiletitle 
    {

        font-size: clamp(16px, 6vh, 24px);

        text-align: center;

    }

    /* (LIST STYLING FOR MOBILE DEVICES) */

    .Tilelist 
    {

        font-size: 14px;

        padding-left: 24px;

    }

    /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    /* (SERVICE PAGE STYLING) */
    
    /*  (ALTERNATE TITLE STYLING(DUE TO BACKGROUND BEING BLUE)) */

    .title-alt
    {

        font-size: clamp(24px, 8vh, 64px);

        text-align: center;

    }

    /* (SERVICE NAME STYLING FOR MOBILE DEVICES) */
    .ServiceName
    {

        font-size: clamp(24px, 8vh, 32px);

        text-align: left;

    }

    /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
    /* (CONTACT PAGE STYLING FOR MOBILE DEVICES) */

    .Contact
    {

        flex-wrap: wrap;

        padding:0 32px; /* Adjust horizontal padding for smaller screens */

    }

    /* (LEFT CONTENT CONTAINER) */

    .LEFTContent
    {

        /* Figma: Vertical flow, width fill, height hug */

        display: flex;

        flex-wrap: wrap;

        height: fit-content;     /* Height hug */

        align-items: center; /* Align content to the left */

    }

    /* (TITLE STYLING) */

    .Contact-t 
    {

        text-align: center;

        font-size: clamp(24px, 8vh, 64px);

        line-height: 1.1;

    }
}