/* ---------------------------------------------------------------------
A.  Theme Name: Medicap - Medical Website Template;
B.  Author: Idrak;
C.  Description: All kinds of medical template;
D.  Tags: hospital, medical center, laboratory, mental health clinics, health care, cosmetic surgery, paediatric clinic, psychiatrist, dentist, surgeon & doctor;
D.  Version:1.0;
--------------------------------------------------------------------- */

/* Font family
------------------------------------------
font-family: 'Montserrat', sans-serif;
font-family: 'Roboto', sans-serif;
--------------------------------------- */

/* Css Index
------------------------------------------
1. Theme default css
2. Common css
3. Header section
4. Hero section
5. Speciality section
6. About section
7. Opening section
8. Professional / Doctro section
9. Appoinment section
10. Newsletter section
11. Footer section
12. Banner section
13. About page
14. Certificates section
15. Doctro details section
16. Gallery section
17. 404 error page
18. Login & Register page
19. Faq section
20. Contact page
21. Instrument page
22. Shop page
23. Shop details
24. Scroll top
--------------------------------------- */

/* 1. Theme default css
--------------------------------------- */
*{
    margin: 0;
    padding: 0;
}
html{
    overflow-x: hidden;
}
body{
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: #6c7787;
    font-style: normal;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
}
::selection {
    background: #f5af19;
    color: #fff;
    text-shadow: none;
}
::-moz-selection {
    background: #f5af19;
    /* Firefox */
    color: #fff;
    text-shadow: none;
}
::-webkit-selection {
    background: #f5af19;
    /* Safari */
    color: #fff;
    text-shadow: none;
}
:active,
:focus {
    outline: none !important;
}
ul, li{
    list-style: none;
    margin: 0;
    padding: 0;
}
a, .button{
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
a {
    color: #020e28;
    text-decoration: none;
    font-weight: 500;
    transition: all linear 0.3s;
    font-size: 16px;
}
a:hover,
a:focus {
    color: #0f5fda;
    text-decoration: none;
}
a img {
    border: none;
}
iframe {
    border: none !important;
}
/* ----- Headings ----- */
h1,h2,h3,h4,h5,h6{
    color: #222222;
    margin-top: 0;
    font-style: normal;
    text-transform: normal;
    line-height: 1.2;
    font-family: 'Montserrat', sans-serif;
}
h1,h2, h3{
    font-weight: 700;  
}
h4,h5,h6{
    font-weight: 600;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
    color: inherit;
}
/* ----- Common css ----- */
html,
html a {
    -webkit-font-smoothing: antialiased;
}
img {
    height: auto;
    max-width: 100%;
}
iframe,
embed,
object {
    margin-bottom: 1.5em;
    max-width: 100%;
}
iframe {
    display: block;
    margin: 0;
    max-width: 100%;
}
form label {
    color: #777;
    font-weight: 400;
}
button{
    font-family: 'Roboto', sans-serif;
}
.f-left{
    float: left;
}
.f-right{
    float: right;
}
.fix{
    overflow: hidden;
}
.d-flex{
    display: flex;
}
.clear{
    clear: both;
}
.mt-23{
    margin-top: 23px;
}
.mb-100{
    margin-bottom: 100px;
}
.mb-150{
    margin-bottom: 150px;
}
.mb-180{
    margin-bottom: 180px;
}
/* 2. Common css
--------------------------------------- */
/* ----- container width ----- */
#default-home .container{
    max-width: 1200px;
}
/*Common button hover animation*/
.cmn-btn a{
    position: relative;
    padding: 20px;
    background: #222;
    color: #fff;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
    text-transform: uppercase;
}
.cmn-btn a:hover{
    background: #0575E6;
    box-shadow: 0 10px 40px -10px rgba(5,117,230,.5);
}
.cmn-btn a:before, .cmn-btn a:after{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    border: 3px solid #222;
    z-index: -1;
    transition: all linear .3s;

}
.cmn-btn a:before{
    left: 10px;
    top: 10px;
}
.cmn-btn a:hover:before{
    left: 0;
    top: 0;
    border: 3px solid #0575E6;
}
.cmn-btn a:after{
    left: 0;
    top: 0;
    transition-delay: .3s;
}
.cmn-btn a:hover:after{
    left: -10px;
    top: -10px;
    border: 3px solid #0575E6;
}

