/* @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap'); */

@font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/Gotham Rounded Light/Gotham Rounded Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/Gotham Rounded Light Italic/Gotham Rounded Light Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}


@font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/Gotham Rounded Bold/Gotham Rounded Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

.videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
.videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

:root {

    --primary-color: #005B7D;
    --light-primary-color: #1896D3;
    --deep-primary-color: #005B7D;
    --dark-grey-color: #333;
    --grey-text-color: #717171;
    --subtle-white-text-color: #f1f1f1;
    --grey-color: #ebebeb;
    --light-grey-bg: #f7f7f7;
    --light-blue: #DDEFF8;
    --light-blue-hover: #B8EFF8;
    --gold-color: #EFB234;

}


/*** Animation Effects ***/
@keyframes slideInUp { 
    from { transform:translateY(100%); opacity:0; }
    to { transform:translateY(0); opacity:1; }
}
@keyframes slideOutUp {
    from { transform:translateY(0); opacity:1; }
    to { transform:translateY(-100%); opacity:0; }
}
.slideInUp { animation: slideInUp 0.5s forwards; }
.slideOutUp { animation: slideOutUp 0.5s forwards; }



body { font-family:'Gotham Rounded', sans-serif; }



/*** Elements ***/
h2, h3, h4, h5 { font-weight:bold; }
a { color:var(--primary-color); text-decoration:none; }
hr { opacity:.1; }

article h2,
.page-title { color:var(--primary-color); }
article p { margin-bottom:2em; }
article a:hover { color:var(--light-primary-color); text-decoration:underline; }

.embed { aspect-ratio:16/9; position:relative; overflow:hidden; 
    iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
}

.table th { color:var(--light-primary-color); }


/*** Icon Elements ***/
.icon-circle { border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; aspect-ratio:1/1; width:80px; font-size:2em; }


