/* =========================
GLOBAL
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Helvetica', sans-serif;
}

html{
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(circle at top left, rgba(199,0,57,0.08), transparent 30%),
    radial-gradient(circle at bottom right, rgba(20,30,70,0.08), transparent 30%),
    #fff5e0;

  color:#141e46;

  overflow-x:hidden;

  line-height:1.6;
}

/* subtle grain texture */

body::before{
  content:'';

  position:fixed;
  inset:0;

  pointer-events:none;

  opacity:0.03;

  background-image:url("https://www.transparenttextures.com/patterns/noise.png");

  z-index:9999;
}

a{
  text-decoration:none;
  color:inherit;
}

.container{
  width:min(1200px, 90%);
  margin:auto;
}

/* =========================
NAVIGATION
========================= */

nav{
  width:100%;
  box-sizing:border-box;

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

  padding:28px 48px;

  position:fixed;
  top:0;
  left:0;

  z-index:1000;

  backdrop-filter:blur(14px);

  background:rgba(255,245,224,0.72);

  border-bottom:1px solid rgba(20,30,70,0.06);
}

.logo{
  width:140px;
}

nav ul li{
  display:inline-block;
  list-style:none;

  margin-left:40px;
}

nav ul li a{
  font-size:0.95rem;
  font-weight:500;

  letter-spacing:0.5px;

  position:relative;

  transition:0.3s ease;
}

nav ul li a::after{
  content:'';

  position:absolute;
  left:0;
  bottom:-8px;

  width:0%;
  height:2px;

  background:#c70039;

  transition:0.4s ease;
}

nav ul li a:hover::after{
  width:100%;
}

/* =========================
LANGUAGE DROPDOWN
========================= */

.language-dropdown{
  position:relative;
}

.lang-btn{
  border:none;

  background:
    rgba(255,255,255,0.45);

  backdrop-filter:blur(12px);

  color:#141e46;

  padding:10px 18px;

  border-radius:999px;

  font-size:0.9rem;
  font-weight:700;

  cursor:pointer;

  display:flex;
  align-items:center;
  gap:10px;

  transition:0.3s ease;
}

.lang-btn:hover{
  background:#c70039;
  color:#fff;
}

.lang-menu{
  position:absolute;

  top:55px;
  right:0;

  background:
    rgba(255,245,224,0.96);

  backdrop-filter:blur(14px);

  border-radius:20px;

  padding:10px 0;

  min-width:120px;

  opacity:0;
  visibility:hidden;

  transform:translateY(10px);

  transition:0.3s ease;

  box-shadow:
    0 20px 50px rgba(20,30,70,0.08);
}

.language-dropdown:hover .lang-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.lang-menu li{
  display:block;
  margin:0;
}

.lang-menu li a{
  display:block;

  padding:12px 20px;

  transition:0.3s ease;
}

.lang-menu li a:hover{
  background:rgba(199,0,57,0.08);

  color:#c70039;
}

/* =========================
HEADER
========================= */

#header{
  min-height:100vh;

  display:flex;
  align-items:center;

  position:relative;

  overflow:hidden;
}

#header::before{
  content:'';

  position:absolute;

  width:700px;
  height:700px;

  background:
    radial-gradient(circle, rgba(199,0,57,0.12), transparent 70%);

  top:-250px;
  right:-150px;

  z-index:0;
}

#header::after{
  content:'';

  position:absolute;

  width:600px;
  height:600px;

  background:
    radial-gradient(circle, rgba(20,30,70,0.08), transparent 70%);

  bottom:-250px;
  left:-150px;

  z-index:0;
}

.header-text{
  position:relative;
  z-index:2;

  padding-top:120px;

  max-width:900px;
}

.header-text p{
  font-size:1rem;

  text-transform:uppercase;

  letter-spacing:4px;

  margin-bottom:20px;

  color:#c70039;
}

.header-text h1{
  font-size:clamp(4rem, 9vw, 7rem);

  line-height:0.95;

  letter-spacing:-4px;

  font-weight:700;

  margin-bottom:30px;
}

/* =========================
SECTIONS
========================= */

section,
#about,
#professions,
#portfolio,
#contact{
  padding:140px 0;

  position:relative;
}

.sub-title{
  font-size:clamp(3rem, 7vw, 5rem);

  line-height:0.95;

  letter-spacing:-2px;

  margin-bottom:40px;

  font-weight:700;
}

/* =========================
ABOUT
========================= */

.row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;

  gap:60px;
}

.about-col-1{
  flex:1;
  min-width:300px;
}

