@import url('satoshi.css');
@import url('styles.css');
/* === Style For Desktop=== */

/* === Start Style for Business growth section=== */
.business-growth {
    width: 100%;
    background-color: var(--black_solid);
    padding: 62px 80px 63px 72px;
    display: flex;     
}

.business-growth-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
}

.business-growth-text {
    margin-bottom: 72.34px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    align-items: center;
    gap: auto;
    height: 140px; 
    width: 100%;
    color: var(--white_100);
}
.business-growth-left {
    width: 699px;
    height: auto;
    font-size: var(--text-54);
    font-family: 'Satoshi-Regular';
    line-height: 130%;
    margin: 0;
  }

  .business-growth-highlight { color:var(--yellow_500);  }
  .business-growth-right {
    width: 500px;
    height: auto;
    font-size: var(--text-18);
    font-family: 'Satoshi-Regular';
    line-height: 27px;
    margin: 0;
  }

  .video-wrapper { 
    width: 100%;        
    height: 494px;
    margin-bottom: 18px; 
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    border: 12px solid var(--video_border);
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.business-growth-stats {
    display: flex;
    justify-content: center;
    gap: 96px;
    width: 100%;
}

.business-growth-stat {
  padding: 24px 48px;
   text-align: center; 
   }

.number-heading {
  margin-bottom: 8px;
    font-size: var(--text-36);
    font-family: 'Satoshi-Black';
    color: var(--white_100);
    line-height: 36px;
}
.business-growth-stat-highlight{
    font-size: var(--text-36);
    font-family: 'Satoshi-Black';
    color: var(--yellow_500);
    line-height: 36px;
}

.number-desc {
    font-size: var(--text-20);
    font-family: 'Satoshi-Regular';
    color: #FFFFFFB3;
    line-height: 30px;
}
/* === End Business growth Section === */

/* === Start Style for Evohire Mission section=== */
.evohire-mission-section {
    width: 100%;
    padding: 56px 72px;
    display: flex;
    flex-direction: column;
}


.evohire-mission-container {
  width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: auto;
    margin-bottom: 64px;
    height: 290px;
    /* height: 315px; */
}

.evohire-mission-title{
  width: 172px;
  height: auto;
}
.evohire-mission-title-header {
    font-size: var(--text-32);
    font-family: 'Satoshi-Medium';
    color: var(--black_1000);
    line-height: 48px;
}

.evohire-mission-content {  
   width: 868px;
   height: auto;
  }

.evohire-mission-content-heading {
    font-size: var(--text-42);
    font-family: 'Satoshi-Bold';
    color: var(--black_1000) ;
    line-height: 130%;
    margin-bottom: 16px;
}

.evohire-mission-content-desc {
    font-size: var(--text-18);
    font-family: 'Satoshi-Regular';
    color: var(--black_1000) ;
    line-height: 27px;
}

.evohire-mission-values-heading p {
    margin-top: 25px;
    margin-bottom: 32px;
    font-size: var(--text-32);
    font-family: 'Satoshi-Medium';
    color: var(--black_1000);
    line-height: 48px;
}

.evohire-mission-values-container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 24px;
    column-gap: 60px;
    justify-content: flex-start;
}

.evohire-mission-value-box {
    flex: 0 1 calc((100% - 120px) / 3); 
    max-width: calc((100% - 120px) / 3);
}

.evohire-mission-value-number{padding: 10px 10px;
  border-bottom: 1px solid #181A1B;
}
.evohire-mission-value-number p {
    font-size: var(--text-32);
    font-family: 'Satoshi-Medium';
    color: var(--black_1000);
    line-height: 48px;
}

.evohire-mission-value-title p {
    margin-top: 16px;
    font-size: var(--text-32);
    font-family: 'Satoshi-Medium';
    color: var(--black_1000);
    line-height: 48px;
}

.evohire-mission-value-description{
  margin-top: 12px;
  font-size: var(--text-14);
  font-family: 'Satoshi-Regular';
  color: var(--black_1000);
  line-height: 21px;
}
/* === End Evohire Mission section === */
/* === End Style For Desktop=== */

