:root {
  --main-color: #C1051D ;
  --second-color:#231F20;
}
* {
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
::selection {
 background-color: var(--main-color);
 color: #FFFEFE;
}
a {
  color: initial;
  text-decoration: none;
}
a:hover {
  color: initial;
}
p,
h1,
h3,
h4,
h5,
h6,
li,
span,
ul {
  margin: 0;
  padding: 0;
}
html,
body {
  overflow-x: hidden !important;
}
body{
  font-family: "Amiri", serif;
}
::-webkit-scrollbar{
  width: 10px;
}
::-webkit-scrollbar-track{
  background-color: #E4E4E4;
}
::-webkit-scrollbar-thumb{
  background-color: var(--main-color);
}

/* start scroller */
.scroller {
  position: fixed;
  background-color: #ef4136;
  width: 0;
  height: 5px;
  top: 0;
  left: 0;
  z-index: 99999;
}
/* end scroller */

/* start mouse cursor */
.cursor-inner {
  margin-left: 0;
  margin-top: 0;
  width: 10px;
  height: 10px;
  z-index: 10000001;
  background-color: white;
  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
    margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
    margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
    margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.cursor-inner.cursor-hover {
  margin-left: -40px;
  margin-top: -40px;
  width: 100px;
  height: 100px;
  background-color: #ef4136;
  opacity: 0.3;
}
.cursor-outer {
  margin-left: -25px;
  margin-top: -25px;
  width: 60px;
  height: 60px;
  border: 1px solid #ef4136;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.5;
  -webkit-transition: all 0.08s ease-out;
  -o-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
}
.cursor-outer.cursor-hover {
  opacity: 0;
}
.mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}
/* end mouse cursor */

/* start prepare loader page */
.y i {
  font-size: 30px;
  color: white !important;
}
.ctn-preloader {
  -webkit-box-align: center;
  align-items: center;
  cursor: none;
  display: -webkit-box;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  transition-delay: 1s;
  z-index: 9999999;
}
.ctn-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}
.ctn-preloader .loader-section {
  background-color: #ffffff !important;
  height: 100%;
  position: fixed;
  top: 0;
  -webkit-transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2);
  transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2);
  width: calc(50% + 1px);
}
.ctn-preloader.loaded {
  cursor: auto !important;
  visibility: hidden;
  z-index: -1;
}
.ctn-preloader .loader-section.section-left {
  left: 0;
}
.ctn-preloader .loader-section.section-right {
  right: 0;
}
.loaded .animation-preloader {
  opacity: 0;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.loaded .loader-section.section-left {
  -webkit-transform: translateX(-101%);
  transform: translateX(-101%);
  -webkit-transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2);
  transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2);
}
.loaded .loader-section.section-right {
  -webkit-transform: translateX(101%);
  transform: translateX(101%);
  -webkit-transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2);
  transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2);
}
/* end prepare loader page */

/* start landing  */
 nav{
  padding-top: 45px !important;
  z-index: 99999;
  width: 100%;
}
nav ul{
  margin: auto;
}
.navbar .navbar-nav .nav-link.active{
  font-weight: bold;
}
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover{
  color: #C1051D;
  transition: 0.3s all ease-in;
}
.nav-item .nav-link{
  font-size: 14px;
  color: #E4E4E4;
}
nav .image {
  margin: 0 26px;
  margin-right: -17px;
}
nav .language {
  color: #E4E4E4;
  /* margin-left: 30px; */
}
ul.navbar-nav {
  margin: 0;
  width: 100%;
  justify-content: space-between;
}
nav .search {
  /* margin-left: 30px; */
  color: #E4E4E4;
}

.img-header{
  display: none;
}
.landing:before{
  content: "";
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/landing.png);
  background-repeat: no-repeat;
  position: absolute;
  width: 175px;
  height: 175px;
  left: -3%;
  top: 83%;
  z-index: 3;
}
.landing .mask{
  -webkit-mask-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Union.png);
  mask-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Union.png);
  mask-repeat: no-repeat;
  width: 100%;
  -webkit-mask-size: 100% 100%;
  height: 92.5%;
  top: 0;
  right: 0;
  z-index: -1;
}
.remove .mask{
  -webkit-mask-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/uniioonnn.png);
  mask-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/uniioonnn.png);
  mask-repeat: no-repeat;
  width: 100%;
  -webkit-mask-size: 100% 100%;
  height: 92.5%;
  top: 0;
  right: 0;
  z-index: -1;
}
.landing .mask:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(180deg , #1A0004 ,#4000084D );
  z-index: 2;
}
.landing .mask img{
  width: 100%;
}
.landing .title{
  position: absolute;
  transform: translate(-50% , -50%);
  top: 50%;
  left: 50%;
  z-index: 111;
  width: 100%;
  max-width: 781px;
}
.landing .title h1{
  font-size: 69px;
  font-weight: bold;
  color: #FFFEFE;
  line-height: 1.6;
}
.landing .title span{
  color: #C1051D;
}
.landing .title p{
  color: #E4E4E4;
  font-size: 14px;
  margin: 30px;
}
.landing button a{
  background-color: var(--main-color);
  color: #FFFFFF;
  padding: 10px 30px;
  border-radius: 5px;
}
.landing .image .arrow{
  position: absolute;
  top: 89%;
  left: 47%;
  z-index: 11;
}
.landing .social{
  position: absolute;
  display: flex;
  flex-direction: column;
  line-height: 2;
  z-index: 1;
  top: 34%;
  right: 8%;
}
.slick-dots{
  left: 34%;
  bottom: 8%;
  width: 97%;
}
.slick-dots li {
  margin: 0px -2px;
}
.slick-dots li button:before{
  font-size: 30px;
}
.slick-dots li.slick-active button:before {
  opacity: .75;
  color: var(--main-color);
}
.slide-count{
  position: absolute;
  color: var(--main-color);
  font-weight: bold;
  left: 86%;
  bottom: 5%;
  font-size: 60px;
}
/* end landing  */

