@charset "utf-8";
/* CSS Document */

/* Color group */
/* Base colors */
.black { color: #000000; }
.white { color: #FFFFFF; }

/* Grays */
.gray-dark { color: #5C5C5C; }
.gray-light { color: #B0B0AC; }

/* Accent */
.accent-orange { color: #FF8600; }

html,
body{
  overflow-x: hidden;
}

/* Font helpers */
.montserrat-regular{
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.montserrat-semibold{
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.lora-regular{
  font-family: "Lora", serif;
  font-weight: 400;
  font-style: normal;
}

body,
p,
h1, h2, h3, h4, h5, h6,
li,
span{
  cursor: default;
}

a,
button,
.btn{
  cursor: pointer;
}

/* Body */
body{
  font-family: "Lora", serif;
  background-color: #B0B0AC;
  color: #000000;
  padding-top: 69px;
}

@media (max-width: 991.98px){
  body{
    padding-top: 63px;
  }
}

/* Default headings */
h1, h2, h3, h4, h5, h6{
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 600;
}

/* Navbar styling */
.navbar-custom{
  background-color: rgba(176,176,172,0.95);
  border-bottom: 1px solid rgba(0,0,0,0.10);
  font-family: "Montserrat Alternates", sans-serif;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Brand */
.navbar-custom .navbar-brand{
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.brand-logo{
  width: 20px;
  height: auto;
  margin-right: 15px;
  display: block;
}

.brand-name{
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 600;
  color: #FFFFFF;
}

/* Links */
.navbar-custom .nav-link{
  color: #FFFFFF;
  font-weight: 500;
  padding: 0.75rem 1rem;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus{
  color: #FF8600;
}

.navbar-custom .nav-link.active{
  color: #FF8600;
}

/* Dropdown menu */
.navbar-custom .dropdown-menu{
  background-color: rgba(176,176,172,0.98);
  border: 1px solid rgba(0,0,0,0.10);
}

.navbar-custom .dropdown-item{
  color: #FFFFFF;
  font-family: "Montserrat Alternates", sans-serif;
}

.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus{
  background-color: rgba(0,0,0,0.08);
  color: #FF8600;
}

/* Toggler */
.custom-toggler.navbar-toggler{
  border-color: rgba(255,255,255,0.35);
}

.custom-toggler .navbar-toggler-icon{
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.80)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* HOME BANNER */
#home_banner{
  position: relative;
  padding-left: 0;
  padding-right: 0;
  background-color: #B0B0AC;
  height: auto;
}

#home_banner .banner-title{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-family: "Lora", serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
  color: #ffffff;
  text-align: center;
  text-shadow: 3px 5px rgba(0,0,0,0.45);
}

#home_banner .carousel,
#home_banner .carousel-inner,
#home_banner .carousel-item{
  width: 100%;
}

#home_banner .carousel-item img{
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
}

#home_banner img{
  width: 100%;
  height: auto;
  display: block;
}

#carouselExampleIndicators1{
  margin-top: 0;
}

/* HERO */
#hero{
  position: relative;
  z-index: 2;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.hero-title{
  font-family: "Lora", serif;
  color: #FFFFFF;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.5rem;
}

.hero-subtitle{
  color: rgba(255,255,255,0.85);
  margin-bottom: 1.25rem;
  font-size: 18px;
}

.hero-btn{
  position: relative;
  z-index: 5;
  padding: 0.55rem 1.35rem;
}

/* mockup */
.hero-mockup{
  max-width: 720px;
  margin: auto;
}

.hero-mockup img{
  position: relative;
  z-index: 1;
  margin-top: -4rem;
  height: auto;
  max-width: 720px;
  width: 100%;
}

/* FEATURED PROJECTS */
#featured{
  position: relative;
  padding-top: 3rem;
  padding-bottom: 3rem;
  background: url("../images/Banner-2.png") center/cover no-repeat;
}

#featured::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(176,176,172,0.88);
  z-index: 0;
}

#featured > *{
  position: relative;
  z-index: 1;
}
.featured-title{
  font-family: "Lora", serif;
  font-weight: 600;
  color: #FFFFFF;
}

.featured-inner{
  max-width: 720px;
}

.project-row{
  margin-bottom: 3.25rem;
}

.project-name{
  color: #fff;
  font-size: 22px;
  margin-bottom: 0.6rem;
}

.project-desc{
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 400;
  color: rgba(255,255,255,0.90);
  line-height: 1.6;
  margin: 0;
  font-size: 0.95rem;
}

/* UNIVERSAL BUTTON STYLE */
.btn{
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 600;
  border-radius: 999px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-dark,
.btn-primary{
  background-color: #262120;
  border: 1px solid #1d1918;
  color: #ffffff;
}

.btn-dark:hover,
.btn-primary:hover,
.btn-dark:focus,
.btn-primary:focus{
  background-color: #FF8600;
  border: 1px solid #e57900;
  color: #ffffff;
}

/* PROJECT CARDS SECTION */
#cards{
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  background: transparent;
}

#cards .card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  color: #ffffff;
  padding-bottom: 1rem;
  transition: transform 0.2s ease;
}

