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


*{
box-sizing:border-box;
}


body{

margin:0;

font-family:
Arial,
Helvetica,
sans-serif;

background:#f8fafc;

color:#334155;

line-height:1.7;

}

html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;
}

a{

text-decoration:none;

color:inherit;

}



.container{

max-width:1200px;

margin:auto;

padding:20px;

}



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


header{

background:#ffffff;

border-bottom:1px solid #e5e7eb;

position:sticky;

top:0;

z-index:1000;

}



.header-inner{

max-width:1200px;

margin:auto;

padding:16px 20px;

display:flex;

justify-content:space-between;

align-items:center;

}



.logo{

font-size:26px;

font-weight:800;

color:#111827;

}



nav{

display:flex;

gap:25px;

}



nav a{

color:#475569;

font-weight:500;

}



nav a:hover{

color:#ff6b6b;

}



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


footer{

background:#111827;

color:white;

margin-top:60px;

padding:45px 20px;

}



.footer-grid{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

gap:35px;

}



footer h3{

color:white;

}



footer a{

display:block;

color:#cbd5e1;

margin:8px 0;

}



footer a:hover{

color:white;

}



.copyright{

text-align:center;

border-top:1px solid #334155;

margin-top:35px;

padding-top:20px;

color:#94a3b8;

}



/* =========================
   BASIC TYPOGRAPHY
========================= */


h1,
h2,
h3{

color:#111827;

}



h1{

font-size:42px;

line-height:1.3;

}



h2{

font-size:30px;

}



p{

font-size:17px;

}



/* =========================
   MOBILE
========================= */


@media(max-width:700px){


.header-inner{

flex-direction:column;

gap:15px;

}



nav{

gap:15px;

}



h1{

font-size:30px;

}

}

#goTopBtn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 999;
}

#goTopBtn:hover {
    transform: translateY(-5px);
    background: linear-gradient(135deg, #764ba2, #667eea);
}

#goTopBtn:active {
    transform: scale(0.95);
}

/* Mobile */
@media (max-width: 768px) {
    #goTopBtn {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
        font-size: 22px;
    }
}


/* Contact Card */

.contact-box {
    background: linear-gradient(135deg, #f5f7ff, #ffffff);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid #e5e8ff;
    margin-top: 20px;
}

.email-box {
    display: inline-block;
    padding: 12px 20px;
    background: #5b4bdb;
    color: white;
    border-radius: 30px;
    margin-top: 10px;
}

.email-box:hover {
    background: #4637c5;
    text-decoration: none;
}