/* =========================
   VARIABLES
   — custom + override Bootstrap
========================= */
:root {
  /* Tus colores */
  --color-pp:     #450b55;
  --body-bg:      #FCFCFC;
  --body-color:   #1D0724;
  --brand-dark:   #1a0628;
  --brand-purple: #8b2cf5;
  --brand-accent: #a855f7;

  /* Override variables de Bootstrap */
  --bs-body-bg:       #FCFCFC;
  --bs-body-color:    #1D0724;
  --bs-dark:          #450b55;
  --bs-dark-rgb:      69, 11, 85;
  --bs-link-color:    #8b2cf5;
  --bs-link-hover-color: #a855f7;
}

/* =========================
   BASE
========================= */
*, *::before, *::after {
 
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

body {
  font-family: "Space Grotesk", sans-serif;
  background-color: var(--body-bg);
  color: var(--body-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

h2, h3 {
  font-style: italic;
  font-weight: 500;
}
h2{
  color: #f3f4f6;
}
.h2-intro{
  color: #100118;
}
h3 {
  color: #450b55;
  font-size: 32px;
}


/* =========================
   MENU
========================= */
.menu {
  background-color: #510565;
  border-radius: 999px;
  padding: 0.6rem 2rem;
}

.menu a,
.menu .nav-link {
  color: #FCFCFC !important;
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.menu a:hover,
.menu .nav-link:hover {
  color: var(--brand-accent) !important;
}

.menu a.active,
.menu .nav-link.active {
  color: var(--brand-accent) !important;
}

/* =========================
   TEXT UTILITIES
========================= */
.text-outline {
  -webkit-text-stroke: 1px #130822;
  color: transparent;
}

.text-accent {
  color: #130822;
}

/* =========================
   HERO
========================= */
.tarjetita {
  background-color: #000;
  display: block;
  width: 280px;
  white-space: normal;
  left: 20rem;
  bottom: 5rem;
}

@media (max-width: 768px) {
  .tarjetita-floating {
    left: 50%;
    right: auto;
    bottom: 1rem;
    transform: translateX(-50%);
  }
}

/* =========================
   CONTACTO
========================= */
body .contacto {
  background-color: #1D0724;
  color: white;
}

body .contacto h2 {
  color: white;
}

/* Inputs y textarea */
body .contacto .form-control {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: white;
}

body .contacto .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

/* Bootstrap sobreescribe el color al hacer focus, hay que repetirlo */
body .contacto .form-control:focus {
  background-color: transparent;
  border-color: #a855f7;
  color: white;
  box-shadow: 0 0 0 0.2rem rgba(168, 85, 247, 0.25);
}

/* Botón enviar */
body .contacto .btn {
  background-color: #450b55;
  color: white;
  border: none;
  padding: 0.5rem 2rem;
}

body .contacto .btn:hover {
  background-color: #8b2cf5;
  color: white;
}

/* =========================
   BOTONES
========================= */
.btn-custom {
  background-color: var(--color-pp);
  color: #FCFCFC;
  border-radius: 999px;
}

.btn-project {
  background: var(--brand-purple);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.5rem;
  margin-top: 1rem;
  transition: background 0.3s;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}

.btn-project:hover {
  background: var(--brand-accent);
  color: white;
}
nav {
  
  
  width: 100%;
  z-index: 10;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 24px 40px;
  background: transparent; /* clave */
}

/* =========================
   FOOTER
========================= */
footer {
  background-color: #000;
  height: 6rem;

}

/* =========================
   ANIMACIONES
========================= */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes liquid-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%       { transform: scale(1.05) rotate(180deg); }
}

@keyframes space-drift {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.1) translate(-1%, -1%); }
  100% { transform: scale(1) translate(0, 0); }
}

.animate-spin-slow      { animation: spin-slow 60s linear infinite; }
.animate-spin-reverse   { animation: spin-slow 80s linear infinite reverse; }
.animate-liquid-orbital { animation: liquid-pulse 20s ease-in-out infinite; }
.animate-space-bg       { animation: space-drift 30s ease-in-out infinite; }

/* =========================
   PROYECTOS HOME
========================= */
.projects-section {
  padding: 120px 0;
  background-color: var(--body-bg);
  color: var(--body-color);
}

.project-item {
  min-height: 70vh;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(29, 7, 36, 0.08);
  opacity: 0.35;
  transition: all 0.5s ease;
  
}

.project-item.active { opacity: 1; }

.project-content small {
  color: #450b55;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.project-content h2 {
  font-size: clamp(3rem, 7vw, 7rem);
  font-style: italic;
  margin-bottom: 20px;
  color: var(--body-color);
  line-height: 0.95;
}

.project-content p {
  color: rgba(29, 7, 36, 0.65);
  font-size: 1.05rem;
  max-width: 420px;
}

.preview-wrapper {
  position: sticky;
  top: 180px;
  height: calc(80vh - 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.preview-image {
  width: 100%;
  height: 80vh;
  
  object-fit: cover;
  border-radius: 32px;
  transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.08);
}




.preview-image:hover { transform: scale(1.02); }

.preview-text {
  margin-top: 24px;
  color: rgba(29, 7, 36, 0.7);
  line-height: 1.8;
  font-size: 1.05rem;
  max-width: 500px;
}

@media (max-width: 991px) {
  .project-item    { min-height: auto; padding: 100px 0; }
  .preview-image   { height: 50vh; }
  .preview-wrapper { position: relative; top: auto; margin-top: 40px; }
}


/* =========================
   GALLERY SLIDERS
========================= */
.gallery-section { overflow: hidden; }
.gallery-section .swiper { overflow: visible; }

.gallery-section .swiper-slide {
  width: 420px;
  height: 260px;
  border-radius: 28px;
  overflow: hidden;
}

.gallery-section .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), filter 0.6s ease;
}