.about-col-1 img{
  width:100%;

  border-radius:30px;

  box-shadow:
    0 30px 80px rgba(20,30,70,0.12);

  transition:0.5s ease;
}

.about-col-1 img:hover{
  transform:translateY(-10px);
}

.about-col-2{
  flex:1.2;
  min-width:320px;
}

.about-col-2 p{
  font-size:1.05rem;
  line-height:2;

  color:#4f709C;
}

/* =========================
TABS
========================= */

.tab-titles{
  display:flex;
  gap:30px;

  margin:50px 0;
}

.tab-links{
  position:relative;

  font-size:1rem;

  font-weight:700;

  cursor:pointer;

  transition:0.3s ease;
}

.tab-links::after{
  content:'';

  position:absolute;
  left:0;
  bottom:-10px;

  width:0%;
  height:2px;

  background:#c70039;

  transition:0.4s ease;
}

.tab-links.active-link::after{
  width:100%;
}

.tab-contents{
  display:none;
}

.tab-contents.active-tab{
  display:block;
}

.tab-contents ul li{
  list-style:none;

  margin-bottom:25px;

  line-height:1.8;

  color:#4f709C;
}

.tab-contents ul li span{
  color:#c70039;

  font-size:0.9rem;

  font-weight:700;

  text-transform:uppercase;

  letter-spacing:1px;
}

/* =========================
PROFESSIONS
========================= */

.profession-list{
  display:grid;

  grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

  gap:30px;

  margin-top:60px;
}

.profession-list div{
  position:relative;

  padding:50px 40px;

  border-radius:30px;

  overflow:hidden;

  background:
    rgba(255,255,255,0.38);

  backdrop-filter:blur(18px);

  border:
    1px solid rgba(20,30,70,0.08);

  box-shadow:
    0 15px 60px rgba(20,30,70,0.08);

  transition:0.5s ease;
}

.profession-list div::before{
  content:'';

  position:absolute;

  width:200px;
  height:200px;

  background:
    radial-gradient(circle, rgba(199,0,57,0.12), transparent 70%);

  top:-100px;
  right:-100px;
}

.profession-list div:hover{
  transform:translateY(-12px);

  box-shadow:
    0 30px 80px rgba(20,30,70,0.12);
}

.profession-list div i{
  font-size:3rem;

  margin-bottom:30px;

  color:#c70039;
}

.profession-list div h2{
  font-size:2rem;

  margin-bottom:20px;

  line-height:1.1;
}

.profession-list div p{
  color:#4f709C;

  line-height:1.9;
}

.profession-list div a{
  display:inline-block;

  margin-top:30px;

  font-weight:700;

  color:#c70039;
}

/* =========================
PORTFOLIO
========================= */

.portfolio-section{
  width:100%;
}

.portfolio-container{
  width:100%;
  max-width:1450px;

  margin:0 auto;

  padding:0 48px;

  box-sizing:border-box;
}

/* GRID */

.work-list{
  display:grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:35px;

  margin-top:70px;
}

/* CARD */

.work{
  position:relative;

  overflow:hidden;

  border-radius:30px;

  aspect-ratio: 0.78 / 1;

  box-shadow:
    0 20px 70px rgba(20,30,70,0.12);

  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;

  cursor:pointer;
}

.work img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:transform 0.8s ease;
}

/* DARK OVERLAY */

.work::after{
  content:'';

  position:absolute;
  inset:0;

  background:
    rgba(20,30,70,0.82);

  backdrop-filter:blur(10px);

  opacity:0;

  transition:opacity 0.5s ease;

  z-index:1;
}

/* TEXT LAYER */

