:root {

    --red: #A41E23;

    --black: #000;

    --yellow:#FDCD65;

    --white:#ffffff;

    --lightyellow:#FFF0CF;

    --main-blue: #71b7e6;

    --main-purple: #9b59b6;

    --main-grey: #ccc;

    --sub-grey: #d9d9d9;

  }







.about_top_content{  position: absolute;

  z-index: 3;

  top: 140px;

  width: 100%;

  left: 0px;

  text-align: center;

  padding: 0px;

  margin: 0px;}

.about_top_content h2{font-size: 5rem;

  margin-bottom: 30px;



  font-weight: 700; color: var(--red);}

.about_top_content p{font-size: 18px;line-height: 1.2;}

.about_img{width: 100%; height: 400px; background: url(../img/about.png) no-repeat; background-position: center; background-size: cover;}



.about_bottom_content{padding: 30px 0px;}

.about_bottom_content h4{font-size: 20px;margin-bottom:20px;line-height: 1.2;}

.about_bottom_content p{padding-left: 20%; font-size: 16px; line-height: 1.2; margin-bottom: 20px;}

.about_submenu{width: 100%;display: flex;margin:30px 0px;padding-left: 20%; box-sizing: border-box;}

.about_submenu ul li{width: 50%; float: left; margin-bottom: 10px;}

.about_submenu ul li a{line-height: 20px; font-size: 16px;}



/* .history_top_content{padding: 20px 0px 40px; } */

.history_top_content {
  padding: 200px 0px 0px;
}

@media(max-width: 768px) {
  .history_top_content {
    padding: 100px 0px 0px;
  }
}


.history_top_content h2{font-size: 32px; margin-bottom: 30px;color:var(--red); width: 100%; text-align: center;}

