/* ===================================
   DASTA - Layout (Navbar & Footer)
   =================================== */

/* ===================================
   Navbar
   =================================== */
.navbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--bg-white);
  box-shadow: 0 2px 20px var(--shadow);
  z-index: 1000;
  transition: var(--transition);
}

.navbar.scrolled{
  box-shadow: 0 2px 30px var(--shadow-dark);
}

.nav-wrapper{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 15px 0;
}

.logo{ display:block; }
.logo-img{
  height: 50px;
  width: auto;
  display: block;
  transition: var(--transition);
}
.logo-img:hover{ transform: scale(1.05); }

.nav-menu{
  display:flex;
  list-style:none;
  gap: 40px;
  align-items:center;
}

.nav-menu > li{ position: relative; }

.nav-menu a{
  color: var(--text-dark);
  font-weight: 500;
  font-size: 15px;
  transition: var(--transition);
  position: relative;
  display: block;
}

/* Submenu */
.has-submenu > a::after{
  content: '▾';
  margin-left: 6px;
  font-size: 12px;
  transition: var(--transition);
}


.submenu{
  position: absolute;
  top: calc(100% + 20px);
  left: -10px;
  background: var(--bg-white);
  min-width: 200px;
  list-style: none;
  padding: 12px 0;
  border-radius: 8px;
  box-shadow: 0 8px 30px var(--shadow-dark);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 100;
}


.submenu li{ margin: 0; }
.submenu a{
  padding: 10px 20px;
  font-size: 14px;
  color: var(--text-medium);
  white-space: nowrap;
}

.submenu a::after{ display: none; }
.submenu a:hover{
  background: var(--bg-light);
  color: var(--primary-color);
}

.nav-menu a:not(.btn-nav)::after{
  content:'';
  position:absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: var(--transition);
}

.nav-menu a.active::after{
  width: 100%;
}

@media (hover: hover) and (pointer: fine){
  .has-submenu:hover > a::after{
    transform: rotate(180deg);
  }

  .has-submenu:hover .submenu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-menu a:not(.btn-nav):hover::after{
    width: 100%;
  }

  .nav-menu a:hover{
    color: var(--primary-color);
  }
}

.btn-nav{
  background: var(--secondary-color);
  color: var(--bg-white) !important;
  padding: 10px 25px;
  border-radius: 6px;
  transition: var(--transition);
}
.btn-nav:hover{
  background: var(--secondary-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255,107,53,0.30);
}

.mobile-menu-toggle{
  display:none;
  flex-direction: column;
  gap: 5px;
  background:none;
  border:none;
  cursor:pointer;
  padding: 5px;
}
.mobile-menu-toggle span{
  width: 25px;
  height: 3px;
  background: var(--primary-color);
  border-radius: 3px;
  transition: var(--transition);
}

/* ===================================
   Footer
   =================================== */
.footer{
  background: var(--text-dark);
  color: var(--bg-white);
  padding: 60px 0 30px;
}

.footer-grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 50px;
  margin-bottom: 50px;
}

.footer-logo{
  height: 60px;
  width: auto;
  margin-bottom: 20px;
  filter: brightness(0) invert(1);
}

.footer-text{
  color: rgba(255,255,255,0.70);
  font-size: 15px;
  line-height: 1.7;
}

.footer-heading{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-links{ list-style:none; }
.footer-links li{ margin-bottom: 12px; }
.footer-links a{
  color: rgba(255,255,255,0.70);
  font-size: 15px;
  transition: var(--transition);
}
.footer-links a:hover{
  color: var(--secondary-color);
  padding-left: 5px;
}

.footer-contact{ list-style:none; }
.footer-contact li{
  display:flex;
  gap: 15px;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.70);
  font-size: 14px;
  line-height: 1.6;
}

.footer-contact svg{
  width: 20px;
  height: 20px;
  color: var(--secondary-color);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 30px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  flex-wrap:wrap;
  gap: 20px;
}

.footer-bottom p{
  color: rgba(255,255,255,0.50);
  font-size: 14px;
}

.footer-legal{ display:flex; gap: 30px; }
.footer-legal a{
  color: rgba(255,255,255,0.70);
  font-size: 14px;
  transition: var(--transition);
}
.footer-legal a:hover{ color: var(--secondary-color); }

/* ===================================
   Floating Action Buttons
   =================================== */
.floating-buttons{
  position: fixed;
  right: 30px;
  bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 999;
}

.fab-button{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  color: var(--bg-white);
  cursor: pointer;
}

.fab-button svg{ width: 24px; height: 24px; }

.fab-button:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

.fab-phone{
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.fab-phone:hover{
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.fab-contact{
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}
.fab-contact:hover{
  background: linear-gradient(135deg, var(--primary-dark) 0%, #071829 100%);
}