* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Inter, "sans-serif";
  font-weight: 400;
  font-size: 1.6rem;
  color: #fff;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

/***************************/
/* REUSABLE CLASSES */
/***************************/

.corporate-img--container {
  max-width: 100%;
  position: relative;
}

.hero-img {
  width: 100%;
  height: 56rem;
  object-fit: cover;
}

.hero-container {
  position: absolute;
  max-width: 68rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  height: auto;
  left: 10.2%;
  top: 50%;
  transform: translateY(-50%);
}

.hero-tertiary--text {
  font-weight: 600;
}

.hero-primary--text {
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.27;
}

.quality-container {
  max-width: 114.4rem;
  margin: 0 auto;
  color: #0a3461;
}

.grid-container {
  display: grid;
  line-height: 1.5;
}

.grid-3--cols {
  grid-template-columns: repeat(3, 1fr);
  gap: 10rem;
}

.grid-5--cols {
  grid-template-columns: repeat(5, 1fr);
  column-gap: 4.4rem;
  padding: 8rem 0;
}

.clip-container {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.clip-img--white,
.clip-img--blue {
  width: 4rem;
  height: 4rem;
  transform: rotate(45deg);
  display: flex;
}

.clip-img--blue {
  color: #005bbb;
}

.clip-img--white {
  color: #fff;
}

.el--1,
.el--2 {
  grid-column: span 2;
}

.consultant-section {
  padding: 8rem 0;
  color: #0a3461;
  text-align: center;
  line-height: 1.5;
  max-width: 114.4rem;
  margin: 0 auto;
}

.bg-color,
.hp-bg--color {
  background-color: #f7f8f9;
  width: 100%;
}

.hp-bg--color {
  background-color: #f7f8f9;
}

.consultant-heading {
  font-size: 2.4rem;
  font-weight: 600;
}

.tertiary-text {
  padding: 2.4rem 0 3.2rem;
}

.consultant-container,
.ref-consultant--container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  color: #0a3461;
  font-weight: 600;
  column-gap: 6.4rem;
  max-width: 69rem;
  margin: 0 auto;
}

.ref-consultant--container {
  max-width: 114.4rem;
  margin: 6.4rem auto;
}

.consultant-btn {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  background-color: #005bbb;
  padding: 0.8rem 1.6rem;
  border-radius: 0.4rem;
  margin-top: 4.8rem;
}

