:root {
    --main:rgb(227, 216, 216);
    --darker:rgb(56, 64, 73); 
    /* rgb(128, 56, 56) */
    --nice: rgb(225, 130, 124);
    --white: white; 
    --black-text: black; 
    --other: rgba(196, 119, 119, 0.8);
    --green: rgb(106, 142, 127);

    --main-transparency: rgba(227, 216, 216, 0.83);
    --charcoal-gray: rgb(56, 64, 73); /* Charcoal Gray - navbar background, hover button, body text */
    --light-gray: rgb(245, 245, 245); /* Light Gray - a, button*/
    --hero-image-transparency: rgba(245, 245, 245, 0.5); /* Light Gray hero background text transparency */
    --soft-pink: rgb(227, 216, 216); /* Soft Pink */
    /* One or the other */
    --teal-blue:  rgb(98, 168, 181); /* Teal Blue - a hover, button */ 
    --peach: rgb(252, 169, 178); /* Peach -a hover, button */
}


ul.tick li:before {
    content: '✓ '; 
} 

.border-peach {
    border-color: var(--peach);
}

.border-white {
    border-color: var(--white);
}

.outline-peach {
    outline-color: var(--peach);
}

.bg-peach {
    background-color: var(--peach) ;
}

.peach {
    color: var(--peach);
}

.bg-white {
    background-color: var(--white);
}

.bg-transparency-light-gray {
    background-color: var(--hero-image-transparency) ;
}

.bg-transparency-charcoal-gray {
    background-color: rgba(56, 64, 73, 0.5);
}

.bg-transparency-charcoal-gray-08 {
    background-color: rgba(56, 64, 73, 0.86);
}

.border-charcoal-gray {
    border-color: var(--charcoal-gray);
}

.bg-charcoal-gray {
    background-color: var(--charcoal-gray);
}

.charcoal-gray {
    color: var(--charcoal-gray);
}

.hover-bg-light-gray:hover {
    background-color: var(--light-gray);
}

.light-gray {
    color: var(--light-gray);
}

.bg-light-gray {
    background-color: var(--light-gray);
}

.border-main {
    border-color: var(--main);
}

.bg-main {
    background-color: var(--main);
}

.bg-main-transparency {
    background-color: var(--main-transparency);
}

.main {
    color: var(--main);
}

.border-darker,
.border-darker:hover {
    border-color: var(--darker);
}

.bg-darker {
    background-color: var(--darker);
}

.darker {
    color: var(--darker);
}



.background-dark {
    background-color: rgba(0, 0, 0, 0.6);
}









/*GENERAL */
body {
    color: var(--charcoal-gray);
    font-family:"Poppins", sans-serif;
    font-size: 100%;
    font-weight: 200;
    font-style: normal;
    font-size: var(--s);
}

p, a, li, input, textarea, th, td, label {
    line-height: 1.5;
}

a {
    color: var(--charcoal-gray);
}

table {
    border-collapse: collapse; /* Remove gaps between cells */
    border: 1px solid rgb(243, 238, 238);
   
    & tr {
        border-bottom: 1px solid rgb(243, 238, 238);
    }

    & tr:last-child {
        border-bottom: none;
    }

    & th, td {
        font-size: 0.9rem;
        font-weight: 300;
        padding: var(--xs);
        text-align: center;
        border-right: 1px solid rgb(243, 238, 238);

        @media (max-width: 768px) {
            font-size: var(--s);
        }
    }

    & th:last-child, td:last-child {
        border-right: none;
    }

    & th {
        background-color: var(--light-gray); /* Light gray background */
        font-weight: 600;
    }

    @media (max-width: 768px) {
        
        & th {
            display: none;
        }

        & td {
            display: flex;
            flex-direction: row;
            border: none;
            text-align: left;
            padding: var(--xs) var(--m) 0 var(--m);
        }

        & tr:nth-child(2) td:first-child {
            padding-top: var(--m);
        }

        & tr:last-child td:last-child {
            padding-bottom: var(--m);
        }
    }
    
}


h1 {
    font-family:"Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 5rem;    

    line-height: 1;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

    @media (max-width: 768px) {
        font-size: 3.7rem;
        text-align: center;
    }

}

h2 {
    font-family:"Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 2.5rem;
    
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    
    @media (max-width: 768px) {
        font-size: 2rem;
        letter-spacing: 0.1rem;
        text-align: center;
    }
}

h3 {
    font-family:"Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: var(--charcoal-gray);

    font-size: 2rem;
    margin: 0;

    @media (max-width: 768px) {
        font-size: 1.8rem;
    }
}

h4 {
    font-family:"Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    color: var(--charcoal-gray);

    line-height: 0.9;
    font-size: 4rem;
    margin: 0;


    @media (max-width: 768px) {
        font-size: 3rem;
        text-align: center;
    }
}

