*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Segoe UI',sans-serif;

overflow-x:hidden;

}

.navbar{

transition:.4s;

padding:20px 0;

}

.navbar.scrolled{

background:#fff;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.navbar.scrolled .nav-link{

color:#333!important;

}

.navbar-toggler{

    border:none;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.hero{
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background:
        linear-gradient(rgba(153,27,27,.55), rgba(15,23,42,.55)),
        url("../img/japan-bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}



.hero .container{

position:relative;

z-index:2;

}

.hero h1{

font-size:58px;

line-height:1.2;

}

.hero-image{

animation:float 4s ease-in-out infinite;

max-height:650px;

}

.hero::before{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

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

top:80px;

right:-100px;

filter:blur(2px);

}

.hero-badge{

margin:25px 0;

}

.hero-badge span{

display:inline-block;

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

backdrop-filter:blur(10px);

padding:8px 18px;

margin:5px;

border-radius:50px;

color:#fff;

font-size:14px;

}

.btn-danger{

background:#d70026;

border:none;

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

}

.btn-danger:hover{

background:#b00020;

transform:translateY(-3px);

}

.btn-light{

background:#fff;

color:#d70026;

font-weight:600;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0px);

}

}

section{

padding:90px 0;

}

.feature-card{

transition:.4s;

border-radius:20px;

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(0,0,0,.15)!important;

}

.feature-card i{

transition:.4s;

}

.feature-card:hover i{

transform:rotateY(180deg);

}

.program-card{

border-radius:20px;

overflow:hidden;

transition:.4s;

}

.program-card img{

height:250px;

object-fit:cover;

transition:.5s;

}

.program-card:hover{

transform:translateY(-10px);

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

}

.program-card:hover img{

transform:scale(1.1);

}

.program-card .card-body{

padding:30px;

}

.program-card h4{

font-weight:700;

}

#about{

background:#fff;

position:relative;

overflow:hidden;

}

#about::before{

content:"";

position:absolute;

width:300px;

height:300px;

background:#ffeaea;

border-radius:50%;

top:-120px;

left:-120px;

z-index:0;

}

#about .container{

position:relative;

z-index:2;

}

.text-justify{
    text-align: justify;
    line-height: 1.9;
}

.stats{

background:#e60012;

padding:80px 0;

color:white;

}

.stats h2{

font-size:50px;

font-weight:bold;

}

.gallery-card{

position:relative;

overflow:hidden;

border-radius:15px;

}

.gallery-card img{

width:100%;

height:260px;

object-fit:cover;

transition:.4s;

}

.gallery-card:hover img{

transform:scale(1.1);

}

.gallery-overlay{

position:absolute;

bottom:0;

left:0;

width:100%;

padding:20px;

background:linear-gradient(transparent,rgba(0,0,0,.8));

color:#fff;

}

.testimonial-card{

background:#fff;

padding:30px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.1);

text-align:center;

height:100%;

}

.testimonial-card img{

width:90px;

height:90px;

border-radius:50%;

margin-bottom:20px;

object-fit:cover;

}

.cta{

background:#e60012;

padding:100px 0;

}

footer{

background:#111;

color:#fff;

padding:60px 0;

}

footer ul{

list-style:none;

padding:0;

}

footer li{

margin-bottom:10px;

}


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

@media (max-width: 991px){

    /* Navbar */
    .navbar{
        background:#ffffff !important;
        padding:10px 0;
    }

    .navbar-brand{
        font-size:18px;
        color:#222 !important;
    }

    .navbar-brand img{
        height:38px;
    }

    .navbar .nav-link{
        color:#333 !important;
        text-align:center;
        padding:12px;
    }

    .navbar .btn{
        display:block;
        width:100%;
        margin-top:15px;
        margin-left:0 !important;
    }

    /* Hero */

    .hero{
        height:auto;
        padding:120px 0 60px;
        text-align:center;
    }

    .hero .row{
        min-height:auto;
    }

    .hero h1{
        font-size:34px;
    }

    .hero h5{
        font-size:18px;
    }

    .hero p{
        font-size:16px;
    }

    .hero-image{
        max-width:90%;
        margin-top:40px;
    }

    .hero .btn{
        width:100%;
        margin-bottom:15px;
    }

    /* About */

    #about{
        text-align:center;
    }

    #about .row{
        flex-direction:column;
    }

    #about img{
        max-width:320px;
        width:100%;
        margin:0 auto 35px;
        display:block;
    }

    #about h2{
        font-size:30px;
        margin-bottom:20px;
    }

    #about p{
        text-align:justify;
        line-height:30px;
    }

    #about .row.mt-4{
        justify-content:center;
    }

    #about .row.mt-4 .col-6{
        text-align:center;
    }

    /* Card */

    .feature-card{
        margin-bottom:20px;
    }

    .program-card{
        margin-bottom:25px;
    }

    /* Statistik */

    .stats .col-md-3{
        margin-bottom:35px;
    }

    .stats h2{
        font-size:40px;
    }

    /* Gallery */

    .gallery-card img{
        height:220px;
    }

    /* Testimoni */

    .testimonial-card{
        margin-bottom:20px;
    }

    /* CTA */

    .cta h2{
        font-size:32px;
    }

    .cta .btn{
        width:100%;
    }

    /* Footer */

    footer{
        text-align:center;
    }

    footer .col-lg-4{
        margin-bottom:30px;
    }

}

/* Smartphone */

@media (max-width:576px){

    .hero{

        padding-top:110px;

    }

    .hero h1{

        font-size:28px;

        line-height:1.3;

    }

    .hero h5{

        font-size:16px;

    }

    .hero p{

        font-size:15px;

    }

    .hero-image{

        max-width:100%;

    }

    h2{

        font-size:28px;

    }

    .display-5{

        font-size:30px;

    }

    .btn-lg{

        padding:12px 20px;

        font-size:16px;

    }

    .stats h2{

        font-size:34px;

    }

    .gallery-card img{

        height:200px;

    }

}

.sakura{

position:absolute;

font-size:28px;

opacity:.8;

animation:fall linear infinite;

z-index:3;

}

.sakura1{

left:10%;

animation-duration:10s;

animation-delay:0s;

}

.sakura2{

left:30%;

animation-duration:14s;

animation-delay:2s;

}

.sakura3{

left:55%;

animation-duration:12s;

animation-delay:1s;

}

.sakura4{

left:75%;

animation-duration:15s;

animation-delay:4s;

}

.sakura5{

left:90%;

animation-duration:11s;

animation-delay:3s;

}

@keyframes fall{

0%{

transform:translateY(-100px) rotate(0deg);

}

100%{

transform:translateY(110vh) rotate(360deg);

}

}

.map-responsive{

overflow:hidden;

border-radius:15px;

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

}

.map-responsive iframe{

display:block;

width:100%;

}