/*
Theme Name: Belkolor
Author: E
*/

html{}
@font-face {
      font-family: 'Arial Black';
      src: url('./font/arial_black.ttf') format('truetype'),
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
/* General Reset */
* {margin: 0;padding: 0;box-sizing: border-box;}
img {max-width: 100%;height: auto;}
.nowrap{white-space: nowrap;}
.color-1, .color-1 a{color: #e94615!important;}
.color-2, .color-2 a{color: #9b2f0e!important;}

.bg-1{background: #fff;}
.bg-2{background: #ededed;}
.bg-3{background: #d6d6d6;}
.bg-4{background: #333333;}
.margin-top-50px{margin-top: 50px!important;}
.margin-bottom-50px{margin-bottom: 50px!important;}
.padding-20px{padding: 20px;}

.align-content-center{align-content: center;}
.max-width-700px{max-width: 700px;margin: 0 auto!important;}
.max-width-900px{max-width: 900px;margin: 0 auto!important;}

h1{max-width: 1000px;margin-top: 0px;font-family: 'Open Sans', sans-serif;font-size: 24px;letter-spacing: 1;color: #fff;text-shadow: rgba(0, 0, 0, 0.4) 0px 4px 5px;text-transform: uppercase;}
.home-parallax-container h1{width: 100%;max-width: 1000px;margin-top: -100px;font-size: 30px;}
.after-h1{font-size: 20px;font-weight: bold;color: #fff;text-shadow: rgba(0, 0, 0, 0.4) 0px 4px 5px;}
h2{margin-top: 50px;font-size: 22px;font-weight: bold;color: #000;}

body {font-family: Arial, Helvetica, sans-serif;line-height: 1.6;background-color: #f9f9f9;color: #333;}

/* Header Styles */
.header {background-color: #fff;color: #000;padding: 1rem 0;}
.navbar {display: flex;justify-content: space-between;align-items: center;max-width: 1050px;margin: 10px auto;padding: 0 25px;}
.logo {font-size: 27px;line-height: 1.2;font-weight: bold;color: #000;text-transform: uppercase;letter-spacing: 0.1em;font-family: 'arial black', arial-w01-black, 'Arial Black', sans-serif;}
.logo span{color: #e94615;}
.logo-container p{font-family: 'Open Sans', sans-serif;font-size: 11px;line-height: 1.2;letter-spacing: 0.01em;white-space: nowrap;}
.nav-links {list-style: none;display: none;position: absolute;gap: 1rem;flex-direction: column;background: #111111;color: #fff;top: 0;right: 70px;left: 0px;bottom: 0;padding: 50px 10px 10px 10px;z-index: 999;}
.nav-links li{display: flex;position: relative;flex-direction: column;align-items: start;border-bottom: 1px solid #fff;}
.nav-links li a {font-size: 20px;letter-spacing: 0.02em;color: #fff;text-decoration: none;transition: color 0.3s ease;}
.nav-links li a:hover {color: #ff6f61;}
.nav-links li ul{display: unset;position: relative;width: unset;top: 0px;list-style: none;background: #111111;color: #fff;padding: 10px 10px 10px 20px;text-align: left;z-index: 111;border-bottom: 0;}
.nav-links li ul li{border-bottom: 0;border-top: 1px solid #fff;}
.nav-links li:hover ul{display: unset;}
.nav-links li ul:hover{display: unset;}
.current-menu-item a{color: #e94615!important;}
#nav-toggle{display: flex;height: 100%;justify-content: right;width: 50px;height: 50px;align-items: baseline;background: none;border: none;box-sizing: border-box;cursor: pointer;}
 #nav-toggle svg{stroke: #111;width:  25px;}
 .cta-btn-container{width: 255px;display: none;flex-direction: row-reverse;}
 .cta-btn{display: flex;font-family: 'Open Sans', sans-serif;font-size: 18px;font-weight: bold;letter-spacing: 0.05em;color: #111;margin-top: 20px;padding: 0px 0 0 25px;text-decoration: none;}
  .cta-btn:hover{opacity: 0.8;}
.cta-button {padding: 0.8rem 1.5rem;background-color: #ff6f61;color: #fff;border: none;cursor: pointer;transition: background-color 0.3s ease;}
.cta-button:hover {background-color: #e55b4e;}

.std-btn{display: flex;min-width: 190px;font-family: 'Open Sans', sans-serif;font-size: 12px!important;letter-spacing: 0.05em;padding: 0px;text-decoration: none;text-transform: uppercase;}
.std-btn a{width: 100%;}
.std-btn a:hover{opacity: 0.8;}

.content-wrapper{max-width: 1050px;margin: 0px auto!important;padding: 10px;}


.home-parallax-container {
  background: #212121;
  background-image: url('img/top-home.jpg');
  background-attachment: fixed;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  margin-bottom: -130px;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

.page-parallax-container {
  background: #212121;
  background-image: url('img/top-home.jpg');
  background-attachment: fixed;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 200px;
  display: flex;
  flex-direction: column;
  margin-bottom: 0px;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

.page-content{padding: 20px 0 0 0;background: #fff;}
.content{position: relative;}
.road-bg{display: none;width: 100%;height: 175px;background-image: url('img/road-bg.jpg');background-position: center;background-repeat: no-repeat;background-size: cover;}
.advantages-container{display: none;position: absolute;width: 100%;min-height: 50px;margin: 0 auto;margin-top: -280px;justify-content: space-around;}
.advantages-container-inner{display: flex;width: 100%;max-width: 750px;min-height: 50px;margin: 0 auto;justify-content: space-around;}
.advantage-item{width: 33.333333%;padding: 40px 0;text-align: center;}
.advantage-item svg{width: 30px;height: auto;margin-bottom: 30px;}
.advantage-text{font-family: 'Open Sans', sans-serif;font-size: 20px;font-weight: bold;color: #000;}

article ul{padding-left: 25px;}

.ei-price{margin-top: 20px;color:#e94615;font-size: 14px;text-align: center;}
.ei-price span{font-size: 36px;font-weight: bold;}

.service-num{font-size: 70px;font-weight: bold;color:#e94615;}



/* About Us */
.about {padding: 3rem 1rem;background-color: #f9f9f9;}
.about-stats {display: flex;justify-content: space-around;margin-top: 2rem;}
.stat {text-align: center;}

/* Portfolio */
.portfolio {padding: 3rem 1rem;background-color: #fff;}
.gallery {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 1rem;}
.item img {width: 100%;height: auto;border-radius: 8px;transition: transform 0.3s ease;}
.item img:hover {transform: scale(1.05);}

/* How It Works */
.how-it-works {padding: 3rem 1rem;background-color: #f9f9f9;}
.steps {display: flex;flex-wrap: wrap;gap: 1rem;}
.step {flex: 1;text-align: center;padding: 1rem;background-color: #fff;border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}

/* Testimonials */
.testimonials {padding: 3rem 1rem;background-color: #fff;}
.testimonial-slider {display: flex;overflow-x: auto;gap: 1rem;scroll-snap-type: x mandatory;}
.testimonial {
    flex: 0 0 300px;padding: 1rem;background-color: #f9f9f9;border-radius: 8px;scroll-snap-align: start;}

/* FAQ */
.faq {padding: 3rem 1rem;background-color: #f9f9f9;}
.faq-item {margin-bottom: 1rem;}

/* Contact Us */
.contact {padding: 3rem 1rem;background-color: #fff;}
.contact form {display: flex;flex-direction: column;max-width: 400px;margin: 0 auto;}
.contact input, .contact textarea {padding: 0.8rem;margin-bottom: 1rem;border: 1px solid #ccc;border-radius: 5px;}

/* Footer */
.footer {text-align: center;padding: 30px 20px;background-color: #111111;color: #fff;}
.footer a{color: #fff;}
.footer a:hover{opacity: 0.8;}
.footer-inner{display: flex;max-width: 1050px;margin: 0 auto;padding-bottom: 20px;flex-direction: column;}
.footer-col{text-align: left;}
.footer-col-title{margin-top: 20px;margin-bottom: 15px;font-size: 22px;font-weight: bold;font-family: 'Open Sans', sans-serif;}
.instagram-btn{display: flex;width: 35px;height: 35px;margin: 0;border-radius: 50px;background: #fff;justify-content: center;}
.instagram-btn svg{width: 27px;}
.footer-logo{color: #fff;font-size: 24px;font-weight: bold;text-transform: uppercase;letter-spacing: 0.1em;font-family: 'arial black', arial-w01-black, 'Arial Black', sans-serif;text-decoration: none;}
.footer-logo span{color: #e94615;}
#copyright{border-top: 1px solid #fff;}

#overlay{display:none;position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: 0.5;z-index: 10;}

.form-input-container{display: flex;margin-bottom: 20px;}
.form-input-container p{width: 100%;}
form input{width: 100%;height: 28px;border: none;border-bottom: 1px solid #000;}
form textarea{width: 100%;border: none;border-bottom: 1px solid #000;}
.wpcf7-submit{display: flex;max-width: 190px;margin: 10px auto;font-family: 'Open Sans', sans-serif;font-size: 12px!important;letter-spacing: 0.05em;text-decoration: none;text-transform: uppercase;border-radius: 50px;border-bottom: 0;background: #e94615;color: #fff;}

.mobile{display: unset;}
.desktop{display: none;}

/* Responsive Design */
@media (min-width: 768px) {
  h1{font-size: 80px;line-height: 1.1;}
  .after-h1{font-size: 42px;color: #fff;text-shadow: rgba(0, 0, 0, 0.4) 0px 4px 5px;}
  h2{margin-top: 50px;font-size: 42px;}
  .navbar {margin: 0px auto;}
  .logo {font-size: 24px;}
  .logo-container p{font-size: 15px;}
  #nav-toggle{display: none;}
  .nav-links{display: flex;position: relative;flex-direction: row;gap:2.2rem;background: #fff;color: #000;padding: unset;}
  .nav-links li{display: flex;position: relative;flex-direction: column;align-items: center;border-bottom: 0;}
  .nav-links li a {font-size: 18px;letter-spacing: 0.02em;color: #111;;text-decoration: none;transition: color 0.3s ease;}
.nav-links li a:hover {color: #ff6f61;}
.nav-links li ul{display: none;position: absolute;width: 200px;top: 20px;list-style: none;background: #fff;padding: 10px;text-align: center;z-index: 111}
.nav-links li:hover ul{display: unset;}
.nav-links li ul:hover{display: unset;}
   .cta-btn-container{width: 255px;display: flex;}

  .cta-btn{margin-top: 0;padding: 0;font-size: 20px;}

  .home-parallax-container {
  background-image: url('img/top-home.jpg');
  background-attachment: fixed;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  margin-bottom: -130px;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

.road-bg{display: block;}
.advantages-container{display: flex;}

.footer{padding: 30px 10px;}
  .footer-inner{flex-direction: row;justify-content: space-around;}
  .footer-col-title{margin-top: 10px;margin-bottom: 15px;font-size: 20px;font-weight: bold;font-family: 'Open Sans', sans-serif;}
.instagram-btn{display: flex;width: 35px;height: 35px;margin: 0 auto;border-radius: 50px;background: #fff;justify-content: center;}

.form-input-container{display: flex;margin-bottom: 20px;}
.form-input-container p{width: 50%;}
form input{width: 90%;height: 28px;border: none;border-bottom: 1px solid #000;}
form textarea{width: 100%;border: none;border-bottom: 1px solid #000;}

    .mobile{display: none;}
.desktop{display: unset;}
}