@import url(css/fontiran.css);
@import url(css/animate.css);
@import url(css/slick-theme.css);
/**************************css Reset*********************/
@-ms-viewport {width: device-width;}
* ,*::before, *::after{padding: 0;margin: 0;border: 0;outline: 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {display: block;}
html {overflow-x: hidden;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-ms-overflow-style: scrollbar;}
/*************** Main ***************/
@font-face {  font-family: IRANSans;  font-style: normal;  font-weight: 500;}
body , input , textarea , button{direction: rtl;line-height: 1.5;font-family:"IRANSans", sans-serif;}
a {text-decoration: none;color: #000}
ul {list-style: none}
.flex {display: flex;}
.flex-column {flex-direction: column;-ms-flex-direction:column;}
.flex-reverse {flex-direction: row-reverse;-ms-flex-direction:row-reverse;}
.wrap {flex-wrap: wrap;}
.align-items-center {align-items: center;-ms-flex-align:center;}
.align-items-end {align-items: end;-ms-flex-align:end;}
.align-items-start {align-items: start;-ms-flex-align:start;}
.justify-content-between {justify-content: space-between;-ms-flex-pack:justify;}
.justify-content-center {justify-content: center;-ms-flex-pack:center;}
.justify-content-left {justify-content:left;-ms-flex-pack:end;}
.justify-content-end {justify-content:end;-ms-flex-pack:end;}
.text-left {text-align: left}
.text-center {text-align: center}
.text-right {text-align: right}
.grid{display: grid}
.align-content-center{align-content: center;}
/*************** Bootstrap ***************/
.container {width: 100%;padding:0 15px;margin:0 auto;}
@media (min-width: 576px) {.container {max-width: 540px;}}
@media (min-width: 768px) {.container {max-width: 720px;}}
@media (min-width: 992px) {.container {max-width: 960px;}}
@media (min-width: 1240px) {.container {max-width: 1140px;}}
/*==========================================  Start  =============================================*/
/*==========================================  Header =============================================*/
/*==========================================  Top Header =============================================*/
.top-header{border-bottom: 1px solid #e6e6e6; font-size: 12px; color: #969696;}
.phone span:nth-child(1) , .address span:nth-child(1) , .time span:nth-child(1) , .social-menu a{color:#eda343;font-size:14px;}
.phone span:nth-child(1) , .address span:nth-child(1) , .time span:nth-child(1){margin-left: 5px}
.address{margin-left: 35px;}  .time{margin-right: 35px}
.social-menu a{margin-right: 5px;transition: .3s; display: inline-block;}
.social-menu a:hover{color: #db8c26; transform: scale(1.2)}
.top-header-right , .top-header-left{height: 50px; width: 50%}
.top-header-right{border-left: 1px solid #e6e6e6}
/*==========================================  Middle Header =============================================*/
.middle-header{padding: 20px 0}
.middle-header .menu {margin-left: 70px}
.middle-header .menu li a{padding: 5px 10px; border-bottom: 1px solid transparent; font-size: 14px;color: #6a6a6a;
    text-align: center;transition: .3s;}
.middle-header .menu li a:hover{border-bottom: 1px solid #db8c26}
.back-language ul li a{display: flex; border: 1px solid white; border-radius: 30px;margin: 0 3px}
.back-language ul{width: 100%; height:37px}
.front-language{background-color: #f8f8f8; color: #6a6a6a;z-index: 10; padding: 10px; width: 135px;margin: 0 0 0 5px;cursor: pointer;}
.back-language{background-color: #4c4c4c;transform: translateX(-134px)translateY(2px); padding: 5px; width: 133px!important;
    transition: .5s;height: 37px!important;}
.lang-active{font-size: 14px;}
.front-language img , .back-language img{border-radius: 30px;width: 25px; height: 16px;}
.circle-arrow{height: 15px; width:15px; background-color:#eda343; color: white; border-radius: 50%; font-size: 8px;
    text-align: center; padding: 3px 0;transition: .3s; border: none;cursor: pointer}
.front-language:hover .circle-arrow{background-color:#db8c26;}
.visit{transition: .3s; color: white;font-size: 13px; cursor: pointer;}
.visit:hover{background-image: linear-gradient(to left,#41aa51 ,#72ce45);}
.visit svg{color: white;height: 25px; width: 30px;margin-right: 5px;transform: translateY(4px);}
header hr{height: 1px; width: 82%; border: none; background-color: #e6e6e6;margin: 0 139px 0 0;
    transform: translateY(-1px);}

.menu li {position: relative}
.menu li a{ display: inline-block;}
.menu .menu-item-has-children>a:after{content:"\276E";font-size: 13px;margin-right: 18px;
    transform: rotate(90deg); display: inline-block;}
.menu .sub-menu{position: absolute; right: 0; width: 160px; visibility: hidden; border-radius: 5px; }
.menu .sub-menu a{background-color: #f8f8f8;display: block; padding:5px 10px; transition: none;display: flex}
.menu .sub-menu a:hover{color: #eda343}
.menu li:hover ul{padding-top:28px;visibility: visible; transition:.3s; z-index: 10}
.menu .menu-item-has-children{position: relative;}
.menu .menu-item-has-children .menu-item-has-children>a:after{content:"\276E";font-size: 13px;
    display: inline-block;transform: rotate(-180deg)translateY(4px);position: absolute;left:15px}
.menu .menu-item-has-children ul .menu-item-has-children .sub-menu ,
.menu .menu-item-has-children ul .menu-item-has-children ul .menu-item-has-children .sub-menu{
    position: absolute; right:80%;top: 0;width: 160px; padding-top: 0;visibility: hidden;z-index: 10;transition: none;}
.menu .menu-item-has-children ul .menu-item-has-children:hover ul ,
.menu .menu-item-has-children ul .menu-item-has-children ul .menu-item-has-children:hover ul {
    right:100%;visibility:visible; padding-right: 5px;transition: .5s;}
.hidden-click{position: fixed; background-color: white; top:50%; left:50%; transform: translate(-50% , -50%); padding: 40px 60px 0 60px}
.modal{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.63);
}
.close-btn{
  position: fixed;
  top:10px;
  right:20px;
  cursor: pointer;
  background: none;
  color: grey;
  font-size: 1.2rem;
  background: lightgrey;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  transition: .3s;
}
.close-btn:hover{
  background-color: tomato;
  color:white;
}
.hidden-click img{height:410px;width: 380px}
.visit-image h5{background: -webkit-linear-gradient( #2c6fff, #24bcfe); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
; font-size:28px;font-weight:normal;margin-bottom: 30px;}
.form-visit .info-visit{margin: 10px 0;text-align: left;color: #6a6a6a;font-size: 14px}
.form-visit input , .submit-visit{height: 45px;width: 280px;background-color: #f7f7f7;border-radius: 30px;
transform: translateY(-5px); padding: 5px 10px}
.info-visit{width: 100%;}
.info-visit span{width: 200px;margin-left: 10px}
.form-visit .submit-visit{width: 180px;color: white;background-color: #d04083;cursor: pointer;padding: 0 15px;
    transform: translateY(0);margin-top: 20px}
.form-visit .submit-visit .fa-check-circle{font-size: 18px}
.form-visit .submit-visit input[type=submit]{width: 150px;color: white;background-color: #d04083;height:45px;
    transform: translateY(0);cursor: pointer}
.message{background-color: #dffae2;color: #099749; border: 1px solid #099749;border-radius: 30px;font-size: 14px;
padding: 10px 15px; margin-bottom: 60px}
/*==========================================  main  =============================================*/
/*==========================================  same as  =============================================*/
.big-slider , .little-slider , .big-slider img , .doctors-item img , .expert , .service, .blog-item , .doctors
, .img-big-slide img , .img-big-slide {border-radius: 10px;}
.front-language , .back-language , .visit , .more-arrow {width: 135px;height: 40px;border-radius: 30px;}
.tablink img , .hidden-tab img , .icon-subject img , .little-slider .icon-subject img ,
.intro-doctor-box .icon-subject img , .service-item .icon-subject img{height: 40px;width: 40px;}
h2{margin-bottom: 10px}
.little-slider .icon-subject , .service-item .icon-subject , .intro-doctor-box .icon-subject{background-color: rgba(255,255,255,.1)}
.tab-info , .tab-category, .doctors{height: 406px}
.tabcontent .icon-subject , .single-doctor-info .icon-subject{background-color: #fdf6ec}
.article-tags , .presence{margin:40px 0;border-bottom: 1px solid #ebebeb; border-top: 1px solid #ebebeb;padding: 10px 0;}
.visit , .head-section .more-arrow ,.call-footer input[type=submit]{background-image: linear-gradient(to right,#41aa51 ,#72ce45);}
.doctors , .big-slider , .little-slider {cursor: pointer}
/*==========================================  intro  =============================================*/
.intro{margin: 20px 0}
.big-slider{height: 257px;width: 74%;margin-left: 20px;position: relative;}
.img-big-slide{height: 257px;width: 100%; position: relative;overflow: hidden;}
.img-big-slide img{height: 257px;width: 100%}
.doctors img {width: 100%; height: 100%;}
.little-slider{height: 257px;background-image: linear-gradient(45deg ,#41aa50 ,#46af4f ,#4da75b);border-radius: 10px;
    color: white;width: 24%;padding: 40px 10px 10px 10px;}
.icon-subject{height: 68px; width: 68px; border-radius: 20px;}
.little-slider .icon-subject{margin-right: 70%;}
.slider-text span{line-height: 2;font-weight: 300;font-size: 15px}
.text-big-slider{position: absolute; left: 5%; bottom: 20%;color: white; font-weight: lighter; width: 250px}
.text-big-slider h3{font-weight: bold; font-size: 25px}
.category-tooltip{position: absolute; top: 5%; left: 1%;height: 30px; width: 100px; border-radius: 20px;
background-color: rgba(255,255,255,.1); color: white; text-align: center;padding-top: 5px;font-size: 12px}
/*==========================================  tab-info  =============================================*/
.tab-info{margin-bottom: 20px;position: relative}
.tab-info , .tab-category, .doctors{height: 406px}
.tab-category{flex-basis: 75%;margin-left: 20px}
.tab-box{height:280px;}
.tab-btn{height: 80px;border-bottom: 1px solid #e6e6e6; padding:0 10px 10px 10px}
.triangle-down {width: 0;height: 0;border-left: 10px solid transparent;border-right: 9px solid transparent;
    border-top: 10px solid #ffffff;position: absolute;left: 39%;top: 99%;}
.down {transform: rotate(45deg);-webkit-transform: rotate(45deg);}
i {border: solid #e6e6e6;border-width: 0 1px 1px 0;display: inline-block;padding: 6px;position: absolute;left: 43%;top: 93.5%;}
/* Style tab links */
.tablink {background-color: transparent;color: black;float: right;outline: none;
    cursor: pointer;padding: 14px 10px;font-size: 14px;width: 9%;border:none;position: relative;height: 90px;}
.tablink .hidden-tab{position: absolute;right: 0;top: 0;background-color: white;
    border: 1px solid #e6e6e6;height: 100%;width: 100%;border-radius: 10px;opacity: 0;transition: .3s;}
.tablink:hover .hidden-tab , .active .hidden-tab {opacity: 1}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {display: none;padding: 30px 20px 5px 20px;height: 100%;color: #7a7a7a;}
.tabcontent .icon-subject{background-color: #fdf6ec}
.tabcontent .explain{margin-right: 30px;flex: 1}
.tab-category .more-arrow{float: left}
.more-arrow{background-color: #eda343;padding: 10px 20px;color: white; float: left}
.more-arrow .circle-arrow{height: 15px; width:15px; background-color:#db8c26; border-radius: 50%; font-size: 8px;
    text-align: center; padding: 3px 0;transition: .3s; border: none;cursor: pointer}
.more-arrow:hover .circle-arrow{background-color:#ffffff; color:#eda343}
/*========================================== tab-info>doctors =============================================*/
.doctors{position: relative;flex-basis: 25%;overflow: hidden;}
.doctors-item{position: relative;width: 100%;border-radius: 10px;overflow: hidden; }
.doctors-item img{height: 406px;width: 100%;object-fit: cover;}
.doctors .rate{color: goldenrod;font-size: 14px; margin-top: 15px}
.green-shadow{ background-image: linear-gradient(to top,rgba(65,170,81,1) 2% ,rgba(255,255,255,.1) 40%);
    position: absolute; width: 100%; height: 100%; right: 0; left: 0; bottom: 0;border-radius: 10px}
.intro-doctor-box{position: absolute; top: 80%; right: 5%}
.intro-doctor-box span{font-size: 18px;color: white;}
.intro-doctor-box .icon-subject{margin:-5px 68px 0 0 }
.title-section-rotate{position: absolute; left: -14%; top: 0}
.title-section-rotate img{height: 33px; width: 33px;object-fit: cover}
.title-section-rotate h5{transform: rotate(270deg)translateY(58px)translateX(-71px); width: 150px;font-weight:normal;color: #a3a3a3}
/*==========================================  process =============================================*/
.process {position: relative}
.process .expert {flex-basis:70%;border: 1px solid #e6e6e6; height: 300px;background: url("images/expert.jpg") no-repeat bottom center/cover}
.process .service {border: 1px solid #e6e6e6; height: 300px;position: relative;flex-basis: 28%;margin-left: 15px}
.process .service .image-back , .process .service .image-back img {height: 100%; width: 100%; border-radius: 10px;}
.service{position:relative;}
.service-item{position: absolute; top: 15%; right:10%;width: 100%; height: 100%}
.service-text{width: 60%}
.service-text h3{font-weight: normal;color: white}
.service-text p{text-align: justify; color: white;font-size: 13px;font-weight: 300;height: 52%;}
.service-item .icon-subject{margin-right: 15px}
.service-item .more-arrow{background-color: white;color:#9a9a9a;}
.service-item  .circle-arrow{background-color:#f3f3f3;color: #bfbfbf}
.service-item  .more-arrow:hover .circle-arrow{background-color:#cac7c7; color:#ffffff}
.expert{grid-template-columns: 1fr 1fr; grid-column-gap: 30px; padding: 15px 30px 0 30px}
.expert-item {padding: 0 10px}
.expert-text {flex: 1;}
.expert-text h3{color: #7a7a7a; font-weight: normal}
.expert-text p{color: #a0a0a0; font-size: 13px; margin: 10px 0;text-align: justify}
.expert .icon-subject , .right-blog .icon-subject {background-color: #f6f6f6;margin-left: 20px}
.expert .icon-subject img , .right-blog .icon-subject img{height: 35px ; width: 35px}
/*
.process .service .full-green{height: 100%; width: 100%; position: absolute; right: 0;left: 0;top: 0;border-radius: 10px;
background-color: rgba(65,170,81,.9)}*/
/*==========================================  blog  =============================================*/
.head-section{margin: 20px 0;}
.head-section .subject-head h4{color: #969696;font-weight:normal}
.head-section .subject-head img{margin-left: 5px;height: 35px ; width: 30px}
.head-section hr{width: 72%; height: 1px; border: none; background-color: #e6e6e6}
.head-section .more-arrow .circle-arrow{background-color: #42ab51;}
.head-section .more-arrow:hover .circle-arrow{background-color:white; color:#42ab51 }
.blog{grid-template-columns: repeat(3,34.1%); grid-gap: 15px; height: 162px;margin: 15px 0;}
.blog-item{height: 162px; width: 100%;margin-right: -55px;}
.blog-item:hover figure .green-shadow{background-image: linear-gradient(to top,rgba(65,170,81,1) 2% ,rgba(255,255,255,.1) 99%)}
.blog-item figure{position: relative;height: 100%; width: 85%;border-radius: 10px;}
.blog-item figure img{height: 100%; width: 100%;border-radius: 10px;}
.img-right-blog img{height: 45px ; width: 45px; border-radius: 50%;object-fit: cover;}
.right-blog{width: 15%;}
.right-blog .icon-subject{height: 45px; width: 45px; border-radius: 15px;margin-left: 10px}
.right-blog .icon-subject img{height: 30px; width: 30px;}
.date-right-blog{background-color: #fdf6ec; color:#eda343; border-radius: 15px;height: 55px; width: 45px;margin: 5px 0}
.date-right-blog span:first-child{border-bottom: 1px solid #eda343;font-weight: bold;font-size: 18px}
.date-right-blog span:last-child{font-size: 14px}
.blog-item figure .green-shadow{ background-image: linear-gradient(to top,rgba(65,170,81,1) 2% ,rgba(255,255,255,.1) 70%);transition: .5s;
    position: absolute; width: 100%; height: 100%; right: 0; left: 0; bottom: 0;border-radius: 10px;}
.text-blog{bottom: 5%; right: 5%; position: absolute; color: white; font-size: 14px; }
/*==========================================  footer  =============================================*/
footer{border-top: 2px solid #eda343}
.top-footer{padding: 20px 0;font-size: 12px;color: #6a6a6a}
.call-footer{flex-basis:30%;height: 45px; border-left: 1px solid #ebebeb }
.call-footer .phone{margin-left: 30px }
form{width: 338px; padding: 5px; border-radius: 30px;border: 1px solid #e6e6e6;margin-right: 40px}
.call-footer input{border: none;font-size: 12px}
.call-footer input[type=text]{width: 200px; padding: 5px}
.call-footer input[type=submit]{width: 130px;border-radius: 30px;height: 35px;color: white;transition: .3s;cursor: pointer}
.call-footer input[type=submit]:hover{background-image: linear-gradient(to left,#41aa51 ,#72ce45);}
/*==========================================  middle-footer  =============================================*/
.bg-footer{background: url("images/bg-footer.png") no-repeat bottom left;
border-top: 1px solid #e6e6e6}
.footer-item{padding: 0 40px}
.footer-item:first-child{padding: 0; flex-basis: 25%}
.footer-item:nth-child(2){flex-basis: 50%}
.footer-item:nth-child(3){flex-basis: 25%}
.head-footer{border-bottom: 1px solid #e6e6e6;margin:10px 0 0 0; padding: 10px 0;color: #6a6a6a}
.head-footer h6{font-weight: normal}
.footer-item hr{height: 1px; width: 30%; background-color:#41aa51; border:none;transition: .4s;margin-top: -1px}
.footer-item:hover hr{ width: 100%;}
.access li {width: 50%; margin: 5px 0}
.access li a{color: #7a7a7a; font-size: 12px;display: inline-block;transition: .3s}
.text-line a{color: #a2a2a2; font-size: 11px; margin: 10px 0;display: inline-block;transition: .3s}
.text-line a:hover , .access li a:hover{color: #eda343;}
.text-line span{color: #eda343;font-size: 11px; }
.text-line span:after{content: ']';color: #eda343}
.text-line span:before{content: '[';color: #eda343}
.footer-item img:nth-child(1){height: 120px; width: 97px; margin: 0 10px}
.footer-item img{height: 133px; width: 81px; margin: 0 10px}
/*==========================================  bottom-footer  =============================================*/
.bottom-footer{border-top: 1px solid #e6e6e6; font-size: 12px; color: #afb6bc; padding: 20px 0}
.bottom-footer  .scroll-top  .fa-angle-up{font-size: 16px; transform: translateY(4px) translateX(8px)}
.bottom-footer .scroll-top{transition: .3s; cursor: pointer}
.bottom-footer .scroll-top:hover{color: #eda343}
/*==========================================  category  =============================================*/
.category{grid-template-columns: 1fr 3fr; grid-column-gap: 30px}
.head-page{margin: 30px 0; font-size: 14px; color: #979797;font-weight: lighter}
.head-page ul{flex-wrap: wrap;}
.head-page ul li:nth-child(1){color: #49b263;font-size: 16px; font-weight: normal}
.head-page ul li:nth-child(1):after{content: ':' ; color: #49b263}
.head-page ul li:after{content: '\002f' ; color: #979797; margin: 0 10px}
.head-page ul li:last-child:after{content: ''}
.sidebar{border: 1px solid #ebebeb; border-radius: 10px; padding: 10px;margin-bottom: 30px;height:auto;line-height: 2;}
.category .sidebar ul li{color:#49b263;font-weight: bold }
.category .sidebar ul li a{color:#979797;font-weight:lighter;font-size: 12px; margin: 10px 0;transition: .3s}
.category .sidebar ul li a:hover{color:#49b263;}
.article .blog-item{width: 100%;margin-right: 0;height: auto;border-bottom: 1px solid #ebebeb; border-radius: 0;padding: 20px 0}
.article .blog-item .cap-blog{flex: 1 }
.article .blog-item figure{width: 330px;margin-left: 15px;height: 205px}
.article .blog-item .cap-blog span , .article-paragraph span{color:#49b263; font-size: 20px;}
.article .blog-item .cap-blog p , .article-paragraph p {color:#979797;font-weight: lighter;font-size: 14px;line-height: 2;margin-top:5px}
.article .blog-item .cap-blog a{color:#49b263;font-weight:normal;}
.article .blog-item .cap-blog a:hover{font-weight:bold;transition: .3s}
.article .blog-item .cap-blog a:after{content: ']';color:#49b263 }
.article .blog-item .cap-blog a:before{content: '[';color:#49b263 }
.next{margin: 30px 0;flex-wrap: wrap;}
.next li a{color: #979797;font-size: 14px;padding: 5px;height: 30px; width: 30px; border-radius: 50%;margin: 0 2px;text-align: center;
    transition: .3s;display: inline-block;font-weight: lighter}
.next li a:hover , .next li a.active-next{background-color: #eda343;color: white}
.next li .next-text:last-child , .next li .prev-text:first-child {height:auto; width: auto; border-radius:0;border:none;font-weight: normal}
.next li .next-text:last-child:hover , .next li .prev-text:first-child:hover {background-color:white;color: #eda343}
/*==========================================  single-blog  =============================================*/
/*================= .article-single ===================*/
.article-single{grid-column: 1/4; grid-row: 1/4;}
.sidebar-single{grid-column: 1/2; grid-row: 2/auto;}
.single-blog{ grid-template-columns: 1fr 3fr;grid-template-rows:auto 1fr ;grid-row-gap: 180px}
.article-pic{flex-basis:30%}
/*.article-pic .blog-item figure{overflow: hidden}
.article-pic .blog-item figure img{object-fit: cover; transform: scale(1.4); overflow: hidden}*/
.article-pic .blog-item .right-blog {width: 16.5%;}
.article-paragraph{flex: 1;flex-basis:70%;margin-right: -35px;}
.article-paragraph p{font-weight: normal;}
.article-paragraph .ul-paragraph li:nth-child(1){font-size: 16px;margin: 20px 0 0 0}
.article-paragraph ul{color: #979797;}
.article-paragraph .ul-paragraph li{margin-right: 30px;margin-top: 5px; font-size: 14px}
.more-reading{height: 45px; border-radius: 10px; background-color: #ecf7ef;padding: 10px;margin: 30px 0}
.more-reading span , .more-reading a{font-size: 14px; color: #49b263;margin: 0 3px}
.article-tags span {font-size: 16px; color: #979797;}
.article-tags ul li a{display: inline-block;color: #9e9e9e;font-size: 14px;margin: 0 5px;transition: .3s}
.article-tags ul li a:hover{color: #49b263}
.article-tags ul li a:after{content: ' ،' ; color: #9e9e9e}
.article-tags ul li:last-child a:after{content: ''}
/*================= sidebar-single ===================*/
.sidebar-item{height: 70px;margin: 15px 0; cursor: pointer;border-radius: 10px;transition: .3s;overflow: hidden}
.sidebar-item:hover{background-color: #ebebeb}
.sidebar-item:hover img{opacity: .8;}
.sidebar-item:hover .sidebar-caption{color:#49b263 }
.sidebar-item img{height: 100%; width: 100px; border-radius: 10px;transition: .3s}
.sidebar-caption{flex: 1;font-size: 13px; color: #979797; padding: 5px;}
.sidebar-single h3{color:#49b263}
.single-doctor{grid-template-columns: 1fr 3fr;margin-bottom: 30px}
/*==========================================  single-doctor  =============================================*/
.single-doctor-info{margin-right: 30px;margin-top: 30px}
.doctor-name span:nth-child(1){color:#49b263;font-size: 20px }
.doctor-name span:nth-child(2){color:#99e7ac;font-size:14px; margin-top: 10px}
.single-doctor-info p{color: #979797;line-height: 2;margin-top: 20px}
.presence {margin:90px 0 0 0}
.presence span:nth-child(1){color:#49b263;}
.presence span:nth-child(2){color:#979797;margin-right: 10px;font-size: 14px}



.spinner-block {
    position: absolute;
    text-align: center;
    top:30px;
    left :30px;
}

.spinner {
    position: relative;
    width: 100%;
    height: 100%;
}
.spinner:before, .spinner:after {
    content: "";
    display: block;
    position: absolute;
    border-width: 4px;
    border-style: solid;
    border-radius: 50%;
    transition: .3s;
}

.spinner.spinner-1:before {
    position: absolute;
    width: 0;
    height:0;
    border-color: #212121;
    top:50%;
    left:50%;
    transform: translate(-50% , -50%);
    border-width: 12.5px;
    border-style: solid;
    border-top-color: white;
    border-right-color: rgba(255, 255, 255, 0.29);
    border-bottom-color: rgba(255, 255, 255, 0.29);
    border-left-color: rgba(255, 255, 255, 0.29);
}
.spinner.spinner-2:before {
    position: absolute;
    width: 0;
    height: 0;
    border-color: #212121;
    top:50%;
    left:50%;
    transform: translate(-50% , -50%);
    border-width: 12.5px;
    border-style: solid;
    border-top-color: white;
    border-right-color: white;
    border-bottom-color: rgba(255, 255, 255, 0.29);
    border-left-color: rgba(255, 255, 255, 0.29);
}
.spinner.spinner-3:before {
    position: absolute;
    width: 0;
    height: 0;
    border-color: #212121;
    top:50%;
    left:50%;
    transform: translate(-50% , -50%);
    border-width: 12.5px;
    border-style: solid;
    border-top-color: white;
    border-right-color: white;
    border-bottom-color: white;
    border-left-color: rgba(255, 255, 255, 0.29);
}
.spinner.spinner-4:before {
    position: absolute;
    width: 0;
    height: 0;
    border-color: #212121;
    top:50%;
    left:50%;
    transform: translate(-50% , -50%);
    border-width: 12.5px;
    border-style: solid;
    border-top-color: white;
    border-right-color: white;
    border-bottom-color: white;
    border-left-color:  white;
}
.spinner:after {
    position: absolute;
    width: 0;
    height: 0;
    border-width: 10.5px;
    border-color: #46af4f;
    top:50%;
    left:50%;
    transform: translate(-50% , -50%);
    background-image: linear-gradient( 45deg , #41aa50 , #46af4f , #4da75b);
}
.menu-more{
  display: none;
}

@keyframes spinner {
    0%{
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    25%{
        border-top-color: rgba(255, 255, 255, 0.29);
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    50%{
        border-top-color: rgba(255, 255, 255, 0.29);
        border-right-color: rgba(255, 255, 255, 0.29);
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    75%{
        border-top-color: rgba(255, 255, 255, 0.29);
        border-right-color: rgba(255, 255, 255, 0.29);
        border-bottom-color: rgba(255, 255, 255, 0.29);
        border-left-color: transparent;
    }
    100%{
        border-top-color: rgba(255, 255, 255, 0.29);
        border-right-color: rgba(255, 255, 255, 0.29);
        border-bottom-color: rgba(255, 255, 255, 0.29);
        border-left-color: rgba(255, 255, 255, 0.29);
    }
}

/************* Risponsive *************/
@media (max-width: 1200px) {
  body{
    overflow-x: hidden;
  }
    .middle-header{
      display: flex !important;
      justify-content: space-between !important;
    }
    .logo{width: 70%; padding: 10px;}
    .logo img{
      display: block;
      float: right;
    }
    .mid-left{
      display: block !important;
      width: 100%;
    }
    .title-section-rotate{
      left:-10px
    }
    .menu{
      flex-wrap: wrap;
      width: 100%;
      justify-content: space-around;
      background: rgb(238, 238, 238);
      display: none;
    }
    .language-visit{
      margin-top:10px;
    }
    .menu li{
      width: 100%;
      text-align: center;
      padding:5px;
      background-color: rgb(231, 231, 231);
      margin-bottom: 5px;
    }
    .menu-more{
      display: block;
      width: 35px;
      height: 35px;
      background: url('images/list.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      box-shadow: 0 0 100px -100px grey;
      margin-left:10px;
      border-radius:5px;
    }
    .sub-menu{
      display: none !important;
      position: static !important;
      visibility: visible !important;
      width: 100% !important;
      margin: 0;
      padding: 0;
    }
    .menu-item-has-children:hover .sub-menu{
      display: block !important;
    }
    .menu-item-has-children .sub-menu .sub-menu{
      width: 60% !important;
      padding: 0 !important;
    }
    .menu-item-has-children .sub-menu .sub-menu li{
      display: none ;
      padding: 0 !important;
    }
    .menu-item-has-children:hover .sub-menu:hover .sub-menu li{
      display: block !important;
    }
    .logo img{width: 120px; display: block; margin: auto;}
    header hr {width: 96%;margin: 0 23px 0 0;}
    .little-slider .icon-subject{margin-right: 60%}
    .little-slider h2 {margin-bottom: 5px;font-size: 18px;}
    .slider-text span {line-height: 1.5;font-size: 13px;}
    .explain p{font-size: 14px;}
    .explain h2{font-size: 18px}
    .intro-doctor-box {top: 75%;}
    .intro-doctor-box .icon-subject {margin: -5px 17px 0 0;}
    .head-section hr{width: 60%;}
    .blog .blog-item {margin-right: -30px;}
    .call-footer{flex-basis:49%;margin: 10px 0; }
    .top-footer{flex-wrap: wrap;}
    .call-footer:last-child{flex-basis: 37%;}
    .call-footer:nth-child(2){border-left: none;text-align: center;}
    .sidebar-item {height: 75px;}
    .sidebar-caption {font-size: 11px;}
    .language-visit {transform: translateX(3px) !important;}

}
@media (max-width: 992px) {
    .top-header-right , .top-header-left{flex-basis: 100%}
    .top-header-right{border-left: none}
    .time , .address{margin-right: 0;}
    .address{margin-left: 0;}
    .mid-left{flex-wrap: wrap;}
    .middle-header .menu {flex-basis: 100%;margin: 20px 0;}
    .language-visit{flex-basis: 100%; justify-content: left}
    .middle-footer{flex-wrap: wrap; justify-content: end}
    .footer-item:first-child{flex-basis: 40%}
    .footer-item:nth-child(2){flex-basis: 60%}
    .footer-item:nth-child(3){flex-basis: 30%;margin: 20px 0;}
    .intro{flex-direction: column}
    .big-slider{flex-basis: 100%;width: 100%}
    .little-slider{flex-basis: 100%;width: 100%;margin: 20px 0; padding: 40px}
    .little-slider .icon-subject {margin-right: 88%;}
    .tab-category {flex-basis: 100%;margin-left: 0;}
    .tab-info {flex-direction: column;height: auto;}
    .title-section-rotate {left: -23%;top: 50%;}
    .doctors{margin: 40px 0; flex-basis: 90%;width: 90%;transform: translateX(-6%)}
    .doctors img{object-fit: cover}
    .process {flex-direction: column-reverse;}
    .process .expert {padding:40px 20px;
        flex-basis:100%;border: 1px solid #e6e6e6;
        height: auto!important;background: url("images/expert.jpg") no-repeat bottom center/cover}
    .process .service {border: 1px solid #e6e6e6;position: relative;flex-basis: 60%;
    width: 90%;margin: 40px 6% 40px 0;}
    .blog .blog-item {margin-right: -30px;}
    .blog .blog-item {height: 206px;width: 100%;margin-right:0;}
    .blog {grid-template-columns: 1fr;grid-gap: 22px;height: auto;margin: 15px 0;}
    .blog .right-blog {width: 10%;}
    .head-section hr {width: 50%;}
    .tab-box {height: auto;}
    /***************************.category*******************************/
    .category{grid-template-columns: 1fr; grid-column-gap: 30px;}
    .category aside{grid-row: 2/4}
    .category article{grid-row: 1/2}
    .widget ul {display: flex; flex-wrap: wrap}
    .widget ul li{width: 50%}
    /***************************single-blog*******************************/
    .article-single{grid-column: 1/4; grid-row: 1/4;}
    .sidebar-single{grid-column: 1/4; grid-row: 4/auto;}
    .single-blog{ grid-template-columns: 1fr 3fr;grid-template-rows:auto 1fr ;grid-row-gap: 10px}
    .sidebar-caption {font-size: 14px;}
    .article-single-item{flex-direction: column}
    .single-blog .blog-item {height: 230px;width: 100%;margin-right: 0px;margin-bottom: 20px}
    .single-blog .article-pic .blog-item .right-blog {
        width: 8.5%;
    }
    .single-doctor {
        grid-template-columns: 1fr;
    }
    .sidebar-doctor .doctors-item {
        width: 100%;
    }
    .single-doctor-info {
        margin-right: 0;
    }
}
@media (max-width: 768px) {
    .little-slider .icon-subject {margin-right:80%;margin-top: 10px;}
    .little-slider {flex-basis: 100%;width: 100%;margin: 20px 0;padding: 50px 20px;}
    .little-slider .slider-text {width: 70%;}
    .expert {grid-template-columns: 1fr;}
    .tablink img, .hidden-tab img {height: 30px;width: 30px;}
    .top-footer{justify-content: center}
    .top-footer .logo{display:flex;justify-content: center;margin-bottom: 10px;}
    .call-footer {flex-basis: 100%;margin: 10px 0;}
    .call-footer:nth-child(1) {flex-direction: column;border-left: none}
    .footer-item:first-child , .footer-item:nth-child(2) {flex-basis: 100%;}
    .footer-item:nth-child(2) {margin: 17px 0; width: 100%;padding: 0}
    .footer-item:nth-child(3) {flex-basis: 95%}
    .bottom-footer .copyright{flex-direction: column;justify-content: center;align-items: center}
    .tabcontent .explain {margin-right: 5px;}
    .icon-subject  {height: 55px;width: 55px;border-radius: 10px;}
    .expert-item {padding: 0 5px;margin: 10px;}
    .expert{margin: 20px;}
    .process .title-section-rotate {
        left: -28%;
        top: 2%;
    }
    .tab-info .title-section-rotate {
        left: -28%;
        top: 50%;
    }
    .head-section hr {
        width: 35%;
    }
    .process .expert {
        padding: 20px 10px;
    }
    .triangle-down {left: 32%;}
    i.down {left: 40%;
    top: 93.5%;
    right: 29%;
}
    .article .blog-item{flex-direction: column}
    .article .blog-item .img-blog{margin-bottom: 10px}
    .article .blog-item .right-blog{width: 13%;margin-left: 10px;}
    .article .blog-item figure {
        width: 307px;
        margin-left: 0px;
        height: 165px;
    }
    .article .blog-item .cap-blog p{width: 100%;}
    .article .blog-item .cap-blog span{font-size: 17px;}
    .next li a {
        font-size: 13px;
        margin: 0;}


    .presence {
        margin: 50px 0 0 0;
        font-size: 12px;
        flex-direction: column;
    }

    .article .blog-item figure{width: 100%;}
    .article .blog-item figure img{object-fit: cover;}


}

@media (max-width: 480px) {
    .top-header-right , .top-header-left{flex-wrap: wrap}
    .time , .address , .social-header , .phone{flex-basis: 100%;margin: 5px 5px 0 0}
    header hr {width: 92%;margin: 0 14px 0 0;}
    .language-visit {transform: translateX(29px);flex-wrap: wrap;}
    .language-visit .front-language {margin: 0;}
    .tablink img, .hidden-tab img {height: 20px;width: 20px;}
    .triangle-down {left: 25%;top: 100%;}
    i.down {padding: 5px;left: 38%;right: 31%;top: 94.5%;}
    .explain h2 {font-size: 14px;}
    .explain p {font-size: 11px}
    .head-section hr {width: 0%;}
    .tablink {padding: 10px 0px;font-size: 0px;}
    .tab-info .title-section-rotate , .process .title-section-rotate {left: -34%;}
    .blog .right-blog {width: 15%;}
    .blog .blog-item {height: 165px;}
    .article-paragraph {margin-right: 0}
    .single-blog .article-pic .blog-item .right-blog {
        width: 15.5%;
    }
    .more-reading span, .more-reading a {
        font-size: 11px;
    }
    .big-slider{
        margin-left: 0;
    }
    .slick-dots{
        right: -2%;
    }
}

@media (max-width: 405px) {
    .language-visit .front-language {margin-bottom: 10px;}

}

@media (max-width:1280px) {
    .tab-info .title-section-rotate , .process .title-section-rotate {left: -16%;}
}
@media (max-width: 968px) {
    .tab-info .title-section-rotate , .process .title-section-rotate {left: -20%;}
}
@media (max-width: 780px) {
    .tab-info .title-section-rotate , .process .title-section-rotate {left: -26%;}
}
@media (max-width: 490px) {
    .tab-info .title-section-rotate , .process .title-section-rotate {left: -30%;}
}

@media (max-width: 430px) {
    .tab-info .title-section-rotate , .process .title-section-rotate {left: -37%;}
}
@media (max-width: 360px) {
    .tab-info .title-section-rotate , .process .title-section-rotate {left: -45%;}
}
@media (max-width: 320px) {
    .tab-info .title-section-rotate , .process .title-section-rotate {left: -45%;}
}







@keyframes closeModal {
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    display: none;
  }
}
@keyframes openModal {
  0%{
    opacity: 0;
    display: block;
  }
  100%{
    opacity:1;
    display: block;
  }

}


#totop{
  font-size: 1.5rem;
  color:tomato;
  position: fixed;
  bottom:20px;
  right:30px;
  background-color: transparent;
  display: none;
  cursor: pointer;
  z-index: 100;
}
