/*
Theme Name: Ortho
Description: Template
Text domain: ortho
Version: 1.0
Author: Sheppard Web Development Inc
*/


@import "css/bootstrap.min.css";


* {font-optical-sizing: auto; text-rendering: optimizeLegibility;font-family: "Montserrat", serif; }
html {overflow-x: hidden;}
body {color: #122974;position: relative; right: 0; }
a {text-decoration: none; transition: all .3s linear; }
a:hover {text-decoration: none;color:#35C28C;}
.clear {clear: both;}
.alignleft {float: left; margin: 0 40px 20px 0;}
.alignright {float: right; margin: 0 0 20px 20px;}
img {max-width: 100%; display: block;}
.img-fit { object-fit: cover; }
.container-fluid { padding: 0 120px; }
.container {max-width: 1500px;}
body:not(.blog) .ratio { overflow: hidden; width: 100%; display: block; position: relative; }
body:not(.blog) .ratio:before { content: ''; display: block; padding-bottom: var(--aspect-ratio);} 

body:not(.blog) .ratio > img,
body:not(.blog) .ratio > video, 
body:not(.blog) .ratio > iframe { position: absolute; left: 0; top: 0; right: 0; z-index: 2;width: 100%; max-width: unset; height: 100%; object-fit: cover; -o-object-fit: cover; }

.bg-black { background-color: #000; }
.bg-navy { background-color: #000D36; }
.bg-blue { background-color: #0066D5; }
.bg-gradient { background: linear-gradient(180deg, rgba(0, 173, 173, 1) 0%, rgba(53, 194, 140, 1) 100%); }
.text-light h1, .text-light h2, .text-light h3 { color: #fff; }
.text-light p { color: #A7B6E5; }
a.text-white:hover { color: #35C28C !important; }

h1, h2, h3, h4, h5 { font-weight: 400; }
h1 { font-size: 70px;}
h2 { font-size: 28px; letter-spacing: 1px; color: #32475e; margin-bottom: 24px; }
h3 { font-size: 24px; }
h4, .h4 { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #0066D5; margin-bottom: 20px; }
p { font-size: 15px; font-family: "Inter", serif; }

.rounded-corners-1 { border-radius: 10px; overflow: hidden; }

.gallery-item {text-align: center;}
.gallery-item img {margin: 0 auto 15px; border: none;;}

.spacer-xs {height: 15px}
.spacer-sm {height: 30px}
.spacer-md {height: 60px}
.spacer-lg {height: 80px}
.spacer-xl {height: 120px}
.spacer-xxl {height: 160px}

.gap-xs { gap: 10px; }
.gap-s { gap: 20px; }
.gap-m { gap: 30px; }
.gap-l { gap: 40px; }

.btn { font-size: 14px; padding: 12px 16px; font-weight: 700; border-radius: 4px; }
.btn-blue { color: #fff; background-color: #0066D5; border: 2px solid #0066D5;  }
.btn-blue:hover { color: #0066D5; background: transparent; }
.btn-green { color: #fff; background-color: #35C28C; border: 2px solid #35C28C;  }
.btn-green:hover { color: #35C28C; background: transparent; }
.btn-white { color: #fff; border: 2px solid rgba(255, 255, 255, .5);  }
.btn-white:hover { color: #fff; background: rgba(255, 255, 255, .5); }

.nav-open { overflow: hidden; }

.hamburger { cursor: pointer; padding: 0; margin: 0; background-color: transparent; border: 0; position: absolute; z-index: 99; flex-shrink: 0; justify-content: center; align-items: center; width: 22px; height: 15px; transform: translateY(-50%); top: 50%; right: 15px; }
.hamburger:focus { outline: 0; }
.hamburger span { left: 50%; height: 2px; width: 100%; top: 50%; background: #fff; position: absolute; display: block; transform: translate(-50%, -50%); transition: all .3s cubic-bezier(0.4, 0, 0.1, 1); }
.hamburger span:first-of-type { transform: translate(-50%, -7px); }
.hamburger span:nth-of-type(2) { transform: translate(-50%, -50%); }
.hamburger span:last-of-type { transform: translate(-50%, 5px); }
.hamburger[aria-expanded="true"] span { background: #35C28C; top: 50%; }
.hamburger[aria-expanded="true"] span:first-of-type { transform: translate(-50%, -50%) rotate(135deg); }
.hamburger[aria-expanded="true"] span:nth-of-type(2) { transform: scaleX(0); }
.hamburger[aria-expanded="true"] span:last-of-type { transform: translate(-50%, -50%) rotate(-135deg); }

header { position: absolute; top: 0; left: 0; right: 0; z-index: 6; }
header .container-fluid { padding: 40px 40px 0; }
header:before { content: ''; position: absolute; opacity: .5; height: 255px; left: 0; right: 0; background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 100%); }
header ul { font-size: 14px; font-weight: 700; gap: 30px; }
header ul li { display: inline-flex; position: relative; }
header ul li a { color: #fff; display: inline-flex; padding: 10px 0}
header ul li a path { transition: fill .3s linear; }
header ul li:not(.has-link) .nav-link { padding: 0; }
header ul li.current_page_item > a, header ul li > a:hover { color: #35C28C; }
header ul li a:hover path { fill: #35C28C; }
.header-socials { gap: 20px; }

/* Submenu Styling */
header ul li .sub-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 200px; padding: 10px 0; margin: 0; border-radius: 4px; box-shadow: 0 4px 34px 0 rgba(0,0,0,0.15); z-index: 100; }
header ul li:hover > .sub-menu { display: block; }
header ul li .sub-menu li { display: block; margin: 0; padding: 0; width: 100%; }
header ul li .sub-menu a { color: #122974; padding: 8px 20px; display: block; font-size: 13px; width: 100%; justify-content: space-between; }
header ul li .sub-menu a:hover { color: #35C28C; background: rgba(53, 194, 140, 0.1); }
header ul li .sub-menu .current-menu-item > a { color: #35C28C; }

/* Sub-submenu (Third Level) */
header ul li .sub-menu .sub-menu { top: 0; left: 100%; margin-left: 1px; }
header ul li .sub-menu li.menu-item-has-children > a:after { content: ''; border: solid #122974; border-width: 0 2px 2px 0; display: inline-block; padding: 2px; transform: rotate(-45deg); float: right; margin-top: 5px;}
header ul li .sub-menu li.menu-item-has-children:hover > a:after { border-color: #35C28C; }

.header-lang > a { padding: 12px 11px; border-radius: 4px; border: 2px solid rgba(255, 255, 255, .5);}

.hero { max-height: 700px; height: 100svh; background: #000; position: relative; }
.hero > img { position: absolute; top: 0; left: 0; opacity: .5; }

.home .posts { margin-bottom: -120px; position: relative; z-index: 2; }
.posts-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.posts-item h3 { font-size: 20px; font-weight: 700; }
.posts-item { background-color: #fff; text-align: center; box-shadow: 0 4px 34px 0 rgba(0,0,0,0.15); transition: 0s ease; }
.posts-item img, .posts-item .h4 { transition: all .3s ease; }
.posts-item .ratio > img:first-of-type { opacity: .7; }
.posts-item .ratio > img:nth-of-type(2) { width: 60px; height: 60px; object-fit: contain; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.posts-item-content { display: block; color: #000D36; padding: 30px 15px; }
.posts-item-content p { color: #838383; }
.posts-item:hover .h4 { color: #35C28C; display: inline }
.posts-item:hover .ratio > img:nth-of-type(2) { top: 40%; }

.bg-text { position: relative; background-color: #000D36; }
.bg-text h2 { margin-bottom: 20px; font-weight: 300; }
.bg-text > img { pointer-events: none; position: absolute; top: 0; left: 0; right: 0; height: 100%; object-fit: cover; opacity: .3; }

.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.team-item { position: relative; box-shadow: 0 4px 34px 0 rgba(0,0,0,0.15); display: block; color: #FFF;}
.team-item .ratio { background-color: #fff; }
.team-item:after { content: ''; background: linear-gradient(180deg, rgba(18,41,116, 0) 39%, rgba(18,41,116, .7) 100%); z-index: 4; position: absolute; left: 0; bottom: 0; right: 0; top: 0; }
.team-item-content { position: absolute; left: 20px; bottom: 20px; right: 20px; z-index: 5;  }
.team-item h3 { max-width: 140px; font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.team-item p { line-height: 1.2; margin-bottom: 0; }
.team .nav-tabs { align-items: stretch; max-width: 680px; border: 1px solid rgba(255, 255, 355, .2); margin: 0 auto; border-radius: 10px; overflow: hidden; }
.team .nav-tabs a { width: 50%; margin-bottom: 0; display: flex; align-items: center; justify-content: center; border: none; color: #fff; border-radius: 0; }
.team .nav-tabs a:not(:first-of-type) { border-left: 1px solid rgba(255, 255, 355, .2); }
.team .nav-tabs .active, .team .nav-tabs a:hover { color: #0066D5; background: #fff; }

.section-tabs p { color: #838383; }
.section-tabs .nav-link-arrow { transition: all .3s ease; background-color: linear-gradient(90deg, rgba(0, 102, 213, 0) 0%, rgba(53, 194, 140, 0) 100%); border-radius: 10px; color: #122974; padding: 9px 15px; border: 0; display: flex; justify-content: space-between; align-items: center; }
.section-tabs .nav-link-arrow:hover, .section-tabs .nav-link-arrow.active { background: linear-gradient(90deg, rgba(0, 102, 213, .15) 0%, rgba(53, 194, 140, .1) 100%); color: #0066D5; }
.section-tabs .tab-pane { min-height: 400px; background-color: #000; }
.section-tabs .tab-pane img { opacity: .9; }
.section-tabs .tab-pane:after { content: ''; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.6) 100%); left: 0; top: 0; bottom: 0; position: absolute; right: 0; bottom: 0; z-index: 1; }
.section-tabs .tab-pane-inner { display: flex; flex-direction: column; justify-content: flex-end; color: #fff; z-index: 5; position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 30px; }
.section-tabs .tab-pane-inner p { color: #fff; }

.text-on-bg { transform: translateY(50px); z-index: 3; position: relative; }

.map .nav-tabs { border-bottom: 0; padding: 70px 0 30px 30px;  }
.map .nav-link { color: #fff; border: 0; cursor: pointer; margin-bottom: 10px; padding: 0}
.map .nav-link .h3 { font-size: 17px; color: #fff; margin-bottom: 3px; }
.map .nav-link p {font-size: 12px; margin-bottom: 0; color: #A7B6E5; }
.map .nav-link.active p, .map .nav-link:hover p { color: #007bff; }
.map .nav-link.active, .map .nav-link:hover { background-color: transparent;  color: #007bff;}
.map .nav-tab-link { position: relative; width: 33%; border-radius: 10px; padding: 1%; }
.map .nav-tab-link ul {z-index: 2; margin: 5px 0 0}
.map .nav-tab-link ul a { display: block; }
.map .nav-tab-link ul a img {width: 12px;}
.map .nav-tab-link ul a:hover { transform: scale(1.1); }
.map .tab-content img { position: absolute; top: 0; right: 15px; width: 42vw; height: 100%; max-width: unset; object-fit: cover; }

footer p { font-size: 12px; line-height: 1.5; color: #838383; }
footer p a { color: #000D36; }
footer p a:hover { color: #838383; }

.notification-content {padding-top: 30px !important;}


#page-upper {background: #0066d5; height: 130px;}
body:not(.home) header:before {height: 150px}

#content h1 {margin-bottom: 30px; font-size: 42px;}
#content h2 {margin-bottom: 20px; font-size: 28px;;}
#content h3 {margin-bottom: 15px; font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: 1px;}
#content {line-height: 1.5; font-size: 16px;}
#content ul,
#content p {font-size: 16px; margin-bottom: 30px; font-weight: 400 !important; }
#content li {font-family: "Inter", serif; margin-left: 30px;}
#content hr {margin: 50px 0}


#content .doctors h3 {margin-bottom: 0}
#content .doctors {text-align: center;margin: 0 auto;}
#content .doctors .thumb {width: 210px; height: 210px; background-size: cover; border-radius: 5px; margin: 0 auto 10px;}
#content .doctors .doctor {margin-bottom: 25px; height: 320px;}
#content .doctors a {display: block; }
#content .doctors a p {color: #222; max-width: 75%; margin:  0 auto}
#content .doctor-single .doctor-image {width: 250px; height: auto; float: right; margin: 0 0 30px 30px; padding: 3px; border: 1px solid #CCC;}
#content .doctor-full-img {float: right; margin: 15px 0 30px 30px; border-radius: 5px; max-width: 270px;}