/* Logo Box Styling , The role of `position: fixed;` is to **keep an element always visible in
 the same position relative to the viewport**,regardless of scrolling. 
 It is used for sticky headers,floating buttons,or elements like navigation bars 
 that should remain accessible at all times.*/
.logo-box {
    box-sizing: border-box;
    /*we use it so when adding padding and borders the overall size wont increase*/
    width: 100%;
    /*spans the entire width of the viewport*/
    height: 120px;
    background-color: #333;
    display: flex;
    justify-content: center;
    /*Centers the content horizontally within the flex container*/
    align-items: center;
    /*Centers the content vertically within the flex container.*/
    padding: 10px;
    /*spaces between the content*/
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    /*the header will appear above the other elements,
    Ensures the header stays above other content */

    /*flex:Purpose of display: flex: Makes the .logo-box a flex container.
    Ensures the child element (img) is positioned in the center of the header
    both horizontally (justify-content: center) and vertically (align-items: center).
    Result: The logo remains perfectly centered within the fixed header, even when resized.*/
}

.logo-box img {
    width: 70px;
    height: 70px;
}

/* Main Banner Section  , When `position: relative;` is applied to `.main-banner`,it ensures the element stays
 in its normal position but establishes a positioning context for any child elements with `position: absolute`.
This allows child elements like `.box` to position themselves relative to `.main-banner`,
maintaining proper alignment within the banner.*/

.main-banner {
    position: relative;
    /*ithe main banner is the parent element for the child element as boxes*/
    width: 100%;
    height: 700px;
    background-image: url('bigPhoto\ \(1\).png');
    background-size: cover;
    /*the background image covers the entire section*/
    background-position: center;
    /*Centers the background image horizontally and vertically within the banner.*/
}

/*The .box styling ensures that the buttons in the banner are visually appealing,
interactive,and correctly aligned within the .main-banner. It combines positioning,
layout,and design elements to create a user-friendly interface.*/
/*so e7na mensta5dem absolute ma3 relative , to relate them together*/
.box {
    box-sizing: border-box;
    position: absolute;
    width: 150px;
    height: 70px;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: scala_sansregular, sans-serif;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /*The .box class styles the entire box (the container <div>),including its layout dimensions,and appearance.*/
}

.hover-zoom {
    transition: transform 0.3s ease-in-out;
}

.hover-zoom:hover {
    transform: scale(1.1);
}

.box1 {
    top: 80%;
    left: 34%;
    transform: translate(-50%, -50%);
}

.box2 {
    top: 80%;
    left: 48%;
    transform: translate(-50%, -50%);
}

.box3 {
    top: 80%;
    left: 62%;
    transform: translate(-50%, -50%);
}

.box a {
    text-decoration: none;
    color: white;
    /*The .box a class specifically targets the <a>tag within the box,which represents the clickable text.*/
}

/* Welcome Section Styling */
.new-section {
    padding: 40px;
}

