/* Custom Properties */

:root {
    --fw-reg: 300;
    --fw-bold: 900;
    --clr-light: #FFFFFF;
    --clr-body-light: #e8f0f7;
    --clr-dark: black;
    --clr-dark-light: rgb(60, 58, 58); 
    --clr-accent: #00BF63; 
    --clr-accent-blue: #4686DB;
    --clr-accent-yellow: #fcd423; 
    --clr-accent-red: #EE6464;
    --fs-h1: 2.5rem;
    --fs-h2: 2rem;
    --fs-h3: 1.75rem;
    --fs-h4: 1.25rem;
    --fs-body: 1rem;
    --progress: 0;
    }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 0.7em;
    height: 0.7em;    
}

::-webkit-scrollbar-track {
    background: var(--clr-accent-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--clr-dark-light);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--clr-accent);
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

/* Base Styles */

body {
    background-color: var(--clr-body-light) !important;
    padding-top: 90px;
}

/* Header Styles */

.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.top-bar {
    background-color: var(--clr-accent);
}

.top-bar_content {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: end;
    column-gap: 20px;
    height: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.icon {
    margin-right: 3px;
    color: rgba(255, 255, 255, 0.75);
}

.bottom-bar {
    background-color: var(--clr-light);
    height: 60px;
}

.bottom-bar_content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px 30px;
}

.top-bar, .bottom-bar {
    transition: transform 0.3s ease; /* Adjust the duration and easing as needed */
}

.logo {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.logo_img {
    height: 50px;
}

.nav {
    transition: all 0.3s ease-in-out;
    z-index: 1000;
}

.nav_list {
    display: flex;
    column-gap: 40px;
    align-items: center; /* Align items vertically */
    margin: 0;
}

.nav_link {
    color: var(--clr-dark);
    transition: all 0.2s;
}

.nav_link:hover, 
.nav_link:focus {
    color: var(--clr-accent);
    font-weight: var(--fw-bold);
}

.btn {
color: #fff;
background-color: var(--clr-accent);
padding: 8px 20px;
border-radius: 1000px;
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
transition: all 0.2s;
}

.btn:hover {
    background-color: var(--clr-accent-yellow);
    color: var(--clr-light);
}

.hamburger {
    display: none;
}

.bar {
    height: 2px;
    width: 27px;
    background-color: var(--clr-dark);
    margin: 5px 0;
    opacity: 0.8;
    transition: all 0.3s ease-in-out;
}

/* For JS Animation */

.nav-open {
    transform: translateX(0%) !important;
}

.hamburger-open .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger-open .bar:nth-child(2) {
    opacity: 0;
}

.hamburger-open .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/*Drop-down Bootstrap Override*/
.dropdown-menu {
    border: none;
    position: absolute; /* Ensure it is positioned absolutely */
    top: 100%; /* Aligns the top of the dropdown with the bottom of the navbar */
    left: 0; /* Adjust if needed */
    margin-top: 1em; /* Fine-tune spacing if needed */
}

.dropdown-menu > .dropdown-item {
    color: var(--clr-dark);
}

.dropdown-menu > .dropdown-item:hover, 
.dropdown-menu > .dropdown-item:focus, 
.dropdown-menu > .active > .dropdown-item:hover {
    background-color: var(--clr-accent);
}

.dropdown-menu > .dropdown-item:hover, 
.dropdown-menu > .dropdown-item:focus {
    color: var(--clr-light);
}

/* Modal Styling */
.modal-title {
    font-weight: var(--fw-bold);
}

.modal-body span {
    font-weight: var(--fw-bold);
}

.physician-form {
    background: var(--clr-accent);
    font-weight: var(--fw-bold);
    transition: all 0.3s ease;
}

.physician-form:hover {
    background: var(--clr-accent-yellow);
    font-weight: var(--fw-bold);
}

.ah-form {
    background: var(--clr-accent-yellow);
    font-weight: var(--fw-bold);
    transition: all 0.3s ease;
}

.ah-form:hover {
    background: #d9b618;
    font-weight: var(--fw-bold);
}

.patient-form {
    background: var(--clr-accent-red);
    font-weight: var(--fw-bold);
}

.patient-form:hover {
    background: #af0f0f;
    font-weight: var(--fw-bold);
}

/* Media Queries */
@media (max-width: 992px) {

    .nav_list {
        padding-top: 30px; /* Add some space below the top bar */
      }
    
      .dropdown-menu {
        display: none;
      }
    
      .dropdown.show .dropdown-menu {
        display: block;
        position: static;
        transform: none;
        box-shadow: none;
        background-color: var(--clr-light);
        margin-top: 0.5em;
      }

    .nav {
        position: fixed;
        top: 50px;
        left: 0;
        background-color: var(--clr-light);
        width: 100%;
        padding: 10px 0 25px;
        transform: translateX(-100%);
        justify-content: center;
        z-index: -99;
    }

    .nav_list {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }

    .nav_link,
    .dropdown-item {
        font-size: 14px;
        color: var(--clr-dark);
    }

    .btn {
        font-size: 11px;
        padding: 7px 17px;
    }

    .hamburger {
        display: block;
    }
}

@media (max-width: 360px) {
    .top-bar_content {
        font-size: 10px;
        justify-content: center;
    }

    .bottom-bar_content {
        padding: 5px 20px;
    }

    .modal-body p {
        font-size: calc(var(--fs-body) * 0.8);
    }
}

/* Block1 - Products */
.block1-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    padding: 3em 6em;
    align-items: center;
}

