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

.site-header{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:9999;

  padding:18px 0;

  transition:0.35s ease;

}

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

.site-header.scrolled{

  padding:12px 0;

}

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

.header-container{

  display:flex;

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

  gap:30px;

  padding:18px 28px;

  border-radius:999px;

  background:
  rgba(255,255,255,0.82);

  border:
  1px solid rgba(255,255,255,0.7);

  backdrop-filter:blur(18px);

  box-shadow:
  0 20px 50px rgba(15,23,42,0.06);

}

/* =========================================================
   LOGO
========================================================= */

.logo{

  display:flex;

  align-items:center;

  gap:14px;

  flex-shrink:0;

}

/* =========================================================
   LOGO IMAGE
========================================================= */

.logo img{

  width:54px;
  height:54px;

  object-fit:contain;

}

/* =========================================================
   LOGO TEXT
========================================================= */

.logo-text{

  display:flex;

  align-items:center;

  gap:4px;

  font-size:1.35rem;

  font-weight:900;

  letter-spacing:-0.5px;

}

.logo-build{

  color:#0f172a;

}

.logo-deploy{

  color:#2563eb;

}

.logo-tech{

  color:#f97316;

}

/* =========================================================
   NAV MENU
========================================================= */

.nav-menu{

  display:flex;

  align-items:center;

  gap:28px;

}

/* =========================================================
   NAV LINKS
========================================================= */

.nav-menu > a,
.nav-parent{

  position:relative;

  display:flex;

  align-items:center;

  gap:8px;

  color:#0f172a;

  font-size:15px;
  font-weight:700;

  transition:0.3s ease;

}

/* =========================================================
   NAV HOVER
========================================================= */

.nav-menu > a:hover,
.nav-parent:hover{

  color:#2563eb;

}

/* =========================================================
   NAV UNDERLINE
========================================================= */

.nav-menu > a::after,
.nav-parent::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-8px;

  width:0;
  height:2px;

  border-radius:999px;

  background:
  linear-gradient(
    90deg,
    #2563eb,
    #0ea5e9
  );

  transition:0.35s ease;

}

.nav-menu > a:hover::after,
.nav-parent:hover::after{

  width:100%;

}

/* =========================================================
   DROPDOWN
========================================================= */

.nav-dropdown{

  position:relative;

}

/* =========================================================
   DROPDOWN ARROW
========================================================= */

.dropdown-arrow{

  font-size:12px;

  transition:0.3s ease;

}

.nav-dropdown:hover .dropdown-arrow{

  transform:rotate(180deg);

}

/* =========================================================
   DROPDOWN MENU
========================================================= */

.dropdown-menu{

  position:absolute;

  top:calc(100% + 24px);
  left:0;

  min-width:280px;

  padding:16px;

  border-radius:28px;

  background:
  rgba(255,255,255,0.94);

  border:
  1px solid rgba(255,255,255,0.7);

  backdrop-filter:blur(20px);

  box-shadow:
  0 30px 80px rgba(15,23,42,0.10);

  opacity:0;
  visibility:hidden;

  transform:
  translateY(14px);

  transition:0.35s ease;

}

/* =========================================================
   DROPDOWN SHOW
========================================================= */

.nav-dropdown:hover .dropdown-menu{

  opacity:1;
  visibility:visible;

  transform:
  translateY(0);

}

/* =========================================================
   DROPDOWN LINKS
========================================================= */

.dropdown-menu a{

  display:flex;

  align-items:center;

  padding:14px 18px;

  border-radius:18px;

  color:#0f172a;

  font-size:14px;
  font-weight:600;

  transition:0.3s ease;

}

/* =========================================================
   DROPDOWN LINK HOVER
========================================================= */

.dropdown-menu a:hover{

  background:
  rgba(37,99,235,0.08);

  color:#2563eb;

  transform:
  translateX(4px);

}

/* =========================================================
   NAV CTA
========================================================= */