/* start about us */
.about{
  padding-top: 200px;
  padding-bottom: 180px;
}
.about h2{
  position: relative;
  color: var(--second-color);
  font-size: 52px;
  font-weight: bold;
  line-height: 1.4;
}
.about span{
  color: var(--main-color);
}
.about p{
  font-size: 14px;
  color: #645A5C;
}
.description p{
  font-size: 18px;
}
.about a{
  color: var(--main-color);
  font-size: 20px;
  font-weight: bold;
}
.about:before{
  content: "";
  position: absolute;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/before.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 1500px;
  height: 1000px;
  z-index: -200;
  top: -91%;
  left: -49%;
}
.about h2::after{
  content: "";
  position: absolute;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Rectangle.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 300px;
  height: 5px;
  top: 100%;
  left: 0%;;
  z-index: 1;
}
.photo{
  position: relative;
}
.photo:before{
  content: "";
  position: absolute;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Path.png);
  background-repeat: no-repeat;
  width: 210px;
  height: 212px;
  top: 290px;
  z-index: -1;
}
.about .image{
  width: 100%;
}
.about .image img{
  width: auto;
  height: auto;
  max-width: 100%;
}
/* end about us */

/* start cards */
.cards{
  padding-top: 130px;
  padding-bottom: 40px;
}
.cards:before{
  content: "";
  position: absolute;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Pathh.svg);
  background-repeat: no-repeat;
  width: 210px;
  height: 212px;
  top: 40%;
  left: 97%;
  z-index: 1;
}
.card {
  box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
  background: #FFFFFF;
  border-radius: 15px;
  border: none;
  padding: 15px 30px;
  transition: 0.3s all ease-in;
  height: 100%;
}
.card img{
  margin-top: -5em !important;
  margin: auto;
  width: auto;
  max-width: 190px;
}
.card h3{
  color: var(--second-color);
  font-size: 32px;
  font-weight: bold;
}
.card p{
  font-size: 14px;
  color: #645A5C;
}
.card a{
  font-size: 18px;
  font-weight: bold;
  color: var(--main-color);
}
.cards .photto{
  width: 100%;
  height: 441px;
}
.cards .photto img{
  width: auto;
  height: auto;
  max-width: 100%;
}
.cards .content .over-lay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--main-color);
  border-radius: 14px;
  z-index: 2;
  opacity: 0.9;
}
.cards .content p{
  position: absolute;
  top: 25%;
  left: 26%;
  z-index: 111;
  font-weight: bold;
  text-align: center;
  font-size: 42px;
  line-height: 1.8;
  color: #FFFFFF;
}
/* end cards */

/* start departments */
.departments{
  padding-top: 130px;
  padding-bottom: 60px;
  overflow: hidden;
}
.departments:before{
  content: "";
  position: absolute;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Pathh.svg);
  background-repeat: no-repeat;
  width: 210px;
  height: 212px;
  bottom: 8%;
  left: 97%;
}
.departments:after{
  content: "";
  position: absolute;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/long.png);
  background-repeat: no-repeat;
  width: 128px;
  height: 3235px;
  top: 45%;
  z-index: -1;
}
.departments h2{
  font-size: 52px;
  font-weight: bold;
  color: var(--second-color);
}
.departments h2:before{
  content: "";
  position: absolute;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Rectangle.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 300px;
  height: 5px;
  bottom: 0;
  left: 40%;
  z-index: 1;
}
.departments span{
  color: var(--main-color);
}
.departments .info{
  box-shadow: rgb(194 92 92 / 14%) 1px 1px 15px;
  background: #FFFFFF;
  border-radius: 15px;
  border: 1px solid #C1051D1A;
  padding: 15px 30px;
  margin-top: 50px;
  transition: 0.2s all ease-in;
}
.departments .info:hover{
  border: 1px solid var(--main-color);
}
.departments .info p{
  font-size: 32px;
  font-weight: bold;
  color: var(--second-color);
}
.departments .image:before{
  content: "";
  position: absolute;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Path.png);
  background-repeat: no-repeat;
  width: 210px;
  height: 212px;
  top: 100px;
  z-index: 11;
}
.departments .imagee{
  width: 100%;
  height: 330px;
}
.departments .imagee img{
  width: auto;
  height: auto;
  max-width: 100%;
}
/* end departments */