/*** Bootstrap Replace ***/
.btn-primary { background-color:var(--light-primary-color); border-color:var(--primary-color); 
    &:hover { background-color:var(--primary-color); border-color:var(--primary-color); }
}
.btn-primary.with-icon { position:relative; padding:1em; padding-right:4.5em;
    & > i { font-size:1.2em; } 
    span { background:var(--primary-color); position:absolute; height:calc(100% - .36em); width:auto; aspect-ratio:1; top:.18em; right:.15em; display:flex; align-items:center; justify-content:center; text-align:center; border-radius:.34em; }
}
.btn-outline-primary { border-color:var(--primary-color); color:var(--deep-primary-color);
    &:hover { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
}
.btn-outline-secondary { border-color:var(--grey-color); 
    &:hover { background:var(--grey-color); color:var(--primary-color); border-color:var(--grey-text-color); }
    &.text-light:hover { color:var(--primary-color) !important; }
}

.form-group { position:relative; }
.form-control { padding:.75em 1.2em; }
.form-select { padding:.75em 2.5em .75em 1.2em; }
.form-control.with-icon { padding-left:2.6em; background-color:var(--light-blue); border-color:var(--light-blue-hover);
    & + .fa-solid { position:absolute; height:100%; left:0; top:0; display:flex; align-items:center; justify-content:center; text-align:center; }
}

.nav-link { color:var(--primary-color); }



/*** Color Class ***/
.text-primary { color:var(--primary-color) !important; }
.mid-grey { background-color:var(--grey-color); }
.light-grey { background-color:var(--light-grey-bg); }
.light-blue { background-color:var(--light-primary-color); }
.primary-blue { background-color:var(--primary-color); }

.half-grey-orange { position:relative; background-color:var(--light-grey-bg);
    &::before { content:""; z-index:1; position:absolute; bottom:0; left:0; width:100%; height:50%; background-color:var(--gold-color); }
    .container { z-index:1; position:relative; }
}



/*** Header Area ***/
#site-header { min-height:82px;
    .main-nav { background:transparent; transition:background ease-in .2s; }
    &.sticky .main-nav { position:fixed; width:100%; top:0; z-index:100; background:#fff; }
}

.search-form { top:100%; background:#fff; z-index:100; }

.topbar { height:46px; background-color:var(--grey-color); }
.main-logo {
    img { max-height:50px; }
}
.wa-contact { color:var(--primary-color); }
.socmed a { color:var(--dark-grey-color); }



/*** Page Header ***/
.page-header { background:url('../images/page-header-bg.png') no-repeat center / cover; position:relative; min-height:300px; padding:5em 0; margin-bottom:3.5em; display:flex; align-items:center;
    &::before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--primary-color); opacity:.9; z-index:-1; }
    h1 { font-size:3.5em; font-weight:bold; color:#fff; }
}



/*** Superfish Menu ***/
.sf-menu {
    li { background:none; border:none;
        > a { position:relative; font-size:1.1em; color:var(--primary-color); border:none;
            &::before { content:""; position:absolute; bottom:0; left:.75em; height:2px; width:calc(100% - 1.5em); background:var(--grey-color); border-radius:1px; transition: background .2s ease; opacity:.3; }
        }
        &:hover { background:none; 
            a::before { background-color:var(--primary-color); opacity:1; }
        }
        ul {
            li { background:#fff;
                a { border:none; font-size:1em;
                    &::before { display:none; }
                }
                &:hover { background:var(--grey-color); }
            }
        }    
    }

}



/*** Pagination ***/
.pagination { margin:0; padding:0; list-style:none; display:flex; align-items:center; justify-content:center; text-align:center;
    li { margin:0 .25em; padding:0; display:inline-block;
        a { color:var(--primary-color); background:var(--light-grey-bg); border:1px solid var(--grey-color); padding:.5em 1em; border-radius:4px; display:inline-block;
            &:hover { background:var(--primary-color); color:#fff; }
        }
        &.active a { background:var(--primary-color); color:#fff; }
    }
}


/*** Tags ***/
.tag { margin:.1em; padding:.3em .5em; display:inline-block; color:var(--primary-color); border:1px solid var(--primary-color); border-radius:2px; display:inline-block; font-size:.8em;
    &:hover { background:var(--primary-color); color:#fff; }
}


/*** Mobile Menu ***/
#hiddenmenu {
    ul { margin:0; padding:0;
        li { list-style:none; margin:0; padding:0; overflow:hidden; position:relative; border-bottom:1px solid var(--grey-color); display:block;
            &.with-dropdown ul { height:0; position:absolute; opacity:0; left:-100vw; transition:all ease-out .2s; z-index:-100; overflow:hidden; 
                li { display:none; border:none; }
                &.active { z-index:10; height:auto; left:0; opacity:1; position:relative;
                    li { display:block; }
                }
            }
            a { padding:.45em 0; display:inline-block; }
        }
    }
    .arrow-up::before,
    .arrow-down::before { content:"\f077"; font-weight:900; font-family:'Font Awesome 6 Free'; position:absolute; top:0; right:0; display:flex; align-items:center; justify-content:center; text-align:center; height:40px; }
    .arrow-down::before { content:"\f078"; }
}



/*** Default Owl Carousel ***/
.owl-carousel .owl-nav > button[class^="owl-"] { position:absolute; top:calc(50% - 35px); left:-35px; display:block; font-size:4em; color:#fff; font-size:2em; }
.owl-carousel .owl-nav > button.owl-next { left:auto; right:-35px; }
.owl-carousel .owl-dots { display:flex; align-items:center; justify-content:center; bottom:3em; position:relative;
    .owl-dot { width:20px; aspect-ratio:1/1; background:#fff; border-radius:#eee; border-radius:50%; margin:.3em; }
}



/*** Homepage ***/
.home-hero {
    position:relative; width:100%; aspect-ratio: 16/7;
    .home-hero--slider { position:absolute; top:0; left:0; width:100%; height:100%; background-color:#f9f9f9;
        .slide { background-size:cover; background-position:center; background-repeat:no-repeat; width:100%; height:100%; 
            .thumb { position:relative; z-index:2; width:100%; aspect-ratio:16/7; overflow:hidden; background-size:cover; background-position:center; }
            .float-wrapper {  position:absolute; top:0; left:0; width:100%; height:100%; z-index:3; 
                .float-cont { background:var(--deep-primary-color); 
                    h2 { color:var(--gold-color); }
                }
            }
        }
    }
    .owl-carousel .owl-dots { bottom:160px; 
        .owl-dot { width:14px; box-shadow:0 0 5px rgba(1,1,1,.3);
            &.active { background-color:var(--light-primary-color); }
        }
    }
}
.search-section { position:relative; z-index:3; 
    .inner { position:relative; background:#fff; top:calc(-50% + 50px); margin-top:-100px; }
}
.doc-names {
    span { font-size:.8em; background:var(--grey-color); padding:.3em 1.3em; margin:0 3px .2em 3px; display:inline-block; border-radius:1em; color:var(--grey-text-color); }
}



/*** Sections ***/
.sect-cap-title { text-transform:uppercase; display:inline-block; background:var(--grey-color); padding:.45em 1.75em; margin-bottom:1em; border-radius:1em; font-size:.9em; }



/*** Our Doctor ***/
.cardlist { background-color:var(--deep-primary-color); color:#fff; 
    a { color:#fff; }
}
.cardlist.grey { background-color:var(--light-grey-bg); color:var(--primary-color); 
    a { color:var(--primary-color); }
}
.cardlist.orange { background-color:var(--gold-color); color:var(--primary-color); 
    a { color:var(--primary-color); }
}
.item-card { background:#fff; border-radius:2em; padding:2em; padding-left:120px; position:relative; color:var(--dark-grey-color); text-align:left;
    .item-card__thumb { position:absolute; top:2em; left:1em; border-radius:100%; overflow:hidden; }
    .item-card__cont {
        a { color:var(--primary-color); }
    }
    &.no-thumb { padding-left:2em; }
    &.profile-thumb { text-align:center; padding:2em; 
        .item-card__thumb { position:relative; top:unset; left:unset; margin-bottom:2em; }
    }
}


/*** Info Contact ***/
.info-contact-box { background-color:var(--deep-primary-color); color:#fff; z-index:3;
    a { color:#fff; }
    h3 { color:var(--gold-color); }
    .inner { display:flex; align-items:center; justify-content:start; padding-left:120px; height:100%; min-height:90px; position:relative; margin:5px 0;
        .inner-cont { position:relative; font-size:1.2em; 
            small { font-size:.9em; }
        }
        .icon { position:absolute; top:0; left:10px; width:90px; height:90px; background:#fff; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--primary-color); font-size:2.5em; border-radius:50%; }
    }
}



/*** Articles ***/
.news-card { display:block; }
.news-card__thumb { border-radius:1em 1em 0 0; overflow:hidden; 
    img { width:100%; object-fit:cover; }
}
.news-card__cont { background:#fff; border-radius:0 0 1em 1em; padding:1.5em; }



/*** About Us Area ***/
.about-slider { padding:1em; 
    .owl-nav > button[class^="owl-"] { left:0; background:#fff; color:var(--grey-text-color); font-size:1.2em; width:40px; aspect-ratio:1/1; display:flex; justify-content:center; align-items:center; }
    .owl-nav > button.owl-next { left:unset; right:0; }
} 




/*** Google Map ***/
.gmapl { position:relative;
    .floating { position:absolute; top:20px; left:330px; background:#fff; height:calc(100% - 40px); padding:1.5em .5em 1.5em 1.5em; overflow:hidden;
        ul.inner { overflow-y:scroll; max-width:300px; height:calc(100% - 10px); list-style:none; margin:0; padding:0; 
            li { padding-bottom:1em; margin-bottom:.5em;
                a { color:var(--dark-grey-color); display:block;
                    &:hover { color:var(--light-primary-color); }
                }
            }
        }
    }
}


.bs-datepicker { position:relative; 
    input + i { position:absolute; top:0; right:0; display:flex; align-items:center; justify-content:center; height:100%; padding:0 1em; cursor:pointer; opacity:.3; }
}



/*** Footer ***/
.footer {
    h5 { display:block; margin-bottom:.5em; }
    ul { padding:0; margin:0;
        li { list-style:none; margin:0; padding:0; 
            a { color:var(--subtle-white-text-color); display:inline-block; padding:.12em 0; position:relative; transition:color .2s ease;
                span { display:inline; background:linear-gradient(0deg, white, white) no-repeat right bottom / 0 2px; }
                &:hover { color:var(--light-primary-color); }
            }
        }
    }
}
.copyr .footer-social a { aspect-ratio:1/1; background:#ffffff40; border-radius:50%; height:2.2em; display:inline-flex; align-items:center; justify-content:center; margin:0 2px; color:#fff; line-height:1em; transition:background .3s ease;
    &:hover { background:#ffffff60; }
}


/*** Scroll to top ***/
.scroll-top { position:fixed; opacity:100; bottom:1em; right:1em; background:#fff; width:2.5em; height:2.5em; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; opacity:.5; transition:opacity .3s ease; scroll-behavior:smooth;
    &:hover { opacity:1; }
}


/*** Sticky Side Menus ***/
#sticky-side { position:fixed; top:50%;  right:0; z-index:98; border:1px solid #ffffff30; border-right:none; border-bottom:none; border-radius:.5em 0 0 .5em; overflow:hidden; transform:translate(0, -50%);
    ul { margin:0; padding:0; list-style:none;
        li { margin:0; padding:0; 
            a { background:var(--primary-color); color:#fff; transition:background ease-in-out .2s; width:80px; aspect-ratio:1/1; display:flex; justify-content:center; align-items:center; text-align:center; border-bottom:1px solid #ffffff30;
                i { font-size:1.2em; }
                small { font-size:.76em; }
                &:hover { background:var(--light-primary-color); }
            }
        }
    }
}


.radio-img {
    border: 2px solid transparent;
    cursor: pointer;
    padding: 3px;
}

input[type="radio"]:checked + .radio-img {
    border: 2px solid var(--primary-color);
}



/*** Mobile Style ***/
@media all and (max-width: 768px) {

    .owl-carousel .owl-nav > button[class^="owl-"] { left:5px; }
    .owl-carousel .owl-nav > button.owl-next { left:auto; right:5px; }


    .topbar { height:auto; }


    .home-hero { aspect-ratio:3/4.3; height:auto; position:relative;
        .home-hero--slider { position:relative; top:0; left:0; width:100%; height:100%;
            .slide { background-size:cover; background-position:center; width:100%; height:auto; 
                .thumb { aspect-ratio:3/2; }
                .float-wrapper { display:block; position:static; }
            }
        }
        .owl-carousel .owl-dots { bottom:-8px; 
            .owl-dot { background:#d1d1d1; box-shadow:none; }
        }
    }
    


    .search-section {
        .inner { display:block; margin-bottom:0; margin-top:0; top:0; }
    }

    .page-header h1 { font-size:2em; }

    .gmapl { 
        .floating { position:relative; left:0; aspect-ratio:1/1;width:100%;
            ul.inner { max-width:100%; }
        }
    }

}