:root {
    --dark-green:#2D5929;
    --light-green:#6DAC67;
    --black:#030303;
    --heading-one:60px;
    --mobile-heading-one:40px;
    --text:18px;
    --mobile-text:16px;
    --banner:25px;
    --mobile-banner:20px;
    --heading-two:50px;
    --mobile-heading-two:40px;
    --tag:16px;
    --mobile-tag:14px;
    --card-heading:22px;
    --mobile-card-heading:18px;
}
*,
*::before,
*::after {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Helvetica, sans-serif

}
section,
main,
header,
footer {
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}
.wrapper {
    padding:8rem 4rem;
    width:100%;
    max-width:1440px;
}
@media (max-width:700px) {
    .wrapper {
        padding-inline:2rem;
    }
}
@media (max-width:500px) {
    .wrapper {
        padding-inline:1rem;
    }
}
h1 {
    font-size:var(--heading-one);
    color:white;
    line-height:1;
    text-align:left;
}
h2 {
    line-height:1;
    color:var(--black);
    font-size:var(--heading-two);
    text-align:left;
}
p {
    line-height:1.5;
    font-weight:300;
    font-size:var(--text);
    text-align:left;
}
@media (max-width:500px) {
    h1 {
        font-size:var(--mobile-heading-one);
    }
    h2 {
        font-size:var(--mobile-heading-two);
    }
    p {
        font-size:var(--mboile-text);
    }
}
img {
    width:100%;
}

button {
    cursor:pointer;
    padding:0.75rem 2rem;
    background-color:var(--dark-green);
    color:white;
    font-weight:700;
    font-size:var(--text);
    transition:500ms;
    border:2px solid var(--dark-green);
}
button:hover {
    background-color: transparent;
    transition:500ms;
    color:var(--dark-green);
    border:2px solid var(--dark-green);
}
header button:hover {
    color:white;
}
a {
    color:white;
    text-decoration: none;
}
ul {
    list-style:none;
    display:flex;
    align-items: center;
    gap:2rem;
}
.logo img {
    width:75px;
}
.tag {
    display:flex;
    align-items: center;
    gap:0.5rem;
    font-weight:500;
}
.tag img {
    width:30px;
}
.tag span {
    display:flex;
    align-items: center;
}

.row {
    flex-direction:row;
}
.column {
    flex-direction:column;
}
.background {
    opacity:0.1;
}
section,
main {
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
}
.banner {
    width:100%;
    font-family: 'League Gothic', sans-serif;
    color:white;
    background-color:var(--black);
}
.banner > * {
    transition:500ms;
}
.banner .wrapper {
    display:flex;
    align-items: center;
    justify-content: center;
    padding-block:1rem;
}
/****** Dropdown ******/

.dropdown {
    position:relative !important;
    display:none;
    z-index:1000 !important;
}
.dropdown-menu {
    position:absolute;
    right:0;
    top:calc(100% + 0.5rem);
    padding:1.5rem;
    background-color:#262626;
    box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.1);
    display:grid;
    grid-template-columns:1fr 1fr;
    width:max-content;
    opacity:0;
    transform:translateY(-1rem);
    transition:opacity 0.5s, transform 0.5s;
    pointer-events:none;
    gap:2rem;
    border-radius:0.5rem;
   
}





