/*==================================================
    KAYVEN ANTONIO PORTFOLIO
    VERSION 6
    STYLE.CSS - PART 1A
==================================================*/


/*==================================================
RESET
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    color:#ffffff;

    overflow-x:hidden;

    background-color:#000;

    background-image:url("Assets/BG.png");

    background-repeat:no-repeat;

    background-position:top center;

    background-size:cover;

    background-attachment:fixed;

}


/*==================================================
VARIABLES
==================================================*/

:root{

    --orange:#F26419;

    --white:#FFFFFF;

    --black:#000000;

    --transition:.35s ease;

}


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

.container{

    width:min(92%,1450px);

    margin:0 auto;

}

section{

    position:relative;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}


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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:90px;

    z-index:9999;

    background:rgba(0,0,0,.82);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(242,100,25,.15);

    transition:var(--transition);

}


/*==================================================
NAV CONTAINER
==================================================*/

.nav-container{

    height:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/*==================================================
LOGO
==================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    color:#fff;

}

.logo-orange{

    font-size:27.6px;

    font-weight:700;

    color:var(--orange);

    letter-spacing:.5px;

}

.logo-white{

    font-size:19px;

    font-weight:700;

    color:#fff;

    letter-spacing:.5px;

}


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

.navigation ul{

    display:flex;

    align-items:center;

    gap:52px;

}

.navigation a{

    position:relative;

    color:#fff;

    font-size:16px;

    font-weight:600;

    letter-spacing:2px;

    transition:var(--transition);

}

.navigation a:hover{

    color:var(--orange);

}

.navigation a.active{

    color:var(--orange);

}

.navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--orange);

    transition:var(--transition);

}

.navigation a:hover::after,
.navigation a.active::after{

    width:100%;

}


/*==================================================
HAMBURGER
==================================================*/

.hamburger{

    display:none;

    flex-direction:column;

    justify-content:center;

    gap:6px;

    cursor:pointer;

}

.hamburger span{

    width:30px;

    height:3px;

    background:#fff;

    border-radius:30px;

    transition:var(--transition);

}


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

.header.scrolled{

    height:78px;

    background:rgba(0,0,0,.92);

    box-shadow:0 10px 30px rgba(0,0,0,.30);

}


/*==================================================
COMMON TRANSITIONS
==================================================*/

.logo,
.navigation a,
.header,
.hamburger span{

    transition:var(--transition);

}


/*==================================================
TEXT SELECTION
==================================================*/

::selection{

    background:var(--orange);

    color:#fff;

}


/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:var(--orange);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#ff7d3d;

}
/*==================================================
    STYLE.CSS - PART 1B
    HERO SECTION
==================================================*/


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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:90px;

    overflow:hidden;

}


/*==================================================
HERO CONTAINER
==================================================*/

.hero-container{

    position:relative;

    width:100%;

    min-height:calc(100vh - 90px);

    display:grid;

    grid-template-columns:55% 45%;

    align-items:center;

}


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

.hero-content{

    position:relative;

    z-index:10;

    padding-right:20px;

}


/*==================================================
HELLO
==================================================*/

.hello{

    font-size:68px;

    font-weight:700;

    line-height:1.1;

    margin-bottom:18px;

    color:#fff;

}


/*==================================================
NAME
==================================================*/

.name{

    font-size:44px;

    font-weight:400;

    line-height:1.3;

    margin-bottom:35px;

    color:#fff;

}


/*==================================================
TITLE
==================================================*/

.developer{

    font-size:60px;

    font-weight:700;

    line-height:1.1;

    color:#fff;

}

.designer{

    font-size:60px;

    font-weight:700;

    line-height:1.1;

    color:var(--orange);

    margin-bottom:50px;

}


/*==================================================
DESCRIPTION
==================================================*/

.hero-description{

    display:flex;

    align-items:flex-start;

    gap:22px;

}

.orange-line{

    width:4px;

    min-width:4px;

    height:110px;

    background:var(--orange);

    border-radius:20px;

}

.hero-description p{

    font-size:26px;

    line-height:1.6;

    letter-spacing:1px;

    color:#fff;

}


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

.hero-image{

    position:relative;

    display:flex;

    justify-content:flex-end;

    align-items:flex-end;

    height:100%;

    overflow:visible;

}


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

