/* ==========================================================================
   REPETITIVE OBJECT STYLES
   ========================================================================== */

.text-container {
    text-align: left;
    z-index: 2;
    position: relative; /* Change from absolute */
    max-width: 600px;
    padding: 1.5rem;
    border-radius: 10px;
    background-color: rgba(15, 16, 15, 0.7);
    left: auto; /* Remove previous left positioning */
    top: auto; /* Remove previous top positioning */
}

.section-1-background,
.section-2-background,
.section-3-background,
.section-4-background,
.section-5-background {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 80%;
    height: 80vh;
    border-radius: 10px;
    display: flex;
    align-items: center; /* Centers vertically */
    justify-content: flex-start; /* Default to left */
    padding: 0 5%; /* Adds padding from edges */
    position: relative;
}

/* Initial hidden state - slide from left */
.section-1-background,
.section-3-background,
.section-5-background {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* Alternate positioning - right side for even sections */
#infra-section-2 .section-2-background,
#infra-section-4 .section-4-background {
    justify-content: flex-end; /* Positions text-container to the right */
}

/* Initial hidden state - slide from right */
.section-2-background,
.section-4-background {
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* Animated state for all backgrounds */
.section-1-background.animate,
.section-2-background.animate,
.section-3-background.animate,
.section-4-background.animate,
.section-5-background.animate {
    opacity: 1;
    transform: translateX(0);
}

.text-container h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.text-container h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    font-style: italic;
}

