* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth; /* smooth scroll effect */
}
body {
  background-color: black;
}

/* nav-bar */
.main-navigation {
  background: #000000;
  padding: 0.75rem 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 40px;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.navbar-brand {
  display: flex;
  align-items: center;
}
.navbar-brand img {
  height: 50px;
  display: block;
  object-fit: contain;
}
.navbar-nav {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.navbar-nav li {
  position: relative;
}
.navbar-nav .nav-link {
  font-weight: 600;
  color: #ffffff;
  padding: 0.5rem;
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: #ffffff;
}
.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link:hover::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 2px;
  background: #ff2a2a; /* red underline */
  bottom: 0;
  left: 0;
}

/* Hero section */
.hero-sec {
  display: flex;
  justify-content: space-around;
  margin-top: 10%;
  margin-bottom: 10%;
}
.hero-text h1 span {
  color: #ff2a2a; /* red */
  font-size: 50px;
  line-height: 36px;
  letter-spacing: 1px;
}
.hero-text h1 {
  color: #ffffff;
  font-size: 39px;
  line-height: 36px;
  letter-spacing: 1px;
  margin-bottom: 40px;
}
.hero-pic {
  width: 500px;
  height: 500px;
}
.hero-text p {
  color: #ffffff;
  font-size: 25px;
  border-left: 3px solid #ff2a2a;
  padding-left: 20px;
  margin-bottom: 35px;
}
.hover-btn {
  background-color: #ff2a2a;
  text-decoration: none;
  color: white;
  padding: 20px 30px 20px 30px;
}
.hover-btn:hover {
  background-color: #000000;
  border: #ff2a2a solid 1px;
  color: #ff2a2a;
}

/* About Us */
.about-us {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 100px;
  margin-bottom: 70px;
}
.about-text h1 span {
  color: #ff2a2a;
  font-size: 50px;
  line-height: 36px;
  letter-spacing: 1px;
}
.about-text h1 {
  color: #ffffff;
  font-size: 39px;
  line-height: 36px;
  letter-spacing: 1px;
  margin-bottom: 40px;
}
.about-img {
  width: 350px;
  height: 350px;
  display: flex;
}
.about-text p {
  color: #ffffff;
  font-size: 20px;
  border-left: 3px solid #ff2a2a;
  padding-left: 20px;
  margin-bottom: 50px;
}
.about-btn {
  background-color: #ff2a2a;
  text-decoration: none;
  color: white;
  padding: 20px 30px 20px 30px;
}
.about-btn:hover {
  background-color: #000000;
  border: #ff2a2a solid 1px;
  color: #ff2a2a;
}

/* Portfolio */
.port-text {
  display: flex;
  justify-content: space-around;
  margin-bottom: 60px;
  gap: 220px;
}
.port-ex span {
  color: #ff2a2a;
  font-size: medium;
}
.port-ex h1 {
  color: #ffffff;
  font-size: 30px;
}
.port-lorem p {
  color: #ffffff;
  font-size: 20px;
  border-left: 3px solid #ff2a2a;
  padding-left: 20px;
  margin-bottom: 50px;
}

/* portfolio cards */
.port-boxes {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}
.port-box {
  padding: 35px;
}
.port-box h5 {
  color: #ffffff;
  font-size: 15px;
  margin-bottom: 15px;
}
.port-box h3 {
  color: #ff2a2a;
  font-size: 22px;
  margin-bottom: 15px;
}
.port-box p {
  color: #ffffff;
  font-size: 17px;
  line-height: 22px;
}
.port-box:hover {
  background-color: #1a1919;
  transition: 0.5s all ease-in-out;
  transform: translateY(-10px);
}

/* portfolio circles */
.port-circle {
  display: flex;
  justify-content: space-around;
  margin-bottom: 50px;
}
.circle-1, .circle-2, .circle-3, .circle-4 {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background: conic-gradient(#ff2a2a 0% 60%, white 0% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 15px;
  position: relative;
}
.circle-1::before, .circle-2::before, .circle-3::before, .circle-4::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: #000;
  border-radius: 50%;
}
.circle-1 span, .circle-2 span, .circle-3 span, .circle-4 span {
  position: absolute;
}

/* Services */
.service-text {
  display: flex;
  justify-content: space-around;
  margin-bottom: 60px;
  gap: 250px;
}
.service-tx {
  color: #ffffff;
}
.service-tx h6 {
  color: #ff2a2a;
  font-size: 20px;
}
.service-tx h2 span {
  color: #ff2a2a;
}
.service-tx h2 {
  font-size: 50px;
}
.service-lr {
  color: #ffffff;
  font-size: 20px;
  border-left: 3px solid #ff2a2a;
  padding-left: 20px;
  margin-bottom: 50px;
}

/* services-boxes */
.service-box {
  display: flex;
  justify-content: space-around;
  margin-bottom: 35px;
}
.service-box1 h1 {
  color: #ff2a2a;
  margin-bottom: 20px;
  transition: 0.5s all ease-in-out;
}
.service-box1:hover h1 {
  transition: 0.5s all ease-in-out;
  color: white;
}
.service-box1 p {
  color: #fff;
  font-size: 20px;
}
.service-box1 {
  text-align: center;
  padding: 30px;
  width: 350px;
  height: 350px;
  transition: 0.5s all ease-in-out;
}
.service-box1 img {
  margin-bottom: 20px;
}
.service-box1:hover {
  color: white;
  background-color: #ff2a2a;
  transition: 0.5s all ease-in-out;
}
.service-box2 {
  background-color: #ff2a2a;
  text-align: center;
  padding: 30px;
  width: 350px;
  height: 350px;
}
.service-box2 h1 {
  color: #f8fbf9;
  margin-bottom: 20px;
}
.service-box2 p {
  color: #fff;
  font-size: 20px;
}
.service-box2 img {
  margin-bottom: 20px;
}

/* Projects */
.pro-jects{
  margin-bottom: 60px;
  margin-top: 60px;
}
.project-txt{
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}
.proj-tx1 h6{
  color: #ff2a2a;
  font-size: 15px;
}
.proj-tx1 h2{
  color: #fff;
  font-size: 30px;
}
.proj-tx1 h2 span{
  color: #ff2a2a;
}
.proj-tx2 p{
  color: #ffffff;
  font-size: 15px;
  border-left: 3px solid #ff2a2a;
  padding-left: 20px;
  margin-bottom: 50px;
}
.proj-ico i{
  color: #ff2a2a;
  font-size: 35px;
}

/* project pics */
.proj-pics{
  display: flex;
  justify-content: space-around;
}

/* Testimonials */
.testi-2 {
  display: flex;
  align-items: center;
  background-color: #0a0a0a; 
  padding: 40px;
  border-radius: 10px;
  color: #fff;
  font-family: 'Arial', sans-serif;
}
.sec2-img img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 30px;
}
.sec2-txt {
  max-width: 800px;
  position: relative;
}
.quote-icon {
  width: 40px;
  margin-bottom: 10px;
  display: block;
}
.sec2-txt h4 {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.6;
  text-transform: uppercase;
  color: #ffffff;
}
.sec2-txt p {
  margin-top: 15px;
  font-size: 16px;
  color: #ccc;
}