.hero-image img{

    height:92vh;

    width:auto;

    max-width:none;

    object-fit:contain;

    object-position:bottom right;

    pointer-events:none;

    user-select:none;

    transform:translateX(4%);

}


/*==================================================
CURSOR
==================================================*/

.cursor{

    color:var(--orange);

    animation:blink .8s infinite;

}

@keyframes blink{

    0%{

        opacity:1;

    }

    50%{

        opacity:0;

    }

    100%{

        opacity:1;

    }

}


/*==================================================
SECTION PLACEHOLDERS
==================================================*/

#about,
#projects{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}
#contact{

    position:relative;
    width:100%;
    min-height:100vh;
    padding:120px 0;

}
.contact-header{

    max-width:900px;
    margin:0 auto 70px;
    text-align:center;

}

.contact-header .section-subtitle{

    display:block;
    color:#F26419;
    font-size:14px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:18px;

}

.contact-header .section-title{

    font-size:60px;
    font-weight:800;
    line-height:1.1;
    color:#fff;
    margin-bottom:28px;

}

.contact-header .section-title span{

    color:#F26419;

}

.contact-header .section-description{

    max-width:760px;
    margin:0 auto;
    font-size:22px;
    line-height:1.9;
    color:#cfcfcf;

}
/*=====================================
CONTACT HEADER
=====================================*/

.contact-header{
    max-width:900px;
    margin:0 auto 70px;
    text-align:center;
}

.contact-header .section-subtitle{
    display:block;
    color:var(--orange);
    font-size:14px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.contact-header .section-title{
    font-size:60px;
    font-weight:800;
    line-height:1.1;
    color:#fff;
    margin-bottom:28px;
}

.contact-header .section-title span{
    color:var(--orange);
}

.contact-header .section-description{
    max-width:760px;
    margin:0 auto;
    font-size:22px;
    line-height:1.9;
    color:#cfcfcf;
}

/*==================================================
HERO ENTRANCE
==================================================*/

.hero-content{

    animation:heroLeft .8s ease;

}

.hero-image{

    animation:heroRight 1s ease;

}

@keyframes heroLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes heroRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}
/*==================================================
    STYLE.CSS - PART 2
    RESPONSIVE
==================================================*/


/*==================================================
LARGE DESKTOP
==================================================*/

@media (min-width:1600px){

.container{

    width:min(90%,1600px);

}

.hero-image img{

    height:96vh;

}

}


/*==================================================
DESKTOP
==================================================*/

@media (max-width:1400px){

.hero-container{

    grid-template-columns:56% 44%;

}

.hero-image img{

    height:88vh;

}

.hello{

    font-size:60px;

}

.name{

    font-size:40px;

}

.developer,
.designer{

    font-size:54px;

}

.hero-description p{

    font-size:22px;

}

}


/*==================================================
LAPTOP
==================================================*/

@media (max-width:1200px){

.container{

    width:94%;

}

.navigation ul{

    gap:40px;

}

.hero-container{

    grid-template-columns:58% 42%;

}

.hero-image img{

    height:78vh;

}

.hello{

    font-size:52px;

}

.name{

    font-size:34px;

}

.developer,
.designer{

    font-size:44px;

}

.hero-description{

    margin-top:30px;

}

.hero-description p{

    font-size:18px;

}

.orange-line{

    height:90px;

}

}


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

@media (max-width:992px){

.hero{

    padding-top:100px;

}

.hero-container{

    grid-template-columns:58% 42%;

}

.hero-image img{

    height:68vh;

    transform:translateX(8%);

}

.hello{

    font-size:42px;

}

.name{

    font-size:26px;

    margin-bottom:20px;

}

.developer,
.designer{

    font-size:34px;

}

.hero-description{

    gap:16px;

    margin-top:22px;

}

.hero-description p{

    font-size:15px;

}

.orange-line{

    height:70px;

}

.logo-white{

    display:none;

}

.hamburger{

    display:flex;

}


/* Mobile Navigation */

.navigation{

    position:fixed;

    top:90px;

    right:-100%;

    width:260px;

    height:calc(100vh - 90px);

    background:rgba(0,0,0,.96);

    backdrop-filter:blur(18px);

    transition:.35s;

}

.navigation.show{

    right:0;

}

.navigation ul{

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    gap:35px;

    padding-top:50px;

}

}


