/* overall styling */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Unbounded", sans-serif;
}

.container-fluid {
    padding: 0;
}

.dropdown-item {
    color: #003366;
}

.nav-link {
    color: #ffffff;
    font-family: "open sans", sans-serif;
}

.get-involved-btn {
    background-image: url(images/button-bg.png);
    background-position: right;
    background-size: center;
    background-repeat: no-repeat;
    padding: 1rem 4.6rem 1rem 1rem;
    display: inline-block;
    text-decoration: none;
    color: #003366;
    transition: all 0.3s ease;
    font-family: "Noto Sans";
    font-size: small;
}

@media(min-width:768px) {
    .get-involved-btn {
        transform: translateY(22px);
    }
}

a:hover {
    transform: translateY(-5px);
}

.bg-body-tertiary {
    background-color: #003366 !important;
}

header h1 {
    color: #ffffff;
    font-size: 1.5rem;
}

.dropdown-menu {
    color: #ffffff;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* begining of homepage styling */
.hp-h1 {
    margin: 2rem;
    color: #003366;
    text-align: center;
}

.home-page {
    text-align: center;
    color: #003366;
    font-family: "Noto Sans", sans-serif;
}

.get-involved-btn2 {
    background-image: url(images/button-bg.png);
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1rem 2.6rem 1rem 1rem;
    display: inline-block;
    text-decoration: none;
    color: #003366;
    transition: all 0.3s ease;
    font-family: "Noto Sans";
}

/* carousel control arrows */
.carousel-control-next,
.carousel-control-prev {

    border-style: hidden;
    width: 4rem;
}

span.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23003366' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M11.5 1.5L5.5 8L11.5 14.5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  /* No width/height set here to keep the default size */
}
span.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23003366' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 1.5L10.5 8L4.5 14.5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  /* No width/height set here to keep the default size */
}
@media(min-width:768px){
    .carousel-control-prev,.carousel-control-next{
   background: gray;
   border-style: hidden;
   width: 4rem;
   opacity: 20%;
}

}
.carousel-text-h2{
    font-family: "Noto Sans",sans-serif;
    font-weight: 700;
    font-size: 24px;
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.col-6-btn-carousel-text {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    /* 10px 20px */
    background-color: #FF6F61;
    /* Coral background */
    border-radius: 0.625rem;
    /* 10px, rounded corners */
    color: #ffffff;
    /* White text for contrast */
    text-decoration: none;
    font-family: "Noto Sans", sans-serif;
    font-size: 1rem;
    text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
    /* 1px 1px 2px */
    transition: all 0.3s ease;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    /* 2px 4px */
}
.col-6-btn-carousel-text:hover{
    background-color: #FF6F61;
    color: #ffffff;
}

.carousel-inner {
    border-radius: 0;
    box-shadow: 3px -3px 6px 2px rgba(0, 0, 0, 0.2),
    3px 3px 6px 2px rgba(0, 0, 0, 0.2);
}
.carousel-item img {
    object-fit: cover;
    object-position: 50% 80%;
}
@media(min-width:768px){
    .carousel-item img{
        margin: 0rem 0rem 0rem 3rem;
        padding: 0rem 3rem 0rem 1rem;
    }
}

.carousel-text {
    font-size: 10px;
    text-align: left;
}
@media(min-width:768px){
    .carousel-text{
        font-size: 15px;
    }
}
.card-content-hl{
    border-radius: 20px;
}

/* end of home page styling */


/* Custom Styles for Coral Kingdom - Sea creatures hub all sea creatures */
/* header */
.mb-0 {
    color: #ffffff;
    font-family: "noto sans", sans-serif;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa;
    color: #333;
}

/* Main Content */
.text-center-h1-main {
    color: #003366;
    /* CHANGE: Set to black from #007bff. */
    font-size: 20px;
    background-color: rgba(46, 204, 113, 0.6);
    padding: 40px 0;
    /* CHANGE: Increased from 10px 20px to make the background larger. */
    text-align: center;
}

.text-center-h2 {
    color: #003366;
    /* CHANGE: Set to black from #0056b3. */
    font-size: 20px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 10px 0px;
    text-align: center;
    font-family: "noto sans", sans-serif;
}

@media(min-width:768px) {
    .text-center-h2 {
        margin-top: 6rem;
        text-align: left;
    }
}

.text-center-p {
    font-size: 14px;
    text-align: center;
    margin-bottom: 1rem;
    line-height: 1.6;
    color: #003366;
    padding: 0rem 2.2rem 1rem 2.2rem;
}

@media(min-width:768px) {
    .text-center-p {
        text-align: left;
        padding: 0rem 0rem 0rem 0rem;
    }
}

.text-center-p2 {
    font-family: "noto sans", sans-serif;
    color: #003366;
    font-size: 14px;
    text-align: center;
    padding: 1rem;
    font-weight: 200;
}

@media(min-width:768px) {
    .text-center-p2 {
        text-align: left;
        padding: 0rem 0rem 0rem 0rem;
    }
}

.text-center-p3 {
    font-size: 14px;
    color: #003366;
    text-align: center;
    padding: 1rem 0rem 0rem 0rem;
    margin-bottom: 0;
}

@media(min-width:768px) {
    .text-center-p3 {
        text-align: left;
        padding: 0rem 0rem 0rem 0rem;
    }
}

.txt-ctr-p4 {
    font-size: 14px;
    color: #003366;
    text-align: center;
    padding: 0rem 1rem 0rem 1rem;
    font-family: "noto sans", sans-serif;
    margin-bottom: 0;
    font-weight: 200;
}

@media(min-width:768px) {
    .txt-ctr-p4 {
        text-align: left;
        padding: 0rem 0rem 0rem 0rem;
    }
}

@media(min-width: 768px) {

    .hub-img1 {
        padding-left: 2.5rem !important;

    }
}

.text-center-ff-h2 {
    background-color: #003366;
    font-size: 23px;
    text-align: center;
    margin: 2rem 0 1rem 0;
    color: #FF6F61;
    padding: 2rem;
}

@media(min-width:768px) {
    .text-center-ff-h2 {
        width: 95%;
        margin: auto;
    }
}

.funfacts-img {
    padding: 2rem 2rem 2rem 2rem;
}

.funfacts {
    color: rgba(0, 184, 217, 1);
    font-size: 14px;
    font-family: "unbounded", sans-serif;
    margin: 0rem 2rem 1rem 2rem;
}

@media(min-width:768px) {
    .funfacts {
        width: 50%;
    }
}

.funfacts li {
    margin: 0rem 2rem 1rem 2rem;
}

/* CHANGE: Renamed/Targeted to .image-container for better specificity; added relative positioning and overflow to contain the image visibly. */
.image-container {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    /* Aligns image to top of text column. */
}

.image-container img {
    width: 764px;
    height: 535px;
    position: relative;
    /* CHANGE: From absolute to relative for visibility/side-by-side. Removed top/left offsets. */
    border-radius: 5px;
    object-fit: cover;
}

/* form styling starts here  */
.blue-background {
    background: #003366b3;
    padding: 2rem 2rem 0rem 2rem;
}

.blue-background h2 {
    color: #ffffff;
    /* CHANGE: Set to black from #0056b3. */
    text-align: center;
    margin: 1rem 0rem 1.5rem 0rem;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
        "wdth" 87.5;
    font-size: 1.5rem;
}
@media(min-width:768px){
    form{
    width: 70%;
    margin: auto;
    }
}
.form-control {
    border-radius: 6px;
    border-color: #000000;
}

input.form-control {
    width: 50%;
    margin: auto;
}

@media(min-width:768px) {
    input.form-control {
        width: 20%;
        margin: 0;
    }
}

textarea.form-control {
    height: 15rem;
    margin: auto;
}

@media(min-width:768px) {
    textarea.form-control {
        margin: 0;
    }
}

.btn-submit {
    background-color: #003366;
    color: #ffffff;
}

/* discussion board styles */
.db-background {
    background-color: #ffffff;
    margin: .2rem .2rem 0rem .2rem;
    padding: 1.5rem;
}

@media(min-width:768px) {
    .db-background figure {
        padding: 1rem 0rem 1rem 2rem;
    }
}

@media(min-width:768px) {
    .db-background img {
        height: 67px;
        width: 67px;
    }
}

@media(min-width:768px) {
    .db-background div {
        width: 50%;
        padding: 2rem 0rem 3.5rem 3.5rem;
        height: 10rem;
    }
}

.db-border {
    border-radius: 20px 20px 0px 0px;
}

/* form styling ends right here */

/* start of the about us styling */
.about-us-pg {
    padding: 1rem 0rem 0rem 0rem;
}

@media(min-width:768px) {
    .about-us-pg {
        padding: 1.8rem 0rem 0rem 0rem;
    }
}

.about-us-h1 {
    background-image: url('images/edited-about-us-pg/about-us-bg.jpg');
    /* CHANGE: Replace with your image path. */
    background-size: cover;
    /* Fills the h1 area completely. */
    background-position: center;
    /* Centers the image. */
    background-repeat: no-repeat;
    padding: 1rem;
    /* Adds space around text so background image shows more. Adjust for size. */
    color: #003366;
    /* Makes text visible over the image. */
    margin: .2rem auto;
    /* Adds vertical spacing. */
    text-align: center;
    width: 95%;
    font-size: 20px;
}

@media(min-width:768px) {
    .about-us-h1 {
        padding: 3rem;
        font-size: 36px;
        width: 85%;
    }
}

.about-us-p {
    text-align: center;
    color: #003366;
    margin: 1.8rem;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 87.5;
}

@media(min-width:768px) {
    .about-us-p {
        font-size: 20px;
    }
}

.about-us-h2 {
    background-image: url('images/edited-about-us-pg/our-mission-bg.jpg');
    /* CHANGE: Replace with your image path. */
    background-size: cover;
    /* Fills the h1 area completely. */
    background-position: center;
    /* Centers the image. */
    background-repeat: no-repeat;
    padding: 1rem;
    /* Adds space around text so background image shows more. Adjust for size. */
    color: #003366;
    /* Makes text visible over the image. */
    margin: .2rem auto;
    /* Adds vertical spacing. */
    text-align: center;
    width: 95%;
    font-size: 20px;
}

@media(min-width:768px) {
    .about-us-h2 {
        padding: 3rem;
        font-size: 36px;
        width: 85%;
    }
}

.aboutus-img {
    padding: 1rem 1rem 1rem 1rem;
}

@media(min-width: 768px) {
    .aboutus-parent {
        width: 80%;
        margin: auto;
    }
}
.bluebg-aboutuspgonly{
    padding-bottom: 8rem;
    padding-top: 3rem;
}


/* end of about us styling */
/* beginging of community page styling */
.cmty-pg-h1 {
    background-image: url('images/edited-community-pg/community-bg.jpg');
    background-size: cover;
    /* Fills the h1 area completely. */
    background-position: center;
    /* Centers the image. */
    background-repeat: no-repeat;
    padding: 4rem;
    /* Adds space around text so background image shows more. Adjust for size. */
    color: #003366;
    /* Makes text visible over the image. */
    margin: 0rem 0rem;
    /* Adds vertical spacing. */
    text-align: center;
    margin-bottom: 5%;
}

.cmty-pg-h2 {
    text-align: center;
    margin-bottom: 4%;
    font-family: "Noto Sans", sans-serif;
    color: #003366;
    font-weight: bold;
}

.cmty-pg-h3 {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
        "wdth" 87.5;
    color: #003366;

}

@media (min-width:768px) {
    .cmty-pg-h3 {
        width: 562px;
        margin: 1rem auto;
    }

    .cmty-pg-p {
        width: 600px;
        margin: auto;
    }
}

.cmty-pg-p {
    margin: 1.5rem 0;
    font-size: small;
    color: #003366;
}

h5 {
    text-align: center;
    color: #003366;
}

.cmty-pgh3 {
    color: #2ECC71;
}
/* footer styling */
footer {
    background-color: #003366;
    padding-top: 2rem;
}
@media(min-width:768px){
    footer{
        padding-top: 10rem;
        padding-left: 2rem;
    }
}

footer p {
    color: white;
    text-align: center;
    font-family: "noto sans", sans-serif;
}

.footer-p {
    text-align: center;
    font-family: "noto sans", sans-serif;
    margin-bottom: 0;
}

footer span {
    color: rgba(0, 184, 217, 1);
}

.contact-section {
    text-align: center;
    font-size: 16Px;
    margin: 0rem 0rem 8rem 0rem;
}
@media(min-width:768px){
    .contact-section{
        text-align: left;
        margin-bottom: 0rem;
    }
}