#form-messages{
    color: green;
}
/* -------------------------------------------------------------------------------
                                    MAIN CSS
------------------------------------------------------------------------------- */
/* 3. Header section
--------------------------------------- */
/*Header top*/
.header-top{
    background: #222;
    background: linear-gradient(90deg, #0052D4, #076cec);
    padding: 10px 0;
}
.header-info ul li{
    display: inline-block;
    margin-right: 20px;
    font-size: 14px;
    color: #000;
}
.header-info ul li i{
    color: #000;
    margin-right: 5px;
}
.header-social ul li {
    display: inline-block;
}
.header-social ul li a{
    padding: 0 10px;
    color: #000;
}
.header-social ul li a i{
    font-weight: 400;
}
.header-btn{
    margin-top: 12px;
}
.header-btn a{
    padding: 15px 20px;
    background: linear-gradient(90deg, #0052D4, #076cec, #6FB1FC);
    color: #fff;
    border-radius: 50px;
    letter-spacing: 1px;
}
.header-btn a:hover{
    background: linear-gradient(90deg, #6FB1FC, #076cec, #0052D4 );
}
/* Sticky header menu */
.sticky-menu {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,1);
    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
    transition: all linear .5s;
}
.sticky-menu .header-logo img{
    width: 150px;
}
.sticky-menu ul li:hover > ul.submenu {
    top: 135%;
    visibility: visible;
    opacity: 1;
}
.sticky-menu .ace-responsive-menu {
    margin: 0;
}

nav ul li.menu-item-has-children {
    position: relative;
    z-index: 999;
    padding-right: 15px;
}
nav ul li.menu-item-has-children:before {
    position: absolute;
    right: 15px;
    top: 50%;
    content: '+';
    font-weight: 700;
    font-size: 14px;
    font-family: var(--body-font); /* IE 9 */ /* Chrome, Safari, Opera */
    transform: translateY(-50%);
    transition: all 0.3s ease-in;
    color: #222;
}

/* 4. Hero section
--------------------------------------- */
#hero-section{
    position: relative;
    border-radius: 20% / 30% 0% 30% 0% ;
    overflow: hidden;
}
.hero-shape-one, .hero-shape-two, .hero-shape-three, .hero-shape-four{
    position: absolute;
    z-index: 9;
}
.hero-shape-one{
    top: 20%;
    left: 10%;
    animation: heroShapeOne 5s linear infinite;
}
.hero-shape-two{
    top: 20%;
    right: 10%;
    animation: heroShapeTwo 5s linear infinite;
}
.hero-shape-three{
    bottom: 20%;
    right: 10%;
    animation: heroShapeThree 5s linear infinite;
}
.hero-shape-four{
    top: 60%;
    left: 55%;
    animation: heroShapeOne 5s linear infinite;
}
@keyframes heroShapeOne{
    0%{
        transform: translate(-50%, -70%) rotate(0deg);
    }
    100%{
        transform: translate(-50%, -70%) rotate(360deg);
    }
}
@keyframes heroShapeTwo{
    0%, 100%{
        transform: translateY(20px);
    }
    50%{
        transform: translateY(-20px);        
    }
}
@keyframes heroShapeThree{
    0%, 100%{
        transform: translateX(20px);
    }
    50%{
        transform: translateX(-20px);        
    }
}
.hero-item, .consult-slider-item{
    position: relative;
}
.hero-item:before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(115deg, rgba(0,0,0,.9) 0%, rgba(42,59,216,.9) 55%, rgba(0,0,0,.9) 100%), 
    linear-gradient(115deg, rgba(42,59,216,.9) 0%, #020077 100%), 
    conic-gradient(from 110deg at -5% 35%, rgba(0,0,0,.9) 0deg, rgba(42,59,216,1) 360deg), 
    conic-gradient(from 220deg at 30% 30%,rgba(42,59,216,1) 0deg, rgba(42,59,216,.2) 220deg, rgba(42,59,216,.2) 360deg), 
    conic-gradient(from 235deg at 60% 35%, rgba(42,59,216,.9) 0deg, rgba(42,59,216,.2) 180deg, rgba(42,59,216,.2) 360deg);
    background-blend-mode: soft-light, soft-light, overlay, screen, normal;
    z-index: 9;
    opacity: .6;
}
.hero-img{
    height: 700px;
}
.hero-text{
    padding: 20px 20px 30px;
    position: absolute;
    top: 50%;
    left: 10%;
    width: 700px;
    transform: translateY(-50%);
    z-index: 999;
}
.hero-text h1{
    padding: 20px 0 15px;
    text-transform: uppercase;
    font-size: 4vw;
    font-weight: 800;
    line-height: 1.2;
}
.hero-text h1, .hero-text p{
    color: #fff;
}
.hero-text p{
    font-size: 18px;
}
#hero-section .hero-text .hero-btn.cmn-btn a{
    margin: auto;
}
.feature-list ul li {
    float: left;
    padding: 0 10px;
    background: rgba(255,255,255,.9);
    border: 1px solid #f9f9f9;
}
.feature-list ul li i{
    height: 80px;
    width: 80px;
    line-height: 95px;
    text-align: center;
    display: block;
    font-size: 36px;
    color: #076cec;
    margin: 0 auto 0px;
}
.feature-list ul li h6{
    font-size: 14px;
    color: #076cec;
}

