@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&display=swap');
*{
  font-family: "Merienda", cursive;
}
header {
  background-color: #32353E;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  border-radius: 5px;
}
header .icons {
  display: flex;
  margin-left: auto;
  align-items: center;
}
header .icons a {
  background-color: #15c0c7;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  text-decoration: none;
  flex-shrink: 0;
}
header form {
  background-color: #4a4e55;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  margin-left: 20px;
  border-radius: 4px;
}
header form input {
  background: transparent;
  outline: none;
  border: 0;
  color: white;
  font-size: 15px;
  width: 150px;
}
header form button {
  background: transparent;
  border: 0;
  color: white;
  cursor: pointer;
}
header form input::placeholder {
  color: white;
}
header form button {
  background: transparent;
  border: 0;
  color: white;
}
@media screen and (max-width: 767px) {
  header .icons a{
    display: none;
  }
  header form {
  width: auto;   
  margin: 0;
  }
  header form input {
  width: 100%;
  font-size: 16px;  
}
}

/*Style for nav*/
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 5%;
  width: 90%;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
nav .logo img {
  width: 130px;
  margin: 0;
}
nav .nav_bar {
  margin: 0 auto;
}
nav .nav_bar ul {
  display: flex;
  gap: 25px;
  list-style: none;
}
nav .user_info {
  text-align: right;
  margin: 0;
}
nav i.fa-bars {
  display: none;
  cursor: pointer;
  font-size: 22px;
  color: #333;
}
nav .nav_bar a{
  color: #333333;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  list-style-type: none;
}
nav .nav_bar a:hover{
  color: #15c0c7;
}
nav .user_info span{
  display: block;
  font-size: 15px;
  font-weight: bold;
}
nav .user_info span a{
  font-size: 15px;
  font-weight: bold;
  color: #15c0c7;
  text-decoration: none;
  transition: 0.4s;
}
nav .user_info span a:hover{
  color: #333333;
}
@media screen and (max-width: 992px) {
  nav{
    width: auto;
  }
  nav .nav_bar {
    display: none;
  }
  nav i.fa-bars {
    display: block;
  }
  nav {
    padding: 10px 20px;
  }
}
@media screen and (max-width: 650px) {
  nav .user_info {
    display: none;
  }
}
/*Home section*/
.section_home{
  background-image: url(imgs/slider_3.jpg);
  background-repeat: no-repeat;
  height: 80vh;
  background-size: cover; 
  position: relative;
}
.layer{
  position: absolute;
  inset: 0;
  background-color: #00000071;
}
section .container{
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  align-items: center;     
  text-align: center;      
  height: 100%;
  width: 100%;  
  position: relative;
}
section .container .home_content h1{
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}
section .container .home_content p{
  color: #fff;
  font-size: 16px;
  text-align: center;
  margin-bottom: 50px;
  margin-top: 20px;
}
section .container .home_content a,
.section_services .container .view_more_button a,
.section_business .container .view_all_button a
{
  background-color: #15c0c7;
  color: #fff;
  border-radius: 25px;
  font-size: 14px;
  text-decoration: none;
  padding:8px 18px 8px 18px;
}
section .container .home_content a:hover,
.section_services .container .view_more_button a:hover,
.section_business .container .view_all_button a:hover{
 background-color: #333333;
}
@media screen and (max-width: 620px) {
  section .container .home_content p{
  display: none;
}
}
/*Services style*/
.section_services{
  background-image: none;
  background-color: #fff;
}
.section_services .container .services_content {
  margin-top: 50px; 
  text-align: center;
}
.section_services .container .services_content span,
.section_business .container .business-content span,
.section_consultation .container .consultation-content span,
.section_grow .container .grow_content span,
.section_client .container .client_content span{
  font-size: 20px;
  font-weight: lighter;
  margin-bottom: 5px;
}
.section_services .container .services_content h2 ,
.section_business .container .business-content h2,
.section_consultation .container .consultation-content h2,
.section_grow .container .grow_content h2,
.section_client .container .client_content h2{
  font-size: 25px;
  font-weight: bolder;
  margin-top: 0;
  position: relative;
}
.section_services .container .services_content h2::before,
.section_business .container .business-content h2::before,
.section_consultation .container .consultation-content h2::before,
.section_client .container .client_content h2::before{
  position: absolute;
  content: "";
  width: 150px;
  height: 3px;
  background: #15c0c7;
  left: 50%;
  transform: translateX(-50%);
  bottom: -24px;
  animation: animation_underline 3s infinite;
}
.section_services .container .services_content h2::after,
.section_business .container .business-content h2::after,
.section_consultation .container .consultation-content h2::after,
.section_client .container .client_content h2::after{
  position: absolute;
  content: "";
  background: #15c0c7;
  left: 50%;
  width: 15px;
  height: 15px;
  bottom: -30px;
  transform: translateX(-50%) rotate(45deg);  
  border: 2px solid #ffffff;
}
@keyframes animation_underline {
  0%{
    width: 150px;
  }
  50%{
    width: 0;
  }
  100%{
    width: 150px;
  }
}
@media screen and (max-width: 570px) {
.section_services .container .services_card p {
  width: 300px;
}
}
.section_services .container .services_card{
  width: 200px; 
  height: 350px; 
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  margin: 10px;
}
.section_services .container .services_card a{
  background-color:#15c0c7 ;
  padding: 20px;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  justify-content: center;
  display: flex;          
  align-items: center;    
  text-decoration: none; 
}
.section_services .container .services_card h3{
  font-size: 20px;

}
.section_services .container .services_card .underline{
  background-color: #b8b8b8;
  height: 1px;
  width: 200px;
  color: #b8b8b8;
}
.section_services .container .services_card p{
  font-size: 16px;
  color: #b8b8b8;
}
.cards{
  display: flex;         
  flex-wrap: wrap;        
  justify-content: center;
  gap: 20px;
}

