/*-------------- Owl crousel ---------------*/
.owl-carousel .owl-item img {
  width: auto !important;
  margin: 0 auto;
  width: auto;
}
#our_partners img{
  width: auto !important;
}
button.owl-next, button.owl-prev {
  background: #1e202c;
}
button.owl-prev {
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  padding: 10px 20px;
}
button.owl-next {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  padding: 10px 20px;
}
button.owl-next i, button.owl-prev i{
  color: #ffffff;
}
.owl-dots {
    text-align: center;
    margin: 30px 0 0;
}
button.owl-dot {
    height: 12px;
    width: 12px;
    border: 2px solid #000000;
    border-radius: 50%;
    margin: 20px 4px;
}
button.owl-dot.active {
    background: #FFDC39;
    border-color: #FFDC39;
}
/* -------Section Heading------------- */
.section-head span{
  font: 500 12px/15px var(--font-inter);
  color: #000000;
  position: relative;
  padding-bottom: 7px;
}
.section-head h2{
  font: 700 36px/40px var(--font-almarai);
  color: #14212A;
  padding-top: 20px;
}
.section-head span:before {
    content: '';
    background: #FFDC39;
    height: 1px;
    width: 60px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
/* --------Header-contact ------------- */
.header-contact-box span {
    display: inline-block;
}
.main-contact-header-box {
    position: absolute;
    top: -29px;
    left: 0;
    right: 0;
    z-index: 99;
    padding: 30px 30px;
    border-radius: 5px;
}
.header-contact-title {
    color: #FFFFFF;
    font: 500 12px/15px var(--font-inter);
}
.header-contact-details{
  color: #FFFFFF;
  font:300 16px/24px var(--font-inter);
}
.header-contact-box span i {
    background: #ffffff33;
    color: #fff;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    padding: 7px 7px;
    font-size: 12px;
    margin-right: 6px;
    position: relative;
    top: -8px;
}
.header-contact-box span i.fa-solid.fa-location-dot {
    padding: 7px 8px;
}
.header-border:after {
    content: '';
    background: #fff;
    width: 1px;
    height: 42px;
    position: absolute;
    right: 30px;
}
.header-border {
    position: relative;
}
/* --------- SLIDER--------- */
#slider{
  max-width:100%;
  margin:auto;
  padding:0;
  position:relative;
}
#slider .slider-box span.small-head{
  font: 400 12px/15px var(--font-inter);
  color: #000000;
  background: #FFDC39;
  padding: 8px 23px
}
h1.headtwo{
  font: 700 42px/47px var(--font-almarai);
  color: #FFFFFF;
  padding-top: 22px;
}
.slider-box p{
  font: 300 14px/24px var(--font-inter);
  color: #FFFFFF;
}
.slider-right-img {
  position: relative;
  left: 55px;
  margin-top: 50px;
  padding-top: 77px;
}
#slider .theme-button a{
  color: #14212A;
  background: #FFFFFF;
}
#slider .slider-right-img img {
    width: 90%;
}
#slider img {
  width: 100%;
}
#slider .slider-box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 25%;
  right: 0;
  text-align: center;
}
#slider .carousel-caption {
  top: 0;
  bottom: inherit;
  text-align: left;
  left: 0;
  right: 0;
  margin: 0 !important;
  padding: 0 !important;
  bottom: 0;
}
#slider .carousel-indicators {
  top: auto;
  left: -10px;
  right: auto;
  bottom: 19%;
  display: none;
}
#slider .carousel-indicators button{
  width: 15px;
  height: 15px;
  border: 2px solid #000000;
  border-radius: 50%;
  opacity: 1;
}
#slider .carousel-indicators button.active{
  border-color: #FFDC39;
  background: #FFDC39;
}
.circle-image {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14%;
    text-align: center;
}
#slider .circle-image img {
    width: auto;
}
/* -----------request form Appointment---------------- */
#request_form a.nav-link {
  color: #000000;
  font: 500 14px/17px var(--font-inter);
}
#request_form .nav-pills a.nav-link {
  padding: 12px 5px;
  border: 1px solid #14212A;
  border-radius: 0;
}
#request_form .nav-pills li.nav-item {
  padding: 5px;
}
#request_form .nav-pills .nav-link.active{
  background: #14212A;
  color: #fff;
}
#request_form ul.nav.nav-pills {
    background: #fff;
    box-shadow: 0px 0px 15px #0000001A;
    padding: 7px 7px;
    border-radius: 5px;
    margin: 0 0 9px;
}
#request_form .request-form-box {
    background: #fff;
    box-shadow: 0px 0px 15px #00000026;
    padding: 38px 45px;
    border-radius: 5px;
}
#request_form .request-box {
    margin-top: -130px;
    position: relative;
}
.request-form-box h2{
  color: #000000;
  font: 400 20px/23px var(--font-almarai);
}
.request-form-box input[type="text"],.request-form-box input[type="number"],.request-form-box input[type="email"]{
  border: 1px solid #D9D9D9;
  width: 100%;
  height: 48px;
  padding: 10px;
  background: transparent;
}
.request-form-box input[type="text"]::placeholder,.request-form-box input[type="number"]::placeholder,.request-form-box input[type="email"]::placeholder{
  color: #0000004d;
  font: 500 12px/15px var(--font-inter);
}
.request-form-box input[type="submit"] {
  background: #14212A;
  padding: 15px 39px;
  font: 500 14px/17px var(--font-inter);
}
/* --------------- Service ------------- */
#service .section-head h2 {
    width: 43%;
    margin: 0 auto;
}
h3.service-title a {
    color: #000000;
    font: 400 20px/23px var(--font-almarai);
}
.service-info p {
    color: #00000099;
    font: 300 16px/24px var(--font-inter);
}
.service-box {
    border-bottom: 1px solid #14212A;
}
.service-box {
    border-bottom: 1px solid #14212A;
    padding-bottom: 25px;
    margin-bottom: 30px;
}
/*---------------about--------------*/
#about {
    padding-bottom: 10em;
}
.quote-box-abt {
    background: #14212A;
    box-shadow: -295px 0px 0px 0px #14212A;
    padding: 7em 85px 7em 0;
    z-index: 1;
    position: relative;
}
span.abt-small-head {
    color: #FFFFFF;
    font: 500 12px/15px var(--font-inter);
    border-bottom: 1px solid #ffff;
    width: max-content;
    padding-bottom: 7px;
}
h2.abt-main-head {
    color: #FFFFFF;
    font: 700 36px/41px var(--font-almarai);
}
p.abt-para {
    color: #FFFFFF;
    font: 300 16px/24px var(--font-inter);
    padding-top: 23px;
}
#about .theme-button a{
  color: #14212A;
  background: #ffffff;
}
.about-left-image {
    position: absolute;
    right: 0;
    top: 100px;
}
/* -----------Record Section------------------- */
#record .owl-stage-outer {
  padding: 4em 0 4em;
  box-shadow: 0px 0px 15px #0000001A;
}
p.bar_text {
    color: #000000;
    font:400 20px/23px var(--font-almarai);
}
#record .section-head h2{
  width: 36%;
  margin: 0 auto;
}
#record .progress-bar div span{
  color: #14212A;
  font: 400 24px var(--font-almarai);
}
#record .progress-bar .background {
    background-color: #EEEEEE !important;
}
#record .progress-bar div {
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
#record .progress-bar .rotate {
  clip: rect(0 50px 100px 0);
  background-color: #FFDC39 !important;
}
#record .progress-bar .left {
  clip: rect(0 50px 100px 0);
  opacity: 1;
  background-color: #dbeaf1 !important;
}
#record .progress-bar .right {
  clip: rect(0 50px 100px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #FFDC39 !important;
}
#record .progress-bar div span {
  position: absolute;
  font-size: 25px;
  line-height: 86px;
  height: 87px;
  width: 87px;
  left: 6.5px;
  top: 6.5px;
  text-align: center;
  border-radius: 50%;
  background-color: #fff;
}
#record .progress-bar {
    position: relative;
    height: 110px;
    width: 110px;
    background: transparent;
    margin: 0 auto;
}
/* -------Why Choose Us----------------- */
#why_choose_us {
    padding-bottom: 9em;
}
.why-choose-left-box {
    padding-left: 17em;
}
.why-choose-progress-box {
    background: #14212A;
    padding: 40px 30px;
    position: absolute;
    z-index: 9;
    width: 40%;
    margin-top: 25px;
}
#why_choose_us .section-head h2 {
    width: 85%;
}
#why_choose_us .section-head span:before{
  right: auto;
}
#why_choose_us .progress-bar {
    height: 5px;
    color: #fff;
    background-color: #FFFFFF;
}
#why_choose_us .bar_box .progress {
    background-color: #373737;
    position: relative;
    overflow: visible;
    height: 5px;
    border-radius: 0px;
}
#why_choose_us .bar_box span.progress_percentage{
  position: absolute;
  top: -20px;
  z-index: 999999;
  right: 0px;
  color: #FFFFFF;
  font: 500 12px/15px var(--font-inter);
}
#why_choose_us .bar_box p{
  color: #FFFFFF;
  font: 500 12px/15px var(--font-inter);
}
#why_choose_us .why-choose-progress {
    margin-top: 45px;
}
p.why-choose-section-text {
    color: #FFFFFF;
    font: 300 16px/24px var(--font-inter);
}
/* -------Calculator----------------------------- */
.calculator-box {
    background-repeat: no-repeat;
    background-size: cover;
}
#calculator .section-head h2{
  margin: 0 auto;
  width: 41%;
}
.calculator-box {
    padding: 5em 0;
}
.calculator-form-left {
    background: #fff;
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 7px 15px 0px #00000003;
    padding: 10px 30px 20px;
}
h3.form-heading{
    background: #fff;
    margin-top: 3px;
    border-radius: 10px 10px 0px 0px;
    font: 400 20px var(--font-almarai);
    color: #000000;
    padding: 18px 30px;
}
h4.form-heading{
  background: #fff;
  margin-top: 3px;
  border-radius: 10px 10px 0px 0px;
  font: 400 20px var(--font-almarai);
  color: #000000;
  padding: 18px 30px;
}
.calculator-form-right{
  background: #fff;
  border-radius: 0px 0px 10px 10px;
  box-shadow: 0px 7px 15px 0px #00000003;
  padding: 10px 30px 20px;
}
.calculator-form-left label {
    display: block;
    color: #000000;
    font: 500 12px/15px var(--font-inter);
}
.calculator-form-left input[type="text"],.calculator-form-left input[type="email"],.calculator-form-left input[type="number"]{
  width: 100%;
  border: 1px solid #D9D9D9;
  height: 48px;
  padding: 10px;
  margin-top: 7px;
  background: transparent;
}
.calculator-form-left input[type="text"]::placeholder,.calculator-form-left input[type="email"]::placeholder,.calculator-form-left input[type="number"]::placeholder{
  color: #0000004d;
  font: 500 12px/15px var(--font-inter);
}
.calculator-form-right input[type="text"]{
  background: #F4F4F4;
  border: 1px solid #F4F4F4;
  width: 100%;
  height: 45px;
  padding: 10px;
}
.calculator-form-right p span:first-child input[type="text"] {
    margin-bottom: 40px;
}
.calculator-form-right input[type="submit"]{
  background: #FFDC39;
  color: #000;
  margin-top: 15px;
}
.calculator-form-right input[type="text"]::placeholder{
  color: #000000;
  font:500 14px/17px var(--font-inter);
}
/* --------------- Team ------------- */
#team .section-head h2 {
  width: 40%;
  margin: 0 auto;
}
#team .owl-stage-outer {
  padding: 0px 0 35px;
}
.team-title a {
  font: 400 20px/23px var(--font-almarai);
  color: #000000;
}
.team-deign span{
  font: 500 13px/15px var(--font-inter);
  color: #00000080;
}
.team-title {
  background: #FFFFFF;
  border-top: 1px solid #14212A;
  text-align: center;
  padding: 20px 0;
}
.team-inner-div {
  position: absolute;
  bottom: 67px;
  left: auto;
  right: 12px;
}
.team-inner-div a {
  display: block;
  background: #FFDC39;
  color: #14212A;
  border: 1px solid #14212A;
  height: 36px;
  width: 36px;
  padding: 8px 11px;
  font-size: 13px;
  border-radius: 50%;
  margin: 0 0 10px;
  opacity: 0;
  transition: 0.5s;
}
.team-inner-div i.fa-solid.fa-plus {
  background: #FFDC39;
  color: #14212A;
  height: 36px;
  width: 36px;
  padding: 11px 13px;
  border: 1px solid #14212A;
  position: relative;
  top: -2px;
  font-size: 11px;
  border-radius: 50%;
}
.team-box:hover .team-inner-div a{
  opacity: 1;
  transition: 0.5s;
}
/* --------------- Testimonial ----------------- */
#testimonial {
    background-attachment: scroll;
    padding-bottom: 0;
    margin-bottom: 12em;
}
#testimonial .solution-video {
  width: 100%;
  height: 400px;
  margin: auto;
  display: block;
  border: none;
}
#testimonial .solution-close-btn {
  width: 100px;
  height: 50px;
  display: block;
  margin: 20px auto;
  cursor: pointer;
  border: 2px solid black;
  background-color: white;
}
#testimonial .solution-video-popup {
  display: none;
  width: 100%;
  height: 100%;
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
#testimonial .solution-popup-bg {
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: absolute;
}
#testimonial .solution-popup-content {
  background: black;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: auto;
}
#testimonial button.solution-popup-btn {
  background: transparent;
  border: unset;
  outline: unset;
  z-index: 99;
  position: absolute;
  right: 6em;
  top: 13em;
}
#testimonial .solution-popup-btn i {
  background-color: #ffffff;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  color: #14212A;
  padding: 37px 45px;
  font-size: 28px;
  cursor: pointer;
}
.testimonial-back-box {
  background: #14212A;
  box-shadow: -290px 0px 0px #14212A;
  padding: 5em 5em 5em 0;
  position: relative;
  top: 166px;
}
.testimonial-content {
    display: inline-flex;
    align-items: center;
}
#testimonial .section-head span,#testimonial .section-head h2{
  color: #ffffff;
}
#testimonial .section-head span:before{
  background: #fff;
  right: auto;
}
.testimonials-info p {
    color: #FFFFFF;
    font: 300 16px/24px var(--font-inter);
}
h5.testimonial-title a {
    color: #FFDC39;
    font: 400 20px/23px var(--font-almarai);
}
.testimonial-title-content span{
  color: #FFFFFF;
}
img.testimonial-slick_slide-img {
    padding-right: 15px;
}
#testimonial .owl-dots {
    right: 0;
    position: absolute;
    bottom: -50px;
}
#testimonial button.owl-dot{
  border: 1px solid transparent;
  background: #ffffff33;
}
#testimonial button.owl-dot.active{
  border: 1px solid #fff;
  background: #ffffff;
}
#testimonial button.solution-popup-btn:after {
  content: '';
  position: absolute;
  top: 47%;
  left: 47%;
  border: 4px solid rgba(255, 255, 255, .5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
  z-index: -9;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  50% {
    transform: scale(20, 20);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(20, 20);
  }
}