.nav-cta{

  display:inline-flex;

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

  padding:14px 24px;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #0ea5e9
  );

  color:#ffffff !important;

  font-size:14px;
  font-weight:700;

  box-shadow:
  0 18px 40px rgba(37,99,235,0.18);

  transition:0.35s ease;

}

/* =========================================================
   CTA HOVER
========================================================= */

.nav-cta:hover{

  transform:
  translateY(-4px);

  box-shadow:
  0 25px 55px rgba(37,99,235,0.25);

}

/* =========================================================
   MOBILE TOGGLE
========================================================= */

.menu-toggle{

  width:54px;
  height:54px;

  display:none;

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

  border-radius:18px;

  background:
  linear-gradient(
    135deg,
    rgba(37,99,235,0.10),
    rgba(14,165,233,0.08)
  );

  color:#2563eb;

  font-size:1.5rem;

  transition:0.35s ease;

}

/* =========================================================
   MOBILE TOGGLE HOVER
========================================================= */

.menu-toggle:hover{

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #0ea5e9
  );

  color:#ffffff;

}

/* =========================================================
   HEADER SHADOW ON SCROLL
========================================================= */

.site-header.scrolled .header-container{

  box-shadow:
  0 25px 60px rgba(15,23,42,0.10);

}

/* =========================================================
   ACTIVE LINK
========================================================= */

.nav-menu a.active{

  color:#2563eb;

}

.nav-menu a.active::after{

  width:100%;

}

/* =========================================================
   NAV ANIMATION
========================================================= */

.header-container{

  animation:
  navFade 0.7s ease;

}

@keyframes navFade{

  from{

    opacity:0;

    transform:
    translateY(-20px);

  }

  to{

    opacity:1;

    transform:
    translateY(0);

  }

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

.site-footer{

  position:relative;

  overflow:hidden;

  padding-top:120px;

  background:
  linear-gradient(
    135deg,
    #0f172a,
    #111827,
    #172554
  );

}

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

.site-footer::before{

  content:"";

  position:absolute;

  top:-250px;
  right:-250px;

  width:650px;
  height:650px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(37,99,235,0.16),
    transparent 70%
  );

  filter:blur(100px);

}

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

.footer-container{

  position:relative;

  z-index:2;

}

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

.footer-top{

  display:grid;

  grid-template-columns:
  1.4fr 1fr 1fr 1.2fr;

  gap:50px;

  padding-bottom:80px;

}

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

.footer-logo{

  width:68px;

  margin-bottom:26px;

}

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

.footer-about p{

  margin-bottom:30px;

  color:
  rgba(255,255,255,0.72);

  line-height:1.9;

  font-size:15px;

}

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

.footer-socials{

  display:flex;

  align-items:center;

  gap:14px;

  margin-top:24px;

}

/* =========================================================
   SOCIAL ICON
========================================================= */

.footer-socials a{

  width:50px;
  height:50px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:16px;

  background:
  rgba(255,255,255,0.06);

  border:
  1px solid rgba(255,255,255,0.08);

  color:#ffffff;

  font-size:18px;

  text-decoration:none;

  backdrop-filter:blur(10px);

  transition:
  transform 0.35s ease,
  background 0.35s ease,
  box-shadow 0.35s ease;

}

/* =========================================================
   SOCIAL HOVER
========================================================= */

.footer-socials a:hover{

  transform:
  translateY(-6px);

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #7c3aed,
    #0ea5e9
  );

  box-shadow:
  0 15px 35px rgba(37,99,235,0.30);

}
/* =========================================================
   FOOTER COLUMN
========================================================= */

.footer-column h3{

  margin-bottom:28px;

  font-size:1.2rem;

  font-weight:800;

  color:#ffffff;

}

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

.footer-column ul{

  display:flex;

  flex-direction:column;

  gap:18px;

}

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

