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

/* -----------------------------------------------  MOBİLE-FİRST (320px DEFAULT) ----------------------------------------------------- */

* {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

/* Birinci seviye başlıkların özellikleri burada belirtilmiştir. */
h1 {
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 0.72px;
  color: #ffffff;
  margin: 0 auto;
}

/* İkinci seviye başlıkların özellikleri burada belirtilmiştir. */
h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 0.72px;
  color: #2e2f42;
  margin: 0 auto;
}

/* Üçüncü seviye başlıkların özellikleri burada belirtilmiştir. */
h3 {
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.4px;
  color: #2e2f42;
  margin: 0;
}

p {
  margin: 0;
}

/* Tüm bağlantıların üzerine gelindeğindeki davranış özellikleri burada belirtilmiştir. */
a {
  cursor: pointer;
  text-decoration: none;
}

button {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.64px;
  color: #ffffff;
  background-color: #4d5ae5;
  cursor: pointer;
  border: none;
  width: 169px;
  height: 56px;
  border-radius: 4px;
  margin-top: 48px;
}

/* Header alanınının özellikleri burada belirtilmiştir. */
header {
  display: flex;
  align-items: center;
}

/* Header alanının içerisindeki içerikleri kapsayan div özellikleri burada belirtilmiştir.*/
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px;
}

.icon-menu {
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.logo-web {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 21px;
  letter-spacing: 0.54px;
  text-decoration: none;
  color: #4d5ae5;
}

.logo-studio-header {
  font-family: "Raleway", sans-serif;
  color: #2e2f42;
}

.menu-toggle-checkbox {
  display: none; /* checkbox ekranda görünmeyecek */
}

.menu-card {
  display: none; /* Başlangıçta görünmez */
  position: absolute; /* Sayfa içinde istediğin yere konumlandırabilirsin */
  top: 0;
  right: 0;
  min-height: 100vh; /* en az tam ekran kadar yüksek olsun */
  height: auto;
  max-width: 320px; /* Menü kartının genişliği sayfa kadar */
  background-color: #fff; /* Arka plan beyaz */
  z-index: 1000; /* Diğer içeriklerin üstünde olsun */
  padding: 24px; /* İçeriklere boşluk */
  border: 3px solid rgba(0, 0, 0, 0.1);
}

.menu-toggle-checkbox:checked ~ .menu-card {
  display: flex;
  flex-direction: column;
}

.menu-card .close-button {
  margin-left: auto;
  margin-bottom: 24px;
}

.menu-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0.72px;
  text-decoration: none;
  color: #2e2f42;
}

.menu-headings {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 48px;
  gap: 40px;
}

.menu-headings li:first-child .menu-title {
  color: #404bbf;
}

address ul li:first-child a {
  color: #404bbf;
}

header address {
  margin-top: auto;
  margin-bottom: 48px;
}

/* Header alanındaki address bölümünün bir div içerisine alınmasını sağlayan özellikler burada belirtilmiştir. */
header address ul {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 0;
  margin: 0;
}

/* Header alanındaki address bölümünün özellikleri burada belirtilmiştir.*/
header address ul li a {
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.32px;
  font-style: normal;
  color: #434455;
  text-decoration: none;
}

.first-section-box {
  display: flex;
  margin: 0 auto;
  width: 100%;
  height: 432px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(
      rgba(46, 47, 66, 0.7),
      rgba(46, 47, 66, 0.7)
    ),
    url(../images/backround1x.png);
}

@media (min-resolution: 2x) {
  .first-section-box {
    background-image: linear-gradient(
        rgba(46, 47, 66, 0.7),
        rgba(46, 47, 66, 0.7)
      ),
      url(../images/backround2x.png);
  }
}

@media (min-resolution: 3x) {
  .first-section-box {
    background-image: linear-gradient(
        rgba(46, 47, 66, 0.7),
        rgba(46, 47, 66, 0.7)
      ),
      url(../images/backround3x.png);
  }
}

@media (min-resolution: 4x) {
  .first-section-box {
    background-image: linear-gradient(
        rgba(46, 47, 66, 0.7),
        rgba(46, 47, 66, 0.7)
      ),
      url(../images/backround4x.png);
  }
}