.text-container p {
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.text-container ul li {
    font-size: 0.9rem;
    margin-left: 0.8rem;
}

/* Hero Section */
#infra-hero {
    background-image: url('../images/infra-hero.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-title {
    background-color: rgba(15, 16, 15, 0.7);
    padding: 1.5rem;
    border-radius: 10px;
    max-width: 450px;
    position: absolute;
    bottom: 9rem;
    left: 5%;
    animation: slideInLeft 1s ease-out;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.page-title h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.9rem;
}

.page-title p {
    font-size: 1.2rem;
    line-height: 1.2;
    padding-bottom: 0.5rem;
}

/* SECTION 0 */

.intro-container {
    width: 100vw;
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.intro-text {
    color: var(--off-white);
    width: 80%;
    text-align: left;
    margin-top: 1rem;
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Animated state */
.intro-text.animate {
    opacity: 1;
    transform: translateX(0);
}

.intro-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.intro-text p {
    font-size: 1.2rem;
    line-height: 1.2;
    margin-bottom: 0.8rem;
    max-width: 900px;
}

.intro-text strong {
    font-size: 1.4rem;
}

.infra-card-container {
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.infra-card {
    background-color: var(--deep-tech-blue);
    color: var(--off-white);
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    width: 15rem;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Animated state for cards with staggered delays */
.infra-card.animate {
    opacity: 1;
    transform: scale(1);
}

.infra-card:nth-child(1).animate { transition-delay: 0s; }
.infra-card:nth-child(2).animate { transition-delay: 0.15s; }
.infra-card:nth-child(3).animate { transition-delay: 0.3s; }
.infra-card:nth-child(4).animate { transition-delay: 0.45s; }
.infra-card:nth-child(5).animate { transition-delay: 0.6s; }
.infra-card:nth-child(6).animate { transition-delay: 0.75s; }

/* SECTION 1 */

.section-1-background {background-image: url('../images/cloud-infra.jpeg');}

/* SECTION 2 */

.section-2-background {background-image: url('../images/edge-infra.jpeg');}

/* SECTION 3 */

.section-3-background {background-image: url('../images/cyber-infra.jpeg');}

/* SECTION 4 */

.section-4-background {background-image: url('../images/contact-infra.jpeg');}

/* SECTION 5 */

.section-5-background {background-image: url('../images/cx-infra.jpeg');}


/* Section 10 */
#infra-section-9 {
    height: 30vh;
    width: 100%;
    align-items: center;
    text-align: center;
}

.cta-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.cta-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    flex-direction: row;
    gap: 4.5rem;
    margin-bottom: 5rem;
}

.cta-button {
    padding: 1.2rem;
    color: var(--off-white);
    background-color: var(--deep-tech-blue);
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1.4rem;
}

.cta-button:hover {
    background-color: var(--warm-ochre);
    color: var(--deep-charcoal-grey);
    scale: 1.1;
    transition: all 0.3s ease;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* Tablet/Medium screens (768px - 1024px) */
@media (max-width: 1024px) {
    /* Hero Section */
    .page-title {
        max-width: 480px;
        bottom: 6rem;
        padding: 1.2rem;
    }

    .page-title h1 {
        font-size: 2rem;
    }

    .page-title p {
        font-size: 1rem;
    }

    /* Intro Section */
    .intro-container {
        height: auto;
        padding: 3rem 0;
    }

    .intro-text {
        width: 85%;
    }

    .intro-text h2 {
        font-size: 2rem;
    }

    .intro-text p {
        font-size: 1rem;
    }

    .intro-text strong {
        font-size: 1.2rem;
    }

    .infra-card-container {
        flex-wrap: wrap;
        width: 85%;
        gap: 1.5rem;
    }

    .infra-card {
        width: calc(33.333% - 1rem);
        min-width: 180px;
    }

    /* Section backgrounds */
    .section-1-background,
    .section-2-background,
    .section-3-background,
    .section-4-background,
    .section-5-background {
        width: 85%;
        height: 85vh;
        padding: 0 3%;
    }

    .text-container {
        max-width: 500px;
        padding: 1.2rem;
    }

    .text-container h2 {
        font-size: 2rem;
    }

    .text-container h3 {
        font-size: 1.3rem;
    }

    .text-container p {
        font-size: 0.95rem;
    }

    .text-container ul li {
        font-size: 0.9rem;
        margin-left: 0.8rem;
    }

    /* INTRODUCTION SECTION */

    #intro-container {
        height: 75vh;
    }

    /* CTA Section */
    .cta-section h2 {
        font-size: 2rem;
    }

    .cta-buttons {
        gap: 1.8rem;
    }

    .cta-button {
        padding: 1rem;
        font-size: 1rem;
    }
}

/* Mobile/Small screens (below 768px) */
@media (max-width: 768px) {
    /* Hero Section */

    #infra-hero {
        background-image: url('../images/infra-hero-por.jpg');
    }

    .section-1-background {background-image: url('../images/cloud-infra-por.jpg');}
    .section-2-background {background-image: url('../images/edge-infra-por.jpg');}
    .section-3-background {background-image: url('../images/cyber-infra-por.jpg');}
    .section-4-background {background-image: url('../images/contact-infra-por.jpg');}
    .section-5-background {background-image: url('../images/cx-infra-por.jpg');}

    .page-title {
        max-width: 90%;
        left: 5%;
        right: 5%;
        bottom: 4rem;
        padding: 1rem;
    }

    .page-title h1 {
        font-size: 1.8rem;
        margin-bottom: 0.6rem;
    }

    .page-title p {
        font-size: 0.9rem;
        padding-bottom: 0.3rem;
    }

    /* Intro Section */
    .intro-container {
        height: auto;
        padding: 2rem 0;
    }

    .intro-text {
        width: 90%;
        margin-top: 0.5rem;
    }

    .intro-text h2 {
        font-size: 1.8rem;
        margin-bottom: 0.8rem;
    }

    .intro-text p {
        font-size: 0.9rem;
        margin-bottom: 0.6rem;
    }

    .intro-text strong {
        font-size: 1rem;
    }

    .infra-card-container {
        flex-direction: column;
        width: 90%;
        gap: 1rem;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .infra-card {
        width: 100%;
    }

    .infra-card h3 {
        font-size: 1.2rem;
    }

    /* Section backgrounds */
    .section-1-background,
    .section-2-background,
    .section-3-background,
    .section-4-background,
    .section-5-background {
        width: 95%;
        height: auto;
        min-height: 60vh;
        padding: 2rem 1rem;
    }

    /* Center text on mobile for all sections */
    .section-1-background,
    .section-2-background,
    .section-3-background,
    .section-4-background,
    .section-5-background {
        justify-content: center;
    }

    .text-container {
        max-width: 100%;
        padding: 1rem;
    }

    .text-container h2 {
        font-size: 1.8rem;
        margin-bottom: 0.4rem;
    }

    .text-container h3 {
        font-size: 1.2rem;
        margin-bottom: 0.8rem;
    }

    .text-container p {
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
    }

    .text-container ul {
        padding-left: 1.2rem;
    }

    .text-container ul li {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    /* CTA Section */
    #infra-section-9 {
        height: auto;
        padding: 3rem 0;
    }

    .cta-section h2 {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
        padding: 0 1rem;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 1.5rem;
        width: 90%;
        margin-bottom: 2rem;
    }

    .cta-button {
        padding: 1rem;
        font-size: 1.1rem;
        width: 100%;
        text-align: center;
    }
}

/* Extra small screens (below 480px) */
@media (max-width: 480px) {

    #infra-hero {
        background-image: url('../images/infra-hero-por.jpg');
    }

    .section-1-background {background-image: url('../images/cloud-infra-por.jpg');}
    .section-2-background {background-image: url('../images/edge-infra-por.jpg');}
    .section-3-background {background-image: url('../images/cyber-infra-por.jpg');}
    .section-4-background {background-image: url('../images/contact-infra-por.jpg');}
    .section-5-background {background-image: url('../images/cx-infra-por.jpg');}
    
    .page-title h1 {
        font-size: 1.5rem;
    }

    .page-title p {
        font-size: 0.85rem;
    }

    .intro-text {
        padding: 1rem;
    }

    .intro-text h2 {
        font-size: 1.5rem;
    }

    .intro-text p,
    .intro-text strong {
        font-size: 0.95rem;
    }

    .infra-card-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .infra-card {
        width: 90%;
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    /* Remove animation delays on small screens */
    .infra-card:nth-child(1).animate,
    .infra-card:nth-child(2).animate,
    .infra-card:nth-child(3).animate,
    .infra-card:nth-child(4).animate,
    .infra-card:nth-child(5).animate,
    .infra-card:nth-child(6).animate { 
        transition-delay: 0s;
    }

    .section-1-background, 
    .section-2-background, 
    .section-3-background, 
    .section-4-background, 
    .section-5-background {
        width: 85%;
        height: 85vh;
        display: flex;
        flex-direction: column;
    }

    .text-container {
        margin-top: 11rem;
        width: 90%;
    }

    .text-container h2 {
        font-size: 1.3rem;
    }

    .text-container h3 {
        font-size: 0.7rem;
    }

    .text-container p,
    .text-container ul li {
        font-size: 0.65rem;
    }

    .text-container ul li {
        margin-left: 0.3rem;
    }

    .cta-section h2 {
        font-size: 1.5rem;
    }

    .cta-button {
        font-size: 1rem;
        padding: 0.9rem;
    }
}