/*==================================================
KARYLE NAVAREZ PORTFOLIO
VERSION 2.0
==================================================*/

:root{

--burgundy:#6B1028;
--burgundy-dark:#4b0b1d;

--gold:#C8A96A;

--black:#111111;

--white:#ffffff;

--light:#f7f7f7;

--gray:#666666;

--shadow:0 20px 60px rgba(0,0,0,.08);

--radius:18px;

--transition:.35s;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:#ffffff;

color:var(--black);

overflow-x:hidden;

line-height:1.7;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#eeeeee;

}

::-webkit-scrollbar-thumb{

background:var(--burgundy);

border-radius:20px;

}

/*==================================================
IMAGES
==================================================*/

img{

display:block;

max-width:100%;

height:auto;

}

/*==================================================
LINKS
==================================================*/

a{

text-decoration:none;

color:inherit;

}

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

section{

padding:120px 8%;

position:relative;

}

/*==================================================
BACKGROUND SHAPES
==================================================*/

.shape{

position:fixed;

border-radius:50%;

filter:blur(90px);

opacity:.18;

z-index:-2;

}

.shape1{

width:320px;

height:320px;

background:#6B1028;

top:-120px;

left:-100px;

}

.shape2{

width:260px;

height:260px;

background:#C8A96A;

bottom:0;

right:-80px;

}

.shape3{

width:200px;

height:200px;

background:#8b1635;

top:45%;

left:60%;

}

/*==================================================
PROGRESS BAR
==================================================*/

#progress-bar{

position:fixed;

top:0;

left:0;

height:4px;

background:var(--burgundy);

width:0;

z-index:99999;

}

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

header{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

width:min(94%,1280px);

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

backdrop-filter:blur(20px);

border-radius:22px;

box-shadow:var(--shadow);

z-index:9999;

}

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

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 40px;

}

.logo img{

height:85px;

}

.nav-links{

display:flex;

gap:32px;

align-items:center;

list-style:none;

}

.nav-links a{

position:relative;

font-weight:600;

font-size:15px;

transition:var(--transition);

}

.nav-links a:hover{

color:var(--burgundy);

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--gold);

transition:var(--transition);

}

.nav-links a:hover::after{

width:100%;

}

.menu-toggle{

display:none;

font-size:32px;

cursor:pointer;

}

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

.hero{

max-width:1280px;

margin:auto;

min-height:100vh;

display:grid;

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

align-items:center;

gap:80px;

padding-top:170px;

}

.hero-tag{

display:inline-block;

padding:10px 20px;

border-radius:50px;

background:#f6ecef;

color:var(--burgundy);

font-size:14px;

font-weight:600;

letter-spacing:2px;

margin-bottom:25px;

}

.hero h1{

font-family:'Playfair Display',serif;

font-size:78px;

line-height:1.05;

margin-bottom:18px;

}

.hero h2{

font-size:34px;

font-weight:600;

color:var(--burgundy);

margin-bottom:25px;

}

.hero-description{

max-width:650px;

font-size:18px;

color:var(--gray);

margin-bottom:40px;

}

.hero-right{

display:flex;

justify-content:center;

}

.hero-right img{

width:430px;

border-radius:35px;

border:10px solid white;

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

transition:.4s;

}

.hero-right img:hover{

transform:translateY(-8px);

}

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

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

margin-bottom:50px;

}

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

border-radius:50px;

background:var(--burgundy);

color:white;

font-weight:600;

transition:.35s;

box-shadow:0 15px 40px rgba(107,16,40,.25);

}

.btn-primary:hover{

background:var(--burgundy-dark);

transform:translateY(-5px);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

border-radius:50px;

border:2px solid var(--burgundy);

font-weight:600;

color:var(--burgundy);

transition:.35s;

}

.btn-secondary:hover{

background:var(--burgundy);

color:white;

transform:translateY(-5px);

}

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

.hero-stats{

display:flex;

gap:25px;

flex-wrap:wrap;

}

.stat{

background:white;

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

flex:1;

min-width:170px;

text-align:center;

}

.stat h3{

font-size:34px;

font-family:'Playfair Display',serif;

color:var(--burgundy);

margin-bottom:8px;

}

.stat p{

font-size:14px;

color:var(--gray);

}

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

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title p{

color:var(--burgundy);

font-weight:600;

letter-spacing:3px;

margin-bottom:12px;

}

.section-title h2{

font-family:'Playfair Display',serif;

font-size:48px;

margin-bottom:15px;

}

