@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Manrope:wght@200..800&display=swap');
/*utlity*/
a {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* For some Androids */
}
.center{
  text-align: center;
}
.blue {
    color: rgb(0, 128, 255);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid #d3d3d3; /* Light grey */
  border-radius: 100px;      /* 100% radius (pill shape) */
  background: transparent;
  color: #333;
  text-decoration: none;
  font-family: sans-serif;
  transition: all 0.3s ease;
  position: relative;
  gap: 0px; /* Space for the arrow */
  font-size: 20px;
  font-weight: 300;
}
/*swiper*/
.mySwiper {
  width: 100%;
  position: relative;
}

/* Slides */
.swiper-slide {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 45px;
  font-size: 24px;
  height: 300px; /* adjust as needed */
  box-sizing: border-box;
}

/* Controls wrapper */
.swiper-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 20px;
}

/* Buttons */
.swiper-button-prev,
.swiper-button-next {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Remove default Swiper positioning quirks */
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 20px;
  line-height: 1;
}

/* Optional: improve hit area */
.swiper-button-prev,
.swiper-button-next {
  border-radius: 50%;
}

/* Responsive slide sizing (if not using Swiper breakpoints) */
@media (max-width: 1024px) {
  .swiper-slide {
    height: 250px;
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .swiper-slide {
    height: 220px;
    font-size: 18px;
  }
}
.swiper-controls .swiper-button-next, .swiper-controls .swiper-button-prev {
    padding: 15px;
    background: transparent;
    width: 20px;
    height: 20px;
    
}
.swiper-button-next:after, .swiper-button-prev:after {
    color: black;
    font-weight: 900;
    font-size: 16px !important;
}
/* The Arrow using Bootstrap Icon Unicode */
.button::after {
  content: "\F138"; /* Bootstrap bi-arrow-right icon code */
  font-family: "bootstrap-icons";
  font-size: 1.1rem;
  opacity: 0;
  max-width: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}
.container.blue-glass {
    will-change: var(--framer-will-change-override, transform);
    background: linear-gradient(#e7f5ff80 0%, #fff 100%);
    border-radius: 24px;
    flex-flow: column;
    flex: none;
    place-content: flex-start;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
    height: min-content;
    padding: 40px 40px 40px;
    display: flex;
    position: relative;
    overflow: hidden;
    margin: auto;
    min-width: 100%;
    border: solid 0.8px #c0c0c0;
}
.blue-glass p{
    max-width: 580px;
}
.up::after {
  content: "\F148"; /* Bootstrap bi-arrow-right icon code */
}
.down::after {
  content: "\F128"; /* Bootstrap bi-arrow-right icon code */
}

/* The Button */
.scroll-btn {
  position: absolute;
  bottom: 50px; /* Distance from the bottom of the .hero-section */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  transition: transform 0.2s ease, background 0.2s ease;
}

.scroll-btn:hover {
  transform: translateX(-50%) scale(1.05); /* Keeps it centered while scaling */
}


/* Hover effect for Desktop */
@media (min-width: 969px) {
  .button:hover {
    padding-right: 25px; /* Adjust padding to make room for arrow */
    border-color: #999;
  }
  
  .button:hover::after {
    opacity: 1;
    max-width: 30px;
    transform: translateX(8px);
  }
}

/* Permanent display for Mobile (968px and below) */
@media (max-width: 968px) {
  .button {
    padding-right: 40px; /* Make room for the fixed arrow */
  }
  
  .button::after {
    opacity: 1;
    max-width: 30px;
    transform: translateX(8px);
  }
}
/* Margin Top */
.mt-0 { margin-top: 0 !important; }
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mt-60 { margin-top: 60px !important; }
.mt-70 { margin-top: 70px !important; }
.mt-80 { margin-top: 80px !important; }
.mt-90 { margin-top: 90px !important; }
.mt-100 { margin-top: 100px !important; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-60 { margin-bottom: 60px !important; }
.mb-70 { margin-bottom: 70px !important; }
.mb-80 { margin-bottom: 80px !important; }
.mb-90 { margin-bottom: 90px !important; }
.mb-100 { margin-bottom: 100px !important; }

/* Padding Top */
.pt-0 { padding-top: 0 !important; }
.pt-10 { padding-top: 10px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-30 { padding-top: 30px !important; }
.pt-40 { padding-top: 40px !important; }
.pt-50 { padding-top: 50px !important; }
.pt-60 { padding-top: 60px !important; }
.pt-70 { padding-top: 70px !important; }
.pt-80 { padding-top: 80px !important; }
.pt-90 { padding-top: 90px !important; }
.pt-100 { padding-top: 100px !important; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-10 { padding-bottom: 10px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pb-40 { padding-bottom: 40px !important; }
.pb-50 { padding-bottom: 50px !important; }
.pb-60 { padding-bottom: 60px !important; }
.pb-70 { padding-bottom: 70px !important; }
.pb-80 { padding-bottom: 80px !important; }
.pb-90 { padding-bottom: 90px !important; }
.pb-100 { padding-bottom: 100px !important; }
/* global*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  margin:0;
  font-family: Arial;
  background:#f1f1f0;
  font-family: "Manrope", sans-serif;
}
html, body {
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
#dynamic-text{
  font-weight: 400;
}
.main-nav {
    width: 100%;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    border-bottom: rgb(179, 179, 179) 0.6px solid;
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.2);
    position: fixed;
    align-items: center;
    z-index: 999;
}
.main-nav ul{
  display: inline;
}
.main-nav ul li {
  display: inline-block;
  padding: 0 10px;
}
nav a, .menu h1 a{
  text-decoration: none;
  color: black;
}
/*fonts*/
.body-text{
  font-size: 20px;
}
.body-text-light{
  font-size: 18px;
  font-weight: 300;
  color: rgb(57, 57, 57);
}
h1 {
  font-size: clamp(55px, 5vw, 75px);
  font-weight: 500;
  line-height: 1;
}
.menu h1{
  font-size: clamp(45px, 5vw, 65px);
  font-weight: 500;
  line-height: 1;
}
/*homepage*/
section{
  border-bottom: rgb(179, 179, 179) 0.6px solid;
  padding: 50px 0px;
  position: relative;
}
section .intro {
  height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  max-width: 1300px;
  margin: auto;
  gap: 70px;
}
.intro .container{
  max-width: 580px;
  position: relative;
}
section .intro.project {
    height: 90vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px;
    max-width: 1300px;
    margin: auto;
    align-items: center;
}

@media (max-width: 968px) {
section .intro.project {
        display: flex;
        flex-direction: column;
        padding: 50px 20px;
        height: fit-content;
    }
}

/*work page*/
.second-nav {
    position: fixed;
    top: 63px;
    left: 0;
    width: 100%;
    height: 35px;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 888;
    padding: 0 20px;
}

.desktop-links { 
  display: flex; 
  gap: 20px; 
  list-style: none; 
}

.desktop-links a { 
  text-decoration: none; 
  color: white; 
}

.mobile-switcher { 
  display: none; 
  gap: 10px; 
  align-items: center; 
  color: white;
}

.nav-arrow {
  cursor: pointer;
  font-size: 20px;
  border: none;
  background: none;
  color: white;
}

.full-page {
  scroll-margin-top: 60px; /* nav height */
}


.intro-footer.mt-40 {
    display: flex;
    flex-direction: row;
    gap: 50px;
}

section .work.project {
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px;
    max-width: 1300px;
    margin: auto;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 120px;
}
.intro-footer.mt-40 div {
    max-width: 400px;
}
.intro-text.mt-40 {
    display: flex;
    flex-direction: row;
    gap: 50px;
}

/* Mobile styles */
@media (max-width: 968px) {
  .desktop-links { display: none; }
  .mobile-switcher { display: flex; }
  .intro-footer.mt-40 {
    flex-direction: column;
}
.intro-footer.mt-40 div {
    max-width: 600px;
}
.intro-text.mt-40 {
    flex-direction: column;
}
}

.image-row {
  display: flex;
  gap: 20px;
}

/* Column widths */
.col-1 {
  flex: 1;
}
.col-2 {
  flex: 3;
}

/* Centering wrapper */
.image-col {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-direction: column;
}

.image-col p{
  color: rgb(0, 128, 255);
}

/* Image behaviour */
.image-col img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* keeps full image visible */
}

/* Responsive */
@media (max-width: 968px) {
  .image-row {
    flex-direction: column;
  }

  .image-col {
    width: 100%;
  }
}
.image-row div {
    background: #e2e2e2;
    border-radius: 15px;
    padding: 40px;
}
.image-full {
  width: 100%;
  display: flex;
  justify-content: center;  /* horizontal center */
  align-items: center;      /* vertical center */
  overflow: hidden;
  background: #e2e2e2;
    border-radius: 15px;
    padding: 40px;
}

/* Image behaviour */
.image-full img {
  width: 100%;
  height: auto;
  display: block;
}