/********** Template CSS **********/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
:root {
    --primary: #D81324;
    --secondary: #0B2154;
    --light: #F2F2F2;
    --dark: #111111;
}

.fw-medium {
    font-weight: 600 !important;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    text-transform: uppercase;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 2px;
}


/*** Navbar ***/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
    
}

.navbar-light .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
    outline: none;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar-light .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

.navbar-light .navbar-brand,
.navbar-light a.btn {
    height: 75px;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--dark);
    font-weight: 500;
}

.navbar-light.sticky-top {
    top: -100px;
    transition: .5s;
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-header-inner {
    background: rgba(0, 0, 0, .7);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--light);
}


/*** Facts ***/
.fact {
    background: linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, .9)), url(../img/c3.JPG);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


/*** Service ***/
.service .nav .nav-link {
    background: var(--light);
    transition: .5s;
}

.service .nav .nav-link.active {
    background: var(--primary);
}

.service .nav .nav-link.active h4 {
    color: #FFFFFF !important;
}


/*** Sustainability  ***/
.sustainability {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../img/c1.JPG) center center no-repeat;
    background-size: cover;
}

.bootstrap-datetimepicker-widget.bottom {
    top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
    border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
    font-weight: 500;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 10px;
    border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--primary);
}


/*** Team ***/
.social activity-item .social activity-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    transform: scale(0);
    transition: .5s;
}

.social activity-item:hover .social activity-overlay {
    transform: scale(1);
}

.social activity-item .social activity-overlay .btn {
    color: var(--primary);
    background: #FFFFFF;
}

.social activity-item .social activity-overlay .btn:hover {
    color: #FFFFFF;
    background: var(--secondary)
}


/*** Careers ***/
.careers-carousel .owl-item .careers-text,
.careers-carousel .owl-item.center .careers-text * {
    transition: .5s;
}

.careers-carousel .owl-item.center .careers-text {
    background: var(--primary) !important;
}

.careers-carousel .owl-item.center .careers-text * {
    color: #FFFFFF !important;
}

.careers-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.careers-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 1px solid #CCCCCC;
    transition: .5s;
}

.careers-carousel .owl-dot.active {
    background: var(--primary);
    border-color: var(--primary);
}


/*** Footer ***/
.footer {
    background: linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, .9)), url(../img/carousel-bg-1.jpg) center center no-repeat;
    background-size: cover;
}

.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    border: 1px solid #FFFFFF;
    border-radius: 35px;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: var(--primary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .3);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}
.video-overlay {
    position: absolute;
    background-color: rgba(35,45,57,0.8);
    top: 0;
    left: 0;
    bottom: 7px;
    width: 100%;
}
.main-banner {
    position: relative;
  }
  
  #bg-video {
      min-width: 100%;
      min-height: 100vh;
      max-width: 100%;
      max-height: 100vh;
      object-fit: cover;
      z-index: -1;
  }
  
  #bg-video::-webkit-media-controls {
      display: none !important;
  }
  .main-banner .caption {
    text-align: center;
    position: absolute;
    width: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  
  .main-banner .caption h6 {
    margin-top: 0px;
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
  }
  
  .main-banner .caption h2 {
    margin-top: 30px;
    margin-bottom: 25px;
    font-size: 80px;
    text-transform: uppercase;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
  }
  
  .main-banner .caption h2 em {
    font-style: normal;
    color: #00FFFF;
    font-weight: 800;
  }
  /* Add basic styling for product containers */
.product-container {
    position: relative;
    overflow: hidden;
}

/* Style for each product card */
.product-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Style for the product image */
.product-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

/* Style for product info (title, description, and link) */
.product-info {
    padding: 20px;
}

.product-info h5 {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
}

.product-info p {
    font-size: 1rem;
    color: #555;
}

.product-info a {
    color: #007bff;
    text-decoration: none;
}

.product-info a:hover {
    text-decoration: underline;
}

/* Sliding effect for the product containers */
.product-container {
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    animation: slideInUp 1s forwards;
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Delay the animation for each product container */
.product-container:nth-child(1) {
    animation-delay: 0.1s;
}
.product-container:nth-child(2) {
    animation-delay: 0.3s;
}
.product-container:nth-child(3) {
    animation-delay: 0.5s;
}
.product-container:nth-child(4) {
    animation-delay: 0.7s;
}
.product-container:nth-child(5) {
    animation-delay: 0.9s;
}
.product-container:nth-child(6) {
    animation-delay: 1.1s;
}
/* Section Styles */
.container-xxl {
    background-color: #f8f9fa; /* Light background */
    padding: 50px 20px;
    border-radius: 10px;
}

/* Certificate Item */
.certificate-item {
    text-align: center;
    transition: transform 0.3s ease;
}

.certificate-item:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Certificate Image */
.certificate-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    background-color: #fff; /* White background for certificates */
    border: 2px solid #ddd; /* Light border for contrast */
    padding: 10px;
    transition: box-shadow 0.3s ease;
}

.certificate-image:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Shadow on hover */
}