/* start news */
.news{
  margin-top: 140px;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/news.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.news:before{
  content: "";
  position: absolute;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Path 834.png);
  background-repeat: no-repeat;
  width: 500px;
  height: 544px;
  z-index: 11;
  left: 94%;
  bottom: 22%;
}
.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(278deg , #C1051D , #C1051D1A , #C1051D);
  z-index: 2;
}
.news .content{
  padding: 160px;
  position: relative;
  background-color: #FFFFFF;
  border-radius: 0 200px;
  z-index: 11;
}
.news span{
  color: var(--main-color);
}
.news h2{
  color: var(--second-color);
  font-weight: bold;
  font-size: 52px;
  line-height: 1.4;
}
.news h2:before{
  content: "";
  position: absolute;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Rectangle.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 300px;
  height: 5px;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.news .details{
  background: #FFFFFF;
  border: 1px solid #eee;
  border-radius: 15px;
  padding: 15px 20px;
  box-shadow: rgb(194 92 92 / 14%) 1px 1px 15px;
  width: 100%; 
  transition: 0.2s all ease-in;
}
.news .details:hover{
  border: 1px solid var(--main-color);
}
.news .imaage{
  width: 100%;
  height: 230px;
}
.news .imaage img{
  width: auto;
  height: auto;
  max-width: 100%;
}
.news .date{
  justify-content: space-between;
  align-items: center;
}
.news .date h3{
  font-weight: bold;
  font-size: 20px;
  color: var(--second-color);
}
.news .day span{
  color: #645A5C;
}
.news p{
  color: #645A5C;
  font-size: 14px;
}
.news a{
  color: var(--main-color);
  font-size: 14px;
  font-weight: bold;
}
.slick-prev{
  bottom: -20% !important;
  top: unset !important;
  left: 25px;
}
.slick-prev:before {
 content: "" !important;
 background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/rleft.svg);
 background-repeat: no-repeat;
 background-position: center;
 display: flex !important;
 font-size: 25px;
 font-weight: bold;
 padding: 18px;
 color: var(--main-color);
 border-radius: 8px;
 border: 1px solid var(--main-color);
 opacity: 1 !important;
 transition: 0.3s all ease-in;
}
.slick-prev:hover:before{
  content: "" !important;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/wleft.svg);
  background-repeat: no-repeat;
  background-position: center;
  display: flex !important;
  font-size: 25px;
  font-weight: bold;
  padding: 19px;
  color: white;
  border-radius: 8px;
  background-color: var(--main-color);
  opacity: 1 !important;
}
.slick-next {
  left: 10%;
  bottom: -20% !important;
  top: unset !important;
}
.slick-next:before{
  content: "" !important;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/arrrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  display: flex !important;
  font-size: 25px;
  font-weight: bold;
  padding: 18px;
  color: var(--main-color);
  border-radius: 8px;
  border: 1px solid var(--main-color);
  opacity: 1 !important;
}
.slick-next:hover:before{
  content: "" !important;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/wright.svg);
  background-repeat: no-repeat;
  background-position: center;
  display: flex !important;
  font-size: 25px;
  font-weight: bold;
  padding: 19px;
  color: white;
  border-radius: 8px;
  background-color: var(--main-color);
  opacity: 1 !important;
}
.news button a{
  position: absolute;
  z-index: 11;
  background-color: var(--main-color);
  color: #FFFFFF;
  padding: 10px 30px;
  border-radius: 5px;
  right: 14%;
} 
.news .control li a{
  font-size: 24px;
}
/* end news */

/* start careers */
.career{
  padding-top: 150px;
  padding-bottom: 100px;
}
.career .form {
  box-shadow: rgb(194 92 92 / 14%) 1px 1px 15px;
  background-color: #FFFFFF;
  width: 100%;
  border-radius: 30px;
}
.career .form h4{
  color: var(--main-color);
  font-weight: bold;
  margin-bottom: 15px;
  font-size: 20px;
}
.career .form p{
  margin-bottom: 15px;
  font-size: 14px;
  color: #645A5C;
}
.career span{
  color: var(--main-color);
}
.career h2{
  font-weight: bold;
  font-size: 52px;
}
.career h2:before{
  content: "";
  position: absolute;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Rectangle.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 219px;
  height: 5px;
  right: 21%;
  bottom: 66%;
}
.career .immg{
  width: 100%;
  height: 450px;
}
.career .immg img{
  width: auto;
  height: auto;
  max-width: 100%;
}