.gallery-section .swiper-slide:hover img { transform: scale(1.05); }

@media (max-width: 768px) {
  .gallery-section .swiper-slide { width: 280px; height: 180px; }
}



/* =========================
contacto toast
========================= */

.toast-message {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;

    background: linear-gradient(
        135deg,
        var(--brand-dark),
        #2a0a3a
    );

    box-shadow: 0 10px 30px rgba(69, 11, 85, 0.25);
    backdrop-filter: blur(10px);

    opacity: 0;
    transform: translateY(20px);
    transition: all .35s ease;

    z-index: 9999;
    min-width: 260px;
}

.toast-message.show {
    opacity: 1;
    transform: translateY(0);
}




/* =========================
   PAGE TITLE
========================= */
.page-title{
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  font-size: clamp(2.5rem, 5vw, 4rem);
}
#hero-title{
 font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  margin-top: 6rem;

}
/* =========================
   PROYECTOS WEB — imagen
========================= */
.project-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-image:
    linear-gradient(45deg,  #f3f4f6 25%, transparent 25%),
    linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, #f3f4f6 75%),
    linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

/* =========================
   PROJECT WRAPPER
========================= */
.project-item-custom {
  margin-bottom: 140px;
}

.project-wrapper {
  position: relative;
  display: inline-block;
  width: 75%;
}

/* =========================
   PROJECT CARD
========================= */
.project-card-custom {
  background: var(--brand-dark);
  color: white;
  border-radius: 0 120px 120px 120px;
  padding: 2.5rem 2.8rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  width: 58%;
  position: absolute;
  bottom: -2.5rem;
  right: -20rem;
  z-index: 2;
}

.project-card-custom h2 {
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: white;
}

.project-card-custom p {
  color: #c4b5fd;
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.6;
}





@media (max-width: 768px) {
  #hero-title{
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .project-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .project-image {
    width: 100%;
    height: 220px;
    margin-bottom: 0px;
  }

  .project-card-custom {
    width: 100%;
    position: relative;
    margin-top: 1rem;
    left: 0;
    margin-top: 0px;

    /* asegura que quede debajo visualmente */
    order: 2;
  }

}

/* =========================
   TAGS
========================= */
.tags {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9ca3af;
  contain: content;
}

/* ============================================================
       HERO — título del proyecto
    ============================================================ */
    .project-hero {
      padding: 4rem 0 3rem;
      background-color: var(--body-bg);
    }

    .project-hero h1 {
      font-size: clamp(2.5rem, 6vw, 5rem);
      font-weight: 800;
      font-style: italic;
      text-transform: uppercase;
      letter-spacing: -0.05em;
      line-height: 1;
      color: var(--body-color);
    }

    /* ============================================================
       DARK STAGE — todo el contenido oscuro
    ============================================================ */
    .dark-stage {
      background-color: var(--body-color);
      padding: 6rem 0 8rem;
      position: relative;
      overflow: hidden;
    }

    /* Anillos decorativos */
    .ring-deco {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(223, 209, 234, 0.999);
      pointer-events: none;
    }
    .r1 { width:700px; height:700px; top:-200px;  left:-250px; }
    .r2 { width:500px; height:500px; top:10%;     right:-180px; }
    .r3 { width:800px; height:800px; bottom:-300px; left:-300px; }
    .r4 { width:600px; height:600px; bottom:5%;   right:-200px; }

    /* ============================================================
       BLOB — formas circulares / elípticas reutilizables
    ============================================================ */
    .blob {
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      /* checkerboard placeholder */
      background-image:
        linear-gradient(45deg, #c8c8c8 25%, transparent 25%),
        linear-gradient(-45deg, #c8c8c8 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #c8c8c8 75%),
        linear-gradient(-45deg, transparent 75%, #c8c8c8 75%);
      background-size: 30px 30px;
      background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
      background-color: #d8d8d8;
    }

    /* Tamaños */
    .blob-s   { width:240px; height:240px; }
    .blob-m   { width:340px; height:340px; }
    .blob-l   { width:440px; height:440px; }
    .blob-pill-h { width:500px; height:300px; border-radius: 250px; }  /* pill horizontal */
    .blob-pill-v { width:260px; height:380px; border-radius: 200px; }  /* pill vertical */

    /* Blob vacío / solo borde */
    .blob-ghost {
      background: rgba(255,255,255,0.04);
      background-image: none;
      border: 1px solid rgba(255,255,255,0.12);
    }
    .blob-tall {
  width: 320px;
  height: 720px;

  border-radius: 999px;
  overflow: hidden;

  flex-shrink: 0;
}

.blob-tall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
    /* ============================================================
       CONTENT ROW — cada par imagen/texto
    ============================================================ */

.story-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 5rem;

  position: relative;
  z-index: 2;

  margin-bottom: 5rem;
}

.story-content {
  display: flex;
  flex-direction: column;
}

.blob-story {
  width: 320px;
  height: 850px;

  border-radius: 999px;
  overflow: hidden;

  position: sticky;
  top: 120px;

  align-self: start;
}

.blob-story img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-content .content-row {
  margin-bottom: 4rem;
}

.story-content .section-text {
  max-width: 560px;
}


    .content-row {
      display: flex;
      align-items: center;
      gap: 4rem;
      margin-bottom: 2rem;
      position: relative;
      z-index: 1;
    }
    .content-row.reverse { flex-direction: row-reverse; }

    .section-text h2 {
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      font-weight: 700;
      font-style: italic;
      color: white;
      margin-bottom: 1.2rem;
    }
    .section-text p {
      font-size: 0.88rem;
      line-height: 1.9;
      color: rgba(255,255,255,0.6);
      max-width: 380px;
    }

    /* ============================================================
       FULL-WIDTH BLOB ROW (imagen ancha centrada)
    ============================================================ */
    .full-blob-row {
      display: flex;
      justify-content: center;
      margin-bottom: 3rem;
      position: relative;
      z-index: 1;
    }

    /* ============================================================
       SOLUCIONES + IMPLEMENTACIÓN — fila especial
    ============================================================ */
    .sol-row {
      display: flex;
     
      
      gap: 3rem;
      margin-bottom: 2rem;
      position: relative;
      z-index: 1;
    
    }

    .sol-text {
      flex: 1;
    }
    .sol-text h2 {
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 700;
      font-style: italic;
      color: white;
      margin-bottom: 1rem;
    }
    .sol-text p {
      font-size: 0.88rem;
      line-height: 1.9;
      color: rgba(255,255,255,0.6);
    }

    .impl-blob {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.03);
      flex-shrink: 0;
    }
    .impl-blob h2 {
      font-size: clamp(1.4rem, 2.5vw, 2rem);
      font-style: italic;
      color: white;
      text-align: center;
    }

    /* ============================================================
       RELATED PROJECTS — sección blanca al final
    ============================================================ */
    .related-section {
      background-color: var(--body-bg);
      padding: 5rem 0 4rem;
    }

    .related-section h2 {
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 800;
      font-style: italic;
      letter-spacing: -0.04em;
      margin-bottom: 2rem;
    }

    .related-card {
      display: flex;
      flex-direction: column;
      gap: 1rem;
         text-decoration: none;
    }

    .related-thumb {
      width: 50%;
      aspect-ratio: 1/1;
      border-radius: 50%;
      overflow: hidden;
      background-image:
        linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
        linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
        linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
      background-size: 30px 30px;
      background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
      background-color: #ebebeb;
      transition: transform 0.5s cubic-bezier(0.19,1,0.22,1);
    }
    .related-card:hover .related-thumb { transform: scale(1.04); }

    .related-title {
      font-size: 0.8rem;
      font-weight: 700;
      font-style: italic;
      margin-left: 1.5rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--body-color);
   
    }
/* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 768px) {
      .content-row,
      .content-row.reverse,
      .sol-row { flex-direction: column; gap: 0.5rem; margin-bottom: 2rem; }

      .blob-l, .blob-pill-h { width: 90vw; height: 55vw; border-radius: 50vw; }
      .blob-m { width: 70vw; height: 70vw; }
      .impl-blob { width: 80vw; height: 80vw; }

      .section-text p,
      .sol-text p { max-width: 100%; }
    }

     .perfil-hero {
      position: relative;
      min-height: 88vh;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .perfil-hero__bg {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(45deg,  #e4e4e4 25%, transparent 25%),
        linear-gradient(-45deg, #e4e4e4 25%, transparent 25%),
        linear-gradient(45deg,  transparent 75%, #e4e4e4 75%),
        linear-gradient(-45deg, transparent 75%, #e4e4e4 75%);
      background-size: 40px 40px;
      background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
      background-color: #efefef;
      z-index: 0;
    }

    .perfil-hero__content {
      position: relative;
      z-index: 2;
      padding: 5rem 0 3rem;
    }

    .perfil-hero__title {
      font-size: clamp(2.6rem, 5.5vw, 5rem);
      font-weight: 800;
      font-style: italic;
      line-height: 1.05;
      letter-spacing: -0.04em;
      color: var(--body-bg, #f3f4f6);
    }

    .perfil-hero__title .outline {
      -webkit-text-stroke: 1.5px var(--body-bg, #f3f4f6);
      color: transparent;
    }

    /* ---------- BLURB ---------- */
    .perfil-blurb {
      background: #fff;
      padding: 2rem 0 2rem;
    }

    .perfil-blurb__text {
      font-size: 0.9rem;
      line-height: 1.9;
      color: rgba(29, 7, 36, 0.72);
      max-width: 480px;
    }

    /* ---------- DARK STAGE ---------- */
    .perfil-dark {
      background-color: #100118;
      position: relative;
      overflow: hidden;
      padding: 7rem 0 4rem;
      color-scheme: dark;
    }

    /* Anillos de fondo */
    .p-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.055);
      pointer-events: none;
      will-change: transform;
    }
    .p-ring-1 { width:650px; height:650px; top:-120px;    left:-220px; }
    .p-ring-2 { width:950px; height:950px; top:8%;        left:-440px; }
    .p-ring-3 { width:520px; height:520px; bottom:4%;     right:-160px; }
    .p-ring-4 { width:780px; height:780px; bottom:-12%;   right:-360px; }
    .p-ring-5 { width:400px; height:400px; top:42%;       left:38%; }

    /* ---------- BLOB — forma circular reutilizable ---------- */
    .p-blob {
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      /* checkerboard placeholder */
      background-image:
        linear-gradient(45deg,  #c2c2c2 25%, transparent 25%),
        linear-gradient(-45deg, #c2c2c2 25%, transparent 25%),
        linear-gradient(45deg,  transparent 75%, #c2c2c2 75%),
        linear-gradient(-45deg, transparent 75%, #c2c2c2 75%);
      background-size: 28px 28px;
      background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
      background-color: #d5d5d5;
      will-change: transform;
    }

    /* Tamaños */
    .p-blob--sm  { width:220px; height:220px; }
    .p-blob--md  { width:320px; height:320px; }
    .p-blob--lg  { width:430px; height:430px; }
    .p-blob--pill{ width:280px; height:400px; border-radius: 200px; }

    /* Blob solo borde (decorativo) */
    .p-blob--ghost {
      background: none;
      background-image: none;
      border: 1px solid rgba(255,255,255,0.12);
    }

    /* ---------- FILA DE CONTENIDO ---------- */
    .p-row {
      display: flex;
      align-items: center;
      gap: 5rem;
      margin-bottom: 9rem;
      position: relative;
      z-index: 1;
    }

    .p-row--reverse { flex-direction: row-reverse; }

    /* Texto dentro de cada fila */
    .p-row__text h2 {
      font-size: clamp(1.8rem, 3.5vw, 3rem);
      font-weight: 700;
      font-style: italic;
      color: #fff;
      margin-bottom: 1.1rem;
    }

    .p-row__text p {
      font-size: 0.86rem;
      line-height: 1.95;
      color: rgba(255,255,255,0.58);
      max-width: 360px;
    }

    /* Grupo de blobs en la fila de herramientas */
    .p-blob-group {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      flex-shrink: 0;
    }

    .p-blob-group .p-blob + .p-blob {
      margin-top: -60px;
    }

    /* ---------- RESPONSIVE ---------- */
    @media (max-width: 900px) {
      .p-row,
      .p-row--reverse {
        flex-direction: column;
        gap: 2.5rem;
        margin-bottom: 5rem;
      }

      .p-blob--lg { width:280px; height:280px; }
      .p-blob--md { width:220px; height:220px; }
      .p-blob--pill { width:200px; height:280px; }
      .p-row__text p { max-width: 100%; }
    }

  /* CARRUSEL SINGLE PROYECTO
  .slider-section {
    width: 100%;
}

.mediaSwiper {
    width: 100%;
    overflow: hidden;
}

.mediaSwiper .swiper-slide {
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}

/* Formato rectangular horizontal */
.mediaSwiper img,
.mediaSwiper video {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

/* Flechas */
.mediaSwiper .swiper-button-next,
.mediaSwiper .swiper-button-prev {
    color: #fff;
}

/* Paginación */
.mediaSwiper .swiper-pagination-bullet {
    background: #fff;
    opacity: .8;
}

.mediaSwiper .swiper-pagination-bullet-active {
    opacity: 1;
}

@media (max-width: 768px) {

    .mediaSwiper img,
    .mediaSwiper video {
        height: 250px;
    }

}
.video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    
}


.desafio-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

/* imagen del desafío */
.desafio-img {
    width: 100%;
}

.desafio-img img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 12px;
}



/* responsive */
@media (max-width: 992px) {
    .desafio-flex {
        flex-direction: column;
    }

    .desafio-img {
        width: 100%;
    }
}

.context-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.side-image {
    flex: 0 0 320px;
    
}

.side-image img {
    max-width: 500px;
    height: 400px;
    object-fit: cover;
    border-radius: 12px;
}

.right-content{
    display: flex;
    align-items: center;
    gap: 2rem;
   
    flex-direction: row-reverse;
}

/* responsive */

@media (max-width: 768px) {
  @media (max-width:768px){

    #row-impl{
        flex-direction: column;
    }
   
    #row-impl .right-content{
        margin-left:0;
        flex-direction:column;
        transform:none;
        width:100%;
    }

    #row-impl .side-image{
        width:100%;
    }

}
    .side-image{
        flex: 0 0 100%;
        width: 100%;
        margin: 2rem auto 0;
        display: flex;
        justify-content: center;
    }

    .side-image img{
        width: 100%;
        max-width: 320px;
        height: auto;
        object-fit: cover;
    }

}



