*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}
body{background-color:#f8f9fa;color:#333;line-height:1.6}

/* Header */
header{background-color:#222;padding:15px 5%;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.logo img{height:40px;width:auto;display:block;margin:0 auto}
nav ul{display:flex;list-style:none}
nav ul li{margin-left:25px}
nav ul li a{color:#fff;text-decoration:none;font-weight:500;transition:color .3s}
nav ul li a:hover{color:#03add8}

/* Hero Section */
.hero{background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),url('images/hexagon.png');background-repeat:repeat;background-position:center;color:white;text-align:center;padding:100px 20px}
.hero-content{max-width:800px;margin:0 auto}
.hero h1{font-size:2.8rem;margin-bottom:20px}
.hero p{font-size:1.2rem;margin-bottom:30px;opacity:.9}
.buttons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.btn{padding:15px 30px;border-radius:50px;font-size:1.1rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:all .3s ease}
.btn-primary{background-color:#03add8;color:white;box-shadow:0 4px 15px rgba(3,173,216,.4)}
.btn-primary:hover{background-color:#029cbf;transform:translateY(-3px);box-shadow:0 6px 20px rgba(3,173,216,.5)}
.btn-secondary{background-color:transparent;color:white;border:2px solid white}
.btn-secondary:hover{background-color:rgba(255,255,255,.1);transform:translateY(-3px)}

/* Sections */
section{padding:80px 5%}
.section-title{text-align:center;margin-bottom:15px;color:#222}
.section-title h2{font-size:2.2rem;margin-bottom:15px;position:relative;display:inline-block}
.section-title h2::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:70px;height:4px;background-color:#03add8;border-radius:2px}

/* Description */
.description{background-color:white}
.description-content{max-width:900px;margin:0 auto;text-align:center;font-size:1.1rem}

/* Features */
.features{background-color:#f8f9fa}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
.feature-card{background:white;border-radius:10px;padding:30px;text-align:center;box-shadow:0 5px 15px rgba(0,0,0,.05);transition:transform .3s ease}
.feature-card:hover{transform:translateY(-5px)}
.feature-icon{font-size:2.5rem;color:#03add8;margin-bottom:20px}
.feature-card h3{margin-bottom:15px;color:#222}

/* About */
.about{background-color:white}
.about-content{display:flex;align-items:center;flex-wrap:wrap;gap:40px}
.about-text{flex:1;min-width:300px}
.about-text p{margin-bottom:20px;font-size:1.1rem}
.about-image{flex:1;min-width:300px;display:flex;justify-content:center}
.developer-img{width:250px;height:250px;border-radius:50%;object-fit:cover;border:5px solid #03add8;box-shadow:0 10px 30px rgba(0,0,0,.15)}

/* Contact */
.contact{background:linear-gradient(to right,#03add8,#028fb5);color:white;text-align:center}
.contact h2{color:white}
.contact h2::after{background-color:white}
.contact-content{max-width:max-content;margin:0 auto;font-size: 16px;}
.contact-info{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin-top:20px}
.contact-item{display:flex;align-items:center;gap:15px}
.contact-icon{font-size:1.5rem}

/* Footer */
footer{background-color:#222;color:white;text-align:center;padding:30px 5%}
.social-links{margin:20px 0}
.social-links a{color:white;font-size:1.5rem;margin:0 15px;transition:color .3s}
.social-links a:hover{color:#03add8}

/* Back to Top Button */
.back-to-top{position:fixed;bottom:30px;right:30px;width:50px;height:50px;background-color:#03add8;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all .3s ease;opacity:0;visibility:hidden;z-index:99;box-shadow:0 4px 10px rgba(3,173,216,.3)}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{background-color:#028fb5;transform:translateY(-3px);box-shadow:0 6px 15px rgba(3,173,216,.4)}

/* Responsive */
@media (max-width: 768px) {
    .hero h1{font-size:2.2rem}
    nav ul{display:none}
    .buttons{flex-direction:column;align-items:center}
    .btn{width:100%;justify-content:center}
    .about-content{flex-direction:column-reverse}
    .developer-img{width:200px;height:200px}
    .back-to-top{bottom:20px;right:20px;width:45px;height:45px}
}