@import url('satoshi.css');
@import url('styles.css');
/* === Style For Desktop=== */
/* === Start Service Section Style For Desktop=== */
.service-section {
    width: 100%;
    background-color: var(--black_solid);
    padding: 48px 80px 123.34px 72px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: auto;
}

.service-section-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 500px;
}

.service-section-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.service-section-text-header {
    font-size: var(--text-54);
    font-family: 'Satoshi-Regular';
    color: var(--white_700);
    line-height: 130%;
}

.service-section-text-header span {
    color:  var(--yellow_500);
}

.service-section-text-desc {
    font-size: var(--text-18);
    font-family: 'Satoshi-Regular';
    color: var(--white_700);
    line-height: 27px;
}

.service-section-clients {
    display: flex;
    align-items: center;
    margin-top: 48px;
}

.service-section-clients img {
    width: auto;
    height: 60px;
    object-fit: contain;
}


.service-section-image {
    width: 636px;
    height: 504px;
    border-radius: 40px;
    border: 12px solid #1D2B2F;
    overflow: hidden;
    flex-shrink: 0;
}

.service-section-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === Start Service Section Two Style For Desktop=== */
.service-section-two {
  width: 100%;
  padding: 56px 72px 0px 72px;
  display: flex;
}

.service-grid-two {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32.5px;
}

.service-card-two {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  padding: 24px 24px;
  background-color: #fff;
}


.card-two-image-icon {
  border-top: 1px solid var(--black_100);
  display: flex;
  flex-direction: column;
}
.up-arrow {
  margin: 14px 10px 9.96px 10px;
  width: 20.4px; 
  height: 20.4px;
  align-self: flex-end;
}
.down-icon {
  width: 60px;
  height: 60px;
}
.service-title-two {
  font-size: var(--text-32);
  font-family: 'Satoshi-Medium';
  color: var(--black_1000);
  line-height: 130%;
}
.service-desc-two {
  font-size: var(--text-14);
  font-family: 'Satoshi-Regular';
  color: var(--black_1000);
  line-height: 21px;
}

/* === End Style For Desktop=== */

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

 .service-section {
    padding: 32px 20px 24px 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    justify-content: left;
    gap: 32px;
}
 .service-section-container {  padding-left: 20px; }
 .service-section-text-header { line-height: 81px; }

 .service-section-image { margin-left: 20px; }

.service-section-two {
  width: 100%;
  padding: 32px 40px 32px 40px !important;
}

.service-grid-two {
  display: grid;
  height: auto;
  grid-template-columns: 1fr;
  gap: 16px;
}
}

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

.service-section {
    padding: 24px 30px;
    flex-direction: column;
    justify-content: none;
    align-items: flex-start;
    gap: 24px;
}
.service-section-container {max-width: 100%;   }
.service-section-text-header {font-family: var(--text-32); line-height: 48px; }
.service-section-text-desc {
  font-size: var(--text-14);
  line-height: 21px;
 }
.service-section-image {  width: 100%; }

.service-section-clients img {
    width: 100%;
    height: 60px;
    object-fit: contain;
}
.service-section-two {
  width: 100%;
  padding: 24px 20px 24px 20px !important;
}
.service-grid-two {
  display: grid;
  height: auto;
  grid-template-columns: 1fr;
  gap: 16px;
}
.service-card-two { padding: 24px 12px; }
}