/*==================================================
PHONE
==================================================*/

@media (max-width:768px){

.header{

    height:80px;

}

.nav-container{

    height:80px;

}

.navigation{

    top:80px;

    height:calc(100vh - 80px);

}

.hero{

    padding-top:90px;

}

.hero-container{

    grid-template-columns:60% 40%;

}

.hero-image img{

    height:56vh;

    transform:translateX(10%);

}

.hello{

    font-size:34px;

}

.name{

    font-size:20px;

}

.developer,
.designer{

    font-size:26px;

}

.hero-description{

    margin-top:18px;

}

.hero-description p{

    font-size:13px;

}

.orange-line{

    height:55px;

}

}


/*==================================================
SMALL PHONE
==================================================*/

@media (max-width:480px){

.container{

    width:95%;

}

.hero{

    min-height:auto;

    padding-top:85px;

    padding-bottom:40px;

}

.hero-container{

    min-height:auto;

    grid-template-columns:60% 40%;

    align-items:end;

    padding-top:20px;

}

.hero-image{

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

}

.hero-image{

    display:flex;

    justify-content:flex-end;

    align-items:flex-end;

}

.hero-image img{

    height:44vh;

    transform:translateX(10%) translateY(25px);

}

.hello{

    font-size:28px;

}

.name{

    font-size:17px;

}

.developer,
.designer{

    font-size:20px;

}

.hero-description{

    gap:12px;

}

.hero-description p{

    font-size:11px;

    line-height:1.5;

}

.orange-line{

    height:45px;

}

}


/*==================================================
HAMBURGER
==================================================*/

.hamburger.open span:nth-child(1){

    transform:rotate(45deg) translateY(12px);

}

.hamburger.open span:nth-child(2){

    opacity:0;

}

.hamburger.open span:nth-child(3){

    transform:rotate(-45deg) translateY(-12px);

}


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

.header.scrolled{

    height:75px;

    background:rgba(0,0,0,.94);

    box-shadow:0 10px 25px rgba(0,0,0,.30);

}


/*==================================================
ACCESSIBILITY
==================================================*/

@media (prefers-reduced-motion:reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}


/*==================================================
END
==================================================*/
/*==================================================
    ABOUT SECTION
==================================================*/

#about{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:120px 0;

}

.about-container{

    display:grid;

    grid-template-columns:45% 55%;

    align-items:center;

    gap:70px;

}


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

.about-image{

    position:relative;

    display:flex;

    justify-content:flex-start;

    align-items:center;

    overflow:visible;

}

.about-image img{

    height:85vh;

    width:auto;

    max-width:none;

    object-fit:contain;

    display:block;

    transform:translateX(-8%);

    transition:.35s ease;

}


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

.about-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.about-title{

    font-size:60px;

    font-weight:800;

    color:#ffffff;

    line-height:1.1;

    margin-bottom:35px;

}

.about-title span{

    color:#F26419;

}

.about-text{

    max-width:640px;

    font-size:24px;

    line-height:1.9;

    color:#ffffff;

    margin-bottom:60px;

}


/*==================================================
STATISTICS
==================================================*/

.about-stats{

    display:grid;

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

    gap:20px;

}

.stat-card{

    background:rgba(12,12,12,.75);

    border:1px solid rgba(242,100,25,.45);

    border-radius:18px;

    padding:28px 20px;

    text-align:center;

    transition:.35s ease;

}

.stat-card:hover{

    transform:translateY(-10px);

    border-color:#F26419;

    box-shadow:0 15px 35px rgba(242,100,25,.20);

}

.stat-icon{

    width:56px;
    height:56px;

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

    margin:0 auto 22px;

    border:1px solid #F26419;
    border-radius:50%;

    color:#F26419;

    font-size:22px;

    transition:.35s ease;

}
.stat-card:hover .stat-icon{

    background:#F26419;

    color:#ffffff;

    transform:translateY(-3px);

}

.stat-number{

    font-size:52px;

    font-weight:800;

    color:#ffffff;

    line-height:1;

    margin-bottom:14px;

}

