/* =========================================================
   KEN Degree College official social media buttons
   Upload this file to: assets/css/social-buttons.css
   ========================================================= */

.topbar-social-buttons{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.topbar-social-buttons a{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#ffffff !important;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  text-decoration:none;
  line-height:1;
}

.topbar-social-buttons a:hover,
.topbar-social-buttons a:focus{
  background:rgba(255,255,255,.25);
  color:#ffffff !important;
}

.social-buttons{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.social-buttons .social-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:42px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  color:#ffffff !important;
  font-weight:800;
  line-height:1;
  text-decoration:none !important;
  box-shadow:none;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.social-buttons .social-btn:hover,
.social-buttons .social-btn:focus{
  transform:translateY(-2px);
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.36);
  box-shadow:0 12px 26px rgba(0,0,0,.18);
  color:#ffffff !important;
}

.social-buttons .social-icon{
  width:25px;
  height:25px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  color:#071b4d;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:1;
}

.social-buttons .social-label{
  font-size:13px;
  white-space:nowrap;
}

.social-buttons .social-facebook .social-icon{color:#1877f2;}
.social-buttons .social-instagram .social-icon{color:#c13584;}
.social-buttons .social-youtube .social-icon{color:#ff0000;}
.social-buttons .social-whatsapp .social-icon{color:#25d366;}

.footer-social-strip{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
}

.footer-social-strip h3{
  color:#ffffff;
  margin:0 0 8px;
}

.login-social-wrap{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(7,27,77,.12);
}

.login-social-wrap p{
  margin:0 0 10px;
  font-weight:800;
  color:#071b4d;
}

.login-social-wrap .social-buttons .social-btn{
  background:#071b4d;
  border-color:#071b4d;
}

.login-social-wrap .social-buttons .social-btn:hover{
  background:#0c2e73;
}

@media(max-width:720px){
  .topbar-social-buttons{
    width:100%;
    justify-content:center;
  }

  .social-buttons{
    gap:8px;
  }

  .social-buttons .social-btn{
    min-height:40px;
    padding:8px 11px;
  }

  .social-buttons .social-label{
    font-size:12px;
  }
}