/* start tabs */
.nav-tabs .nav-link {
  border: none !important;
  border-top-left-radius: none !important ;
  border-top-right-radius: none !important ;
}
.nav-link.active {
  color: var(--bs-nav-tabs-link-active-color);
  border-color: none !important;
}
.nav-tabs{
  border-bottom: none !important;
}
.career ul{
  display: flex;
  justify-content: space-between;
  margin: auto;
  position: relative;
}
.career ul::before{
    content: "";
    position: absolute;
    border-bottom: 2px solid #eee;
    width: 78%;
    left: 9%;
    top: 26%;
}
.career .nav-link {
  color: #FFFFFF;
  background-color: #eee;
  padding: 7px;
  width: 30px;
  height: 30px;
  border-radius: 16px;
}
.career .nav-link.active{
  color: #FFFFFF;
  background-color: var(--main-color);
  padding: 7px;
  width: 30px;
  height: 30px;
  border-radius: 16px;
}
.career .nav-link p{
  color: #eee;
  display: flex;
  align-items: center;
  flex-direction: column-reverse;
}
.career .nav-link.active p{
  color: var(--main-color);
  font-size: 14px;
  font-weight: bold;
}
.career .select{
  border-bottom: 1px solid #cfc9ca;
}
select{
  width: 100%;
  padding-left: 20px;
}
.career .login input[type="text"] {
  border: none;
  width: 100%;
}
.career .login .input input[type="text"]:focus{
  outline: none;
  caret-color: var(--second-color);
  color: var(--main-color);
}
.career .login input[type="email"] {
  border: none;
  width: 100%;
}
.career .login input[type="email"]:focus{
  outline: none;
  caret-color: var(--second-color);
  color: var(--main-color);
}
.career .level{
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.career .dots{
  display: flex;
}
.career .dots .dot1{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #645A5C;
} 
.career .dots .dot2{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #645A5C;
} 
.career .dots .dot3{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #645A5C;
} 
.career .move{
  flex-direction: column;
  gap: 70px;
}
.career .upload{
  color: var(--main-color);
}
.career .upload span{
  font-size: 18px;
}
.drop{
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 50px;
  border-bottom: 1px solid #cfc9ca;
}
.drop p{
  margin-top: 15px;
}
.career .second{
  margin-top: 100px;
}
.input{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #cfc9ca;
  padding-bottom: 15px;
}
.occuption{
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.career .input input[type="text"]{
  width: 100%;
}
.career .input input[type="text"]:focus{
  outline: none;
  caret-color: var(--second-color);
  color: var(--main-color);
}
.next{
  display: flex;
  align-items: center;
  gap: 3px;
}
.back{
  display: flex;
  align-items: center;
  gap: 3px;
}
svg.svg-inline--fa.fa-angle-left,
svg.svg-inline--fa.fa-angle-right {
  width: 7px;
}
.career .dots div{
  margin: 0 5px;
  cursor: pointer;
}
.career .occuption svg{
  color: #645A5C;
  font-size: 11px;
}
svg.svg-inline--fa.fa-paperclip {
  color: #645A5C;
  font-size: 11px;
}
/* end careers */

/* start footer */
.footer{
  margin-top: 140px;
  padding-top: 250px;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Unionn.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.footer:before{
  content: "";
  position: absolute;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/G.svg);
  background-repeat: no-repeat;
  width: 389px;
  height: 388px;
  right: -7px;
  top: -7%;
}
.footer h2{
  font-size: 42px;
  font-weight: bold;
  color: #FFFFFF;
}
.footer p{
  font-size: 14px;
  color: #E4E4E4;
}
.footer input[type="email"]{
  padding: 15px 50px;
  border-radius: 10px;
  caret-color: var(--main-color);
  color: #E4E4E4;
  width: 100%;
  max-width: 620px;
}
.footer input[type="email"]:focus{
  color: var(--main-color);
}
.footer .icon-img img{
  background-color: #E4E4E4;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  position: absolute;
  top: 29%;
  left: 23%;
}
.footer .buttonn{
  position: absolute;
  background-color: var(--main-color);
  padding: 5px 15px;
  border-radius: 5px;
  right: 23%;
  top: 26%;
  cursor: pointer;
}
.footer .buttonn a{
  color: #FFFFFF;
  font-size: 18px;
}
.footer .list{
  font-size: 14px;
}
.footer h3{
  font-size: 20px;
  color: #FFFFFF;
}
.footer ul li{
  line-height: 2;
}
.footer ul li .line{
  line-height: 2;
}
.footer ul li a{
  color: #E4E4E4;
  font-size: 14px;
}
.footer .social-icon a {
  color: #FFFFFF;
}
.copy-right{
  justify-content: space-between;
}
.copy-right p{
  font-size: 14px;
}
.copy-right .image{
  width: 10%;
}
.add:before{
  content: "";
  position: absolute;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Recta.png);
  background-repeat: no-repeat;
  right: 10%;
  bottom: 0%;
  width: 1000px;
  height: 5px;
}
.copy-right:before{
  content: "";
  position: absolute;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Recta.png);
  background-repeat: no-repeat;
  right: 10%;
  top: 6%;
  width: 1000px;
  height: 5px;
}
/* end footer */

/* start second page */
.remove:before{
  display: none;
}
.remove .mask{
  max-height: 70vh;
}
.remove h2{
  color: #FFFFFF;
  font-size: 46px;
  font-weight: bold;
  margin-top: 35px;
}
.us:before{
  display: none;
}
.vision{
  padding-top: 80px;
}
.vision .image{
  width: 100%;
  height: 370px;
}
.vision .image img{
  width: 55%;
  height: auto;
  max-width: 100%;
}
.vision h3{
  color: var(--second-color);
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 52px;
}
.vision p{
  font-size: 14px;
  color: #645A5C;
  line-height: 1.6;
  max-width: 86%;
}
.mission{
  padding-top: 130px;
}
.mission .image{
  width: 100%;
  height: 260px;
}
.mission .image img{
  width: 75%;
  height: auto;
  max-width: 100%;
}
.mission h3{
  color: var(--second-color);
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 52px;
}
.mission p{
  font-size: 14px;
  color: #645A5C;
  line-height: 1.6;
  max-width: 70%;
}
.departments a{
  font-size: 18px;
  font-weight: bold;
  color: var(--main-color);
}
/* end second page */