.section-title span{

display:inline-block;

width:90px;

height:4px;

background:var(--gold);

border-radius:10px;

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

.about-container{

display:grid;

grid-template-columns:1fr 1.1fr;

gap:80px;

align-items:center;

}

.about-image{

display:flex;

justify-content:center;

}

.about-image img{

width:100%;

max-width:450px;

border-radius:30px;

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

transition:.4s;

}

.about-image img:hover{

transform:translateY(-8px);

}

.about-content h3{

font-family:'Playfair Display',serif;

font-size:40px;

margin-bottom:25px;

line-height:1.3;

}

.about-content p{

color:var(--gray);

margin-bottom:22px;

font-size:17px;

}

.about-highlights{

margin-top:40px;

display:grid;

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

gap:25px;

}

.highlight{

display:flex;

align-items:flex-start;

gap:18px;

padding:25px;

background:#fff;

border-radius:20px;

box-shadow:var(--shadow);

transition:.35s;

}

.highlight:hover{

transform:translateY(-8px);

}

.highlight i{

font-size:30px;

color:var(--burgundy);

margin-top:4px;

}

.highlight h4{

margin-bottom:8px;

font-size:18px;

}

.highlight p{

margin:0;

font-size:15px;

}

/*==================================================
WHY HIRE ME
==================================================*/

.hire-grid{

display:grid;

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

gap:30px;

}

.hire-card{

background:white;

padding:40px;

border-radius:22px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

border-top:5px solid transparent;

}

.hire-card:hover{

transform:translateY(-10px);

border-color:var(--gold);

}

.hire-card i{

font-size:46px;

margin-bottom:22px;

color:var(--burgundy);

}

.hire-card h3{

margin-bottom:15px;

font-size:22px;

}

.hire-card p{

color:var(--gray);

}

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

.service-grid{

display:grid;

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

gap:35px;

}

.service-card{

background:white;

padding:40px;

border-radius:22px;

box-shadow:var(--shadow);

transition:.35s;

position:relative;

overflow:hidden;

}

.service-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:var(--gold);

transform:scaleX(0);

transition:.35s;

}

.service-card:hover::before{

transform:scaleX(1);

}

.service-card:hover{

transform:translateY(-10px);

}

.service-card i{

font-size:42px;

color:var(--burgundy);

margin-bottom:25px;

}

.service-card h3{

margin-bottom:18px;

font-size:24px;

}

.service-card p{

color:var(--gray);

}

/*==================================================
TOOLS
==================================================*/

.tools{

background:var(--light);

}

.tools-grid{

display:grid;

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

gap:25px;

}

.tool-card{

background:white;

padding:35px 25px;

border-radius:20px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

cursor:pointer;

}

.tool-card:hover{

transform:translateY(-8px);

}

.tool-card i{

font-size:42px;

color:var(--burgundy);

margin-bottom:18px;

}

.tool-card h3{

font-size:18px;

font-weight:600;

}
/*==================================================
EXPERIENCE TIMELINE
==================================================*/

.timeline{

position:relative;

max-width:1200px;

margin:auto;

padding:40px 0;

}

.timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

transform:translateX(-50%);

width:4px;

height:100%;

background:linear-gradient(var(--burgundy),var(--gold));

border-radius:10px;

}

.timeline-item{

position:relative;

width:50%;

padding:20px 50px;

margin-bottom:40px;

}

.timeline-item.left{

left:0;

text-align:right;

}

.timeline-item.right{

left:50%;

}

.timeline-content{

background:white;

padding:35px;

border-radius:22px;

box-shadow:var(--shadow);

transition:.35s;

position:relative;

}

.timeline-content:hover{

transform:translateY(-8px);

}

.timeline-date{

display:inline-block;

background:var(--burgundy);

color:white;

padding:8px 18px;

border-radius:30px;

font-size:13px;

font-weight:600;

margin-bottom:18px;

}

.timeline-content h3{

font-size:26px;

margin-bottom:10px;

font-family:'Playfair Display',serif;

}

.timeline-content h4{

color:var(--gold);

margin-bottom:15px;

font-weight:600;

}

.timeline-content p{

color:var(--gray);

}

.timeline-item::before{

content:"";

position:absolute;

top:45px;

width:22px;

height:22px;

background:var(--gold);

border:5px solid white;

border-radius:50%;

box-shadow:0 0 0 4px rgba(107,16,40,.15);

z-index:2;

}

.timeline-item.left::before{

right:-11px;

}

.timeline-item.right::before{

left:-11px;

}

