/*!
Theme Name: dvspregress
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dvspregress
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

dvspregress is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

body.custom-background {
  background-color: inherit!important;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/* Основні налаштування та Кольори */
:root {
  --dark-blue: #0F2B46;
  --blue: #2E86C1;
  --light-blue: #E6F2FA;
  --white: #FFFFFF;
  --orange: #F7941D; /* Трохи підкоригований оранж */
  --text-gray: #666;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background-color: var(--white);
  color: var(--dark-blue);
}

body.custom-background {
  background-image: none !important;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  align-items: center;
  justify-content: space-between;
}

h2 {
  font-size: 32px;
}

.d-flex {
  display: flex;
}

/* Header */
header {
  background-color: var(--dark-blue);
  color: var(--white);
  padding: 15px 0;
}
.custom-logo-link .custom-logo {
	width: 80px;
	height: 80px;
}

.site-logo img {

    height: auto;
    display: block;
}

.custom-logo-link {
    display: inline-block;
}

.logo {
    display: flex;
    align-items: center;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.phone {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
}

 .phone i {
  margin-right: 8px;
  color: #ffffff; /* колір іконки */
}

.redirect_link {
  text-decoration: none;
  color: inherit;
}

nav a {
  color: var(--white);
  text-decoration: none;
  margin: 0 15px;
}
.main-navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-navigation li {
  margin: 0 15px;
}
.main-navigation a {
  color: #FFFFFF;
  text-decoration: none;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
}

/* === Головне меню === */
.main-navigation {
  display: flex;
  align-items: center;
  position: relative;
}

#primary-menu {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#primary-menu li {
  margin: 0 15px;
}

#primary-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: color 0.3s;
}

#primary-menu a:hover {
  color: #F7931E;
}

/* Основне меню */
#primary-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

#primary-menu > li {
  position: relative; 
}

#primary-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%; 
  left: 0;
  background: #0f2b46; 
  list-style: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 9999;
  min-width: 200px; 
}


#primary-menu .sub-menu li {
  padding: 10px 0;
  margin: 0;
}

#primary-menu li.menu-item-has-children:hover > .sub-menu {
  display: block;
}

#primary-menu a {
  text-decoration: none;
  padding: 10px 15px;
  display: block;
  color: #fff;
}
#primary-menu .sub-menu a {
  color: #fff;
  position: relative;
}

#primary-menu .sub-menu a:after {
  display: none;
  content: '';
  top: 4px;
  left: 0;
  height: 80%;
  width: 2px;
  background: var(--orange);
  position: absolute;
}

#primary-menu .sub-menu li:hover a:after {
  display: block;
}


#primary-menu .sub-menu li:hover {
  background-color: #023b77;
}


#primary-menu .sub-menu {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#primary-menu li.menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  display: block;
}

@media screen and (max-width: 768px) {

  #primary-menu {
      flex-direction: column;
  }

  #primary-menu .sub-menu {
      position: relative;
      top: 0;
      left: 15px; 
      opacity: 1;
      text-align-last: left;
      display: block; 
      box-shadow: none;
      background: none;
  }

  #primary-menu .sub-menu li {
      padding: 8px 0 8px 15px;
	  text-align: start;
  }
}



/* === BURGER BUTTON === */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.menu-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
}

.phone.mobile {
display: none;
}

/* === MOBILE === */
@media (max-width: 768px) {
  /* Показати кнопку бургер */
  .menu-toggle {
      display: flex;
  }

  /* Сховати ul меню за замовчуванням */
  #primary-menu {
      display: none;
      position: absolute;
      top: 50px;
      flex-direction: column;
      background: #0f2a46;
      padding: 20px;
      gap: 15px;
      width: 90vw;
      right: 0px;
      text-align: center;
      z-index: 99;
  }

  /* Відкрите меню */
  .main-navigation.toggled #primary-menu {
      display: flex;
  }

  #primary-menu li {
      margin: 10px 0;
  }

  #primary-menu a {
      color: #fff;
      font-size: 18px;
  }

  .header-right  {
    display: none;
  }
  .phone.mobile {
    display: block;
    color: #fff;
    text-decoration: none;
    }
}