.font-button {
    font-family:"Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: var(--s);
}

h1, h2, li, p {
    /* text-wrap: balance; */
    max-inline-size: 75ch;
    /* word-wrap: break-word; */
}

ul {
    margin: 0;
}

a {
    text-decoration: none;
}










/* Button that will take the user to the top of the page when clicked on */
#myBtn {
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    width: 4rem;
    height: 4rem;
    /* border-radius: 10px; Rounded corners */

    & i {
        line-height: 0.6;
    }
}

/* HERO */
.hero-overlay-div {
    filter: brightness(0.2);
    background-color: black;
    opacity: 45%;
}

@media (min-width: 1300px) {
    .hero-image-obj-p {
        object-position: 28% 34%;
    }
}

.hero-overlay-div.services {
    filter: none;
    opacity: 100%;
    background-color: rgba(56, 64, 73, 0.4);
}

/* phone hamburger */
@media (max-width: 768px) {
    .mp\:hamburger-drop {
        background-color: var(--charcoal-gray); /* Background color */
        position: absolute; /* Position it over content */
        right: 0; /* Align to the right */
        top: 39px; /* Position below the icon */
        width: 245px; /* Full width */
        padding: var(--s) 0; /* Add some padding */
    }

    /* Only phone - class 'flex' added when hamburger menu clicked on */
    .mp\:hamburger-drop.active {
        display: flex;
        gap: var(--s);

        & li {
            width: 100%;
            text-align: center;
            padding-left: var(--s);
            padding-right: var(--s);
        }    
    }
}


/* Navigation */
.nav {
    height: 3.5rem;

    & li a {
        font-size: 1.1rem;
    }

    & li a:hover:not(.active) {
        color: var(--charcoal-gray);
        background-color: rgb(244, 239, 239);
    }
}

.nav li a.active {
    text-decoration: underline;
    text-underline-offset: 3px;
    /* background-color: transparent; */
}


/* Navigation */
.nav .dropdown-content {
    width: 245px;

    /* & li a:hover svg {
        fill: var(--charcoal-gray);
        transition: fill 0.3s;
    } */
}

.dropdown-content.active {
    display: flex;
    margin-top: var(--xs);
    padding: var(--xs) 0;
    background-color:  rgb(41, 47, 54);
    
    & li {
        text-align: left;
    }

    /* applied if Phone */
    @media (max-width: 768px) {
        position: relative;
    }
}
     
/* Images of personal programs I offer on full screen in columns */
.personal-services-div {
    max-width: 33rem;
    width: 100%;
    max-height: 30rem;
    height: auto;
    border-radius: 10px;
    /* Transittion for hover */
    transition: width 0.3s ease, height 0.3s ease;
    -webkit-transition: width 0.3s ease, height 0.3s ease;
    cursor: pointer;

    & .personal-services-text-div {
        /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
        width: 60%;
        min-height: 4rem;
        top: 0%;
        right: 0%;
        border-radius: 0 0 0 10px;
    }
}

/* Expanding div ON active with javascript*/
.personal-services-div.active { 
     
    /* Increase rectangle */
    & .personal-services-text-div {
        width: 100%;
        height: 100%;
        padding: 0 var(--m);
        position: absolute;
        top: 50%;
        left: auto;
        transform: translate(0, -50%);

        @media (min-width: 768px) and (max-width: 1024px ) {
            padding: 0 var(--s);
        }
    }

    & .personal-services-heading-div p {
        font-size: var(--l);
    }

    & .personal-services-heading-div p:last-child {
        display: none;
    }

    & .personal-services-definitions-div {
        display: flex;
    }

    @media (max-width: 768px) {
        width: 100vw;
        height: 42rem; /*would love to have it as content fit but it cuts content out for some reason*/
        max-width: none;
    }
}

.personal-services-div.not-active {
    
    @media (max-width: 768px) {
        display: none;
    }
}


               

/* Benefits Icons */
.benefits-icon-div {
    width: 4rem;
    height: 4rem;

    @media (max-width: 768px) {
        width: 3.5rem;
        height: 3.5rem;
    }
}