/* === Responsive Styles for Tablet Screen (744px to 1024px) === */
@media (min-width: 744px) and (max-width: 1024px){

    /* === Responsive Style For Business Growth Section === */
    .business-growth { padding: 24px 40px 58px 40px; }   
    .business-growth-text {
         margin-bottom: 20px;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
          gap: 16px;
          height: 142px;
      }
  
      .business-growth-left{
          width: 664px;
          text-align: left;
          flex: 1;
          font-family: 'Satoshi-Light';
          font-size: var(--text-32);
          line-height: 130%;
      }
      .business-growth-right {
        width: 664px;
        text-align: left;
        font-size: var(--text-14);
        line-height: 21px;
       }
    .video-wrapper {  margin-bottom: 20px; }
    .business-growth-stats { gap: 24px; }
    .business-growth-stat  {  padding: 24px 12px; }
  
     .number-heading {
      font-size: var(--text-18);
      font-family: 'Satoshi-Regular';
      line-height: 36px;
  }
    .business-growth-stat-highlight{
      font-size: var(--text-18);
      font-family: 'Satoshi-Regular';
      line-height: 36px;
  }
  .number-desc {
      font-size: var(--text-10);
      line-height: 15px;
  }

   /* === Responsive Style For Evohire Mission Section === */
   .evohire-mission-section { padding: 32px 40px 32px 40px; }
   .evohire-mission-container {
     flex-direction: column;
     height: auto;
     gap: 24px;
     margin-bottom: 48px;
   }
 
   .evohire-mission-title { width: 100%; }
   .evohire-mission-content {  width: 100%; }
   .evohire-mission-content-heading {
     font-size: var(--text-32);
     line-height: 48px;
     margin-bottom: 12px;
   }
 
   .evohire-mission-values-heading p {
     font-size: var(--text-28);
     line-height: 42px;
     margin-bottom: 24px;
   }
 
   .evohire-mission-values-container {
     flex-direction: column;
     row-gap: 16px;
   }
   .evohire-mission-value-box {
     max-width: 100%;
     flex: 1 1 100%;
   }   
}


/* === Responsive Styles for Mobile Screen (320px to 744px) === */
@media (min-width: 320px) and (max-width: 744px) {

     /* === Responsive Style For Business Growth Section === */
    .business-growth {  padding: 24px 20px 32px 20px;  } 
    .business-growth-text {
      margin-bottom: 20px;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 16px;
      height: 226px;
      }
  
      .business-growth-left{
          width: 350px;
          text-align: left;
          flex: 1;
          font-family: 'Satoshi-Light';
          font-size: var(--text-32);
          line-height: 130%;
      }
      .business-growth-right {
        width: 350px;
        flex: 1;
        text-align: left;
        font-size: var(--text-14);
        line-height: 21px;
       }
  
    .video-wrapper { 
      width: 100%;        
      height: 494px;
      margin-bottom: 20px;
    }
  
    .business-growth-stats { gap: 24px;  }
    .business-growth-stat  { padding: 24px 12px; }
  
     .number-heading {
      font-size: var(--text-18);
      font-family: 'Satoshi-Regular';
      line-height: 27px;
  }
    .business-growth-stat-highlight{
      font-size: var(--text-18);
      font-family: 'Satoshi-Regular';
      line-height: 27px;
  }
  .number-desc {
      font-size: var(--text-10);
      line-height: 15px;
  }
 /* === Responsive Style For Evohire Mission Section === */

 .evohire-mission-section {  padding: 32px 20px 4px 20px; }
 .evohire-mission-container {
   flex-direction: column;
   height: auto;
   gap: 12px;
   margin-bottom: 24px;
 }

 .evohire-mission-title {  width: 100%;  }
 .evohire-mission-content {  width: 100%; }

 .evohire-mission-content-heading {
   font-size: var(--text-32);
   line-height: 48px;
   margin-bottom: 16px;
 }

 .evohire-mission-content-desc {
   font-size: var(--text-14);
   line-height: 21px;
 }

 .evohire-mission-values-heading p { margin-bottom: 24px; }
 .evohire-mission-values-container {
   flex-direction: column;
   row-gap: 16px;
 }
 .evohire-mission-value-box {
   max-width: 100%;
   flex: 1 1 100%;
 }
 .evohire-mission-value-title p { margin-top: 12px; }
}