/* ==========================================================
   FOOTER V9
   YAYASAN HUJJATUL ISLAM
========================================================== */

/* ==========================================================
   COLOR VARIABLE
========================================================== */

:root{

    --footer-bg:#083C39;
    --footer-bg2:#0B4A46;

    --footer-gold:#D4AF37;
    --footer-gold-light:#F7D774;

    --footer-white:#FFFFFF;

    --footer-text:rgba(255,255,255,.82);
    --footer-text-light:rgba(255,255,255,.62);

    --footer-border:rgba(255,255,255,.08);

}

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

.footer{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            var(--footer-bg2) 0%,
            var(--footer-bg) 100%
        );

    padding:120px 0 40px;

    color:#fff;

}

/* ==========================================================
   ISLAMIC PATTERN
========================================================== */

.footer::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(
            rgba(255,255,255,.03) 1px,
            transparent 1px
        );

    background-size:28px 28px;

    opacity:.50;

    pointer-events:none;

}

/* Ornament kanan */

.footer::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(212,175,55,.12),

            transparent 70%

        );

    pointer-events:none;

}

/* ==========================================================
   CONTAINER
========================================================== */

.footer .container{

    position:relative;

    z-index:2;

}

/* ==========================================================
   WAVE DIVIDER
========================================================== */

.footer-wave{

    position:relative;

    width:100%;

    line-height:0;

    overflow:hidden;

    margin-bottom:-1px;

}

.footer-wave svg{

    display:block;

    width:100%;

    height:90px;

}

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

.footer-brand{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

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

.footer-brand img{

    width:100px;

    height:auto;

    margin-bottom:25px;

    transition:.35s;

}

.footer-brand:hover img{

    transform:scale(1.05);

}

/* ==========================================================
   TITLE
========================================================== */

.footer-brand h2{

    font-size:44px;

    font-weight:800;

    color:#fff;

    margin-bottom:12px;

    letter-spacing:.5px;

}

/* ==========================================================
   TAGLINE
========================================================== */

.footer-tagline{

    color:var(--footer-gold-light);

    font-size:18px;

    line-height:1.9;

    letter-spacing:.4px;

    margin-bottom:28px;

}

/* ==========================================================
   GOLD DIVIDER
========================================================== */

.footer-divider{

    width:140px;

    height:4px;

    margin:auto;

    border-radius:50px;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--footer-gold),

            transparent

        );

}

/* ==========================================================
   WATERMARK
========================================================== */

.footer-brand{

    position:relative;

}

.footer-brand::before{

    content:"✦";

    position:absolute;

    top:-10px;

    left:50%;

    transform:translateX(-50%);

    font-size:220px;

    color:rgba(255,255,255,.025);

    line-height:1;

    pointer-events:none;

}

/* ==========================================================
   END V9.01
========================================================== */

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

.footer-grid{

    display:grid;

    grid-template-columns:1.3fr .9fr .9fr;

    gap:70px;

    align-items:start;

}

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

.footer-column{

    position:relative;

}

.footer-column h3{

    font-size:24px;

    font-weight:700;

    color:#ffffff;

    margin-bottom:28px;

    position:relative;

    display:inline-block;

}

.footer-column h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:55px;

    height:3px;

    border-radius:20px;

    background:var(--footer-gold);

}

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

.footer-icon{

    width:64px;

    height:64px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:22px;

    transition:.35s;

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

}

.footer-icon i{

    color:var(--footer-gold);

    font-size:28px;

}

.footer-column:hover .footer-icon{

    transform:translateY(-6px);

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

}

/* ==========================================================
   ABOUT
========================================================== */

.footer-about p{

    color:var(--footer-text);

    line-height:2;

    text-align:justify;

    font-size:16px;

}

/* ==========================================================
   MENU
========================================================== */

