@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

body {
  font-family: "Roboto", sans-serif;
}

/* HEADER */
header {
  background-color: black;
  padding: 25px 0;
}
.nav-ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 85px;
}
.nav-link {
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  background-color: white;
  bottom: 0;
  left: 0;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.logo-img {
  margin: 0 15px;
}

/* hero section */

.hero-section {
  background-image: url(../images/bg-image.jpg);
  height: 649px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 135px 435px 90px;
  align-items: center;
}
.hero-title {
  font-size: 64px;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  letter-spacing: 4px;
}
.hero-p {
  color: white;
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  width: 504px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
}
.btn-primary {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #00afdb;
  width: 184px;
  height: 46px;
  border: none;
  cursor: pointer;
}
.btn-primary a {
  color: white;
}
.btn-primary:hover {
  background: #0099cc;
}

.hero-text {
  height: 221px;
  width: 730px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.socials {
  width: 170px;
  height: 20px;
  margin-top: 183px;
}

/* secnd-section */
.secnd-section,
.section-4 {
  background-color: #ffffff;
  height: 842px;
  padding: 120px 269px 140px;
}
.scnd-section-block,
.sec-4-block {
  height: 582px;
  display: flex;
  align-items: center;
  gap: 248px;
}
.scnd-section-text-box h2 {
  font-weight: 700;
  font-size: 24px;
  color: #373737;
  line-height: 100%;
  letter-spacing: 1px;
  text-transform: uppercase;
  width: 368px;
}
.scnd-section-text-box p {
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  color: #4e4e4e;
  width: 407px;
  margin-top: 20px;
  margin-bottom: 30px;
}
.scnd-section-text-box p span {
  font-weight: 500;
}

/* section with slider */
.section-slider {
  height: 504px;
  background-color: #f5f6f7;
}
.slider-section-block {
  height: 282px;
}
.user-card {
  width: 298px;
  height: 175px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 155px;
  margin-left: 269px;
}
.user-card h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #373737;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.user-card p {
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  color: #4e4e4e;
  text-align: center;
}
/* section 4 */
.sec-4-block-text h3 {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #373737;
}
.sec-4-block-text p {
  color: #4e4e4e;
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  margin-top: 20px;
  margin-bottom: 30px;
  width: 407px;
}
.sec-4-block-text p span {
  font-weight: 500;
}

/* newsletter-section */
.newsletter-section {
  height: 524px;
  background-image: url(../images/pexels.jpg);
  display: flex;
  justify-content: center;
  align-items: center;
}
.newsletter-block {
  text-align: center;
  color: #ffffff;
  height: 104px;
}
.newsletter-block h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Form styling */
.newsletter-form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.newsletter-form input {
  padding: 13px 0 13px 24px;
  width: 406px;
  height: 46px;
  border: none;
  outline: none;
}

.newsletter-form button {
  padding: 13px 25px;
  border: none;
  background: #00afdb;
  color: white;
  font-size: 16px;
  cursor: pointer;
  height: 46px;
}

.newsletter-form button:hover {
  background: #0099cc;
}

/* app section */
.app-section {
  height: 464px;
  background-color: #f5f6f7;
  padding: 120px 0 180px;
}
.btn-primary.app {
  position: relative;
  padding: 0;
  width: 186px;
  display: flex;
  align-items: center;
  padding-left: 18px;
}
.btn-primary.app .app-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 59px;
  height: 46px;
  background-color: #009cc2;
  padding-top: 13px;
}
.app-section-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon-buttons-wrapper {
  display: flex;
  gap: 30px;
}
.app-section-block h2 {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #373737;
}
.app-section-block p {
  color: #4e4e4e;
  font-weight: 400;
  font-size: 14px;
  width: 480px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
}
/* footer */
.footer-wrapper {
  height: 185px;
  background-color: #000000;
  padding: 0 160px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.nav-ul-footer {
  display: flex;
}
.footer-nav-link {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  border-right: 1px solid #4e4e4e;
  padding: 0 20px;
}
footer p {
  color: #818181;
  font-size: 14px;
  font-weight: 400;
}
.last-link {
  border: none;
  padding-right: 0;
}
.first-link {
  padding-left: 0;
}
.footer-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}