/*style cases*/
.section_case{
  background-image: url(imgs/case.jpg);
  background-repeat: no-repeat;
  height: 90vh;
  background-size: cover; 
  position: relative;
  margin-top: 100px;
}
.section_case .container{
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  align-items: center;     
  text-align: center;      
  height: 100%;
  width: 100%;  
  position: relative;
}
.section_case .container .case_content{
  margin-bottom: 80px;
}
.section_case .container .case_content h2{
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 60px;
  position: relative;
}
.section_case .container .case_content .paragraph_one{
  color: #fff;
  font-size: 24px;
  text-align: center;
  margin-bottom: 50px;
  margin-top: 20px;
}
.section_case .container .case_content .paragraph_two{
  color: #fff;
  font-size: 16px;
  text-align: center;
  margin-bottom: 50px;
  margin-top: 0;
}
.section_case .container .case_content a{
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 25px;
  font-size: 12px;
  text-decoration: none;
  padding: 10px;
}
.section_case .container .case_content a:hover{
  color: #333333;
  background-color: #fff;
}
.section_case .container .case_content h2::before,
.section_performance .container .performance_content h2::before,
.section_grow .container .grow_content h2::before{
  position: absolute;
  content: "";
  width: 150px;
  height: 3px;
  background: #fff;
  left: 50%;
  transform: translateX(-50%);
  bottom: -24px;
  animation: animation_underline 3s infinite;
}
.section_case .container .case_content h2::after,
.section_performance .container .performance_content h2::after,
.section_grow .container .grow_content h2::after{
  position: absolute;
  content: "";
  background: #4a4e55;
  left: 50%;
  width: 15px;
  height: 15px;
  bottom: -30px;
  transform: translateX(-50%) rotate(45deg);
  border: 2px solid #ffffff;
}
@keyframes animation_underline {
  0%{
    width: 150px;
  }
  50%{
    width: 0;
  }
  100%{
    width: 150px;
  }
}
@media screen and (max-width: 720px) {
  .section_case .container .case_content .paragraph_two{
  display: none;
}
}
@media screen and (max-width: 430px) {
h2{
  padding: 0 5px;
}
}
@media screen and (max-width: 344px) {
  .section_case .container .case_content .paragraph_two{
  display: none;
}
}