/*==================================================
PROFESSIONAL DEVELOPMENT
==================================================*/

.development{

background:var(--light);

}

.development-grid{

display:grid;

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

gap:30px;

}

.development-card{

background:white;

padding:35px;

border-radius:22px;

box-shadow:var(--shadow);

transition:.35s;

border-left:6px solid var(--burgundy);

}

.development-card:hover{

transform:translateY(-10px);

}

.development-card h3{

font-size:24px;

margin-bottom:12px;

font-family:'Playfair Display',serif;

}

.development-card h4{

color:var(--gold);

margin-bottom:18px;

font-weight:600;

}

.development-card p{

color:var(--gray);

}

/*==================================================
CERTIFICATION GALLERY
==================================================*/

.certificate-grid{

display:grid;

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

gap:30px;

}

.certificate-grid img{

width:100%;

border-radius:20px;

box-shadow:var(--shadow);

transition:.4s;

cursor:pointer;

}

.certificate-grid img:hover{

transform:translateY(-10px) scale(1.03);

}

/*==================================================
EDUCATION
==================================================*/

.education-grid{

display:grid;

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

gap:35px;

}

.education-card{

background:white;

padding:45px;

border-radius:25px;

box-shadow:var(--shadow);

transition:.35s;

}

.education-card:hover{

transform:translateY(-10px);

}

.education-icon{

width:80px;

height:80px;

background:rgba(107,16,40,.08);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

}

.education-icon i{

font-size:34px;

color:var(--burgundy);

}

.education-card h3{

font-size:30px;

font-family:'Playfair Display',serif;

margin-bottom:12px;

}

.education-card h4{

color:var(--gold);

margin-bottom:20px;

}

.education-card p{

color:var(--gray);

margin-bottom:25px;

}

.education-tags{

display:flex;

flex-wrap:wrap;

gap:12px;

}

.education-tags span{

padding:10px 18px;

background:#f5f5f5;

border-radius:50px;

font-size:14px;

}

/*==================================================
SKILLS
==================================================*/

.skills{

background:var(--light);

}

.skills-grid{

display:grid;

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

gap:30px;

}

.skill-card{

background:white;

padding:30px;

border-radius:20px;

box-shadow:var(--shadow);

}

.skill-card h3{

margin-bottom:18px;

font-size:20px;

}

.skill-bar{

height:12px;

background:#ececec;

border-radius:20px;

overflow:hidden;

}

.skill-fill{

height:100%;

background:linear-gradient(90deg,var(--burgundy),var(--gold));

border-radius:20px;

transition:width 1.5s ease;

}
/*==================================================
FEATURED PROJECTS
==================================================*/

.projects{

background:#ffffff;

}

.projects-grid{

display:grid;

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

gap:30px;

}

.project-card{

background:white;

padding:40px;

border-radius:24px;

box-shadow:var(--shadow);

text-align:center;

transition:.35s;

position:relative;

overflow:hidden;

}

.project-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(to right,var(--burgundy),var(--gold));

transform:scaleX(0);

transition:.35s;

}

.project-card:hover::before{

transform:scaleX(1);

}

.project-card:hover{

transform:translateY(-10px);

}

.project-card i{

font-size:46px;

color:var(--burgundy);

margin-bottom:25px;

}

.project-card h3{

font-family:'Playfair Display',serif;

font-size:24px;

margin-bottom:15px;

}

.project-card p{

color:var(--gray);

}

/*==================================================
GALLERY
==================================================*/

.gallery{

background:var(--light);

}

.gallery-grid{

display:grid;

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

gap:25px;

}

.gallery-grid img{

width:100%;

height:320px;

object-fit:cover;

border-radius:22px;

box-shadow:var(--shadow);

transition:.4s;

cursor:pointer;

}

.gallery-grid img:hover{

transform:scale(1.04);

}

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

.contact{

background:linear-gradient(135deg,#ffffff,#f8f4f5);

}

.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:start;

}

.contact-left,
.contact-right{

background:white;

padding:45px;

border-radius:28px;

box-shadow:var(--shadow);

}

.contact-left h3,
.contact-right h3{

font-family:'Playfair Display',serif;

font-size:34px;

margin-bottom:20px;

}

.contact-left>p,
.contact-right>p{

color:var(--gray);

margin-bottom:35px;

}

.contact-card{

display:flex;

align-items:center;

gap:20px;

padding:22px;

margin-bottom:22px;

border-radius:18px;

background:#fafafa;

transition:.35s;

}