/* Certificate Text */
.certificate-item p {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-top: 10px;
}
/* Container Styles */
.container-xxl {
    background-color: #f8f9fa;
    padding: 50px 20px;
    border-radius: 10px;
}

/* Carousel Styles */
.plants-carousel {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 15px;
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #aaa #f8f9fa; /* Thumb and track colors */
}

.plants-carousel::-webkit-scrollbar {
    height: 8px; /* Height of the scrollbar */
}

.plants-carousel::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Thumb color */
    border-radius: 4px;
}

.plants-carousel::-webkit-scrollbar-track {
    background-color: #f8f9fa; /* Track color */
}

/* Plant Item */
.plant-item {
    flex: 0 0 auto;
    width: 200px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.plant-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Plant Image */
.plant-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

/* Plant Info */
.plant-info {
    padding: 10px;
}

.plant-name {
    font-size: 16px;
    font-weight: bold;
    margin: 5px 0;
    color: #333;
}

.plant-address {
    font-size: 14px;
    color: #666;
    margin: 0;
}
.about-section {
    background-color: #f9f9f9;
    padding: 40px 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
}

.mission-img, .vision-img, .values-img, .csr-img {
    width: 300px;
    height: 300px;
    border: 5px solid #ddd;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    opacity: 0; /* Initially hidden */
    transform: translateY(50px); /* Start position for animation */
    animation: fadeIn 1.5s ease-in forwards;
}

.mission-img {
    animation-delay: 0.2s;
}

.vision-img {
    animation-delay: 0.4s;
}

.values-img {
    animation-delay: 0.6s;
}

.csr-img {
    animation-delay: 0.8s;
}

h3 {
    font-size: 1.8rem;
    color: #0056b3;
    margin-bottom: 15px;
}

p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

ul {
    list-style-type: disc;
    margin-left: 20px;
    color: #444;
}

ul li {
    margin-bottom: 5px;
    font-size: 1rem;
}

/* Keyframes for fade-in animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .mission-img, .vision-img, .values-img, .csr-img {
        width: 200px;
        height: 200px;
    }
    h3 {
        font-size: 1.5rem;
    }
    p {
        font-size: 0.9rem;
    }
    ul li {
        font-size: 0.9rem;
    }
}
/* Services Section CSS */
.services-section {
    background-color: #f9f9f9;
    padding: 50px 0;
}

.services-section .container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.section-header h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #333;
}

.section-header p {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 30px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.service-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: transform 0.3s ease;
    text-align: center;
    opacity: 0; /* Initial opacity for fade-in effect */
    transform: translateY(10px); /* Start with a slight offset */
    animation: fadeInUp 1s ease forwards; /* Apply fade-in animation */
}

.service-item:hover {
    transform: translateY(-5px);
}

.service-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    transition: opacity 0.5s ease, transform 0.3s ease;
    opacity: 0.9;
}

.service-item img:hover {
    opacity: 1;
    transform: scale(1.05); /* Slight zoom effect on hover */
}

.service-item h3 {
    font-size: 1.5em;
    margin: 15px 0;
    color: #007bff;
}

.service-item p {
    font-size: 1em;
    color: #555;
}