.btn-orange {
  background-color: var(--orange);
  color: var(--white);
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-icon {
  font-size: 24px;
  margin-right: 10px;
  color: var(--orange);
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.brand {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}

.sub-brand {
  font-size: 10px;
  letter-spacing: 2px;
}

/* Hero Section */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80px 0;
  overflow: hidden;
  /* background:  #E6F2FA ; */
  background: #b5e1ff;
background: linear-gradient(271deg, rgba(181, 225, 255, 1) 0%, rgba(209, 248, 255, 1) 50%, rgba(230, 242, 250, 1) 100%);
}

/* Hero контейнер над всім */
.hero .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2; /* над overlay і картинкою */
  width: 100%;
}

/* Текст ліворуч */
.hero-content {
  flex: 1;
  max-width: 50%;
}

/* Картинка справа */
.hero-image {
  flex: 1;
  max-width: 50%;
  text-align: right;
  position: relative;
  z-index: 1;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  transition: filter 1.5s ease, opacity 1.5s ease;
}

.hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  
  opacity: 0.6; 
  z-index: 2; 
  pointer-events: none;
  /* background-image: url('<?php echo esc_url($hero_bg); ?>');  */

  background-position-x: 30vw;
  background-position-y: bottom;
  background-size: 73vw auto;
  background-repeat: no-repeat;
  background-repeat: no-repeat;
}


.hero-content h1 {
  font-size: 42px;
  margin-bottom: 20px;
}

.hero-content p {
  margin-bottom: 30px;
  color: var(--text-gray);
}

.hero-image {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.image-placeholder {
  background: white;
  padding: 40px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Services */
.services {
  padding: 60px 0;
  text-align: center;
}

.section-title {
  margin-bottom: 40px;
  font-size: 28px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 100%;
}

.service-card {
  background: white;
  padding: 40px 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  border-color: var(--blue);
  transition: 0.3s;
  height: 320px;
}

.service-card:hover, .service-card.active {
  box-shadow: 1px 7px 20px 6px rgb(0 0 0 / 27%);
  border-color: var(--orange);
}

.card-icon {
  font-size: 40px;
  color: var(--blue);
  margin-bottom: 20px;
}
/* about us */
.about-us {
  padding: 100px 0;
  background-color: #f5f5f5;
}

.about-header {
  max-width: 900px;
  margin-bottom: 60px;
}

.section-label {
  display: inline-block;
  margin-bottom: 15px;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff6600;
  font-weight: 600;
}

.about-header h2 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.2;
}

.about-intro {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.7;
}

.about-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
}

.about-item h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
}

.about-item p {
  font-size: 16px;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 768px) {
  .about-features {
      grid-template-columns: 1fr;
  }
}

/* projects */
.projects-cta {
  position: relative;
  padding: 100px 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background-image: url('https://dvsprogress.eu/wp-content/uploads/2026/02/projects-scaled.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  overflow: hidden;
}

.projects-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.projects-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 40px;
  color: #ffffff;
}

