/* ================= FOOTERS ================= */
/* Footer modern big-logo */
.footer {
  background:#353535;
  color:#ffffff;
  padding:50px 20px 20px;
  width:100%;
}

.footer-container{
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
}

.footer-brand{
  max-width:460px;
}

.footer-logo{
  height:350px;
  width:auto;
  max-width:350px;
  display:block;
  margin-bottom:16px;
}

.footer-brand p{
  font-size:15px;
  color:#e5e7eb;
  line-height:1.6;
}

/* Social icons round */
.footer-social{
  display:flex;
  gap:16px;
  margin-top:20px;
}

.social-icon{
  width:46px;
  height:46px;
  background:rgba(66,113,204,0.35);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:all 0.3s ease;
}

.social-icon img{
  width:22px;
  height:22px;
  object-fit:contain;
  display:block;
}

.social-icon:hover{
  transform:translateY(-4px);
}

/* Brand hover colors */
.whatsapp:hover { background:var(--whatsapp); }
.instagram:hover { background:#E1306C; }
.linkedin:hover { background:#0A66C2; }
.call:hover { background:var(--primary); }
.youtube:hover { background:#FF0000; }

.footer-bottom{
  margin-top:40px;
  padding-top:15px;
  text-align:center;
  font-size:14px;
  color:#cbd5e1;
  border-top:1px solid rgba(255,255,255,0.12);
}

/* Footer v2 with columns */
.footer-alt {
  background-color:#353535;
  color:#fff;
  padding:40px 20px 20px 20px;
  font-family:Arial, sans-serif;
}

.footer-alt .footer-container{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}

.footer-column{
  flex:1 1 250px;
}

.footer-column h3{
  color:var(--accent);
  margin-bottom:10px;
}

.footer-column h4{
  color:#fff;
  margin-bottom:10px;
}

.footer-column p,
.footer-column ul{
  margin-bottom:10px;
  line-height:1.5;
}

.footer-column ul{
  list-style:none;
  padding:0;
}

.footer-column ul li{
  margin-bottom:8px;
}

.footer-column ul li a{
  color:#fff;
  text-decoration:none;
  transition:color 0.3s;
}

.footer-column ul li a:hover{
  color:var(--accent);
}

/* Social icons (image) */
.footer-alt .footer-social{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.footer-alt .footer-social a img{
  width:35px;
  height:35px;
  transition:transform 0.3s;
}

.footer-alt .footer-social a img:hover{
  transform:scale(1.1);
}

.footer-alt .footer-bottom{
  text-align:center;
  margin-top:30px;
  border-top:1px solid rgba(255,255,255,0.12);
  padding-top:15px;
  font-size:14px;
  color:#ddd;
}

.footer-column:first-child{
  flex:2;
}

/* ============= MOBILE FOOTER OPTIMIZATION ============= */
@media (max-width: 768px) {

  /* Main footer (big logo) */
  .footer {
    padding: 30px 16px 16px;
    text-align: center;
  }

  .footer-container {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .footer-brand {
    max-width: 100%;
  }

  .footer-logo {
    height: 160px;
    max-width: 160px;
    margin: 0 auto 10px;
  }

  .footer-brand p {
    font-size: 14px;
  }

  .footer-social {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .social-icon {
    width: 40px;
    height: 40px;
  }

  .social-icon img {
    width: 20px;
    height: 20px;
  }

  .footer-bottom {
    margin-top: 24px;
    font-size: 13px;
    padding-top: 12px;
  }

  /* Column layout footer (footer-alt) */
  .footer-alt {
    padding: 28px 16px 16px;
    text-align: center;
  }

  .footer-alt .footer-container {
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }

  .footer-column {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .footer-column:first-child {
    flex: 1 1 100%;
  }

  .footer-column h3,
  .footer-column h4 {
    margin-bottom: 6px;
  }

  .footer-column p,
  .footer-column ul {
    font-size: 14px;
  }

  .footer-column ul li {
    margin-bottom: 6px;
  }

  .footer-alt .footer-social {
    justify-content: center;
  }

  .footer-alt .footer-social a img {
    width: 30px;
    height: 30px;
  }

  .footer-alt .footer-bottom {
    margin-top: 20px;
    font-size: 13px;
    padding-top: 10px;
  }
}

/* Extra small phones */
@media (max-width: 480px) {
  .footer-logo {
    height: 140px;
    max-width: 140px;
  }

  .footer-brand p {
    font-size: 13px;
  }

  .footer-bottom,
  .footer-alt .footer-bottom {
    font-size: 12px;
  }
}

/* Brand */
.navskill-brand {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;

  margin-left: 20px; /* control movement here */
}

.navskill-brand i {
  font-size: 28px;
  color: var(--primary);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: "Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}

.main-header{
  background: linear-gradient(135deg,#ff7a00,#e66b00);
  padding:60px 20px;
  text-align:center;
  color:white;
  box-shadow:0 6px 20px rgba(0,0,0,0.15);
}

.result{
margin-top:25px;
display:none;
}

.status{
background:#e6f7ed;
color:#1e8e3e;
padding:8px 12px;
border-radius:6px;
font-size:14px;
margin-bottom:18px;
font-weight:600;
}

.info{
margin-bottom:14px;
display:flex;
flex-direction:column;
}

.info label{
font-size:13px;
color:var(--gray);
margin-bottom:3px;
}

.info span{
font-size:16px;
font-weight:600;
color:var(--text);
}

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{
--primary:#4271cc;
--primary-dark:#355bb5;
--secondary:#dd9790;
--secondary-soft:rgba(221,151,144,0.18);
--text:#353535;
--accent:#ee855d;
--accent-dark:#d76e48;

--whatsapp:#25D366;
--black:#111;
--light:#f6f6f6;
--gray:#666;
}

body{
font-family:Arial, sans-serif;
background:var(--light);
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
color:var(--text);
}

.container{
background:#fff;
padding:30px;
width:100%;
max-width:400px;
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.1);
text-align:center;
border-top:5px solid var(--primary);
}

h2{
color:var(--primary);
margin-bottom:20px;
}

input{
width:100%;
padding:12px;
border:1px solid var(--secondary);
border-radius:6px;
margin-bottom:15px;
font-size:15px;
}

input:focus{
outline:none;
border-color:var(--primary);
}

button{
background:var(--accent);
color:#fff;
border:none;
padding:12px 20px;
font-size:15px;
cursor:pointer;
border-radius:6px;
transition:0.3s;
}

button:hover{
background:var(--accent-dark);
}

.result{
margin-top:20px;
text-align:left;
display:none;
background:var(--secondary-soft);
padding:15px;
border-radius:6px;
border-left:4px solid var(--secondary);
}

.invalid{
color:red;
margin-top:15px;
}