.line-break {
  display: block; /* Effective Solutions for Your Business başlığı mobilde alt alta */
}

.container {
  margin: 0 auto;
  text-align: center;
}

ul {
  list-style: none;
}

.btn-order-service {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.64px;
  color: #ffffff;
  background-color: #4d5ae5;
  cursor: pointer;
  border: none;
  width: 169px;
  height: 56px;
  border-radius: 4px;
  margin-top: 48px;
}

.btn-order-service:hover,
.btn-order-service:focus {
  background-color: #404BBF;
}

/* Main alanının ikinci section bölümünü kapsayan div özellikleri burada belirtilmiştir. */
.second-section-box {
  width: 100%;
  min-height: 464px;
  display: flex;
  justify-content: center;
}

/* Main alanının ikinci section bölümündeki  elemanların çevresini saran kutucuklarının özellikleri burada belirtilmiştir. */
.second-section-list {
  width: 100%;
  margin: 120px auto;
  display: flex;
  justify-content: center;
}

/* Main alanının ikinci section bölümündeki liste özellikleri burada belirtilmiştir. */
.second-section-list ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 16px;
  margin: 0 auto;
  justify-content: center;
}

.second-section-list ul li {
  max-width: 356px;
}

/* Main alanının ikinci section bölümündeki ikon kutusunun özellikleri burada belirtilmiştir. */
.second-section-list-icon-box {
  display: none;
  width: 264px;
  height: 112px;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  background-color: #f4f4fd;
  border: 1px solid #8e8f99;
  border-radius: 4px;
}

/* Main alanındaki ikinci section içerisinde h2 başlıkları ile altındaki paragraf arasındaki boşluk özelliği burada belirtilmiştir. */
.second-section-box ul h2 {
  margin-bottom: 8px;
}

.third-section-box {
  display: flex;
  width: 100%;
  max-height: 2232px;
  align-items: center;
  justify-content: center;
  background-color: #f4f4fd;
}

.third-section-title {
  text-align: center;
  margin: 96px 0 72px 0px;
}

.team-list {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: 0;
  flex-wrap: nowrap;
  justify-content: center;
  margin-bottom: 96px;
}

.team-card-field {
  text-align: center;
  height: 428px;
  background-color: #ffffff;
  border-radius: 0px 0px 4px 4px;
  box-shadow: 0px 2px 1px 0px rgba(46, 47, 66, 0.08),
    0px 1px 1px 0px rgba(46, 47, 66, 0.16);
}

.team-card-comment {
  height: 168px;
  width: 264px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 8px;
}

/* Main alanındaki üçüncü section bölümündeki ikon listesinin özellikleri burada belirtilmiştir. */
.third-section-icon-list {
  width: 232px;
  height: 40px;
  display: flex;
  flex-direction: row;
}

/* Main alanındaki üçüncü section bölümündeki ikonların özellikleri burada belirtilmiştir. */
.icon-circle-team-card {
  width: 40px;
  height: 40px;
  background-color: #4d5ae5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Main alanındaki üçüncü section bölümündeki ikonların :hover durumundaki özellikleri burada belirtilmiştir. */
.icon-circle-team-card:hover {
  background-color: #404bbf;
}

/* Main alanındaki üçüncü section bölümündeki ikon listesini sarmalayan sırasız listenin özellikleri burada belirtilmiştir. */
.third-section-icon-list ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  justify-content: space-between;
}

/* Main alanındaki dördüncü section bölümünü çevreleyen div özellikleri burada belirtilmiştir. */
.fourth-section-box {
  display: flex;
  max-height: 2752px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin: 96px 0;
}

/* Main alanının dördüncü section bölümündeki iki listenin dikey düzlemde alt alta gelebilmesini sağlayan özellikler burada belirtilmiştir. */
.fourth-section-box section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Main alanındaki dördüncü section bölümünün başlık özellikleri burada belirtilmiştir. */
.fourth-section-title {
  text-align: center;
  margin-bottom: 72px;
}