.block1-content h1 {
    font-size: var(--fs-h1);
    color: #359633;
    font-weight: var(--fw-bold);
}

.block1-content h2 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    color: #359633;
    padding-bottom: 0.5em;
}

.block1-content p {
    font-size: var(--fs-body);
    color: var(--clr-dark);
    max-width: 75ch;
}

.block1-body2 {
    color: var(--clr-dark);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    margin-top: 3em;
}

.block1-container .item {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
}

/* Adjust image size */
.d-block {
    width: 100%; /* Make image responsive by default */
    height: auto; /* Maintain aspect ratio */
}

/* Limit the size only for the drugstores image */
.drugstores {
    max-width: 400px; /* Set a max width for drugstore image */
    width: 100%; /* Keep it responsive */
    height: auto; /* Maintain aspect ratio */
}

/* Media Queries */
@media (max-width: 1200px) {
    .block1-container {
        padding: 5em 2em;
    }

    .block1-container h1 {
        font-size: var(--fs-h2); /* Adjust for smaller screens */
    }

}

@media (max-width: 992px) {
    .block1-container {
        flex-direction: column;
        padding: 2em; /* Adjust padding for smaller screens */
    }

    .block1-container .item  {
        width: 100%;
        padding: 10px 0; /* Adjust padding between items */
    }

    /* Specific image size adjustment for tablet view */
    .block1-products-img {
        max-width: 80%; /* Adjust the size as needed */
        margin: 0 auto; /* Center image if needed */
    }

    .block1-content {
        padding-top: 2em;
    }

    .block1-container h1 {
        font-size: var(--fs-h3); /* Adjust for smaller screens */
    }

    .block1-content p {
        font-size: 14px; /* Adjust font size */
    }
}

@media (max-width: 576px) {
    .block1-content .block1-body2 {
        font-size: calc(var(--fs-h4) * 0.6);
        text-align: center;
    }
}

@media (max-width: 360px) {
    .block1-container h2 {
        font-size: calc(var(--fs-h4) * 0.8); /* Adjust for smaller screens */
    }

    .block1-content p {
        font-size: calc(var(--fs-body)*0.7); /* Adjust font size */
    }

    .block1-body2 {
        text-align: center;
    }

    .drugstores {
        display: block; /* Ensure it's treated as a block-level element */
        margin: 0 auto; /* Center the image */
    }
}

