/* ==========================================================
                    PROJECTS HERO
========================================================== */

.projects-hero {

    position: relative;
    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
    url("../images/projects-hero.jpg")
    center center/cover no-repeat;
}

/* Overlay */

.projects-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgb(8 8 8 /.72),
        rgb(8 8 8 /.82)
    );
}

/* Gold Gradient */

.projects-gradient{

    position:absolute;
    inset:0;

    background:
    radial-gradient(
        circle at right,

        rgb(194 155 56 /.10),

        transparent 55%
    );
}

/* Container */

.projects-hero .container{

    position:relative;
    z-index:2;
}

/* Layout */

.projects-hero-grid{

    display:grid;

    grid-template-columns:
    1.1fr .9fr;

    gap:5rem;

    align-items:center;
}

/* ==========================================================
                    CONTENT
========================================================== */

.projects-content h1{

    margin:1.5rem 0;

    font-family:var(--heading);

    font-size:clamp(3.8rem,7vw,5.8rem);

    color:var(--white);

    line-height:1.05;
}

.projects-content h1 span{

    display:block;

    color:var(--gold);
}

.projects-content p{

    max-width:700px;

    margin-bottom:2.8rem;

    color:var(--muted);

    font-size:1.05rem;

    line-height:1.9;
}

/* ==========================================================
                    GLASS CARD
========================================================== */

.hero-glass-card{

    padding:3rem;

    border-radius:30px;

    background:
    rgb(255 255 255 /.05);

    border:
    1px solid rgb(255 255 255 /.08);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow);
}

.glass-title{

    display:block;

    margin-bottom:2rem;

    color:var(--gold);

    letter-spacing:4px;

    font-size:.85rem;

    text-transform:uppercase;
}

.glass-item{

    padding:1.8rem 0;

    border-bottom:
    1px solid rgb(255 255 255 /.08);
}

.glass-item:last-child{

    border:none;
}

.glass-item h3{

    margin-bottom:.8rem;

    font-family:var(--heading);

    color:var(--white);

    font-size:1.7rem;
}

.glass-item p{

    color:var(--muted);

    line-height:1.8;
}

/* ==========================================================
                PROJECT INTRODUCTION
========================================================== */

.projects-intro {

    position: relative;
    padding: 8rem 0;
    background: linear-gradient(
        180deg,
        #111111,
        #181818,
        #111111
    );
}

.intro-grid {

    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 5rem;
    align-items: center;
}

.intro-content {
    position: relative;
    z-index: 2;
}

.section-label {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: .85rem;
    color: goldenrod;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.intro-content h2 {

    margin: 1.5rem 0;

    font-family: var(--heading);
    font-size: clamp(2.8rem,5vw,4rem);

    color: var(--white);
    line-height: 1.15;
}

.intro-text {

    margin-bottom: 2.5rem;

    color: var(--muted);
    line-height: 1.9;
}

.intro-features {

    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.2rem;
}

.feature-item {

    display: flex;
    align-items: center;
    gap: .8rem;

    color: var(--white);
}

.feature-item i {

    color: var(--gold);
}

.intro-card {

    position: relative;

    padding: 3rem;

    border-radius: 28px;

    background: rgb(255 255 255 / 5%);

    border: 1px solid rgb(255 255 255 / 8%);

    backdrop-filter: blur(18px);

    box-shadow: var(--shadow);

    overflow: hidden;
}

.intro-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: var(--gold);
}

.card-number {

    position: absolute;

    display:none;

    right: 30px;
    top: 20px;

    font-family: var(--heading);

    font-size: 5rem;

    color: goldenrod;
}

.intro-card h3 {

    margin-bottom: 1.2rem;

    font-family: var(--heading);

    color: var(--white);

    font-size: 2rem;
}

.intro-card p {

    color: var(--muted);

    line-height: 1.8;

    margin-bottom: 2rem;
}

.intro-stats {

    display: grid;

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

    gap: 1rem;
}

.stat-box {

    padding: 1.4rem;

    text-align: center;

    border-radius: 16px;

    background: rgb(255 255 255 / 4%);

    border: 1px solid rgb(255 255 255 / 8%);

    transition: var(--transition);
}