.flex-clip--container {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.consultant-text {
  text-align: left;
  font-weight: 600;
}

.sector-service--section {
  padding: 8rem 0;
}

.service-heading {
  color: #0a3461;
  max-width: 114.4rem;
  margin: 0 auto 4rem;
  font-size: 2.8rem;
  font-weight: 600;
}

.card-container {
  max-width: 114.4rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.6rem;
}

.card-1,
.card-2,
.card-3,
.card-4 {
  max-width: 100%;
  height: auto;
  border-radius: 0.8rem;
}

.card-1 {
  background-color: #9bacba;
}

.card-2 {
  background-color: #19381a;
}

.card-3 {
  background-color: #003c61;
}

.card-4 {
  background-color: #2c3945;
}

.card-img {
  display: block;
  width: 100%;
  min-height: 27.4rem;
  object-fit: cover;
  border-radius: 0.8rem 0.8rem 0 0;
  transition: all 0.3s ease-in-out;
}

.card-img:hover {
  transform: scale(1.1);
}

.card-description {
  padding: 2.4rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.card-tag {
  font-size: 1.2rem;
  font-weight: 600;
}

.card-service {
  font-size: 2.8rem;
  font-weight: 700;
}

.card-text {
  font-size: 1.4rem;
  line-height: 1.6;
}

.card-link {
  text-decoration: none;
  color: #fff;
}

.gallery-section {
  max-width: 114.4rem;
  margin: 0 auto;
  grid-template-columns: 0.9fr 1fr 1.1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 10rem;
  color: #0a3461;
  padding: 8rem 0;
}

.gallery-primary--text {
  font-size: 2.4rem;
  font-weight: 600;
  grid-row: span 2;
}

.gallery-img {
  max-width: 100%;
  height: auto;
  grid-row: span 2;
}

.gallery-text--container {
  align-self: end;
  line-height: 1.4;
  max-width: 33.2rem;
}

.btn-container {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-top: 2.4rem;
  grid-column: 3/4;
  align-self: first baseline;
  justify-self: center;
}

.gallery-btn,
.catalog-btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0.4rem;
  padding: 0.8rem 1.6rem;
}

.gallery-btn {
  color: #fff;
  background-color: #005bbb;
}

.catalog-btn {
  color: #005bbb;
  border: 0.2rem solid #005bbb;
  padding: 0.6rem 1.6rem;
}

.container {
  max-width: 144rem;
  margin: 0 auto;
}

.grid-4--container {
  grid-template-columns: repeat(4, 1fr);
}

.clip-heading {
  font-size: 1.6rem;
  font-weight: 600;
  padding: 2rem 0 0.8rem;
}

.corporate-value--container {
  grid-template-columns: repeat(4, 1fr);
  column-gap: 6.4rem;
  max-width: 114.4rem;
  margin: 0 auto;
}

.service-details {
  grid-template-columns: repeat(4, 1fr);
  padding: 8rem 0;
}

.text-corporate {
  color: #0a3461;
  font-size: 2.4rem;
  line-height: 1.4;
  max-width: 114.5rem;
  margin: 8rem auto;
}
/*********************************/
/* HEADER & NAVIGATION SECTION */
/*********************************/

.top-bar {
  height: 2.4rem;
  background-color: #005bbb;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 9.3rem;
  padding: 0 14.8rem;
  background-color: #fff;
  color: #0a3461;
  border-bottom: 0.1rem solid #f1f2f4;
}

.main-nav {
  display: flex;
  gap: 3.2rem;
}

.main-nav--list {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  list-style: none;
  position: relative;
}

.main-nav--link {
  text-decoration: none;
  color: #0a3461;
  font-weight: 600;
}

.main-nav--link.active,
.submenu-nav--link.active,
.contact-btn.active {
  color: #005bbb;
}

.contact-btn.active {
  background: transparent;
  border: 0.2rem solid #005bbb;
  color: #005bbb;
}

.main-nav--link:hover .arrow {
  transform: rotate(180deg);
}

.align:hover .submenu-nav {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
}

.dropdown {
  border: none;
  background: none;
  color: #0a3461;
}

.submenu-nav {
  display: none;
  position: absolute;
  width: 18rem;
  background-color: #fff;
  top: 100%;
  left: 0;
  font-weight: 500;
  z-index: 1;
  padding: 0.8rem 0;
}

.submenu-nav--list {
  width: 100%;
  position: relative;
}

.submenu-nav--link {
  display: block;
  padding: 0.8rem 2rem;
  text-decoration: none;
  color: #fff;
}

.submenu-nav--list {
  list-style: none;
  text-decoration: none;
}

.submenu-nav--list:hover {
  background-color: #0a3461;
}

.submenu-nav--link {
  text-decoration: none;
  color: #0a3461;
}

.submenu-nav--link:hover {
  color: #fff;
}

.arrow-down {
  display: block;
  transition: transform 0.3s ease;
  width: 2rem;
  height: 2rem;
}

.align-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.main-nav--list li.align {
  display: flex;
  align-items: center;
  position: relative;
}

.logo {
  max-width: 12.3rem;
  height: 4.5rem;
}

.contact-btn {
  text-decoration: none;
  color: #fff;
  background-color: #005bbb;
  border-radius: 0.4rem;
  padding: 0.8rem 1.6rem;
}

.mobile-nav--btn {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}

.mobile-nav--icon {
  width: 4.8rem;
  height: 4.8rem;
  color: #fff;
  background-color: #005bbb;
  border-radius: 0.4rem;
}

.mobile-nav--icon[name="close-outline"] {
  display: none;
}

/***************************/
/* HERO SECTION */
/***************************/

.hero-section {
  width: 100%;
  min-height: auto;
  margin: 0 auto;
  background: radial-gradient(
      circle at 10% 10%,
      rgba(0, 102, 255, 0.5),
      transparent 40%
    ),
    radial-gradient(circle at 90% 90%, rgba(0, 102, 255, 0.6), transparent 50%),
    radial-gradient(circle at 30% 60%, rgba(0, 51, 204, 0.3), transparent 40%),
    #020b18;
  background-size: cover;
  background-position: center;
}

.hero-section--container {
  max-width: 114.4rem;
  padding: 11.2rem 0;
  margin: 0 auto;
}

.heading-text {
  max-width: 68rem;
  padding-bottom: 6.4rem;
}

.tag {
  display: inline-block;
  color: #005bbb;
  font-weight: 900;
  text-transform: uppercase;
  background-color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;
}

.heading {
  font-size: 4.8rem;
  font-weight: 700;
  padding: 1.2rem 0;
}

.subtext {
  color: #e6eff8;
  font-weight: 600;
  line-height: 1.5;
}

.know-us {
  display: grid;
  grid-template-columns: 1.5fr 0.5fr;
  column-gap: 53.7rem;
  align-items: center;
  background-color: #005bbb;
  height: 7.5rem;
  padding: 0 2rem;
  border-radius: 0.8rem;
  margin-bottom: 8rem;
}

.know-us--text {
  color: #fff;
}

.hero-img-sty,
.hero-img-wider,
.hero-img-sty1 {
  border-radius: 0.8rem;
  width: 100%;
  height: 29.8rem;
  object-fit: cover;
}

.hero-img-sty1 {
  max-width: 21.6rem;
  height: 29.8rem;
}

.tag-1 {
  display: inline-block;
  color: #005bbb;
  background-color: #fff;
  padding: 0.8rem 1.6rem;
  text-decoration: none;
  text-align: center;
  border-radius: 0.4rem;
  max-width: 12.5rem;
}

.hero-img--container {
  max-width: 100%;
  display: grid;
  grid-template-columns: 0.6fr 0.6fr 1.2fr 0.6fr;
  column-gap: 1.6rem;
}

/***************************/
/* SERVICE SECTION */
/***************************/

.service-section {
  max-width: 114.4rem;
  margin: 0 auto 6.4rem;
  color: #0a3461;
}

.border-top,
.border-top--stretch {
  border-top: 0.1rem solid #e6eff8;
  width: 13rem;
}

.service-details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 6.4rem;
  line-height: 1.5;
  padding: 8rem 0;
}