#testimonial button.solution-popup-btn::after {
  animation: ripple 1.5s ease-out  infinite;
}
/* --------------Get In touch section-------------------- */
#get_in_touch .section-head span,#get_in_touch .section-head h2{
  color: #fff;
}
#get_in_touch .section-head span:before{
  background: #ffffff;
  right: auto;
}
.get-in-touch-back {
    background: #14212A;
    box-shadow: 300px 0px 0px #14212A;
    padding: 6em 0 6em 5em;
}
.get-in-touch-form input[type="number"],.get-in-touch-form input[type="text"],.get-in-touch-form input[type="email"],.get-in-touch-form select{
  border:1px solid #D9D9D9;
  height: 48px;
  margin-bottom: 20px;
}
.get-in-touch-form textarea{
  border:1px solid #D9D9D9;
  height: 160px;
}
.get-in-touch-form input[type="number"]::placeholder,.get-in-touch-form input[type="text"]::placeholder,.get-in-touch-form input[type="email"]::placeholder,.get-in-touch-form select,.get-in-touch-form textarea::placeholder{
  font: 500 12px/15px var(--font-inter);
  color: #0000004d;
  background: unset;
}
.get-in-touch-form input[type="submit"]{
  font: 500 14px/17px var(--font-inter);
  background: #14212A;
  padding: 15px 39px;
}
.get-in-touch-form {
    background: #ffffff;
    box-shadow: 0px 0px 15px #0000001A;
    padding: 25px 30px;
    margin-top: 30px;
}
.get-in-touch-form h3 {
    color: #000000;
    font: 400 20px/23px var(--font-almarai);
    padding-bottom: 30px;
}
.get-in-touch-form input[type="number"] {
    width: 100%;
    padding: 10px;
}
p.form-note {
    color: #000000;
    font: 500 12px/15px var(--font-inter);
    margin-bottom: 25px;
}
/* ------------ Latest News ---------- */
.post-sec-btn {
    position: absolute;
    right: 0;
    top: 0;
}
#latest_news .section-head span:before{
  right: auto;
}
#latest_news .section-head h2 {
  width: 45%;
}
.post-sec-btn a{
  color: #FFFFFF;
  font: 500 14px/15px var(--font-inter);
  background: #14212A;
  padding: 15px 39px;
}
.new-content-text h3 a{
  color: #000000;
  font: 400 24px/27px var(--font-almarai);
}
.post-text p{
  color: #000000b3;
  font:300 16px/24px var(--font-inter);
}
.latest-theme-btn a {
    background: #14212A;
    padding: 15px 39px;
    font:500 14px/17px var(--font-inter);
    color: #fff;
}
.latest-date-box {
    position: absolute;
    bottom: 0;
    background: #FFDC39;
    width: 85px;
    height: 85px;
    text-align: center;
    padding: 9px 0;
}
.date-text{
  color: #000000;
  font: 700 36px/40px var(--font-almarai);
}
.month-text{
  color: #000000;
  font:300 16px/24px var(--font-inter);
}
.latest-news-content {
    margin-bottom: 25px;
}