/* Benefits */
.block2-container {
    padding: 1em;
    text-align: center;
    width: 100%;
    align-items: center;
    padding-bottom: 8em; /* Default padding bottom */
    height: auto;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    justify-content: center;
    padding: 0 7em;
}

.card {
    background-color: transparent;
    border: none; /* Remove any border */
}

/*.block2-container button {
    height: 45px;
    width: 60%;
    max-width: 250px;
    margin: 1em 0;
    border-radius: 20px;
    color: var(--clr-light);
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    background: var(--clr-accent-blue);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none; Remove any border
    outline: none; Remove focus outline
}

.block2-container button:hover {
    background: #487abc;
    color: var(--clr-light);
    transform: scale(.95) !important;
} */

/* Media Queries */

@media (max-width: 1200px) {
    .block2-container {
        padding: 1em;
        padding-bottom: 6em; /* Reduce padding bottom */
    }

    .grid-container {
        padding: 0 3em;
    }
}

@media (max-width: 992px) {
    .grid-container {
        padding: 0 1em;
    }

    .block2-container button {
        width: 80%; /* Adjust button width */
        font-size: 14px; /* Scale down font size */
    }
    
    .block2-container {
        padding-bottom: 4em; /* Further reduce padding bottom */
    }
}

@media (max-width: 576px) {
    .block2-container {
        padding: 0 1em 3em 1em;
        padding-bottom: 3em; /* Maintain consistent bottom padding */
        align-items: center;
    }
}


/* Block3 - The Power of Plant-based Meal Replacement */
.block3-container {
    width: 100%;
    height: auto; /* Adjust height to content */
    text-align: center;
    padding: 10em 6em; /* Adjust padding as needed */
    background: linear-gradient(to bottom, #359633, #359633, #EDBF8C);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.block3-container h1 {
    font-weight: var(--fw-bold);
    margin-bottom: 1em;
    color: var(--clr-light);
    font-size: var(--fs-h1);
}

.item-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center align the items horizontally */
    gap: 20px; /* Adds space between items */
    width: 100%;
}

.item-wrapper .item {
    flex: 1;
    min-width: 280px; /* Ensure items don't get too small */
    max-width: 500px; /* Cap the width to keep items aligned */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.item-wrapper .item p {
    font-size: var(--fs-body);
    color: var(--clr-light);
    width: 100%; /* Ensure the text width is responsive */
    max-width: 40ch; /* Limit the character count width */
}

.block3-container button {
    height: 45px;
    width: 60%;
    max-width: 250px;
    margin: 1em 0;
    border-radius: 20px;
    color: #359633;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    background: var(--clr-light);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none; /* Remove any border */
    outline: none; /* Remove focus outline */
}

.block3-container button:hover {
    background: var(--clr-accent-yellow); /* Use a defined variable */
    color: var(--clr-light);
    transform: scale(.95) !important;
}

/* Media Queries */
/* Larger Tablets and Small Desktops */
@media (max-width: 1200px) {
    .block3-container {
        padding: 10em 3em; /* Adjust top padding */
    }

    .block3-content button {
        width: 50%; /* Adjust button width */
    }

    .block3-container h1 {
        font-size: var(--fs-h2); /* Adjust for smaller screens */
    }
}

/* Tablets and Large Mobile Phones */
@media (max-width: 880px) {
    .block3-container {
        padding: 8em 2em; /* Adjust padding */
    }

    .item-wrapper {
        flex-direction: column; /* Stack items vertically */
        align-items: center;
    }

    .item-wrapper .item {
        width: 100%;
        padding: 10px 0; /* Adjust padding between items */
    }

    .block3-content {
        padding-top: 2em;
    }

    .block3-container h1 {
        font-size: var(--fs-h3); /* Adjust for smaller screens */
    }

    .block3-content p {
        font-size: 14px; /* Adjust font size */
    }

    .block3-content button {
        width: 50%; /* Adjust button width */
        font-size: 0.9em; /* Scale down font size */
    }
}

/* Small Mobile Phones */
@media (max-width: 576px) {
    .block3-container {
        padding: 6em 1.5em; /* Reduce padding */
    }

    .block3-container h1 {
        font-size: var(--fs-h4); /* Adjust for smaller screens */
        margin-bottom: 0.5em;
    }

    .item-wrapper .item .block3-content p {
        max-width: 35ch; /* Slightly narrower text for readability */
    }

    .block3-content button {
        width: 70%; /* Adjust button width */
        font-size: 0.8em; /* Adjust font size */
    }
}

/* Extra Small Mobile Phones (360px and below) */
@media (max-width: 360px) {
    .block3-container {
        padding: 5em 1em; /* Reduce padding on left and right */
    }

    .block3-container h1 {
        font-size: var(--fs-h4); /* Adjust for smaller screens */
        margin-bottom: 0.5em;
    }

    .item-wrapper .item .block3-content p {
        font-size: calc(var(--fs-body)*0.8); 
    }

    .block3-content button {
        width: 80%; /* Adjust button width */
        font-size: 0.75em; /* Adjust font size */
    }
}

/* Carousel */
.carousel-indicators,
.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
    filter: invert(100%);
}