/* Fade-in Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Investors Section Styling */
.investors-section {
    max-width: 1100px;
    margin: 20px auto;
    padding: 30px;
    background-color: #f4f4f9;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Section Title */
.section-title {
    text-align: center;
    margin-bottom: 30px;
}

.section-title h2 {
    font-size: 32px;
    color: #333;
    margin-bottom: 10px;
}

.section-title p {
    font-size: 16px;
    color: #666;
}

/* Individual Section Styling */
.section {
    margin-bottom: 40px;
}

.section h3 {
    font-size: 26px;
    color: #007bff;
    margin-bottom: 20px;
}

/* Card Container */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* Cards */
.card {
    width: 250px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.card h4 {
    font-size: 20px;
    color: #333;
    margin-bottom: 15px;
}

.download-btn {
    display: inline-block;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.download-btn:hover {
    background-color: #0056b3;
}
/* Sustainability Section Styles */
.sustainability-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px; /* Adjust padding as needed */
}

.text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.main-quote {
    font-size: 90px; /* Adjust font size as needed */
    
    color: green; /* Main quote color */
    font-family:Georgia, 'Times New Roman', Times, serif
}

.sub-quote {
    font-size: 24px; /* Adjust font size as needed */
    color: #666; /* Sub-quote color */
    font-family: 'Open Sans', sans-serif; /* Example of an attractive font */
}

.image-container {
    flex: 1;
    display: flex;
    justify-content: center;
}

.image-container img {
    max-width: 100%;
    height: auto;
}
/* Sustainability Section Styles */
.future-section {
    padding: 80px 0;
    background-color: #f9fafb; /* Light background color */
}

.future-section .container {
    max-width: 1200px;
}

.main-heading {
    font-family: 'Barlow', sans-serif;
    font-size: 50px;
    font-weight: 700;
    color: #4CAF50;
    line-height: 1.4;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.main-heading:hover {
    transform: translateY(-5px);
}

.explanation {
    font-family: 'Ubuntu', sans-serif;
    font-size: 22px;
    color: #333;
    margin-bottom: 40px;
}

.priority-heading {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #2d3e2e;
    margin-bottom: 40px;
    text-transform: capitalize;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.topic-box {
    text-align: center;
    margin-bottom: 30px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.topic-box:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.2);
}

.topic-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.topic-image:hover {
    transform: scale(1.05); /* Slight zoom effect */
}

.topic-title {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: black
    margin-top 15px;
    margin-bottom: 10px;
}

.topic-description {
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    color: #777;
}

/* Responsive Styles */
@media (max-width: 767px) {
    .main-heading {
        font-size: 40px;
    }

    .explanation {
        font-size: 18px;
    }

    .priority-heading {
        font-size: 28px;
    }

    .topic-box {
        margin-bottom: 20px;
    }

    .topic-title {
        font-size: 20px;
    }

    .topic-description {
        font-size: 14px;
    }
}
/* PDF Section Styles */
.pdf-section {
    padding: 60px 0;
    background-color: #f9f9f9; /* Light background for contrast */
}

.pdf-section .container {
    max-width: 1200px;
}

.section-title {
    font-family: 'Barlow', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #2d3e2e;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.section-description {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #555;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.pdf-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    margin-bottom: 30px;
}

.pdf-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.pdf-title {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #2d3e2e;
    margin-bottom: 15px;
}

.pdf-description {
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    color: #777;
    margin-bottom: 20px;
}

.pdf-download-btn {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.pdf-download-btn:hover {
    background-color: #45a049;
    transform: translateY(-2px);
}

.pdf-download-btn:active {
    background-color: #3e8e41;
}

@media (max-width: 767px) {
    .section-title {
        font-size: 28px;
    }

    .section-description {
        font-size: 14px;
    }

    .pdf-card {
        margin-bottom: 20px;
    }

    .pdf-title {
        font-size: 20px;
    }

    .pdf-description {
        font-size: 14px;
    }

    .pdf-download-btn {
        font-size: 14px;
        padding: 8px 15px;
    }
}
/* Board & Committees Section */
.board-committees-section {
    padding: 60px 0;
    background-color: #f4f4f4; /* Light gray background for contrast */
}

.board-committees-section .section-title {
    font-family: 'Barlow', sans-serif;
    font-size: 36px;
    color: #2d3e2e;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.board-committees-section .section-description {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.board-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    margin-bottom: 30px;
}

.board-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.board-title {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    color: #0056b3;
    margin-bottom: 10px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.board-title a {
    text-decoration: none;
    color: #0056b3;
}

.board-title a:hover {
    color: #003c8f;
}

.board-description {
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    color: #777;
}

@media (max-width: 767px) {
    .board-committees-section .section-title {
        font-size: 28px;
    }

    .board-committees-section .section-description {
        font-size: 14px;
    }

    .board-card {
        padding: 15px;
    }

    .board-title {
        font-size: 20px;
    }

    .board-description {
        font-size: 14px;
    }
}
/* Agenda Section */
/* Agenda Section */
.agenda-section {
    padding: 60px 0;
    background-color: #f4f4f4;
}

.agenda-title {
    font-size: 24px;
    color: #555;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
}

.agenda-subtitle {
    font-size: 30px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    color: #2d3e2e;
    text-align: center;
    margin-bottom: 50px;
}

.topics {
    max-width: 900px;
    margin: 0 auto;
}

.topic {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.topic-header {
    padding: 20px 30px;
    font-size: 20px;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #0056b3;
    font-weight: 600;
}

.topic-header:hover {
    background-color: #e0f7fa;
}

.topic-content {
    display: none;
    padding: 20px 30px;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #fafafa;
    border-top: 1px solid #e5e5e5;
}

/* Icon Styling */
.icon {
    font-size: 26px;
    font-weight: bold;
    transition: transform 0.3s ease;
    color: #0056b3;
}

/* Right Alignment of Name and Icon */
.topic-name {
    flex-grow: 1;
    text-align: left;
    font-size: 20px;
    color: #0056b3;
}

.topic-header.active .icon {
    transform: rotate(45deg); /* Rotate the "+" icon to look like an "×" */
}
/* General Styling for Section */
/* Section Styling */
/* Section Styling */
#how-we-manage.our-focus {
    padding: 100px 20px;
    background-color: #f9f9f9;
}

#how-we-manage h2 {
    font-size: 50px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 50px;
}

/* Process Card Styling */
.process-card {
    background-color: white;
    padding: 40px;
    position: relative;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
    border-radius: 8px;
    margin-bottom: 40px;
    overflow: hidden;
}

.process-card h3 {
    font-size: 30px;
    font-weight: 600;
    color: #000;
    margin-bottom: 15px;
}

.process-card p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/* Number Styling (Outside the Box) */
.process-card .number {
    font-size: 120px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9); /* Light gray for subtlety */
    position: absolute;
    top: -40px;
    left: -40px; /* Adjust to move outside of the card */
    z-index: -1; /* Position behind the card content */
    opacity: 0.2; /* Ensure the number is subtle but visible */
}

/* Responsive Design */
@media (max-width: 768px) {
    #how-we-manage h2 {
        font-size: 28px;
    }

    .process-card .number {
        font-size: 90px;
        top: -20px;
        left: -30px;
    }

    .process-card {
        margin-bottom: 30px;
    }
}
/* Banner Section Styling */
/* Banner Section Styling */
.banner-section {
    padding: 100px 20px;
    background-color: #f9f9f9;
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
}

/* Left Side: Big Image */
.banner-image {
    flex: 1.5; /* Make the image larger compared to text */
}

.banner-image img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: none; /* No shadow, no border */
    transform: none; /* No scaling effects */
}

/* Right Side: Quote or Text */
.banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-text h1 {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.banner-text p {
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .banner-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .banner-text {
        margin-top: 20px;
    }

    .banner-text h1 {
        font-size: 28px;
    }

    .banner-text p {
        font-size: 16px;
    }
}
/* Section Styling */
.activities-section {
    padding: 80px 20px;
    background-color: #f9f9f9;
}

.activities-section .section-header {
    margin-bottom: 40px;
}

.activities-section h2 {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.activities-section p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Image Gallery Styling */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.activity-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
}

.activity-card img {
    width: 100%;
    height: auto;
    border-bottom: 2px solid #eee;
}

.activity-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    padding: 10px 15px;
    margin: 0;
    background-color: #f3f3f3;
}

/* Responsive Design */
@media (max-width: 768px) {
    .activities-section h2 {
        font-size: 28px;
    }

    .activities-section p {
        font-size: 16px;
    }

    .activity-card h3 {
        font-size: 18px;
    }
}
/* Full-screen hero section */
/* Sustainability-inspired hero section */
/* Career Hero Section */
.career-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    background-color: #f8f8f8;
  }
  
  /* Left Content Styling */
  .content-left {
    max-width: 50%;
    padding: 3rem;
  }
  
  .content-left h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #333;
  }
  
  .content-left p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #666;
  }
  
  .cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    color: #fff;
    background-color: #28a745;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  
  .cta-button:hover {
    background-color: #218838;
  }
  
  /* Right Content Styling */
  .content-right {
    max-width: 50%;
  }     
  
  .content-right img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
  }
  /* form */
  .career-hero-section {
    background: #f3f4f6;
    padding: 40px 20px;
    font-family: Arial, sans-serif;
  }
  
  .career-container {
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  
  .career-container h1 {
    text-align: center;
    font-size: 28px;
    color: #333;
  }
  
  .career-container p {
    text-align: center;
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
  }
  
  .career-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .career-row {
    display: flex;
    gap: 20px;
    justify-content: space-between;
  }
  
  .career-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  
  .career-field label {
    font-size: 14px;
    color: #444;
  }
  
  .career-field input,
  .career-field select,
  .career-field textarea {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  
  .career-field textarea {
    resize: none;
  }
  
  .career-field input:focus,
  .career-field select:focus,
  .career-field textarea:focus {
    outline: none;
    border-color: #007bff;
  }
  
  .career-section h2 {
    margin-bottom: 10px;
    border-bottom: 2px solid #007bff;
    color: #333;
  }
  
  button {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  button:hover {
    background: #0056b3;
  }