.stat-line{

    width:45px;

    height:3px;

    background:#F26419;

    margin:0 auto 18px;

    border-radius:20px;

}

.stat-text{

    font-size:18px;

    line-height:1.5;

    color:#ffffff;

}


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

@media(max-width:1400px){

.about-container{

    gap:55px;

}

.about-image img{

    height:75vh;

    transform:translateX(-5%);

}

}


@media(max-width:1200px){

.about-container{

    gap:40px;

}

.about-image img{

    height:68vh;

    transform:translateX(-3%);

}

.about-title{

    font-size:50px;

}

.about-text{

    font-size:20px;

}

.about-stats{

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

}

}


@media(max-width:768px){

#about{

    padding:90px 0;

}

.about-container{

    grid-template-columns:1fr;

    gap:50px;

    text-align:center;

}

.about-image{

    justify-content:center;

    order:1;

}

.about-image img{

    height:55vh;

    transform:none;

}

.about-content{

    order:2;

    align-items:center;

}

.about-title{

    font-size:42px;

}

.about-text{

    font-size:18px;

    margin-bottom:45px;

}

.about-stats{

    width:100%;

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

}

}


@media(max-width:500px){

.about-image img{

    height:42vh;

}

.about-title{

    font-size:34px;

}

.about-text{

    font-size:16px;

}

.about-stats{

    grid-template-columns:1fr;

}

.stat-number{

    font-size:42px;

}

}
/*==================================================
    SERVICES SECTION
==================================================*/

#services{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:120px 0;

}


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

.services-header{

    max-width:900px;

    margin:0 auto 80px;

    text-align:center;

}

.services-title{

    font-size:60px;

    font-weight:800;

    color:#ffffff;

    margin-bottom:30px;

    line-height:1.1;

}

.services-title span{

    color:#F26419;

}

.services-description{

    max-width:760px;

    margin:0 auto;

    font-size:22px;

    line-height:1.9;

    color:#d8d8d8;

}


/*==================================================
SERVICES GRID
==================================================*/

.services-grid{

    display:grid;

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

    gap:30px;

    align-items:stretch;

}


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

@media(max-width:1200px){

.services-grid{

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

}

.services-title{

    font-size:52px;

}

.services-description{

    font-size:20px;

}

}


@media(max-width:768px){

#services{

    padding:90px 0;

}

.services-grid{

    grid-template-columns:1fr;

}

.services-header{

    margin-bottom:50px;

}

.services-title{

    font-size:42px;

}

.services-description{

    font-size:18px;

}

}


@media(max-width:500px){

.services-title{

    font-size:34px;

}

.services-description{

    font-size:16px;

}

}
/*==================================================
SERVICES CARD
==================================================*/

.service-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:flex-start;

    min-height:340px;

    padding:40px 35px;

    background:rgba(12,12,12,.75);

    border:1px solid rgba(242,100,25,.35);

    border-radius:22px;

    backdrop-filter:blur(14px);

    transition:all .35s ease;

    overflow:hidden;

}


/*==================================================
HOVER
==================================================*/

.service-card:hover{

    transform:translateY(-12px);

    border-color:#F26419;

    box-shadow:0 18px 45px rgba(242,100,25,.20);

}


/*==================================================
TOP ORANGE BAR
==================================================*/

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:#F26419;

    transition:.35s ease;

}

.service-card:hover::before{

    width:100%;

}


/*==================================================
ICON
==================================================*/

.service-icon{

    width:78px;

    height:78px;

    margin-bottom:28px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:#F26419;

    border:1px solid rgba(242,100,25,.40);

    background:rgba(242,100,25,.08);

    transition:.35s ease;

}

.service-card:hover .service-icon{

    transform:scale(1.12) rotate(8deg);

    background:#F26419;

    color:#ffffff;

}


/*==================================================
TITLE
==================================================*/

.service-card h3{

    font-size:26px;

    font-weight:700;

    color:#ffffff;

    line-height:1.45;

    margin-bottom:18px;

}


/*==================================================
DESCRIPTION
==================================================*/

.service-card p{

    font-size:17px;

    line-height:1.9;

    color:#d8d8d8;

    margin-top:auto;

}


/*==================================================
CARD SHINE
==================================================*/

