/*css styles for solo platform*/
/*default font==========================================

==============================================

==============================================
                  font:"Raleway",sans-serif
==============================================
                  colour
=============================================
moon-yellow :#f4c613
Grey:#212226
white smoke:#f4f4f4
white:#ffffff
black:#000000
===========================================*/
/*==========================================        html,body(generic css)
============================================*/
/*height of wepage to be 100%*/
html,
body {
  height: 100%;
}

body {
  color: #212226;
  /*grey color*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
}

p {
  font-family: "open sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
}

section {
  background: #fff;
  /*hide overflow in section element*/
  overflow: hidden;
  width: 100%;
}

/*=========================================== 
                    preloader
===========================================*/
/*preloader div css*/
#preloader {
  background-color: #fff;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* z-index used to specify the stack order of element*/
  z-index: 9999;
}

/*status div to create loading animation*/
#status {
  background-image: url(..//images/solo-images/preloader/preloader.gif);
  background-repeat: no-repeat;
  width: 70px;
  height: 70px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -35px;
  margin-left: -35px;
}
/*=========================================== 
                    navigation
===========================================*/

/* header with navigation*/
.navbar {
  padding: 32px 0 20px 0;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.site-nav-wrapper {
  padding: 0 85px;
}
.navbar-brand {
  padding: 13px 15px;
}

.logo {
  width: 90px;
}

/*css direct child se;ector>>*/
ul.navbar-nav > li > a {
  font-family: "Raleway", sans-serif;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}
ul.navbar-nav > li > a:hover,
ul.navbar-nav > li > a:focus {
  background: #130f40;
}
/*=========================================== 
             white nav bar on scroll 
===========================================*/

.white-nav-top {
  background: #fff;
  padding: 10px 0px 40px 0px;
  -webkit-box-shadow: 0 8px 6px -9px #999;
  box-shadow: 0 8px 6px -9px #999;
  /* z-index: ; */
}
.white-nav-top ul.navbar-nav > li > a {
  color: #130f40;
}

.white-nav-top ul.navbar-nav > li > a:hover,
.white-nav-top ul.navbar-nav > li > a:focus {
  color: #fff;
}

/*=========================================== 
             scroll spy active state 
===========================================*/
.white-nav-top ul.navbar-nav > li.active > a {
  background-color: #130f40;
  color: #fff;
  font-weight: 500;
}

/*home section*/
#home {
  background: none;
  height: 100%;
}

#home-bg-video {
  position: fixed;
  top: 50%;
  left: 50%;
  /*webkit to run across browser using auto prefix */
  /*css transform property to extend the backgroung in x and y direction*/
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%;
  min-height: 100%;
  /*to ensure aspect ratio of video is same all the time*/
  width: auto;
  height: auto;
  /*set the stack order*/
  z-index: -1;
  /*bacground image to show if video is faulty and cover for the image to cover the background*/
  background: url(../video/solo.jpg) no-repeat;
  background-size: cover;
}

/*overlay to deem the brightness of the video or image */
#home-overlay {
  background-color: rgba(0, 0, 0, 0.8);
  /*black color with obesity*/
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

/* to move content div to center of home using css vertical centering*/
#home-content {
  width: 100%;
  height: 100%;
  display: table;
}

#home-content-inner {
  display: table-cell;
  vertical-align: middle;
}

#home-heading h1 {
  color: #fff;
  font-size: 65px;
  font-weight: 100;
  text-transform: uppercase;
  margin: 0;
  display: inline-block;
}

#home-heading h1 span {
  color: #920148;
  font-weight: 500;
}

#home-text p {
  color: #fff;
  font-size: 17px;
  font-weight: 100;
  margin: 8px 0 30px 0;
}

/*======================================
                    BUTTON
==========================================*/

.btn-general {
  font-family: "Raleway", sans-serif;
  border-radius: 28px;
  font-size: 13px;
  text-transform: uppercase;
  margin: 0 6px;
  padding: 12px 46px 12px 46px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.btn-home {
  color: #920148;
  background-color: #fff;
  border: 1px solid #920148;
}

/*HOME BUTTON BEHAVIOR UPON HOVER OR FOCUS*/
.btn-home:hover,
btn-home:focus {
  color: #fff;
  background-color: #920148;
  border: 1px solid #fff;
}

.btn-yellow {
  color: #130f40;
  border: 1px solid #130f40;
  background-color: #fff;
}

/*YELOW  BUTTON BEHAVIOR UPON HOVER OR FOCUS*/
.btn-yellow:hover,
btn-yellow:focus {
  color: #fff;
  background-color: #130f40;
  border: 1px solid #fff;
}

.btn-white {
  color: #920148;
  border: 1px solid #fff;
  background-color: #fff;
}

/*white  BUTTON BEHAVIOR UPON HOVER OR FOCUS*/
.btn-white:hover,
btn-white:focus {
  color: #fff;
  background-color: #920148;
  border: 1px solid #920148;
}

/*back to top button csss*/
.btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 3px 15px;
  border-radius: 4px;
  font-size: 22px;
  display: none;
  color: #130f40;
}

/*======================================
                    ARROW DOWN
==========================================*/

#arrow-down {
  position: absolute;
  left: 50%;
  bottom: 20px;
  color: #fff;
  font-size: 32px;
  width: 32px;
  height: 32px;
  text-align: center;
  margin-left: -16px;
  z-index: 1;
}

/*ARROW DOWN BEHAVIOR UPON HOVER OR FOCUS*/
#arrow-down:hover,
#arrow-down:focus {
  color: #130f40;
}

/*======================================
                    content boxes 
==========================================*/
.content-box-lg {
  padding: 120px 0;
}

.content-box-md {
  padding: 100px 0;
}

.content-box-sm {
  padding: 90px 0;
}

/*===================content box css ends ==========*/
/*======================================                                  vertical and horizontal headings 
==========================================*/
.vertical-heading h5 {
  color: #130f40;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  word-spacing: 9px;
  /*to ensure word takes proper width and height as per text*/
  display: inline-block;
  /*rotate text 90deg from current position*/
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: relative;
  top: 60px;
  left: -53px;
}

.vertical-heading h2 {
  margin: 0 0 0 35px;
}

.vertical-heading h2,
.horizontal-heading h2 {
  font-size: 42px;
  font-weight: 100;
  line-height: 45px;
}

.horizontal-heading {
  margin-bottom: 80px;
}

.horizontal-heading h5 {
  font-size: 16px;
  color: #130f40;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
}

.horizontal-heading h2 {
  margin: 0;
}

/*===================Vertical and horizontal heading css ends ==========*/
/*======================================
                    ABOUT 01 
==========================================*/
/*css selector"first-child"*/
#about-right p:first-child {
  margin-bottom: 30px;
}

.about-right {
    
    background-color: #ced6e0;
    color: #130f40;

}

#about-bottom {
  margin-top: 60px;

}


/*===================ABOUT 01 css ends ==========*/

/*======================================
                    ABOUT 02 
==========================================*/

#about-02 {
  background-color: #f4f4f4;
}

.about-item {
  background-color: #130f40;
  padding: 80px 30px;
  /*css ox shadow property used to create shadow about-item boxes*/
  -webkit-box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
}

.about-item i {
  font-size: 42px;
  margin: 0;
  color: #fff;
}

.about-item h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #fff;
}

.about-item hr {
  width: 45px;
  height: 3px;
  background-color: #fff;
  margin: 0 auto;
  border: none;
}

.about-item p {
  margin-top: 20px;
  margin-bottom: 20px;
  color: #fff;
}

/*mouse hover css*/
.about-item:hover {
  background-color: #ced6e0;
}

.about-item:hover i,
.about-item:hover h3,
.about-item:hover p
{
  color: #130f40;
}

/*move item icons in -y direction -20%*/
.about-item:hover i {
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
}

.about-item:hover hr {
  background-color: #130f40;
}

/*smooth transition css*/
.about-item,
.about-item i,
.about-item hr {
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

/*=================== about 02 css ends ==========*/

/*===================team section css ends ==========*/
/*=================
========social icons css ======
=========*/
ul.social-list {
  padding: 0;
  margin-top: 20px;
}

ul.social-list li {
  display: inline-block;
  padding: 0;
}

ul.social-list li a {
  border: 1px solid #130f40;
  width: 35px;
  height: 35px;
  /* make list display in a line format */
  display: inline-block;
  margin-right: 20px;
  line-height: 35px;
  color: #fff;
  border-radius: 50px;
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}

/* css nth child selector*/
ul.social-list li:nth-child(1) a:hover {
  background-color: #3b5998;
  border-color: transparent;
}

ul.social-list li:nth-child(2) a:hover {
  background-color: #00aced;
  border-color: transparent;
}

ul.social-list li:nth-child(3) a:hover {
  background-color: #dd4b39;
  border-color: transparent;
}

/*===================social icon css ends ==========*/

/*=================
========statement section css ======
=========*/
#statement .content-box-lg {
  /* this help like on overlay to make the image dim*/
  background: rgba(0, 0, 0, 0.3);
}

#statement {
  background: url("../images/solo-images/tech/tech-quote.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

#tech-statement h3 {
  color: #fff;
  font-size: 28px;
  line-height: 45px;
}

#tech-statement p {
  font-size: 14px;
  color: #fff;
  font-family: "Raleway", sans-serif;
  margin-top: 8px;
}

/*===================statement section css ends ==========*/

/*===================services 01 ==========*/

#services-01 img {
  margin: 60px 0;
}

.service {
  margin: 35px 0;
  padding: 20px 20px;
  height: 480px;
  border-radius: 1rem;
}

.service_card_1 {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)),
    url(../images/solo-images/services/alain-pham-P_qvsF7Yodw-unsplash.jpg)
      no-repeat 50% 50% / cover;
}

.service_card_2 {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)),
    url(../images/solo-images/services/christopher-burns-Wiu3w-99tNg-unsplash.jpg)
      no-repeat 50% 50% / cover;
}

.service_card_3 {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)),
    url(../images/solo-images/services/thisisengineering-raeng-lx8CooX66ms-unsplash.jpg)
      no-repeat 50% 50% / cover;
}

.service .icon {
  font-size: 42px;
  margin: 0;
  color: #fff;
  /* to achieve a smooth transition of moving icons */
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}

.service:hover .icon {
  color: #130f40;
  /*move item icons in -x direction -20%*/
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}

.service ul {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.service h4 {
  font-family: "Raleway", sans-serif;
  font-size: 24px;
  margin: 0 0 20px 0;
  color: #fff;
}

.service p {
  line-height: normal;
  color: #fff;
  margin-bottom: 35px;
  font-size: 15px;
}

.service li {
  margin-bottom: 14px;
  color: #fff;
  font-size: 15px;
}

/*===================services 01 css ends =========================*/

/*===================services 02( with responsive tabs css)  =========================*/

#services-02 {
  background: #f4f4f4;
}

#services-tabs ul {
  margin-bottom: 40px;
}

#services-tabs ul li {
  padding: 5px 30px;
}

#services-tabs ul li a {
  font-family: "Raleway", sans-serif;
  font-size: 13px;
  color: #212226;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0;
  /* to ensure no default padding on links*/
  text-decoration: none;
}

/*===============tabs active state======================*/
#services-tabs ul li.r-tabs-state-active a {
  color: #130f40;
  font-weight: 700;
  border-bottom: 3px solid #130f40;
  padding-bottom: 5px;
  -webkit-transition: border-color 300ms linear;
  transition: border-color 300ms linear;
}

.service-tab .col-md-6 {
  padding: 0;
}

.service-tab img {
  width: 100%;
  /*===============this is to ensure image stays at center of its container===========*/

  margin: 0 auto;
}

.service-tab .tab-bg {
  background: #fff;
  padding: 59px 30px;
  min-height: 482px;
}

.service-tab h2 {
  font-size: 48px;
  color: #bbb;
  margin-bottom: 20px;
  font-weight: 100;
}

.service-tab h3 {
  font-size: 32px;
  margin-bottom: 30px;
}

.service-tab p {
  line-height: 24px;
  margin-bottom: 30px;
}

.service-carousel {
  padding-top: 40px;
  padding-bottom: 40px;
  background: #f4f4f4;
}

.single-service img {
  height: 480px;
}

.single-service .col-md-6 {
  padding: 0;
}

.single-service img {
  width: 100%;
  /*===============this is to ensure image stays at center of its container===========*/

  margin: 0 auto;
}

.single-service h2 {
  font-size: 48px;
  color: #bbb;
  margin-bottom: 20px;
  font-weight: 100;
}

.single-service h3 {
  font-size: 32px;
  margin-bottom: 30px;
}

.single-service p {
  line-height: 24px;
  margin-bottom: 30px;
}

.service-carousel .service-bg {
  background: #fff;
  padding: 59px 30px;
  min-height: 482px;
}

/* Set the container size */
.swiper-container {
  width: 100%;
  height: 100%; /* Adjust the height as needed */
  position: relative;
}

/* Style the slides */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

/* Style navigation buttons */
.swiper-button-prev,
.swiper-button-next {
  width: 30px;
  height: 30px;
  /* background-color: #333; */
  color: #130f40;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
}

.swiper-button-prev {
  left: 10px;
}

.swiper-button-next {
  right: 10px;
}

.swiper-button-next,
.swiper-button-prev {
  text-rendering: auto;
}

/*===============services responsive tabs end here======================*/

/*===============stats  section begins here======================*/

#stats .content-box-md {
  /* this help like on overlay to make the image dim*/
  background: rgba(0, 0, 0, 0.5);
}

/*backgorund image with paralex effect*/
#stats {
  background: url("../images/solo-images/stats/stats-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

#stats .vertical-heading {
  margin-bottom: 50px;
}

#stats .vertical-heading h2 {
  color: #fff;
}

.stats-item {
  background: #130f40;
  border-radius: 4px;
  min-height: 170px;
  padding: 25px 50px;
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}

.stats-item i {
  font-size: 42px;
  color: #fff;
  margin: 0 0 6px;

  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}

.stats-item h3 {
  font-size: 32px;
  color: #fff;
  margin: 5px 0 5px;
}

.stats-item p {
  color: #fff;
  margin: 0;
}

.stats-item:hover {
  background: #ced6e0;
}

.stats-item:hover h3,
.stats-item:hover p {
  color: #130f40;
}

/*change position on hover*/
.stats-item:hover i {
  color: #130f40;
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
}

/*===============stats section ends here======================*/
/*===============clients section here======================*/

#client .horizontal-heading {
  margin-bottom: 30px;
}

#clients-list {
  padding: 40px 0 0 0;
}

.client {
  padding: 0 10px;
  max-width: 150px;
  /*center align horizontally in thier boxes*/
  margin: 0 auto;
  line-height: 100px;
}

.client img {
  display: inline-block !important;
  /*important keyword to treat line as important and override any other instance of this. */
}

/*===============clients section ends here======================*/

footer {
  background: #130f40;
  padding: 30px;
}

footer ul.social-list li a {
  border: 1px solid #fff;
  width: 35px;
  height: 35px;
}
footer p {
  color: #ffffff;
  line-height: 20px;
}

footer p span {
  color: #fff;
  font-size: 20px;
}

/* footer ends  */