/* =========================
   PROJECT LIST RESPONSIVE
========================= */

@media (max-width: 992px) {

  .project-item-custom {
    margin-bottom: 90px;
  }

  .project-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .project-image {
    width: 100%;
    height: 350px;
    border-radius: 30px;
  }

  .project-card-custom {
    position: relative;
    width: 90%;
    right: auto;
    bottom: auto;
    margin: -60px auto 0;
    padding: 2rem;
    border-radius: 0 60px 60px 60px;
    z-index: 2;
  }

}


@media (max-width: 768px) {

  main.container-xl {
    padding-top: 2rem !important;
  }

  .page-title {
    font-size: clamp(2rem, 10vw, 3rem);
    margin-top: 8rem !important;
    padding-top: 0 !important;
  }


  .project-item-custom {
    margin-bottom: 70px;
  }


  .project-image {
    height: 250px;
    border-radius: 12px;
  }


  .project-card-custom {
    width: 100%;
    margin-top: -20px;
    padding: 1.5rem;
    border-radius: 0 40px 40px 40px;
    margin-left: 1rem;
  }


  .project-card-custom h2 {
    font-size: 1.5rem;
  }


  .project-card-custom p {
    font-size: .85rem;
    line-height: 1.6;
  }


  .btn-project {
   
    text-align: center;
  }


  .tags {
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: 1rem;
  }

}


@media (max-width: 480px) {

  .project-image {
    height: 210px;
  }


  .project-card-custom {
    padding: 1.2rem;
  }


  .project-card-custom h2 {
    font-size: 1.3rem;
  }

}



@media(max-width:991px){

  .project-item{
    cursor:pointer;
    padding:1.5rem ;
    border-bottom:1px solid rgba(29,7,36,.1);
  }

  .project-item .project-content p,
  .project-item .btn-project,
  .project-item small{
    display:none;
  }

  .project-item.active .project-content p,
  .project-item.active .btn-project,
  .project-item.active small{
    display:block;
  }
.btn-project{
  width: 10rem;
}
  .project-item h3{
    margin:0;
    transition:.3s ease;
  }

  .project-item.active h3{
    color:#8b2cf5;
  }

}