/* Color variables */
:root {
  --white-color: #fff;
  --bg-color: #fff; /* Changed to black */
  --gray-color: #ccc;
 --black-color: #000;
}

/* Changing background color */
body {
  background: var(--bg-color) !important;
  color: var(--white-color); /* Changed to white */
}

/* Changing link color */
.nav-item .nav-link {
  color: var(--white-color);
}

/* Hero section background image */
.hero {
  height: 100vh;
  background-image: url("/images/home-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}


#skills i {
  height: 100px;
  width: 100px;
}

#portfolio img {
  height: 300px;
  object-fit: cover;
}

#about .img,
#about img,
.hire-text h2 {
  position: relative;
}

/* Timeline background line */
#about .img::before {
  content: "";
  left: 50%;
  width: 4px;
  position: absolute;
  height: calc(100% + 140px);
  background: var(--gray-color);
}

#about img,
#about .hire-text h2 {
  width: 140px;
}

#about .hire-text h2 {
  height: 140px;
}

.social-icons a {
  width: 40px;
  height: 40px;
}

footer .social-icons a {
  width: 30px;
  height: 30px;
}

#cv img {
  width: 230px;
}

/* Contact section background image */
#contact {
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-image: url("../images/contact-bg.jpeg");
}

/* Navbar brand adjustments */
.navbar-brand img {
  height: 60px;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.brand-text {
  display: flex;
  flex-direction: column;
  margin-left: 10px; /* Added margin */
}

.tagline {
  color: red;
  font-size: 10px; /* Reduced font size */
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.navbar-brand .brand-title {
  font-size: 1.25rem;
}

/* Media Queries for Responsiveness */
@media (min-width: 280px) {
  .navbar-brand img {
    height: 40px; /* Reduced logo height */
  }

  .navbar-brand .brand-title {
    font-size: 0.75rem; /* Reduced title font size */
  }

  .tagline {
    font-size: 4px; /* Adjusted tagline font size */
  }
}

@media (min-width: 476px) {
  .navbar-brand img {
    height: 40px; /* Reduced logo height */
  }

  .navbar-brand .brand-title {
    font-size: 0.75rem; /* Reduced title font size */
  }

  .tagline {
    font-size: 4px; /* Adjusted tagline font size */
  }
}

@media (min-width: 768px) {
  .navbar-brand img {
    height: 60px; /* Adjusted logo height */
  }

  .navbar-brand .brand-title {
    font-size: 1.5rem; /* Adjusted title font size */
  }

  .tagline {
    font-size: 10px; /* Adjusted tagline font size */
  }
}

@media (min-width: 992px) {
  .navbar-brand img {
    height: 70px; /* Adjusted logo height */
  }

  .navbar-brand .brand-title {
    font-size: 1.75rem; /* Adjusted title font size */
  }

  .tagline {
    font-size: 11px; /* Adjusted tagline font size */
  }
}

/* Container width adjustment */
.container-fluid {
  width: 100% !important;
}

/* Navbar styling */
.navbar {
    background-color: var(--white-color) !important;
}
.navbar-brand, .navbar-nav .nav-link {
    color: var(--white-color) !important;
}
.navbar-nav .nav-link:hover {
    color: var(--white-color) !important;
}
.dropdown-menu {
    background-color: var(--white-color) !important;
}
.dropdown-menu .dropdown-item {
    color: var(--black-color) !important;
}
.dropdown-menu .dropdown-item:hover {
    background-color: #ccc !important;
}
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Ensure it stays behind other content */
}

#background-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire container */
    opacity: 0.8; /* Optional: Adjust opacity to make it less dominant */
}

/* Example styling for content */
.content {
    position: relative;
    z-index: 1; /* Ensure content appears on top of the video */
    text-align: center;
    color: white;
    padding: 50px;
}