/* Wave clip-path */
.clip-top {
    height: 64px;
    clip-path: polygon(100% 100%, 0% 100% , 0.00% 13.73%, 2.00% 17.13%, 4.00% 20.74%, 6.00% 24.47%, 8.00% 28.26%, 10.00% 32.03%, 12.00% 35.71%, 14.00% 39.24%, 16.00% 42.55%, 18.00% 45.56%, 20.00% 48.23%, 22.00% 50.50%, 24.00% 52.34%, 26.00% 53.70%, 28.00% 54.55%, 30.00% 54.90%, 32.00% 54.71%, 34.00% 54.01%, 36.00% 52.80%, 38.00% 51.11%, 40.00% 48.96%, 42.00% 46.41%, 44.00% 43.49%, 46.00% 40.27%, 48.00% 36.80%, 50.00% 33.16%, 52.00% 29.40%, 54.00% 25.61%, 56.00% 21.86%, 58.00% 18.21%, 60.00% 14.73%, 62.00% 11.50%, 64.00% 8.58%, 66.00% 6.01%, 68.00% 3.85%, 70.00% 2.14%, 72.00% 0.92%, 74.00% 0.20%, 76.00% 0.00%, 78.00% 0.33%, 80.00% 1.17%, 82.00% 2.52%, 84.00% 4.34%, 86.00% 6.60%, 88.00% 9.25%, 90.00% 12.26%, 92.00% 15.56%, 94.00% 19.08%, 96.00% 22.76%, 98.00% 26.53%, 100.00% 30.32%);
}

.clip-bottom {
    transform: scaleY(-1) scaleX(-1);
    height: 64px;
    clip-path: polygon(100% 100%, 0% 100% , 0.00% 13.73%, 2.00% 17.13%, 4.00% 20.74%, 6.00% 24.47%, 8.00% 28.26%, 10.00% 32.03%, 12.00% 35.71%, 14.00% 39.24%, 16.00% 42.55%, 18.00% 45.56%, 20.00% 48.23%, 22.00% 50.50%, 24.00% 52.34%, 26.00% 53.70%, 28.00% 54.55%, 30.00% 54.90%, 32.00% 54.71%, 34.00% 54.01%, 36.00% 52.80%, 38.00% 51.11%, 40.00% 48.96%, 42.00% 46.41%, 44.00% 43.49%, 46.00% 40.27%, 48.00% 36.80%, 50.00% 33.16%, 52.00% 29.40%, 54.00% 25.61%, 56.00% 21.86%, 58.00% 18.21%, 60.00% 14.73%, 62.00% 11.50%, 64.00% 8.58%, 66.00% 6.01%, 68.00% 3.85%, 70.00% 2.14%, 72.00% 0.92%, 74.00% 0.20%, 76.00% 0.00%, 78.00% 0.33%, 80.00% 1.17%, 82.00% 2.52%, 84.00% 4.34%, 86.00% 6.60%, 88.00% 9.25%, 90.00% 12.26%, 92.00% 15.56%, 94.00% 19.08%, 96.00% 22.76%, 98.00% 26.53%, 100.00% 30.32%);
}

/* SERVICES */
.main-services-div {
    overflow: hidden; 
    width: 21rem;
    height: 21rem;
    border-radius: 1.5rem;

    /* Transittion for hover */
    transition: 0s;
    -webkit-transition: 0s; 

    @media (max-width: 768px) {
        max-width: 100%;
    }

        /* SERVICES TEXT */
    & .services-text-div {
        width: 83%;
        height: 6rem;
        top: 50%;
        /* translate transform is realtive to the elements width/height */
        transform: translate(0, -50%);

        @media (max-width: 1024px) {
            width: 100%;
        }

        @media (max-width: 768px) {
            width: 15rem;
        }
    }

    /* Underline text */
    & .services-learn-more { 
        border: 3px solid var(--light-gray);
    }

    /* Expanding div ON HOVER with flex*/
    & .services-learn-more:hover {
        border: 3px solid var(--peach); 
    }
}

/* When class active is added through JS it expands*/
.main-services-div.active {
    border: 1px solid var(--light-gray);
       
    /* Increase rectangle */
    & .services-text-div {
        width: 100%;
        height: 100%;
        padding: var(--xl) var(--s) var(--s) var(--s);
        overflow: auto;
    }

    & .headline {
        display: none;
    }
  
    /* Display hidden element */
    & .services-text{
        display: flex;
    }

    @media (max-width: 768px) {
        height: 30rem; /* Full height */

        & .services-text-div {
            width: 100%;
            height: 100%;
            overflow: visible; /* no scroll */
        }

        & .headline {
            display: flex;

            & .services-text-heading {
                font-size: 130%;
            }
        }
    }
}

/* If at least one service is active all the others are added class not-active */
/* .main-services-div.not-active {


    @media (max-width: 768px) {
        display: none;
    }
} */


/* CONTACT */
.contact-section a {
    transition: transform .2s; /* Animation */
}

.contact-section a:hover {
    transform: scale(1.1);
}


/* 
Target the floating-placeholder when:
1. The associated input field is focused (user is typing in the field).
2. The associated input field has text (placeholder is no longer visible), indicating the user has entered something.

The `~` combinator ensures that these styles are applied to any `.floating-placeholder` sibling element that follows the input element.
*/
input:focus ~ .floating-placeholder,
input:not(:placeholder-shown) ~ .floating-placeholder,
textarea:focus ~ .floating-placeholder,
textarea:not(:placeholder-shown) ~ .floating-placeholder {
    top: -7px;
    font-size: 0.8rem;
    opacity: 1;
}

