/* Site-wide gradient background */
body {
    background: linear-gradient(to bottom, #827bff 0%, #827bff 50%, #6C63FF 100%);
    background-attachment: fixed;
    min-height: 100vh;
}


/* CSS Variables */
:root {
    --primary-font: Rubik, sans-serif;
    --secondary-font: Noto Sans, sans-serif;
    --primary-color: #6C63FF;
    --secondary-color: #36344a;
    --secondary-color-highlight: #2e2c3e;
    --secondary-color-text: #36344a;
    --highlight-color: #bb485f;
    --highlight-color1: #a33d52;
    --highlight-color-light: #827bff;
}

/* Hero Styles */
.hero {
    padding: 0 15px;
    max-width: 1200px;
    margin: 0 auto;
}

#hero-title {
    font-size: 5rem;
    font-weight: bold;
    font-family: var(--primary-font);
    color: var(--primary-color);
    text-shadow: 2px 2px 4px #000000;
}

#get-help {
    padding-left: 20px;
}


#btn-111 {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 2px 2px 4px #000000;
}

#btn-111:hover {
    background-color: var(--highlight-color-light);
    border-color: var(--highlight-color-light);
    box-shadow: none;
    color: #36344a;
}

.btn-modal {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 2px 2px 4px #000000;
    max-width: fit-content;
}

.btn-modal:hover {
    background-color: var(--highlight-color-light);
    border-color: var(--highlight-color-light);
    box-shadow: none;
    max-width: fit-content;
}

#btn-999 {
    background-color: var(--highlight-color);
    border-color: var(--highlight-color);
    color: white;
    box-shadow: 2px 2px 4px #000000;
}

#btn-999:hover {
    background-color: var(--highlight-color1);
    border-color: var(--highlight-color1);
    box-shadow: none;
    color: #36344a;

}

#health-symbol h1 {
    font-size: 7rem;
    font-weight: bold;
    color: var(--primary-color);
    text-shadow: 2px 2px 4px #000000;
}

/* Resources Button Styles */
.resources-btn {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
    box-shadow: 2px 2px 4px #000000;
}

.resources-btn:hover {
    background-color: var(--secondary-color-highlight);
    border-color: var(--secondary-color-highlight);
    box-shadow: none;
    color: white;
}


/* Main Layout Styles */
.card {
    box-shadow: 2px 2px 4px #000000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--primary-font);
    color: var(--secondary-color);
    margin-bottom: 20px;

}

p {
    font-family: var(--secondary-font);
    color: var(--secondary-color-text);
    line-height: 1.6;
}

main {
    padding: 40px 15px;
    max-width: 1200px;
    margin: 0 auto;
}

main section {
    margin-bottom: 40px;
}

/* Card image standardization for main content sections only */
main .card-img {
    height: 200px;
    object-fit: cover;
    object-position: center;
}

/* Specific styling for MyMind section */
#mymind .card-img {
    height: 200px;
    object-fit: cover;
    object-position: center;
}

/*footer styles */
footer a {
    color: var(--secondary-color);
    text-decoration: underline;
}

footer a:hover {
    color: var(--secondary-color-highlight);
    text-decoration: underline;
}

/* Responsive container alignment */
@media (max-width: 320px) {
    .hero,
    main {
        padding-left: 15px;
        padding-right: 15px;
    
    }
    #hero-title {
        font-size: 2rem;
    }

}
@media (min-width: 576px) {

    .hero,
    main {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 768px) {

    .hero,
    main {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Standardize card images in main content sections only */
    main .card-img {
        height: 250px;
        object-fit: cover;
        object-position: center;
    }

    #myhealth .card-body {
        min-height: 300px;
    }

    #mymind .card-img {
        height: 250px;
        object-fit: cover;
        object-position: center;
    }

    #mymind .card-body {
        min-height: 370px;
    }

    #myfriends .card-body {
        min-height: 245px;
    }

    #mycare .card-body {
        min-height: 320px;
    }
}

@media (min-width: 992px) {

    .hero,
    main {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 1024px) {

    .hero,
    main {
        padding-left: 25px;
        padding-right: 25px;
    }
    #hero-title {
        padding-left: 28px;
        padding-right: 28px;
    }

}
@media (min-width: 1200px) {

    .hero,
    main {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 1400px) {

    .hero,
    main {
        padding-left: 25px;
        padding-right: 25px;
    }
    #hero-title {
        padding-left: 28px;
        padding-right: 28px;
    }

}

/* Social Links Styling */
.social-links a {
    color: white;
    font-size: 1.5rem;
    margin: 0 15px;
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: "Font Awesome 6 Brands";
    display: inline-block;
    width: auto;
    height: auto;
}

.social-links a:hover {
    color: var(--highlight-color);
}

.social-links i {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: "Font Awesome 6 Brands" !important;
}

/* Hide any potential text content in social links */
.social-links a::before,
.social-links a::after {
    content: none !important;
}

.social-links a {
    overflow: hidden;
    text-indent: 0;
    font-size: 0; /* Hide any text */
}

.social-links a i {
    font-size: 1.5rem; /* Restore icon size */
}

/* Ensure only Font Awesome icons show */
.social-links a i::before {
    font-family: "Font Awesome 6 Brands" !important;
}

/* grid visualisation CSS for testing */

/* .container,
.row {
    border: 2px solid black;
}

.col-12 {
    border: 2px solid white;
    background-color: lightgray;
} */