/* FOR HOMEPAGE FULL-WIDTH SECTIONS */
.bg-image {
    /* background-image: url('img/sept-16-penguin-family-nocal-2560x1440.png'); */
    background-image: url('img/sep-19-stay-or-leave-nocal-2560x1440.png');
    background-size: cover;
    background-position: center;
    height: 100vh; /* Full viewport height */
}


.bg-image2 {
    /* background-image: url('img/sept-16-penguin-family-nocal-2560x1440.png'); */
    background-image: url('img/sept-17-summer-ending-nocal-2560x1440.png');
    background-size: cover;
    background-position: center;
    height: 100vh; /* Full viewport height */
}

.bg-image3 {
    /* background-image: url('img/sept-16-penguin-family-nocal-2560x1440.png'); */
    background-image: url('img/sep-23-science-is-magic-nocal-2560x1440.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh; /* Full viewport height */
}

.gradient-section {
    height: 35vh; /* 25% of the viewport height */
    /* background: linear-gradient(to right,  #664FA2, #6A97D2, #ff7e5f 0%, #feb47b 50%, #86a8e7 75%, #91eae4 100%); */
    /* background: linear-gradient(to right,  #ffffff 0%, #e2e2e2 75%, #9c9c9c 100%); */
    /* background-color: #262626; */
    /* background-color: antiquewhite; */
    /* border:1px solid; */
    border-bottom: 3px gray solid;

}

.gradient-section2 {
    height: 40vh; /* 25% of the viewport height */
    background: linear-gradient(to right, #498, #848); /* Gradient color */
}

.gradient-section3 {
    height: 100vh; /* 25% of the viewport height */
    /* background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient color */
    background: linear-gradient(to right, #ff7e5f 0%, #feb47b 50%, #86a8e7 75%, #91eae4 100%);
    /* background: linear-gradient(to right, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* Four colors */

}
/* END FOR HOMEPAGE FULL-WIDTH SECTIONS */

/* LOGOS SECTION */

.bg-primary {
    background-color: #009EE0; /* Blue background color */
}

.logo-box {
    background-color: white;
    border-radius: 5px; /* Optional: add rounded corners */
    padding: 15px; /* Space within each box */
    height: 100px; /* Set a fixed height for uniformity */
    width: 100%; /* Ensure box fills the column width */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

.logo-image {
    max-height: 70px; /* Restrict logo size within each box */
    width: auto;
}