.projects-content h2 {
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.projects-content p {
  font-size: 1.2rem;
  margin-bottom: 35px;
  opacity: 0.9;
}

.btn-outline-white {
  display: inline-block;
  padding: 14px 36px;
  border: 2px solid #ffffff;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.btn-outline-white:hover {
  background: #ffffff;
  color: #000000;
}

.services .btn-outline-dark {
  margin: 50px 0;
}

.btn-outline-dark {
  display: inline-block;
  padding: 14px 36px;
  border: 2px solid #090043;
  color: #090043;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.btn-outline-dark:hover {
  background: #090043;
  color: #fff;
}

.about-us h3 {
  margin-bottom: 15px;
}

.about-us p {
  font-size: 16px;
  max-width: 600px;
}

.service-page {
  padding: 50px 0;
}

.service-page h1 {
  padding: 50px 0;
  text-align: center;
}

.page-img {
  width: 100%;
}

.page-img img {
  width: 100%;
      height: auto;
}
.services {
  background: #e5f2fa66;
}
.service-card h3 {
  padding: 10px 0;
}

.service-card .icon {
  max-width: 140px; 
  height: 125px;  
  margin-bottom: 20px;
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
  background-size: contain;
}

/* Іконка Construction */
.service-card.construction .icon {
  background-image: url('https://dvsprogress.eu/wp-content/uploads/2026/02/const.png');
}

/* Іконка Electrical */
.service-card.electrical .icon {
  background-image: url('https://dvsprogress.eu/wp-content/uploads/2026/02/electic.png');
}

/* Іконка Maintenance */
.service-card.maint .icon {
  background-image: url(' https://dvsprogress.eu/wp-content/uploads/2026/02/maintance.png');
}


/* Footer */
footer {
  background-color: var(--dark-blue);
  color: var(--white);
  padding: 40px 0;
}

.footer-top {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.footer-info {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.footer-info span {
  margin-bottom: 8px;
}
.footer-info .info {
  margin-bottom: 10px;
}
.contact-us {
  padding: 100px 0;
  background: #fff;
}

.contact-us .section-label {
  display: inline-block;
  font-size: 0.9rem;
  color: #ff6600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.contact-us h2 {
  margin-bottom: 40px;
  font-weight: 700;
  text-align: center;
}

.contact-form-wrapper {
  max-width: 700px;
  margin: 0 auto;
}
/* === CONTACT FORM 7 – BASE === */
.wpcf7 {
  max-width: 700px;
  margin: 0 auto;
  font-family: inherit;
}

.wpcf7-form p {
  margin-bottom: 20px;
}

/* === LABELS === */
.wpcf7-form label {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 6px;
}

/* === INPUTS & TEXTAREA === */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-size: 1rem;
  font-family: inherit;
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7-form textarea {
  height: 160px;
  resize: vertical;
}

/* === FOCUS STATE === */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: #ff6600;
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15);
}
/* === SUBMIT BUTTON === */
.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  background-color: #ff6600;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.15s ease;
}

.wpcf7-submit:hover {
  background-color: #e05500;
  transform: translateY(-1px);
}

/* Disabled (until acceptance checked) */
.wpcf7-submit:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
}
/* === ERRORS === */
.wpcf7-not-valid {
  border-color: #d93025;
}

.wpcf7-not-valid-tip {
  font-size: 0.85rem;
  color: #d93025;
  margin-top: 6px;
}

/* === RESPONSE MESSAGE === */
.wpcf7-response-output {
  margin-top: 25px;
  padding: 15px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
}

.wpcf7-mail-sent-ok {
  background-color: #e6f4ea;
  color: #137333;
  border: 1px solid #137333;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
  background-color: #fce8e6;
  color: #c5221f;
  border: 1px solid #c5221f;
}
@media (max-width: 600px) {
  .wpcf7 {
      padding: 0 15px;
  }

  .wpcf7-submit {
      width: 100%;
  }
}
@media (max-width: 768px){
  .hero .container {
    flex-direction: column;
  }
  .hero-image {
    max-width: fit-content;
  }
  .hero-content {
    max-width: fit-content;
    text-align: center;
    margin-bottom: 35px;
  }
  .hero-content h1 {
    font-size: 32px;
  }
  .services-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .footer-top {
    flex-direction: column;
  }
  .footer-top .logo {
    margin-bottom: 20px;
    justify-content: start;
  }
  .footer-info {
    width: 100%;
  }
  #page {
    padding-bottom: 40px;
  }
  .contact-us {
    padding: 20px 0 10px;
  }
}


.post-thumbnail img {
  max-width: 100%;
  height: auto;;
}
.copyright {
  justify-content: center;
  font-size: 12px;
}
.copyright a {
  margin: 0 0 0 6px;
  text-decoration: none;
  color: #fff;
}