@charset "UTF-8";
/*----------------------------------------------------------------------
    Template Name: Jeena - IT solutions & Services HTML Template
    Template URI: https://webtend.net/demo/html/jeena/
    Author: WebTend
    Author URI:  https://webtend.net/
    Version: 1.0

    Note: This is Main Style CSS File. */
/*----------------------------------------------------------------------
	CSS INDEX
	----------------------

    ## Default Style
    ## Common Classes
    ## Repeat Style
    ## Padding Margin
    ## Custom Animation
    ## Header style
    ## Hero Area
    ## Page Banner
    ## Main Slider
    ## About Area
    ## Services Area
    ## Features Style
    ## Partners Area
    ## Projects Area
    ## Work Process
    ## Team Members
    ## Counter Style
    ## Pricing Plan
    ## Testimonials
    ## Blog Area
    ## Contact Forms
    ## FAQs Area
    ## Shop
    ## Cart Checkout
    ## Videos Area
    ## Sidebar Widgets
    ## Main Footer */
/* -------------------------------------------------------------- */
/*******************************************************/
/******************* ## Default Style ******************/
/*******************************************************/
@-webkit-keyframes down-up-two {
  0% {
    -webkit-transform: rotateX(0deg) translate(0px);
    transform: rotateX(0deg) translate(0px);
  }
  50% {
    -webkit-transform: rotateX(0deg) translate(0, -25px);
    transform: rotateX(0deg) translate(0, -25px);
  }
  100% {
    -webkit-transform: rotateX(0deg) translate(0px);
    transform: rotateX(0deg) translate(0px);
  }
}

@keyframes down-up-two {
  0% {
    -webkit-transform: rotateX(0deg) translate(0px);
    transform: rotateX(0deg) translate(0px);
  }
  50% {
    -webkit-transform: rotateX(0deg) translate(0, -25px);
    transform: rotateX(0deg) translate(0, -25px);
  }
  100% {
    -webkit-transform: rotateX(0deg) translate(0px);
    transform: rotateX(0deg) translate(0px);
  }
}
@-webkit-keyframes leftRightOne {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
}

@keyframes leftRightOne {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
}
@-webkit-keyframes down-up-two {
  0% {
    -webkit-transform: rotateX(0deg) translate(0px);
    transform: rotateX(0deg) translate(0px);
  }
  50% {
    -webkit-transform: rotateX(0deg) translate(0, -25px);
    transform: rotateX(0deg) translate(0, -25px);
  }
  100% {
    -webkit-transform: rotateX(0deg) translate(0px);
    transform: rotateX(0deg) translate(0px);
  }
}

