/* -  Scalanova Digital Agency | scalanova.com - */

body {
   font-family: 'Montserrat', sans-serif;
   font-display: swap;
   font-size: 1rem;
   line-height: 1.5;
   height: 100%;
   margin: 0;
   background-color: #fff;
   color: #2A2A2A;
   font-weight: 400;
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: #ED1B33;
  color: #fff;
}

*, *:before, *:after {
  box-sizing: border-box;
}

h1, h2, h3, h4 {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-weight: inherit;
      font-style: inherit;
      font-size: 100%;
      font-family: inherit;
      vertical-align: baseline;
}

/* -----------------------------------------------------------------
    MISC
----------------------------------------------------------------- */

.line-grey {
      width: 100%;
      height: 1px;
      background-color: #D8D8D8;
}

.responsive--short {
      padding: 3rem 4rem;
}

.responsive--long {
      padding: 3rem 25rem;
}


/* -----------------------------------------------------------------
    HEADINGS
----------------------------------------------------------------- */

h2.default-h2 {
      width: fit-content;
      font-size: 1.2rem;
      color: #ED1B33;
      position: relative;
      line-height: 1.2rem;
      font-weight: 600;
      padding-left: 1.5rem;
}

h2.default-h2::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 1rem;
      height: 1rem;
      background-color: #000;
}

h2.footer-h2 {
      width: fit-content;
      font-size: 1.4rem;
      color: #C1C1C1;
      position: relative;
      line-height: 1.6rem;
      font-weight: 600;
      padding-left: 1.5rem;
      white-space: pre-line;
      margin-bottom: 2rem;
}

h2.footer-h2::before {
      content: "";
      position: absolute;
      top: 4px;
      left: 0;
      width: 1rem;
      height: 1rem;
      background-color: #ED1B33;
}

/* -----------------------------------------------------------------
    SECTIONS
----------------------------------------------------------------- */

section.short {
      width: 100%;
      height: auto;
      padding: 3rem 25rem;
}

section.long {
      width: 100%;
      height: auto;
      padding: 3rem 4rem;
}

/*
      Home Photos
*/

section.home-photos {
      width: 100%;
      height: 20rem;
      padding: 3rem 4 rem;
      display: flex;
}

section.home-photos div {
      overflow: hidden;
      aspect-ratio: 2/1;
      width: 33%;
      height: 100%;
}

section.home-photos div img {
      width: 100%;
      height: 100%;
      object-fit: cover;
}

/*
      Kullanım Alanları
*/

.kullanim-alanlari--wrapper {

}

.kullanim-alanlari {
      max-height: 16rem;
      margin: 0 2rem;
      aspect-ratio: 3/1.5;
      overflow: hidden;
      position: relative;
}

.kullanim-alanlari img {
      width: 100%;
      height: 100%;
      object-fit: cover;
}