.stat-box:hover {

    transform: translateY(-6px);

    border-color: var(--gold);
}

.stat-box h4 {

    font-size: 1.4rem;

    color: var(--gold);

    margin-bottom: .4rem;
}

.stat-box span {

    color: var(--muted);

    font-size: .9rem;
}

/* ==========================================================
                    PROJECT SECTION
========================================================== */

.project-section {
    position: relative;
    padding: clamp(6rem, 8vw, 8rem) 0;
    background: linear-gradient(
        180deg,
        #101010,
        #171717,
        #101010
    );
    overflow: hidden;
}

.project-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at top right,
        rgb(194 155 56 / 8%),
        transparent 45%
    );
    pointer-events: none;
}

.project-section .container {
    position: relative;
    z-index: 2;
}

/* ==========================================================
                    LAYOUT
========================================================== */

.project-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.project-layout.reverse {
    direction: rtl;
}

.project-layout.reverse > * {
    direction: ltr;
}

/* ==========================================================
                    IMAGE
========================================================== */

.project-image {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
}

.project-image img {
    width: 100%;
    height: 620px;
    object-fit: cover;
    display: block;
    transition: transform .8s ease;
}

.project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgb(0 0 0 / 10%),
        rgb(0 0 0 / 35%)
    );
    transition: var(--transition);
}

.project-image:hover img {
    transform: scale(1.08);
}

.project-image:hover::after {
    background: linear-gradient(
        rgb(0 0 0 / 5%),
        rgb(0 0 0 / 20%)
    );
}

/* ==========================================================
                    PROJECT NUMBER
========================================================== */
.project-content
.project-number {
  position: absolute;
  top: 15px;
  right: 30px;

font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
  font-weight: 500;
  line-height: 1;
  height: 4vh;
  color: var(--gold);
  letter-spacing: 4px;

  user-select: none;
  pointer-events:all;

  z-index: 0;

  transition: var(--transition);
}

.project-content:hover .project-number {
  color: var(--white);
  transform: scale(1.05);
}
/* ==========================================================
                    CONTENT
========================================================== */

.project-content {
    position: relative;
    padding: 3rem;
    background: var(--glass);
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 28px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.project-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--gold);
}

.project-number {
    position: absolute;
    top: 20px;
    right: 25px;
    font-family: var(--heading);
    font-size: 6rem;
    color: rgb(255 255 255 / 3%);
    pointer-events: none;
}

.project-content h2 {
    margin: 1rem 0;
    font-family: var(--heading);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    color: var(--white);
    line-height: 1.2;
}

.project-intro {
    margin-bottom: 2rem;
    color: var(--muted);
    line-height: 1.9;
}

/* ==========================================================
                    FEATURES
========================================================== */

.project-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 2rem 0;
}

.feature {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.feature i {
    color: var(--gold);
}

.feature span {
    color: var(--muted);
}

/* ==========================================================
                    HIGHLIGHTS
========================================================== */

.project-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2.5rem 0;
}

.highlight-box {
    padding: 1.5rem;
    text-align: center;
    background: rgb(255 255 255 / 4%);
    border: 1px solid rgb(255 255 255 / 6%);
    border-radius: 18px;
    transition: var(--transition);
}

.highlight-box:hover {
    transform: translateY(-6px);
    border-color: var(--gold);
}

.highlight-box h3 {
    color: var(--gold);
    margin-bottom: .5rem;
    font-size: 1.4rem;
}

.highlight-box p {
    color: var(--muted);
    font-size: .9rem;
}
/* ==========================================================
            GOLD DIVIDER
========================================================== */

.project-content h2::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  background: var(--gold);
  margin-top: 20px;
  transition: width 0.5s ease;
}

.project-showcase:hover h2::after {
  width: 170px;
}

/* ==========================================================
            BUTTON
========================================================== */

.project-content .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================
                DELIVERY PROCESS
========================================================== */

.delivery-process {

    padding: 8rem 0;
    color: var(--white);

    background:
    linear-gradient(
        180deg,
        #111111,
        #181818,
        #111111
    );
}

/* ==========================================================
                    SECTION HEADING
========================================================== */

/* ==========================================================
                SECTION HEADING
========================================================== */

