body {
    margin: 0;
    line-height: normal;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(to right, #8B0000, #D32F2F); /* Deep red to bright red */
    color: #fff;
}

:root {
    /* fonts */
    --font-plus-jakarta-sans: "Plus Jakarta Sans";
    --font-poppins: Poppins;
    /* font sizes */
    --font-size-lg: 18px;
    --font-size-base: 16px;
    /* Colors */
    --color-white: #fff;
    --color-black: #000;
    --color-mediumseagreen: #D32F2F;
    /* border radiuses */
    --br-211xl: 230px;
    --br-3xs: 10px;
}
.navbar {
    height: 80px; /* Specify the desired height */
    /* Add any other desired styling */
}
.navbar-nav {
    margin-left: auto; /* Align navigation items to the right */
}
    .navbar-nav .nav-link {
        margin-right: 65px; /* Add some spacing between navigation items */
        color: darkred; /* Specify the desired color */
        font-family: Calibri; /* Specify the desired font family */
        font-size: 20px; /* Specify the desired font size */
        font-weight: bold;
    }
.welcome-to-digital-container {
    font-size: 68px;
    font-weight: 800;
    font-family: Calibri; /* Specify the desired font family */
    display: inline-block;
    width: 685px;
    color: gray;
    margin-top: 64px;
}
.welcome-to {
    color: black;
    font-family: Calibri; /* Specify the desired font family */
}

.welcome-to-digital {
    margin-block-start: 0;
    margin-block-end: 5px;
}
.welcomeText {
  font-size: large;
  line-height: 192%;
  font-family: Calibri ;
  color: #676565;
  margin-bottom:20px;
}
.loginsignup {
    font-size: 32px; /* Increased font size */
    font-weight: bold; /* Makes it stand out */
    color: white;
    font-family: Calibri;
    letter-spacing: 1px; /* Adds a premium feel */
    text-transform: uppercase; /* Makes it more visible */
}
.loginsignup-wrapper {
    border-radius: 50px; /* More rounded for a sleek look */
    background: linear-gradient(97.65deg, #00c853, #00897b); /* Fresh, modern green */
    box-shadow: 0px 12px 25px rgba(0, 200, 83, 0.3); /* Softer shadow effect */
    width: 280px; /* Slightly wider */
    height: 80px; /* Increased height for better visibility */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out; /* Smooth transition */
    cursor: pointer; /* Makes it clear it's clickable */
}

    /* Hover Effect */
    .loginsignup-wrapper:hover {
        transform: scale(1.08); /* Slight lift effect */
        box-shadow: 0px 15px 30px rgba(0, 200, 83, 0.5); /* Glow effect */
    }

.desktop-10-child {
    border-radius: 293px 0 0 50px;
    background-color: rgba(24, 154, 216, 0.2);
    width: 644px;
    height: 637px;
}

.desktop-10-item {
    border-radius: var(--br-211xl) var(--br-211xl) var(--br-3xs) var(--br-3xs);
    background: linear-gradient(180deg, #b4fc58, #24a72e 44.58%, #0a2905);
    box-shadow: 0 10px 15px #46a34d;
    border: 20px solid white;
    box-sizing: border-box;
    width: 424px;
    height: 522px;
    margin-top: 64px;
}
.daco-3159706-1-icon {
    margin-top: 10px;
    width: 380px;
    height: 484px;
    object-fit: cover;
}
.footer {
    background: #2E2E2E; /* Dark gray */
    color: #fff;
    padding: 20px 0;
    text-align: center;
    border-top: 2px solid rgba(255, 0, 0, 0.5);
}
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.desktop-10,
.search-1-3 {
    width: 24px;
    height: 24px;
    overflow: hidden;
}

.desktop-10 {
    background-color: var(--color-white);
    width: 1440px;
    height: 878px;
}

.desktop-10-parent {
    width: 100%;
    height: 878px;
    text-align: left;
    font-size: var(--font-size-lg);
    color: var(--color-black);
    font-family: var(--font-plus-jakarta-sans);
}
.our-service,
.what-we-do {
    position: absolute;
    display: inline-block;
}

.what-we-do {
    left: calc(50% - 119px);
    font-size: 40px;
    width: 239px;
}

.our-service {
    left: calc(50% - 60px);
    color: var(--color-mediumseagreen-100);
    width: 121px;
}

.desktop-12-child,
.desktop-12-item {
    box-sizing: border-box;
}

.desktop-12-child {
    border-top: 1px solid #c4c4c4;
    width: 122px;
    height: 1px;
}

.desktop-12-item {
    border-radius: var(--br-lgi);
    background-color: var(--color-gray);
    box-shadow: 2px 5px 10px #46a34d;
    border: 1px solid var(--color-mediumseagreen-200);
    width: 250px;
    height: 247px;
}

.lorem-ipsum-dolor,
.make-appointment {
    position: absolute;
    display: inline-block;
}

.make-appointment {
    left: calc(50% - 607px);
    font-weight: 500;
    width: 169px;
}

.lorem-ipsum-dolor {
    font-size: var(--font-size-base);
    line-height: 192%;
    font-family: var(--font-poppins);
    color: var(--color-dimgray);
    width: 189px;
}

.desktop-12-inner {
    background-color: #46a34d;
    width: 92px;
    height: 84px;
}

.card {
    border-top: 2px solid #D32F2F;
    box-sizing: border-box;
    border-radius: 19px;
    background-color: gray;
    box-shadow: 2px 5px 10px #D32F2F;
    border: 1px solid rgba(70, 163, 77, 0.37);
    box-sizing: border-box;
    width: 250px;
    height: 247px;
}
.icon,
.line-div {
    position: relative;
}

.line-div {
    border-top: 2px solid #D32F2F;
    box-sizing: border-box;
    width: 76px;
    height: 2px;
}

.icon-img {
    width: 41px;
    height: 41px;
    object-fit: cover;
}

.rectangle-div {
    border-radius: var(--br-lgi);
    background-color: var(--color-gray);
    box-shadow: 2px 5px 10px #D32F2F;
    border: 1px solid var(--color-mediumseagreen-200);
    box-sizing: border-box;
    width: 250px;
    height: 247px;
}

.appointment-status {
    font-weight: 500;
    display: inline-block;
    width: 179px;
}

.desktop-12-child1 {
    background-color: var(--color-mediumseagreen-100);
    width: 92px;
    height: 84px;
}

.desktop-12-child2,
.desktop-12-child3 {
    position: absolute;
    box-sizing: border-box;
}

.desktop-12-child2 {
    border-top: 2px solid var(--color-mediumseagreen-100);
    width: 76px;
    height: 2px;
}

.desktop-12-child3 {
    border-radius: var(--br-lgi);
    background-color: var(--color-gray);
    box-shadow: 2px 5px 10px #46a34d;
    border: 1px solid var(--color-mediumseagreen-200);
    width: 250px;
    height: 247px;
}

.check-records,
.lorem-ipsum-dolor2 {
    position: absolute;
    display: inline-block;
}

.check-records {
    font-weight: 500;
    width: 138px;
}

.lorem-ipsum-dolor2 {
    top: 368px;
    left: calc(50% - 280px);
    font-size: var(--font-size-base);
    line-height: 192%;
    font-family: var(--font-poppins);
    color: var(--color-dimgray);
    width: 189px;
}

.desktop-12-child4 {
    background-color: var(--color-mediumseagreen-100);
    width: 92px;
    height: 84px;
}

.desktop-12-child5 {
    border-top: 2px solid var(--color-mediumseagreen-100);
    box-sizing: border-box;
    width: 76px;
    height: 2px;
}

.medical-record-icon {
    width: 91px;
    height: 88.48px;
    object-fit: cover;
}

.desktop-12-child6 {
    border-radius: var(--br-lgi);
    background-color: var(--color-gray);
    box-shadow: 2px 5px 10px #46a34d;
    border: 1px solid var(--color-mediumseagreen-200);
    box-sizing: border-box;
    width: 250px;
    height: 247px;
}

.lorem-ipsum-dolor3 {
    font-size: var(--font-size-base);
    line-height: 192%;
    font-family: var(--font-poppins);
    color: var(--color-dimgray);
    display: inline-block;
    width: 189px;
}

.desktop-12-child7 {
    background-color: var(--color-mediumseagreen-100);
    width: 92px;
    height: 84px;
}

.desktop-12-child8 {
    border-top: 2px solid var(--color-mediumseagreen-100);
    box-sizing: border-box;
    width: 76px;
    height: 2px;
}

.download-reports {
    font-weight: 500;
    display: inline-block;
    width: 161px;
}

.dna-icon {
    width: 91px;
    height: 91px;
    object-fit: cover;
}
.emergency-call-icon {
    position: absolute;
    top: 553px;
    left: 826px;
    width: 91px;
    height: 90.51px;
    object-fit: cover;
}
.section-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
.section-button:hover {
        background-color: #e0e0e0;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }