/* =================================================
COLOR PALETTE
================================================= 

Loblolly      #c7cdd0
Shark         #1c2426
Fuscous Gray  #525150
Go Ben        #767e4d
Off White     #f6f6f6

================================================= */


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

html{
box-sizing:border-box;
font-size:62.5%;
scroll-behavior:smooth;
}

*,*:before,*:after{
box-sizing:inherit;
}

body{
margin:0;
background:hsl(0,20%,99%);
font-family:"Open Sans",sans-serif;
font-size:1.6rem;
line-height:1.4;

display:flex;
flex-direction:column;
min-height:100vh;
}

/* Headings */

h1,h2,h3{
font-family:"Caveat",cursive;
font-weight:400;
margin:0;
line-height:1.1;
}

h1{font-size:4rem;}
h2{font-size:2.3rem;}
h3{font-size:1.5rem;}


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

a{
color:#2f4399;
}

a:hover{
color:#ffffff;
text-decoration:none;
}


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

.content-wrapper{
flex:1 0 auto;
max-width:1100px;
width:90%;
margin:0 auto;
padding:30px;
}

.content-bg{
background:rgba(255,255,255,.85);
padding:30px;
border-radius:8px;
}


/* =================================================
NAVBAR
================================================= */

.navbar{
display:flex;
justify-content:center;
gap:30px;
margin-bottom:40px;
flex-wrap:wrap;
}

.nav-link{
font-family:"Open Sans",sans-serif;
font-weight:600;
color:#1c2426;
text-decoration:none;
transition:color .2s ease;
}

.nav-link:hover{
color:#525150;
}


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

.btn{
background:#2f4399;
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font-size:1rem;
display:inline-block;
padding:10px 18px;
letter-spacing:.02em;
border-radius:6px;

transition:all .25s ease;
}

.btn:hover{
background:#1e2f75;
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,.2);
}


/* Resume Download Button */

.download-link{
position:fixed;
top:5px;
left:5px;
font-size:1rem;
}


/* Back to Top Button */

.back-to-top{
position:fixed;
bottom:130px;
right:20px;
z-index:9999;
}

/* Project Page Button */
.project-buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
margin-top:15px;
}

.project-buttons .btn{
flex:1;
text-align:center;
}

/* Mobile layout */

@media (max-width:600px){

.project-buttons{
flex-direction:column;
gap:15px;   /* space between stacked buttons */
}

.project-buttons .btn{
width:100%;
}

}


/* =================================================
HOME PAGE
================================================= */

.home{
background:url("../image/bg-home-office-city.jpg") no-repeat center;
background-size:cover;
display:flex;
flex-direction:column;
}

/* Contact Page Background */

.contact{
background:url("../image/bg-home-office-city.jpg") no-repeat center center;
background-size:cover;
}


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

.project-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin:30px 0;
}

.project-item{
padding:25px;
background:#ffffff;
border-radius:10px;

box-shadow:0 6px 16px rgba(0,0,0,.08);
transition:all .25s ease;
}

.project-item:hover{
transform:translateY(-5px);
box-shadow:0 10px 28px rgba(0,0,0,.15);
}

@media (max-width:768px){

.project-wrapper{
grid-template-columns:1fr;
}

}


/* =================================================
WORK EXPERIENCE
================================================= */

.work-item{
margin:30px 0;
}

.work-details p{
margin:0;
}

.work-summary p:first-child{
margin-top:0;
}

@media (min-width:860px){

.work-item{
display:grid;
grid-template-columns:200px 1fr;
column-gap:20px;
}

}


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

.education-item{
margin:40px 0;
}

.education-item h3{
margin-bottom:0;
}

.education-item p{
margin-top:5px;
}

@media (min-width:860px){

.education-item{
display:grid;
grid-template-columns:200px 1fr;
column-gap:30px;
}

}


/* =================================================
CERTIFICATIONS
================================================= */

.cert-row{
display:grid;
grid-template-columns:2fr 2fr 100px;
align-items:center;
padding:10px;
background:#ffffff;
margin-bottom:10px;
}