/* Research Carousel / Read More */
.block5-container {
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5em 1.5em;
}

.block5-container h1 {
    text-align: center;
    font-weight: var(--fw-bold);
}

.block5-container h1 span {
    color: #359633;
}

.card-wrapper {
    max-width: 1100px;
    margin: 0 60px 35px;
    padding: 0 10px;
    overflow: hidden;
}

.card-list .card-item {
    list-style: none;
}

.card-list .card-item .card-link {
    user-select: none;
    display: block;
    background: #fff;
    padding: 1.5em;
    border-radius: 12px;
    text-decoration: none;
    border: 2px solid transparent;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
    transition: 0.2s ease;
}

.card-list .card-item .card-link:active {
    cursor: grabbing;
}

.card-list .card-item .card-link:hover {
    border-color: var(--clr-accent);
}

.card-list .card-link .card-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 10px;
}

.card-list .card-link .badge {
    color: var(--clr-accent);
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: var(--fw-bold);
    margin: 16px 0 18px;
    background: #c0efce;
    width: fit-content;
    border-radius: 50px;
}

/* Restrict title to a specific height and limit overflow */
.card-list .card-link .card-title {
    font-size: var(--fs-body);
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit text to 3 lines */
    -webkit-box-orient: vertical;
}

.card-list .card-link .card-button {
    height: 35px;
    width: 35px;
    color: var(--clr-accent);
    border-radius: 50%;
    background: none;
    cursor: pointer;
    border: 2px solid var(--clr-accent);
    transform: rotate(-45deg);
    transition: 0.4s ease;
}

.card-list .card-link:hover .card-button {
    color: #fff;
    background: var(--clr-accent);
}

.card-wrapper .swiper-pagination-bullet {
    height: 13px;
    width: 13px;
    opacity: 0.5;
    background: var(--clr-accent);
}

.card-wrapper .swiper-pagination-bullet-active {
    opacity: 1;
}

.card-wrapper .swiper-slide-button {
    color: var(--clr-accent);
    margin-top: -35px;
}