.feature-list .feature-list-two i, .feature-list .feature-list-two h6{
    color: #076cec;
} 
/* Hero owl carousel */
#hero-section .owl-carousel .owl-dots{
    text-align: center;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
}
#hero-section .owl-carousel .owl-dots.disabled{
    display: block;
} 
#hero-section .owl-carousel button.owl-dot {
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
    margin: 30px 2px 0 2px;
}
#hero-section .owl-carousel span {
    height: 15px;
    width: 15px;
    background: #076cec;
    margin: 0 1px;
    display:block;
    -webkit-backface-visibility:visible;
    -webkit-transition:opacity 200ms ease;
    -moz-transition:opacity 200ms ease;
    -ms-transition:opacity 200ms ease;
    -o-transition:opacity 200ms ease;
    transition:opacity 200ms ease;
    border-radius: 50%;
}
#hero-section .owl-carousel .active span {
    background: linear-gradient(90deg, #076cec, #fff);
    width: 50px;
    border-radius: 50px;
}
.owl-carousel .owl-nav button.owl-prev {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 5px solid #fff;
}
.owl-carousel .owl-nav button.owl-next{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    border-right: 5px solid #fff;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev{
    background:#1c3988;
    border-radius: 50%;
    color: #fff;
    color: inherit;
    padding: 0 !important;
    font: inherit;
    height: 80px;
    width: 80px;
    line-height: 88px;
    font-size: 24px;
    margin: 0 2px;
    transition: .5s;
}
.owl-carousel .owl-nav button.owl-prev:hover{
    border-left: 5px solid #1c3988;
}
.owl-carousel .owl-nav button.owl-next:hover{
    border-right: 5px solid #1c3988;
}
.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover{
    color: #1c3988 !important;
    border-radius: 0px;
    height: 80px;
    width: 80px;
}

/* 5. Speciality section
--------------------------------------- */
.speciality-title p{
    max-width: 450px;
    margin: 20px auto;
}
.facilities{
    box-shadow: 0 10px 30px -15px rgba(0,0,0,.2);
    overflow: hidden;
}
.speciality-item{
    float: left;
    width: 25%;
    padding: 25px;
}
.speciality-item i, .speciality-item h5, .speciality-item p{
    color: #fff;
}
.speciality-item-two i, .speciality-item-two h5, .speciality-item-two p,
.speciality-item-four i, .speciality-item-four h5, .speciality-item-four p,
.speciality-item-five i, .speciality-item-five h5, .speciality-item-five p,
.speciality-item-seven i, .speciality-item-seven h5, .speciality-item-seven p
{
    color: #000;
}
.speciality-item i{
    font-size: 72px;
    display: block;
}
.speciality-item h5{
    margin: 0 0 20px;
}
.speciality-item-one, .speciality-item-three, .speciality-item-six, .speciality-item-eight{
    background: #0575E6;
}
.speciality-item-two, .speciality-item-four, .speciality-item-five, .speciality-item-seven{
    background: #fff;
}
/* 6. About section
--------------------------------------- */
.about-text p{
    margin-top: 30px;
}