.cert-row.header{
font-weight:bold;
border-bottom:1px solid #ddd;
}

.col-title{
color:#333;
}

.col-info{
font-size:.9em;
color:#555;
}

.col-date{
text-align:right;
}

@media(max-width:768px){

.cert-row{
grid-template-columns:1fr;
gap:5px;
}

.col-date{
text-align:left;
}

.cert-row.header{
display:none;
}

}


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

.contact-form{
max-width:500px;
margin:80px auto;
}

.contact-form input,
.contact-form textarea{
width:100%;
padding:10px;
margin-bottom:20px;
border:1px solid #ccc;
border-radius:4px;
font-family:inherit;
font-size:1.4rem;
}

.contact-form button{
display:block;
margin:20px auto;
width:100%;
max-width:300px;

background:#2f4399;
color:white;

border:none;
padding:12px 24px;
font-size:1.6rem;
font-weight:600;
border-radius:6px;
cursor:pointer;
}

.contact-form button:hover{
background:#0d2799;
}


/* LinkedIn Link */

.linkedin-link{
font-weight:bold;
text-decoration:none;
color:#182c86;
}

.linkedin-link:hover{
color:#464850;
}


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

footer{
background:#1c2426;
color:#c7cdd0;
padding:20px;
text-align:center;
flex-shrink:0;
}

footer a{
color:#c7cdd0;
text-decoration:none;
}

footer a:hover{
color:#ffffff;
}

.socials{
list-style:none;
padding:0;
margin-top:10px;
display:flex;
justify-content:center;
gap:15px;
}

.socials img{
width:24px;
}

.socials img:hover{
opacity:.7;
}

@media(min-width:860px){

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

}


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

img{
max-width:100%;
height:auto;
display:block;
}

.responsive-img{
border-radius:10px;
}

/* Project Page Images */
.responsive-img{
width:100%;
max-width:500px;
height:auto;
display:block;
margin-bottom:15px;
}


/* =================================================
RESUME HEADER IMAGE
================================================= */

.resume header::before{
background:url("../image/bg-home-office-city.jpg") right;
background-size:cover;
content:"";
display:block;
height:550px;
}


/* =================================================
COMING SOON PAGE
================================================= */

.coming-soon-page{
position:relative;
width:100%;
height:100vh;

background-image:url("../image/coming_soon.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;

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

animation:fadeInPage 2s ease;
}

.coming-soon-page .overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.35);
}

.coming-soon-page .content{
position:relative;
text-align:center;
color:white;
padding:20px;
max-width:900px;
}

.coming-soon-page h1{
font-size:4rem;
letter-spacing:3px;
font-weight:700;

text-shadow:
0 0 10px rgba(0,200,255,.8),
0 0 20px rgba(0,200,255,.6),
0 0 40px rgba(0,200,255,.4);

animation:techGlow 4s infinite alternate;
}

.coming-soon-page h2{
font-size:2rem;
margin-bottom:10px;
letter-spacing:2px;
}

.coming-soon-page p{
font-size:1.5rem;
margin-top:20px;
letter-spacing:2px;
}


/* Animations */

@keyframes fadeInPage{
from{opacity:0}
to{opacity:1}
}

@keyframes fadeDown{
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes fadeInText{
to{opacity:1}
}

@keyframes techGlow{

0%{
text-shadow:
0 0 10px rgba(0,200,255,.8),
0 0 20px rgba(0,200,255,.6),
0 0 40px rgba(0,200,255,.4);
}

100%{
text-shadow:
0 0 20px rgba(0,200,255,1),
0 0 40px rgba(0,200,255,.9),
0 0 80px rgba(0,200,255,.7);
}

}


/* Mobile */

@media (max-width:900px){

.coming-soon-page h1{font-size:3rem;}
.coming-soon-page h2{font-size:1.6rem;}
.coming-soon-page p{font-size:1.2rem;}

}

@media (max-width:600px){

.coming-soon-page h1{font-size:2.3rem;}
.coming-soon-page h2{font-size:1.3rem;}
.coming-soon-page p{font-size:1rem;}

.coming-soon-page .content{
padding:30px;
}

}