/* ----- Theme CSS ----- */
header,
nav,
section,
footer {
    width: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
}
#Header,
#Footer,
#Credibility,
#Main-Menu {
    max-width: 1200px;
    min-width: 300px;
    margin: 0px auto;
    padding: 0px;
    position: relative;
}
/* Selection CSS */
#Container ::selection {
    background: var(--themeOneBg);
    color: var(--fontLight);
}
/* Scroller CSS */
#Scroller a {
    background: var(--fontLight);
    border: 2px solid var(--themeOneBg);
    color: var(--fontDark);
    border-radius: 50%;
    box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.1);
}
/* Scroller CSS */
#gdpCookie,
#gdp_popup .cc-cp-foot-byline {
    font: 400 14px/20px var(--siteFont) !important;
}
/* ----- Header ----- */
.stickyHeader {
    position: sticky !important;
    position: -webkit-sticky !important;
    position: -moz-sticky !important;
    position: -ms-sticky !important;
    position: -o-sticky !important;
}
header.stickyAnimate {
    background: var(--fontLight);
}
#Header {
    min-height: 142px;
    display: grid;
    grid-template-columns: 1fr 260px 290px;
    grid-template-areas: 'logo callAppoint bookAppoint';
    align-items: center;
    gap: 15px;
}
.logo {
    padding: 10px;
    grid-area: logo;
}
.logo a {
    display: block;
}
.callAppoint {
    grid-area: callAppoint;
    font: 500 17px/20px var(--siteFont);
}
.callAppoint li {
    padding: 2px 0px;
}
/*.callAppoint li a {
    display: block;
}*/
.callAppoint li span {
    display: inline-block;
    vertical-align: middle;
    width: 130px;
    font: 700 14px/20px var(--headingFont);
}
.callAppoint li span::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 20px;
    margin-right: 10px;
}
.callAppoint span::before {
    background: url(/images/call-appoint-img.png) no-repeat center top;
}
.bookAppoint {
    grid-area: bookAppoint;
    font: 700 17px/20px var(--headingFont);
    text-transform: uppercase;
}
.bookhead a {
    display: block;
    background: var(--themeTwoBg);
    padding: 15px 10px 12px 15px;
    border-radius: 5px;
}
.bookhead a:hover {
    color: var(--fontLight);
}
.bookhead a::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 25px;
    margin-right: 10px;
}
.bookhead a::before {
    background: url(/images/book-appoint-img.png) no-repeat center top;
}
.bookhead a:hover::before {
    background: url(/images/book-appoint-on-img.png) no-repeat center top;
}
.socLinks,
.toggleMenu {
    display: none;
}
/* ----- Hover Effect ----- */
.downHover a {
    position: relative;
    z-index: 1;
}
.downHover a::after {
    content: '';
    background: var(--themeOneBg);
    position: absolute;
    z-index: -1;
    height: 0px;
    width: 100%;
    right: 0px;
    top: 0px;
    border-radius: 5px;
    transition: 0.2s ease;
}
.downHover a:hover::after {
    height: 100%;
}
.lineEffect a {
    position: relative;
}
.lineEffect a::after {
    content: '';
    background: var(--themeOneBg);
    position: absolute;
    height: 1px;
    width: 0px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    transition: 0.2s ease;
}
.lineEffect a:hover::after {
    width: 100%;
}
/* ----- Credibility ----- */
#Credibility {
    padding: 60px 0px 20px 0px;
    text-align: center;
    min-height: 200px;
}
#Credibility ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
#Credibility li {
    padding: 5px 0px;
}
#Credibility li a {
    width: 98%;
    display: block;
    margin: 0px auto;
}
/* ----- Footer ----- */
footer {
    background: var(--themeOneBg);
}
#Footer {
    padding: 60px 0px;
    text-align: center;
}
.socLogo {
    padding: 40px 0;
}
.socLogo ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.socLogo li {
    width: 44px;
    height: 44px;
    font: 400 16px/20px var(--siteFont);
}
.socLogo li a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #d9d9d9;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}
.socLogo li a img {
    object-fit: contain;
    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}