/*Purpose of display: flex: Organizes the .text-box and .image-box into a horizontal row.
Uses justify-content: space-between to distribute the two boxes evenly across the available space.
Uses align-items: flex-start to align them at the top of the section. 
The gap: 20px creates spacing between the boxes. Result: Text and image appear side by side with proper spacing*/
.container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.text-box {
    flex: 1;
    box-sizing: border-box;
    padding: 20px;
    background-color: #333;
    color: white;
    border-radius: 15px;
    line-height: 1.6;
    font-family: scala_sansregular, sans-serif;
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.image-box {
    flex: 1;
    display: flex;
    justify-content: center;
}

.image-box img {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.section-title {
    font-size: 42px;
    font-weight: 400;
    color: goldenrod;
    text-align: center;
    margin-bottom: 20px;
    font-family: scala_sansregular, sans-serif;
}

/* About Event Section Specific Styling */
.about-section {
    padding: 40px;
}

/*Purpose of display: flex: Arranges .about-text-box and .about-image-box side by side 
in reverse order (image first) using flex-direction: row-reverse. justify-content: space-between ensures 
even spacing between elements. gap: 20px provides consistent spacing between
the text and image. Result: The text and image are aligned side by side,
with the image appearing before the text*/
.about-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row-reverse;
    gap: 20px;
    font-family: scala_sansregular, sans-serif;
}

.about-text-box {
    flex: 1;
    box-sizing: border-box;
    padding: 20px;
    background-color: #333;
    color: white;
    border-radius: 15px;
    line-height: 1.6;
    font-family: scala_sansregular, sans-serif;
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.about-image-box {
    flex: 1;
    display: flex;
    justify-content: center;
}

.about-image-box img {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.about-title {
    font-size: 42px;
    font-weight: 400;
    color: goldenrod;
    text-align: center;
    margin-bottom: 20px;
    font-family: scala_sansregular, sans-serif;
}

/* Register/Login Section Styling */
.register-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    margin-top: 80px;
    padding-bottom: 60px;
}

.register-box {
    display: flex;
    font-family: scala_sansregular, sans-serif;
    box-sizing: border-box;
    padding-left: 50px;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 250px;
    background-color: black;
    color: white;
    font-size: 42px;
    font-weight: bold;
    text-transform: capitalize;
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    text-decoration: none;
    /* Removes underline from link */
}

.register-box:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgb(230, 179, 30);
}

/* Partners Section Styling */
.partners-section {
    padding: 40px;
    text-align: center;
    background-color: #f9f9f9;
}

/*Purpose of display: flex: Arranges partner logos in a row. 
Allows logos to wrap to the next line if they don't fit on the current row (flex-wrap: wrap).
 justify-content: center centers the row of logos. gap: 20px adds spacing between 
 individual logos. Result: Logos are displayed in a neat row or multiple rows with equal spacing,
depending on screen width.*/
.partners-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.partners-logos img {
    width: 200px;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.partners-logos img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    .partners-section-title {
        font-size: 42px;
        font-weight: 400;
        color: goldenrod;
        text-align: center;
        margin-bottom: 20px;
        margin-top: 0px;
        font-family: scala_sansregular, sans-serif;
    }
}

/* Footer Styling , Purpose of display: flex: Arranges the .footer-left,.footer-center,
and .social-media sections horizontally. justify-content: space-between ensures 
there is even spacing between the three sections. flex-wrap: wrap allows sections 
to stack vertically on smaller screens. Result: The footer sections are spaced 
evenly and adapt to screen size. */
/* Footer Styling */
footer {
    background-color: #333;
    box-sizing: border-box;
    padding: 10px 20px;
    font-family: scala_sansregular, sans-serif;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

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

.footer-left img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.footer-left h3 {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    color: white;
}

.footer-divider {
    height: 30px;
    width: 1px;
    background-color: #bbb;
}

.social-media {
    display: flex;
    gap: 15px;
}

.social-media a {
    font-size: 18px;
    color: white;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.social-media a:hover {
    transform: scale(1.2);
    color: goldenrod;
}

.footer-center {
    text-align: center;
    color: white;
    font-size: 12px bold;
    flex-grow: 1;
    font-weight: bold;
}

.footer-copyright {
    margin-top: 10px;
    font-size: 12px bold;
    color: white;
    font-weight: bold;
}

@media (max-width: 768px) {

    /* Logo Box */
    .logo-box {
        height: 80px;
        /* Reduce height for smaller screens */
        padding: 5px;
    }

    .logo-box img {
        width: 50px;
        /* Adjust logo size */
        height: 50px;
    }

    /* Main Banner Section */
    .main-banner {
        height: 400px;
        /* Reduce banner height */
        background-size: contain;
        /* Adjust background size */
    }

    /* Boxes in Main Banner */
    .box {
        width: 120px;
        /* Reduce width */
        height: 50px;
        /* Reduce height */
        font-size: 14px;
        /* Adjust font size */
    }

    /* Welcome Section */
    .container {
        flex-direction: column;
        /* Stack text and image vertically */
        gap: 10px;
        /* Reduce gap */
    }

    .text-box,
    .image-box {
        width: 100%;
        /* Full width for smaller screens */
    }

    .image-box img {
        max-width: 100%;
        /* Adjust image size */
    }

    /* About Section */
    .about-container {
        flex-direction: column;
        /* Stack content vertically */
    }

    .about-text-box,
    .about-image-box {
        width: 100%;
        /* Full width */
    }

    /* Register/Login Section */
    .register-box {
        width: 80%;
        /* Adjust box size */
        height: auto;
        font-size: 20px;
        /* Reduce font size */
    }

    /* Partners Section */
    .partners-logos {
        flex-direction: column;
        /* Stack logos vertically */
        gap: 10px;
        /* Reduce gap */
    }

    .partners-logos img {
        width: 100px;
        /* Adjust logo size */
    }

    /* Footer */
    footer {
        flex-direction: column;
        /* Stack footer elements vertically */
        text-align: center;
    }

    .footer-left,
    .footer-center,
    .social-media {
        width: 100%;
        /* Make each section take full width */
    }

    .footer-left img {
        width: 40px;
        height: 40px;
    }
}