.about-img{
    position: relative;
    height: 100%;
    width: 100%;
}
.about-img span{
    position: absolute;
    top: 10%;
    left: 10%;
    height: 80%;
    width: 80%;
    background: rgba(5,117,230,.2);
    border-radius: 38% 37% / 41% 44% 56% 59%;
    z-index: -1;
    animation: aboutImgShape 6s linear infinite;
}
@keyframes aboutImgShape{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

/* 7. Opening section
--------------------------------------- */
.open-time-text{
    border: 30px solid #ddd;
    padding: 50px 50px 50px 100px;
    border-radius: 38% 37% / 41% 44% 56% 59%;
}
.open-time-text h5{
    margin-bottom: 25px;
    font-size: 24px;
}
.open-time-text h5 i{
    font-size: 16px;
    color: #076cec
}
.open-time-schedule ul li{
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
}
.open-time-schedule ul li span{
    float: right;
}
.open-time-help-btn a{
    padding: 15px 20px;
    background: linear-gradient(90deg, #0052D4, #076cec, #6FB1FC);
    color: #fff;
    border-radius: 50px;
    letter-spacing: 1px;
}
.open-time-help-btn a:hover{
    background: linear-gradient(90deg, #6FB1FC, #076cec, #0052D4 );
}


/* 8. Professional / Doctro section
--------------------------------------- */
.professional-left{
    background: url(images/doctors/doctor-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 200px 0;
}
.professional-left h2{
    padding: 50px 0;
    font-size: 80px;
    background: rgba(255,255,255,.5);
    text-align: center;
}
.professional-right h4{
    color: #076cec;
}
.professional-right h3{
    font-size: 60px;
    color: #076cec;
    transition: all linear .5s;
}
.professional-item {
    position: relative;
    margin-top: 30px;
    border-radius: 10% 5% 10% 5%;
    overflow: hidden;
    transition: all linear .5s;
}
.professional-item:hover{
    border-radius: 5% 10% 5% 10%;    
}
.professional-item-overlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: all linear .5s;
}
.professional-item-overlay h5, .professional-item-overlay span{
    position: absolute;
    color: #fff;
    opacity: .2;
    transition: all linear .5s;
    transition-delay: .5s;
}
.professional-item-overlay h5{
    bottom: 70px;
    left: 10px;
    transition-delay: .3s;
}
.professional-item-overlay span{
    bottom: 50px;
    left: 10px;
    transition-delay: .5s;
}
.professional-item:hover .professional-item-overlay{
    background: rgba(5,117,230,.7);
}
.professional-item:hover .professional-item-overlay h5,
.professional-item:hover .professional-item-overlay span{
    opacity: 1;
    left: 40px;
}

/* 9. Appoinment section
--------------------------------------- */
#appoinment-section .container{
    background: linear-gradient(90deg, #0052D4, #076cec);
    padding: 70px 0; 
    border-radius: 10% / 41% 44% 56% 59%;
    position: relative;
}
.appoinment-form input, .appoinment-form textarea, .appoinment-form select{
    display: block;
    width: 100%;
    margin: 13px 0;
    padding: 15px 20px;
    border: none;
    font-size: 14px;
    background: #f3f6fd;
    color: #666666;
}
.appoinment-form button{
    width: 100%;
    border: none;
    padding: 15px;
    margin: 13px 0;
    background: #222;
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all linear .3s;
}
.appoinment-form button:hover{
    background: #fff;
    color: #076cec;
}
.appoinment-form select{
    padding: 18px 20px;
}
.appoinment-left{
    padding-left: 100px;
}
.appoinment-left h2, .appoinment-left h5{
    color: #fff;
}
.appoinment-left h2{
    margin-bottom: 50px;
}
.appoinment-right img{
    position: absolute;
    bottom: 0;
    right: 50px;
    width: 500px;
}

/* 10. Newsletter section
--------------------------------------- */
#newsletter-section{
    position: absolute;
    left: 50%;
    top: -105px;
    transform: translateX(-50%);
    width: 100%;
}
.newsletter{
    background: linear-gradient(90deg, #0052D4, #076cec);
    padding: 50px;
    border-radius: 10% / 10% 44% 13% 59%;
    box-shadow: 0 10px 30px -10px rgba(5,117,230,.5);
}
.newsletter-text h3, .newsletter-text p{
    color: #fff;
}
.newsletter-text p{
    margin: 20px 0 0;
}
.newsletter-form {
    position: relative;
}
.newsletter-form input{
    width: 100%;
    padding: 20px;
    border: none;
}
.newsletter-form button{
    position: absolute;
    right: 2px;
    top: 2px;
    height: 64px;
    width: 130px;
    border: none;
    background: linear-gradient(90deg, #0052D4, #076cec);
    color: #fff;
    border-left: none;

}


/* 11. Footer section
--------------------------------------- */
#footer-section{
    position: relative;
    padding: 50px 0 50px !important;
    background: #f3f6fd;
}
.footer-cmn p, .footer-cmn ul li a, #copyright p, #copyright ul li a{
    font-size: 14px;
    color: #f6f6f6;
	margin-bottom:0 !important;
}
path {
  fill: white;
}


.footer-cmn h4{
    margin-bottom: 20px;
	color:#fff !important;
}
.wp-block-social-links .wp-social-link a{
    border-bottom: 2px dotted rgba(5,117,230,.5);
}
.wp-block-social-links .wp-social-link a:hover{
    border-bottom: 2px dotted rgba(5,117,230,.5);
    transition: all linear 0.3s;
    color: #fff !important;
}
.wp-block-social-links .wp-social-link.wp-social-link.wp-social-link {
    margin: 0;
}
.wp-block-social-links.is-style-logos-only .wp-social-link {
    background: none;
    padding: 2px;
}
.wp-block-social-link:hover {
    transform: scale(1);
}
.footer-social ul li{
    display: inline-block;
}
.footer-social ul li a{
    border: 2px dotted rgba(5,117,230,.5);
    height: 40px;
    width: 40px;
    line-height: 28px;
    text-align: center;
    display: block;
    border-radius: 50%;
}
.footer-social ul li a i{
    color: #076cec;
}
.footer-social ul li a:hover{
    background: rgba(5,117,230,.9);
}
.footer-social ul li a:hover i{
    color: #fff;
}
.footer-operation img{
    border: 10px solid rgba(5,117,230,.5);
}
.footer-speciality ul li a{
    padding: 5px 0;
    display: block;
}
.footer-speciality ul li a:hover{
    color: #076cec !important;
}
.copyright-menu ul li{
    display: inline-block;
}
.copyright-menu ul li:last-child{
    display: none;
}
.copyright-menu ul li a{
    padding: 5px;
}
#copyright{
    background: #000a32 !important;
    padding: 25px 10px 10px;
}
.copyright-menu a{font-weight:300 !important}
.banner-sign{display:none}

/* 12. Banner section
--------------------------------------- */
#banner-section{
    background: linear-gradient(90deg, #0052D4, #076cec);
    padding: 50px 0;
}
.banner-text h2{
    color: #fff;
}
.breadcrumbs ul li {
    display: inline-block;
}
.breadcrumbs ul li a{
    color: #fff !important;
    padding: 10px;
}

/* 13. About page
--------------------------------------- */
.about-details h4{
    margin-bottom: 30px;
}
.about-details p{
    text-align: justify;
}
#counter-section{
    border-radius: 10% / 10% 44% 13% 59%;
    background: linear-gradient(90deg, #0052D4, #076cec);
    padding: 50px 0;    
}
.counter-item h2{
    font-size: 36px;
    color: #fff;
    margin-bottom: 20px;
}
.counter-item i{
    font-size: 60px;
    color: #fff;
}
.counter-item h5{
    color: #fff;
}

/* 14. Certificates section
--------------------------------------- */
#certificate-section h2{
    margin-bottom: 20px;
}
.certificates-item h5 {
    margin-top: 20px;
    font-size: 18px;
}
/* 15. Doctro details section
--------------------------------------- */
.doctor-profile-details h6{
    color: #213360;
    font-weight: 600;
    margin: 30px 0;
    line-height: 1.8;
}
.doctor-profile-details p{
    text-align: justify;
}
.doctor-education-timeline{
    position: relative;
}
.doctor-education h5, .doctor-education-timeline h5{
    margin-bottom: 20px;
}
.doctor-education-timeline ul li{
    float: left;
}
.doctor-education-timeline ul li:nth-child(1){
    width: 12%;
}
.doctor-education-timeline ul li:nth-child(2){
    width: 5%;
}
.doctor-education-timeline ul li:nth-child(3){
    width: 80%;
}
.doctor-education-timeline:before{
    position: absolute;
    content: "";
    left: 155px;
    top: 0;
    border: 2px dotted #076cec;
    height: 490px;
    width: 1px;

}
.doctor-education-timeline ul li span{
    padding: 20px 40px 20px 10px;
    background: #076cec;
    color: #fff;
    font-weight: 700;
    clip-path: polygon(0 19%, 77% 18%, 100% 50%, 78% 82%, 0 82%);
}
.doctor-education-timeline ul li span i{
    margin-right: 5px;
    font-size: 14px;
}
.doctor-education-dot{
    position: relative;
    height: 30px;
    width: 30px;
    background: #fff;
    border: 2px dotted #076cec;
    padding: 10px;
    border-radius: 50%;
}
.doctor-education-dot:before{
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #076cec;
    height: 10px;
    width: 10px;
    border-radius: 50%;
}
.doctor-specifications h5{
    margin-bottom: 30px;
}
.doctor-specifications ul li{
    padding: 5px 0;
}
.doctor-specifications ul li i{
    margin-right: 10px;
    color: #076cec;
}
.doctor-visit-time h5{
    margin-bottom: 30px;
}
.doctor-visit-time ul li{
    float: left;
    width: 14%;
}
.doctor-visit-time .parent{
    background: #222;
    overflow: hidden;
}
.doctor-visit-time .parent li{
    color: #fff;
    font-weight: 700;
    text-align: center;
    border-right: 1px solid #444;
    padding: 20px;
}
.doctor-visit-time .child {
    background: #f3f6fd;
    overflow: hidden;
}
.doctor-visit-time .child li{
    font-weight: 700;
    text-align: center;
    padding: 50px 10px;
    border-right: 1px solid #ddd;
}
.doctor-visit-time .parent li:nth-child(7), .doctor-visit-time .child li:nth-child(7){
    border-right: none;
}
.doctor-visit-time .child li span{
    color: #fff;
    background: #076cec;
    padding: 15px;
    border-radius: 50%;
}