.section-heading {
  width: min(100%, 900px);
  margin: 0 auto 5rem;
  text-align: center;
}

.section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-bottom: 1.4rem;

  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;

  color: var(--gold);
}

/* Decorative Lines */

.section-label::before,
.section-label::after {
  content: "";
  width: 55px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    transparent
  );
}

.section-heading h2 {
  margin-bottom: 1.6rem;

  font-family: var(--heading);
  font-size: clamp(3rem, 5vw, 4.8rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1px;

  color: #ffffff;

  text-shadow: 0 4px 20px rgb(0 0 0 / 35%);
}

.section-heading p {
  width: min(100%, 720px);
  margin: 0 auto;

  color: var(--muted);

  font-size: 1.08rem;
  line-height: 1.9;
}

.process-grid {

    display: grid;

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

    gap: 2rem;

    margin-top: 5rem;
}

.process-card {

    position: relative;

    padding: 2.8rem;

    border-radius: 24px;

    background:
    linear-gradient(
        180deg,
        rgb(20 20 20 /.95),
        rgb(12 12 12 /.95)
    );

    border: 1px solid rgb(255 255 255 /.08);

    transition: var(--transition);

    overflow: hidden;
}

.process-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: var(--gold);

    transform: scaleY(0);

    transition: var(--transition);

    transform-origin: top;
}

.process-card:hover {

    transform: translateY(-10px);

    border-color: rgb(194 155 56 /.35);

    box-shadow:
    0 20px 50px rgb(0 0 0 /.35);
}

.process-card:hover::before {

    transform: scaleY(1);
}

.process-card span {

    display: inline-block;

    margin-bottom: 1.5rem;

    font-size: 3rem;

    font-family: var(--heading);

    color: var(--gold);
}

.process-card h3 {

    margin-bottom: 1rem;

    font-family: var(--heading);

    font-size: 2rem;

    color: var(--white);
}

.process-card p {

    color: var(--muted);

    line-height: 1.8;
}

/* ==========================================================
                WHY CHOOSE SKYEAGLE
========================================================== */

.why-skyeagle {

    position: relative;
    padding: clamp(7rem, 9vw, 9rem) 0;

    background: var(--black);

    overflow: hidden;
}

.why-skyeagle::before {

    content: "";

    position: absolute;
    inset: 0;

    background:
    radial-gradient(
        circle at left,
        rgb(194 155 56 / 8%),
        transparent 50%
    );

    pointer-events: none;
}

.why-skyeagle .container {

    position: relative;
    z-index: 2;
}

.why-grid {

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

    gap: 2rem;
    margin-top: 5rem;
}

.why-card {

    position: relative;

    padding: 2.8rem;

    border-radius: 24px;

    background:
    linear-gradient(
        180deg,
        rgb(22 22 22 / .95),
        rgb(15 15 15 / .95)
    );

    border: 1px solid rgb(255 255 255 / .08);

    transition: var(--transition);

    overflow: hidden;
}

.why-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: var(--gold);

    transform: scaleY(0);

    transform-origin: top;

    transition: var(--transition);
}

.why-card:hover {

    transform: translateY(-10px);

    border-color: rgb(194 155 56 / .35);

    box-shadow:
        0 20px 50px rgb(0 0 0 / .35);
}

.why-card:hover::before {

    transform: scaleY(1);
}

.why-icon {

    width: 72px;
    height: 72px;

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

    margin-bottom: 2rem;

    border-radius: 50%;

    background: var(--gold);
}

.why-icon i {

    font-size: 1.7rem;
    color: var(--black);
}

.why-card h3 {

    margin-bottom: 1rem;

    font-family: var(--heading);

    font-size: 1.8rem;

    color: var(--white);
}

.why-card p {

    color: var(--muted);

    line-height: 1.8;
}

/* ==========================================================
                    TABLET RESPONSIVE
========================================================== */