#cards .card:hover{
  transform: translateY(-4px);
}

#cards .card-header{
  background: transparent;
  border: none;
  padding: 0;
}

#cards .card-img-top{
  border-radius: 14px;
  width: 100%;
  height: auto;
  display: block;
}

#cards .card-title{
  font-family: "Lora", serif;
  font-weight: 600;
  margin-top: 1rem;
  color: #fff;
}

#cards .card-text{
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 34ch;
  margin: 0.75rem auto 1rem;
}

/* FOOTER */
.site-footer{
  padding: 3rem 0 1.5rem;
  background: #B0B0AC;
}

.site-footer .container{
  text-align: initial;
}

.footer-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.footer-left{
  display: flex;
  gap: 0.75rem;
  justify-content: flex-start;
}

.footer-right{
  text-align: right;
  margin-left: auto;
  font-family: "Lora", serif;
  font-weight: 600;
  color: rgba(0,0,0,0.80);
  font-size: 0.95rem;
}

.footer-bottom{
  text-align: center;
  margin-top: 1.25rem;
  font-family: "Lora", serif;
  font-size: 0.85rem;
  color: rgba(0,0,0,0.65);
}

/* Footer image icons */
.social-img{
  width: 34px;
  height: 34px;
  display: block;
  opacity: 0.95;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-left a:hover .social-img{
  opacity: 1;
  transform: translateY(-2px);
}

/* Footer Font Awesome icons */
.social-icon{
  font-size: 34px;
  color: rgba(0,0,0,0.82);
  display: inline-block;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}

.footer-left a:hover .social-icon{
  color: #FF8600;
  transform: translateY(-2px);
}

/* ABOUT PAGE */
#about-page{
  max-width: 720px;
}

.about-page-title{
  font-family: "Lora", serif;
  color: #FFFFFF;
  font-size: 2rem;
  margin: 0;
}

.about-divider{
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.20);
  margin: 0.75rem 0 0;
}

.about-portrait{
  border: 1px solid rgba(255,255,255,0.18);
}

.about-intro{
  max-width: 60ch;
}

.about-role{
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 600;
  color: #FFFFFF;
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

.about-section-title{
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 600;
  color: rgba(255,255,255,0.90);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.about-text{
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  font-size: 0.95rem;
}

.about-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 1.1rem;
}

.about-list{
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
}

/* RESUME PAGE */
#resume-page{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.resume-header{
  margin-top: 0.5rem;
}

.resume-title{
  font-family: "Lora", serif;
  color: #FFFFFF;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 0 0 0.35rem;
}

.resume-intro{
  font-family: "Montserrat Alternates", sans-serif;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  font-size: 0.95rem;
}

.resume-divider{
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.20);
  margin-top: 1rem;
}

.resume-panel{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 1.25rem;
  height: 100%;
}