.dropdown-heading > a {
    font-weight:700 !important;
}
.dropdown-links {
    display:flex;
    flex-direction: column;
    gap:0.5rem;
}
.dropdown-links a {
    font-weight:300 !important;
}
.div {
    display:flex;
    flex-direction: column;
    gap:0.5rem;
}
.menu {
    width:50px;
    display:none;
    cursor:pointer;
}
.dropdown.active > .link + .dropdown-menu {
    opacity:1;
    transform:translateY(0);
    pointer-events:all;
    transition:opacity 0.5s, transform 0.5s;

}
.menu + .dropdown-menu {
    padding-block:2rem;
    display:none;
}
.dropdown-heading > p {
    font-weight:700 !important;
}
.dropdown > a {
    font-weight:300 !important;
}
@media (max-width:1150px) {
    nav ul {
        display:none;
    }
    .dropdown {
        display:block;
    }
    .menu + .dropdown-menu {
        padding-block:2rem;
        display:grid;
    }
    .menu {
        display:block;
    }
    nav {
        display:flex;
        justify-content: flex-end;
    }
}
@media (max-width:500px) {
    .header-wrapper {
        padding-inline:1rem;
    }
    .dropdown-menu {
        grid-template-columns:1fr;
    }
}
/* Header */
header {
    position:absolute;
    z-index:2;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.header-wrapper {
    padding:1rem 4rem;
    width:100%;
    max-width:1440px;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width:700px) {
    .header-wrapper {
        padding-inline:2rem;
    }
}
@media (max-width:500px) {
    .header-wrapper {
        padding-inline:1rem;
    }
}
nav ul li {
    color:white;
    font-weight:700;
}
.logo {
    display:flex;
    align-items: center;
    justify-content: center;
}
nav {
    display:flex;
    align-items: center;
    justify-content: flex-end;
    gap:2rem;
}

/* Main */
main {
    background-image: linear-gradient(#030303a6, #030303a6), url(../new-service/WhatsApp_Image_2023-06-02_at_09_04_03-transformed1.png);
    background-position:left;
}
main .wrapper {
    display:flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
    gap:2rem;
    min-height:700px;
    padding-bottom:4rem;
}
main h1 {
    max-width:20ch;
}
main p {
    max-width:60ch;
    color:white;
}
@media (max-width:1150px) {
    nav {
        display:none;
    }
}
@media (max-width:765px) {
    main h1 {
        font-size:50px;
    }
    
}
@media (max-width:579px) {
    main h1 {
        font-size:45px;
    }
  
}
/* Gallery */

.gallery-section .wrapper {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:4rem;
}
.gallery-grid {
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:1rem;
}
.gallery-grid-left {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:1rem;
}
.why-top {
    display:flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap:4rem;
}
.banner p {
    font-family: 'League Gothic', sans-serif !important;
    font-size:var(--banner);
    letter-spacing: 0.6rem;
    line-height:1.2;
}
.banner .wrapper {
    padding-inline:0;
}
@media (max-width:1150px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width:600px) {
    .gallery-grid-left {
        grid-template-columns: 1fr;
    }
}
/* CTA */
.cta-section .wrapper {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:2rem;
    padding-block:12rem;
}
.cta-section h2 {
    font-size:var(--heading-one);
    max-width:20ch;
    text-align:center;
}
@media (max-width:500px) {
    .cta-section h2 {
        font-size:var(--mobile-heading-one)
    }
}
/* Footer */

footer img {
    width:100px;
}
footer .wrapper {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:2rem;
    padding-block:2rem;
}
footer .logo {
    display:flex;
    align-items: center;
}
.footer-top {
    width:100%;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.footer-top ul {
    display:flex;
    align-items: center;
    gap:2rem;
    justify-content: flex-end;
}
.footer-bottom {
    display:flex;
    align-items: flex-end;
    justify-content: space-between;
    width:100%;
    border-top:1px solid black;
    padding-top:4rem;
}
footer a,
footer p {
    color:black;
}
.footer-bottom a {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:0.5rem;
}
footer p {
    font-size:16px;
}


@media (max-width:700px) {
    footer .wrapper {
        padding-inline:2rem;
    }
    .footer-top,
    .footer-bottom {
        flex-direction:column;
        gap:4rem;
        justify-content: center;
        align-items: center;
    }
    .footer-bottom a {
        align-items: center;
        justify-content: center;
    }
    .footer-top ul {
        flex-direction: column;
        align-items: center;
    }
}
@media (max-width:600px) {
    .doctor-section h2 {
        font-size:var(--mobile-heading-twp);
    }
    .doctor-list-item p {
        font-weight:700;
        font-size:var(--mobile-card-heading);
    }
    
}
@media (max-width:500px) {
    footer .wrapper {
        padding-inline:1rem;
    }
}

/* test */

.test-grid {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    width:100%;
    gap:2rem;
}
.test-section .wrapper {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:8rem;
}
.test-card {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:2rem;
    padding:2rem;
}
.test-card p:nth-of-type(1) {
    font-weight:700;
    font-size:var(--card-heading);
    line-height:1;
}
.test-card p:nth-of-type(2) {
    font-weight:300;
    font-size:var(--text);
    line-height:1.5;
}




@media (max-width:1150px) {
    .test-grid {
        grid-template-columns: 1fr 1fr;
    }
    .why-top {
        flex-direction: column;
        align-items: flex-start;
        gap:0;
    }
}
@media (max-width:600px) {
    .test-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width:500px) {
    .test-card p:nth-of-type(1) {
        font-size:var(--mobile-card-heading);
    }
    .test-card p:nth-of-type(2) {
        font-size:var(--mobile-text);
    }
}

/* Job */

.job-section {
    background-color:var(--light-green);
}

.job-section .wrapper {
    display:flex;
    align-items: center;
    gap:4rem;
    padding-bottom:6rem;
}
.job-grid {
    margin-top:6rem;
}
.job-left,
.job-right {
    width:50%;
}
.job-right {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:2rem;
}
.job-grid .wrapper {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:1rem;
    padding-top:0;
}
.job-section h2,
.job-section p {
    color:white;
}

.job-section button {
    background-color:white;
    color:var(--light-green);
    border:2px solid white;
}
.job-section button:hover {
    background-color:transparent;
    color:white;
    border:2px solid white;
}
@media (max-width:1150px) {
    .job-section .wrapper {
        flex-direction: column;
    }
    .job-left,
    .job-right {
        width:100%;
    }
    .job-grid .wrapper {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width:600px) {
    .job-grid .wrapper {
        grid-template-columns: 1fr;
    }
}

/* Service */

.service-section .wrapper {
    display:flex;
    align-items: center;
    gap:4rem;
}

.service-right {
    width:50%;
}
.service-left {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    width:50%;
    gap:2rem;
}
.service-left img {
    width:30px;
}

.apex-list {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:2rem;
}
.apex-list-item {
    display:flex;
    align-items: center;
    gap:2rem;
}
.apex-list-item p {
    line-height:1;
    font-size:var(--text);
    font-weight:700;
}
.additional {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:0.5rem;
}
.additional p {
    font-size:14px;
    line-height:1;
}
@media (max-width:1150px) {
    .service-section .wrapper {
        flex-direction: column;
    }
    .service-left,
    .service-right {
        width:100%;
    }
}
@media (max-width:600px) {
    .job-grid .wrapper {
        grid-template-columns: 1fr;
    }
}
@media (max-width:500px) {
    .apex-list p {
        font-size:var(--mobile-text);
    }
    .additional p {
        font-size:12px;
    }
}

/* Short */
.short-section .wrapper {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:2rem;
}
.short-section h2 {
    max-width:25ch;
}
.short-section p {
    max-width:60ch;
}

.service-section {
    position:relative;
}
/* Comment */

.abs {
    position:absolute;
    bottom:0;
    width:70%;
    opacity:0.2;
    z-index:-1;
    right:0;

}
@media (max-width:700px) {
    .abs {
        width:100%;
    }
}
.scroller {
    width:25px;
    transition:500ms;
    animation: pulse 2500ms forwards ease infinite;
}
@keyframes pulse {
    0% {
        scale:1;
    }
    50% {
        scale:1.2;
    }
    100% {
        scale:1;
    }
}

main button {
    background-color:transparent !important;
    border:none;
    display:flex;
    flex-direction: row-reverse;
    align-items: center;
    gap:1rem;
    padding-left:0;
    margin-top:-1rem !important;
    padding-top:0;
}
main button:hover .scroller {
    transition:500ms;
}

main button:hover {
    background-color:transparent !important;
    border:none;
    display:flex;
    flex-direction: row-reverse;
    align-items: center;
    gap:1rem;
    padding-left:0;
    color:white;
    transition:500ms;
}