/*style business*/
.section_business{
  background-image: none;
  background-color: #fff;
}
.section_business .container .business-content {
  margin-top: 50px;
}
.section_business .container .business-content h2::before{
  bottom: -24px;
}
.section_business .container .business-content h2::after{
  bottom: -30px;
}
.section_business .container .cards{
  margin-top: 60px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}
.section_business .container .cards .business_card{
  margin-bottom: 100px;
  width: 100%;
  max-width: 350px;
  height: auto; 
  display: flex;
  flex-direction: column; 
  margin: 10px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0.4,0.4,0.4,0.4);
}
.section_business .business_img {
  width: 100%;
  overflow: hidden;
}
.section_business .business_img img{
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: 0.4s ease;
}
.section_business .business_card .business_img img:hover{
  transform: scale(1.3);
}
.section_business .business_card span{
  color: #15c0c7;
  font-weight: bold;
  margin-right: 10px;
  text-align: left;
}
.section_business .business_card a{
  color: #777777;
  text-decoration: none;
  text-align: left;
}
.section_business .business_card a:hover{
  color: #15c0c7;
}
.section_business .business_card h2{
  font-size: 18px;
  font-weight: bolder;
  padding:0px 15px 0px 15px;
  margin-bottom: 5px;
  margin-top: 15px;
  text-align: left;
}
.section_business .business_card p{
  font-size: 16px;
  font-weight: lighter;
  color: #777777;
  padding:0px 15px 0px 15px;
  margin-top: 10px;
  margin-bottom: 15px;
  text-align: left;
}
@media screen and (max-width: 776px) {
  .section_business .container .cards .business_card {
    max-width: 90%;
    height: auto;
  }
  .section_business .business_img img {
    height: 250px;
  }
  .section_business .container .business-content h2::before {
    width: 100px;
  }
}

/*style performance*/
.section_performance {
  background-image: url(imgs/case21.jpg);
  background-repeat: no-repeat;
  height: 90vh;
  background-size: cover; 
  position: relative;
  margin-top: 100px;
  display: flex;
  align-items: center;
  padding: 80px 0;
}
.section_performance .layer{
  position: absolute;
  inset: 0;
  background-color: #384450a1;
}
.performance_content {
  position: relative;
  margin-bottom: 60px;
  text-align: center;
}
.section_performance .container .performance_content span {
  font-size: 30px;
  font-weight: lighter;
  margin-bottom: 5px;
  color: #fff;
}
.performance_content h2 {
  font-size: 36px;
  font-weight: bolder;
  color: #fff;
  padding-bottom: 30px;
  position: relative;
}
.section_performance .container .performance_content h2::before{
  bottom: 0;
}
.section_performance .container .performance_content h2::after {
  bottom: -6px; 
}
@keyframes animation_underline {
  0%{
    width: 150px;
  }
  50%{
    width: 0;
  }
  100%{
    width: 150px;
  }
}
.performance_precentage {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 80px;
}
.performance_count {
  background-color: transparent;
  height: 180px;
  width: 180px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 15px;
}

.performance_count span {
  font-size: 50px;
  color: #fff;
}
.performance p {
  font-size: 20px;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .section_performance {
    height: auto;
    padding: 50px 20px;
  }
  .performance_precentage {
    gap: 30px;
  }
  .performance_content span {
    font-size: 22px;
  }
}
@media screen and (max-width: 480px) {
  .performance_precentage {
    flex-direction: column;
  }
  .performance_count {
    height: 150px;
    width: 150px;
  }
  .performance_count span {
    font-size: 40px;
  }
}