.resume-section-title{
  font-family: "Lora", serif;
  font-weight: 600;
  color: #FFFFFF;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.resume-subtitle{
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 600;
  color: #FFFFFF;
  font-size: 1rem;
  line-height: 1.4;
}

.resume-date{
  font-family: "Montserrat Alternates", sans-serif;
  color: rgba(255,255,255,0.70);
  font-size: 0.9rem;
}

.resume-text{
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  font-size: 0.95rem;
}

.resume-list{
  padding-left: 1.2rem;
  margin: 0;
  font-family: "Montserrat Alternates", sans-serif;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  font-size: 0.95rem;
}

.resume-block + .resume-block{
  margin-top: 1.25rem;
}

.resume-skills{
  margin-top: 0.5rem;
}

.skill-pill{
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
}

/* CONTACT PAGE */
#contact-page{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.contact-title{
  font-family: "Lora", serif;
  color: #FFFFFF;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 0.5rem;
}

.contact-intro{
  font-family: "Montserrat Alternates", sans-serif;
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
}

.contact-divider{
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.20);
  margin-top: 1rem;
}

.contact-panel{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 1.25rem;
}

.contact-section-title{
  font-family: "Lora", serif;
  color: #FFFFFF;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.contact-text{
  font-family: "Montserrat Alternates", sans-serif;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  font-size: 0.95rem;
}

/* FORM */
.form-label{
  font-family: "Montserrat Alternates", sans-serif;
  color: #FFFFFF;
}

.form-control{
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #FFFFFF;
}

.form-control::placeholder{
  color: rgba(255,255,255,0.55);
}

.form-control:focus{
  background: rgba(255,255,255,0.10);
  color: #FFFFFF;
  border-color: #FF8600;
  box-shadow: none;
}

/* CASE STUDY PAGE */
.case-page{
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2.75rem;
}

.case-hero{
  margin-top: 0.75rem;
  margin-bottom: 2.25rem;
}

.case-hero-copy{
  max-width: 540px;
}

.case-kicker{
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.74);
  margin-bottom: 0.75rem;
}

.case-title{
  font-family: "Lora", serif;
  color: #FFFFFF;
  font-size: clamp(2.35rem, 4vw, 3.2rem);
  line-height: 1.02;
  margin-bottom: 0.5rem;
}

.case-subtitle{
  font-family: "Montserrat Alternates", sans-serif;
  color: rgba(255,255,255,0.84);
  font-size: 0.96rem;
  line-height: 1.8;
  max-width: 52ch;
  margin-bottom: 0;
}

.case-meta{
  margin-top: 1rem;
}

.case-tag{
  display: inline-flex;
  align-items: center;
  padding: 0.48rem 0.9rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
}

.case-section{
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.case-section-intro{
  max-width: 660px;
}

.case-heading{
  font-family: "Lora", serif;
  color: #FFFFFF;
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
}

.case-heading-sm{
  font-family: "Lora", serif;
  color: #FFFFFF;
  font-size: 1.16rem;
  margin-bottom: 0.65rem;
}

.case-info-title{
  font-family: "Lora", serif;
  color: #FFFFFF;
  font-size: 1.08rem;
  margin-bottom: 0.72rem;
}

.case-text{
  font-family: "Montserrat Alternates", sans-serif;
  color: rgba(255,255,255,0.86);
  line-height: 1.78;
  font-size: 0.93rem;
  max-width: 68ch;
}

.case-card,
.case-screen-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
}

.case-card{
  padding: 1.05rem 1.15rem;
  height: 100%;
}

.case-screen-card{
  padding: 0.85rem;
  height: 100%;
}

.case-web-card{
  padding: 0.95rem;
}

.case-info-list{
  margin: 0;
  padding-left: 1.1rem;
  font-family: "Montserrat Alternates", sans-serif;
  color: rgba(255,255,255,0.85);
  line-height: 1.72;
  font-size: 0.9rem;
}

.case-info-list li + li{
  margin-top: 0.28rem;
}