/* 16. Gallery section
--------------------------------------- */
.gallery-video-img{
    position: relative;
    width: 100%;
}
.gallery-video-img .gallery-video-overlay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(42,59,216,.8), rgba(42,59,216,.5));
}
.gallery-video-img .gallery-video-overlay a{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(42,59,216,.8);
    height: 70px;
    width: 70px;
    line-height: 75px;
    text-align: center;
    border-radius: 50%;
    animation: animate 3s linear infinite;
}
.gallery-video-img .gallery-video-overlay a i{
    font-size: 24px;
    color: #fff;
    padding-left: 7px;
}
@keyframes animate{
    0%{
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 7), 0 0 0 0 rgba(255, 255, 255, 7), 0 0 0 0 rgba(255, 255, 255, 7)
    }
    40%{
        box-shadow: 0 0 0 50px rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 7), 0 0 0 0 rgba(255, 255, 255, 7)
    }
    80%{
        box-shadow: 0 0 0 50px rgba(255, 255, 255, 0), 0 0 0 40px rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 7)
    }
    100%{
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 40px rgba(255, 255, 255, 0), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}
.videopopupjs__content {
    margin-top: 7%;
}
/*gallery item*/
.gallery-item, .gallery-item{
    position: relative;
    overflow: hidden;
    transition: all linear .5s;
}
.gallery-item .gallery-overlay{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 80%;
    transition: all linear .5s;
    transition-delay: .5s;
}
.gallery-item:hover .gallery-overlay{
    opacity: 1;
}
.gallery-item:before{
    position: absolute;
    content: "";
    height: 85%;
    width: 85%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    transition: all linear .5s; 
}
.gallery-item:hover:before{
    background: rgba(255,255,255,.9);
    
}
.gallery-item .gallery-overlay h5, .gallery-item .gallery-overlay p{
    color: #076cec;
    margin: 10px;
}