/* start third page */
.description:before{
  display: none;
}
/* end third page */

/* start fourth page */
.page{
  background: transparent;
}
.page:before{
  display: none;
}
.page .details{
  margin: 10px 0;
}
/* end fourth page */

/* start contact us */
.contact {
  padding-top: 100px;
  padding-bottom: 120px;
  background-image: url(/wp-content/themes/PUIUX-Hospital/assets/images/Group 23906.png);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
}
.contact h2 {
  color: #ffffff;
  font-size: 52px;
}
.change{
  padding-bottom: 150px;
  padding-top: 80px;
  background: transparent;
}
.contact .log {
  box-shadow: rgb(194 92 92 / 14%) 1px 1px 15px;
  background-color: #ffffff;
  width: 100%;
  height: 616px;
  border-radius: 20px;
}
.contact .log h4 {
  color: var(--main-color);
  font-size: 22px;
  font-weight: bold;
}
.contact .log p {
  color: var(--second-color);
  font-size: 14px;
}
.contact .form input[type="text"] {
  border: none;
  color: var(--main-color);
  border-bottom: 1px solid #b4aebe;
  width: 100%;
}
.contact input[type="text"]:focus {
  outline: none;
  color: var(--main-color);
  border-bottom: 1px solid var(--main-color);
  caret-color: black;
  transition: 0.3s all ease-in;
}
.contact input[type="text"]:focus:hover {
  padding-bottom: 10px;
}
.contact .form input[type="email"] {
  border: none;
  color: var(--main-color);
  border-bottom: 1px solid #b4aebe;
  width: 100%;
}
.contact input[type="email"]:focus {
  outline: none;
  color: var(--main-color);
  border-bottom: 1px solid var(--main-color);
  caret-color: black;
  transition: 0.3s all ease-in;
}
.contact input[type="email"]:focus:hover {
  padding-bottom: 10px;
}
.contact :nth-child(2):focus::placeholder {
  color: var(--main-color);
}
.contact .form input:nth-child(3)[type="text"] {
  border: none;
  color: var(--main-color);
  border-bottom: 1px solid #b4aebe;
  width: 100%;
}
.contact input:nth-child(3)[type="text"]:focus {
  outline: none;
  color: var(--main-color);
  border-bottom: 1px solid var(--main-color);
  caret-color: black;
  transition: 0.3s all ease-in;
}
.contact input:nth-child(3)[type="text"]:focus:hover {
  padding-bottom: 10px;
}
.contact :nth-child(3):focus::placeholder {
  color: var(--main-color);
}
.contact textarea {
  width: 100%;
  height: 100px;
}
.contact .form textarea:nth-child(4) {
  border: none;
  color: var(--main-color);
  border-bottom: 1px solid #b4aebe;
  width: 100%;
}
.contact textarea:nth-child(4):focus {
  outline: none;
  color: var(--main-color);
  border-bottom: 1px solid var(--main-color);
  caret-color: black;
  transition: 0.3s all ease-in;
}
.contact textarea:nth-child(4):focus:hover {
  padding-bottom: 10px;
}
.contact :nth-child(4):focus::placeholder {
  color: var(--main-color);
}
.contact :nth-child(1):focus::placeholder {
  color: var(--main-color);
}
.contact .form [type="submit"] {
  display: block;
  width: 100%;
  border: none;
  border-radius: 10px;
  background-color: var(--main-color);
  color: #FFFFFF;
  font-weight: bold;
  font-size: 24px;
  padding: 6px;
}
.change input{
  background: transparent;
}
.change textarea{
  background: transparent;
}
/* end contact us */

.mapouter iframe {
  width: 100% !important;
  border-radius: 20px;
}
.mapouter {
  height: 616px !important;
  width: 100% !important;
}
iframe{
  height: 616px !important;
}
/* end fifth page */

.carer-page .image{
  margin-top: 247px;
}
.carer-page img{
  display: flex;
  margin: auto;
  width: 70%;
}
.carrer-page ul:before{
  width: 74%;
  left: 12%;
}
.carer-section .nav-item .nav-link{
  color: #5b5050;
}
.carer-section nav .language{
  color: #5b5050;
}
.carer-section nav .search{
  color: #5b5050;
}

/* start responsive */
@media (min-width : 1500px){
  .landing .image .arrow {
    top: 90%;
    left: 48%;
    width: 6%;
}
.landing .title {
  top: 42%;
}
.about p{
  font-size: 18px;
}
.remove .mask {
  max-height: 80vh;
}
  .cards .content .over-lay{
    width: 100%;
  }
  .cards .content p{
    left: 22%;
  }
  .news .details{
    width: 86%;
  }
  /* .news .slider-card{
    margin-left: 60px;
  } */
  .news button a {
    right: 18%;
}
.career h2:before {
  right: 24%;
}
  .footer .buttonn{
    right: 27%;
  }
  .footer .icon-img img{
    left: 27%;
  }
  .vision p{
    font-size: 18px;
  }
  .mission p{
    font-size: 18px;
  }
}
@media (max-width : 1499px){
  .footer .icon-img img {
    left: 27%;
}
.footer .buttonn {
  right: 27%;
}
.nav-item .nav-link {
  font-size: 18px;
}
}
@media (max-width : 1399px){
  .select{
    display: flex;
  }
  .footer .icon-img img {
    left: 23%;
}
.footer .buttonn {
  right: 24%;
}
.nav-item .nav-link {
  font-size: 16px;
}
}
@media (max-width : 1199px){
  .footer .icon-img img {
    left: 18%;
}
.cards .photto {
  height: 434px;
}
.cards .photto img {
  height: 100%;
}
.nav-item .nav-link {
  font-size: 11px;
}
.about h2 {
  font-size: 47px;
}
}

