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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

:root {

  --primary: #1E3A5F;
  --secondary: #1F2937;

  --accent: #2563EB;
  --accent-light: #60A5FA;

  --dark: #1F2937;
  --gray: #6B7280;

  --light: #F4F7FA;
  --white: #ffffff;

  --radius: 18px;

  --shadow: 0 10px 35px rgba(30, 58, 95, .08);
  --shadow-hover: 0 20px 45px rgba(30, 58, 95, .16);

}

body {
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
  background: #ffffff;
  color: var(--dark);
  line-height: 1.7;

}

img {
  max-width: 100%;
  display: block;
}

.container {

  width: min(1200px, 92%);
  margin: auto;

}

/* ==========================
HEADER
========================== */

.header {

position: fixed;
top:0;
left:0;
width:100%;

background: rgba(255,255,255,.95);

backdrop-filter: blur(12px);

z-index:9999;

}

.nav {

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;

}

.logo {

  font-size: 34px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: 1px;

}

.nav ul {

  list-style: none;
  display: flex;
  gap: 30px;

}

.nav a {

  text-decoration: none;
  color: var(--dark);
  font-weight: 500;
  transition: .3s;

}

.nav a:hover {

  color: var(--accent);

}

/* ==========================
HERO
========================== */

/* ==========================
   HERO IMAGE
========================== */

.hero {

  background:
    linear-gradient(rgba(55, 42, 24, .72),
      rgba(38, 30, 20, .62)),
    url("../images/hero/hero-glavna.jpg") center 70%/cover no-repeat;

}

.hero h1 {

  font-size: 58px;

  line-height: 1.15;

  font-weight: 700;

  letter-spacing: -1px;

  margin-bottom: 25px;

  color: #ffffff;

  text-shadow:
    0 4px 20px rgba(0, 0, 0, .45);

}

.hero p {

  font-size: 21px;

  max-width: 750px;

  margin: auto;

  color: #f1f5f9;

  margin-bottom: 40px;

}

.hero-content {

  position: relative;

  z-index: 2;

}

/* ==========================
BUTTON
========================== */

.btn {

  display: inline-block;

  padding: 16px 42px;

  background: var(--accent);

  color: #fff;

  text-decoration: none;

  border-radius: 50px;

  border: 1px solid var(--accent);

  font-weight: 600;

  transition: .35s;

  box-shadow: 0 12px 30px rgba(37, 99, 235, .25);

}

.btn:hover {

  transform: translateY(-5px);

  background: #1D4ED8;

  box-shadow: 0 18px 35px rgba(37, 99, 235, .35);

}

/* ==========================
SECTION
========================== */

.section {

  padding: 110px 0;

}

.section h2 {

  text-align: center;

  font-size: 42px;

  margin-bottom: 18px;

  color: var(--primary);

}

.section p {

  color: #555;

}

.gray {
  background: #F4F7FA;
}

/* ==========================
CARDS
========================== */

.cards {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));

  gap: 30px;

  margin-top: 60px;

}

.card {

  background: #fff;

  padding: 35px;

  border-radius: 18px;

  box-shadow: var(--shadow);

  transition: .35s;

  border-top: 5px solid transparent;

}

.card:hover {

  transform: translateY(-12px);

  border-top: 5px solid var(--accent);

  box-shadow: var(--shadow-hover);

}

.card h3 {

  color: var(--primary);

  margin-bottom: 15px;

  font-size: 22px;

}

.card p {

  color: #555;

}

.short-title {
  font-size: 20px !important;
  white-space: nowrap;
}

/* ==========================
GALLERY
========================== */

.gallery {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 30px;

  margin-top: 60px;

}

.project {

  height: 260px;

  border-radius: 20px;

  overflow: hidden;

  background: linear-gradient(135deg, #d9e5f2, #f4f6fa);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 28px;

  font-weight: 600;

  color: var(--primary);

  transition: .35s;

  cursor: pointer;

}

.project:hover {

  transform: scale(1.05);

  box-shadow: var(--shadow-hover);

}

/* ==========================
   CTA WITH IMAGE
========================== */

.cta {

  position: relative;

  padding: 130px 20px;

  text-align: center;

  color: #fff;

  overflow: hidden;

  background:
    linear-gradient(
      rgba(15, 35, 60, .85),
      rgba(15, 35, 60, .85)
    ),
    url("../images/gallery/avto-pred-delavnico.jpg")
    center center/cover no-repeat;

}


.cta::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, .25),
    rgba(96, 165, 250, .08)
  );

}


.cta .container {

  position: relative;

  z-index: 2;

}


.cta-badge {

  display: inline-block;

  padding: 10px 24px;

  margin-bottom: 25px;

  border-radius: 50px;

  background: rgba(255, 255, 255, .12);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, .25);

  color: #fff;

  font-weight: 600;

}

.cta h2 {

  font-size: 48px;

  line-height: 1.2;

  margin-bottom: 20px;

  color: #fff;

  text-shadow: 0 4px 18px rgba(0, 0, 0, .35);

}