.layer{
  position:absolute;
  inset:0;

  z-index:2;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:40px;

  color:#fff;

  opacity:0;

  transform:translateY(20px);

  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.layer h3{
  font-size:2rem;

  margin-bottom:15px;
}

.layer p{
  line-height:1.8;

  color:#f5dfe9;
}

.layer a{
  margin-top:25px;

  width:60px;
  height:60px;

  border-radius:50%;

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

  background:#fff;

  color:#c70039;

  font-size:1.1rem;
}

/* HOVER STATE */

.work:hover{
  transform:translateY(-10px);

  box-shadow:
    0 30px 90px rgba(20,30,70,0.18);
}

.work:hover img{
  transform:scale(1.05);
}

.work:hover::after{
  opacity:1;
}

.work:hover .layer{
  opacity:1;
  transform:translateY(0);
}

/* =========================
BUTTONS
========================= */

.btn{
  display:inline-block;

  margin-top:60px;

  padding:16px 36px;

  border-radius:999px;

  border:1px solid rgba(20,30,70,0.12);

  background:
    rgba(255,255,255,0.45);

  backdrop-filter:blur(12px);

  color:#141e46;

  font-weight:700;

  transition:0.4s ease;
}

.btn:hover{
  transform:translateY(-4px);

  background:#c70039;

  color:#fff;

  box-shadow:
    0 20px 50px rgba(199,0,57,0.25);
}

.btn.btn2{
  background:#c70039;
  color:#fff;
}

/* =========================
CONTACT
========================= */

.contact-left{
  flex-basis:35%;
}

.contact-right{
  flex-basis:60%;
}

.contact-left p{
  margin-top:25px;

  font-size:1.05rem;
}

.contact-left p i{
  margin-right:15px;

  color:#c70039;
}

.social-icons{
  margin-top:40px;
}

.social-icons a{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  width:52px;
  height:52px;

  margin-right:15px;

  border-radius:50%;

  background:
    rgba(255,255,255,0.45);

  backdrop-filter:blur(10px);

  transition:0.4s ease;
}

.social-icons a:hover{
  transform:translateY(-6px);

  background:#c70039;

  color:#fff;
}

.contact-right form{
  width:100%;
}

form input,
form textarea{
  width:100%;

  padding:20px;

  margin-bottom:20px;

  border:none;

  border-radius:20px;

  background:
    rgba(255,255,255,0.55);

  backdrop-filter:blur(12px);

  box-shadow:
    inset 0 0 0 1px rgba(20,30,70,0.06);

  font-size:1rem;

  color:#141e46;

  outline:none;
}

form textarea{
  resize:none;
}

/* =========================
COPYRIGHT
========================= */

.copyright{
  margin-top:100px;

  padding:40px 0;

  text-align:center;

  border-top:
    1px solid rgba(20,30,70,0.08);

  color:#4f709C;
}

/* =========================
MOBILE
========================= */

nav .fa-solid{
  display:none;
}

@media only screen and (max-width:768px){

  .container{
    width:92%;
  }

  nav{
    padding:20px 5%;
  }

  nav .fa-solid{
    display:block;
    font-size:1.5rem;
  }

  nav ul{
    position:fixed;

    top:0;
    right:-220px;

    width:220px;
    height:100vh;

    padding-top:100px;

    background:
      rgba(255,245,224,0.92);

    backdrop-filter:blur(16px);

    transition:0.5s ease;

    z-index:9999;
  }

  nav ul li{
    display:block;
    margin:30px;
  }

  nav ul .fa-solid{
    position:absolute;

    top:30px;
    left:30px;

    cursor:pointer;
  }

  .language-dropdown{
    position:relative;
  }
  
  .language-dropdown:hover .lang-menu{
    display:block;
  }

  .lang-menu{
    position:absolute;

    top:60px;
    right:0;

    width:120px;
    min-width:120px;
    height:auto;

    padding:10px 0;

    border-radius:20px;

    background:rgba(255,245,224,0.96);

    backdrop-filter:blur(14px);

    display:none;
  }

  .language-dropdown:hover .lang-menu{
    display:block;
  }

  .show-lang{
    display:block !important;

    opacity:1 !important;
    visibility:visible !important;

    transform:translateY(0) !important;
  }

  .header-text{
    padding-top:180px;
  }

  .header-text h1{
    font-size:4rem;
  }

  .sub-title{
    font-size:3rem;
  }

  section,
  #about,
  #professions,
  #portfolio,
  #contact{
    padding:100px 0;
  }

  #portfolio{
    padding:100px 0 50px 0;
  }

  .row{
    gap:40px;
  }

  .tab-titles{
    flex-wrap:wrap;
    gap:20px;
  }

  /* PORTFOLIO MOBILE */

  .work-list{
    grid-template-columns:1fr;
    gap:28px;
  }

  .work{
    aspect-ratio:1 / 1.15;
  }

  .layer{
    padding:30px;
  }

  .layer h3{
    font-size:1.8rem;
  }

  .layer p{
    font-size:0.95rem;
    line-height:1.7;
  }

  .btn{
    margin-top:35px;
  }

  /* MOBILE TAP INTERACTION */

  .work.active::after{
    opacity:1;
  }

  .work.active .layer{
    opacity:1;
    transform:translateY(0);
  }

}


/* =========================
SUCCESS MESSAGE
========================= */

#msg{
  display:block;

  margin-top:20px;

  color:#c70039;

  font-weight:700;
}