/******************************************
/* CSS
/*******************************************/

/* Box Model Hack */
*{
  box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/
html{
  font-size: 62.5%;
}
body {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  background-color: #f4f3f2;
  
  /* Add some padding on document's body to prevent the content
    to go underneath the header */
  padding-top: 8vh;
}
a{
  text-decoration: none;
  color: #fff;
  padding: 0.75rem 1rem;
  background-color: #4979dc;
  border-radius: 5px;
}

/*************** font size ****************/
h1{
  margin: 0;
  font-size: 6.0rem;
}
h2{
  font-size: 4.8rem;
  margin: 0.75em 0;
}
h3{
  font-size: 3.2rem;
}
h4{
  font-size: 2.8rem;
  margin: 0.75em 0;
}
h5{
  font-size: 2.4rem;
  margin: 0.75em 0;
}
h6{
  font-size: 1.8rem;
  margin: 0.5em 0;
}
a{
  font-size: 2.1rem;
}
p{
  font-size: 1.8rem;
}
@media (min-width:768px) and (max-width:992px) {
  h1{
    margin: 0;
    font-size: 4.8rem;
  }
  h2{
    font-size: 3.6rem;
  }
  h3{
    font-size: 2.8rem;
  }
  h4{
    font-size: 2.4rem;
    margin: 0.5em 0;
  }
  h5{
    font-size: 2.1rem;
  }
  h6{
    font-size: 1.6rem;
    margin: 0.5em 0;
  }
  a{
    font-size: 1.6rem;
  }
  p{
    font-size: 1.6rem;
  }
}
@media screen and (max-width:767px) {
  h1{
    margin: 0;
    font-size: 4.4rem;
  }
  h2{
    font-size: 3.2rem;
  }
  h3{
    font-size: 2.4rem;
  }
  h4{
    font-size: 2.1rem;
    margin: 0.5em 0;
  }
  h5{
    font-size: 1.8rem;
  }
  h6{
    font-size: 1.6rem;
    margin: 0.5em 0;
  }
  a{
    font-size: 1.6rem;
  }
  p{
    font-size: 1.6rem;
  }
}
/******************************************
/* LAYOUT
/*******************************************/

/*************** header style ****************/
header{
  height: 8vh;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  top: 0;
  background-color: white;
}
header > nav{  
  /* margin: 20px 0; */
}
.logo-holder{
  float: left;
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1709486935/soitsol/soitsol_qifbve.png");
  margin-left: 1%;
  height: 20vh;
  width: 15%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}
header nav{
  flex-basis: 100%;
  text-align: center;
}
header nav ul{
  display: flex;
  justify-content: center;
  margin: 0;
  list-style: none;
  padding-left: 0;
}
header nav ul li{
  padding: 0 2%;
  text-decoration: none;
}
header nav ul li:hover{
  color: rgb(255, 188, 94);
}
/*************** main style ****************/
main{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  padding: 0 8%;
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1709486910/soitsol/web-development-services_hozhee.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}
@media screen and (max-width:767px) {
  main{
    align-items: center;
    text-align: center;
  }
  .carousel-container {
    margin: 0 auto;
  }
}
h1{
  padding-bottom: 1em;
}
button{
  background-color: rgb(255, 188, 94);
  color: rgb(0, 0, 0);
  padding: 8px 4%;
  border-radius: 10px;
  font-weight: 700;
  width: fit-content;
}
button:hover{
  cursor: pointer;
}

/*carousel */
@-webkit-keyframes rotate {
	0%, 20% {
		transform: translateY(0);
	}
	25%,45% {
		transform: translateY(calc(1em * -1.5));
	}
	50%,75% {
		transform: translateY(calc(1em  * -3));
	}
	80%,95% {
		transform: translateY(calc(1em  * -4.5));
	}
	100% {
		transform: translateY(calc(1em * -6));
	}
}
.carousel-container {
  width: fit-content;
	line-height: 1.5em;	
	height: 1.5em;
	overflow: hidden;
}			
.carousel {
	-webkit-animation: rotate 6s ease-in-out infinite;
	        animation: rotate 6s ease-in-out infinite;
}	
.carousel:hover {
	-webkit-animation-play-state: paused;
          animation-play-state: paused;
}	
.carousel li{
  color: rgb(255, 188, 94);
  list-style: none;
}

/*************** why-us style ****************/
.why-us{
  min-height: 50vh;
  padding: 5vh 5%; 
  margin: 1vh auto;
  max-width: 1200px;
}
.why-us h2{  
  text-align: center;
}
.why-us article{
  padding-bottom: 0.5em;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.why-us button{  
  margin: 0 auto;
}
.container-for-story-items{
  margin: 1vh 10%;
  padding: 1em 0;
  display: flex;
  align-items: center;
  border-top: 1px solid gray;
}
@media screen and (max-width:767px) {
  .container-for-story-items{
    padding: 0;
  }
}
.story-image-holder{  
  margin: 2vh 0;
  height: 60px;
  flex-basis: 20%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media (min-width:768px) and (max-width:992px){
  .story-image-holder{
    height: 100px;
  }
}
@media (min-width: 992px){
  .story-image-holder{
    height: 100px;
  }
}
.story-items{
  flex-basis: 80%;
  padding: 0 5%;
}
@media screen and (max-width:767px){
  .story-items{
    flex-basis: 100%;
  }
  .story-items p{
    display: none;
  }
}

.client-image-holder{
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1709486886/soitsol/client_owqzsk.png");
}
.reliable-image-holder{
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1709486867/soitsol/reliable_oxhpjq.webp");
}
.quality-image-holder{
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1709486837/soitsol/quality_spvcmb.png");
}
.qualified-image-holder{
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1709486830/soitsol/expert_jqn0yy.png");
}

/*************** services-page style ****************/
.services-page{
  padding: 15px 5%;
  height: fit-content;
  background-color: #bef8fe;
}

.services-page h2,
.services-page h3{
  text-align: center;
}

#services-content{
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
}
#services-content .items{
  border: 1px solid gray;
  border-radius: 15px;
  padding:0 2.5%;
}
@media (min-width:993px){
  #services-content .items div{
    height: 100px;
    margin: 1em 0;
  }
  #services-content .items.center{
    margin: 0 2%;
  }
}
@media (min-width:768px) and (max-width:992px){
  #services-content .items div{
    height: 80px;
    margin: 1em 0;
  }
  #services-content .items.center{
    margin: 0 2%;
  }
}
@media screen and (max-width:767px){
  #services-content{
    display: block;
  }
  #services-content .items{
    margin: 2%;
  }
  #services-content .items div{
    height: 80px;
    margin: 1em 0;
  }
}
.webdev-image-holder{
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1709486763/soitsol/data_nnyeug.png");
}
.webdesign-image-holder{
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1709486789/soitsol/graphic-design_eem6gs.png");
}
.copywriting-image-holder{
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1709486798/soitsol/copywriter_g0lpq3.png");
}