.cta p {

  max-width: 650px;

  margin: 0 auto 40px;

  font-size: 18px;

  color: #eef4f8;

}


.cta-buttons {

  display: flex;

  justify-content: center;

  gap: 20px;

  flex-wrap: wrap;

}

form {

  max-width: 750px;

  margin: 50px auto 0;

  display: grid;

  gap: 20px;

}

input,
textarea {

  width: 100%;

  padding: 18px;

  border-radius: 12px;

  border: 1px solid #ddd;

  font-family: inherit;

  transition: .3s;

  outline: none;

}

input:focus,
textarea:focus {

  border-color: var(--accent);

  box-shadow: 0 0 0 4px rgba(244, 163, 0, .15);

}

textarea {

  min-height: 180px;

  resize: vertical;

}

button {

  background: var(--primary);

  color: #fff;

  border: none;

  padding: 18px;

  font-size: 17px;

  border-radius: 12px;

  cursor: pointer;

  transition: .3s;

  font-weight: 600;

}

button:hover {

  background: var(--secondary);

}

/* ==========================
FOOTER
========================== */

footer {

  background: #111827;

  color: #fff;

  padding: 40px 0;

  text-align: center;

}

footer p {

  color: #d1d5db;

}

/* ==========================
ANIMATIONS
========================== */

.card,
.project,
.btn {

  transition: all .35s ease;

}

.section {

  animation: fadeIn 1s ease;

}

::-webkit-scrollbar {

  width: 10px;

}

::-webkit-scrollbar-thumb {

  background: var(--primary);

  border-radius: 50px;

}

::-webkit-scrollbar-track {

  background: #eee;

}

.hero {

  min-height: 92vh;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

}


.hero-content {

  max-width: 900px;

  text-align: center;

}


.hero-badge {

  display: inline-block;

  padding: 10px 25px;

  background: rgba(255, 255, 255, .15);

  border: 1px solid rgba(255, 255, 255, .3);

  border-radius: 50px;

  color: white;

  font-weight: 600;

  margin-bottom: 30px;

}


.hero h1 {

  font-size: clamp(38px,5vw,64px);

  line-height: 1.15;

  margin-bottom: 25px;

}


.hero p {

  font-size: 21px;

  max-width: 750px;

  margin: auto;

  color: #f1f5f9;

  margin-bottom: 40px;

}



.hero-buttons {

  display: flex;

  justify-content: center;

  gap: 20px;

  flex-wrap: wrap;

}


.secondary-btn {

  background: transparent;

  border: 2px solid white;

}


.secondary-btn:hover {

  background: white;

  color: var(--primary);

}



.hero-info {

  margin-top: 70px;

  margin-bottom: 20px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 25px;

}


.hero-info div {

  background: rgba(255, 255, 255, .12);

  backdrop-filter: blur(10px);

  padding: 25px;

  border-radius: 20px;

  color: white;

}


.hero-info strong {

  display: block;

  font-size: 38px;

}


.hero-info span {

  font-size: 15px;

}

.hero-features {

  background: #ffffff;

  padding: 70px 0;

  position: relative;

  margin-top: -40px;

  z-index: 5;

}



.feature-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 25px;

}



.feature-box {

  background: #fff;

  padding: 35px 25px;

  text-align: center;

  border-radius: 20px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

  transition: .35s;

  border-bottom: 4px solid transparent;

}



.feature-box:hover {

  transform: translateY(-10px);

  border-bottom: 4px solid var(--accent);

  box-shadow: 0 25px 50px rgba(0, 0, 0, .14);

}



.feature-icon {

  width: 70px;
  height: 70px;

  margin: 0 auto 20px;

  display: flex;

  align-items: center;
  justify-content: center;

  background: #E8F0FA;

  color: var(--primary);

  border-radius: 50%;

  font-size: 32px;

}



.feature-box h3 {

  color: var(--primary);

  font-size: 22px;

  margin-bottom: 12px;

}



.feature-box p {

  color: #666;

  font-size: 15px;

  line-height: 1.6;

}

/* ==========================
   ABOUT SECTION
========================== */


.about-section {

  padding: 110px 0;

  background: #fff;

}


.about-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 70px;

  align-items: center;

}



.about-image img {

  width: 100%;
  height: 480px;

  object-fit: cover;

  object-position: 90% center;

  border-radius: 25px;

  box-shadow: var(--shadow-hover);

}



.about-content {

  max-width: 600px;

}



.about-badge {

  display: inline-block;

  background: #E8F0FA;

  color: var(--primary);

  padding: 8px 20px;

  border-radius: 50px;

  font-size: 14px;

  font-weight: 600;

  margin-bottom: 20px;

}



.about-content h2 {

  color: var(--primary);

  font-size: 42px;

  line-height: 1.2;

  margin-bottom: 25px;

}



.about-content p {

  color: #555;

  margin-bottom: 18px;

  font-size: 17px;

}



.about-list {

  margin: 30px 0;

  display: grid;

  gap: 14px;

}



.about-list div {

  background: #F4F7FA;

  padding: 14px 20px;

  border-radius: 12px;

  color: #333;

  font-weight: 500;

  border-left: 4px solid var(--accent);

}