.swiper-slide-button {
    color: var(--clr-accent);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

@media (max-width: 1200px) {
    .block5-container h1 {
        font-size: var(--fs-h2);
    }
}
    
@media screen and (max-width: 992px) {
    .block5-container {
        padding-top: 4em;
    }

    .block5-container h1 {
        font-size: var(--fs-h3); 
    }

    .card-wrapper {
        margin: 0 10px 25px;
    }

    .swiper-slide-button {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .block5-container h1 {
        font-size: var(--fs-h4);
    }
}

/* Block6 - Video */
.block6-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    padding: 5em 6em 3em 6em;
    align-items: center;
    background: url('../Images/Products/diabplus/diabplus_bg.png') no-repeat center;
    background-size: cover;
    position: relative;
    justify-content: center;
}

.block6-content {
    background: rgba(0, 0, 0, 0.4);
    padding: 1em;
    border-radius: 10px;
}

.block6-content h1 {
    font-size: var(--fs-h1);
    color: var(--clr-light);
    font-weight: var(--fw-bold);
    padding-bottom: 24px;
}

.block6-content h1 span {
    color: #9be599;
}

.block6-content h2 {
    font-size: var(--fs-h4);
    color: var(--clr-light);
    text-shadow: 0 0 1em rgb(255, 255, 255);
    font-style: italic;
}

.block6-content h2 span {
    font-weight: var(--fw-bold);
}

.block6-container .item {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
}

/* Adjust video size */
.d-block {
    width: 100%; /* Make video responsive */
    height: auto; /* Maintain aspect ratio */
}

/* Media Queries */
@media (max-width: 1200px) {
    .block6-container {
        padding: 5em 2em;
    }

    .block6-container h1 {
        font-size: var(--fs-h2); /* Adjust for smaller screens */
    }
}

@media (max-width: 768px) {
    .block6-container {
        flex-direction: column;
        padding: 2em; /* Adjust padding for smaller screens */
    }

    .block6-container .item  {
        width: 100%;
        padding: 10px 0; /* Adjust padding between items */
    }

    /* Specific video size adjustment for tablet view */
    .block6-products-img {
        max-width: 80%; /* Adjust the size as needed */
        margin: 0 auto; /* Center video if needed */
    }

    .block6-content {
        padding-top: 2em;
    }

    .block6-container h1 {
        font-size: var(--fs-h3); /* Adjust for smaller screens */
        color: var(--clr-light);
        text-shadow: 0 0 1em rgba(0, 0, 0, 1);
    }

    .block6-content h2 {
        font-size: 14px; /* Adjust font size */
        color: var(--clr-light);
        text-shadow: 0 0 1em rgba(0, 0, 0, 1);
    }
}

@media (max-width: 360px) {
    .block6-container h2 {
        font-size: calc(var(--fs-h4) * 0.7); /* Adjust for smaller screens */
    }

    .block6-container h1 {
        font-size: calc(var(--fs-h3) * 1); /* Adjust for smaller screens */
    }

    .block6-content p {
        font-size: calc(var(--fs-body)*0.7); 
    }
}

/* Footer */
footer {
    width: 100%;
    position: relative;
    color: var(--clr-light);
    padding-top: 3em;
    font-size: 1em;
    line-height: 1.25em;
    background-color: var(--clr-accent);
}

.footer-row {
    width: 85%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2em;
}

.footer-col1 {
    flex-basis: 40%;
    padding: 0.5em;
}

.footer-col {
    flex-basis: 15%;
    padding: 0.5em;
}

.footer-logo {
    width: 300px;
    height: auto;
    margin-bottom: 1.5em;
}

.footer-title {
    margin-bottom: 1em;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
}

.footer-links {
    list-style: none;
    margin-bottom: 0.75em;
}

.footer-links-content {
    text-decoration: none;
    color: var(--clr-light);
}

.footer-links-content:hover {
    color: var(--clr-accent-light);
}

.footer-social-icons .fa-brands {
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 2em;
    line-height: 1.7em;
    color: var(--clr-accent-light);
}

.copyright {
    text-align: center;
    padding: 0.5em 0;
    background-color: var(--clr-accent);
    position: relative;
}

@media (max-width: 768px) {
    .footer-col1 {
        flex-basis: 100%;
    }
    
    .footer-col {
        flex-basis: 100%;
    }

    .copyright {
        padding-bottom: 60px;
    }
}

@media (max-width: 360px) {
    .footer-col1 p,
    .footer-links {
        font-size: 14px;
    }

    .footer-logo {
        width: 250px;
        height: auto;
    }
}