.service-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:60%;

    height:300%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.08),

        transparent

    );

    transform:rotate(25deg);

    transition:.7s ease;

}

.service-card:hover::after{

    left:140%;

}


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

@media(max-width:1200px){

.service-card{

    min-height:320px;

}

.service-card h3{

    font-size:22px;

}

}


@media(max-width:768px){

.service-card{

    min-height:auto;

    padding:35px 28px;

}

.service-icon{

    width:70px;

    height:70px;

    font-size:30px;

}

.service-card h3{

    font-size:22px;

}

.service-card p{

    font-size:16px;

}

}


@media(max-width:500px){

.service-card{

    padding:30px 24px;

}

.service-icon{

    width:64px;

    height:64px;

    font-size:28px;

}

.service-card h3{

    font-size:20px;

}

.service-card p{

    font-size:15px;

    line-height:1.8;

}

}
/*==================================================
    PROJECTS SECTION
==================================================*/

#projects{

    position:relative;

    width:100%;

    min-height:100vh;

    padding:120px 0;

}


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

.projects-header{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}

.projects-title{

    font-size:60px;

    font-weight:800;

    color:#ffffff;

    line-height:1.1;

    margin-bottom:28px;

}

.projects-title span{

    color:#F26419;

}

.projects-description{

    max-width:760px;

    margin:0 auto;

    font-size:22px;

    line-height:1.9;

    color:#cfcfcf;

}


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

.project-filters{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:70px;

}

.filter-btn{

    padding:14px 28px;

    background:transparent;

    border:1px solid rgba(242,100,25,.35);

    border-radius:50px;

    color:#ffffff;

    font-family:"Inter",sans-serif;

    font-size:14px;

    font-weight:600;

    letter-spacing:1.5px;

    cursor:pointer;

    transition:.35s ease;

}

.filter-btn:hover{

    background:#F26419;

    border-color:#F26419;

    color:#ffffff;

}

.filter-btn.active{

    background:#F26419;

    border-color:#F26419;

    color:#ffffff;

}


/*==================================================
PROJECT GRID
==================================================*/

.projects-grid{

    display:grid;

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

    gap:35px;

    align-items:start;

}


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

@media(max-width:1200px){

.projects-grid{

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

}

.projects-title{

    font-size:52px;

}

.projects-description{

    font-size:20px;

}

}


@media(max-width:768px){

#projects{

    padding:90px 0;

}

.projects-grid{

    grid-template-columns:1fr;

}

.project-filters{

    gap:12px;

    margin-bottom:50px;

}

.filter-btn{

    padding:12px 22px;

    font-size:13px;

}

.projects-title{

    font-size:42px;

}

.projects-description{

    font-size:18px;

}

}


@media(max-width:500px){

.projects-title{

    font-size:34px;

}

.projects-description{

    font-size:16px;

}

.filter-btn{

    width:100%;

}

}
/*==================================================
PROJECT CARD
==================================================*/

.project-card{

    display:flex;

    flex-direction:column;

    background:rgba(12,12,12,.78);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    overflow:hidden;

    transition:all .35s ease;

    height:100%;

    backdrop-filter:blur(14px);

}

.project-card:hover{

    transform:translateY(-12px);

    border-color:rgba(242,100,25,.45);

    box-shadow:0 18px 45px rgba(0,0,0,.35);

}


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

.project-image{

    position:relative;

    overflow:hidden;

    display:block;

    aspect-ratio:16 / 10;

    background:#000;

}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s ease;

}

.project-card:hover .project-image img{

    transform:scale(1.08);

}


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

.project-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.72);

    opacity:0;

    transition:.35s ease;

}

.project-card:hover .project-overlay{

    opacity:1;

}

.project-overlay h3{

    color:#F26419;

    font-size:18px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.3s ease;

}
.project-card:hover .project-overlay h3{

    color:#ff8a3d;

    text-shadow:0 0 10px rgba(242,100,25,.6);

}

.project-overlay span:last-child{

    margin-top:10px;

    color:#ffffff;

    font-size:14px;

    letter-spacing:1px;

    opacity:.85;

}
.project-overlay a{

    color:#F26419;
    text-decoration:none;
    font-size:18px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:.3s ease;

}