.case-hero-img,
.case-image{
  width: 100%;
  border: 1px solid rgba(255,255,255,0.12);
}

.case-hero-img{
  max-width: 470px;
  display: block;
  margin-left: 0;
  margin-right: auto;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}

.case-mobile-image{
  width: 100%;
  max-width: 122px;
  margin: 0 auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
}

.case-web-image{
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
}

.case-caption{
  font-family: "Montserrat Alternates", sans-serif;
  color: rgba(255,255,255,0.74);
  font-size: 0.79rem;
  line-height: 1.45;
  margin-top: 0.65rem;
  margin-bottom: 0;
}

.case-back-section{
  padding-top: 0.85rem;
}

.case-btn{
  display: inline-block;
  padding: 0.68rem 1.4rem;
  border-radius: 999px;
  background-color: #262120;
  border: 1px solid #1d1918;
  color: #ffffff;
  text-decoration: none;
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.case-btn:hover,
.case-btn:focus{
  background-color: #FF8600;
  border-color: #e57900;
  color: #ffffff;
}

/* LARGE TABLET / SMALL LAPTOP */
@media (max-width: 1199.98px){
  .case-page{
    max-width: 1020px;
  }

  .case-web-image{
    max-width: 270px;
  }
}

/* TABLET */
@media (max-width: 991.98px){
  .case-page{
    max-width: 100%;
  }

  .case-hero{
    margin-bottom: 1.7rem;
    text-align: center;
  }

  .case-hero .row{
    row-gap: 1.35rem !important;
  }

  .case-hero-copy{
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .case-subtitle{
    max-width: 100%;
  }

  .case-meta{
    justify-content: center;
  }

  .case-hero-img{
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }

  .case-mobile-image{
    max-width: 118px;
  }

  .case-web-image{
    max-width: 240px;
  }
}

/* MOBILE */
@media (max-width: 767.98px){
  .case-page{
    max-width: 100%;
  }

  .case-hero{
    margin-top: 0.35rem;
    margin-bottom: 1.35rem;
    text-align: center;
  }

  .case-hero .row{
    row-gap: 1rem !important;
  }

  .case-title{
    font-size: 2rem;
    margin-bottom: 0.35rem;
  }

  .case-heading{
    font-size: 1.3rem;
  }

  .case-heading-sm{
    font-size: 1.08rem;
  }

  .case-text,
  .case-subtitle{
    font-size: 0.9rem;
  }

  .case-subtitle{
    max-width: 100%;
  }

  .case-meta{
    justify-content: center;
    margin-top: 0.85rem;
  }

  .case-card,
  .case-screen-card{
    padding: 0.95rem;
  }

  .case-hero-img{
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .case-mobile-image{
    max-width: 108px;
  }

  .case-web-image{
    max-width: 260px;
  }
}

/* SMALL MOBILE */
@media (max-width: 575.98px){
  .case-page{
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }

  .case-kicker{
    font-size: 0.72rem;
    margin-bottom: 0.55rem;
  }

  .case-title{
    font-size: 1.82rem;
    line-height: 1;
  }

  .case-subtitle{
    font-size: 0.88rem;
    line-height: 1.68;
  }

  .case-tag{
    font-size: 0.76rem;
    padding: 0.4rem 0.75rem;
  }

  .case-hero-img{
    max-width: 320px;
    border-radius: 16px;
  }

  .case-mobile-image{
    max-width: 104px;
  }

  .case-web-image{
    max-width: 220px;
  }
}

/* PHOTOGRAPHY PAGE */
.photography-hero{
  position: relative;
  margin-top: 0.75rem;
  margin-bottom: 2.25rem;
  background: url("../images/Scary-picture-600x338.png") center/cover no-repeat;
  border-radius: 18px;
  overflow: hidden;
  padding: 2rem;
}

.photography-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(176,176,172,0.82);
  z-index: 0;
}

.photography-hero > *{
  position: relative;
  z-index: 1;
}
.photography-page{
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2.75rem;
}

.photography-hero-copy{
  max-width: 520px;
}

.photography-kicker{
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.74);
  margin-bottom: 0.75rem;
}

.photography-title{
  font-family: "Lora", serif;
  color: #FFFFFF;
  font-size: clamp(2.35rem, 4vw, 3.2rem);
  line-height: 1.02;
  margin-bottom: 0.6rem;
}

.photography-subtitle{
  font-family: "Montserrat Alternates", sans-serif;
  color: rgba(255,255,255,0.84);
  font-size: 0.96rem;
  line-height: 1.8;
  max-width: 52ch;
  margin-bottom: 1rem;
}

.photography-tags{
  margin-top: 1rem;
}

.photography-tag{
  display: inline-flex;
  align-items: center;
  padding: 0.48rem 0.9rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
}

.photography-hero-img{
  width: 100%;
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
  object-fit: cover;
}

.photography-section{
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.photography-section-intro{
  max-width: 680px;
}

.photography-heading{
  font-family: "Lora", serif;
  color: #FFFFFF;
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
}

.photography-card-title{
  font-family: "Lora", serif;
  color: #FFFFFF;
  font-size: 1.16rem;
  margin-bottom: 0.7rem;
}

.photography-text{
  font-family: "Montserrat Alternates", sans-serif;
  color: rgba(255,255,255,0.86);
  line-height: 1.78;
  font-size: 0.93rem;
}

.photography-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 1.05rem 1.15rem;
  height: 100%;
}

.photography-caption{
  font-family: "Montserrat Alternates", sans-serif;
  color: rgba(255,255,255,0.74);
  font-size: 0.79rem;
  line-height: 1.5;
}

@media (max-width: 991.98px){
  .photography-page{
    max-width: 100%;
  }

  .photography-hero{
    text-align: center;
    margin-bottom: 1.7rem;
  }

  .photography-hero-copy{
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .photography-subtitle{
    max-width: 100%;
  }

  .photography-tags{
    justify-content: center;
  }
}

@media (max-width: 767.98px){
  .photography-hero{
    margin-top: 0.35rem;
    margin-bottom: 1.35rem;
  }

  .photography-title{
    font-size: 2rem;
    margin-bottom: 0.35rem;
  }

  .photography-heading{
    font-size: 1.3rem;
  }

  .photography-card-title{
    font-size: 1.05rem;
  }

  .photography-text,
  .photography-subtitle{
    font-size: 0.9rem;
  }

  .photography-card{
    padding: 0.95rem;
  }
}

@media (max-width: 575.98px){
  .photography-page{
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }

  .photography-kicker{
    font-size: 0.72rem;
    margin-bottom: 0.55rem;
  }

  .photography-title{
    font-size: 1.82rem;
    line-height: 1;
  }

  .photography-subtitle{
    font-size: 0.88rem;
    line-height: 1.68;
  }

  .photography-tag{
    font-size: 0.76rem;
    padding: 0.4rem 0.75rem;
  }
}

/* GRAPHIC DESIGN PAGE */
.graphic-page{
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 3rem;
}

.graphic-hero{
  max-width: 760px;
  margin-top: 0.75rem;
  margin-bottom: 2rem;
}

.graphic-kicker{
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.74);
  margin-bottom: 0.75rem;
}

.graphic-title{
  font-family: "Lora", serif;
  color: #FFFFFF;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.02;
  margin-bottom: 0.6rem;
}

.graphic-subtitle{
  font-family: "Montserrat Alternates", sans-serif;
  color: rgba(255,255,255,0.84);
  font-size: 0.96rem;
  line-height: 1.8;
  max-width: 56ch;
  margin-bottom: 0;
}

.graphic-gallery{
  margin-top: 1.5rem;
}

.graphic-card{
  border-radius: 22px;
  padding: 0.75rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
}

.graphic-card-dark{
  background: rgba(255,255,255,0.04);
}

.graphic-artwork{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  background-color: #000000;
}

@media (max-width: 991.98px){
  .graphic-page{
    max-width: 100%;
  }

  .graphic-hero{
    max-width: 100%;
    margin-bottom: 1.7rem;
  }
}

@media (max-width: 767.98px){
  .graphic-title{
    font-size: 2rem;
  }

  .graphic-subtitle{
    font-size: 0.9rem;
  }

  .graphic-card{
    padding: 0.65rem;
    border-radius: 18px;
  }

  .graphic-artwork{
    border-radius: 14px;
  }
}

@media (max-width: 575.98px){
  .graphic-page{
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }

  .graphic-kicker{
    font-size: 0.72rem;
    margin-bottom: 0.55rem;
  }

  .graphic-title{
    font-size: 1.82rem;
  }

  .graphic-subtitle{
    font-size: 0.88rem;
    line-height: 1.68;
  }
}

/* UX/UI PAGE */
.ux-page{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 3rem;
}

.ux-hero{
  max-width: 760px;
  margin: 0 auto 2rem auto;
  text-align: center;
}

.ux-kicker{
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.74);
  margin-bottom: 0.75rem;
}

