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

@import "tailwindcss";

:root {
  font-family: "Jost", sans-serif;
  --section-title: 4rem;

  --primary-color: #ff8515;
  --secondary-color: #ee9441;
  --tertiary-color: #efa969;
  --text-color: #343434;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--primary-color);
}

.container {
  max-width: 1330px;
  padding: 0 15px;
  margin: 0 auto;
}

section {
  padding-bottom: 5.3125rem;
  background: white;
}

section:not(:last-child) {
  margin-bottom: 6.25rem;
}
/* BUTTON STYLES */
.button {
  display: block;
  color: white;
  font-weight: 500;
  background: var(--primary-color);
  transition: 0.3s;
  cursor: pointer;

  &:hover {
    background-color: var(--tertiary-color);
  }
}

.button--sm {
  padding: 10px 30px;
  border-radius: 20px;
}

.button--md {
  padding: 20px 50px;
  border-radius: 40px;
}

.button--lg {
  padding: 28px 48px;
  border-radius: 50px;
}

/* BUTTON STYLES */

.section-title {
  font-weight: bold;
  text-align: center;
  padding-top: 2rem;
}

/* animations */
.opacity-animation {
  transition: 0.3s;

  &:hover {
    opacity: 0.5;
  }
}
/* animations */

.logo {
  max-width: 290px;
  width: 100%;
}

header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background: #000000b9;
  z-index: 50;
}

.hero-section {
  background: linear-gradient(#191919a3),
    url("/assets/img/Bg/SectionBg/Herobg.png") no-repeat center/cover;
  /* height: 710px; */
  height: 90vh;
  min-height: 500px;
  margin-bottom: 0px !important;
}

.second-section {
  overflow: hidden;
  img {
    display: block;
    margin-right: -115px;
  }
}

.rotatedBox {
  position: relative;
  color: white;
  text-align: center;
  width: 66px;
  font-weight: 600;
  line-height: normal;

  z-index: 1;
  &::before {
    position: absolute;
    left: 0;
    top: 0px;
    content: "";
    width: 66px;
    height: 66px;
    rotate: -45deg;
    background-color: var(--primary-color);
    z-index: -1;
  }
}

.rotatedBox + p {
  font-weight: 300;
}

.overlay-section {
  background: url("/assets/img/Bg/SectionBg/Overlaybg.png") no-repeat
    center/cover;
}

.vector-section {
  background: url("/assets/img/Bg/SectionBg/Starbg.png") no-repeat center/cover
    white;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

.swiper-slide > div {
  padding: 15px !important;
}

.form-background {
  background: url("/assets/img/Bg/SectionBg/Contactbg.png") no-repeat
    center/cover white;
}

.rotatedBox {
  position: relative;
  color: white;
  text-align: center;
  width: 66px;
  height: 66px;
  font-weight: 600;
  line-height: normal;
  z-index: 1;
}

.rotatedBox::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 66px;
  height: 66px;
  rotate: -45deg;
  background-color: var(--primary-color);
  z-index: -1;
}

/* Responsive */
@media (max-width: 1024px) {
  /* lg altı */
  .rotatedBox {
    width: 54px;
    height: 54px;
  }
  .rotatedBox::before {
    width: 54px;
    height: 54px;
  }

  section {
    padding-bottom: 2.3125rem;
    background: white;
  }

  section:not(:last-child) {
    margin-bottom: 3 0.25rem;
  }
}

@media (max-width: 768px) {
  /* md altı */
  .rotatedBox {
    width: 42px;
    height: 42px;
  }
  .rotatedBox::before {
    width: 42px;
    height: 42px;
  }

  section {
    padding-bottom: 2.125rem;
    background: white;
  }

  section:not(:last-child) {
    margin-bottom: 2.25rem;
  }

  .hero-section {
    height: 500px;
  }
}

@media (max-width: 480px) {
  section {
    padding-bottom: 2.125rem;
    background: white;
  }

  section:not(:last-child) {
    margin-bottom: 2.25rem;
  }

  /* sm altı */
  .rotatedBox {
    width: 32px;
    height: 32px;
  }
  .rotatedBox::before {
    width: 32px;
    height: 32px;
  }
}