.portfolio-field {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portfolio-list {
  list-style: none; /* baştaki noktaları kaldırır */
  margin: 0; /* tarayıcı varsayılan boşluklarını kaldır */
  padding: 0 16px; /* tarayıcı varsayılan boşluklarını kaldır */
  display: flex;
  flex-direction: column; /* alt alta diz */
  gap: 48px; /* kartlar arasında boşluk */
}

/* Main alanındaki dördüncü section bölümündeki liste kartlarını sarmalayan div özellikleri burada belirtilmiştir. */
.card {
  display: flex;
  flex-direction: column;
  width: 288px;
}

/* Main alanındaki dördüncü section bölümündeki, liste kartlarındaki resmi sarmalayan div in özellikleri burada belirtilmiştir. */
.card-image-container {
  position: relative;
  width: 288px;
  height: auto;
  overflow: hidden;
}

/* Main alanındaki dördüncü section bölümündeki, liste kartlarındaki resmi sarmalayan div in diğer özellikleri burada belirtilmiştir. */
.card-image-container img {
  display: block;
  width: 100%;
  height: auto;
}

/* Main alanındaki dördüncü section bölümündeki, liste kartlarındaki resmin içerisinde bulunan div in özellikleri burada belirtilmiştir. */
.card-overlay {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 288px;
  height: 100%;
  background-color: rgba(77, 90, 229);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: bottom 0.4s ease-in-out;
  padding: 16px;
  box-sizing: border-box;
}

/* Main alanındaki dördüncü section bölümündeki, liste kartlarındaki resmin içerisinde bulunan div in aktif olduğundaki özellikleri burada belirtilmiştir. */
.card-image-container:hover .card-overlay {
  bottom: 0;
}

/* Main alanındaki dördüncü section bölümündeki liste kartlarını sarmalayan div in aktif olduğundaki özellikleri burada belirtilmiştir. */
.card:active {
  box-shadow: 0px 2px 1px 0px rgba(46, 47, 66, 0.08),
    0px 1px 1px 0px rgba(46, 47, 66, 0.16),
    0px 1px 6px 0px rgba(46, 47, 66, 0.08);
}

/* Main alanındaki dördüncü section bölümündeki listelerin açıklama bölümünün div özellikleri burada belirtilmiştir. */
.card-comment {
  display: flex;
  width: 288px;
  height: 120px;
  text-align: left;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding-left: 16px;
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: #e7e9fc;
}

/* Footer alanındaki  WEBSTUDIO logosunun özellikleri burada belirtilmiştir. */
footer div a {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 21px;
  letter-spacing: 0.54px;
  text-decoration: none;
}

/* Footer alanının arkaplan rengi burada benlirtilmiştir. */
footer {
  background-color: #2e2f42;
}

/* Footer alanındaki paragrafın özellikleri burada belirtilmiştir. */
footer div p {
  color: #f4f4fd;
  margin-top: 16px;
}

/* Footer alanını kapsayan div özellikleri burada belirtilmiştir. */
.footer-box {
  display: flex;
  height: 664px;
  flex-direction: column;
  align-items: center;
  color: #434455;
  gap: 24px;
}

/* Footer alanınıın açıklama bölümünün özellikleri burada belirtilmiştir. */
.footer-comment {
  display: flex;
  height: 112px;
  width: 288px;
  justify-content: center;
  flex-direction: column;
  margin: 96px 0 72px 0;
}

/* Footer alanındaki sosyal medya bölümünü sarmalayan div özellikleri burada belirtilmiştir. */
.footer-social-media-field {
  display: flex;
  height: 80px;
  width: 208px;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  margin-bottom: 72px;
}

/* Footer alanındaki -Social Media- yazısının özellikleri burada belirtilmiştir. */
.footer-social-media {
  width: 100%;
  height: 24px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
  margin: 0;
}

/* Footer alanındaki Sosyal medya ikonlarını sarmalayan div özellikleri burada belirtilmiştir. */
.footer-social-media-list {
  display: flex;
  flex-direction: column;
}

/* Footer alanındaki ikonların her birinin div içerisindeki konumunu belirleyen özellikleri ve diğer özellikler burada belirtilmiştir. */
.social-media-icons {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Footer alanındaki ikonların özellikleri burada belirtilmiştir. */
.icon-circle {
  width: 40px;
  height: 40px;
  background-color: #4d5ae5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Footer alanındaki ikonların :hover durumundaki özellikleri burada belirtilmiştir. */
.icon-circle:hover {
  background-color: #31d0aa;
}

/* Main ve Footer alanlarındaki sosyal medya ikonlarının içerisindeki baz simgelerin boyut özellikleri burada belirtilmiştir. */
.icon-inner {
  width: 16px;
  height: 16px;
}

/* Footer alanının tüm içeriğini kapsayan div özellikleri burada belirtilmiştir. */
.footer-container {
  width: 100%;
  display: flex;
  height: 664px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Footer alanınındaki Subscribe alanını kapsayan div özellikleri burada belirtilmiştir. */
.footer-subscribe-field {
  display: flex;
  width: 288px;
  height: 136px;
}

/* Footer alanınındaki Subscribe başlığı ve altında bulunan input u kapsayan form alanının özellikleri burada belirtilmiştir. */
.footer-subscribe-form {
  display: flex;
  height: 100%;
  width: 100%;
  gap: 16px;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Footer alanındaki Label alanının özellikleri burada belirtilmiştir. */
.footer-subscribe-form label {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #ffffff;
}

/* Footer alanındaki Subscribe başlığının özellikleri burada belirtilmiştir. */
.footer-next-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
  margin: 0;
}

/* Footer alanındaki input girişi ve subscribe butonunu kapsayan div özellikleri burada belirtilmiştir.*/
.input-button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 96px;
  width: 100%;
  width: 288px;
  gap: 16px;
}

/* Footer alanınındaki Subscribe bölümünün içerisinde bulunan input un özellikleri burada belirtilmiştir. */
.form-input {
  height: 40px;
  width: 288px;
  border: 1px solid #ffffff;
  border-radius: 4px;
  padding-left: 16px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
  background-color: #2e2f42;
  opacity: 0.3;
  color: #f4f4fd;
  flex: 1;
}

/* Footer alanındaki input içerisindeki yazının(place holder) özellikleri burada belirtilmiştir. */
.form-input::placeholder {
  color: #ffffff;
  font-size: 12px;
}

/* Footer alanınındaki input a tıklanıldığındaki özellikleri burada belirtilmiştir. */
.form-input:focus {
  outline: none;
  box-shadow: none;
}

/* Footer alnındaki subscribe butonunun özellikleri burada belirtilmiştir. */
.subscribe-button {
  height: 40px;
  width: 165px;
  background-color: #4d5ae5;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Footer alanında bulunan subscribe butonundaki ikonun özellikleri burada belirtilmiştir. */
.subscribe-icon {
  display: inline-block;
  fill: currentColor;
  width: 24px;
  height: 24px;
}

/* WEBSTUDIO logosunun -WEB- bölümü için renklendirme */
.logo-web {
  color: #4d5ae5;
}

/* WEBSTUDIO logosunun Header alanında -STUDIO- bölümü için renklendirme */
.logo-studio-header {
  color: #2e2f42;
}

/* WEBSTUDIO logosunun Footer alanında -STUDIO- bölümü için renklendirme */
.logo-studio-footer {
  font-family: "Raleway", sans-serif;
  color: #f4f4fd;
}

/*  --------------------------  FORM ALANI BAŞLANGICI  -------------------------- */

/* Form alanını kapsayan yarı saydam alanın div özellikleri burada belirtilmiştir. */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(46, 47, 66, 0.4); /* yarı saydam arka plan */
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 16px; /* küçük ekranlarda kenara yapışmaması için */
  box-sizing: border-box;
}

/* Form alanını kapsayan div in özellikleri burada belirtilmiştir. */
.modal {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);

  width: 100%; /* ekran genişliğine uyumlu */
  max-width: 408px; /* mobil için sabit sınır */
  max-height: 90vh; /* ekran yüksekliğinin %90’ını geçmesin */

  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Form alanları modal genişliğine uyumlu olsun */
.form-field,
.comment-fields,
.feedback-box,
.input-comment {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* checkbox checked olduğunda modal açılır */
#form-toggle:checked + .modal-overlay {
  display: flex;
}

.form-toggle-checkbox {
  display: none; /* checkbox ekranda görünmeyecek */
}

.form-toggle-checkbox:checked .modal-overlay {
  display: flex;
  flex-direction: column;
}

/* Form alanındaki close butonunun konunmlandırılmasını sağlayan div in özellikleri burada belirtilmiştir. */
.button-field {
  display: flex;
  position: relative;
  width: 100%;
  height: 24px;
  padding: 0;
  justify-content: flex-end;
}

/* Form alanındaki close butonunun özellikleri burada belirtilmiştir. */
.close-button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e7e9fc;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* Close butonundaki ikunun özellikleri burada belirtilmiştir. */
.close-button svg {
  width: 8px;
  height: 8px;
  fill: #2e2f42; /* Ortadaki siyahımsı ikon */
  transition: fill cubic-bezier(0.4, 0, 0.2, 1);
}

/* Close butonunun focus ve hover durumundaki özellikleri burada belirtilmiştir. */
.close-button:hover,
.close-button:focus {
  background-color: #404bbf;
  border: none;
}

/* Close butonunun renk değişimi sırasındaki geçişi yumaşatmak amacı ile eklenen özelliktir.  */
.icon-close {
  transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Close butonunun focus ve hover durumunda içerisinde bulunan ikonun alacağı renk özellikleri burada belirtilmiştir. */
.close-button:focus,
.close-button:hover svg {
  fill: #ffffff;
}

.span-checkbox {
  color: #4d5ae5;
  text-decoration: underline;
  cursor: pointer;
}

/* Close butonundan hemen sonra gelen form başlığının özellikleri burada belirtilmiştir. */
p.modal-comment {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.32px;
  text-align: center;
  margin-top: 24px;
  margin-bottom: 16px;
}

/* İnput girişlerinin bulunduğu alanı kapsayan div in özellikleri burada belirtilmiştir. */
.form-field {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* Her bir input başlığı ve input elemanını tek tek kapsayan div in özellikleri burada belirtilmiştir.  */
.fields {
  width: 100%;
  margin-bottom: 8px;
}

/* İnput alanınlarının hemen üzerinde bulunan ufak başlıkların özellikleri burada belirtilmiştir. */
.input-title {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  line-height: 1.17;
  letter-spacing: 0.48px;
  color: #8e8f99;
  display: block;
  margin-bottom: 4px;
}

/* input alanlarının içerisindeki ikonları kapsayan ve konumlanmasına yarayan div in özellikleri burada belirtilmiştir. */
.icon-box {
  position: relative;
}

/* İnput alanlarının içerisindeki ikonların pozisyon özellikleri burada belirtilmiştir. */
.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* İnputların içerisinde bulunan ikonların focus ve active durumlarındaki renk özellikleri burada belirtilmiştir. */
.icon-box:focus-within .input-icon,
.icon-box:active .input-icon {
  fill: #4d5ae5;
}

/* İnput giriş alanılarının özellikleri burada belirtilmiştir. */
.modal-input-field {
  width: 100%;
  height: 40px;
  border: 1px solid #8e8f99;
  border-radius: 4px;
  background-color: #fcfcfc;
  padding-left: 38px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* İnput alanının focus ve active durumundaki renk özellikleri burada belirtilmiştir. */
.modal-input-field:focus,
.modal-input-field:active {
  border-color: #4d5ae5;
  outline: none;
}

/* Comment alanını kapsayan div in özellikleri burada belirtilmiştir. */
.comment-fields {
  height: 138px;
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

/* Textarea(geniş açıklama giriş alanı) alanını kapsayan div in özellikleri burada belirtilmiştir. */
.feedback-box {
  display: flex;
  flex-direction: column;
  transition: color 150ms ease-in-out;
}

/* Textarea alanının özellikleri burada belirtilmiştir */
.input-comment {
  height: 120px;
  padding: 4px;
  color: #212121;
  border: 1px solid #8e8f99;
  border-radius: 4px;
  width: 100%;
  min-height: 100px;
  resize: none;
  position: relative;
}

/* Textarea alanının focus ve active durumlarındaki renk değiştiştirme özellikleri burada belirtilmiştir. */
.input-comment:focus,
.input-comment:active {
  border-color: #4d5ae5;
  outline: none;
}

.checkbox-label {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  line-height: 1.2;
  color: #8e8f99;
  margin-bottom: 24px;
}

.checkbox-label .checkbox-text {
  display: inline-block; /* metnin kendi blok alanında kalmasını sağlayan özellikler burada belirtilmiştir. */
}

/* Form alanının sonunda bulunan Send butonunun özellikleri burada belirtilmiştir. */
.send-button {
  display: flex;
  width: 100%;
  max-width: 169px;
  height: 56px;
  cursor: pointer;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 250ms ease;
  display: block;
  margin: 0 auto;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}

header > .nav-bar > nav,
header > .nav-bar > address {
  display: none;
}

/* ----------------------------------------------- @MEDİA (768px) ------------------------------------------ */

@media (min-width: 768px) {
  header .menu-social-media-list,
  header .close-button {
    display: none;
  }

  /* Menü butonunu gizle */
  .icon-menu,
  .menu-card {
    display: contents;
  }

  .menu-toggle-checkbox:checked ~ .menu-card {
    display: contents;
    flex-direction: column;
  }

  header {
    max-height: 72px;
  }

  /* Nav-bar düzeni */
  .nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }

  /* Logo solda sabit */
  .logo-web {
    justify-self: start;
  }

  /* Menü başlıkları ortada */
  .menu-headings {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: row;
    gap: 40px;
    margin: 0;
  }

  .menu-headings li {
    margin: 0;
  }

  .menu-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
  }

  header address {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Address sağa yaslanacak */
  header address ul {
    flex-direction: column-reverse;
    gap: 12px; /* email ve telefon arası boşluk */
    margin: 0;
  }

  address ul li:first-child a {
    color: #434455;
  }

  header address ul li a {
    font-size: 14px;
    line-height: 18px;
    color: #434455;
  }

  .first-section-box {
    height: 436px;
  }

  .line-break {
    display: contents; /* Effective Solutions for Your Business başlığı mobilde alt alta */
  }

  .title-effective {
    font-size: 56px;
    line-height: 60px;
    letter-spacing: 1.12px;
  }

  /* Main alanının ikinci section bölümünü kapsayan div özellikleri burada belirtilmiştir. */
  .second-section-box {
    width: 100%;
    min-height: 504px;
    display: flex;
    justify-content: center;
  }

  /* Main alanının ikinci section bölümündeki  elemanların çevresini saran kutucuklarının özellikleri burada belirtilmiştir. */
  .second-section-list {
    width: 100%;
    min-height: 224px;
    margin: 120px auto;
    display: flex;
    justify-content: center;
  }

  /* Main alanının ikinci section bölümündeki liste özellikleri burada belirtilmiştir. */
  .second-section-list ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 sütun */
    column-gap: 24px;
    row-gap: 72px;
    padding: 0;
    margin: 0 auto;
    justify-content: center;
  }

  .second-section-list ul li {
    max-width: 356px;
    max-height: 120px;
    margin: 0;
    padding: 0;
  }

  /* Main alanının ikinci section bölümündeki ikon kutusunun özellikleri burada belirtilmiştir. */
  .second-section-list-icon-box {
    max-height: 464px;
  }

  /* Main alanındaki ikinci section içerisinde h3 başlıkları ile altındaki paragraf arasındaki boşluk özelliği burada belirtilmiştir. */
  .second-section-box h2 {
    margin-bottom: 8px;
  }

  .second-section-list li h2,
  .second-section-list li p {
    text-align: left;
  }

  .prgrf {
    font-weight: 400;
  }

  .team-list {
    display: grid;
    grid-template-columns: repeat(2, 264px);
    column-gap: 24px; /* yan yana kartlar arası boşluk */
    row-gap: 64px; /* satırlar arası boşluk */
    justify-content: center; /* tüm grid’i yatayda ortalar */
    padding: 0;
    margin-bottom: 96px;
    list-style: none;
  }

  .team-card-field {
    width: 264px;
    height: 428px;
    background-color: #ffffff;
    border-radius: 0px 0px 4px 4px;
    box-shadow: 0px 2px 1px 0px rgba(46, 47, 66, 0.08),
      0px 1px 1px 0px rgba(46, 47, 66, 0.16);
    text-align: center;
  }

  .team-card {
    width: 264px;
    height: 428px;
  }

  .card {
    width: 288px;
  }

  .card-image-container,
  .card-comment {
    width: 288px;
  }

  .portfolio-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* iki sütun */
    column-gap: 24px; /* yan yana kartlar arası boşluk */
    row-gap: 72px; /* satırlar arası boşluk */
  }

  .footer-container {
    min-width: 496px;
    max-height: 264px;
    display: grid;
    grid-template-rows: auto auto; /* 2 satır */
    justify-content: center; /* Birinci satırı ortala */
    align-items: center; /* Üstten hizala */
    column-gap: 24px; /* sütunlar arası boşluk */
    row-gap: 72px; /* satırlar arasında boşluk */
  }

  .footer-comment {
    grid-column: 1 / 2; /* 1. sütun */
    grid-row: 1 / 2; /* 1. satır */
  }

  .footer-subscribe-field {
    grid-column: 1 / 3; /* Alt satırda iki sütunu kapsasın */
    grid-row: 2 / 3; /* 2. satır */
    justify-self: center; /* Ortala */
  }

  /* Footer alanını kapsayan div özellikleri burada belirtilmiştir. */
  .footer-box {
    display: flex;
    justify-content: center;
    height: 456px;
  }

  /* Footer alanınıın açıklama bölümünün özellikleri burada belirtilmiştir. */
  .footer-comment {
    display: flex;
    height: 112px;
    width: 288px;
    margin: 0;
  }

  /* Footer alanındaki -Social Media- yazısının özellikleri burada belirtilmiştir. */
  .footer-social-media {
    display: flex;
    width: 100%;
    height: 24px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    margin: 0;
  }

  /* Footer alanındaki sosyal medya bölümünü sarmalayan div özellikleri burada belirtilmiştir. */
  .footer-social-media-field {
    display: flex;
    height: 80px;
    width: 208px;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    margin: 0;
    grid-column: 2 / 3; /* 2. sütun */
    grid-row: 1 / 2; /* 1. satır */
  }

  /* Footer alanındaki input girişi ve subscribe butonunu kapsayan div özellikleri burada belirtilmiştir.*/
  .input-button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    width: 100%;
    min-width: 288px;
    gap: 24px;
  }

  /* Footer alanınındaki Subscribe alanını kapsayan div özellikleri burada belirtilmiştir. */
  .footer-subscribe-field {
    display: flex;
    justify-self: start;
    width: 453px;
    height: 80px;
  }

  /* Footer alanınındaki Subscribe bölümünün içerisinde bulunan input un özellikleri burada belirtilmiştir. */
  .form-input {
    width: 264px;
  }
  /* Footer alanınıın açıklama bölümünün özellikleri burada belirtilmiştir. */
  .footer-comment {
    width: 264px;
    display: flex;
    text-align: left;
  }

  /* Footer alanındaki Subscribe başlığının özellikleri burada belirtilmiştir. */
  .footer-next-title {
    justify-self: start; /* grid içindeyse sola */
    align-self: start; /* dikeyde yukarı */
  }
}

/* ----------------------------------------------- @MEDİA (1440px) ------------------------------------------ */

@media (min-width: 1440px) {
  /* Nav-bar düzeni */
  .nav-bar {
    display: flex;
    padding: 24px 156px;
  }

  /* Logo solda sabit */
  .logo-web {
    margin-right: 72px; /* Logo ile başlıklar arası boşluk */
  }

  /* Menü başlıkları ortada */
  .menu-headings {
    display: flex;
    position: static; /* absolute etkisini kaldırır */
    transform: none; /* eski translate etkisini sıfırlar */
  }

  header address {
    display: flex; /* adres flex olsun */
    margin-left: auto; /* tüm boşluğu önceki elemanların arkasına it */
  }

  /* Address sağa yaslanacak */
  header address ul {
    flex-direction: row;
    gap: 40px; /* email ve telefon arası boşluk */
    justify-content: flex-end;
  }
  .first-section-box {
    height: 600px;
  }

  /* Main alanının ikinci section bölümünü kapsayan div özellikleri burada belirtilmiştir. */
  .second-section-box {
    min-height: 464px;
  }

  /* Main alanının ikinci section bölümündeki  elemanların çevresini saran kutucuklarının özellikleri burada belirtilmiştir. */
  .second-section-list {
    width: 100%;
    height: 224px;
    margin: 120px auto;
    display: flex;
    justify-content: center;
  }

  .second-section-list ul {
    display: flex; /* grid yerine flex kullanıyoruz */
    flex-direction: row; /* yan yana sıralansın */
    justify-content: space-between; /* eşit aralık bırak */
    align-items: flex-start; /* üstte hizalanmasını sağlar */
    gap: 24px; /* istenirse aralığı kontrol et */
    margin: 0 auto;
  }

  .second-section-list ul li {
    max-width: 264px; /* her bir eleman genişliği */
    max-height: none; /* yüksekliği kaldırıyoruz, satırın dikey esnekliğini koru */
  }

  /* Main alanının ikinci section bölümündeki ikon kutusunun özellikleri burada belirtilmiştir. */
  .second-section-list-icon-box {
    display: flex;
  }

  .team-list {
    display: flex;
    flex-direction: row;
    justify-content: center; /* tüm grid’i yatayda ortalar */
    padding: 0;
    margin-bottom: 120px;
    list-style: none;
  }

  .third-section-title {
    text-align: center;
    margin: 120px 0 72px 0px;
  }

  /* Main alanındaki dördüncü section bölümünü çevreleyen div özellikleri burada belirtilmiştir. */
  .fourth-section-box {
    margin: 120px 0;
  }

  .portfolio-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* tablette iki sütun */
    column-gap: 24px; /* yan yana kartlar arası boşluk */
    row-gap: 72px; /* satırlar arası boşluk */
  }

  .footer-container {
    min-width: 1125px;
    max-height: 112px;
    display: flex;
    flex-direction: row;
    align-items: center; /* Üstten hizala */
    justify-content: center;
    gap: 0;
  }

  /* Footer alanını kapsayan div özellikleri burada belirtilmiştir. */
  .footer-box {
    display: flex;
    justify-content: center;
    height: 312px;
  }

  /* Footer alanındaki input girişi ve subscribe butonunu kapsayan div özellikleri burada belirtilmiştir.*/
  .input-button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    width: 100%;
    min-width: 288px;
    gap: 24px;
  }
  /* Footer alanınındaki Subscribe alanını kapsayan div özellikleri burada belirtilmiştir. */
  .footer-subscribe-field {
    display: flex;
    justify-self: start;
    width: 453px;
    height: 80px;
  }

  /* Footer alanındaki sosyal medya bölümünü sarmalayan div özellikleri burada belirtilmiştir. */
  .footer-social-media-field {
    margin-right: 80px;
  }

  /* Footer alanınındaki Subscribe bölümünün içerisinde bulunan input un özellikleri burada belirtilmiştir. */
  .form-input {
    width: 264px;
  }
  /* Footer alanınıın açıklama bölümünün özellikleri burada belirtilmiştir. */
  .footer-comment {
    margin-right: 120px;
    width: 264px;
  }

  /* Footer alanındaki Subscribe başlığının özellikleri burada belirtilmiştir. */
  .footer-next-title {
    justify-self: start; /* grid içindeyse sola */
    align-self: start; /* dikeyde yukarı */
  }
}