@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Base rule */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;

}


html {
    font-size: 75.5%;
    /* 1rem = 10px */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
}

input,
p,
li,
a {
    font-family: "Poppins", sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.1rem;

}

a {
    text-decoration: none;
}

li {
    list-style: none;
    /* padding: 0rem 3rem; */
}


/* theme */
:root {
    --navandfooter-color: #003D01;
    --headingback-color: #a5DA31;
    --link-color: #1C4A9E;
    --instituename-color: #F0F4EA;
    --white-color: #fff;
    --border-: 0.1rem solid black;
    --box-shadow: 1rem 1rem 0.5rem #aaaaaa;
}

/*Layout*/

.about-institute-container {
    background-image: url(/images/main_page_image/B5.png);
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    place-items: center;
}

.about-institute-main-content {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin: 5rem;
    width: 80%;
    height: auto;
    background-color: var(--white-color);
    border-radius: 1.5rem;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.content {
    padding: 5rem 10rem;
}

.grid-two-col {
    grid-template-columns: 1fr;
}

.brochure-container {
    /* border: 1rem solid black; */
    display: grid;
    place-items: center;
    width: 100%;
    height: auto;

}

.brochure-container .brochure-one img {
    width: 90%;
    height: auto;
    margin: -2rem 6rem 8rem 7rem;
    box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;

}


.brochure-container .brochure-two img {
    width: 90%;
    height: auto;
    margin: -2rem 6rem 8rem 7rem;
    box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;
}

.content-heading {
    font-size: 2rem;
    font-weight: 600;
    background-color: var(--headingback-color);
    padding: 0.5rem 2rem;
    border-radius: 0.8rem;
    margin-right: 78%;
    margin-bottom: 2.5rem;
}

.about-institute-para {
    font-size: 1.5rem;
    text-align: justify;

}

.vision {
    margin-top: 3rem;
    font-size: 1.9rem;
    font-weight: 600;
    background-color: var(--headingback-color);
    padding: 0.5rem 2rem;
    border-radius: 0.8rem;
    margin-right: 85%;
    margin-bottom: 2.5rem;
}

.fa-leaf {
    font-size: 2rem;
    color: green;
    padding-right: 1rem;
    margin-left: -2rem;
}

.fa-ul li {
    text-align: justify;
}

.content img {
    position: absolute;
    width: 3rem;
    height: auto;
    margin-top: -2rem;
    margin-left: -1rem;
}

.pot-design {
    position: absolute;
    width: 6%;
    height: auto;

}

.pott-design {
    position: absolute;
    width: 13%;
    height: auto;
    margin-top: -13rem;
}

@media (max-width: 1199.98px) {
    .content-heading {
        margin-right: 75%;
    }
}


@media (max-width: 767.98px) {

    .about-institute-main-content {
        width: 90%;
    }

    .content {
        padding: 5rem 5rem;
    }

    .brochure-container .brochure-one img {
        margin: -2rem 0rem 8rem 6rem;
    }

    .brochure-container .brochure-two img {
        margin: -2rem 0rem 8rem 6rem;
    }

    .pott-design {

        position: absolute;
        width: 18%;
        height: auto;
        margin-top: -15rem;
        margin-left: -10rem;
    }
}





@media (max-width: 575.98px) {
    .content-heading {
        margin-right: 57%;
    }

    .about-institute-main-content {
        width: 90%;
    }

    .content {
        padding: 5rem 5rem;
    }

    .brochure-container .brochure-one img {
        margin: -2rem 0rem 8rem 4rem;
    }

    .brochure-container .brochure-two img {
        margin: -2rem 0rem 8rem 4rem;
    }

    .pott-design {
        position: absolute;
        width: 23%;
        height: auto;
        margin-top: -12rem;
        margin-left: 33rem;
    }

    .vision {
        margin-top: 3rem;
        font-size: 1.9rem;
        font-weight: 600;
        background-color: var(--headingback-color);
        padding: 0.5rem 2rem;
        border-radius: 0.8rem;
        margin-right: 72%;
        margin-bottom: 2.5rem;
    }
}



@media (max-width: 479.98px) {
    .content-heading {
        margin-right: 44%;
    }

    .about-institute-main-content {
        width: 90%;
    }

    .content {
        padding: 5rem 5rem;
    }

    .brochure-container .brochure-one img {
        margin: -2rem 0rem 8rem 3rem;
    }

    .brochure-container .brochure-two img {
        margin: -2rem 0rem 8rem 3rem;
    }

    .pott-design {
        position: absolute;
        width: 25%;
        height: auto;
        margin-top: -11rem;
        margin-left: 25rem;
    }

    .vision {
        margin-top: 3rem;
        font-size: 1.9rem;
        font-weight: 600;
        background-color: var(--headingback-color);
        padding: 0.5rem 2rem;
        border-radius: 0.8rem;
        margin-right: 72%;
        margin-bottom: 2.5rem;
    }
}

@media (max-width: 413.98px) {
    .content-heading {
        margin-right: 40%;
    }

    .about-institute-main-content {
        width: 90%;
    }

    .content {
        padding: 5rem 5rem;
    }

    .brochure-container .brochure-one img {
        margin: -2rem 0rem 8rem 3rem;
    }

    .brochure-container .brochure-two img {
        margin: -2rem 0rem 8rem 3rem;
    }

    .pott-design {
        position: absolute;
        width: 25%;
        height: auto;
        margin-top: -11rem;
        margin-left: 24rem;
    }

    .vision {
        margin-top: 3rem;
        font-size: 1.9rem;
        font-weight: 600;
        background-color: var(--headingback-color);
        padding: 0.5rem 2rem;
        border-radius: 0.8rem;
        margin-right: 72%;
        margin-bottom: 2.5rem;
    }
}

@media (max-width: 375.98px) {
    .content-heading {
        margin-right: 30%;
    }

    .about-institute-main-content {
        width: 90%;
    }

    .content {
        padding: 5rem 5rem;
    }

    .brochure-container .brochure-one img {
        margin: -2rem 0rem 8rem 3rem;
    }

    .brochure-container .brochure-two img {
        margin: -2rem 0rem 8rem 3rem;
    }

    .pott-design {
        position: absolute;
        width: 25%;
        height: auto;
        margin-top: -9rem;
        margin-left: 21rem;
    }

    .vision {
        margin-top: 3rem;
        font-size: 1.9rem;
        font-weight: 600;
        background-color: var(--headingback-color);
        padding: 0.5rem 2rem;
        border-radius: 0.8rem;
        margin-right: 72%;
        margin-bottom: 2.5rem;
    }
}

@media (max-width: 360.98px) {
    .content-heading {
        margin-right: 30%;
    }

    .about-institute-main-content {
        width: 90%;
    }

    .content {
        padding: 5rem 5rem;
    }

    .brochure-container .brochure-one img {
        margin: -2rem 0rem 8rem 3rem;
    }

    .brochure-container .brochure-two img {
        margin: -2rem 0rem 8rem 3rem;
    }

    .pott-design {
        position: absolute;
        width: 25%;
        height: auto;
        margin-top: -9rem;
        margin-left: 21rem;
    }

    .vision {
        margin-top: 3rem;
        font-size: 1.9rem;
        font-weight: 600;
        background-color: var(--headingback-color);
        padding: 0.5rem 2rem;
        border-radius: 0.8rem;
        margin-right: 72%;
        margin-bottom: 2.5rem;
    }
}