/*client*/
.section_client{
  background-image: none;
  background-color: #fff;
}
.section_client .container .client_content {
  margin-top: 80px;
}
.section_client .container .client_content h2::before{
  bottom: -24px;
}
.section_client .container .client_content h2::after{
  bottom: -30px;
}
.section_client{
  padding: 50px 0;
  position: relative;
}
.Testimonials{
  margin-top: 100px;
  display: flex;
  overflow-x: hidden;
}
.Testimonials .Testimonials_content {
  min-width: 30%;
  display: flex;
  align-items: center;
  padding: 0 50px 0 50px;
}
.Testimonials .Testimonials_content .Testimonials_img img{
  display: block;
  border-radius: 50%;
  width: 80px;
}
.Testimonials .Testimonials_content .Testimonials_info{
  margin-left: 15px;
  text-align: left;
}
.Testimonials .Testimonials_content .Testimonials_info p{
  font-size: 16px;
  margin-bottom: 5px;
  color: #777777;
  text-align: left;
}
.Testimonials .Testimonials_content .Testimonials_info span{
  font-size: 18px;
  font-weight: bold;
  color: #32353E;
  text-align: right;
}
.Testimonials_angles{
  position: absolute;
  top: 82%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.Testimonials_angles div{
  background-color: #f0f0f0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Testimonials_angles div i{
  color: #15c0c7;
}
@media screen and (max-width: 768px) {
  .Testimonials .Testimonials_content {
    margin: 0 auto;
    padding: 15px;
  }
  .Testimonials{
    flex-wrap: wrap;
  }
  .Testimonials_info p {
    font-size: 14px;
  }
}

/*style grow*/
.section_grow{
  background-image: url(imgs/revenue.jpg);
  background-repeat: no-repeat;
  height: 80vh;
  background-size: cover; 
  position: relative;
  margin-top: 100px;
}
.section_grow .layer{
  position: absolute;
  inset: 0;
  background-color: #010508a1;
}
.section_grow .container .grow_content {
  margin-bottom: 80px;
  text-align: center;
}
.section_grow .container .grow_content span {
  font-size: 30px;
  color: #fff;
}
.section_grow .container .grow_content h2 {
  font-size: 36px;
  color: #fff;
  position: relative;
}
.section_grow .container .grow_content h2::before{
  bottom: -24px;
}
.section_grow .container .grow_content h2::after{
  bottom: -30px;
}
.section_grow .container a{
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 25px;
  font-size: 15px;
  text-decoration: none;
  padding: 10px 15px 10px 15px;
}
.section_grow .container a:hover{
  color: #333333;
  background-color: #fff;
}

/*style consultation*/
.section_consultation{
  background-image: none;
  background-color: #fff;
}
.section_consultation .container .consultation-content {
  margin-top: 50px;
}
.section_consultation .container .consultation-content h2::before{
  bottom: -24px;
}
.section_consultation .container .consultation-content h2::after{
  bottom: -30px;
}
.section_consultation form p{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}
.section_consultation form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 30px;
}
.section_consultation form select{
  height: 60px;
  width: 650px;
  padding: 0 0 0 20px;
  background-color: #F6F6F6;
  border: none;
}
.section_consultation form select:hover{
  background-color: #e2e2e2;
}
.section_consultation form select option{
  color: #7F7F7F;
}
.section_consultation form input{
  height: 60px;
  width: 630px;
  padding: 0 0 0 20px;
  background-color: #F6F6F6;
  border: none;
  font-size: 16px;
}
.section_consultation form button{
  background-color: #15c0c7;
  color: #fff;
  border-radius: 25px;
  font-size: 14px;
  text-decoration: none;
  padding: 8px;
  width: 150px;
  border: none;
}
.section_consultation form button:hover{
  background-color: #333333;
}
@media screen and (max-width: 665px) {
.section_consultation form input{
  width: 500px;
}
.section_consultation form select{
  width: 520px;
}
}
@media screen and (max-width: 500px) {
.section_consultation form input{
  width: 360px;
}
.section_consultation form select{
  width: 380px;
}
}
@media screen and (max-width: 400px) {
.section_consultation form input{
  width: 180px;
}
.section_consultation form select{
  width: 200px;
}
}
/*Footer*/
footer{
  margin-top: 100px;
  background-color: #32353E;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center; 
  text-align: center;
}
footer img{
  height: 60px;
  width: 180px;
}
footer p{
  color: #fff;
}