/* ==========================================================
   FOOTER PREMIUM
   Website Resmi SD Negeri 2 Salut
   Developer : Cahyadi, S.Pd., S.Kom
========================================================== */

.footer-premium{
    background:linear-gradient(135deg,#0b2e59,#003b73,#004d99);
    color:#ffffff;
    position:relative;
    overflow:hidden;
    margin-top:80px;
}

.footer-premium::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,
        rgba(255,193,7,.10),
        transparent 35%);
    pointer-events:none;
}

.footer-premium .container{
    position:relative;
    z-index:2;
}

/* ==========================================================
   JUDUL
========================================================== */

.footer-title{
    font-size:24px;
    font-weight:700;
    color:#ffc107;
    margin-bottom:25px;
    display:flex;
    align-items:center;
}

.footer-title i{
    margin-right:10px;
}

/* ==========================================================
   LOGO SEKOLAH
========================================================== */

.footer-logo-wrapper{

    width:120px;

    height:120px;

    margin:auto;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 15px 40px rgba(0,0,0,.30);

    transition:.4s;

}

.footer-logo-wrapper:hover{

    transform:translateY(-6px);

}

.footer-logo{

    width:82px;

    height:82px;

    object-fit:contain;

}

/* ==========================================================
   NAMA SEKOLAH
========================================================== */

.footer-school-name{

    font-size:30px;

    font-weight:700;

    color:#ffc107;

    margin-top:20px;

    margin-bottom:10px;

}

.footer-tagline{

    color:#ffffff;

    font-size:15px;

    opacity:.95;

    margin-bottom:20px;

}

/* ==========================================================
   DESKRIPSI
========================================================== */

.footer-description{

    color:#d8d8d8;

    text-align:justify;

    line-height:1.9;

    font-size:15px;

}

/* ==========================================================
   GARIS PEMBATAS
========================================================== */

.footer-divider{

    border:0;

    height:1px;

    background:rgba(255,255,255,.15);

    margin:30px 0;

}

/* ==========================================================
   INFO SEKOLAH
========================================================== */

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-info{

    display:flex;

    align-items:flex-start;

    gap:15px;

}

.footer-icon-box{

    width:46px;

    height:46px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    flex-shrink:0;

    font-size:18px;

}

.footer-info strong{

    color:#ffffff;

}

.footer-info a{

    color:#ffc107;

    text-decoration:none;

}

.footer-info a:hover{

    color:#ffffff;

}

/* ==========================================================
   MOTTO SEKOLAH
========================================================== */

.footer-motto{

    margin-top:30px;

    padding:18px;

    border-radius:15px;

    background:rgba(255,255,255,.06);

    border-left:4px solid #ffc107;

    line-height:1.8;

    color:#ffffff;

    font-weight:500;

    transition:.3s;

}

.footer-motto:hover{

    background:rgba(255,255,255,.10);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:991px){

.footer-school-name{

    text-align:center;

    font-size:28px;

}

.footer-description{

    text-align:left;

}

.footer-contact{

    margin-top:25px;

}

}

@media(max-width:768px){

.footer-logo-wrapper{

    width:100px;

    height:100px;

}

.footer-logo{

    width:70px;

    height:70px;

}

.footer-school-name{

    font-size:24px;

}

.footer-description{

    font-size:14px;

}

.footer-title{

    justify-content:center;

    font-size:22px;

}

.footer-info{

    gap:12px;

}

.footer-icon-box{

    width:42px;

    height:42px;

}

.footer-motto{

    font-size:14px;

}

}

/* ==========================================================
   MENU WEBSITE PREMIUM
========================================================== */

.footer-menu{
    list-style:none;
    margin:0;
    padding:0;
}

.footer-menu li{
    margin-bottom:12px;
}

.footer-menu a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 18px;

    border-radius:12px;

    color:#ffffff;

    text-decoration:none;

    background:rgba(255,255,255,.05);

    transition:all .35s ease;

    font-weight:500;

}

.footer-menu a i{

    width:36px;

    height:36px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#0d6efd;

    color:#ffffff;

    transition:.35s;

    flex-shrink:0;

}

.footer-menu a:hover{

    background:#ffc107;

    color:#000;

    transform:translateX(8px);

    box-shadow:0 10px 25px rgba(255,193,7,.30);

}

.footer-menu a:hover i{

    background:#000;

    color:#ffc107;

    transform:rotate(10deg);

}

/* ==========================================================
   DEVELOPER CARD
========================================================== */

.developer-box{

    margin-top:25px;

    background:rgba(255,255,255,.05);

    border-radius:18px;

    padding:25px;

    transition:.35s;

    border:1px solid rgba(255,255,255,.08);

}

.developer-box:hover{

    transform:translateY(-5px);

    background:rgba(255,255,255,.08);

}

.developer-box h6{

    color:#ffc107;

    font-size:20px;

    font-weight:700;

    margin-bottom:15px;

}

.developer-box p{

    margin-bottom:12px;

    color:#dddddd;

    line-height:1.8;

}

.developer-box a{

    color:#ffffff;

    text-decoration:none;

    transition:.3s;

}