.project-overlay a:hover{

    color:#ff8a3d;
    text-shadow:0 0 10px rgba(242,100,25,.6);

}
.project-overlay a{

    color:#F26419 !important;
    text-decoration:none;

}
/*==================================================
PROJECT CONTENT
==================================================*/

.project-content{

    display:flex;

    flex-direction:column;

    padding:32px;

    flex:1;

}


/*==================================================
PLATFORM BADGE
==================================================*/

.project-platform{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    padding:7px 14px;

    border:1px solid rgba(242,100,25,.45);

    border-radius:30px;

    color:#F26419;

    font-size:12px;

    font-weight:700;

    letter-spacing:1.5px;

    margin-bottom:22px;

    text-transform:uppercase;

}


/*==================================================
TITLE
==================================================*/

.project-content h3{

    font-size:28px;

    font-weight:700;

    color:#ffffff;

    margin-bottom:8px;

    line-height:1.3;

}


/*==================================================
LOCATION
==================================================*/

.project-location{

    font-size:15px;

    color:#9d9d9d;

    margin-bottom:22px;

    letter-spacing:.5px;

}


/*==================================================
DESCRIPTION
==================================================*/

.project-description{

    color:#d7d7d7;

    line-height:1.9;

    font-size:16px;

}


/*==================================================
DIVIDER
==================================================*/

.project-divider{

    width:100%;

    height:1px;

    background:rgba(255,255,255,.08);

    margin:28px 0;

}


/*==================================================
SUBTITLE
==================================================*/

.project-content h4{

    color:#ffffff;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}


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

.project-features{

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.project-features li{

    position:relative;

    padding-left:24px;

    color:#d8d8d8;

    line-height:1.7;

    font-size:15px;

}


/*==================================================
CUSTOM BULLET
==================================================*/

.project-features li::before{

    content:"";

    position:absolute;

    left:0;

    top:9px;

    width:8px;

    height:8px;

    border:2px solid #F26419;

    border-radius:2px;

}


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

@media(max-width:1200px){

.project-content{

    padding:28px;

}

.project-content h3{

    font-size:24px;

}

}


@media(max-width:768px){

.project-content{

    padding:26px;

}

.project-content h3{

    font-size:22px;

}

.project-location{

    font-size:14px;

}

.project-description{

    font-size:15px;

}

}


@media(max-width:500px){

.project-content{

    padding:22px;

}

.project-content h3{

    font-size:20px;

}

.project-platform{

    font-size:11px;

}

.project-features li{

    font-size:14px;

}

}
/* ==========================================================
   TOOLS SECTION
========================================================== */

.tools-section{
    padding:120px 8%;
    background:#050505;
}

.tools-section .section-title{
    text-align:center;
    max-width:720px;
    margin:0 auto 70px;
}

.tools-section .section-tag{
    display:inline-block;
    color:#f26419;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.tools-section h2{
    font-size:3.4rem;
    font-weight:800;
    color:#fff;
    margin-bottom:18px;
}

.tools-section h2 span{
    color:#f26419;
}

.tools-section .section-title p{
    color:#b9b9b9;
    font-size:1.05rem;
    line-height:1.8;
}
/*==================================================
TOOLS MOBILE
==================================================*/

@media (max-width:500px){

    .tools-grid{

        grid-template-columns:repeat(3,1fr);
        gap:14px;
        margin-top:40px;

    }

    .tool-card{

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

        padding:18px 10px;
        border-radius:14px;

    }

    .tool-card img{

        width:48px;
        height:48px;
        object-fit:contain;
        margin-bottom:10px;

    }

    .tool-card h3{

        font-size:14px;
        margin:0;

    }

}
/* ==========================================================
GRID
========================================================== */

.tools-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

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

.tool-card{

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.tool-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    180deg,
    rgba(242,100,25,.12),
    transparent);

    opacity:0;

    transition:.35s;

}

.tool-card:hover{

    transform:translateY(-10px);

    border-color:#f26419;

    box-shadow:
    0 20px 50px rgba(242,100,25,.18);

}

.tool-card:hover::before{

    opacity:1;

}

/* ==========================================================
ICON
========================================================== */

.tool-icon{

    width:92px;

    height:92px;

    margin:0 auto 25px;

    border-radius:50%;

    border:2px solid rgba(242,100,25,.45);

    display:flex;

    justify-content:center;

    align-items:center;

    background:#181818;

    transition:.35s;

}

.tool-card:hover .tool-icon{

    border-color:#f26419;

    transform:scale(1.05);

}

.tool-card img{

    width:90px;
    height:90px;
    object-fit:contain;
    display:block;
    margin:0 auto 20px;

}

/* ==========================================================
TEXT
========================================================== */

.tool-card h3{

    color:#fff;

    font-size:1.35rem;

    margin-bottom:15px;

    font-weight:700;

}

.tool-card p{

    color:#b7b7b7;

    line-height:1.7;

    font-size:.95rem;

}

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

@media(max-width:992px){

    .tools-section{

        padding:90px 7%;

    }

    .tools-section h2{

        font-size:2.8rem;

    }

}

@media(max-width:768px){

    .tools-grid{

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

    }

    .tools-section h2{

        font-size:2.2rem;

    }

}

@media(max-width:500px){

    .tools-grid{

        grid-template-columns:repeat(3,1fr);
        gap:14px;
        margin-top:40px;

    }

    .tool-card{

        padding:16px 8px;
        border-radius:14px;

    }

    .tool-card img{

        width:50px;
        height:50px;
        object-fit:contain;
        margin:0 auto 10px;

    }

    .tool-card h3{

        font-size:13px;
        margin:0;

    }

}
/* ==========================
   CONTACT CARDS
========================== */

.contact-list{
    display:flex;
    flex-direction:column;
    gap:20px;
    max-width:700px;
    margin:50px auto 0;
}

.contact-card{
    display:flex;
    align-items:center;
    gap:24px;

    padding:24px 28px;

    background:#111;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;

    text-decoration:none;
    color:#fff;

    transition:.35s ease;

    position:relative;
    overflow:hidden;
}

.contact-card:hover{

    transform:translateX(8px);

    border-color:#f26419;

    box-shadow:
    0 0 25px rgba(242,100,25,.18);
}

.contact-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:5px;
    height:100%;

    background:#f26419;

    transform:scaleY(0);

    transition:.35s;
}