.about-content .btn {

  margin-top: 10px;

}

/* ==========================
   CTA PROFESSIONAL DESIGN
========================== */





.cta-badge {

  display: inline-block;

  padding: 10px 24px;

  border-radius: 50px;

  background: rgba(255, 255, 255, .15);

  border: 1px solid rgba(255, 255, 255, .3);

  font-size: 14px;

  font-weight: 600;

  margin-bottom: 25px;

}


.cta h2 {

  font-size: 46px;

  line-height: 1.2;

  margin-bottom: 20px;

  color: white;

}


.cta p {

  max-width: 650px;

  margin: 0 auto 40px;

  color: #e5edf5;

  font-size: 18px;

}


.cta-buttons {

  display: flex;

  justify-content: center;

  gap: 20px;

  flex-wrap: wrap;

}


.cta-phone {

  background: transparent;

  border: 2px solid white;

}


.cta-phone:hover {

  background: white;

  color: var(--primary);

}

/* ==========================
GALLERY NEW DESIGN
========================== */


.section-intro {

  max-width: 700px;

  margin: 0 auto;

  text-align: center;

  color: #666;

}


.gallery {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

  margin-top: 50px;

}


.gallery-card {

  position: relative;

  height: 350px;

  overflow: hidden;

  border-radius: 22px;

  box-shadow: var(--shadow);

}


.gallery-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: .5s;

}


.gallery-card:hover img {

  transform: scale(1.08);

}



.gallery-overlay {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 30px;

  color: white;

  background:
    linear-gradient(transparent,
      rgba(0, 0, 0, .85));

}


.gallery-overlay h3 {

  font-size: 24px;

  margin-bottom: 10px;

}


.gallery-overlay p {

  color: #eee;

  font-size: 15px;

}

/* ==========================
   CONTACT MODERN DESIGN
========================== */


.contact-section {

  padding: 110px 0;

  background: #F4F1EA;

}



.contact-header {

  text-align: center;

  max-width: 750px;

  margin: 0 auto 60px;

}



.contact-header h2 {

  font-size: 42px;

  color: var(--primary);

  margin: 20px 0;

}



.contact-header p {

  color: #666;

  font-size: 17px;

}




.contact-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

  align-items: start;

}




.contact-form,
.contact-info {

  background: white;

  padding: 40px;

  border-radius: 25px;

  box-shadow: var(--shadow);

}



.contact-form h3 {

  font-size: 26px;

  color: var(--primary);

  margin-bottom: 25px;

}




.contact-form input,
.contact-form textarea {


  width: 100%;

  padding: 17px 20px;

  margin-bottom: 18px;

  border-radius: 14px;

  border: 1px solid #ddd;

  font-family: inherit;

  font-size: 15px;

  outline: none;

}



.contact-form input:focus,
.contact-form textarea:focus {

  border-color: var(--accent);

  box-shadow: 0 0 0 4px rgba(244, 163, 0, .15);

}




.contact-form textarea {

  height: 150px;

  resize: none;

}



.contact-form button {

  width: 100%;

  background: var(--accent);

  color: white;

  border: none;

  padding: 17px;

  border-radius: 50px;

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

  transition: .3s;

}



.contact-form button:hover {

  transform: translateY(-3px);

}



.info-box {

  margin-bottom: 30px;

}



.info-box h3 {

  color: var(--primary);

  font-size: 26px;

  margin-bottom: 20px;

}



.info-box p {

  color: #555;

  margin-bottom: 12px;

  font-size: 16px;

}




.map {

  overflow: hidden;

  border-radius: 20px;

  box-shadow: var(--shadow);

}



.map iframe {

  display: block;

}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}


.contact-form,
.contact-info {
  height: 100%;
}

/* ==========================
   FOOTER MODERN
========================== */

.footer {
  background: #172033;
  color: #fff;
  padding: 70px 0 0;
}

.footer-content {

  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding-bottom: 40px;

}

.footer-logo {

  max-width: 450px;

}

.footer-logo h3 {

  font-size: 30px;
  color: #fff;
  margin-bottom: 18px;

}

.footer-logo p {

  color: #cbd5e1;
  line-height: 1.8;

}

.footer-contact {

  text-align: right;

}

.footer-contact p {

  color: #cbd5e1;
  margin-bottom: 12px;

}

.footer-bottom {

  border-top: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
  padding: 25px 0;

}

/* ==========================
   MOBILE NAVIGATION
========================== */

.hamburger {

  display: none;
  cursor: pointer;
  z-index: 1002;

}

.hamburger span {

  display: block;
  background: var(--primary);
  border-radius: 5px;
  transition: .3s;

}

.close-menu {

  display: none;

}

.overlay {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, .45);

  opacity: 0;

  visibility: hidden;

  transition: .3s;

  z-index: 1000;

}

.overlay.active {

  opacity: 1;
  visibility: visible;

}


.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.hamburger {
  transition: .3s;
}

.creator {

  color: #D69B52;
  text-decoration: none;
  font-weight: 600;

}

.creator:hover {

  text-decoration: underline;

}