/*

    Global utility classes, base resets, typography Global settings, etc.
    Avoid component-specific or page-specific styles here.
    Should be loaded on every page.

*/


/* import Poppins Font From Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');



/*What Dose Azka Do Section */

* {
    padding: 0;
    margin: 0;
}

body {
    padding: 0px;
    margin: 0px;
    font-family: "Poppins", sans-serif;
}

.home-title-primary {
    color: var(--primary);
    font-weight: var(--title-font);
    font-size: 2.4rem;
}
.main-button {
    width: 12.5rem;
    height: 2rem;
    border: none;
}

.aboutUsSectionOneTitle {
    color: var(--primary);
    font-weight: var(--about-title-font);
    font-size: 2rem;
    margin-bottom:1.5rem;
}
.aboutUsSectionTitle {
    color: var(--primary);
    font-weight: var(--about-title-font);
    font-size: 2rem;
}

.darrow {
    color: var(--primary);
    width: 1.6rem;
    height: 1.6rem;
}
[aria-expanded="false"] .darrow {
    transition: transform 0.2s linear;
}

[aria-expanded="true"] .darrow {
    transform: rotate(-90deg);
    transition: transform 0.2s linear;
}
.home-title-primary {
    color: var(--primary);
    font-weight: var(--title-font);
    font-size: 2.4rem;
}
.home-title-white{
    color: var(--white);
    font-weight: var(--title-font);
    font-size: 2.4rem;
}
@media (max-width: 765px) {
    .home-title-white,
    .home-title-primary,
    .aboutUsSectionTitle,
    .aboutUsSectionOneTitle {
        font-size: 1.8rem;
    }
}
/*OverView For (Industries, Solutions)*/
.overview 
{
    background-image: linear-gradient(#024F82 0 10%,transparent),url('../images/industry 1.svg');
    background-size: cover;
    background-position: bottom, left;
    height: 32.25rem;
    position: relative;
}
    .overview .title{
        color: var(--white);
        width: 36.313rem;
        height: 6.25rem;
        font-size: 8rem;
        font-weight: 700;
        position: absolute;
        bottom: 15rem;
    }
@media (max-width: 992px){
    .overview .title {
        color: var(--white);
        width: 20.625rem;
        height: 4.25rem;
        font-size: 3.625rem;
        font-weight: 600;
    }
}
/*Overview-Cards*/
.overview-cards {
    background-color: #EEEEEE;
    padding: 5rem 0;
}

    .overview-cards .row {
        margin: 0 2rem;
    }

    .overview-cards .cards {
        background-color: var(--white);
        padding: 0;
        margin: 2rem 0;
        display: flex;
        flex-direction: column;
    }

        .overview-cards .cards .cardsImg {
            margin: 1rem;
        }

        .overview-cards .cards h2 {
            margin: 0 1rem;
            font-weight: var(--title-font);
            font-size: 2.25rem;
        }

        .overview-cards .cards p {
            margin: 1rem;
            color: #5D5D5D;
            font-size: 1rem;
            font-weight: 400;
        }

        .overview-cards .cards a {
            margin: 1rem;
            font-size: 1rem;
            font-weight: 400;
            color: var(--primary);
            margin-top: auto;
            text-decoration: none;
        }
@media (max-width: 992px) {
    .overview-cards .cards h2 {
        font-size: 1.9rem;
    }
}

/*Details Page (Industrys, Solutions)*/
.Details-Hero {
    background-image: linear-gradient(#024F82 10%,transparent 80%),url('../images/industryhero.svg');
    background-size: cover;
    background-position: top;
}

    .Details-Hero .container .body {
        color: var(--white);
        padding: 9rem 0 6rem 0;
        display: flex;
        flex-direction: column;
    }

        .Details-Hero .container .body h2 {
            font-weight: 600;
            font-size: 3.6rem;
        }

        .Details-Hero .container .body p {
            font-weight: 700;
            font-size: 1.5rem;
            margin: 1rem 0;
            width: 85%;
        }

        .Details-Hero .container .body button {
            color: var(--primary);
            margin-top: 2rem;
        }


/*Infograph Sections*/
.InfographSection h2 {
    font-weight: 500;
    font-size: 2.25rem;
    margin: 4rem 0 0 0;
}

.InfographSection .InfographSectionImg {
    width: 100%;
}

.InfographSection hr {
    margin: 0 0 1rem 0;
}

/*@media (max-width: 992px) {
    .InfographSection h2 {
        font-weight: 400;
        font-size: 1.625rem;
        margin: 2rem 0 1rem 0;
    }
}*/
/*Insights Section*/
.insights-Section {
    background-color: #F8F8F8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .insights-Section h2 {
        font-weight: 500;
        font-size: 2.25rem;
        margin: 4rem 0;
    }

    .insights-Section .row {
        width: 95%;
        margin-bottom: 4rem;
    }

    .insights-Section .card {
        box-shadow: 1px 1px 4px 4px rgba(22, 22, 26, 0.18);
        border: none;
        border-radius: 1rem;
        overflow: hidden;
        flex: 1 1 auto;
        margin: 4%;
        overflow: hidden;
    }

        .insights-Section .card img {
            max-width: 100%;
            object-fit: cover;
        }

    .insights-Section .news-card-body {
        padding: 1.5rem 1rem;
        text-align: start;
    }

        .insights-Section .news-card-body a {
            text-decoration: none;
        }

            .insights-Section .news-card-body a p {
                color: var(--primary);
                font-size: 1.5rem;
                font-weight: var(--title-font);
                cursor: pointer;
            }

        .insights-Section .news-card-body small {
            color: var(--gary);
            font-size: 1rem;
            font-weight: var(--title-font);
        }



@media (max-width: 992px) {
    .Details-Hero .container .body {
        width: 100%;
    }

        .Details-Hero .container .body h2 {
            font-size: 2.1rem;
            font-weight: 600;
        }

        .Details-Hero .container .body p {
            font-size: 1.3rem;
            font-weight: 600;
        }
}

@media (max-width: 610px) {
    .Details-Hero .container .body button {
        font-size: 0.9rem;
    }
    .InfographSection h2,
    .insights-Section h2 {
        font-size: 2rem;
    }
}