@media (max-width : 1115px){
  nav .image {
    margin: 0 -12px;
}
.nav-item .nav-link {
  font-size: 12px;
}
.landing .title h1{
  font-size: 46px;
}
.landing .social{
  display: none;
}
.about h2 {
  font-size: 46px;
}
.about p{
  font-size: 14px;
}
.cards .photto img{
  height: 100%;
}
.news .imaage {
  height: auto;
}
.news h2 {
  font-size: 46px;
}
.news .date h3{
  font-size: 16px;
}
.news p{
  font-size: 14px;
}
.slick-next{
  left: 13%;
}
.career ul::before {
  top: 22%;
}
.career h2:before {
  right: 18%;
}
.footer:before{
  right: -10px;
  top: -16%;
}
.footer .buttonn{
  right: 18%;
}
.footer .icon-img img {
  left: 18%;
}
.footer{
  background-color: var(--main-color);
  padding-top: 150px;
}
.footer:before{
  width: 250px;
  max-width: 20%;
}
.description p{
  font-size: 18px;
}
.doc-info p {
  font-size: 14px;
  color: #645A5C;
  margin: 0px 0px;
}
}

@media (max-width : 991px) {
  nav{
    padding-top: 13px !important;
  }
  .navbar{
    z-index: 99 !important;
  }
  .navbar-toggler,
  .navbar-toggler:hover{
    margin-left: auto !important;
    border: none !important;
    font-size: 32px !important;
    color: #FFFFFF;
  }
  .navbar-toggler:focus{
    box-shadow: none !important;
  }
  .img-header{
    display: block !important;
  }
  .landing:before{
    display: none;
  }
  .landing .image .arrow{
    left: 46%;
  }
  .about h2 {
    font-size: 34px;
  }
  .about p {
    font-size: 14px;
  }
  .about .image img{
    max-width: 88%;
  }
  .about:before{
    left: -84%;
  }
  .cd{
    margin-top: 69px;
  }
  .news .content {
    padding: 70px;
  }
  .news .date h3 {
    font-size: 14px;
}
  .footer:before{
    display: none;
  }
  .footer .buttonn {
    right: 7%;
  }
  .footer .icon-img img {
    left: 7%;
  }
  .add:before{
    right: -15%;
  }
  .copy-right:before{
    right: -11%;
  }
  .offcanvas {
    background-color: var(--main-color);
}
.offcanvas ul {
  margin-top: 90px;
  color: #FFFFFF;
}
.offcanvas a {
  color: #FFFFFF;
  font-weight: bold;
  font-size: 14px !important;
}
.offcanvas .btn-close {
  margin-right: 30px;
  margin-top: 30px;
  filter: invert(1);
}
.offcanvas .search svg{
  color: #FFFFFF;
  margin-left: 180px;
}
.description p{
  font-size: 14px;
}
}

@media (max-width : 893px) {
  .about .image img {
    max-width: 100%;
    margin-top: 50px;
  }
  .about:before{
    display: none;
  }
  .photo:before{
    display: none;
  }
  .description .content{
    margin-top: 83px;
  }
}

@media (max-width : 767px) {
  .landing .image .arrow {
    left: 45%;
}
.remove .mask {
  max-height: 50vh;
}
.landing .mask {
  height: 90vh;
}
.landing .mask img {
  width: 100%;
  height: 100%;
}
.about h2 {
  font-size: 37px;
}
.about p {
  font-size: 14px;
}
.about .image img {
  max-width: 85%;
}
.cards .row{
  gap: 20px;
}
.card{
  width: 69%;
}
.cards .center{
  display: flex;
  justify-content: center;
}
.cards .content p{
  left: 28%;
}
.departments h2{
  font-size: 39px;
}
.departments h2:before{
  left: 22%;
}
.description .row{
  display: flex;
  flex-direction: column-reverse
}
.news h2 {
  font-size: 28px;
}
.news .content {
  padding: 27px;
  border-radius: 0 100px;
}
.news .date {
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  align-items: flex-start;
}
/* .news .date h3 {
  font-size: 14px;
  margin-bottom: 15px;
} */
.news button a {
  bottom: 5%;
  right: 4%;
}
.slick-next {
  left: 19%;
  bottom: -14% !important;
}
.slick-prev {
  bottom: -14% !important;
  left: 35px;
}
.career .row{
  display: flex;
  flex-direction: column-reverse;
}
.footer h2 {
  font-size: 33px;
}
.footer p {
  font-size: 16px;
}
.footer input[type="email"] {
  padding: 15px 90px;
}
.footer .copy-right p {
  font-size: 13px;
}
.page .details{
  padding: 50px 50px;
}
.news p {
  font-size: 15px;
}
.map{
  margin-top: 35px;
}
.career .form{
  margin-bottom: 50px;
}
.career h2:before {
  right: 36%;
  bottom: 84%;
}
.vision .image img {
  width: 44%;
}
.mission .image img {
  width: 50%;
}
.doc-info h2 {
  margin-top: 35px;
}
.doc-info .icons{
  margin-top: 15px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(120px , 1fr)) !important;
  justify-content: center;
}
}