/* Hover */
.socLogo li a:hover {
    background: var(--themeTwoBg);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.socLogo li a:hover img {
    transform: scale(1.12) rotate(360deg);
}
.socLogo li a:focus-visible {
    outline: 2px solid var(--themeTwoBg);
    outline-offset: 3px;
}
.socLogo li span {
    display: none;
}
.footLinks {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 0px;
}
.footLinks ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
}
.footLinks li {
    font: 300 17px/20px var(--siteFont);
    position: relative;
}
.footLinks a {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
    padding: 10px;
    color: var(--fontLight);
}
.footLinks a:hover {
    color: var(--themeTwoBg);
}
.copyright {
    padding: 40px 0px;
}
.copyright h2 {
    font: 400 16px/20px var(--siteFont);
    color: var(--fontLight);
}
.ypoLogo {
    padding: 10px 0px;
}
.ypoLogo a {
    display: block;
}
@media screen and (max-width: 1100px) {
    #Header {
        grid-template-areas: 'logo logo' 'callAppoint bookAppoint';
        grid-template-columns: 300px 300px;
        justify-content: center;
    }
    .logo {
        text-align: center;
    }
}

@media screen and (max-width: 710px) {
    .toggleMenu {
        display: block;
    }
}
@media screen and (max-width: 640px) {
    header {
        position: relative;
    }
    #Header {
        grid-template-areas: 'callAppoint' 'bookAppoint' 'logo';
        grid-template-columns: 1fr;
    }
    .logo {
        padding: 10px 10px 20px 10px;
    }
    .callAppoint {
        padding: 10px 10px;
        background: #eeeeee;
    }
    .callAppoint ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;
    }
    .callAppoint li span {
        width: auto;
    }
    .bookAppoint {
        display: grid;
        grid-template-columns: 250px 1fr 60px;
        grid-template-areas: 'bookhead socLinks toggleMenu';
        gap: 10px;
        justify-content: space-between;
        align-items: center;
        width: 95%;
        margin: 0px auto;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 0px 0px 15px 0px;
        font: 700 14px/20px var(--headingFont);
    }
    .bookhead {
        grid-area: bookhead;
    }
    .bookhead a {
        padding: 10px;
    }
    .footLinks ul {
        gap: 5px;
    }
    .footLinks a {
        padding: 5px;
    }
    .toggleMenu {
        grid-area: toggleMenu;
    }
    .socLinks {
        display: block;
    }
    .socLinks ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 15px;
        grid-area: socLinks;
    }
    .socLinks li span {
        display: none;
    }
    #gdpCookie,
    #gdp_popup .cc-cp-foot-byline {
        font: 400 12px/20px var(--siteFont) !important;
    }
    .cookie-main {
        padding: 5px !important;
        line-height: unset !important;
        margin: 0px !important;
    }
    .cookie-main p {
        padding: 0px 0px 5px 0px !important;
        margin: 0px !important;
    }
    .cookie-main li.cookie-button a {
        margin: 0px !important;
    }
    .cookie-main li.cookie-content {
        margin: 0px !important;
    }
}
@media screen and (max-width: 600px) {
    .bookAppoint {
        width: 95%;
    }
}
@media screen and (max-width: 500px) {
    .bookAppoint {
        grid-template-columns: 250px 60px;
        grid-template-areas:
            'bookhead toggleMenu'
            'socLinks socLinks';
        gap: 10px;
    }

    .socLinks {
        grid-area: socLinks;
        grid-column: 1 / -1;
        width: 100%;
    }

    .socLinks ul {
        width: 100%;
        justify-content: center;
    }
}
@media screen and (max-width: 480px) {
    .socLinks ul {
        gap: 20px;
    }
    .bookhead {
        width: 100%;
    }
    .callAppoint li span::before {
        display: none;
    }
    .callAppoint li {
        padding: 3px 5px;
    }
    .callAppoint {
        font: 500 15px/25px var(--siteFont);
    }
    .callAppoint ul {
        display: grid;
	flex-wrap: inherit;
        grid-template-columns: repeat(3,1fr);
}
    .callAppoint li span {
	font: 700 14px/20px var(--headingFont);
    display: block;
}
}
@media screen and (max-width: 380px) {
    .callAppoint li span {
	font: 700 13px/20px var(--headingFont);
}
    .callAppoint {
        font: 500 12px/25px var(--siteFont);
    }
}