/*============= CSS VARIABLES =============*/
:root {
   --bg-main: #FFFFFF;
   --bg-card: #F9FAFB;
   --text-main: #1F2933;
   --text-muted: #6B7280;
   --accent: #2563EB;
   --accent-hover: #1D4ED8;
   --border-light: #E5E7EB;
}

/*============= RESET STYLE =============*/
html {
   padding: env(safe-area-inset);
   scroll-behavior: auto !important;
}

/*-- Body Resets --*/
body {
   font-family: Inter, system-ui, -apple-system, sans-serif;
   color: var(--text-main);
   background-color: var(--bg-main);
}

/*-- Remove Blue Browser Outline --*/
a:focus,
button:focus {
   outline: 0 !important;
   box-shadow: none !important;
}

/*-- Pointer Cursor --*/
a,
.btn,
button {
   cursor: pointer !important;
   text-decoration: none;
   transition: all 0.3s ease;
}

/*-- Links --*/
a {
   color: var(--accent);
}

/*-- Paragraphs --*/
p {
   font-size: 1.1rem;
   line-height: 1.6;
}

/*-- Cards & Images --*/
.btn,
.img-fluid {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/*============= NAVIGATION =============*/
.navbar {
   padding: 0.6rem 0.9rem;
   font-size: 0.9rem;
   letter-spacing: 0.05rem;
   background-color: rgba(30, 41, 59, 0.9);
   font-weight: 600;
   text-transform: uppercase;
}

.navbar-brand img {
   height: 2rem;
}

.navbar-nav li {
   padding-right: 0.8rem;
}

.navbar-nav .nav-link {
   padding-top: 0.8rem;
   color: #ffffff;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
   color: #DBEAFE;
}

.navbar-toggler {
   border: none !important;
}

.svg-inline--fa.fa-bars {
   color: white;
   font-size: 1.6rem;
}

/*============= HERO / LANDING =============*/
.parallax-home {
   height: 100vh;
}

/*============= BUTTONS =============*/
.btn {
   font-size: 1rem;
   border-width: 2px;
   padding: 0.55rem 1.3rem;
   font-weight: 600;
   border-radius: 6px;
   letter-spacing: 0.03em;
}

/* Primary */
.btn-primary {
   background-color: var(--accent);
   border-color: var(--accent);
   color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
   background-color: var(--accent-hover);
   border-color: var(--accent-hover);
}

/* Outline */
.btn-outline-primary {
   color: var(--accent);
   border-color: var(--accent);
}

.btn-outline-primary:hover {
   background-color: #DBEAFE;
   color: var(--text-main);
}

/* Legacy support */
.bh-button {
   background-color: var(--accent) !important;
   border-color: var(--accent) !important;
   color: #ffffff !important;
}

.bh-button:hover,
.bh-button.active {
   background-color: var(--accent-hover) !important;
   border-color: var(--accent-hover) !important;
}

/*============= SOCIAL ICONS =============*/
.home-social {
   color: #ffffff;
   font-size: 1.8rem;
   padding-right: 1rem;
}

.home-social:hover {
   color: #DBEAFE;
}

/*============= SECTION HEADINGS =============*/
.heading {
   text-align: left;
   font-size: 2rem;
   text-transform: uppercase;
   font-weight: 700;
}

.heading-underline {
   width: 3rem;
   height: 0.25rem;
   background-color: var(--accent);
   margin: 1rem 0;
}

.text-custom {
   color: var(--accent);
}

/*============= ABOUT / SKILLS =============*/
.about .svg-inline--fa {
   color: var(--accent);
}

.lead {
   font-size: 1.3rem;
   color: var(--text-muted);
}

/* Light section divider */
.bg-light {
   background-color: var(--bg-card) !important;
   border-top: 1px solid var(--border-light);
   border-bottom: 1px solid var(--border-light);
}

/*============= TEAM / CARDS =============*/
#teammates img {
   border: 2px solid var(--accent);
}

#teammates h4 {
   color: var(--accent);
}

/*============= CONTACT / FOOTER =============*/
.footer {
   background-color: #1E293B;
   color: #ffffff;
}

.footer a {
   color: #ffffff;
}

.socket {
   border-top: 1px solid #374151;
}

/*============= MEDIA QUERIES =============*/
@media (max-width: 767.98px) {
   .parallax-home {
      min-height: 500px;
   }

   .btn {
      font-size: 0.95rem;
      padding: 0.5rem 1.1rem;
   }
}

/*============= PARALLAX SUPPORT =============*/
.parallax-container {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   position: relative;
   width: 100%;
   padding: 15px;
}

.parallax-container .parallax-content {
   margin: 0 auto;
   width: 100%;
}

.parallax__container {
   clip: rect(0, auto, auto, 0);
   height: 100%;
   left: 0;
   overflow: hidden;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: -100;
}

.parallax__container .parallax {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: fixed;
   top: 0;
   transform: translate3d(0, 0, 0);
   width: 100%;
}

.skill-card {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skill-card p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.skill-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}