/* Responsive */
@media screen and (max-width: 778px) {
  .navbar-nav {
    display: none;
  }
  .navbar-toggler {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .hero-img {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .about-us{
    flex-direction: column;
  }
  .about-text{
    display: inline;
  }
  .about-img{
    height: auto;
    width: 50px;
  }
}
@media screen and (max-width: 768px) {
  .port-boxes{
    flex-direction:column;
  }
}
@media screen and (max-width: 768px) {
  .port-circle{
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  .service-box{
    flex-direction: column;
  }
  .service-box1, .service-box2{
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 768px) {
  .proj-pics{
    flex-direction: column;
  }
}

/* Extra Responsive Media Queries */

/* ===== Mobile devices (portrait phones ≤ 576px) ===== */
@media (max-width: 576px) {
  .hero-sec {
    flex-direction: column;
    text-align: center;
    margin: 50px 20px;
  }
  .hero-text h1 {
    font-size: 28px;
    line-height: 34px;
  }
  .hero-text p {
    font-size: 18px;
  }
  .hero-pic {
    width: 100%;
    height: auto;
    margin-top: 20px;
  }

  .about-us {
    flex-direction: column;
    gap: 30px;
    padding: 20px;
    text-align: center;
  }
  .about-text h1 {
    font-size: 28px;
  }
  .about-text p {
    font-size: 16px;
  }
  .about-img {
    width: 250px;
    height: auto;
  }

  .port-boxes,
  .service-box,
  .proj-pics {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .port-circle {
    flex-direction: column;
    gap: 20px;
  }

  .service-box1,
  .service-box2 {
    width: 100%;
    max-width: 320px;
  }
}

/* ===== Tablets (portrait/landscape ≤ 768px) ===== */
@media (max-width: 768px) {
  .navbar {
    justify-content: space-between;
    padding: 0 20px;
  }
  .navbar-nav {
    display: none; /* convert to hamburger later */
  }

  .hero-sec {
    flex-direction: column;
    margin: 60px 20px;
    text-align: center;
  }

  .about-us {
    flex-direction: column;
    gap: 40px;
  }

  .port-text,
  .service-text,
  .project-txt {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .testi-2 {
    flex-direction: column;
    text-align: center;
  }
  .sec2-img img {
    margin: 0 auto 20px auto;
  }
}

/* ===== Small laptops (≤ 992px) ===== */
@media (max-width: 992px) {
  .hero-sec {
    gap: 40px;
  }
  .about-us {
    gap: 60px;
  }
  .port-text,
  .service-text,
  .project-txt {
    gap: 40px;
  }
  .port-box,
  .service-box1,
  .service-box2 {
    width: 100%;
    max-width: 400px;
  }
}

/* ===== Large desktops (≥ 1200px) ===== */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .hero-sec {
    max-width: 1100px;
    margin: 120px auto;
  }
  .about-us,
  .port-boxes,
  .service-box,
  .proj-pics {
    max-width: 1100px;
    margin: 0 auto;
  }
}
@media (max-width: 576px) {
  .about-img img {
    width: 200px;   /* smaller width */
    height: auto;   /* maintain aspect ratio */
    margin: 0 auto; /* center it */
    display: block;
  }
}