@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
    --main-green: #1b786f;
}

a {
    transition: color 500ms ease;

    i {
        transition: color 500ms ease;
    }
}

a:hover {
    color: #000 !important;

    i {
        color: #000 !important;
    }
}

body {
    font-family: "Raleway", sans-serif;
}

.navbar {
    padding-top: 0;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    background-color: #ffffff23;

    .navbar-brand {
        padding-top: 0;
        width: 30%;
    }

    .nav-link {
        color: var(--main-green);
        font-weight: bold;
    }

    .nav-link.active {
        color: #000;
    }
}

.hero-sec {
    height: 80vh;
    background-image: url("img/hero-bg.jpg");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.about-us-sec {

    background-image: url("img/about-us-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .title-cont {
        text-align: center;
        text-transform: uppercase;
        padding: 2% 0;

        h1 {
            color: #000;
            font-size: 4rem;
            margin-bottom: 0rem;
            line-height: 4rem;
            font-weight: bold;
        }

        h6 {
            color: #000;
            font-size: 1.5rem;
            letter-spacing: 0.5rem;
            font-weight: 600;
            margin-bottom: 2rem;
        }

        a {
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-weight: bold;
            color: #737373;
            font-size: 1.3rem;
            margin-bottom: 2rem;

            i {
                color: var(--main-green);
                line-height: normal;
                font-size: 1.8rem;
            }
        }
    }

    .chairperson-col,
    .ceo-col {
        border: 1rem solid #ffffff8a;
        position: relative;
        padding: 0;
        margin-bottom: 2rem;

        img {
            margin-bottom: 1rem;
        }

        .desig-cont {
            color: #000;
            text-transform: uppercase;
            padding: 0.5rem;

            h4 {
                margin-bottom: 0rem;
                font-size: 1.1rem;
                font-weight: bold;
            }

            h6 {
                margin-bottom: 0rem;
                font-size: 0.9rem;
            }
        }
    }

    .content-col {
        display: flex;
        justify-content: center;
        align-items: start;

        .content-cont {
            padding-top: 2rem;
            text-align: center;

            h2 {
                color: var(--main-green);
                font-size: 2.5rem;
                line-height: 2.5rem;
                font-weight: bold;
                text-transform: uppercase;


            }

            a {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-decoration: none;
                font-weight: bold;
                color: #737373;
                text-transform: uppercase;

                i {
                    color: var(--main-green);
                    line-height: normal;
                    font-size: 1.7rem;
                }
            }
        }
    }
}

.strategy-resources-sec {
    background-image: url("img/strategy-res-bg.jpg");
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
    padding: 10% 0 50% 0;

    .content-col {
        text-align: center;
        background-color: #ffffff8a;
        padding: 5%;

        h2 {
            color: var(--main-green);
            font-size: 2.5rem;
            line-height: 2.5rem;
            font-weight: bold;
            text-transform: uppercase;
        }

        a {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-weight: bold;
            color: #737373;
            text-transform: uppercase;

            i {
                color: var(--main-green);
                line-height: normal;
                font-size: 1.7rem;
            }
        }
    }
}

.stakeholder-eng-sec {
    background-image: url("img/stakeholder-eng-bg.jpg");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 5% 0 18% 0;
    text-align: center;

    .info-cont {
        background-color: #ffffff8a;
        padding: 5%;

        h2 {
            color: var(--main-green);
            font-size: 2.5rem;
            line-height: 2.5rem;
            font-weight: bold;
            text-transform: uppercase;
        }

        p {
            line-height: 1.2rem;
        }

        a {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-weight: bold;
            color: #737373;
            text-transform: uppercase;

            i {
                color: var(--main-green);
                line-height: normal;
                font-size: 1.7rem;
            }
        }
    }


}

.esg-highlights-sec {
    padding: 5% 0;
    margin-bottom: 2rem;

    h2 {
        color: var(--main-green);
        font-size: 2.5rem;
        line-height: 2.5rem;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;

    }
}

.fin-highlights-sec {
    background-image: url("img/fin-highlights-bg.jpg");
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 1% 0 35% 0;

    h2 {
        color: var(--main-green);
        font-size: 2.5rem;
        line-height: 2.5rem;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;

    }
}

@media (min-width: 992px) {

    .no-padding-lft {
        padding-left: 0;
    }

    .no-padding-rgt {
        padding-right: 0;
    }

    .navbar {
        .navbar-brand {
            width: 10%;
        }
    }

    .hero-sec {
        margin-bottom: 0rem;
    }

    .about-us-sec {

        .title-cont {
            h6 {
                margin-bottom: 0rem;
            }

            a {
                flex-direction: row;
                gap: 0.8rem;
                margin-bottom: 0rem;
            }
        }

        .chairperson-col,
        .ceo-col {
            border: 0rem solid #ffffff8a;
            padding: auto;
            margin-bottom: 0;

            img {
                margin-bottom: 0;
            }

            .desig-cont {
                position: absolute;
                bottom: 1rem;
                padding: unset;
            }
        }

        .chairperson-col {
            .desig-cont {
                right: -60%;
            }

        }

        .ceo-col {
            .desig-cont {
                left: -60%;
            }

        }

        .content-col {
            .content-cont {
                h2 {
                    width: 35%;
                    margin: 0 auto 2rem auto;
                }

                a {
                    flex-direction: row;
                    gap: 0.8rem;
                }
            }
        }

    }

    .strategy-resources-sec {
        padding: 5% 0;
        background-position: center left;
        background-size: cover;

        .content-col {
            background-color: transparent;
            padding: unset;

            h2 {
                width: 45%;
                margin: 0 auto 2rem auto;
            }

            a {
                flex-direction: row;
                gap: 0.8rem;
            }
        }
    }

    .stakeholder-eng-sec {
        .info-cont {
            background-color: transparent;
            padding: unset;

            h2 {
                width: 45%;
                margin: 0 auto 2rem auto;
            }

            p {
                width: 55%;
                margin: 0 auto 2rem auto;
            }

            a {
                flex-direction: row;
                gap: 0.8rem;
            }
        }

    }

    .esg-highlights-sec {
        h2 {
            margin-bottom: 3rem;
        }
    }

    .fin-highlights-sec {
        h2 {
            margin-bottom: 3rem;
        }
    }
}