/* Hero Section */

.hero-section {
    background-image: 
    linear-gradient(to bottom, rgba(255, 255, 255, 0.89), rgba(255, 255, 255, 0)), 
    url("../img/main-background.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.hero-container {
    display: flex;
    justify-content: center;
    height: auto;
    gap: 1.5rem;
}

.hero-card {
    width: 40rem;
    height: auto;
    padding: 2rem;
    padding-bottom: 0rem;
    overflow: hidden;
}

.hero-card-logo {
    width: 3rem;
}

.hero-card a {
    text-decoration: none;
    color: black;
    font-weight: 700;
}

.hero-card-link {
    display: flex;
}

.hero-card-link img {
    margin-left: 0.5rem;
    width: 2rem;
    height: auto;
}

.hero-card-img {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 425px) {

    .hero-section-title {
        width: 34rem;
    }

    .hero-container {
        display: grid;
        gap: 1rem;
    }

    .hero-card {
        width: 34rem;
    }
}

/* Announcement Section */

.announcement-title {
    text-align: center;
}

.announcement-title h2 {
    padding: 1rem 0;
}

.announcement-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.announcement-card {
    overflow: hidden;
    width: 60.5rem;
    height: auto;
}

.announcement-text {
    padding: 2rem;
}

.announcement-text h4 {
    font-weight: 500;
}

.announcement-button-lining {
    display: flex;
    margin-top: -4rem;
}

.oppacity-bg {
    display: flex;
    background: linear-gradient(to bottom, #ffffff48, #ffffff);
    justify-content: end;
    width: 100%;
}

.announcement-btn {
    display: flex;
    gap: 0.5rem;
}

.announcement-button img {
    width: 2rem;
}

@media screen and (max-width: 425px) {
    .announcement-container {
        display: grid;
        gap: 1rem;
    }

    .announcement-card {
        width: 34rem;
    }
}

/* Our Work Section */

.our-work-title {
    text-align: center;
}

.our-work-title h2 {
    padding: 1rem 0;
}

.our-work-lining {
    display: flex;
    justify-content: center;
}

.our-work-container {
    width: 40rem;
    padding: 2rem;
}

.side-border {
    border-left: 3px solid;
    border-right: 3px solid;
    border-image: radial-gradient(circle, #7272729d, #ffffff) 1;
}

.our-work-card {
    height: 35rem;
    width: auto;
    margin: 1rem 0;
    padding: 2rem;
    overflow: hidden;
}


.our-work-card-lower {
    height: 35rem;
    width: auto;
    margin-top: 4rem;
    padding: 2rem;
    overflow: hidden;
}

.our-work-card-higher {
    height: 35rem;
    width: auto;
    margin-top: -1rem;
    padding: 2rem;
    overflow: hidden;
}

.our-work-card-title {
    margin-bottom: 1rem;
}

.pattern-bg {
    background-image: url("../img/dotted Pattern.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

@media screen and (max-width: 425px) {
    .our-work-lining {
        display: grid;
    }

    .our-work-container {
        width: 34rem;
        padding: 0;
    }

    .side-border {
        border: 0px;
    }

    .our-work-card-lower {
        margin: 0;
    }

    .our-work-card-higher {
        margin: 0;
    }
}

/* About us Section  */

.about-us {
    display: flex;
    justify-content: center;
}

.about-us-sizing {
    width: 60.5rem;
}

.about-us-text {
    align-content: center;
    padding: 3rem;
}

@media screen and (max-width: 425px) {
    .about-us {
        display: grid;
    }

    .about-us-sizing {
        width: 34rem;
    }

    .about-us-img-frame {
        border-radius: 1rem;
        overflow: hidden;
        height: 38rem;
        position: relative;
        margin-bottom: 2rem;
    }

    .about-us-img-frame img {
        width: 60rem;
        position: absolute;
        top: -0.5rem;        
        left: -4rem;
    }

    .about-us-text {
        padding: 0;
    }

    .about-us-text p {
        font-size: 1.4rem;
    }
}

/* CTA Section */

.cta-lining {
    display: flex;
    justify-content: center;
}

.cta-section {
    display: flex;
    justify-content: center;
    width: 121rem;
    height: auto;
    padding: 2rem;
}

.cta-section-text {
    width: 50%;
    align-content: center;
    margin-right: 2rem;
}

.cta-section-image {
    overflow: hidden;
}

.cta-section-text h2 {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1;
}

.cta-section-text p {
    font-size: 1.8rem;
}

@media screen and (max-width: 425px) {

    .cta-lining {
        display: grid;
    }

    .cta-section {
        display: grid;
        width: 34rem;
        padding: 1rem;
    }

    .cta-section-text {
        width: 34rem;
        align-content: start;
        padding: 3rem;
    }

    .cta-section-text .main-paragraph {
        font-size: 1.4rem;
    }

    .cta-section-image {
        width: 34rem;
        padding: 1rem;
    }

    .cta-section-image img {
        width: 34rem;
    }
}