.footer-column ul li a{

  position:relative;

  color:
  rgba(255,255,255,0.72);

  font-size:15px;

  transition:0.35s ease;

}

/* =========================================================
   FOOTER LINK HOVER
========================================================= */

.footer-column ul li a:hover{

  padding-left:8px;

  color:#ffffff;

}

/* =========================================================
   CONTACT INFO
========================================================= */

.footer-contact{

  display:flex;

  flex-direction:column;

  gap:18px;

}

/* =========================================================
   CONTACT ITEM
========================================================= */

.footer-contact-item{

  display:flex;

  align-items:flex-start;

  gap:16px;

}

/* =========================================================
   CONTACT ICON
========================================================= */

.footer-contact-icon{

  width:48px;
  height:48px;

  min-width:48px;

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

  border-radius:18px;

  background:
  rgba(255,255,255,0.08);

  color:#7dd3fc;

  font-size:1.1rem;

}

/* =========================================================
   CONTACT TEXT
========================================================= */

.footer-contact-item p{

  color:
  rgba(255,255,255,0.72);

  font-size:15px;

  line-height:1.8;

}


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

.newsletter-form button:hover{

  transform:
  translateY(-3px);

}

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

.footer-bottom{

  display:flex;

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

  gap:20px;

  padding:30px 0;

  border-top:
  1px solid rgba(255,255,255,0.08);

}

/* =========================================================
   COPYRIGHT
========================================================= */

.footer-bottom p{

  color:
  rgba(255,255,255,0.65);

  font-size:14px;

}

/* =========================================================
   FOOTER BOTTOM LINKS
========================================================= */

.footer-bottom-links{

  display:flex;

  align-items:center;

  gap:24px;

}

/* =========================================================
   FOOTER BOTTOM LINK
========================================================= */

.footer-bottom-links a{

  color:
  rgba(255,255,255,0.65);

  font-size:14px;

  transition:0.35s ease;

}

/* =========================================================
   FOOTER BOTTOM LINK HOVER
========================================================= */

.footer-bottom-links a:hover{

  color:#ffffff;

}

/* =========================================================
   RESPONSIVE NAVBAR
========================================================= */

@media(max-width:992px){

  .menu-toggle{

    display:flex;

  }

  .nav-menu{

    position:fixed;

    top:110px;
    left:-100%;

    width:100%;

    height:
    calc(100vh - 110px);

    flex-direction:column;

    align-items:flex-start;

    gap:0;

    padding:30px;

    background:
    rgba(255,255,255,0.96);

    backdrop-filter:blur(20px);

    transition:0.35s ease;

    overflow-y:auto;

  }

  .nav-menu.active{

    left:0;

  }

  .nav-menu > a,
  .nav-parent{

    width:100%;

    padding:18px 0;

    border-bottom:
    1px solid rgba(15,23,42,0.06);

  }

  .dropdown-menu{

    position:static;

    width:100%;

    margin-top:16px;

    opacity:1;
    visibility:visible;

    transform:none;

    display:none;

    box-shadow:none;

  }

  .nav-dropdown.active .dropdown-menu{

    display:block;

  }

  .footer-top{

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

  }

}

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

@media(max-width:768px){

  .header-container{

    padding:16px 20px;

  }

  .logo img{

    width:48px;
    height:48px;

  }

  .logo-text{

    font-size:1.15rem;

  }

  .footer-top{

    grid-template-columns:1fr;

  }

  .footer-bottom{

    flex-direction:column;

    text-align:center;

  }

  .newsletter-form{

    flex-direction:column;

  }

  .newsletter-form button{

    width:100%;

  }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .site-footer{

    padding-top:90px;

  }

  .footer-top{

    gap:40px;

  }

  .newsletter-box{

    padding:22px;

  }

  .footer-socials{

    flex-wrap:wrap;

  }

  .footer-bottom-links{

    flex-wrap:wrap;

    justify-content:center;

  }

}