@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');

.red {border: 1px solid red;}
.green {border: 1px solid green;}
.blue {border: 1px solid blue;}

.color-light {color: #B0BFBF;}
.color-dark {color: #4D5858;}
.color-p {color: #707070;}


html, body {
  overflow-x: hidden;
}

body {font-family: "Inter Tight", sans-serif; margin: 0px; padding: 0px; padding-top: 190px;}
h1 {color: #BCBCBC; font-size: 40px; padding: 10px 0; font-weight: 400;}
h2 {color: #4D5858; font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; line-height: 30px;}
h3 {color: #707070; font-size: 30px; font-weight:400;}
h4 {color: #fff; font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;}
p {color: var(--color-p); font-size: 20px; line-height: 28px;}
footer {margin-top: 100px; color: #4D5858; font-size: 15px; font-weight:500; text-transform: uppercase; letter-spacing: 2px; line-height: 50px;}
footer a:link { color: #4D5858; text-decoration: none;}
footer a:visited { color: #4D5858;}
.footer-line {border-top: 1px solid; color: #000;}
.details p{color: #BCBCBC}

/*
.page-arc {
  width: 100%;
  position: relative;
  margin-top: -40px; 
}

.page-arc svg {
  width: 100%;
  height: 200px;
  display: block;
}
*/

  /*
  position: fixed;
  top: 0px; 
  left: 500px;
  width: 100%;
  height: 1500px;
  border-top: 1px solid #d7d7d7;
  border-radius: 100% 100% 0 0;
  transform: scaleY(0.6);
  pointer-events: none;
  transform: rotate(-80deg);
  transform-origin: center;
  z-index: 10;
  */

.arc-line {
  position: fixed;
  top: 0px;
  right: -40vw;      /* push it partially off-screen */
  width: 100vw;      /* make it wide enough to cover rotation */
  /*left: 600px; 
  width: 1200px;*/
  height: 1500px;
  border-top: 2px solid #e4e4e4;
  border-radius: 100% 100% 0 0;
  transform: rotate(-80deg) scaleY(0.6); /* combine rotate and scale */
  transform-origin: center;
  pointer-events: none;
  z-index: 10;
}


.circle-image-wrapper {
  position: absolute;  /* so z-index works */
  z-index: 999;       /* topmost layer */
  pointer-events: none; /* makes it unselectable/click-through */
  height: 3000px;
  width: 3000px;
  margin-top: 1150px;
  margin-left: 100px;
  overflow: hidden;
}

.circle-image {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* make sure image fills the circle */
  border-radius: 50%;  /* makes it circular */
  user-select: none;   /* prevents text selection */
  display: block;
  overflow: hidden;
}

.circle-image-wrapper img {
  overflow: hidden;
}



.navbar {
  transition: all 0.3s ease-in-out;
}

.navbar.scrolled {
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  height: 80px;
}





.navbar.scrolled img {
  width: 30%;
  height: auto;
  /*padding-bottom: 20px;*/
}

.navbar {
    padding: 50px 0 30px 0;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
    background: #fff;
}

.navbar-light .navbar-nav .nav-link  {
    font-size: 15px;
    color: #B0BFBF;
}

.navbar-light .navbar-nav .nav-link.active  {
    color: #4D5858;
}

.navbar-nav {
    margin-left: auto;
  }

.navbar-nav .nav-item:not(:last-child) {
    padding-right: 50px;
}

.nav-link:hover {
    color: #4D5858 !important;
    transition: color 0.3s ease;
}

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
}


.container {
    max-width: 1400px !important;
}

.thumb {
    overflow: hidden;
}
  
.thumb img {
  transition: transform 0.3s ease;
}

.thumb:hover img {
  transform: scale(1.03); /* zoom in */
}

.thumb a:link {
  text-decoration: none;
}

.proj-name {
    font-size: 18px;
    font-weight: 600;
    color:#4D5858;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.proj-cat {
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: 400;
    color:#BCBCBC;
}

.read-more-btn {
    background-color: #4D5858;
    color: white;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    padding: 20px 35px;
    margin: 10px 0;
    border-radius: 0 !important;
    border: none;
}
  
.read-more-btn:hover {
    background-color: #a3aead; /* Bootstrap primary (blue) */
    color: white;
}

.welcome {
  margin-top: 100px;
}


.dash {border-bottom: 2px solid #a3aead; width: 70px;}

.line-with-text {
    display: flex;
    align-items: center;
    gap: 12px; /* space between line and text */
}
.line-with-text-right {
    display: flex;
    align-items: center;
    gap: 12px; /* space between line and text */
    flex-direction: row-reverse;
    /* margin-right: 100px; */
}

.about02 {
    text-align: center;
}

@media (min-width: 992px) {  /* lg breakpoint in Bootstrap 5 */
  .about02 {
    margin-top: -150px;
    text-align: right;
  }
}



/* ------------------------------------------------- */







/* Homepage Carousel */

.carousel-indicators {
  position: absolute;
  top: 20px;
  right: 20px;
  left: auto;
  bottom: auto;
  margin: 0;
  justify-content: flex-end;
}

.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.carousel-caption {
  bottom: -10px;
  left: 30px;   
  right: auto;
  text-align: left;
  max-width: 80%;
  width: auto;
  z-index:2;
}

/* Side Buttons */

.carousel-control-prev {
  left: -4%;
}

.carousel-control-next {
  right: -4%;
}

/* Gradient */

.carousel-item {
  position: relative;
}

.carousel-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 35%; /* controls how tall the fade is */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.2) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none; /* keeps slide clickable */
  z-index:1;
}


/* Mobile only */
@media (max-width: 768px) { /* Bootstrap: below md */
  .carousel-caption {
    bottom: -10px;
    left: 20px;   
    right: auto;
    text-align: left;
    max-width: 80%;
    width: auto;
  }
  .carousel-caption h4 {
    font-size: 1rem;
    padding: 0;
    margin: 0;
  }
  .carousel-caption p {
    font-size: 0.9rem;
    padding: 0;
    margin: 0;
  }
  .arc-line {
    right: -170vw;
    width: 200vw;
    height: 1200px;
    /* left: 200px; 
    width: 1200px; 
    height: 1500px; */
  }

  .navbar {
    padding: 10px 0;
    background: #fff;
  }

  .navbar.scrolled {
    height: 130px;
  } 
  
  .navbar-collapse {
    background: white;
    padding: 15px;
  }

  .navbar.scrolled img {
    width: 215px;
    height: auto;
    padding-bottom: 20px;
  }
}