:root {
  --white: #ffffff;
  --black: #000000;
  --pink: #F7C59F;
  --blackk: #222120;
}
:root {
  --pri-font: "Rubik";
}

/*-------------- Owl crousel ---------------*/
.owl-carousel .owl-item img {
  width: auto;
  margin: 0 auto;
  width: auto;
}




/* SLIDER */

.banner-heading-box h1 {
  color: #000;
  font-size: 48px;
  font-weight: bold;
  font-family: 'Outfit';
}
#banner .sub-head::before {
  position: absolute;
  content: "";
  left: 12px;
  width: 37px;
  height: 37px;
  background: #7684FF;
  opacity: .2;
  border-radius: 3px;
  transition: .5s;
  top: -5px;
}
.sub-head:hover::before{
  width: 38% !important;
}
.slider-banner-main {
  display: grid;
  grid-template-columns: repeat(5, 190px);
  grid-template-rows: repeat(5, 190px);
  margin-left: -19px;
}
.banner-main-box{
  margin-top: -70px;
}
.slider-banner-box img {
  border-radius: 50%;
  padding: 2px;
}
.slider-banner-main>div:nth-child(1) {
  border-radius: 0px 100px 100px 0px;
  background-image: linear-gradient(to right,#F6F5FE,#EAEAFE);
}
.slider-banner-main>div:nth-child(11) {
  border-radius: 0px 100px 100px 0px;
  background-image: linear-gradient(to right,#F6F5FE,#EAEAFE);
}
.slider-banner-main>div:nth-child(21) {
  border-radius: 0px 100px 100px 0px;
  background-image: linear-gradient(to right,#F6F5FE,#EAEAFE);
}
.slider-banner-main>div:nth-child(7) {
  border-radius: 100px 0px 0px 100px;
  background-image: linear-gradient(to right, #EBEBFE, #CED1FE);
}
.slider-banner-main>div:nth-child(17) {
 border-radius: 100px 0px 0px 100px;
  background-image: linear-gradient(to right, #EBEBFE, #CED1FE);
}
.slider-banner-main>div:nth-child(3) {
  background-image: linear-gradient(to right, #CED1FE, #B0B7FF);
  border-radius: 100px 100px 0px 0px;
}
.slider-banner-main>div:nth-child(13) {
  background-image: linear-gradient(to right, #CED1FE, #B0B7FF);
  border-radius: 0px 0px 100px 0px;
}
.slider-banner-main>div:nth-child(23) {
  background-image: linear-gradient(to right, #CED1FE, #B0B7FF);
  border-radius: 0px 0px 100px 0px;
}
.slider-banner-main>div:nth-child(9) {
  background-image: linear-gradient(to right, #B0B7FF, #939DFF);
  border-radius: 0px 0px 0px 0px;
}
.slider-banner-main>div:nth-child(19) {
  background-image: linear-gradient(to right, #B0B7FF, #939DFF);
  border-radius: 100px 0px 100px 0px;
}
.slider-banner-main>div:nth-child(5) {
  background-image: linear-gradient(to right, #939DFF, #7684FF);
  border-radius: 100px 0px 100px 0px;
}
.slider-banner-main>div:nth-child(25) {
  background-image: linear-gradient(to right, #939DFF, #7684FF);
  border-radius: 100px 100px 0px 0px;
}
.slider-banner-main>div:nth-child(15) {
  background-image: linear-gradient(to right, #939DFF, #7684FF);
  border-radius: 0px 100px 100px 0px;
}

.banner-sec-para {
  font: 300 16px / 28px var(--pri-font);
  width: 91%;
}
.banner-btn-box a{ 
  color: #000;
  font: normal normal normal 18px / 25px Roboto;
  padding: 8px 30px;
  border-radius: 30px;
  border: 1px solid #000;
}
.banner-sec-para {
  font-size: 18px;
  font-family: 'Outfit';
}
.banner-btn-box a:hover {
 background-color: #7583FF;
 color: #fff;
}
.banner-btn-box {
  position: relative;
}

.banner-btn-box-one a {
  position: relative;
}
.banner-btn-box-two a {
  position: relative;
}
.btn-blue-one::after {
  content: "";
  height: 2px;
  width: 40px;
  position: absolute;
  background: #000;
  left: -24px;
  bottom: 15px;
  margin: auto;
  transition: .5s ease-in-out !important;
}
.banner-btn-box a:hover::after {
  left: calc(100% - 10%);
}

.btn-blue-two::after {
  content: '';
  height: 2px;
  width: 39px;
  position: absolute;
  background: #000;
  top: 2px;
  bottom: 0;
  margin: auto;
  transition: .5s ease-in-out !important;
  left: -11%;
}
.banner-btn-box-one a:hover::after{
  left: calc(100% - 10%);
}
.banner-follow-text{
  font: 400 18px / 22px var(--pri-font);
  color: #fff;
}



/* counter */
span.counter1-up {
  font-size: 60px;
  font-weight: bold;
  color: #7684FF;
}
p.record_content1 {
  font-size: 16px;
}
.record-hed {
  font-size: 22px;
  font-weight: bold;
  font-family: 'Outfit';
}
#counter-sec .record-main{
  position: relative;;
}

.record_content {
  font-size: 15px;
  font-family: 'Outfit';
}
.record_suffix_icon{
  font-size: 60px;
  color: #7684FF;
}
.record_suffix_k {
  font-size: 60px;
  color: #7684FF;
}
/* Our Feature*/
#Ourfeturessss .conf_icon {
  width: 80px;
  height: 70px;
  background-color: #E3E6FF;
  padding: 15px;
  border-radius: 0px 50px 50px 0px;
}
.conf_icon img {
  height: 38px;
  width: 38px;
}
.conf-content h5 {
  font-size: 20px;
  color: #000;
  font-weight: bold;
  font-family: 'Outfit';
}
.conf-content p {
  font-size: 16px;
  font-family: 'Outfit';
  font-weight: 300;
}
.our-feature-main {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #00000029;
  padding: 31px;
  padding-left: 50px ! IMPORTANT;
}
#Ourfeturessss .conf-box:hover .conf_icon {
  background-color: #7583FF ! IMPORTANT;
  border-radius: 0px 40px 40px 40px ! IMPORTANT;
}
#Ourfeturessss .conf-box:hover .feature-title{
  color: #7583FF;
}
#Ourfeturessss .conf-box:hover .feature-title-two{
  color: #7583FF;
}
.conf-box:hover .conf_icon img {
  filter: invert(1);
}
#Ourfeturessss .sub-head-feature:before{
  position: absolute;
  content: "";
  left: 12px;
  width: 37px;
  height: 37px;
  background: #7684FF;
  opacity: .2;
  border-radius: 3px;
  transition: .5s;
  top: -5px;
}
.sub-head-feature:hover::before{
  width: 19% !important;
}



/* event */
.show-date {
  font: normal normal bold 45px / 60px Roboto;
  color: #fff;
}
.event-content-date-box{
  font: 400 13px/25px var(--pri-font);
  color: #fff;
   background-color: #7684FF !important;
  align-self: center;
}
.event-post-content-outer-box{
  background: transparent;
  border-radius: 10px;
}
.event-post-content-outer-box:hover{
  background: #fff;
}
.event-content-date-box{
  padding: 10px;
  border-radius: 10px 0px 0px 10px;
}
.event-content h6 {
  color: #fff;
}
.event-map-box{
  color: #fff;
}
.event-post-btn-box a {
  background: #fff;
  color: #000;
  padding: 10px 15px;
  border-radius: 6px;
  font: 400 14px/28px var(--pri-font);
}
.event-post-content-outer-box:hover .event-map-box,.event-post-content-outer-box:hover .event-content h6{
  color: #0F0F10;
}
.event-post-content-outer-box:hover .event-post-btn-box a {
  background: #0F0F10;
  color: #fff;
}
#eventCollaborates .theme-btn.btn-blue {
  background-color: #7684FF !important;
  color: #fff;
  font: normal normal normal 16px / 28px Roboto;
  padding: 10px 30px;
  border-radius: 6px;
}
#eventCollaborates .theme-btn.btn-blue:hover {
  background-image: linear-gradient(140deg, var(--blue), var(--pink));
}
.event-outer-box {
  height: 380px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.event-box {
  padding: 0px 13px;
  border-radius: 10px;
  margin-right: 10px;
  border: 1px solid #686868;
}
.event-image-box img {
  width: 100%;
  margin: auto;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.event-outer-box::-webkit-scrollbar {
  width: 10px;
  height: auto;
}
.event-outer-box::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
.event-outer-box::-webkit-scrollbar-thumb {
   background-color: #7684FF !important;
  border-radius: 10px;
}
.event-image-box .img-inner{
  height: 380px;
  width: 100%;
}

/* newsletter */
#newsletter_slider .sub-head{
  color: #fff;
}
#newsletter_slider .icon-img path{
  /* fill: #fff; */
}
.newsletter-sec-bg {
  background-color: #fff;
  border-radius: 50px 50px 50px 50px;
  width: 1360px !important;
  height: 420px;
  padding-top: 6%;
}

.newsletter-bg-one-image img{
  opacity: 0.2;
}
.newsletter-bg-two-image img{
  opacity: 0.2;
}
.partner-images {
  width: 100px;
  height: 100px;
  margin: auto;
}
.partner-images img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.newsletter-form form{
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.newsletter-form form p:nth-child(2){
  width: 100%;
}
.newsletter-form input[type="submit"] {
  color: #000;
  border-radius: 60px;
  padding: 11px 20px;
  font: 400 18px / 20px var(--pri-font);
  border: 2px solid #000;
  position: absolute;
  right: 10px;
  top: 5px;
}
.newsletter-sec-bg{
  position: relative;
}

.newsletter-form input[type="submit"]:hover{
  background: #fff;
  color: #000;
}
.newsletter-form input[type="email"] {
  border: none;
  background: #fff;
}
.newsletter-form .wpcf7-not-valid-tip{
  color: #000;
}
.newsletter-form .wpcf7 form .wpcf7-response-output{
  position: absolute;
}

.newslettr-icon-img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.2;
}
.newslettr-one-icon-img {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0.2;
}
/***********project section***************/
#Project .sub-head-project:before{
  position: absolute;
  content: "";
  left: 12px;
  width: 37px;
  height: 37px;
  background: #7684FF;
  opacity: .2;
  border-radius: 3px;
  transition: .5s;
  top: -5px;
}
.sub-head-project:hover::before{
  width: 9% !important;
}

.project-icon-img{
    height: 80px;
    width: 80px;
    border-radius: 80px !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    background-color: #7684FF;
    margin: 0 auto;
}
.project-icon-img img{
    height: 37px;
    width: 37px !important;
}
.project-post-content{
     overflow: hidden;
     display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.project-img-outer img {
  height: 470px;
  width: 365px !important;
  border-radius: 0px 30px 0px 30px;
}
.project-detail-main{
  text-align: center;;
}
.project-box-detail {
  position: relative;
}
.project-detail-main {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 95%;
  height: 25%;
  margin: 0 auto;
  bottom: 12px;
  border-radius: 15px 15px 15px 15px;
  opacity: 1;
}
.pro-hed {
  padding-top: 10px;
  padding-bottom: 6px;
}
.project-icon-group{
  position: relative;
    bottom: 165px;
}
.project-box-detail:hover .project-img-outer img{
  border-radius: 30px 30px 30px 30px;
}
.project-box-detail:hover .project-detail-main{
  opacity: 1;
}
#Project .owl-nav {
  position: absolute;
  top: -30%;
  right: 15%;
  display: flex;
  gap: 25px;
}
.project-detail-main p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.project-detail-main h6{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
/***********team****************/

#team .sub-head-team:before{
  position: absolute;
  content: "";
  width: 37px;
  height: 37px;
  background: #7684FF;
  opacity: .2;
  border-radius: 3px;
  transition: .5s;
  top: -5px;
}
.sub-head-team:hover::before{
  width: 14% !important;
}
.team-img-outer{
  width: 195px;
  margin: auto;
  z-index: 1;
  position: relative;
}

.teambox {
  position: relative;
}
.team-detail{
padding: 0 10px 0;
}
.teambox::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  width: 100%;
  height: 75%;
  z-index: -1;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #00000029;
}
.social-icons-one {
  position: absolute;
  top: 20px;
  left: 12px;
  gap: 10px;
  display: flex;
  z-index: 1;
}
.social-icons-two {
  position: absolute;
  top: 20px;
  right: 12px;
  display: flex;
  gap: 10px;
  z-index: 1;
}
.social-icons-one i {
  background-color: #000;
  height: 35px;
  width: 35px;
  border-radius: 30px;
  text-align: center;
  padding: 11px;
  color: #fff;
  opacity: 0;
}
.social-icons-one i:hover{
background-color: #7684FF;
}

.social-icons-two i {
  background-color: #000 ;
  height: 35px;
  width: 35px;
  border-radius: 30px;
  text-align: center;
  padding: 11px;
  color: #fff;
  opacity: 0;
}
.social-icons-two i:hover{
  background-color: #7684FF;
  }
  .team-titel-text a:hover{
   color: #7684FF;
  }
  .teaminner.team-detail:hover .team-social-icons i {
    opacity: 1;
}
.teaminner:hover .team-titel-text a {
  color: #7684FF;
}

.team-icon-img {
  position: absolute;
  bottom: 0px;
  right: 0px;
  opacity: 0.2;
  z-index: 0;
}
.teaminner:hover .team-icon-img {
  opacity: 1;
  transition: 0.2s ease-in-out;
}
#team h6 {
  font-size: 20px;
  font-weight: 600;
  line-height: 38px;
}

/************service*****************/
#service .sub-head-service:before{
  position: absolute;
  content: "";
  width: 37px;
  height: 37px;
  background: #7684FF;
  opacity: .2;
  border-radius: 3px;
  transition: .5s;
  top: -13px;
}
.sub-head-service:hover::before{
  width: 9% !important;
}

.service-main-sec:hover .service-btn i {
  background-color: #7684FF;
  color: #fff;
}
.service-main-sec:hover .service-thumb img {
  filter: invert(1);
}

.service-main-sec:hover .service-thumb {
  background-color: #7684FF;
}
.service-thumb img {
  height: 65px;
  width: 65px;
  object-fit: contain;
  padding: 10px;
}

.service-thumb {
  justify-content: end;
  display: flex;
  background-color: #DCDEFE;
  width: fit-content;
  margin-left: auto;
  border-radius: 50%;
}
.service-box {
  background-color: #ffff;
  padding: 35px 40px 17px;
  border-radius: 22px;
  position: relative;
  box-shadow: 0px 0px 10px #00000029;
}
.servce-title-hed h6 {
  font-size: 24px;
  font-weight: bold;
  font-family: 'Outfit';
}
.servce-post-content p {
  font-size: 16px;
  font-family: 'Outfit';
}
.service-btn i {
  display: inline-block;
  background: #DCDEFE;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  position: absolute;
  top: 5px;
  transition: 0.5s;
}
.service-btn{
  display: inline-block;
  position: absolute;
  left: 0;
}
.service-btn a {
  display: inline-block;
  background: #F6F5FE;
  padding: 28px 50px;
  border-radius: 0 35px 31px 0;
  position: relative;
  transition: 0.5s;
}
.service-icon-img {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0.2;
}
.service-btn-box{
  justify-content: center;
  align-items: center;
  text-align: center;
}
.service-explor {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 50px;
}
.service-explor a{
  position: relative;
}
.service-explor a::after {
  content: '';
  height: 2px;
  width: 39px;
  position: absolute;
  background: #000;
  margin: auto;
  left: -20px;
  bottom: 16px;
  transition: .5s ease-in-out !important;
}
.service-explor a:hover::after {
  left: calc(100% - 10%);
}
.service-box p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.service-box h6 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}