@keyframes down-up-two {
  0% {
    -webkit-transform: rotateX(0deg) translate(0px);
    transform: rotateX(0deg) translate(0px);
  }
  50% {
    -webkit-transform: rotateX(0deg) translate(0, -25px);
    transform: rotateX(0deg) translate(0, -25px);
  }
  100% {
    -webkit-transform: rotateX(0deg) translate(0px);
    transform: rotateX(0deg) translate(0px);
  }
}
@-webkit-keyframes shapeAnimationFour {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(-150px -50px) rotate(90deg);
    transform: translate(-150px -50px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(-150px, -150px) rotate(180deg);
    transform: translate(-150px, -150px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(-50px, -150px) rotate(270deg);
    transform: translate(-50px, -150px) rotate(270deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(360deg);
    transform: translate(0px, 0px) rotate(360deg);
  }
}

@keyframes shapeAnimationFour {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(-150px -50px) rotate(90deg);
    transform: translate(-150px -50px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(-150px, -150px) rotate(180deg);
    transform: translate(-150px, -150px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(-50px, -150px) rotate(270deg);
    transform: translate(-50px, -150px) rotate(270deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(360deg);
    transform: translate(0px, 0px) rotate(360deg);
  }
}

body {
  color: var(--base-color);
  background: white;
  font-weight: 400;
  line-height: 32px;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  --color-icon-navbar: #d7e6ff00;
  --base-color: #737683;
  --heading-color: #1b1f2e;
  --primary-color: #01e8fc;
  --secondary-color: #4a52d8;
  --lighter-color: #f7f7f9;
  --border-color: rgba(21, 16, 31, 0.1);
}

/*******************************************************/
/******************  ## Common Classes *****************/
/*******************************************************/

/** Button style **/
.theme-btn,
a.theme-btn {
  z-index: 1;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  font-weight: 700;
  text-align: center;
  padding: 12px 30px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: var(--heading-color);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-transform: capitalize;
  background: var(--secondary-color);
}
.theme-btn i,
a.theme-btn i {
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  margin-left: 10px;
}
.theme-btn:after,
a.theme-btn:after {
  content: "";
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  z-index: -1;
  left: 50%;
  top: 50%;
  -webkit-transition: 0.75s;
  -o-transition: 0.75s;
  transition: 0.75s;
  position: absolute;
  background: var(--primary-color);
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}
.theme-btn:hover,
a.theme-btn:hover {
  color: white;
}
.theme-btn:hover:after,
a.theme-btn:hover:after {
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}
.theme-btn:hover i,
a.theme-btn:hover i {
  margin-left: 13px;
  margin-right: -3px;
}
.theme-btn.style-two,
a.theme-btn.style-two {
  color: white;
  background: var(--primary-color);
}
.theme-btn.style-two:after,
a.theme-btn.style-two:after {
  background: var(--secondary-color);
}
.theme-btn.style-two:hover,
a.theme-btn.style-two:hover {
  color: var(--heading-color);
}
.theme-btn.style-three,
a.theme-btn.style-three {
  color: white;
  background: var(--secondary-color);
}
.theme-btn.style-three:after,
a.theme-btn.style-three:after {
  background: var(--heading-color);
}
.theme-btn.style-four,
a.theme-btn.style-four {
  color: var(--heading-color);
  background: transparent;
  border: 1px solid var(--border-color);
}
.theme-btn.style-four:not(:hover):after,
a.theme-btn.style-four:not(:hover):after {
  background: transparent;
}
@media only screen and (max-width: 575px) {
  .theme-btn,
  a.theme-btn {
    padding: 9px 25px;
  }
}

/* Details Btn */
.details-btn {
  font-size: 22px;
  width: 70px;
  height: 70px;
  background: white;
  line-height: 70px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  color: var(--primary-color);
}
@media only screen and (max-width: 479px) {
  .details-btn {
    width: 45px;
    height: 45px;
    font-size: 16px;
    line-height: 45px;
  }
}

.bgc-gray {
  /* background-color: var(--heading-color);  */
  /* background: linear-gradient(180deg, #11449b, #AFCFFF); */
  background: linear-gradient(90deg, #0749bb, #3172d4, #8088e0);
  /* background-image: url('../images/logos/header_brasper.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;  */
}

.about-content p {
  max-width: 545px;
}

.about-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.about-btns .theme-btn:not(:last-child) {
  margin-right: 30px;
}

.hotline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.hotline > i {
  width: 55px;
  height: 55px;
  line-height: 51px;
  border-radius: 50%;
  text-align: center;
  margin-right: 15px;
  color: var(--secondary-color);
  border: 2px solid var(--border-color);
}
.hotline .content {
  line-height: 1.65;
}
.hotline .content span {
  font-weight: 500;
}
.hotline .content a {
  font-size: 18px;
  font-weight: 700;
}
.hotline .content a:not(:hover) {
  color: var(--heading-color);
}

.about-images .top-part,
.about-images .bottom-part {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.about-images .top-part img,
.about-images .bottom-part img {
  margin-left: 15px;
  margin-right: 15px;
}

.about-images .top-part {
  margin-bottom: 30px;
}
.about-images .top-part img:first-child {
  max-width: calc(68% - 30px);
}
.about-images .top-part img:last-child {
  margin-top: 50px;
  margin-left: auto;
  max-width: calc(30% - 30px);
}

.about-images .bottom-part img:first-child {
  width: calc(33% - 30px);
}

.about-images .bottom-part img:last-child {
  margin-top: -30%;
  width: calc(67% - 30px);
}

/* About Two Image */
.about-two-image .bg-circle-shape {
  width: 405px;
  height: 405px;
  z-index: -1;
  left: -200px;
  bottom: -150px;
  position: absolute;
  border-radius: 50%;
  background: -webkit-gradient(
    linear,
    right top,
    left top,
    from(var(--primary-color)),
    to(var(--secondary-color))
  );
  background: -webkit-linear-gradient(
    right,
    var(--primary-color),
    var(--secondary-color)
  );
  background: -o-linear-gradient(
    right,
    var(--primary-color),
    var(--secondary-color)
  );
  background: linear-gradient(
    -90deg,
    var(--primary-color),
    var(--secondary-color)
  );
  -webkit-animation: rotated_circle 10s infinite;
  animation: rotated_circle 10s infinite;
}
@media only screen and (max-width: 1399px) {
  .about-two-image .bg-circle-shape {
    width: 200px;
    height: 200px;
    left: -100px;
    bottom: -50px;
  }
}
.about-two-image .bg-circle-shape:after {
  content: "";
  width: 56%;
  height: 56%;
  position: absolute;
  right: 22%;
  top: 22%;
  background: white;
  border-radius: 50%;
}
.row {
  --bs-gutter-x: 1.875rem;
  --bs-gutter-y: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  --bs-gutter-x: 1.875rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}
.section-title {
  margin-top: -7px;
  position: relative;
}
.section-title .sub-title {
  font-size: 28px;
  font-weight: 500;
  display: inline-block;
  color: var(--secondary-color);
}