.floating-placeholder {
    position: absolute;
    pointer-events: none;
    user-select: none;
    padding: 0 3px 0 3px;
    top: 10px;
    left: 40px;
    /* color: var(--border-color); */
    background-color: var(--main);
    font-size: 1rem;
    transition: 0.2s ease all;
}

/* Apply different left positioning for textarea */
textarea + .floating-placeholder {
    left: var(--s);
}

/* #map {
    width: 100%;
    height: 500px;
    border-radius: 10px;
} */

/* MAP */
.map-parent {
    height: 37rem;

    @media (max-width: 1024px) {
        height: 25rem;
    }  
}
.map {
    object-position: 0%;

    @media (max-width: 1024px) {
        object-position: 25%;
    }    
}

.map-leaflet {
    top: 18.3%;
    left: 819px;

    @media (max-width: 1024px) {
        top: 8.3%;
        left: 25%;
        margin-left: 118px;
    }
}

.map-marker {
    top: 33%;
    left: 819px;

    @media (max-width: 1024px) {
        top: 30%;
        left: 25%;
        margin-left: 118px;
    }
}

.contact {
    @media (min-width: 1024px) {
        padding-top: 20rem;
    }
}

/* if larger than tablet and phone, then */
.contact-parent {
    /* Laptop screen */
    @media (min-width: 1024px) {
        padding-top: 20rem;
    }

    /* LG screen */
    @media (min-width: 1780px) {
        padding-top: 0rem;
        padding-bottom: 10rem;
    }

    /* Tablet */
    @media (max-width: 1024px) {
        margin-top: -22px;
    }
}

.contact-parent > * {
    max-width: 75rem;

    /* LG screen */
    @media (min-width: 1780px) {
        max-width: 90rem;
        align-items: end;
    }
}

/* DIALOG */
/* darker background when dialog opened */
dialog::backdrop {
    /* backdrop-filter: blur(3px); */
    background-color: var(--charcoal-gray);
    opacity: 60%;
}

input[type=checkbox]{
    accent-color:  var(--charcoal-gray);  
}

/* FORM PART */
form ::placeholder {
    font-style: italic;
    color: var(--charcoal-gray);
    /* text-decoration: none; do i need<? */
}

input:focus:not([type="checkbox"]),
textarea:focus {
    color: var(--darker);
    outline: 1px solid var(--charcoal-gray);
    text-align: left;
}

.name-icon {
    padding-left: 40px;
    background: url(/images/name-icon.svg) no-repeat left;
    background-size: 24px;
    background-position: 8px;
}

.email-icon {
    padding-left: 40px;
    background: url(/images/email-icon.svg) no-repeat left;
    background-size: 24px;
    background-position: 8px;
}

.phone-icon {
    padding-left: 40px;
    background: url(/images/phone-icon.svg) no-repeat left;
    background-size: 24px;
    background-position: 8px;
}


/* About */
.get-to-know-me-section {
    & div {
        padding-left: 6rem;
        padding-top: 2rem;

        @media (max-width: 768px) {
            padding: 0;
        }
    }

    & h4 {
        top: -63px;
        left: -31px;
        width: 34rem;

        @media (max-width: 1024px) {
            top: -46px;
            left: -6px;
        }

        @media (max-width: 768px) {
            position: initial;
            width: auto;
        }
    }

    & img {
        min-width: 10rem;

        @media (min-width: 1024px) {
            width: 100%;
        }

        @media (max-width: 1024px) {
            max-height: 20rem;
        }
    }
}

/* Scrollbar in reviews */
.scrollbar::-webkit-scrollbar       {background-color:#fff;width:10px}
.scrollbar::-webkit-scrollbar-track {background-color:rgb(247, 241, 241)}
.scrollbar::-webkit-scrollbar-thumb {background-color:#babac0;border-radius:16px;border:1px solid rgb(227, 216, 216)}

/* Personal training */
.training-programs-img {
    height: 22rem;
    width: 100%;
    max-width: 17rem;

    @media (min-width: 1450px) {
        height: 26rem;
        width: 17rem;
    }

    @media (max-width: 1024px) {
        height: 26rem;
        width: 18rem;
    }

    @media (max-width: 768px) {
        height: 17rem;
        width: 12rem;
    }
}

/* @HOME */
.clip-path-who {
    margin-top: -5rem;
    margin-bottom: -5rem;
    clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0% 80%);

    @media (max-width: 768px) {
        margin-top: -1rem;
        margin-bottom: -1rem;
        clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 95%);
    }
}