/* 17. 404 error page
--------------------------------------- */

/* 18. Login & Register page
--------------------------------------- */
.login-form{
    box-shadow: 0 5px 30px -10px rgba(0,0,0,.2);
    padding: 70px;
    border-radius: 10px;
    border-radius: 10% / 10% 50% 10% 50%;
}
.login-form h3 span{
    color: #076cec;
}
.login-form input{
    display: block;
    width: 100%;
    padding: 10px 20px;
    margin-bottom: 30px;
    background: #f3f6fd;
    border: none;
}
.login-form button{
    width: 100%;
    padding: 10px;
    border: none;
    background: linear-gradient(90deg, #0052D4, #076cec);
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 30px;
}
.login-form button:hover{
    background: linear-gradient(90deg, #076cec, #0052D4);
}
.login-form a{
    color: #0052D4;
}
.login-form a:hover{
    color: #076cec;
}
/*Check box*/
.checked-box {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checked-box input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}
.checked-box:hover input ~ .checkmark {
  background-color: #ccc;
}
.checked-box input:checked ~ .checkmark {
    background: linear-gradient(90deg, #0052D4, #076cec);
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checked-box input:checked ~ .checkmark:after {
  display: block;
}
.checked-box .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
} 

/* 19. Faq section
--------------------------------------- */
#faq-section{

}
.faq-title h2{
    margin-bottom: 30px;
}
.faq-title p{
    text-align: justify;
}
.faq{
    padding: 50px;
    background: #f3f6fd;
}
.collapse-card {
  background-color: #f3f6fd;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  color: #777777;
  padding: 1rem;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
.collapse-card .title {
  font-size: 1rem;
  line-height: 1.8rem;
}
.collapse-card .title:before, .collapse-card .title:after {
  content: " ";
  display: table;
}
.collapse-card .title:after {
  clear: both;
}
.collapse-card .title i {
  float: left;
}
.collapse-card .title span {
  float: right;
  margin-left: 1rem;
}
.collapse-card .title strong {
  display: block;
  margin-left: 4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collapse-card .title strong::after {
  color: #404040;
  font-family: 'FontAwesome';
  padding-left: .4rem;
  font-size: 1rem;
  line-height: 1.49rem;
}
.collapse-card .description {
  padding: 1rem;
  display: none;
}
.collapse-card * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.collapse-card.active {
  box-shadow: 0 8px 17px -5px rgba(0, 0, 0, 0.2);
  z-index: 200;
  margin: 1rem -1rem;
}
.collapse-card.active:hover .title strong::after {
  content: "\f066";
}
.collapse-card:hover .title strong::after {
  content: "\f065";
}
/* 20. Contact page
--------------------------------------- */
.contact-branch-item{
  box-shadow: 0 8px 17px -5px rgba(0, 0, 0, 0.2);
  padding: 30px 20px;
}
.contact-branch-item i{
    font-size: 32px;
    color: #076cec;
    background: rgba(5,117,230,.3);
    height: 60px;
    width: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;    
}
.contact-branch-item h5{
    margin: 30px 0 10px;
}
.contact-branch-item p{
    margin-bottom: 10px;
}
.contact-branch-item span{
    font-size: 14px;
}

.contact-form h4{
    margin-bottom: 50px;
}
.contact-form input, .contact-form textarea{
    margin-bottom: 30px;
    width: 100%;
    padding: 15px 20px;
    border: none;
    background: #f3f6fd;
}
.contact-form button{
    border: none;
    background: #222;
    color: #ddd;
    padding: 15px 20px;
}
.contact-form button:hover{
    background: linear-gradient(90deg, #0052D4, #076cec);
    color: #fff;    
}

/* 21. Instrument page
--------------------------------------- */
.instrument-btn ul li{
    display: inline-block;
}
.instrument-btn a{
    margin: 10px 10px 10px 0;
    padding: 20px;
    box-shadow: 0 5px 17px -5px rgba(0,0,0,.2);
    text-align: center;
    width: 200px;
    display: block;
}
.btn-one{
    background: #222;
    color: #fff;
}
.btn-two{
    background: linear-gradient(90deg, #0052D4, #076cec);
    color: #fff;
}
.instrument-btn a:hover{
    background: linear-gradient(90deg, #076cec, #0052D4);
    color: #fff;
}
.instrument-item{
    box-shadow: 0 5px 17px -5px rgba(0,0,0,.2);
    padding: 50px 20px;
    border-radius: 10% / 10% 50% 10% 50%;
}
.instrument-item span{
    height: 60px;
    width: 60px;
    line-height: 50px;
    text-align: center;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    border: 5px solid transparent;
}
.instrument-item-1 span{
    color: #076cec;
    background: rgba(5,117,230,.1);
}
.instrument-item-2 span{
    color: rgba(238,156,167,1);
    background: rgba(238,156,167,.1);
}
.instrument-item-3 span{
    color: rgba(121,159,12,1);
    background: rgba(121,159,12,.2);
}
.instrument-item-4 span{
    color: rgba(236,0,140,1);
    background: rgba(236,0,140,.1);
}
.instrument-item-5 span{
    color: rgba(56,239,125,1);
    background: rgba(56,239,125,.1);
}
.instrument-item-6 span{
    color: rgba(115,3,192,1);
    background: rgba(115,3,192,.1);
}
.instrument-item-7 span{
    color:rgba(255,224,0,1);
    background: rgba(255,224,0,.2);
}
.instrument-item-8 span{
    color: rgba(0,210,255,1);
    background: rgba(0,210,255,.1);
}
.instrument-item-1:hover span{
    border: 5px solid rgba(5,117,230,.1);
}
.instrument-item-2:hover span{
    border: 5px solid rgba(238,156,167,.1);
}
.instrument-item-3:hover span{
    border: 5px solid rgba(121,159,12,.1);
}
.instrument-item-4:hover span{
    border: 5px solid rgba(236,0,140,.1);
}
.instrument-item-5:hover span{
    border: 5px solid rgba(56,239,125,.1);
}
.instrument-item-6:hover span{
    border: 5px solid rgba(115,3,192,.1);
}
.instrument-item-7:hover span{
    border: 5px solid rgba(255,224,0,.1);
}
.instrument-item-8:hover span{
    border: 5px solid rgba(0,210,255,.1);
}
.instrument-item h5{
    margin-top: 30px;
    color: #333;
    font-size: 18px;
    transition: all linear .3s;
}
.instrument-item h5:hover{
    color: #076cec;    
}

.lab-instrument-desc h6{
    margin: 10px 0 20px;
    color: #076cec;
}
.lab-instrument-desc p{
    text-align: justify;
}
.lab-instrument-img{
    text-align: center;
}

/* 22. Shop page
--------------------------------------- */
.shop-item img{
    border-radius: 10% / 30% 0% 90% 50%;
}
.shop-item h5{
    margin: 30px 0 10px;
    transition-delay: all linear .3s;
}
.shop-item span{
    color: #076cec;
    font-size: 14px;
}
.shop-item h5:hover{
    color: #076cec;
}

/* 23. Shop details
--------------------------------------- */
.shop-details .shop-detl-price{
    margin: 15px 0 20px;
    display: block;
    color: #076cec;
    font-size: 24px;
}
.product-count input{
    padding: 5px 10px;
    width: 100px;
    border: 1px solid #ddd;
}
.product-count button{
    border: none;
    height: 42px;
    padding: 0 20px;
    background: #111;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    margin-left: 10px;
}
.product-count button:hover{
    background: linear-gradient(90deg, #0052D4, #076cec);
}
.product-share ul li {
    display: inline-block;
    padding: 10px;
}
.product-cart ul li{
    padding: 5px 0;
    font-size: 14px;
}
.product-cart ul li span{
    color: #000;
    font-weight: 500;
}
.shipping-text h4{
    margin-bottom: 20px;
}
.shipping-text p{
    text-align: justify;
}
.test-list ul{
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    padding: 30px 0;
}
.test-list ul li {
    float: left;
}
.test-list ul li img{    
    border-radius: 10% / 30% 0% 90% 50%;
}
.test-list ul li:nth-child(1), .test-list ul li:nth-child(3){
    width: 20%;
}
.test-list ul li:nth-child(2){
    width: 60%;
    padding: 0 50px;
}
.test-list ul li h5{
    margin-top: 65px;
    float: right;
    background: #076cec;
    color: #fff;
    padding: 10px 20px;
    border-radius: 10% / 30% 0% 90% 50%;
}
.header-menu small{
    float: right;
    margin: 2px 0 0 5px;
}

/* 24. Scroll top
--------------------------------------- */
.scrollToTop{
    position: fixed;
    right: 0px;
    bottom: 75px;
    border: 10px solid rgba(5,117,230,.5);
    background: #fff;
    color: #076cec;
    height: 70px;
    width: 70px;
    line-height: 55px;
    text-align: center;
    border-radius: 50px;
    font-weight: 700;
    display: none;
    z-index: 999;
    font-size: 20px;
}
.scrollToTop:hover,.scrollToTop:focus{
    background: rgba(5,117,230,.5);
    color: #fff;
}
/* 25. Single product page 
--------------------------------------- */
.woocommerce-Price-amount bdi{
    flex-direction: row-reverse;
    float: left;
}
.simple .cart{
    display: flex;
}
.quantity input{
    padding: 5px 10px;
    width: 100px;
    border: 1px solid #ddd;
}
.simple .cart button{
    margin-left: 10px;
}
/* 26. contact form page 
--------------------------------------- */
.wpcf7-submit{
    background: #222 !important;
    color: #fff !important;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all linear .3s;
}
.wpcf7-submit:hover {
    background: #076cec !important;
    color: #fff !important;
}
/* 27. product add to card page 
--------------------------------------- */
.products li .button{
    display: none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
    text-align: center;
    font-size: 20px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover{
    color: #076cec;
}
.woocommerce ul.products li.first, .woocommerce-page ul.products li.product {
    margin-right: 20px;
    width: 23.05%;
}
.woocommerce ul.products li.product a img{
    border-radius: 10% / 30% 0% 90% 50%;
}
.woocommerce-products-header{
    margin-bottom: 45px;
}
.woocommerce ul.products li.product .price {
    color: #076cec;
    display: grid;
    font-weight: 400;
    margin-bottom: .5em;
    font-size: 14px;
}
.woocommerce-Price-amount{
    margin: auto;
}
.product_meta{
    display: grid;
}
.product_meta span{
    padding: 6px 0px;
}
.woocommerce-product-gallery__trigger{
    display: none;
}
.woocommerce .quantity .qty {
    width: 5.631em;
}

/* -------------------------------
    Blog Section
--------------------------------*/
.blog-post{
    position: relative;
	margin-bottom: 35px;
}
.blog-post-image img{
    width: 100% !important;
}
.blog-post-meta{
    position: absolute;
    top: 0;
    right: 0;
}

.blog-post-meta li a{
    height: 70px;
    width: 70px;
    text-align: center;
    background: #0f5fda;
    display: block;
    padding: 5px;
    overflow: hidden;
}
.list-unstyled li a{
    color: #f2f2f2;
}

.blog-post-meta li a span{
    display: block;
    font-size: 16px;
    color: #fff;
}
.blog-post-title h2 a{
    font-size: 22px !important;
	font-weight: 600;
}
.sidebar h2{
	font-size: 26px !important;
	font-weight: 600;
}

@media (max-width: 767px){
    .blog-post h2{
        font-size: 36px;
    }
}

.blockquote p{
    font-style: italic;
    line-height: 1.5;
}

.blockquote cite{
    color: var(--main-color-one);
}

.blog-meta ul li a{
    padding: 10px;
    color: #555;
    font-size: 14px;
}

.blog-meta ul li a:hover{
    color: var(--main-color-one);
}

.blog-meta ul li a i{
    margin-right: 5px;
}
.sidebar {
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.06);
    padding: 30px;
}
/* form-control */
.form-control {
    border: 1px solid #ebebeb;
    border-radius: 0px;
    padding: 10px 20px;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    color: #666666;
    background-clip: inherit !important;
}

.form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: var(--main-color-one);
}

.form-control::-moz-placeholder {
    color: #3a4957;
}

.form-control::-ms-input-placeholder {
    color: #3a4957;
}

.form-control::-webkit-input-placeholder {
    color: #3a4957;
}

input.form-control {
    height: 50px;
}

/* border  */
.border {
    border-color: #ebebeb !important;
}

.border-top {
    border-top-color: #ebebeb !important;
}

.border-left {
    border-left-color: #ebebeb !important;
}

.border-right {
    border-right-color: #ebebeb !important;
}

.border-bottom {
    border-bottom-color: #ebebeb !important;
}

.hero-item .feature-list ul{display:none}

@media (max-width:800px){
	.header-top{display:none}
	.header-main-menu { padding: 5px 0 !important; }
	.mobile-logo { top: 0px !important; }
	.menu-toggle #menu-btn{margin:5px 10px !important}
	
	.about-img{margin-top:0 !important}
	.header-btn{display:block !important; position:fixed !important; bottom:0 !important;left:0; z-index:999 !important; width:100%; margin:0 auto !important; }
	.header-btn a{display:block;  border-radius:0 !important; text-align:center}
}