.kullanim-alanlari--text {
      width: 100%;
      font-weight: 600;
      font-size: 1.3rem;
      color: #fff;
      height: fit-content;
      padding: 1.6rem;
      position: absolute;
      bottom: 0;
      text-align: center;
      background-image: linear-gradient(180deg, rgba(237,27,51,0.00) 0%, #ED1B33 100%);
      text-shadow: 0 2px 4px rgba(0,0,0,0.50);
}

/* -----------------------------------------------------------------
    HEADER
----------------------------------------------------------------- */

/*
      Home
*/

.header--home {
    width: 100%;
    height: 45vh;
    padding: 0 25rem;
    background-color: #ED1B33;
}

.header--home__inside {
      width: 100%;
      height: 100%;
      position: relative;
}

.header--home__inside img {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: auto;
}

.header--home__hero {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(0%, -50%);
      font-weight: 800;
      font-size: 1.8rem;
      color: #fff;
}

.header--home__hero span {
      white-space: pre-line;
}

.header--home__hero-button {
      background-color: #000;
      font-weight: 400;
      font-size: 1rem;
      padding: 1rem;
      width: fit-content;
      margin: 1rem 0 0 0;
}

/* -----------------------------------------------------------------
    INFO BAR (HOME)
----------------------------------------------------------------- */

/*
.info-bar--wrapper {
      width: 100%;
      height: 5rem;
}
*/
.info-bar--wrapper {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.info-bar--box {
      width: auto;
      color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.info-bar--box i {
      font-size: 3rem;
      margin-bottom: 1rem;
}

.info-bar--box_text {
      font-size: .9rem;
      text-align: center;
      white-space: pre-line;
      line-height: 1rem;
}

/* -----------------------------------------------------------------
    FOOTER
----------------------------------------------------------------- */

footer {
      width: 100%;
      height: 20rem;
      padding: 3rem 25rem;
      background: url("../imgs/bg-footer.jpg");
      background-size: cover;
      background-position: center center;
}

footer p {
      color: #FFFFFF;
}

.footer-call--wrapper {
      width: 100%;
      height: auto;
      display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 1rem;
    justify-content: flex-start;
    margin-bottom: 1rem;
}

.footer-call--wrapper input {
      font-family: inherit;
    font-weight: 400;
    font-size: 1rem;
    width: 100%;
    height: 3em;
    border-radius: 5px;
    border: none;
    padding: 1rem 1rem;
}

.footer-call--wrapper label {
      color: #fff;
      font-family: inherit;
      font-size: 1rem;
      display: inline-block;
      margin-bottom: 0.5rem;
}

.footer-call--wrapper button {
      font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    background-color: #6A956E;
    border: none;
    width: 100%;
    height: 3em;
    border-radius: 5px;
    padding: 1rem 2rem;
    line-height: 0;
    cursor: pointer;
}

/*
      Footer Copyright
*/

.after-footer--wrapper {
      width: 100%;
      height: auto;
      margin: 3rem 0;
}

.after-footer--logo_wrapper {
      width: 100%;
      height: 1.3rem;
      background-color: #D8D8D8;
      display: flex;
align-items: center;
    justify-content: center;
}

.after-footer--logo {
      width: fit-content;
      height: 100%;
      background-color: #fff;
      padding: 0 3rem;
}

.after-footer--logo img {
      width: auto;
      height: 100%;
}

.after-footer--text {
      width: 100%;
      height: auto;
      text-align: center;
      color: #858585;
      margin-top: 2rem;
}

/* -----------------------------------------------------------------
    SIKÇA SORULAN SORULAR
----------------------------------------------------------------- */

.container {
    width: 100%;
}
.accordion .accordion-item {
    border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded="true"] {
    border-bottom: 1px solid #ED1B33;
}
.accordion button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: 1em 0;
    color: #3B3B3B;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    background: 0 0;
    outline: 0;
}
.accordion button:focus,
.accordion button:hover {
    cursor: pointer;
    color: #3B3B3B;
}
.accordion button:focus::after,
.accordion button:hover::after {
    cursor: pointer;
    color: #3B3B3B;
    border: 1px solid #03b5d2;
}
.accordion button .accordion-title {
    padding: 1em 1.5em 1em 0;
    font-family: 'Montserrat', sans-serif;
}
.accordion button .icon {
    display: inline-block;
    position: absolute;
    top: 18px;
    right: 0;
    width: 22px;
    height: 22px;
}
.accordion button .icon::before {
    display: block;
    position: absolute;
    content: "";
    top: 9px;
    left: 5px;
    width: 10px;
    height: 2px;
    background: currentColor;
}
.accordion button .icon::after {
    display: block;
    position: absolute;
    content: "";
    top: 5px;
    left: 9px;
    width: 2px;
    height: 10px;
    background: currentColor;
}
.accordion button[aria-expanded="true"] {
    color: #3B3B3B;
}
.accordion button[aria-expanded="true"] .icon::after {
    width: 0;
}
.accordion button[aria-expanded="true"] + .accordion-content {
    opacity: 1;
    max-height: 30em;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    will-change: opacity, max-height;
}
.accordion .accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: opacity 0.2s linear, max-height 0.2s linear;
    transition: opacity 0.2s linear, max-height 0.2s linear;
    will-change: opacity, max-height;
}
.accordion .accordion-content p {
    font-size: 1rem;
    font-weight: 400;
    margin: 2em 0;
}

/* -----------------------------------------------------------------
    MENU
----------------------------------------------------------------- */

.menu-wrapper {
    width: 100%;
    height: auto;
    padding: 2rem 3rem;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    width: 200px;
    height: auto;
}

.menu {
    float: right;
    display: flex;
    justify-content: flex-end;
    padding: 0;
}
#menu-boxes {
    display: block;
    width: auto;
    font-weight: 400;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-right: 10px;
    text-decoration: none;
    padding: 0 12px;
    color: #2A2A2A;
    position: relative;
}
#menu-boxes:last-child {
    margin-right: 0;
}

/* -----------------------------------------------------------------
    DESKTOP FIX
----------------------------------------------------------------- */

.mobile-menu-button { display: none; }

.closebtn { display: none; }