.history_top_content p{font-size: 18px; color: #fff; line-height: 1.2;}





.about_timeline .years-carousel{padding: 20px 0px;width: 1100px;margin: auto;display: flex !important;align-items: center;justify-content: center;}

.about_timeline .milestone-carousel {padding: 5%;width: 100%;float: left;background: rgb(255 246 225);}

.about_timeline .milestone {width: 100%; float: left; padding:20px 0px;color: #000;font-size: 16px;position: relative;}

.about_timeline .milestone ul {list-style: none;margin: 0;padding: 0;}

.about_timeline .owl-item a {text-decoration: none;width:100%; float: left; text-align: center; color: #fff;padding: 3px;line-height: 30px; font-size: 18px; font-weight: 600;    display: flex;

  align-items: center;

  justify-content: center;

  height: 100%;}

.about_timeline .owl-item.active a {font-size: 18px;line-height: 30px;}

.about_timeline .years {position: relative;height: 89px;width: 89px;border-radius: 100%;}

.milestone_content{position: relative;display: flex;align-items: flex-start;justify-content: center; }

.milestone_content span{color: var(--red);position: relative;font-size: 3rem;font-weight: 700;width: 100%;float: left;}

.milestone_content img{width: 50% !important; float: left;}

.milestone_content p{float: left;width: 90%;padding: 20px 0px;font-size: 2rem;line-height: 1.2;box-sizing: border-box;}





.m_1950{background: url(../img/berso/1950.png) no-repeat; background-size: cover;}

.m_1960{background: url(../img/berso/1960.png) no-repeat; background-size: cover;}

.m_1968{background: url(../img/berso/1968.png) no-repeat; background-size: cover;}

.m_1980{background: url(../img/berso/1980.png) no-repeat; background-size: cover;}

.m_1988{background: url(../img/berso/1988.png) no-repeat; background-size: cover;}

.m_1995{background: url(../img/berso/1995.png) no-repeat; background-size: cover;}

.m_2003{background: url(../img/berso/2003.png) no-repeat; background-size: cover;}

.m_2021{background: url(../img/berso/2021.jpg) no-repeat; background-size: cover;}

.m_2023{background: url(../img/berso/2023.jpg) no-repeat; background-size: cover;}



.about_timeline .years::after{background: url(../img/berso/link.png) no-repeat;

  background-size: contain;

  width: 40px;

  height: 40px;

  content: '';

  position: absolute;

  right: -38px;

  top: 50%;

  margin-top: -20px;}



  .about_timeline .years.bgnone::after{background: none;}

  

/*TEAM SECTION CSS*/

.team_section h2{font-size: 3rem;color: var(--red); text-align: center; padding: 40px 0px 0px;}

.team_section h3{font-size: 4rem;color: #707070; text-align: center;padding: 40px 0px 0px;}

.team_section .line{width: 100%; float: left; margin:30px 0px; height: 1px; background: #707070;}

.team_section p{font-size: 1rem; margin-bottom: 10px; line-height: 1.3;}



.team_img{ margin-top:50px; background: linear-gradient(0deg, rgba(255,240,207,1) 46%, rgba(255,255,255,1) 46%, rgba(255,255,255,1) 100%);}

.team_img img{width: 25%; float: left; margin-right: 12.5%;}

.team_img img:last-child{margin-right: 0px;}

.team_management{padding:100px 0px 30px 0px; background: var(--lightyellow);}

.team_management .management_box{width: 31%; margin-top: 100px; float: left; margin-right: 3.5%;}

.team_management .management_box:nth-child(2){margin-top: 0px !important;}

.team_management .management_box:last-child{margin-right: 0px;}

.team_management .management_box img{width: 100%; float: left;}

.team_management .management_box p{ width: 100%; float: left;}

.team_management .management_box p.name{font-size: 22px; padding: 20px 0px 20px 0px; }

.team_management .management_box p a{color: #000;font-size: 16px;}

.team_management .management_box p.post{font-size: 16px; padding: 0px 0px 10px 0px;margin-bottom:10px; border-bottom: 1px solid #000;}





/*CONTACT FORM*/





.contactInfo h2 {font-size: 3rem;color: var(--black); text-align: left; padding: 40px 0px 0px;}

.contactInfo p {font-size: 1rem;color: var(--black); text-align: left; padding: 20px 0px 0px;}

.contactInfo .formArea{margin-top:40px}

.contactInfo form .user__details {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 20px 0 12px 0;}

.contactInfo form .user__details .input__box {width: calc(100% / 2 - 20px);margin-bottom: 15px;}

.contactInfo .user__details .input__box .details {margin-bottom: 10px;display: block;font-size: 16px;}

.contactInfo .user__details .input__box input {

  height: 45px;

  width: 100%;

  outline: none;

  border-radius: 5px;

  border: 1px solid var(--main-grey);

  padding-left: 15px;

  font-size: 16px;

  border-bottom-width: 2px;

  transition: all 0.3s ease;

}

.contactInfo form textarea{

  width: 100%;

  border-radius: 5px;

  border: 1px solid var(--main-grey);

  padding-left: 15px;

  font-size: 16px;

  border-bottom-width: 2px;

  transition: all 0.3s ease;

}

.contactInfo .user__details .input__box input:focus,

.user__details .input__box input:valid {border-color: var(--red);}



/* inside the form gender details */

.contactInfo form .gender__details .gender__title {font-size: 20px;font-weight: 500;}

.contactInfo form .gender__details .category {display: flex;width: 80%;margin: 15px 0;justify-content: space-between;}

.contactInfo .gender__details .category label {display: flex;align-items: center;}

.contactInfo .gender__details .category .dot {

  height: 18px;

  width: 18px;

  background: var(--sub-grey);

  border-radius: 50%;

  margin: 10px;

  border: 5px solid transparent;

  transition: all 0.3s ease;

}



#dot-1:checked ~ .category .one,

#dot-2:checked ~ .category .two,

#dot-3:checked ~ .category .three {

  border-color: var(--sub-grey);

  background: var(--main-purple);

}



form input[type="radio"] {

  display: none;

}



/* submit button */

.contactInfo form .button {

  height: 45px;

  margin: 45px 0;

}



.contactInfo form .button input {

  height: 100%;

  width: 100%;

  max-width: 200px;

  outline: none;

  color: #000;

  border: none;

  font-size: 18px;

  border-radius: 5px;

  background: var(--yellow);

  transition: all 0.3s ease;

  text-transform: uppercase;

  cursor: pointer;

}



.contactInfo form .button input:hover {

  background: var(--yellow);

}



@media only screen and (max-width: 584px) {

  .container {

    max-width: 100%;

  }



  form .user__details .input__box {

    margin-bottom: 15px;

    width: 100%;

  }



  form .gender__details .category {

    width: 100%;

  }



  .container form .user__details {

    max-height: 300px;

    overflow-y: scroll;

  }



  .user__details::-webkit-scrollbar {

    width: 0;

  }

}