@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");

body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
  background-color: #fcfcfc;
}

.container {
  width: 1440px;
  margin: 0 auto;
}

/* Header bölümünün konumlandırma özellikleri burada belirtilmiştir. */
header {
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
}

/* Header bölümündeki WEBSTUDIO logosunun özellikleri burada belirtilmiştir. */
header > div > a {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 21px;
  letter-spacing: 0.54px;
  text-decoration: none;
}

/* Header bölümünün navigation alanındaki -Studio Portfolyo Contacts- bölümünün konumlandırma özellikleri burada belirtilmiştir. */
header div nav ul {
  display: flex;
  gap: 40px;
}

/* Header bölümünün navigation alanındaki -Studio Portfolyo Contacts- bölümünün özellikleri burada belirtilmiştir. */
header div nav ul li a {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
  color: #2e2f42;
  text-decoration: none;
}

/* Header bölümünün navigation alanındaki -Studio Portfolyo Contacts- öğelerinin üzerine gelindiğinde renkli olmasını sağlayan özellikler burada belirtilmiştir.
Burada ( a ) etiketine -Focus- özelliği eklenmedi, çünkü tıklandığında aynı sayfada olduğu için butonda, tıklanıldığında 
alması istenilen renkte takılı kalıyor. */
header div nav ul li a:hover {
  color: #4d5ae5;
  text-decoration: none;
}

/* Header bölümünün ilk elemanının üzerine tıklandığında altında renkli bir çizgi belirmesini sağlayan özellikler burada belirtilmiştir. */
header div nav ul li:first-child > a:active {
  text-decoration: underline;
  color: #4d5ae5;
}

/* 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;
  gap: 40px;
}

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

/* Header alanınındaki address bölümünün üzerine gelindiğinde renk değiştirmesini sağlayan özellikler burada belirtilmiştir.
Burada ( a ) etiketine -Focus- özelliği eklenmedi, çünkü tıklandığında aynı sayfada olduğu için butonda, tıklanıldığında 
alması istenilen renkte takılı kalıyor. */
header > address > ul > li > a:hover {
  color: #4d5ae5;
}

/* Header alanının dikey düzlemde ortalanmasını sağlayan özellikler burada belirtilmiştir. */
header .nav-bar {
  display: flex;
  align-items: center;
  gap: 76px;
}

/* 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;
}

p {
  margin: 0;
}

/* Birinci seviye başlıkların özellikleri burada belirtilmiştir. */
h1 {
  font-weight: 700;
  font-size: 56px;
  line-height: 60px;
  letter-spacing: 1.12px;
  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;
}

/* Birinci section alanındaki butonun özellikleri burada belirtilmiştir. */
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;
}

/* Birinci section alanındaki butonun üzerine gelindiğinde renk değiştirme özelliği burada belirtilmiştir.
Burada ( button ) etiketine -Focus- özelliği eklenmedi, çünkü tıklandığında aynı sayfada olduğu için butonda, tıklanıldığında 
alması istenilen renkte takılı kalıyor. */
button:hover {
  background-color: #404bbf;
}

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

/* 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 {
  color: #f4f4fd;
}

/* Tüm listelerin başlarındaki noktaların kaldırılmasını sağlayan özellik burada belirtilmiştir. */
ul {
  list-style: none;
}

/* Main alanının ilk section bölümünü kapsayan div özellikleri burada belirtilmiştir. */
.first-section-box {
  display: flex;
  height: 600px;
  background-image: linear-gradient(
      rgba(46, 47, 66, 0.7),
      rgba(46, 47, 66, 0.7)
    ),
    url(../images/people-office.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  align-items: center;
  justify-content: center;
}

/* Main alanının ilk section bölümünün özellikleri burada belirtilmiştir.*/
.first-section-box .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Main alanının ikinci section bölümünü kapsayan div özellikleri burada belirtilmiştir. */
.second-section-box {
  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: 1128px;
  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 {
  display: flex;
  gap: 24px;
  padding: 0;
  margin: 0;
}

/* Main alanının ikinci section bölümündeki ikon kutusunun özellikleri burada belirtilmiştir. */
.second-section-list-icon-box {
  display: flex;
  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 h3 başlıkları ile altındaki paragraf arasındaki boşluk özelliği burada belirtilmiştir. */
.second-section-box section ul h3 {
  margin-bottom: 8px;
}

/* Main alanındaki üçüncü section bölümünü kapsayan div özellikleri burada belirtilmiştir. */
.third-section-box {
  display: flex;
  height: 780px;
  align-items: center;
  justify-content: center;
  background-color: #f4f4fd;
  margin-bottom: 120px;
}

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

/* Main alanındaki üçüncü section bölümünün liste özellikleri burada belirtilmiştir. */
.team-list {
  display: flex;
  height: 428px;
  width: max-content;
  gap: 32px;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

/* Main alanındaki üçüncü section bölümünün karlarının özellikleri burada belirtilmiştir. */
.team-card {
  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);
}

/* Main alanındaki üçüncü section bölümünün karlarının altında bulunan açıklama bölümünün özellikleri burada belirtilmiştir. */
.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;
  width: 1128px;
  height: 1000px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 120px;
}

/* 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;
}

/* Main alanındaki dördüncü section bölümündeki ilk listenin özellikleri burada belirtilmiştir. */
.list-one {
  display: flex;
  height: 420px;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin-top: 0;
  margin-bottom: 48px;
}

/* Main alanındaki dördüncü section bölümündeki ikinci listenin özellikleri burada belirtilmiştir. */
.list-two {
  display: flex;
  height: 420px;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* 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;
}

/* 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: 360px;
  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: 100%;
  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: 360px;
  height: 120px;
  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ını kapsayan div özellikleri burada belirtilmiştir. */
.footer-box {
  display: flex;
  height: 312px;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  color: #434455;
  gap: 120px;
}

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

/* 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-left: 120px;
}

/* Footer alanındaki -Social Media- yazısının özellikleri burada belirtilmiştir. */
.footer-social-media {
  width: 96px;
  height: 24px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
  text-align: start;
  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 {
  display: flex;
}

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

/* 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: 80px;
  width: 264px;
  flex-direction: column;
  justify-content: space-between;
  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 {
  height: 40px;
  width: 453px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Footer alanınındaki Subscribe bölümünün içerisinde bulunan input un özellikleri burada belirtilmiştir. */
.form-input {
  height: 40px;
  width: 264px;
  border: 1px solid #ffffff;
  border-radius: 4px;
  padding-left: 16px;
  background-color: #2e2f42;
  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;
}

/*  --------------------------  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: 100vw;
  height: 100vh;
  background-color: rgba(46, 47, 66, 0.4); /* yarı saydam arka plan */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

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

/* 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 {
  width: 360px;
  height: 446px;
  display: flex;
  flex-direction: column;
}

/* Her bir input başlığı ve input elemanını tek tek kapsayan div in özellikleri burada belirtilmiştir.  */
.fields {
  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 {
  width: 360px;
  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;
  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 alanınındaki açıklamanın özellikleri burada belirtilmiştir. */
.checkbox-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  gap: 8px;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  line-height: 1.17;
  letter-spacing: 0.48px;
  color: #8e8f99;
  margin-bottom: 24px;
}

/* Form alanının sonunda bulunan Send butonunun özellikleri burada belirtilmiştir. */
.send-button {
  display: flex;
  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);
}