.tertiary-title {
  font-size: 2.8rem;
  font-weight: 600;
  padding-bottom: 4rem;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  color: #fff;
  column-gap: 1.6rem;
}

.service-card--1,
.service-card--2,
.service-card--3,
.service-card--4 {
  max-width: 27.4rem;
  height: auto;
  border-radius: 0.8rem;
  overflow: hidden;
}

.service-card--grey,
.service-card--green,
.service-card--crayola,
.service-card--blue {
  padding: 2.4rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.service-card--1 {
  background-color: #9bacba;
}

.service-card--2 {
  background-color: #19381a;
}

.service-card--3 {
  background-color: #003c61;
}

.service-card--4 {
  background-color: #2c3945;
}

.service-img--container {
  overflow: hidden;
}

.service-img {
  display: block;
  max-width: 100%;
  height: 32.3rem;
  object-fit: cover;
  border-radius: 0.8rem 0.8rem 0 0;
  transition: all 0.4s;
}

.service-img:hover {
  transform: scale(1.05);
}

.service-tag {
  font-size: 1.2rem;
  font-weight: 600;
  padding-bottom: 1.6rem;
}

.service-card--description {
  font-size: 1.4rem;
  line-height: 1.5;
}

.service-title {
  font-size: 2.8rem;
  font-weight: 700;
}

/***************************/
/* DEALERSHIP SECTION */
/***************************/

.dealership-section,
.dealership-section--main {
  padding: 4.8rem 0;
  background-color: #f1f2f4;
  width: 100%;
}

.dealership-text {
  color: #0a3461;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  padding-bottom: 3.2rem;
}

.dealership-img {
  max-width: 100%;
  height: 11.2rem;
  object-fit: cover;
  border-radius: 0.8rem;
  background-color: #fff;
}

.dealership-img--lng {
  width: 100%;
  height: 11.2rem;
  object-fit: contain;
  border-radius: 0.8rem;
  background-color: #fff;
}

.dealership-container,
.dealership-container--main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 0.8rem;
  column-gap: 0.8rem;
  max-width: 114.4rem;
  margin: 0 auto;
}