.developer-box a:hover{

    color:#ffc107;

}

.developer-box i{

    width:25px;

    color:#ffc107;

}

.developer-box strong{

    color:#ffffff;

}

/* ==========================================================
   EFEK GARIS
========================================================== */

.developer-box::before{

    content:"";

    display:block;

    width:60px;

    height:4px;

    background:#ffc107;

    border-radius:20px;

    margin-bottom:18px;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:991px){

.footer-menu{

margin-bottom:30px;

}

.developer-box{

text-align:center;

}

}

@media(max-width:768px){

.footer-menu a{

padding:10px 15px;

font-size:15px;

}

.footer-menu a i{

width:32px;

height:32px;

font-size:14px;

}

.developer-box{

padding:20px;

}

.developer-box h6{

font-size:18px;

}

}

/* ==========================================================
   LOKASI SEKOLAH PREMIUM
========================================================== */

.footer-map{

    overflow:hidden;

    border-radius:18px;

    border:3px solid rgba(255,255,255,.08);

    box-shadow:0 15px 35px rgba(0,0,0,.25);

    transition:.35s;

    background:#fff;

}

.footer-map:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(0,0,0,.35);

}

.footer-map iframe{

    display:block;

    width:100%;

    height:260px;

    border:0;

}

/* ==========================================================
   INFO LOKASI
========================================================== */

.footer-location{

    margin-top:25px;

}

.footer-location p{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:#e8e8e8;

    line-height:1.8;

    margin-bottom:18px;

}

.footer-location p i{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

    background:rgba(255,255,255,.08);

    color:#ffc107;

    flex-shrink:0;

    font-size:17px;

}

.footer-location strong{

    color:#ffffff;

}

/* ==========================================================
   TOMBOL GOOGLE MAPS
========================================================== */

.footer-location .btn{

    margin-top:20px;

    border-radius:50px;

    font-weight:700;

    font-size:15px;

    padding:13px 22px;

    transition:.35s;

    box-shadow:0 10px 25px rgba(255,193,7,.25);

}

.footer-location .btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(255,193,7,.40);

}

/* ==========================================================
   BADGE SEKOLAH
========================================================== */

.footer-school-badge{

    margin-top:25px;

    padding:18px;

    border-radius:15px;

    background:rgba(255,255,255,.06);

    border-left:4px solid #ffc107;

    color:#ffffff;

    line-height:1.8;

}

.footer-school-badge strong{

    color:#ffc107;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:991px){

.footer-map{

margin-top:10px;

}

.footer-location{

text-align:left;

}

}

@media(max-width:768px){

.footer-map iframe{

height:220px;

}

.footer-location p{

font-size:14px;

}

.footer-location p i{

width:36px;

height:36px;

font-size:15px;

}

.footer-location .btn{

font-size:14px;

padding:12px 18px;

}

.footer-school-badge{

font-size:14px;

}

}

/* ==========================================================
   LAYANAN PENDIDIKAN PREMIUM
========================================================== */

.footer-services{

    margin-top:50px;

}

.footer-services-title{

    text-align:center;

    color:#ffc107;

    font-size:30px;

    font-weight:700;

    margin-bottom:10px;

}

.footer-services-subtitle{

    text-align:center;

    color:#d8d8d8;

    max-width:700px;

    margin:0 auto 45px;

    line-height:1.8;

}

/* ==========================================================
   CARD LAYANAN
========================================================== */

.footer-service{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    text-decoration:none;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:22px 12px;

    height:100%;

    transition:all .35s ease;

    position:relative;

    overflow:hidden;

}

.footer-service::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,193,7,.08),
        transparent 70%
    );

    opacity:0;

    transition:.35s;

}

.footer-service:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.10);

    border-color:#ffc107;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

}

.footer-service:hover::before{

    opacity:1;

}

/* ==========================================================
   ICON
========================================================== */

.footer-icon{

    width:58px;

    height:58px;

    object-fit:contain;

    margin-bottom:14px;

    transition:.35s;

}

.footer-service:hover .footer-icon{

    transform:scale(1.10);

}

/* ==========================================================
   NAMA LAYANAN
========================================================== */

.footer-service div{

    color:#ffffff;

    font-size:14px;

    font-weight:600;

    line-height:1.5;

}

.footer-service:hover div{

    color:#ffc107;

}

/* ==========================================================
   GRID RESPONSIVE
========================================================== */

.footer-services .col-lg-2{

    margin-bottom:22px;

}

/* ==========================================================
   RESPONSIVE TABLET
========================================================== */

@media(max-width:991px){

.footer-icon{

width:52px;

height:52px;

}

.footer-service{

padding:18px 10px;

}

}

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

@media(max-width:768px){

.footer-services-title{

font-size:24px;

}

.footer-services-subtitle{

font-size:14px;

margin-bottom:30px;

}

.footer-service{

padding:16px 8px;

border-radius:15px;

}

.footer-icon{

width:46px;

height:46px;

margin-bottom:10px;

}

.footer-service div{

font-size:13px;

}

}

/* ==========================================================
   ANIMASI MUNCUL
========================================================== */

