:root {
    --color-bg-light: #fff;
    --color-bg-dark: #aaa;
}


@font-face {font-family: PlayfairDisplay; src: url(../fonts/PlayfairDisplay-VariableFont_wght.ttf);  }
@font-face {font-family: RobotoMedium;src: url(../fonts/Roboto-Medium.ttf);}
@font-face {font-family: RobotoLight;src: url(../fonts/Roboto-Light.ttf);}
@font-face {font-family: RobotoBold;src: url(../fonts/Roboto-Bold.ttf);}


a {text-decoration:none;color: #e07621;}
a.btn {text-decoration:none;background-color:#000;color:#fff;padding:10px}
a.btn:hover {background-color:#666}

h1, h2, h3 {font-family:'PlayfairDisplay'}

h2 {font-size: 50px;line-height: 1.2;}
p {font-family:RobotoLight;line-height: 1.3;}
li {list-style:none}

.frozen {overflow: hidden;}

header {background: url("../img/grn-bg.jpg");background-size: cover;height: 700px;position: relative;}
header div.box {background-color: white;width: 667px;padding: 30px;right: 459px;top: 50%;position: absolute;z-index: 2;font-size: 23px;font-family: 'RobotoLight';margin-top: -130px;}
header div.box h1 {font-family:'PlayfairDisplay';font-weight: normal;font-size: 55px;line-height: 1.1;text-align: center;margin-bottom: 30px;}
header div.box p {padding-bottom:14px}
header a {position:absolute;width:auto;left:250px;margin-top: 18px;}
header .hdr-img {position:absolute;top:0;right:0;height: 700px;box-shadow: -8px -4px 13px 0px #0000008f;}

.container {margin: 0 auto;display: flex;flex-direction: row;align-items: center;}
section.see-results {background-color:black;color:white;display:flex;padding:20px;border-bottom: 2px dotted orange;}
section.see-results img {margin-right: 36px;}
section.see-results h2 {text-align: left;line-height: 1.2;font-size: 40px;margin-left: 31px;}

section.consultation {display:flex;flex-direction: row-reverse;height: 830px;justify-content: center;}
section.consultation .section-image {background: url(../img/patient1.jpg);flex: 1;background-repeat: no-repeat;background-size: cover;background-position-x: center;}
section.consultation .section-content {text-align:center;flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;margin: 70px;}
section.consultation h2 {margin-bottom:40px}
section.consultation p {font-size:30px;margin:20px 0}

section.top-procedures {background-color:#000;color:#fff;display:flex;flex-direction: row;justify-content: space-between;}
section.top-procedures ul {display:flex;flex-direction:column}
section.top-procedures p {font-size:30px;margin:20px 0}
section.top-procedures h2 {font-size:90px}
section.top-procedures h3 {font-size:50px;line-height: 1.15;}
section.top-procedures .procedure-list {border-right: 1px solid #444;text-align: left;flex: 1;padding: 30px;padding-left: 0px;}
section.top-procedures .top-procedures-intro {text-align:center;flex:1;padding: 40px;display: flex;flex-direction: column;align-items: center;justify-content: center;background: url(../img/side-1.jpg);background-position-x: right;background-repeat: no-repeat;background-position-y: top;}
section.top-procedures .top-procedures-intro p {font-size:40px}
section.top-procedures .procedure-list li{border-bottom: 1px dashed #bbb;padding: 50px;padding-bottom: 20px;}
section.top-procedures .procedure-list li:last-child{border:none}

section.bounama {display:flex;height: 931px;justify-content: center;flex-direction: row-reverse;}
section.bounama .section-image {background: url(../img/portrait.jpg);flex: 1;background-repeat: no-repeat;background-size: cover;background-position-x: center;transform: scaleX(-1);}
section.bounama .section-content {text-align: left;flex: 1;display: flex;flex-direction: column;align-items: baseline;justify-content: center;margin: 70px;}
section.bounama h2 {margin-bottom:40px}
section.bounama p {font-size:30px;margin:20px 0}


section.office {background: url(../img/office1.jpg);height: 664px;background-size: cover;background-position-y: center;color: #fff;padding: 60px;display: flex;justify-content: center;align-items: center;background-position-x: center;}
section.office h2 {font-size: 100px;text-align: center;}

section.book-appointment {background-color:#c1ad9d;display: flex;align-items: center;flex-direction: row-reverse;}
section.book-appointment .section-content {flex:1;padding:60px;text-align: center;}
section.book-appointment .section-image {flex:1}
section.book-appointment p {font-size:30px;margin-bottom:30px}
section.book-appointment h2 {margin-bottom:20px}


section.testimonials {background-color:#796352;color:#fff;text-align: center;padding-top:40px}
section.testimonials ul {display:flex;justify-content: space-around;padding: 50px;font-size: 30px;}
section.testimonials li {padding:0 40px;flex:1;display: flex;flex-direction: column;align-items: center;}
section.testimonials img {width:200px;padding-bottom: 20px;}

footer,section.contact {background-color:#000;color:#fff;font-size: 30px;padding: 30px;}
footer .contact,section.contact .contact {display:flex;justify-content: space-evenly;padding: 20px 0;}
footer h3,section.contact h3 {font-size: 30px;border-bottom: 1px dashed white;margin-bottom: 5px;padding-bottom: 5px;}
footer p,section.contact p {font-size: 24;}

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    overflow: hidden;
    left:-99999px
}



.modal-item{display:block;padding: 10px;max-height: 80vh;overflow: scroll;}

.modal-item.appt {overflow:hidden;margin-top:-20px;font-family:Roboto}
.modal-item.appt form > div {margin-bottom:10px}
.modal-item.appt input {width: 175px;padding:2px 5px;margin-right:10px;font-size: 19px;color: green;}
.modal-item.appt input[name="email"] {width: 364px;}
.modal-item.appt input[name="message"] {width: 555px;}
.modal-item.appt button {padding:10px;color: #fff;background-color: #e07621;border: none;margin-top: 9px;cursor: pointer;font-size: 20px;}
.modal-item.appt button:hover{background-color: #ff7100}

.modal-body {
    background-color: #fff;
    width: 90vw;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.64);
    font-family: 'PlayfairDisplay';
    max-height: 90vh;
    overflow: scroll;
    max-width: 659px;
    padding: 0;
    color: #000;
    overflow: hidden;
    border: 20px solid white;
}

.modal.gallery .modal-body{border:1px solid #666;background-color:#000;width: 465px;height: 852px;}
.modal.gallery .modal-item {overflow:hidden;margin-top: -30px;max-height: 100vh;}
.modal.gallery .modal-title {background-color:#222;color:#aaa}

.modal-body h2 {font-size:24px;font-weight:bold;margin-bottom:5px}
.modal-body p {margin-bottom: 40px;font-size: 21px;}
.modal-body ul {font-family:RobotoLight;font-size:21px;margin-bottom: 40px;padding-left: 10px;margin-top: -32px;margin-left: 10px;}
.modal-body li {list-style-type:disc;line-height: 1.4;}

.modal-title {font-family:'PlayfairDisplay';font-weight:bold;font-size:24px;padding:10px;background-color:#e6e6e6;margin-bottom: 30px;}

.modal-close {
    color: #ffff;
    position: absolute;
    top: 10px;
    right: 13px;
    font-size: 18px;
    font-weight: bold;
    font-family: sans-serif;
    cursor: pointer;
    background-color: #bd3737;
    padding: 5px 10px;
}

.modal-close:hover {background-color: #ff3e3e;
                   }

@media only screen and (max-width: 1600px) {
    footer,section.contact {padding: 0px 10px 10px 10px;}
    footer h3,section.contact h3 {font-size: 30px;/* display: none; */}
    footer p,section.contact p {font-size: 24px;}
}



@media only screen and (max-width: 1180px) {
    header,header .hdr-img {height:500px}
    header div.box {right:300px}

    section.top-procedures {flex-direction:column;}
    section.top-procedures .top-procedures-intro {display:none}
    
    footer,section.contact {padding: 0 0 6px;font-size: 25px;}
    footer h3,section.contact h3 {}
    footer p,section.contact p {}

}

@media only screen and (max-width: 1024px) {
    header,header .hdr-img {height:500px}
    header div.box {top: 50%;right:300px;padding: 10px;margin-top: -100px;width: 65vw;}

    section.top-procedures {flex-direction:column}
    



    h1,h2 {font-size:40px}
    p {font-size: 25px;}

    header div.box h1 {font-size: 50px;}
    header div.box p {text-align:center}

    section.bounama p {font-size:25px}

    section.top-procedures h2 {font-size:40px}
    section.top-procedures .top-procedures-intro p {font-size:30px}

    section.top-procedures h3 {font-size:40px}
    section.top-procedures p {font-size:30px}
    section.top-procedures .procedure-list li {padding: 50px;padding-bottom:0px;}

    section.see-results img {width: 70%;}
    section.testimonials img {width:70%}
}

@media only screen and (max-width: 817px) {
    header div.box {right:330px;width: 350px;top: 50%;padding: 10px;margin-top: -142px;}
    header div.box a {display:none}

    section.testimonials ul {flex-direction: column;}
    section.testimonials li {margin-bottom:25px;padding-bottom:25px;border-bottom:1px solid #b29985}
    section.testimonials img {width:200px;}
    section.testimonials p {font-size:20px;}

    section.book-appointment {flex-direction:column}

    footer .contact,section.contact .contact {flex-direction:column;text-align: center;font-size: 16px;justify-content: center;align-items: center;padding-bottom: 10px;}
    footer .phone.contact-section, section.contact .phone.contact-section {margin:20px 0}

    footer, section.contact {padding:10px}
    footer h3, section.contact h3 {font-size: 1.8em;border-bottom:none;margin-bottom:0}
    footer p,section.contact p {font-size: 1.4em;}
}

@media only screen and (max-width: 700px) {
    header, header .hdr-img {height: 300px;}
    header div.box {width: 382px;margin-top: -75px;left: 0;}
    header div.box h1 {font-size: 30px;margin-bottom:20px}
    header div.box p {font-size: 18px;}

    section.bounama .section-content {margin: 20px;}
    section.bounama h2 {margin-bottom:10px}
    section.bounama p {font-size:18px;margin: 10px;}
    section.bounama .section-image {transform: scaleX(1);}
    
    section.bounama {flex-direction:column;height: 857px;}
    section.consultation {flex-direction:column;height: 1120px}
    section.office h2 {font-size:70px}

    section.see-results .container{flex-direction: column;}
    section.see-results h2 {text-align:center;line-height:1.12;margin-bottom:10px;font-size:30px}
    section.see-results img {width:100%}
    
    section.top-procedures .top-procedures-intro {padding:20px;display: none;}
    procedure-list {padding:0 20px}
    section.top-procedures h3 {font-size:30px}
    section.top-procedures p {font-size:18px;margin: 10px 0;}

    section.consultation {height:600px}
    section.consultation p {font-size:18px;margin:10px 0}
    section.consultation .section-content {margin:0 30px}
    section.consultation .section-image {background-position-y: -30px;}
    section.consultation h2 {margin-bottom:10px;margin-top: 10px;line-height: 1.1;}

    section.top-procedures .procedure-list {padding-top:0;margin-top:-20px}
}

@media only screen and (max-width: 570px) {
    header div.box {padding:10px 20px;width: 60vw;}
    header div.box h1 {text-align:left;margin-bottom:10px}
    header div.box p  {text-align:left !important;padding-bottom:5px}
    .modal-body {width: 100vw;height: 100vh;max-height: 100vh;}
}


/* ======================================= */