@media (max-width : 730px){
  .landing .title h1 {
    font-size: 32px;
}
.landing .title p {
  font-size: 12px;
}
.landing .image .arrow {
  left: 43%;
}
.img-header img{
  width: 75%;
}
}

@media (max-width : 660px){
  .landing .title h1 {
    font-size: 24px;
}
}
@media (max-width : 615px){
  .copy-right .image {
    margin-right: 50px;
}
}

@media (max-width : 575px) {
  .doc-info .icons {
    grid-template-columns: repeat(auto-fill, minmax(102px , 1fr)) !important;
}
}

@media (max-width : 554px) {
  .landing .mask img {
    width: 100%;
}
.mission {
    padding-top: 80px;
}
.news p {
  font-size: 15px;
}
.landing .mask {
  height: 70vh;
}
.landing .title h1 {
  font-size: 28px;
}
.landing .image .arrow {
  width: 13%;
}
.about{
  padding-bottom: 0;
  padding-top: 100px;
}
.about h2 {
  font-size: 32px;
}
.about p {
  font-size: 14px;
}
.card {
  width: 100%;
}
.cards:before{
  display: none;
}
.departments h2 {
  font-size: 27px;
}
.departments h2:before {
  left: 11%;
  bottom: -7px;
}
.departments .image:before{
  display: none;
}
.departments:after{
  display: none;
}
.departments:before{
  display: none;
}
.news{
  margin-bottom: 50px;
}
.news h2 {
  font-size: 23px;
}

.news .content {
  border-radius: 0 100px;
}
.news .date h3 {
  font-size: 12px;
}
.news button a {
  padding: 7px 10px;
  right: 11%;
}
.slick-prev {
  left: 23px;
}
.slick-next {
  left: 24%;
}
.career h2:before {
  right: 24%;
  bottom: 81%;
}
.career .form{
  margin-top: 150px;
}
  .career .immg {
    width: 100%;
    height: 120px;
}
.popup input[type="text"] {
  padding: 15px 13px !important;
}
.footer input[type="email"] {
  width: 100%;
}
.limit{
  width: 50%;
}
.us{
  padding-top: 70px;
}
.doctors .info {
  padding: 15px 10px;
}

/* start second page */
.remove .mask {
  max-height: 37vh;
}
.about .image img {
  max-width: 55%;
}
.vision h3{
  margin-top: 30px;
  font-size: 32px;
}
.vision .image img {
  width: 55%;
}
.mission h3 {
  font-size: 32px;
}
.vision .row{
  display: flex;
  flex-direction: column-reverse;
}
.mission .image img {
  width: 62%;
}
iframe {
  height: 480px !important;
}
.carrer-page{
  padding-bottom: 10px;
  padding-top: 10px;
}
.carer-section .navbar-toggler{
  color: #5b5050;
}
.popup input[type="text"] {
  width: 100% !important;
  max-width: 280px;
  min-width: 280px;
}
.popup .icon-search svg {
  right: 4% !important;
}
.footer .buttonn {
  right: 4%;
  padding: 5px 5px;
}
.mapouter {
  height: 348px !important;
}
.footer .paragraph{
  font-size: 14px;
}
}
@media (max-width : 450px){
  .img-header img {
    width: 70%;
}
.landing .title h1 {
  font-size: 18px;
}
.landing .title p {
  font-size: 9px;
}
.landing button a {
  padding: 5px 10px;
}
}
@media (max-width : 390px){
  .news .date h3 {
    font-size: 10px;
}
}
/* end responsive */

/* start popup */
.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2222222;
}
.popup:before{
  content: "";
  position: absolute;
  background-color: #1a0004e6;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.popup input[type="text"]{
  padding: 15px 40px;
  border: 2px solid var(--main-color);
  border-radius: 50px;
  caret-color: var(--main-color);
  color: #e50e44;
}
.popup input[type="text"]::placeholder{
  color: var(--second-color);
}
.popup .icon-search svg{
  position: absolute;
  background-color: var(--main-color);
  color: #FFFFFF;
  top: 18%;
  right: 3%;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
}
.close-popup svg{
  position: absolute;
  color: #FFFFFF;
  right: 15%;
  top: 10%;
  font-size: 35px;
  cursor: pointer;
}
/* end popup */

