/* Base Styles (Applies to all screen sizes) */
body {
    font-family: 'Cairo', sans-serif;
    height: 100%;
    margin: 0;
    padding: 139px;
    background: url('../MainLayout/images/background.jpg') no-repeat center center/cover;
    position: relative;
    color: white;
    text-align: center; /* Align text center */
}

    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100Vh;
        background: rgba(8, 25, 43, 0.68); /* Blue overlay with opacity */
        z-index: -1;
    }

.container {
    max-width: 1200px; /* Increased max-width for large screens */
    margin: auto;
    position: relative;
}

.logo {
    width: 150px;
    margin: 0 auto; /* Center the logo */
    display: block;
    margin-top: -137px;
}

h1 {
    font-size: 24px;
    margin-top: 20px;
}

p {
    font-size: 18px;
}

.faculties {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default: 3 columns */
    gap: 45px;
    margin-top: 20px;
    margin-right: -100px;
}

/* Each faculty box */
.faculty {
    background: white;
    color: black;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: right;
    width: 270px;
    margin: 0 auto; /* Center each faculty block */
}

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

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

.footer {
    margin-top: 20px;
    font-size: 14px;
}

/* Social block */
.social {
    display: flex;
    flex-direction: row; /* Align the icon and text in a row */
    align-items: center; /* Vertically center the content */
    justify-content: center;
    gap: 10px; /* Space between the icon and text */
}

    .social a {
        width: 50px;
        height: 50px;
        background: url(https://www.facebook.com/images/fb_icon_325x325.png);
        background-size: cover;
        border-radius: 50%;
        margin-right: 10px; /* Space between the icon and the text */
    }

    .social p {
        color: white;
        font-size: 16px;
        margin: 0; /* Remove default margin */
        flex-grow: 1; /* Allow the text to take available space */
    }

/* Media Queries for Responsiveness */

/* Large Screens (PC) - Above 1200px */
@media screen and (min-width: 1201px) {
    .container {
        max-width: 1400px; /* Wider container for large screens */
    }

    .faculties {
        grid-template-columns: repeat(4, 1fr); /* 4 columns for large screens */
        gap: 60px; /* Increase gap for better spacing */
    }

    .faculty {
        width: 300px; /* Slightly larger faculty boxes */
    }

    h1 {
        font-size: 28px; /* Larger font size for headings */
    }

    p {
        font-size: 20px; /* Larger font size for paragraphs */
    }
}

/* Tablets - Between 768px and 1200px */
@media screen and (max-width: 1200px) and (min-width: 769px) {
    body {
        padding: 100px; /* Reduce padding for tablets */
    }
    .logo {
        margin-top: -87px;
    }
    .faculties {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
        gap: 30px; /* Adjust gap for tablets */
        margin-right: -25px;
    }

    .faculty {
        width: 100%; /* Full width for tablet faculty boxes */
    }

    h1 {
        font-size: 22px; /* Slightly smaller font size for tablets */
    }

    p {
        font-size: 16px; /* Slightly smaller font size for tablets */
    }
}

/* Small to Medium Screens (Mobile Landscape) - Between 481px and 768px */
@media screen and (max-width: 768px) and (min-width: 481px) {
    body {
        padding: 50px; /* Further reduce padding for smaller screens */
    }

    .faculties {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for small screens */
        gap: 20px; /* Smaller gap for small screens */
    }

    .faculty {
        width: 100%; /* Full width for small screens */
    }

    h1 {
        font-size: 20px; /* Smaller font size for small screens */
    }

    p {
        font-size: 14px; /* Smaller font size for small screens */
    }
}

/* Mobile Devices - Below 480px */
@media screen and (max-width: 480px) {
    body {
        padding: 20px; /* Minimal padding for mobile devices */
    }

    .faculties {
        grid-template-columns: 1fr; /* 1 column for mobile devices */
        gap: 15px; /* Small gap for mobile devices */
        margin-right: 0px;
    }

    .logo {
        width: 120px; /* Smaller logo for mobile devices */
        margin-top: -24px;
    }

    h1 {
        font-size: 18px; /* Smaller font size for mobile devices */
    }

    p {
        font-size: 12px; /* Smaller font size for mobile devices */
    }

    .footer {
        font-size: 12px; /* Smaller font size for footer */
    }

    .faculty {
        padding: 5px; /* Reduce padding for mobile devices */
    }

        .faculty img {
            width: 40px;
            height: 40px; /* Smaller icons for mobile devices */
        }

    .social a {
        width: 40px;
        height: 40px; /* Smaller social icons for mobile devices */
    }

    .social p {
        font-size: 14px; /* Smaller font size for social text */
    }
}