/*************** experts-content ****************/
#experts-content{
  max-width: 1200px;
  margin: auto;
}
#experts-content h2{
  text-align: center;
}
#experts-content h3{
  margin-top: 5px;
}

.container-for-experts a{
  text-decoration: none;
  color: #000;
  background: transparent;
  border-bottom: 3px solid  #4979dc; /*rgb(125, 125, 125)*/
}

.container-for-experts{  
  /* margin: 5vh 0; */
  margin: 1vh 10%;
  padding: 1em 0;
  display: flex;
  align-items: center;
  border-top: 1px solid gray;
}
.container-for-experts a{
  flex-basis: 70%;
  text-decoration: none; 
  border-bottom: none;
}
.expert-image-holder{
  height: 100px;
  flex-basis: 30%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media (min-width:993px){
  .expert-image-holder{
    height: 200px;
  }
}
@media (min-width:768px) and (max-width:992px){
  .expert-image-holder{
    height: 150px;
  }
}
@media (min-width:576px) and (max-width:767px){
  .expert-image-holder{
    height: 140px;
  }
}
@media screen and (max-width:576px){
  .expert-image-holder{
    height: 100px;
  }
}
.expert-items{
  padding: 0 5%;
}
@media (width<576px){
  .expert-items p{
    display: none;
  }
}
.arsalan-image-holder{
  background-image: url("../img/1.png");
}
.ob-image-holder{
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1709486597/soitsol/1_f3ksah.png");
}
.sania-image-holder{
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1709486598/soitsol/2_qfxd6i.png");
}
.faigha-image-holder{
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1710959643/soitsol/smiley-businesswoman-posing-outdoors-with-arms-crossed-copy-space_kei02j.jpg");
}

/*************** features ****************/
.feature{
  height: fit-content;
  background-color: #bef8fe;
}
#feature-content{
  display: flex;
  max-width: 1200px;
  margin: auto;
  padding: 5vh 5%;
  /* height: 60vh; */
}
.items{
  flex: 1;
  padding: 0 2%;
}
.items h2{
  text-align: center;
}
.items div{  
  margin: 5vh 0;
  height: 150px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.quality-image-holder{
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1709486837/soitsol/quality_spvcmb.png");
}
.speed-image-holder{
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1709487010/soitsol/speed_ukbq2s.png");
}
.price-image-holder{
  background-image: url("https://res.cloudinary.com/da8oeqxb9/image/upload/v1709487026/soitsol/salary_i4b699.png");
}

/*************** contact-page style ****************/
#contact-page{
  height: fit-content;
  padding: 60px 5%;
  align-items: center;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}
#contact-page form{
  display: inline-block;
}
#contact-page input{
  border: none;
  color: black;
  border-bottom: 1px solid gray;
}
#contact-page input,
#contact-page button{
  height: 40px;
}
#contact-page button a{
  color: #000;
  background: transparent;
}
/*************** footer style ****************/
footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #bef8fe;
}
.footer-content{
  flex-basis: 75%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: top;
  padding: 0 5% 50px 5%;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-content > *{
  flex: 1;
  padding: 0 2%;
}
.footer-content h5
{  
  padding-bottom: 5px;
  border-bottom: 1px solid rgb(179, 179, 179);
}
.footer-content ul{
  padding-left: 0;
}
.footer-content li{  
  list-style: none;
  display: block;
  padding: 5px 0;
  font-size: 16px;
}

/******************************************
/* TWITTER LOGO
/*******************************************/
.fa {
  padding: 1rem;  
  font-size:2.5rem;
  width: 5rem;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}
/* Github */
.fa-github {
  background: white;
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/