/* ================== Base Styles ================== */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
html{scroll-behavior:smooth;}
body{background:#080808;color:#fff;line-height:1.6;}

/* ================== Header ================== */
#header{width:100%;height:100vh;background-image:url(images/01_background.png);background-size:cover;background-position:center;display:flex;justify-content:center;align-items:center;text-align:center;position:relative;}
.container{padding:10px 10%;}
nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative;z-index:10;}
.logo{width:140px;}
nav ul li{display:inline-block;list-style:none;margin:10px 20px;}
nav ul li a{color:#fff;text-decoration:none;font-size:18px;position:relative;}
nav ul li a::after{content:'';width:0;height:3px;background:#ff004f;position:absolute;left:0;bottom:-6px;transition:0.5s;}
nav ul li a:hover::after{width:100%;}
nav .fa-solid{display:none;}

/* ================== Header Text ================== */
.header-text{margin-top:20%;text-align:left; padding:0 20px;}
.header-name{font-size:60px;font-weight:700;line-height:1.2;}
.animated-name{display:inline-block;color:#ff004f;animation:slideIn 1s ease forwards;}
.lastname{display:block;color:#fff;margin-top:0;}
.header-text p{margin-top:20px;color:#ababab;font-size:20px;}
@keyframes slideIn{0%{opacity:0;transform:translateX(-30px);}100%{opacity:1;transform:translateX(0);}}

/* ================== About Section ================== */
#about{padding:80px 0;color:#ababab;}
.row{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:flex-start;}
.about-col-1{flex-basis:35%;margin-bottom:30px;}
.about-col-1 img{width:100%;border-radius:15px;}
.about-col-2{flex-basis:60%;font-size:16px;}
.sub-title{font-size:60px;font-weight:600;color:#fff;margin-bottom:20px;}

/* ================== Tabs ================== */
.tab-titles{display:flex;margin:20px 0 40px;flex-wrap:wrap;}
.tab-links{margin-right:30px;font-size:18px;font-weight:500;cursor:pointer;position:relative;padding-bottom:5px;}
.tab-links::after{content:'';width:0;height:3px;background:#ff004f;position:absolute;left:0;bottom:0;transition:0.5s;}
.tab-links.active-link::after{width:50%;}
.tab-contents ul{padding-left:20px;}
.tab-contents ul li{list-style:none;margin:10px 0;}
.tab-contents ul li span{color:#b54769;font-size:14px;font-weight:600;}
.tab-contents{display:none;}
.tab-contents.active-tab{display:block;}

/* ================== Projects Section ================== */
#projects{padding:50px 0;}
.work-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:40px;margin-top:50px;}
.work{border-radius:10px;position:relative;overflow:hidden;height:350px;}
.work img{width:100%;height:100%;object-fit:contain;border-radius:10px;display:block;transition:transform 0.5s;}
.layer{width:100%;height:0;background:linear-gradient(rgba(0,0,0,0.6),#ff004f);border-radius:10px;position:absolute;left:0;bottom:0;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 20px;text-align:center;font-size:14px;transition:height 0.5s;}
.layer h3{font-weight:500;margin-bottom:20px;}
.layer a{margin-top:20px;color:#ff004f;text-decoration:none;font-size:18px;line-height:60px;background:#fff;width:60px;height:60px;border-radius:50%;text-align:center;}
.work:hover img{transform:scale(1.1);}
.work:hover .layer{height:100%;}

/* ================== Buttons ================== */
.btn, .btn2{display:inline-block;width:fit-content;max-width:250px;text-align:center;padding:14px 50px;margin-top:20px;border-radius:6px;border:1px solid #ff004f;color:#fff;background:transparent;transition:all 0.5s;cursor:pointer;text-decoration:none;}
.btn:hover, .btn2:hover{background:#ff004f;color:#fff;}
form .btn2{width:100%;max-width:250px;color:#fff;background:transparent;border:1px solid #ff004f;}
form .btn2:hover{background:#ff004f;color:#fff;}

/* ================== Contact Section ================== */
.contact-left{flex-basis:35%;margin-bottom:30px;}
.contact-right{flex-basis:60%;}
.contact-left p{margin-top:30px;}
.contact-left p i{color:#ff004f;margin-right:15px;font-size:25px;}
.social-icons{margin-top:30px;}
.social-icons a{text-decoration:none;font-size:30px;margin-right:15px;color:#ababab;display:inline-block;transition:transform 0.5s;}
.social-icons a:hover{color:#ff004f;transform:translateY(-5px);}
.contact-right form{width:100%;display:flex;flex-direction:column;}
form input, form textarea{width:100%;border:0;outline:none;background:#262626;padding:15px;margin:10px 0;color:#fff;font-size:18px;border-radius:6px;}

/* ================== Footer ================== */
.copyright{width:100%;text-align:center;padding:25px 0;background:#262626;font-weight:300;margin-top:20px;}

/* ================== Media Queries ================== */
@media only screen and (max-width:900px){.work-list{gap:25px;}}
@media only screen and (max-width:600px){
   #header{background-image:url(images/Phone_background_01.png);}
   .header-text{margin-top:50%;font-size:16px;}
   .header-text h1{font-size:28px;}
   nav .fa-solid{display:block;font-size:25px;cursor:pointer;}
   nav ul{background:#ff004f;position:fixed;top:0;right:-200px;width:200px;height:100vh;padding-top:50px;z-index:2;transition:right 0.5s;}
   nav ul li{display:block;margin:25px;}
   nav ul .fa-solid{position:absolute;top:25px;left:25px;cursor:pointer;}
   .sub-title{font-size:40px;}
   .about-col-1, .about-col-2{flex-basis:100%;}
   .about-col-1{margin-bottom:30px;}
   .about-col-2{font-size:14px;}
   .tab-links{font-size:16px;margin-right:15px;margin-bottom:10px;}
   .tab-contents{padding-left:0;}
   .contact-left,.contact-right{flex-basis:100%;}
   .btn,.btn2{width:100%;}
   .copyright{font-size:14px;}
}
#msg{color:#61b752;margin-top:10px;display:block;}