.banner-section {
  margin: 8rem auto;
}

.referans-img--section {
  max-width: 114.4rem;
  margin: 0 auto 8rem;
}

.ref-img--heading {
  font-size: 2.8rem;
  font-weight: 600;
  color: #0a3461;
  padding-bottom: 4rem;
}

.ref-img--container {
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.6rem;
  row-gap: 1.6rem;
}

.ref-img {
  border-radius: 0.8rem;
  max-width: 100%;
}

.ref-btn {
  text-decoration: none;
  color: #fff;
  background-color: #005bbb;
  border-radius: 0.8rem;
  position: relative;
}

.absol {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/***************************/
/* CONSULTANT SECTION */
/***************************/

.consultant-heading {
  font-size: 2.4rem;
  font-weight: 600;
}

.tertiary-text {
  padding: 2.4rem 0 5.6rem;
}

.paint-img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  margin-bottom: 2rem;
}

.consult-btn {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  background-color: #005bbb;
  padding: 0.8rem 1.6rem;
  border-radius: 0.4rem;
  margin-top: 4.8rem;
}

.consult-text {
  text-align: left;
  font-weight: 600;
  padding-top: 2.4rem;
}

/***************************/
/* FOOTER SECTION */
/***************************/

.footer-section {
  max-width: 100%;
  color: #0a3461;
  background-color: #f1f2f4;
  padding: 8rem 0 4rem;
}

.footer-container {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1.2fr 0.8fr;
  max-width: 114.4rem;
  margin: 0 auto;
  padding-bottom: 16rem;
}

.footer-heading {
  color: #8590a2;
  font-size: 1.2rem;
  font-weight: 600;
  padding-bottom: 3.2rem;
}

.footer-service--container {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  list-style: none;
  font-weight: 600;
  font-size: 1.4rem;
}

.footer-nav--links {
  text-decoration: none;
  color: #0a3461;
}

.contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-weight: 600;
  text-wrap: nowrap;
}

.contact-number,
.office-location {
  display: block;
  margin-top: 0.8rem;
  font-weight: 400;
}

.office-location {
  font-size: 1.4rem;
}