.contact-card:hover{

transform:translateX(8px);

background:white;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.contact-icon{

width:65px;

height:65px;

background:var(--burgundy);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

}

.contact-icon i{

color:white;

font-size:24px;

}

.contact-card h4{

margin-bottom:6px;

}

.contact-card a{

color:var(--gray);

transition:.3s;

word-break:break-word;

}

.contact-card a:hover{

color:var(--burgundy);

}

.resume-download{

margin-top:25px;

display:inline-flex;

align-items:center;

gap:12px;

padding:18px 30px;

border-radius:50px;

background:var(--burgundy);

color:white;

font-weight:600;

transition:.35s;

}

.resume-download:hover{

background:var(--burgundy-dark);

transform:translateY(-4px);

}

.social-grid{

display:grid;

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

gap:20px;

margin:35px 0;

}

.social-card{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

padding:22px;

border-radius:18px;

font-weight:600;

color:white;

transition:.35s;

}

.social-card:hover{

transform:translateY(-6px);

}

.linkedin{

background:#0A66C2;

}

.facebook{

background:#1877F2;

}

.instagram{

background:linear-gradient(45deg,#833AB4,#FD1D1D,#FCAF45);

}

.tiktok{

background:#111111;

}

.contact-cta{

margin-top:35px;

padding:35px;

border-radius:20px;

background:#f9f9f9;

text-align:center;

}

.contact-cta p{

margin:18px 0 30px;

color:var(--gray);

}

/*==================================================
FOOTER
==================================================*/

footer{

background:#111111;

color:white;

padding:80px 8% 30px;

}

.footer-container{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:60px;

}

.footer-brand img{

width:90px;

margin-bottom:20px;

}

.footer-brand h2{

font-family:'Playfair Display',serif;

margin-bottom:15px;

}

.footer-brand p{

color:#cccccc;

line-height:1.8;

}

.footer-links h3,
.footer-contact h3{

margin-bottom:25px;

color:var(--gold);

}

.footer-links{

display:flex;

flex-direction:column;

gap:15px;

}

.footer-links a{

color:#dddddd;

transition:.3s;

}

.footer-links a:hover{

color:var(--gold);

padding-left:8px;

}

.footer-contact{

display:flex;

flex-direction:column;

gap:18px;

}

.footer-contact a{

color:#dddddd;

display:flex;

align-items:center;

gap:10px;

transition:.3s;

}

.footer-contact a:hover{

color:var(--gold);

}

.footer-social{

display:flex;

gap:15px;

margin-top:20px;

}

.footer-social a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#222;

font-size:18px;

transition:.35s;

}

.footer-social a:hover{

background:var(--burgundy);

transform:translateY(-5px);

}

.footer-bottom{

margin-top:60px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.12);

display:flex;

justify-content:space-between;

flex-wrap:wrap;

gap:20px;

color:#bbbbbb;

font-size:15px;

}

/*==================================================
BACK TO TOP
==================================================*/

#backToTop{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--burgundy);

color:white;

font-size:20px;

cursor:pointer;

display:none;

box-shadow:0 15px 35px rgba(0,0,0,.2);

z-index:999;

transition:.35s;

}

#backToTop:hover{

transform:translateY(-6px);

background:var(--gold);

}

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

@media(max-width:1100px){

.hero,
.about-container,
.contact-wrapper{

grid-template-columns:1fr;

}

.hero{

text-align:center;

}

.hero-description{

margin:auto auto 40px;

}

.hero-buttons,
.hero-stats{

justify-content:center;

}

.hero-right{

order:-1;

}

.timeline::before{

left:30px;

}

.timeline-item{

width:100%;

left:0!important;

padding-left:80px;

padding-right:20px;

text-align:left;

}

.timeline-item::before{

left:19px!important;

}

.footer-container{

grid-template-columns:1fr;

}

}

@media(max-width:900px){

.menu-toggle{

display:block;

}

.nav-links{

position:absolute;

top:100%;

left:0;

width:100%;

background:white;

flex-direction:column;

padding:30px;

gap:25px;

max-height:0;

overflow:hidden;

transition:.4s;

border-radius:0 0 20px 20px;

}

.nav-links.active{

max-height:700px;

}

.social-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

section{

padding:90px 6%;

}

.hero h1{

font-size:48px;

}

.hero h2{

font-size:26px;

}

.section-title h2{

font-size:38px;

}

.hero-right img{

width:300px;

}

.about-highlights{

grid-template-columns:1fr;

}

.education-grid{

grid-template-columns:1fr;

}

.skills-grid{

grid-template-columns:1fr;

}

}