.progressbar  .progressbar-list.active .div {
  color: #FFFFFF;
  background-color: var(--main-color);
  padding: 7px;
  width: 30px;
  height: 30px;
  border-radius: 16px;
}
.progressbar  .div {
  color: #FFFFFF;
  background-color: #eee;
  padding: 7px;
  width: 30px;
  margin: auto;
  height: 30px;
  border-radius: 16px;
  margin-bottom: 10px;
}
.div svg{
  font-size: 14px;
    display: flex;
    margin: auto;
}
  .main-content .wizard-form .progressbar-list::after{
  content: "";
   background-color: rgb(155, 155, 155);
  padding: 0px 0px;
  position: absolute;
  top: 7px;
  left: -50%;
  width: 100%;
  height: 2px;
  margin: 9px auto;
  z-index: -1;
  transition: all 0.8s;
  }
  .main-content .wizard-form .progressbar-list.active::after{
      background-color: #dc3545;
  }
  .main-content .wizard-form .progressbar-list:first-child::after{
      content: none;
  }
  .progressbar-list{
      color:#6f787d;
  }
  .active{
      color:var(--main-color);
  }
  .form-check-input:focus {
      box-shadow: none;
  }
  .bg-color-info{
      background-color:#dc3545 !important;
  }
  .border-color{
      border-color: #ececec;
  }
  .btn{
      padding:16px 30px;
  }
  .back-to-wizard{
      transform: translate(-50%, -139%) !important;
  }
  .bg-success-color{
      background-color:#87D185;
  }
  .bg-success-color:focus{
      box-shadow: 0 0 0 0.25rem rgb(55 197 20 / 25%);
  }

  /* my edit of step wizzard */
  .button button{
    background: transparent;
  }
  .send{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
  }
  .send .dots{
    display: flex;
    margin-top: 25px;
  }
  .send .dots .dot1,
  .send .dots .dot2,
  .send .dots .dot3{
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #645A5C;
  }
  .send .dots div{
    margin: 0 5px;
    cursor: pointer;
  }
  .send .active{
    color: var(--main-color);
  }
  .send .dots .active{
    background-color: var(--main-color);
  }
  .send input{
    background-color: var(--second-color);
    color: #FFFFFF;
    padding: 7px 30px;
    border-radius: 5px;
  }
  .select{
    border-bottom: 1px solid #cfc9ca;
  }
  .select:focus-within  {
    border-bottom:1px solid #C1051D;
    color: var(--main-color);
  }
  .select{
    position: relative;
  }
  .select:before{
    font-family: "Font Awesome 5 Free";
    content: "\f073";
    position: absolute;
    font-size: 14px;
    z-index: 22222222;
    left: 0;
    top: 4px;
  }
  .input:focus-within  {
    border-bottom:1px solid #C1051D;
    color: var(--main-color);
  }
  .input input[type="text"]:focus{
    caret-color: var(--main-color);
    color: var(--main-color);
  }
  .input input[type="email"]:focus{
    caret-color: var (--main-color);
    color: var(--main-color);
  }
  .input svg{
    font-size: 14px;
  }

/* edit the height of step wizzard */
  .main-content {
    height: 584px;
}
.button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.row_wizard.form-business {
    height: 78%;
}
.news .slick-initialized .slick-slide {
  display: block;
  margin-right: 15px;
}

/* start doctors */
.doctors{
  margin-top: 160px;
}
.doctors .info{
  background: #FFFFFF;
  border-radius: 15px;
  border: 1px solid #C1051D1A;
  cursor: pointer;
  padding: 15px 0px;
  margin-top: 50px;
  transition: 0.3s all ease-in;
}
.doctors .info:hover {
  box-shadow: rgb(194 92 92 / 14%) 1px 1px 15px;
  border: 1px solid var(--main-color);
  transform: scale(1.1);
}
.doctors .imagee {
  width: 100%;
  height: 160px;
}
.doctors .imagee img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.doctors .info p {
  font-size: 20px;
  font-weight: bold;
  color: var(--second-color);
}
.doctors .info span {
  font-size: 14px;
  color: var(--main-color);
  text-transform: lowercase;
}
.doc-info{
  margin-top: 130px;
}
.doc-info .info{
  box-shadow: rgb(194 92 92 / 14%) 1px 1px 15px;
  background: #FFFFFF;
  border-radius: 15px;
  border: 1px solid #C1051D1A;
  /* cursor: pointer; */
  /* padding: 15px 0px; */
  transition: 0.3s all ease-in;
}
/* .doc-info .info:hover{
  border: 1px solid var(--main-color);
} */
.doc-info .image{
  width: 100%;
  height: 350px;
}
.doc-info img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.doc-info h2{
  font-size: 32px;
  font-weight: bold;
  color: var(--second-color);
}
.doc-info h3{
  margin-bottom: 10px;
  font-size: 26px;
  font-weight: bold;
  color: var(--second-color);
}
.doc-info p{
  font-size: 14px;
  color: #645A5C;
  margin: 25px 0;
}
.doc-info .icons{
  margin-top: 15px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(125px , 1fr));
  justify-content: center;
}
.doc-info .language{
  /* box-shadow: rgb(194 92 92 / 14%) 1px 1px 15px; */
  background: #C1051D08;
  border-radius: 15px;
  border: 1px solid #C1051D17;
  padding: 15px 5px 0px 0px;
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.doc-info .language img{
  display: block;
  margin: auto;
}
.doc-info .language span{
  display: block;
  margin-top: 30px;
  font-size: 14px;
  text-align: center;
}
.feed{
  margin-top: 100px;
}
.feed h2{
  font-size: 52px;
  font-weight: bold;
  color: var(--second-color);
}
.page h3{
  font-size: 52px;
  font-weight: bold;
  color: var(--second-color);
}
.single .details{
  margin: 30px 0;
  background: #FFFFFF;
}
.single span{
  font-weight: bold;
    font-size: 17px;
}
.single p{
  border-bottom: 1px solid #6f787d;
  color: #645A5C;
}
/* end doctors */