.ux-title{
  font-family: "Lora", serif;
  color: #FFFFFF;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.05;
  margin-bottom: 0.75rem;
}

.ux-subtitle{
  font-family: "Montserrat Alternates", sans-serif;
  color: rgba(255,255,255,0.84);
  font-size: 0.96rem;
  line-height: 1.8;
  max-width: 55ch;
  margin: 0 auto;
}

.ux-image-section{
  margin-top: 1.8rem;
  margin-bottom: 2.5rem;
  text-align: center;
}

.ux-image-wrap{
  display: inline-block;
}

.ux-image{
  width: 100%;
  max-width: 760px;
  height: auto;
  display: block;
}

.ux-info-section{
  margin-top: 2.5rem;
}

.ux-info-grid{
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  text-align: center;
}

.ux-info-block{
  min-width: 140px;
}

.ux-info-label{
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.35rem;
  letter-spacing: 0.04em;
}

.ux-info-value{
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 0.95rem;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.6;
}

.ux-overview{
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.ux-overview-title{
  font-family: "Lora", serif;
  font-size: 1.45rem;
  color: #FFFFFF;
  margin-bottom: 0.65rem;
}

.ux-overview-text{
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.8;
  margin: 0;
}

.ux-cta{
  text-align: center;
  margin-top: 2rem;
}

@media (max-width: 991.98px){
  .ux-page{
    max-width: 100%;
  }

  .ux-info-grid{
    gap: 2.5rem;
  }

  .ux-image{
    max-width: 680px;
  }
}

@media (max-width: 767.98px){
  .ux-hero{
    margin-bottom: 1.6rem;
  }

  .ux-title{
    font-size: 2rem;
  }

  .ux-subtitle,
  .ux-overview-text,
  .ux-info-value{
    font-size: 0.9rem;
  }

  .ux-image-section{
    margin-top: 1.4rem;
    margin-bottom: 2rem;
  }

  .ux-image{
    max-width: 100%;
  }

  .ux-info-grid{
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .ux-overview-title{
    font-size: 1.3rem;
  }

  .ux-cta{
    margin-top: 1.7rem;
  }
}

@media (max-width: 575.98px){
  .ux-page{
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }

  .ux-kicker{
    font-size: 0.72rem;
    margin-bottom: 0.55rem;
  }

  .ux-title{
    font-size: 1.82rem;
  }

  .ux-subtitle{
    font-size: 0.88rem;
    line-height: 1.68;
  }

  .ux-info-grid{
    flex-direction: column;
    gap: 1rem;
  }

  .ux-info-block{
    min-width: auto;
  }

  .ux-overview-title{
    font-size: 1.2rem;
  }

  .ux-overview-text,
  .ux-info-value{
    font-size: 0.88rem;
  }
}

/* PROGRESS BAR (Resume Page) */
.progress{
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
}

.progress-bar{
  background-color: #FF8600;
}