.footer-menu{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-menu li{

    margin-bottom:16px;

}

.footer-menu li:last-child{

    margin-bottom:0;

}

.footer-menu a{

    color:var(--footer-text);

    text-decoration:none;

    display:inline-flex;

    align-items:center;

    transition:.35s;

    font-size:16px;

}

.footer-menu a::before{

    content:"›";

    color:var(--footer-gold);

    margin-right:12px;

    font-size:20px;

    transition:.35s;

}

.footer-menu a:hover{

    color:#ffffff;

    transform:translateX(8px);

}

.footer-menu a:hover::before{

    margin-right:18px;

}

/* ==========================================================
   CONTACT
========================================================== */

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-contact div{

    display:flex;

    align-items:center;

    gap:16px;

    padding:14px 18px;

    border-radius:16px;

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

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

    transition:.35s;

}

.footer-contact div:hover{

    transform:translateX(6px);

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

}

.footer-contact i{

    width:42px;

    height:42px;

    border-radius:50%;

    background:rgba(212,175,55,.15);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--footer-gold);

    font-size:18px;

    flex-shrink:0;

}

.footer-contact span{

    color:var(--footer-text);

}

/* ==========================================================
   COLUMN DIVIDER
========================================================== */

.footer-grid{

    position:relative;

}

.footer-grid::before{

    content:"";

    position:absolute;

    left:43%;

    top:10px;

    bottom:10px;

    width:1px;

    background:var(--footer-border);

}

.footer-grid::after{

    content:"";

    position:absolute;

    left:71%;

    top:10px;

    bottom:10px;

    width:1px;

    background:var(--footer-border);

}

/* ==========================================================
   END V9.02
========================================================== */

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

.footer-social{

    margin-top:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

}

.footer-social a{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#ffffff;

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

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

    transition:all .35s ease;

}

.footer-social a i{

    font-size:22px;

}

.footer-social a:hover{

    background:var(--footer-gold);

    color:var(--footer-bg);

    transform:translateY(-8px);

    box-shadow:0 12px 25px rgba(212,175,55,.30);

}

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

.footer-bottom{

    margin-top:60px;

    padding-top:28px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}

.footer-bottom p{

    margin:0;

    color:var(--footer-text);

    font-size:15px;

}

.footer-bottom span{

    color:var(--footer-text-light);

    font-size:14px;

}

/* ==========================================================
   FLOATING WHATSAPP
========================================================== */

.floating-wa{

    position:fixed;

    right:28px;

    bottom:28px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:32px;

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

    transition:.35s;

    z-index:9999;

}

.floating-wa:hover{

    transform:scale(1.12);

    color:#ffffff;

    box-shadow:0 20px 40px rgba(37,211,102,.45);

}

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

@media(max-width:991px){

.footer-grid{

grid-template-columns:1fr;

gap:45px;

}

.footer-grid::before,
.footer-grid::after{

display:none;

}

.footer-column{

text-align:center;

}

.footer-column h3::after{

left:50%;
transform:translateX(-50%);

}

.footer-icon{

margin:0 auto 20px;

}

.footer-about p{

text-align:center;

}

.footer-contact div{

justify-content:center;

}

.footer-social{

margin-top:50px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

}

@media(max-width:576px){

.footer{

padding:80px 0 30px;

}

.footer-brand img{

width:80px;

}

.footer-brand h2{

font-size:30px;

}

.footer-tagline{

font-size:16px;

line-height:1.8;

padding:0 15px;

}

.footer-column h3{

font-size:22px;

}

.footer-social{

gap:12px;

flex-wrap:wrap;

}

.footer-social a{

width:52px;

height:52px;

}

.footer-social a i{

font-size:20px;

}

.floating-wa{

width:58px;

height:58px;

right:18px;

bottom:18px;

font-size:28px;

}

}

/* ==========================================================
   MICRO ANIMATION
========================================================== */

.footer-column{

transition:.35s;

}

.footer-column:hover{

transform:translateY(-4px);

}

.footer-brand img{

animation:footerFloat 5s ease-in-out infinite;

}

@keyframes footerFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}