@media (max-width: 992px) {

  /* Hero */

  .projects-hero {
    min-height: 90vh;
    padding: 9rem 0 5rem;
  }

  .projects-hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }

  .projects-content {
    max-width: 100%;
    margin: auto;
  }

  .projects-content p {
    margin-inline: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-glass-card {
    max-width: 700px;
    margin: auto;
  }

  /* Introduction */

  .intro-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .intro-content {
    text-align: center;
  }

  .intro-card {
    max-width: 700px;
    margin: auto;
  }

  /* Projects */

  .project-layout,
  .project-layout.reverse {

    grid-template-columns: 1fr;
    gap: 2.5rem;

    direction: ltr;
  }

  .project-image img {
    height: 500px;
  }

  .project-highlights {
    grid-template-columns: repeat(3,1fr);
  }

  /* Process */

  .process-grid {
    grid-template-columns: repeat(2,1fr);
  }

  /* Why */

  .why-grid {
    grid-template-columns: repeat(2,1fr);
  }

}

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

@media (max-width:768px){

  section{
    padding:5rem 0;
  }

  /* Hero */

  .projects-hero{

    min-height:100vh;
    padding:8rem 0 4rem;

    text-align:center;
  }

  .projects-content h1{

    font-size:2.6rem;
    line-height:1.15;
  }

  .projects-content p{

    font-size:.95rem;
    line-height:1.8;
  }

  .hero-buttons{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary{

    width:100%;
    max-width:320px;
  }

  .hero-glass-card{

    padding:2rem;
  }

  .glass-item h3{

    font-size:1.4rem;
  }

  /* Intro */

  .projects-intro{

    padding:5rem 0;
  }

  .intro-content{

    text-align:center;
  }

  .intro-content h2{

    font-size:2.2rem;
  }

  .intro-features{

    grid-template-columns:1fr;
  }

  .intro-card{

    padding:2rem;
  }

  .card-number{

    font-size:4rem;
  }

  .intro-stats{

    grid-template-columns:1fr;
  }

  /* Projects */

  .project-section{

    padding:5rem 0;
  }

  .project-layout{

    grid-template-columns:1fr;
    gap:2rem;
  }

  .project-image{

    border-radius:22px;
  }

  .project-image img{

    height:320px;
  }

  .project-content{

    padding:2rem;
    border-radius:22px;
  }

  .project-number{

    font-size:4rem;

    top:15px;
    right:20px;
  }

  .project-content h2{

    font-size:2rem;
  }

  .project-intro{

    font-size:.95rem;
  }

  /* Features */

  .project-features{

    grid-template-columns:1fr;
    gap:1rem;
  }

  .feature{

    align-items:flex-start;
  }

  /* Highlights */

  .project-highlights{

    grid-template-columns:1fr;
    gap:1rem;
  }

  .highlight-box{

    padding:1.4rem;
  }

  /* Process */

  .delivery-process{

    padding:5rem 0;
  }

  .process-grid{

    grid-template-columns:1fr;
  }

  .process-card{

    padding:2rem;
  }

  .process-card span{

    font-size:2.6rem;
  }

  .process-card h3{

    font-size:1.7rem;
  }

   .section-heading{
    margin-bottom:3.5rem;
    padding:0 1rem;
  }

  .section-label{
    font-size:.72rem;
    letter-spacing:2px;
    gap:8px;
  }

  .section-label::before,
  .section-label::after{
    width:28px;
  }

  .section-heading h2{
    font-size:2.5rem;
    line-height:1.15;
  }

  .section-heading p{
    font-size:.95rem;
    line-height:1.8;
  }

  /* Why */

  .why-skyeagle{

    padding:5rem 0;
  }

  .why-grid{

    grid-template-columns:1fr;
    gap:1.5rem;
  }

  .why-card{

    padding:2rem;
  }

  .why-icon{

    width:65px;
    height:65px;
  }

  .why-icon i{

    font-size:1.5rem;
  }

}

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

@media (max-width:480px){

  .projects-hero{

    padding:7rem 0 3rem;
  }

  .projects-content h1{

    font-size:2.2rem;
  }

  .projects-content p{

    font-size:.9rem;
  }

  .intro-content h2{

    font-size:1.9rem;
  }

  .project-content{

    padding:1.6rem;
  }

  .project-content h2{

    font-size:1.7rem;
  }

  .project-number{

    font-size:3.2rem;
  }

  .intro-card{

    padding:1.6rem;
  }

  .card-number{

    font-size:3.2rem;
  }

  .process-card{

    padding:1.6rem;
  }

  .why-card{

    padding:1.8rem;
  }

}