.footer-service{

animation:footerFade .7s ease both;

}

@keyframes footerFade{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ==========================================================
   COPYRIGHT PREMIUM
========================================================== */

.footer-copyright{

    margin-top:70px;

    padding-top:35px;

    border-top:1px solid rgba(255,255,255,.15);

}

.footer-copy-title{

    color:#ffc107;

    font-size:24px;

    font-weight:700;

    margin-bottom:18px;

}

.footer-copy-text{

    color:#d8d8d8;

    line-height:1.9;

    text-align:justify;

    margin-bottom:20px;

}

.footer-copy-info{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    align-items:center;

    color:#ffffff;

    margin-top:20px;

}

.footer-copy-info span{

    display:flex;

    align-items:center;

    gap:8px;

}

.footer-copy-info i{

    color:#ffc107;

    font-size:17px;

}

/* ==========================================================
   SOCIAL MEDIA
========================================================== */

.footer-social-title{

    color:#ffc107;

    font-size:22px;

    font-weight:700;

    margin-bottom:20px;

}

.footer-social-group{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}

.footer-social{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.08);

    color:#ffffff;

    text-decoration:none;

    font-size:20px;

    transition:all .35s ease;

    box-shadow:0 8px 20px rgba(0,0,0,.20);

}

.footer-social:hover{

    background:#ffc107;

    color:#000;

    transform:translateY(-6px) rotate(8deg);

    box-shadow:0 15px 30px rgba(255,193,7,.35);

}

.footer-manage{

    margin-top:22px;

    color:#d8d8d8;

    font-size:14px;

}

/* ==========================================================
   COPYRIGHT BAR
========================================================== */

.footer-bottom{

    margin-top:40px;

    padding-top:22px;

    border-top:1px solid rgba(255,255,255,.10);

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}

.footer-bottom-left{

    color:#ffffff;

    font-size:15px;

}

.footer-bottom-left strong{

    color:#ffc107;

}

.footer-bottom-right{

    color:#d8d8d8;

    font-size:14px;

}

.footer-bottom-right a{

    color:#ffc107;

    text-decoration:none;

}

.footer-bottom-right a:hover{

    color:#ffffff;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:991px){

.footer-social-group{

justify-content:center;

margin-top:25px;

}

.footer-copy-title{

text-align:center;

}

.footer-copy-text{

text-align:left;

}

.footer-copy-info{

justify-content:center;

}

.footer-manage{

text-align:center;

}

}

@media(max-width:768px){

.footer-bottom{

flex-direction:column;

text-align:center;

}

.footer-copy-title{

font-size:22px;

}

.footer-social{

width:46px;

height:46px;

font-size:18px;

}

.footer-copy-info{

flex-direction:column;

align-items:flex-start;

gap:10px;

}

.footer-copy-text{

font-size:14px;

}

.footer-bottom-left,

.footer-bottom-right{

width:100%;

text-align:center;

}

}

/* ==========================================================
   BACK TO TOP PREMIUM
   Website SD Negeri 2 Salut
========================================================== */

.back-to-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#0d6efd,#0066ff);

    color:#fff;

    font-size:22px;

    text-decoration:none;

    box-shadow:0 12px 30px rgba(13,110,253,.35);

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:all .35s ease;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    background:linear-gradient(135deg,#ffc107,#ff9800);

    color:#000;

    transform:translateY(-6px) scale(1.08);

    box-shadow:0 18px 40px rgba(255,193,7,.45);

}

.back-to-top i{

    animation:footerArrow 1.8s infinite;

}

/* ==========================================================
   ANIMASI PANAH
========================================================== */

@keyframes footerArrow{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

}

/* ==========================================================
   SCROLLBAR (CHROME)
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#062b55;

}

::-webkit-scrollbar-thumb{

    background:#ffc107;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#ffda44;

}

/* ==========================================================
   SELEKSI TEKS
========================================================== */

::selection{

    background:#ffc107;

    color:#000;

}

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

.footer-premium a{

    transition:.3s;

}

.footer-premium a:hover{

    text-decoration:none;

}

/* ==========================================================
   HOVER CARD
========================================================== */

.footer-map,
.developer-box,
.footer-service,
.footer-motto{

    transition:all .35s ease;

}

.footer-map:hover,
.developer-box:hover,
.footer-service:hover,
.footer-motto:hover{

    box-shadow:0 20px 40px rgba(0,0,0,.25);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:991px){

.back-to-top{

right:20px;

bottom:20px;

}

}

@media(max-width:768px){

.back-to-top{

width:50px;

height:50px;

font-size:18px;

right:15px;

bottom:15px;

}

.footer-premium{

text-align:left;

}

.footer-premium .container{

padding-top:60px;

padding-bottom:35px;

}

.footer-logo-wrapper{

margin:auto;

}

.footer-school-name,

.footer-tagline,

.footer-title{

text-align:center;

justify-content:center;

}

.footer-social-group{

justify-content:center;

}

.footer-bottom{

text-align:center;

}

}

/* ==========================================================
   AKHIR FOOTER PREMIUM
========================================================== */