.contact-card:hover::before{

    transform:scaleY(1);

}

.contact-icon{

    width:72px;
    height:72px;

    border-radius:18px;

    background:#1b1b1b;

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

    font-size:32px;

    color:#f26419;

    transition:.35s;
}

.contact-card:hover .contact-icon{

    background:#f26419;

    color:#fff;

    transform:rotate(-8deg) scale(1.08);

}

.contact-info h4{

    margin:0 0 6px;

    font-size:24px;

    font-weight:700;

    color:#fff;

}

.contact-info p{

    margin:0;

    color:#bdbdbd;

    font-size:16px;

    word-break:break-word;

}

.contact-status{

    display:inline-block;

    margin-bottom:8px;

    padding:4px 10px;

    border-radius:999px;

    background:rgba(242,100,25,.12);

    color:#f26419;

    font-size:13px;

    font-weight:600;
}
/*==================================================
CONTACT MOBILE
==================================================*/

@media (max-width:500px){

    .contact-list{

        gap:16px;

    }

    .contact-card{

        padding:18px;
        border-radius:18px;
        gap:16px;

    }

    .contact-icon{

        width:56px;
        height:56px;
        min-width:56px;

    }

    .contact-icon i{

        font-size:26px;

    }

    .contact-info h4{

        font-size:18px;
        margin-bottom:4px;

    }

    .contact-info p{

        font-size:14px;
        line-height:1.5;

        /* Prevent long links/emails from overflowing */
        word-break:break-word;

    }

    .contact-status{

        font-size:11px;
        padding:4px 10px;
        margin-bottom:6px;

    }

}
/*==================================================
CONTACT HEADER MOBILE
==================================================*/

@media (max-width:500px){

    .contact-header{

        margin:0 auto 40px;
        padding:0 15px;

    }

    .contact-header .section-subtitle{

        font-size:12px;
        letter-spacing:4px;
        margin-bottom:14px;

    }

    .contact-header .section-title{

        font-size:42px;
        line-height:1.15;
        margin-bottom:20px;

    }

    .contact-header .section-description{

        font-size:18px;
        line-height:1.7;
        max-width:100%;

    }

}