@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
:root{
    --primary-font: "Poppins", sans-serif;
    --secondary-font: "Figtree", sans-serif;
    --primary-color: #274760;
    --secondary-color: #307BC4;
    --primary-gradient-bg-color: linear-gradient(134deg,#307bc4,#274760);
    --primary-repeat-gradient-bg-color: linear-gradient(134deg,#274760, #307bc4);
    --text-color: #7d91a0;
    --box-shadow: 0 4px 21px 1px rgba(48,123,196,.1);
}
html,
body{
    overflow-x: hidden;
    width: 100%;
}
body::-webkit-scrollbar{
    width: 5px;
    background: #000;
}
body::-webkit-scrollbar-thumb{
    background: #f5f5f5;
}
.padding0{padding: 0;}
a{text-decoration: none;color: #000; display: block;}
ul{padding: 0; margin: 0; list-style-type: none;}
p,h1,h2,h3,h4,h5,h6{margin: 0;}
h2 i{
    color: var(--third-color);
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}
.tagline{font-size: 16px;font-weight: 400;text-transform: uppercase;letter-spacing: 1px;margin: 0 0 10px;display: inline-block;color: #000000;}
.tagline img{width: 30px;margin-right: 10px;}
.msgbox{
    position: fixed;
    bottom: 0px;
    z-index: 99;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    transition: .3s linear;
    opacity: 0;
    pointer-events: none;
}
.msgbox.active{
    bottom: 20px;
    opacity: 1;
    pointer-events: auto;
}
.msgbox .loading-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    border-radius: 3px;
    width: 100%;
    background: var(--primary-repeat-gradient-bg-color);
}
.msgbox .loading-wrapper .loading_span{
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    display: inline-block;
    border-radius: 50px;
    border-top: 1px solid transparent;
    animation: circle .5s linear infinite;
}
@keyframes circle{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
.msgbox .loading-wrapper p{
    font-size: 15px;
}
.msgbox .alertdiv{
    background: var(--primary-repeat-gradient-bg-color);
    padding: 16px  20px;
    text-align: center;
    border-radius: 5px;
}
.msgbox .alertdiv:before{
    content: "";
    width: 100%;
    height: 3px;
    background: var(--primary-color);
    position: absolute;
    bottom: 0;
    left: 0;
    transform-origin: left;
}
.msgbox .alertdiv.active:before{
    animation: lineless 1.5s linear;
}
@keyframes lineless {
    100%{transform: scaleX(0);}
}
.msgbox .alertdiv.success{}
.msgbox .alertdiv.failed{}
.msgbox .alertdiv p{color: #fff;margin: 0;font-size: 15px;letter-spacing: .5px;}
.msgbox .alertdiv p i{margin-right: 5px;color: #fff;}
.msgbox .alertdiv.success p{}
.msgbox .alertdiv.failed p{}
.padd0{padding: 0;}

.maintitle{
    margin: 0 0 90px;
}
.maintitle h2{
    font-size: 56px;
    position: relative;
    z-index: 1;
    color: var(--primary-color);
    text-align: center;
    text-transform: capitalize;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: var(--secondary-font);
}
.maintitle span{
    font-size: 26px;
    text-transform: uppercase;
    color: var(--secondary-color);
    font-weight: 600;
    font-family: var(--secondary-font);
}
.maintitle p{
    color: var(--text-color);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .5px;
    margin: auto;
}
.pagebtn{
    background: var(--primary-gradient-bg-color);
    padding: 12px 40px;
    border-radius: 50px;
    color: #fff;
    font-size: 15px;
    font-family: var(--secondary-font);
    margin: auto;
}
.pagebtn:hover{
    background: var(--primary-repeat-gradient-bg-color);
}

.breadcrumb-page{
}
.breadcrumbbox{
    display: flex;
    align-items: start;
    justify-content: start;
    padding: 10px 0;
    flex-direction: column;
}
.breadcrumbbox h3{
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: var(--secondary-font);
    color: #fff;
    font-size: 26px;
    display: none;
}
.breadcrumbbox ul{
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 50px;
    background: rgb(255 255 255 / 10%);
}
.breadcrumbbox ul li{
    font-size: 14px;
    font-weight: 600;
    display: flex;
    gap: 5px;
    align-items: center;
    color: #000;
}
.breadcrumbbox ul li:not(:last-child):after{
    content: "/";
    color: var(--secondary-color);
}
.breadcrumbbox ul li a{color: var(--secondary-color);font-weight: 500;}



header{
    z-index: 9;
    transition: .3s linear;
    background: transparent;
    padding: 30px 0;
    position: fixed;
    width: 100%;
}
header.fix{
    box-shadow: 0 2px 10px -6px;
    background: #fff;
}
.topheader{
    background: #000;
    padding: 5px 10px;
}
.topheader span{
    color: #a6a6a6;
    font-size: 13px;
    font-weight: 600;
}
.topheader span a{
    color: #a6a6a6;
    display: inline-block;
}
.weblogo{display: block;}
.weblogo img{width: 200px;}
.searchwrapper{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255 255 255);
    z-index: 2;
    padding: 10% 10% 2%;
    overflow: auto;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    display: none;
}
.searchwrapper.active{
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}
.searchwrapper::-webkit-scrollbar{
    width: 0;
}
.searchresult{}
.searchresult a{
    font-size: 15px;
    margin: 0 0 5px;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.searchresult a .icon{
    background: #eee;
    display: inline-flex;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    width: 40px;
    aspect-ratio: 1/1;
}
.searchresult a .icon img{width: 20px;}
.getsearch{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 50px;
    position: relative;
    z-index: 99;
    height: 100%;
}
.getsearch .searchbox{
    flex-basis: 100%;
    position: relative;
    z-index: 1;
}
.getsearch .searchbox input{
    padding: 6px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    width: 100%;
    outline: none;
}
.getsearch .searchbox input::placeholder{
    color: #999;
    font-size: 14px;
}

.getsearch .searchbox input:focus{
    border: 1px solid var(--secondary-color);
}
.getsearch .searchbox input:focus::placeholder{
    color: var(--secondary-color);
}
.getsearch .searchbox button{
    outline: none;
    background: none;
    border: none;
    color: var(--secondary-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 14px;
}
.getbtnactions{
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 15px;
    height: 100%;
}
.getbtnactions .getbtn{font-size: 25px;color: var(--primary-color); position: relative; z-index: 9;}
.getbtnactions .getbtn.userlogin{display: none;}
.getbtnactions .getbtn.userlogin:before{
    content: attr(data-tooltip);
    position: absolute;
    background: var(--primary-color);
    border-radius: 5px;
    font-size: 15px;
    color: #fff;
    padding: 5px 15px;
    top: 114%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.getbtnactions .getbtn.userlogin:after{
    content: "";
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.getbtnactions .getbtn.userlogin:hover:after,
.getbtnactions .getbtn.userlogin:hover:before{
    opacity: 1;
    pointer-events: none;
    visibility: visible;
}

.menubox{
    display: flex;
    gap: 35px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding-left: 15%;
}
.menubox .menulist{
    position: relative;
    z-index: 1;
}
.menubox .menulist .menulink{
    font-size: 16px;
    font-weight: 400;
    padding: 12px 0;
    color: var(--primary-color);
    white-space: nowrap;
    transition: .3s linear;
    letter-spacing: .5px;
    text-transform: capitalize;
}
.menubox .menulist .menulink:hover{
    color: var(--secondary-color);
}
.menubox .menulist .searchicon{color: #fff; margin-right: 15px;}
.menubox .menulist .searchicon:hover{color: var(--secondary-color);}
.submenu{position: absolute;top: 100%;background: #fff;min-width: 250px;margin: 20px 0 0;z-index: 99999999999999;left: 0;transition: .3s linear;opacity: 0;visibility: hidden;pointer-events: none;border-radius: 16px;box-shadow: var(--box-shadow);padding: 10px 0;}
.menulist:hover .submenu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    margin: 0 0 0;
}
.submenu .sublist{
    padding: 5px 0;
}
.submenu .sublist .sublink{
    font-size: 16px;
    font-weight: 400;
    transition: .3s linear;
    color: var(--primary-color);
    white-space: nowrap;
    padding: 3px 20px;
}
.submenu .sublist .sublink:hover{
    color: var(--secondary-color);
}
.submenu:before{
    content: "";
}



.activeshadow{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9;
    background: hsla(0,0%,4%,.5);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    cursor: zoom-out;
}
.activeshadow.active{
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
.searchpanel{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    background: #fff;
    padding: 50px 0px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.searchpanel.active{
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
.searchpanel .searchpanelclose{
    font-size: 30px;
    line-height: 1;
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    transition: .3s linear;
    
}
.searchpanel .searchpanelclose:hover{
    transform: translateY(-50%) rotate(90deg);
}
.searchpanel form{}
.searchpanel form .fields{
    position: relative;
    z-index: 1;
    width: 80%;
    margin: auto;
    border: 1px solid var(--secondary-color);
    border-radius: 50px;
    overflow: hidden;
}
.searchpanel form .fields input{
    outline: none;
    border: none;
    width: 100%;
    padding: 25px 40px;
}
.searchpanel form .fields input::placeholder{
    color: var(--text-color);
    font-size: 20px;
}
.searchpanel form .fields button{
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    outline: none;
    border: none;
    background: none;
    font-size: 30px;
}
.searchpanel form .fields button:hover{}



.slidepanel{
    position: fixed;
    top: 0;
    right: -600px;
    width: 45%;
    background: #fff;
    height: 100%;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: .3s linear;
    padding: 80px;
    overflow: auto;
}
.slidepanel.active{
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    right: 0;
}
.slidepanel .sidepanelclose{
    font-size: 30px;
    margin: 0 0 25px;
}
.slidepanel .weblogo{
    margin: 0 0 20px;
}
.slidepanel .weblogo img{
    width: 150px;
}
.slidepanel > span{
    font-size: 22px;
    font-family: var(--secondary-font);
    color: var(--primary-color);
    font-weight: 500;
}
.slidepanel .sidecontinfo{
    padding: 50px 0;
    margin: 30px 0;
    border-top: 1px solid var(--text-color);
    border-bottom: 1px solid var(--text-color);
}
.slidepanel .sidecontinfo .sidecontinfobox{
    background: #E8F4F7;
    margin: 0 0 30px;
    padding: 40px 30px;
    border-radius: 25px;
    position: relative;
    z-index: 1;
    padding-left: 28%;
}
.slidepanel .sidecontinfo .sidecontinfobox .icon{
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
}
.slidepanel .sidecontinfo .sidecontinfobox .icon i{
    font-size: 50px;
    color: var(--secondary-color);
}
.slidepanel .sidecontinfo .sidecontinfobox span{
    font-size: 20px;
    font-weight: 600;
}
.slidepanel .sidecontinfo .sidecontinfobox p,
.slidepanel .sidecontinfo .sidecontinfobox a{}
.slidepanel .sidecontinfo .sidecontinfobox a:hover{}
.slidepanel .sidecontinfo .subscribebox{
    margin: 50px 0 0;
}
.slidepanel .sidecontinfo .subscribebox h2{
    font-size: 28px;
    font-family: var(--secondary-font);
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 10px;
}
.slidepanel .sidecontinfo .subscribebox p{
    margin: 0 0 020px;
    color: var(--text-color);
}
.slidepanel .sidecontinfo .subscribebox .subscribe{}
.slidepanel .sidecontinfo .subscribebox .subscribe form{}
.slidepanel .sidecontinfo .subscribebox .subscribe form .fields{
    position: relative;
    z-index: 1;
}
.slidepanel .sidecontinfo .subscribebox .subscribe form .fields input{
    width: 100%;
    padding: 20px;
    border-radius: 50px;
    outline: none;
    border: 1px solid var(--secondary-color);
    padding-right: 165px;
    background: transparent;
}
.slidepanel .sidecontinfo .subscribebox .subscribe form .fields button{
    margin: auto;
    outline: none;
    border: none;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
}
.slidepanel .sidecontinfo .subscribebox .subscibe form .fields button:hover{}

.slidepanel .sidesocial{
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 60px 0 0;
}
.slidepanel .sidesocial span{
    font-size: 15px;
    display: inline-block;
    color: var(--primary-color);
    font-weight: 300;
}
.slidepanel .sidesocial .social{
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 15px;
    height: 100%;
}
.slidepanel .sidesocial .social a{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    width: 30px;
    height: 30px;
    background: var(--primary-color);
    border-radius: 50px;
    color: #fff;
    transition: .3s linear;
}
.slidepanel .sidesocial .social a:hover{
    opacity: 1;
    transform: scale(1.2);
    background: var(--secondary-color);
}





/* ============== slider widget start ============= */
.sliderwidget{
    width: 100%;
    background: url('../images/banner/bannerimg.webp');
    background-size: cover;
    position: relative;
    z-index: 1;
}
.sliderwidget .mainslider{
    display: flex;
    align-items: start;
    justify-content: start;
    padding: 15% 10%;
    flex-direction: column;
}
.sliderwidget .mainslider h3{
    color: var(--primary-color);
    font-size: 70px;
    font-weight: 600;
    width: 70%;
    line-height: 1.3;
}
.sliderwidget .mainslider p{
    color: var(--primary-color);
    font-size: 20px;
    padding: 20px 0 0;
    width: 55%;
}
.sliderwidget .overlayimg{
    position: absolute;
    bottom: 0;
    right: 5%;
}
.sliderwidget .overlayimg img{width: 100%;}

/* ============== slider widget end ============= */




.homecontinfo-wrapper{
    margin: -100px 0 0;
}
.homecontinfo-wrapper .homecontinfo-box{
    background: #fff;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    padding: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    box-shadow: var(--box-shadow);
}
.homecontinfo-wrapper .homecontinfo-box .box{
    position: relative;
    z-index: 1;
    padding-left: 80px;
}
.homecontinfo-wrapper .homecontinfo-box .box.box3{padding: 0;}
.homecontinfo-wrapper .homecontinfo-box .box .icon{
    width: 70px;
    aspect-ratio: 1/1;
    border-radius: 50px;
    background: var(--secondary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.homecontinfo-wrapper .homecontinfo-box .box .icon i{
    font-size: 28px;
}
.homecontinfo-wrapper .homecontinfo-box .box span{
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .5px;
}
.homecontinfo-wrapper .homecontinfo-box .box a{
    color: var(--text-color);
    font-size: 20px;
}
.homecontinfo-wrapper .homecontinfo-box .box a.booknow{
    font-size: 15px;
    font-family: var(--secondary-font);
    margin: auto;
    color: #fff;
}
.homecontinfo-wrapper .homecontinfo-box .box a.booknow:hover{}





/* ============== values widget start ============= */

.values-widget{
    padding: 70px 0;
    position: relative;
    z-index: 1;
}
.values-widget:before{
    content: "";
    background: radial-gradient(42.35% 42.35% at 50% 50%,rgba(134,187,241,.38) 0,rgba(134,187,241,0) 100%);
    border-radius: 50%;
    height: 1884px;
    opacity: .6;
    position: absolute;
    right: -37%;
    top: 31%;
    width: 1884px;
    z-index: -1
}
.values-widget .maintitle{}
.values-widget .maintitle h3{}
.shopcategory{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.values-widget .gridbox{}
.values-widget .gridbox .valuesbox{
    box-shadow: var(--box-shadow);
    margin: 0 0 50px;
    padding: 60px 30px;
    border-radius: 25px;
    background: #fff;
}
.values-widget .gridbox:nth-child(3) .valuesbox{margin: -30px 0 0;}
.values-widget .gridbox .valuesbox .innerbox{
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 0 0 30px;
    position: relative;
    z-index: 1;
}
.values-widget .gridbox .valuesbox .innerbox:before{
    content: "";
    width: 130%;
    height: 150%;
    background: #86bbf1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: -1;
    border-radius: 25px;
    transition: .3s linear;
    opacity: 0;
}
.values-widget .gridbox .valuesbox:hover .innerbox:before{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    
}
.values-widget .gridbox .valuesbox .innerbox .icon{
    width: 50px;
    aspect-ratio: 1/1;
    background: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    flex: 1 0 50px;
}
.values-widget .gridbox .valuesbox .innerbox .icon img{width: 50%;}
.values-widget .gridbox .valuesbox .innerbox h3{
    font-size: 32px;
    color: var(--primary-color);
    font-weight: 500;
    line-height: 1.2;
    flex: 0 1 calc(100% - 70px);
}
.values-widget .gridbox .valuesbox p{
    color: var(--text-color);
    font-size: 16px;
    text-align: center;
    line-height: 1.8;
}

/* ============== shop by category widget end ============= */



.homeaboutus{
    position: relative;
    z-index: 1;
}
.homeaboutus-shape{
    background: radial-gradient(42.35% 42.35% at 50% 50%,rgba(134,187,241,.38) 0,rgba(134,187,241,0) 100%);
    border-radius: 50%;
    height: 1884px;
    opacity: .6;
    position: absolute;
    right: -37%;
    top: 31%;
    width: 1884px;
    z-index: -1
}
.homeaboutus-left{
    position: relative;
    z-index: 1;
}
.homeaboutus-left > img{
    width: 100%;
}
.homeaboutus-left .overlaybox{
    position: absolute;
    right: 5%;
    top: -75px;
}
.homeaboutus-left .overlaybox img{
    animation: rotate360 15s linear infinite;
}
@keyframes rotate360 {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}
.homeaboutus-left .overlaybox svg{
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--secondary-color);
}
.homeaboutus-right{padding-left: 90px;height: 100%;display: flex;align-items: start;justify-content: center;flex-direction: column;}
.homeaboutus-right .maintitle{
    text-align: start;
}
.homeaboutus-right .maintitle h2{
    align-items: start;
    justify-content: start;
}
.homeaboutus-right .maintitle span{}
.homeaboutus-right .aboutus-content{
    padding-left: 50px;
}
.homeaboutus-right .aboutus-content h4{
    color: var(--text-color);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.3;
    margin: 0 0 30px;
    position: relative;
    z-index: 1;
}
.homeaboutus-right .aboutus-content h4:before{
    content: "\f138";
    font-family: 'bootstrap-icons';
    position: absolute;
    left: -13%;
    top: -4px;
    font-size: 40px;
    color: var(--secondary-color);
    line-height: 1;
}
.homeaboutus-right .aboutus-content p{
    color: var(--text-color);
}



.departments{
    padding: 15% 10% 5%;
    position: relative;
    z-index: 1;
}
.departments:before{
    content: "";
    width: 82%;
    height: 65%;
    background: url('../images/departmentsbg.svg');
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    border-radius: 25px;
}
.departments .maintitle{}
.departments .maintitle h2{
    color: #fff;
}
.departmentbox{
    background: #fff;
    width: 100%;
    text-align: center;
    margin: 0 0 30px;
    padding: 40px;
    border-radius: 25px;
    box-shadow: var(--box-shadow);
    transition: .3s linear;
}
.departmentbox:hover{
    background: var(--secondary-color);
    margin: -20px 0 0;
}
.departmentbox .icon{}
.departmentbox .icon img{}
.departmentbox:hover .icon img{
    filter: brightness(0) invert(1);
}
.departmentbox span{
    font-size: 20px;
    display: inline-block;
    font-weight: 500;
    font-family: var(--secondary-font);
    color: var(--primary-color);
    margin: 20px 0 0;
}
.departmentbox:hover span{color: #fff;}

.awards-widget{}
.awards-widget .maintitle{
    margin: 0 0 60px;
}
.awards-widget .maintitle h2{align-items: start;justify-content: start;}


.awardsbox{
    box-shadow: var(--box-shadow);
    padding: 30px;
    border-radius: 25px;
    height: 90%;
    margin: 0 0 20px;
}
.awardsbox .innerbox{margin: 0 0 30px;display: flex;align-items: center;justify-content: start;gap: 20px;}
.awardsbox .innerbox .icon{aspect-ratio: 1/1;background: var(--secondary-color);display: flex;align-items: center;justify-content: center;border-radius: 10px;flex: 0 0 90px;}
.awardsbox .innerbox .icon img{
    width: 60%;
}
.awardsbox .innerbox h3{
    color: var(--primary-color);
    flex: 0 0 calc(65% - 100px);
    font-family: var(--secondary-font);
    font-size: 20px;
    font-weight: 500;
}
.awardsbox p{
    color: var(--text-color);
    font-size: 16px;
    font-weight: 400;
}


.reviews-widget{
    padding: 100px 0;
}
.reviews-widget .maintitle{
    text-align: center;
}
.reviews-widget .maintitle h2{}
.reviews-widget .maintitle span{}
.reviews-left{
    position: relative;
    z-index: 1;
    padding: 30px 0;
}
.reviews-left:before{
    content: "";
    width: 1px;
    height: 100%;
    background: var(--secondary-color);
    position: absolute;
    top: 0;
    right: 0;
}
.reviews-left .reviewuser{
    position: relative;
    z-index: 1;
}
.reviews-left .reviewuser:before{
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: var(--secondary-color);
    border-radius: 50px;
    transition: .3s linear;
}
.reviews-left .reviewuser.active:before{
    transform: scale(1.8);
}
.reviews-left .reviewsbox{position: relative;z-index: 1;display: flex;align-items: center;gap: 20px;padding: 20px 30px;border-radius: 10px;width: 300px;}
.reviews-left .reviewuser.active .reviewsbox{box-shadow: var(--box-shadow);}
.reviews-left .reviewsbox:nth-child(even){
    margin-left: 120px;
}
.reviews-left .reviewuser:nth-child(even){
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px 0;
}
.reviews-left .reviewuser:nth-child(3){}
.reviews-left .reviewuser:nth-child(4){}
/* .reviews-left .reviewsbox:before{
    content: "";
    width: 12px;
    height: 12px;
    background: var(--secondary-color);
    position: absolute;
    top: 50%;
    left: 188%;
    transform: translateY(-50%);
    border-radius: 50px;
}
.reviews-left .reviewsbox.active:before{
    left: 186.7%;
}
.reviews-left .reviewsbox:nth-child(even):before{
    left: 146.8%;
}
.reviews-left .reviewsbox.active:nth-child(even):before{
    left: 147%;
}
.reviews-left .reviewsbox:nth-child(even):after{
    left: 150%;
}
.reviews-left .reviewsbox.active:before{width: 20px; height: 20px;} */
/* .reviews-left .reviewsbox:last-child{margin: 0;}
.reviews-left .reviewsbox:after{
    content: "";
    width: 1px;
    height: 200%;
    background: var(--secondary-color);
    position: absolute;
    top: 50%;
    left: 190%;
    transform: translateY(-50%);
} */
.reviews-left .reviewsbox .icon{}
.reviews-left .reviewsbox .icon img{
    width: 70px;
}
.reviews-left .reviewsbox .content{}
.reviews-left .reviewsbox .content h4{
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 22px;
    color: var(--primary-color);
}
.reviews-left .reviewsbox .content span{
    color: var(--text-color);
    font-size: 16px;
}
.reviews-right{
    padding-left: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.reviews-right .bi-quote{
    font-size: 50px;
    position: absolute;
    top: 16%;
    left: 15%;
    color: var(--secondary-color);
}
.reviews-right .content{display: none;}
.reviews-right .content.active{display: block;}
.reviews-right .content p{
    line-height: 2;
    color: var(--text-color);
}
.reviews-right .rating{
    margin: 20px 0 0;
    display: flex;
    gap: 15px;
    color: var(--secondary-color);
}
.reviews-right .rating i{}


.appointmentbanner{
    padding: 100px 0;
}
.appointmentbanner .appointmentbanner-box{
    background: url('../images/appointmentbg.svg');
    padding: 100px 70px;
    border-radius: 25px;
    position: relative;
    z-index: 1;
    background-size: cover;
}
.appointmentbanner .appointmentbanner-box h3{
    color: #fff;
    font-size: 56px;
    font-family: var(--secondary-font);
    width: 60%;
    font-weight: 600;
    margin: 0 0 20px;
}
.appointmentbanner .appointmentbanner-box p{
    color: var(--primary-color);
    font-weight: 500;
    width: 50%;
    font-size: 20px;
}
.appointmentbanner .appointmentbanner-box img{
    position: absolute;
    top: -30%;
    right: -1%;
    width: 48%;
}
.appointment-right{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.appointment-right img{width: 80%;margin-left: auto;border-radius: 25px;}

.latestblogs{
    padding: 50px 0;
}
.latestblogs .maintitle{
    text-align: center;
}
.latestblogs .maintitle span{}
.latestblogs .maintitle h2{}

.blogbox{
    box-shadow: var(--box-shadow);
    border-radius: 25px;
    padding: 0 0 30px;
    transition: .3s linear;
    margin: 0 0 30px;
}
.blogbox:hover{
    margin: -20px 0 0;
}
.blogbox .blogimg{
    border-radius: 25px;
    height: 250px;
    overflow: hidden;
}
.blogbox .blogimg img{
    width: 100%;
    border-radius: 20px;
}
.blogbox .blogsocial{
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.blogbox .blogsocial span{
    color: var(--text-color);
    font-size: 15px;
}
.blogbox .blogsocial .social{
    display: flex;
    gap: 15px;
}
.blogbox .blogsocial .social a{
    width: 30px;
    height: 30px;
    border: 1px solid var(--secondary-color);
    font-size: 15px;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    transition: .3s linear;
}
.blogbox .blogsocial .social a:hover{
    color: #fff;
    background: var(--secondary-color);
}
.blogbox .blogtitle{
    margin: 0 20px;
    font-size: 26px;
    font-family: var(--secondary-font);
    color: var(--primary-color);
    font-weight: 600;
    line-height: 1.2;
    transition: .3s linear;
}
.blogbox .blogtitle:hover{
    color: var(--secondary-color);
}
.blogbox .learnmore{
    margin: 20px 20px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-color);
    transition: .3s linear;
}
.blogbox .learnmore:hover{
    color: var(--secondary-color);
    text-decoration: underline;
}


.innerblog-content{}
.innerblog-content .date{
    margin: 0 0 20px;
}
.innerblog-content .date span{
    color: var(--text-color);
}
.innerblog-content figure{}
.innerblog-content figure img{width: 100%; border-radius: 50px;}
.innerblog-desc{}
.innerblog-desc h3{
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 20px 0 10px;
    font-family: var(--secondary-font);
}
.innerblog-desc p{
    font-size: 18px;
    color: var(--text-color);
}
.innerblog-desc ul{}
.innerblog-desc ul li{
    font-size: 18px;
    color: var(--text-color);
    padding: 0 0 10px;
}
.innerblog-desc ul li strong{
    font-weight: 500;
    color: var(--primary-color);
}


.appointment-widget{
    padding: 100px 0;
    position: relative;
    z-index: 1;
}
.appointmentshap{
    position: absolute;
    right: -34%;
    top: 15%;
    z-index: -1;
}
.appointmentshap svg{}
.appointment-widget .maintitle{
    margin: 0 0 50px;
}
.appointment-widget .maintitle span{}
.appointment-widget .maintitle h2{
    align-items: start;
    justify-content: start;
}

.appointmentfrm{}
.appointmentfrm form{}
.appointmentfrm form .fields{
    margin: 0 0 40px;
}
.appointmentfrm form .fields > label{
    color: var(--primary-color);
    margin: 0 0 10px;
}
.appointmentfrm form .fields > label span{
    color: red;
}
.appointmentfrm form .fields input{}
.appointmentfrm form .fields :is(input, select, textarea){
    width: 100%;
    border: 1px solid #307bc46b;
    padding: 18px 20px;
    border-radius: 15px;
    outline: none;
}
.appointmentfrm form .fields :is(input, select, textarea):focus{}
.appointmentfrm form .fields select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;

    /* Custom Arrow */
    background-image: url('../images/down-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 19px;
}
.appointmentfrm form .fields.radio-fields{}

.appointmentfrm form .fields.radio-fields .radio-checkbox{
    display: flex;
    flex-wrap: wrap;
}
.appointmentfrm form .fields.radio-fields .radio-checkbox label{
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color);
    position: relative;
    z-index: 1;
    padding-left: 30px;
    flex: 0 0 40%;
    white-space: nowrap;
    margin: 0 0 10px;
}
.appointmentfrm form .fields.radio-fields .radio-checkbox label:last-child{margin: 0;}
.appointmentfrm form .fields.radio-fields .radio-checkbox label:before{
    content: "";
    width: 15px;
    height: 15px;
    background: var(--secondary-color);
    display: inline-block;
    border-radius: 50px;
    position: absolute;
    top: 50%;
    left: 2.5px;
    transform: translateY(-50%) scale(0);
    transition: .3s linear;
}
.appointmentfrm form .fields.radio-fields .radio-checkbox label:has(input:checked):before{
    transform: translateY(-50%) scale(1);
}
.appointmentfrm form .fields.radio-fields .radio-checkbox label:after{
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50px;
    border: 1px solid var(--secondary-color);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.appointmentfrm form .fields.radio-fields .radio-checkbox label input{
    font-size: 38px;
    width: 25px;
    display: none;
}
.appointmentfrm form .fields-btn{}
.appointmentfrm form .fields-btn button{
    margin: auto;
    outline: none;
    border: none;
}
.appointmentfrm form .fields-btn button:hover{}



.faqs{}
.faqs .maintitle{
    text-align: center;
    margin: 0 0 60px;
}
.faqs .maintitle span{}
.faqs .maintitle h2{}
.faqouterbox{}
.faqouterbox .faqbox{
    border-radius: 15px;
    border: 1px solid #d2eaef;
    padding: 15px 20px;
    margin: 0 0 20px;
    transition: .3s linear;
}
.faqouterbox .faqbox.active{
    background: #d2eaef;
    margin: 0 0 20px 30px;
}
.faqouterbox .faqbox > a{
    font-size: 20px;
    font-weight: 500;
    color: var(--primary-color);
    position: relative;
    z-index: 1;
    font-family: var(--secondary-font);
}
.faqouterbox .faqbox a svg{
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
}

.faqouterbox .faqbox > a svg {
    transition: transform 0.3s ease;
     /* Active: up */
}

.faqouterbox .faqbox.active > a svg {
    transform: translateY(-50%) rotate(180deg); /* Default: down */
}

.faqbox .faq_content{
    display: none;
    padding: 20px 0 0;
}
.faqbox .faq_content p{
    font-size: 16px;
    color: var(--primary-color);
}


.clients-widget{
    padding: 100px 0 200px;
}
.clientbox{
    margin: 0 0 30px;
}
.clientbox img{width: 80%;margin: auto;}



footer{
    background: url('../images/footerbg.svg');
    background-size: cover;
    background-position: 53% 0%;
    position: relative;
    z-index: 1;
    padding: 230px 0 0;
}
footer > svg{
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    /* display: none; */
}
footer .footeroverlay{
    position: absolute;
    left: 50%;
    top: -4%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
footer .footeroverlay img{
    width: 110%;
    animation: spinAnimaiton 6s linear infinite;
}
@keyframes spinAnimaiton {
    0% {
        transform: rotateX(-20deg) rotateY(0deg)
    }

    75% {
        transform: rotateX(-20deg) rotateY(1turn)
    }

    to {
        transform: rotateX(-20deg) rotateY(1turn)
    }
}
footer .footeroverlay span{
    font-size: 36px;
    color: #fff;
    font-family: var(--secondary-font);
}
.footerbox{}
.footerbox h3{
    margin: 0 0 60px;
    font-size: 20px;
    width: 80%;
    color: var(--primary-color);
}
.footerbox .continfo{
    padding-right: 15px;
}
.footerbox .continfo a{
    color: var(--primary-color);
    font-weight: 400;
    margin: 0 0 20px;
    position: relative;
    z-index: 1;
    padding-left: 35px;
}
.footerbox .continfo a:last-child{margin: 0;}
.footerbox .continfo a i{
    width: 25px;
    height: 25px;
    display: inline-block;
    font-size: 12px;
    background: var(--secondary-color);
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 5px;
    position: absolute;
    left: 0;
    top: 0;
}
.footerbox ul{}
.footerbox ul li{
    margin: 0 0 18px;
}
.footerbox ul li a{
    font-size: 16px;
    color: var(--primary-color);
}
.footerbox ul li a:hover{
    color: var(--secondary-color);
}
.footerbox h2{
    font-size: 34px;
    font-family: var(--secondary-font);
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 10px;
}
.footerbox p{
    color: var(--primary-color);
    margin: 0 0 020px;
}
.footerbox .subscribe{}
.footerbox .subscribe form{}
.footerbox .subscribe form .fields{
    position: relative;
    z-index: 1;
}
.footerbox .subscribe form .fields input{
    width: 100%;
    padding: 20px;
    border-radius: 50px;
    outline: none;
    border: 1px solid var(--secondary-color);
    padding-right: 165px;
    background: transparent;
}
.footerbox .subscribe form .fields button{
    margin: auto;
    outline: none;
    border: none;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
}
.footerbox .subscibe form .fields button:hover{}

.copyright{
    background: var(--secondary-color);
    padding: 30px 0;
    margin: 30px 0 0;
}
.copyright .copyright-left{
    height: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
}
.copyright .copyright-left span{
    font-size: 15px;
    display: inline-block;
    color: #fff;
    font-weight: 300;
}
.copyright .copyright-left .social{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px;
    height: 100%;
}
.copyright .copyright-left .social a{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50px;
    color: var(--secondary-color);
    opacity: .5;
    transition: .3s linear;
}
.copyright .copyright-left .social a:hover{
    opacity: 1;
    transform: scale(1.2);
}
.copyright .copyright-right{
    width: 80%;
    margin-left: auto;
}
.copyright .copyright-right p{
    color: #ffffff69;
    font-size: 15px;
}
.copyright .copyright-right p a{
    display: inline-block;
    color: #fff;
    transition: .3s linear;
}
.copyright .copyright-right p a:hover{
    color: var(--primary-color);
}






/* ======================= about us page start here ============================ */
.aboutus-first-widget{
    width: 100%;
    background: url('../images/banner/bannerimg.webp');
    background-size: cover;
    position: relative;
    z-index: 1;
    padding: 13% 0 0;
}
.aboutwidget-left{
    position: relative;
    z-index: 1;
}
.aboutwidget-left img{width: 120%;transform: translateX(-20%);}

.aboutwidget-right{
    padding: 10% 0 0;
}
.aboutwidget-right h3{
    font-size: 56px;
    font-family: var(--secondary-font);
    color: var(--primary-color);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 15px;
}
.aboutwidget-right p{
    font-size: 18px;
    color: var(--primary-color);
}


.aboutus-services-widget{
    padding: 9% 0;
    position: relative;
    z-index: 1;
}
.aboutus-services-widget .maintitle{}
.aboutus-services-widget .maintitle span{}
.aboutus-services-widget .maintitle h2{
    text-align: start;
}
.aswbox{
    background: #fff;
    width: 100%;
    margin: 0 0 30px;
    padding: 30px 30px 50px;
    border-radius: 25px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.aswbox .icon{
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background: var(--secondary-color);
    display: grid;
    place-items: center;
}
.aswbox .icon img{
    width: 25px;
    filter: brightness(0) invert(1);
}
.aswbox span{
    display: inline-block;
    font-weight: 700;
    color: var(--primary-color);
    margin: 20px 0 15px;
    font-size: 26px;
    font-family: var(--secondary-font);
}
.aswbox p{color: var(--text-color);line-height: 1.6;}
.aswbox .aswboxlink{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70px;
    height: 50px;
    background: #307bc463;
    z-index: 9;
    border-radius: 10px 0 0 0;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    transition: .3s linear;
}
.aswbox .aswboxlink:hover{
    background: var(--secondary-color);
}
.aswbox .aswboxlink svg{position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%;transition: .3s linear;}
.aswbox .aswboxlink svg:nth-child(1){
    left: -50%;
}
.aswbox:hover .aswboxlink svg:nth-child(1){
    left: 50%;
}
.aswbox .aswboxlink svg:nth-child(2){}
.aswbox:hover .aswboxlink svg:nth-child(2){left: 130%;}
.aswbox .aswboxlink:hover{}


.aboutus-choose{
    position: relative;
    z-index: 0;
}
.aboutus-choose .chooseshape{
    background: radial-gradient(42.35% 42.35% at 50% 50%,rgba(134,187,241,.38) 0,rgba(134,187,241,0) 100%);
    border-radius: 50%;
    height: 1884px;
    opacity: .6;
    position: absolute;
    right: -37%;
    top: -59%;
    width: 1884px;
    z-index: -1
}
.aboutus-choose .acleft{overflow: hidden; border-radius: 25px;}
.aboutus-choose .acleft img{width: 125%;transform: translateX(-50px);}
.aboutus-choose .acright{
    padding-left: 5%;
}
.aboutus-choose .acright .maintitle{}
.aboutus-choose .acright .maintitle h2{
    justify-content: start;
}

.acbox{
    width: 100%;
    margin: 0 0 30px;
    position: relative;
    z-index: 1;
}
.acbox .icon{
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background: var(--secondary-color);
    display: grid;
    place-items: center;
}
.acbox .icon img{
    width: 15px;
    filter: brightness(0) invert(1);
}
.acbox span{
    display: inline-block;
    font-weight: 600;
    color: var(--primary-color);
    margin: 20px 0 15px;
    font-size: 26px;
    font-family: var(--secondary-font);
    line-height: 1.3;
}
.acbox p{color: var(--text-color);line-height: 1.6;}

.infocounter{
    padding: 100px 0;
    position: relative;
    z-index: 1;
}
.infocounter .counterouter{
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 2%;
    background: url('../images/aboutus/counterbg.webp');
    padding: 70px 60px;
    border-radius: 40px;
    background-size: cover;
}
.infocounter .counterouter .counterbox{
    text-align: center;
}
.infocounter .counterouter .counterbox h3{
    font-weight: 700;
    font-family: var(--secondary-font);
    font-size: 56px;
    color: var(--primary-color);
}
.infocounter .counterouter .counterbox p{
    margin: 15px 0 0;
    color: var(--primary-color);
    font-size: 16px;
}


.experts-doctors{}
.experts-doctors .maintitle{
    text-align: center;
    margin: 0 0 150px;
}
.experts-doctors .maintitle span{}
.experts-doctors .maintitle h2{}

.expertdoctorbox{
    position: relative;
    z-index: 1;
    padding: 50% 15px 20px;
    text-align: center;
    border-radius: 25px;
    transition: .3s linear;
}
.expertdoctorbox:hover{
    box-shadow: var(--box-shadow);
}
.expertdoctorbox .doctorimg{
    width: 70%;
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
}
.expertdoctorbox .doctorimg img{
    width: 100%;
}
.expertdoctorbox .title{
    font-size: 32px;
    font-weight: 600;
    font-family: var(--secondary-font);
    color: var(--primary-color);
    margin: 0 0 5px;
}
.expertdoctorbox .designation{
    color: var(--primary-color);
    font-size: 20px;
    display: block;
    margin: 0 0 10px;
}
.expertdoctorbox p{
    color: var(--text-color);
    font-size: 16px;
}
.expertdoctorbox .socialmedia{
    margin: 30px 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.expertdoctorbox .socialmedia a{
    width: 40px;
    height: 40px;
    background: rgba(48,123,196,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    color: #fff;
    transition: .3s linear;
}
.expertdoctorbox .socialmedia a:hover{
    background: var(--secondary-color);
}


.aboutus-awards{
    padding: 100px 0;
}
.aboutus-awards .maintitle{
    text-align: center;
    width: 50%;
    margin: 0 auto 70px;
}
.aboutus-awards .maintitle span{}
.aboutus-awards .maintitle h2{
    margin: 0 0 20px;
    line-height: 1.2;
}
.aboutus-awards .maintitle p{
}

.aboutusawardsbox{
    box-shadow: var(--box-shadow);
    padding: 15px;
    border-radius: 20px;
    margin: 0 0 20px;
}
.aboutusawardsbox .innerbox{display: flex;align-items: center;justify-content: start;gap: 20px;}
.aboutusawardsbox .innerbox .icon{aspect-ratio: 1/1;background: var(--secondary-color);display: flex;align-items: center;justify-content: center;border-radius: 10px;flex: 0 0 80px;}
.aboutusawardsbox .innerbox .icon img{
    width: 60%;
}
.aboutusawardsbox .innerbox h3{
    color: var(--primary-color);
    flex: 0 0 calc(100% - 90px);
    font-family: var(--secondary-font);
    font-size: 20px;
    font-weight: 500;
}

.takebackseat{
    position: relative;
    width: 80%;
    margin: 0 auto -200px;
    border-radius: 30px;
    overflow: hidden;
}
.takebackseat img{
    width: 100%;
}
.takebackseat .overlay{
    position: absolute;
    top: 23%;
    left: 50%;
    transform: translateX(-50%);
    width: 54%;
    text-align: center;
}
.takebackseat .overlay h3{
    font-weight: 700;
    font-size: 56px;
    font-family: var(--secondary-font);
    color: #fff;
    margin: 0 0 20px;
    line-height: 1.2;
}
.takebackseat .overlay p{
    color: #fff;
    font-size: 20px;
}



/* ======================= about us page end here ============================ */




/* ======================= doctors page start here ============================ */



.doctors-widget{
    width: 100%;
    background: url('../images/banner/bannerimg.webp');
    background-size: cover;
    position: relative;
    z-index: 1;
    padding: 15% 0 0;
}
.doctorwidget-right{
    position: relative;
    z-index: 1;
}
.doctorwidget-right img{width: 110%;}

.doctorwidget-left{
    width: 100%;
}
.doctorwidget-left h3{
    font-size: 56px;
    font-family: var(--secondary-font);
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 15px;
}
.doctorwidget-left p{
    font-size: 18px;
    color: var(--primary-color);
}


.doctorslist-widget{
    padding: 50px 0;
}
.doctorlisthead{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 50px;
}
.doctorlisthead ul{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20px;
}
.doctorlisthead ul li{
    color: var(--text-color);
}
.doctorlisthead ul li a{
    color: var(--text-color);
    border: 1px solid var(--secondary-color);
    padding: 10px 20px;
    border-radius: 50px;
}
.doctorlisthead ul li a.active{
    background: var(--secondary-color);
    color: #fff;
}
.doctorlisthead ul li a:hover{
    background: #307bc40f;
    color: var(--secondary-color);
}
.doctorlisthead .doctorlist-right{}
.doctorlisthead .doctorlist-right p{
    color: var(--text-color);
}
.doctorlisthead .doctorlist-right p span{
    color: #000;
    font-weight: 500;
}

.doctorbox{
    position: relative;
    z-index: 1;
    text-align: center;
    border-radius: 25px;
    transition: .3s linear;
    box-shadow: var(--box-shadow);
}
.doctorbox:hover{
    box-shadow: var(--box-shadow);
}
.doctorbox .doctorimg{
    background: #EFF7FB;
    position: relative;
    z-index: 1;
    margin: 0 0 30px;
}
.doctorbox .doctorimg img{
    width: 100%;
}
.doctorbox .doctorimg span{
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 80%;
    background: var(--secondary-color);
    transform: translateX(-50%);
    padding: 10px;
    color: #fff;
    border-radius: 20px 20px 0 0;
}
.doctorbox .title{
    font-size: 26px;
    font-weight: 700;
    font-family: var(--secondary-font);
    color: var(--primary-color);
}
.doctorbox .designation{
    color: var(--primary-color);
    font-size: 16px;
    display: block;
    margin: 0 0 30px;
    font-weight: 500;
}
.doctorbox p{
    color: var(--text-color);
    font-size: 16px;
    padding: 0 30px;
}
.doctorbox .socialmedia{
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.doctorbox .socialmedia a{
    width: 40px;
    height: 40px;
    background: rgba(48,123,196,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    color: #fff;
    transition: .3s linear;
}
.doctorbox .socialmedia a:hover{
    background: var(--secondary-color);
}

/* ======================= doctors page end here ============================ */



/* ======================= blog page start here ============================ */

.blogpage{padding: 0 0 20%;}
.latestblogs .blogsbreadcrumb{
    padding: 15% 0 2%;
}
.latestblogs .blogsbreadcrumb span{
    color: var(--text-color);
    margin: 0 0 20px;
    display: block;
}
.latestblogs .blogsbreadcrumb h2{
    font-size: 50px;
    font-family: var(--secondary-font);
    font-weight: 700;
    color: var(--primary-color);
}


/* ======================= blog page end here ============================ */




/* ======================= facility page end here ============================ */
.facility-widget{
    padding: 12% 0 15%;
}
.facility-widget .facbox{
    background: #fff;
    margin: 0 0 50px;
    border-radius: 25px;
    overflow: hidden;
}
.facility-widget .facbox:hover{
    box-shadow: var(--box-shadow);
}
.facility-widget .facbox .icon{
    background: var(--secondary-color);
    border-radius: 15px 15px 0 0;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.facility-widget .facbox .icon svg{
    color: #fff;
}
.facility-widget .facbox .icon span{
    font-size: 22px;
    font-weight: 600;
    color: #fff;
}
.facility-widget .facbox h3{
    font-weight: 600;
    font-size: 32px;
    color: var(--primary-color);
    text-align: center;
    padding: 20px 0 10px;
}
.facility-widget .facbox ul{
    padding: 0 24px 30px;
}
.facility-widget .facbox ul li{
    font-size: 16px;
    color: var(--primary-color);
    line-height: 2.3;
    display: flex;
    gap: 10px;
}
.facility-widget .facbox ul li:before{
    content: "\f26a";
    font-family: 'bootstrap-icons';
    color: var(--secondary-color);
}




/* ======================= facility page end here ============================ */




/* ======================= appointments page end here ============================ */

.appointmentwidget-wrapper{
    padding: 7% 0 10%;
}
.appointmentwidget-wrapper .appointmentwidget-left{}
.appointmentwidget-left .appointmentfrm{}
.appointmentwidget-right h3,
.appointmentwidget-left .appointmentfrm h3{
    font-size: 32px;
    color: var(--primary-color);
    margin: 0 0 50px;
    font-family: var(--secondary-font);
}
.appointmentwidget-right{
    padding-left: 25%;
}
.appointmentwidget-right img{width: 100%;border-radius: 25px;}
.appoint-continfo{
    padding: 30% 0 0;
}
.appoint-continfo .infobox{
    padding: 0 0 10%;
}
.appoint-continfo .infobox h3{
    margin: 0;
    font-size: 22px;
    font-family: var(--secondary-font);
    color: var(--primary-color);
    font-weight: 600;
}
.appoint-continfo .infobox p,
.appoint-continfo .infobox a{
    color: var(--primary-color);
    font-size: 16px;
}
.appoint-continfo .infobox a:hover{}





/* ======================= appointments page end here ============================ */



/* ======================= departments page end here ============================ */

.departments-widget{
    margin: -5%;
    padding: 0 0 20%;
}

.departbox{
    background: #fff;
    width: 100%;
    margin: 0 0 30px;
    padding: 5% 12% 20%;
    border-radius: 25px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: .3s linear;
    padding-left: 28%;
}
.departbox:hover{
    background: linear-gradient(154deg,#d2eaef,#86bbf1);
}
.departbox .icon{
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background: var(--secondary-color);
    display: grid;
    place-items: center;
}
.departbox .icon img{
    width: 25px;
    filter: brightness(0) invert(1);
}
.departbox span{
    display: inline-block;
    font-weight: 700;
    color: var(--primary-color);
    margin: 20px 0 15px;
    font-size: 26px;
    font-family: var(--secondary-font);
}
.departbox p{color: var(--text-color);line-height: 1.6;}
.departbox .departboxlink{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70px;
    height: 50px;
    background: #307bc463;
    z-index: 9;
    border-radius: 10px 0 0 0;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    transition: .3s linear;
    z-index: 9;
    overflow: hidden;
}
.departbox .departboxlink:hover{
    background: var(--secondary-color);
}
.departbox .departboxlink svg{position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%;transition: .3s linear;}
.departbox .departboxlink svg:nth-child(1){
    left: -50%;
}
.departbox:hover .departboxlink svg:nth-child(1){
    left: 50%;
}
.departbox .departboxlink svg:nth-child(2){}
.departbox:hover .departboxlink svg:nth-child(2){left: 130%;}
.departbox .departboxlink:hover{}


/* ======================= departments page end here ============================ */



/* ======================= gallery page end here ============================ */

.gallery-widget{
    padding: 5% 0 15%;
}
.gallery-widget .galleryouter{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
}
.gallery-widget .galleryouter .innerbox{
    height: 320px;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.gallery-widget .galleryouter .innerbox:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: #307bc43b;
    transition: .2s linear;
    opacity: 0;
    pointer-events: none;
}
.gallery-widget .galleryouter .innerbox:hover:before{
    opacity: 1;
}
.gallery-widget .galleryouter .innerbox .overlay{
    position: absolute;
    top: 0;
    right: 10%;
    height: 140px;
    background: var(--secondary-color);
    width: 50px;
    border-radius: 0 0 50px 50px;
    z-index: 2;
    transition: .3s linear;
    opacity: 0;
}
.gallery-widget .galleryouter .innerbox:hover .overlay{
    opacity: 1;
    height: 180px;
}
.gallery-widget .galleryouter .innerbox .overlay .icon{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    transition: .1s linear;
}
.gallery-widget .galleryouter .innerbox:hover .overlay .icon{
    transform: translateX(-50%) rotate(90deg);
}
.gallery-widget .galleryouter .innerbox .overlay .icon svg{color: var(--secondary-color);}
.gallery-widget .galleryouter .innerbox:nth-child(7),
.gallery-widget .galleryouter .innerbox:nth-child(1){
    grid-column: span 2;
}
.gallery-widget .galleryouter .innerbox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}




/* ======================= gallery page end here ============================ */




/* ======================= contact page end here ============================ */

.findus{
    padding: 10% 0 20%;
}
.findus .maintitle{
    margin: 0 0 50px;
}
.findus .maintitle h2{
    align-items: start;
    justify-content: start;
}
.findus .contmap{}
.findus .contmap iframe{
    width: 100%;
    display: block;
    height: 450px;
    border-radius: 25px;
    filter: grayscale(100%);
}



.findus .sidecontinfo{
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 15px;
}
.findus .sidecontinfo .sidecontinfobox{
    background: #E8F4F7;
    margin: 0 0 30px;
    padding: 40px 30px;
    border-radius: 25px;
    position: relative;
    z-index: 1;
    padding-left: 9%;
    flex: 1;
}
.findus .sidecontinfo .sidecontinfobox .icon{
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
}
.findus .sidecontinfo .sidecontinfobox .icon i{
    font-size: 50px;
    color: var(--secondary-color);
}
.findus .sidecontinfo .sidecontinfobox span{
    font-size: 20px;
    font-weight: 600;
}
.findus .sidecontinfo .sidecontinfobox p,
.findus .sidecontinfo .sidecontinfobox a{}
.findus .sidecontinfo .sidecontinfobox a:hover{}


.contactusfrm-wrapper{}
.contactusfrm-wrapper .contfrm{
    margin: -10% 0 0;
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 100px 200px;
    border-radius: 25px;
    box-shadow: var(--box-shadow);
}



/* ======================= contact page end here ============================ */




.timetable-widget{
    position: relative;
    z-index: 1;
    padding: 5% 0;
    
}
.timetable-wrapper{
    display: grid;
    grid-template-columns: 100px repeat(6, 1fr);
    grid-template-rows: 30px repeat(13, 1fr) 10px;
    gap: 10px;
    position: relative;
    z-index: 1;
    
}
.timetable-wrapper:before,
.timetable-wrapper:after{
    content: "";
    position: absolute;
    
}
.timetable-wrapper:before{
    width: 92%;
    height: 99%;
    border-left: 1px solid var(--secondary-color);
    border-right: 1px solid var(--secondary-color);
    right: -1%;
    top: 20px;
}
.timetable-wrapper:after{
    width: 94%;
    height: 98%;
    border-top: 1px solid var(--secondary-color);
    border-bottom: 1px solid var(--secondary-color);
    left: 8%;
    top: 31px;
}
.timetable-wrapper > div{
    padding: 5px;
    background: #D2EAEF;
    border-radius: 10px;
    border: 1px solid var(--secondary-color);
    min-height: 150px;
    position: relative;
    z-index: 1;
}
.timetable-wrapper > div p{
    color: var(--primary-color);
    font-weight: 500;
    margin: 10px;
    padding: 0 0 10px;
}
.timetable-wrapper > div p:first-child{
    border-bottom: 1px solid var(--primary-color);
}
.timetable-wrapper > div p span{
    color: var(--text-color);
    font-weight: 400;
}
.timetable-wrapper > div .room{
    color: var(--text-color);
    position: absolute;
    bottom: 10px;
    left: 15px;
    width: 80%;
}
.timetable-wrapper .week{background: transparent; border: none; color: var(--primary-color); text-align: center;}
.timetable-wrapper .timing{background: transparent; border: none; color: var(--text-color); transform: translateY(-15px);}

.timetable-wrapper > div:nth-child(1){}
.timetable-wrapper > div:nth-child(2){}
.timetable-wrapper > div:nth-child(3){}
.timetable-wrapper > div:nth-child(4){}
.timetable-wrapper > div:nth-child(5){}
.timetable-wrapper > div:nth-child(6){}
.timetable-wrapper > div:nth-child(7){}
.timetable-wrapper > div:nth-child(8){}
.timetable-wrapper > div:nth-child(9){}
.timetable-wrapper > div:nth-child(10){}
.timetable-wrapper > div:nth-child(11){
    grid-row: span 4;
}
.timetable-wrapper > div:nth-child(12){}
.timetable-wrapper > div:nth-child(13){
    grid-row: span 4;
}
.timetable-wrapper > div:nth-child(14){}
.timetable-wrapper > div:nth-child(15){}
.timetable-wrapper > div:nth-child(16){
    grid-row: span 3;
}
.timetable-wrapper > div:nth-child(17){
    grid-row: span 2;
}
.timetable-wrapper > div:nth-child(18){
    grid-row: span 2;
}
.timetable-wrapper > div:nth-child(19){
    grid-row: span 3;
}
.timetable-wrapper > div:nth-child(20){}
.timetable-wrapper > div:nth-child(21){}
.timetable-wrapper > div:nth-child(22){
    grid-row: span 3;
}
.timetable-wrapper > div:nth-child(23){
    grid-row: span 3;
}
.timetable-wrapper > div:nth-child(24){}
.timetable-wrapper > div:nth-child(25){
    grid-row: span 2;
}
.timetable-wrapper > div:nth-child(26){}
.timetable-wrapper > div:nth-child(27){
    grid-row: span 3;
}
.timetable-wrapper > div:nth-child(28){
    grid-row: span 2;
}
.timetable-wrapper > div:nth-child(29){}
.timetable-wrapper > div:nth-child(30){
    grid-row: span 3;
}
.timetable-wrapper > div:nth-child(31){}
.timetable-wrapper > div:nth-child(32){
    grid-row: span 3;
}
.timetable-wrapper > div:nth-child(33){}
.timetable-wrapper > div:nth-child(34){
    grid-row: span 3;
}
.timetable-wrapper > div:nth-child(35){}
.timetable-wrapper > div:nth-child(36) {}
.timetable-wrapper > div:nth-child(37) {
    grid-row: span 3;
}
.timetable-wrapper > div:nth-child(38) {
    grid-row: span 3;
}
.timetable-wrapper > div:nth-child(39) {
    grid-row: span 2;
}
.timetable-wrapper > div:nth-child(40) {}
.timetable-wrapper > div:nth-child(41) {
    grid-row: span 2;
}
.timetable-wrapper > div:nth-child(42) {}
.timetable-wrapper > div:nth-child(43) {
    grid-row: span 3;
}
.timetable-wrapper > div:nth-child(44) {
    grid-row: span 4;
}
.timetable-wrapper > div:nth-child(45) {
    grid-row: span 4;
}
.timetable-wrapper > div:nth-child(46) {}
.timetable-wrapper > div:nth-child(47) {
    grid-row: span 3;
}
.timetable-wrapper > div:nth-child(48) {
    grid-row: span 3;
}
.timetable-wrapper > div:nth-child(49) {
    grid-row: span 2;
}


.bookappointment{
    padding: 0 0 20%;
}
.bookappointfrm{}
.bookappointfrm h3{}
.bookappointfrm h3{
    font-size: 32px;
    font-family: var(--secondary-font);
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 50px;
}
.bookappointfrm form{
    position: relative;
    z-index: 1;
}
.bookappointfrm form .fields{
    margin: 0 0 40px;
    position: relative;
    z-index: 1;
    padding-left: 25%;
}
.bookappointfrm form .fields .icon{
    width: 70px;
    aspect-ratio: 1/1;
    border-radius: 50px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: var(--secondary-color);
    display: grid;
    place-items: center;
}
.bookappointfrm form .fields .icon img{
    width: 30px;
}
.bookappointfrm form .fields > label{
    color: var(--primary-color);
    font-weight: 500;
}
.bookappointfrm form .fields > label span{
    color: red;
}
.bookappointfrm form .fields input{}
.bookappointfrm form .fields :is(input, select, textarea){
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--text-color);
    padding: 10px 0;
    outline: none;
}
.bookappointfrm form .fields :is(input, select, textarea):focus{}
.bookappointfrm form .fields select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;

    /* Custom Arrow */
    background-image: url('../images/down-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 19px;
    padding-left: 10px;
}
.bookappointfrm ul{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 30px;
    margin: 0 0 50px;
}
.bookappointfrm ul li{}
.bookappointfrm ul li label{
    color: var(--text-color);
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.bookappointfrm ul li label:before{
    content: '';
    width: 100%;
    position: absolute;
    height: 1px;
    background: var(--secondary-color);
    bottom: 0;
    left: 0;
    transform-origin: center;
    transform: scale(0);
    transition: .3s linear;
}
.bookappointfrm ul li input{
    display: none;
}
.bookappointfrm ul li input:checked + label{
    color: var(--primary-color);
}
.bookappointfrm ul li input:checked + label:before{
    transform: scale(1);
}

.bookappointfrm .fields-btn{
    text-align: end;
}
.bookappointfrm .fields-btn button{
    border: none;
    outline: none;
    position: absolute;
    top: 0;
    right: 0;
}
.bookappointfrm .fields-btn button:hover{}