.footer-content {
  max-width: 114.4rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.office-details a {
  color: #0a3461;
  text-decoration: none;
}

.social-icon {
  font-size: 2.8rem;
  color: #212529;
}

.footer-mail {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.email-text {
  font-size: 1.4rem;
  font-weight: 500;
  color: #0a3461;
  text-decoration: none;
}

.copyright {
  font-size: 1.2rem;
}

/***************************/
/* CORPORATE SECTION */
/***************************/

.corporate-hero-section {
  position: relative;
  min-height: 90.3rem;
  background: radial-gradient(
      circle at 15% 15%,
      rgba(0, 115, 255, 0.5) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 85% 85%,
      rgba(0, 102, 255, 0.4) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 30% 60%,
      rgba(0, 80, 200, 0.25) 0%,
      transparent 40%
    ),
    #0044aa;
  overflow: visible;
}

.kurumsal-about--container {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}

.kurumsal-container {
  max-width: 100%;
  height: 94.3rem;
  margin: 0 auto 21.3rem;
}

.corporate-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14.3rem;
  max-width: 114.4rem;
  margin: 0 auto;
}

.corporate-container--img {
  position: relative;
}

.corp-img {
  display: block;
  width: 55.3rem;
  min-height: 64rem;
  margin-top: 4rem;
  object-fit: fill;
}

.mini-contribution--container {
  display: block;
}

.corporate-container--text p {
  max-width: 44.8rem;
  line-height: 1.3;
  font-size: 2.4rem;
  font-weight: 500;
  padding-top: 4rem;
}

.corporate-heading {
  font-size: 6.4rem;
  font-weight: 700;
  line-height: 1.2;
  padding-left: 11.2rem;
}

.secondary-corporate--container {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  padding-top: 10rem;
  max-width: 114.4rem;
  margin: 0 auto 3.2rem;
}

.secondary-corporate--text {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.border {
  align-self: flex-start;
}

.about-history {
  color: #0a3461;
  max-width: 114.4rem;
  margin: 0 auto;
  padding: 8rem 0 5.6rem;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  column-gap: 13.2rem;
}

.about-history--container {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.about-history--heading {
  font-size: 2.8rem;
  font-weight: 700;
}

.about-history--text {
  font-weight: 500;
  line-height: 1.5;
}

.about-grid--contain {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  color: #0a3461;
  max-width: 114.5rem;
  margin: 0 auto 8rem;
}

.mini-container--subtext {
  color: #758195;
  padding-bottom: 1.6rem;
}

.mini-container-primary--text {
  font-size: 3.2rem;
  line-height: 1.3;
}

.contribution-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 6.4rem;
}

.contribution-heading {
  font-size: 2.8rem;
  font-weight: 700;
}

.secondary-text {
  padding-top: 1.2rem;
  line-height: 1.5;
}

.value-section {
  max-width: 100%;
  margin: 0 auto;
}

.background-container {
  background-color: #005bbb;
  color: #fff;
  padding: 8rem 14.8rem;
}

.grid-heading {
  padding: 2.4rem 0 0.8rem;
}

.corporate-value--heading {
  font-size: 2.8rem;
  font-weight: 600;
  max-width: 114.4rem;
  margin: 0 auto;
  padding-bottom: 6.4rem;
}

.corporate-value--subheading {
  font-size: 1.6rem;
  font-weight: 600;
  padding-top: 2rem;
}

.banner-container {
  background-color: #005bbb;
  color: #fff;
  max-width: 114.4rem;
  margin: 0 auto;
  padding: 8rem;
  border-radius: 0.8rem;
}

.banner-primary--text,
.banner-secondary--text {
  font-size: 4.8rem;
  font-weight: 600;
}

.banner-secondary--text {
  line-height: 1.5;
  font-size: 1.6rem;
  font-weight: 600;
}

.banner-flex {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  justify-items: end;
  padding-top: 1.2rem;
}

.banner-btn {
  display: inline-block;
  background-color: #fff;
  color: #005bbb;
  font-weight: 600;
  padding: 0.8rem 1.6rem;
  text-decoration: none;
  border-radius: 0.4rem;
  max-width: 23.4rem;
  text-align: center;
}

/***************************/
/* REFERANS PAGE */
/***************************/

.referans-section {
  max-width: 144rem;
  margin: 0 auto;
  padding: 6.4rem 0 0;
}

.referans-section .ref-img--heading {
  padding-bottom: 0;
}

.img-section {
  width: 144rem;
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

.ref-grid--container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.6rem;
  row-gap: 1.6rem;
  max-width: 137.6rem;
  margin: 0 auto;
}

.ref-grid--img,
.ref-grid--img--ship {
  width: 100%;
  height: 33.6rem;
  object-fit: cover;
  border-radius: 0.8rem;
}

.contact-section {
  margin: 0 auto;
  color: #0a3461;
}

.text-container {
  max-width: 96rem;
  margin: 0 auto;
  text-align: center;
  padding: 6.4rem 0;
  line-height: 1.5;
}

.ref-section {
  margin-bottom: 8rem;
}

.text-container--heading {
  font-size: 2.8rem;
  font-weight: 700;
  padding-bottom: 2rem;
  text-align: center;
}

.ref-gallery--imgs {
  max-width: 136.8rem;
  height: auto;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.2rem;
}

.ref-gallery--imgs img {
  width: 44.8rem;
  height: 33.6rem;
  border-radius: 0.8rem;
  object-fit: cover;
}

.pagination-section {
  max-width: 137.8rem;
  margin: 0 auto;
}

.slider-container {
  display: grid;
  max-width: 100%;
  height: auto;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.6rem;
  overflow: hidden;
}

.slider-container img {
  max-width: 100%;
  height: 33.6rem;
  border-radius: 0.8rem;
  object-fit: cover;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: end;
  margin: 8rem 0;
  gap: 0.8rem;
}

.pagination button,
.pagination span {
  color: #091e42;
  background: #f7f8f9;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  border: none;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination .active {
  border: none;
  background: none;
}

.location-cards {
  display: flex;
  gap: 1.6rem;
  margin-bottom: 3.2rem;
}

.card {
  border-radius: 0.8rem;
  padding: 3.2rem;
  background-color: #fff;
  width: 100%;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.card.active {
  background-color: #005bbb;
  color: #fff;
}

#map {
  max-width: 100%;
  height: 44.9rem;
  border-radius: 0.8rem;
}

.contact-bg {
  background-color: #f7f8f9;
  width: 100%;
  padding: 6.4rem 14.8rem;
}

.location-icon--container {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding-bottom: 2.4rem;
}

.location-icon {
  width: 2.4rem;
  height: 2.4rem;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/***************************/
/* FORM SECTION */
/***************************/

.form-section {
  color: #0a3461;
  max-width: 68rem;
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 1.2rem;
}

.toggle-btns {
  display: flex;
  margin-bottom: 2.4rem;
  gap: 1.2rem;
}

.sahis-btn,
.firm-btn {
  color: #0a3461;
  font-size: 1.4rem;
  font-weight: 500;
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 0.4rem;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-btns button.active {
  background: #f7f8f9;
  color: #0a3461;
  border: 0.2rem solid #0a3461;
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.form {
  display: none;
  text-align: left;
  border-radius: 0.8rem;
  width: 100%;
  margin: 0 auto;
}

.form.active {
  display: block;
}

#sirketForm {
  max-width: 68rem;
}

#sahis-form {
  max-width: 44.8rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.2rem;
  margin-bottom: 2rem;
}

.form-details {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}

.form-text {
  color: #0a3461;
  font-size: 1.4rem;
  font-weight: 600;
}

.form-input,
.form-area {
  font-size: 1.4rem;
  width: 100%;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 0.4rem;
  background-color: #f7f8f9;
  font-family: inherit;
  margin-top: 0.8rem;
  transition: background 0.2s;
}

.form-area {
  margin-bottom: 2.4rem;
}

.form-input:focus,
.form-area:focus {
  outline: 0.2rem solid #ff3b30;
  background-color: #eef4fa;
}

.submit-btn {
  padding: 1.2rem 2.4rem;
  background: #005bbb;
  color: #fff;
  border: none;
  border-radius: 0.4rem;
  font-weight: 600;
  cursor: pointer;
  width: 9rem;
  margin: 2.4rem auto 0;
  display: block;
  transition: background 0.3s;
  /* justify-self: center;
  align-self: center; */
}

.submit-btn:hover {
  background-color: #004799;
}

.form-heading {
  font-size: 2.8rem;
  padding-bottom: 4rem;
  font-weight: 700;
  text-align: center;
}

.contact-border {
  width: 13rem;
  border: 0.1rem solid #e6eff8;
}

.hidden {
  display: none;
}

.form-message {
  display: none;
  margin-top: 2rem;
  text-align: left;
  font-size: 1.6rem;
  font-weight: 500;
  color: #0a3461;
}

.form-message.success {
  display: block;
}

.form-message.error {
  display: block;
  color: #d93025;
}