/*======================================
GLOBAL
======================================*/

:root{

--primary:#2257B7;
--secondary:#0A2F73;
--light:#EEF4FF;
--white:#FFFFFF;
--text:#1F2937;
--gray:#64748B;

}


*{

margin:0;
padding:0;
box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}


body{

font-family:'Poppins',sans-serif;

background:#F4F7FC;

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}


img{

max-width:100%;

display:block;

}



section{

padding:90px 8%;

scroll-margin-top:100px;

}


.white{

background:white;

}





/*======================================
NAVBAR
======================================*/


nav{

position:fixed;

top:0;

left:0;

width:100%;

padding:18px 8%;

display:flex;

justify-content:space-between;

align-items:center;

background:white;

box-shadow:

0 5px 20px rgba(0,0,0,.05);

z-index:999;

}



.logo-area{


display:flex;

align-items:center;

gap:12px;

}


.logo-area img{


width:55px;

}



.logo-area h2{


font-size:26px;

font-weight:700;

color:var(--secondary);

}



nav ul{


display:flex;

list-style:none;

gap:35px;

}



nav ul li a{


text-decoration:none;

color:var(--text);

font-weight:500;

transition:.3s;

}



nav ul li a:hover{


color:var(--primary);

}



.active{


color:var(--primary);

font-weight:700;

}





/*======================================
HERO
======================================*/


.hero{


min-height:100vh;


padding-top:140px;


display:flex;


justify-content:space-between;


align-items:center;


gap:60px;


background:


linear-gradient(

180deg,

#EEF4FF 0%,

#F7F9FC 100%

);


}



.hero-left{


flex:1;

min-width:300px;

}



.hero-right{


flex:1;


display:flex;


justify-content:center;

}



.hero-right img{


max-width:500px;


width:100%;

}



.hero-left h1{


font-size:72px;


font-weight:800;


color:var(--secondary);


margin-bottom:20px;

}



.hero-left h3{


font-size:30px;


line-height:1.5;


margin-bottom:20px;

}



.hero-left p{


font-size:18px;


color:var(--gray);


margin-bottom:35px;

}



.buttons{


display:flex;


gap:20px;


flex-wrap:wrap;

}



.btn1{


padding:15px 35px;


border:none;


border-radius:10px;


background:var(--primary);


color:white;


cursor:pointer;


font-size:16px;

}



.btn2{


padding:15px 35px;


border-radius:10px;


border:2px solid var(--primary);


background:white;


color:var(--primary);


cursor:pointer;


font-size:16px;

}





/*======================================
SECTION
======================================*/


section h2{


font-size:48px;


text-align:center;


color:var(--secondary);


margin-bottom:20px;

}



.line{


width:100px;


height:4px;


background:var(--primary);


margin:auto;


margin-bottom:45px;


border-radius:10px;

}



.quote{


font-size:24px;


font-style:italic;


max-width:850px;


margin:auto;


margin-bottom:35px;


color:#475569;

}



section p{


max-width:1000px;


margin:auto;


text-align:center;


font-size:18px;


line-height:2;


color:#475569;

}





/*======================================
CARDS
======================================*/

.cards{


display:grid;


grid-template-columns:


repeat(auto-fit,minmax(320px,1fr));


gap:30px;


margin-top:50px;

}



.card{


background:white;


padding:35px;


border-radius:20px;


box-shadow:


0 5px 20px rgba(0,0,0,.05);


transition:.3s;

}



.card:hover{


transform:translateY(-5px);

}



.card h3{

text-align: center;

font-size:26px;


margin-bottom:20px;


color:var(--secondary);

}

.card h4{

display:block;

text-align:center;

margin-top:25px;

}



.card ul{


padding-left:20px;


text-align:left;

}



.card li{


margin-bottom:12px;


font-size:17px;

}





/*======================================
GALLERY
======================================*/


.gallery{


display:grid;


grid-template-columns:


repeat(auto-fit,minmax(280px,1fr));


gap:25px;


margin-top:40px;

}



.gallery img{


width:100%;


height:240px;


object-fit:cover;


border-radius:20px;


box-shadow:


0 5px 20px rgba(0,0,0,.05);

}





/*======================================
TEAM
======================================*/


.mentor-card{

width:320px;

margin:0 auto 60px;

padding:35px;

background:#fff;

border-radius:25px;

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

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

}


.mentor-card img{

width:140px;

height:140px;

object-fit:cover;

border-radius:50%;

margin-bottom:25px;

}


.mentor-card h3{

font-size:20px;

font-weight:700;

line-height:1.4;

color:#0A2F73;

margin-bottom:10px;

text-align:center;

}


.mentor-card p{

font-size:15px;

color:#64748B;

text-align:center;

margin:0;

}



.team-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}



.member{

background:#fff;

padding:35px;

border-radius:25px;

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

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

}



.member img{

width:130px;

height:130px;

object-fit:cover;

border-radius:50%;

margin-bottom:20px;

}



.member h3{

font-size:20px;

font-weight:700;

line-height:1.4;

color:#0A2F73;

margin-bottom:10px;

text-align:center;

}



.member p{

font-size:15px;

color:#64748B;

text-align:center;

margin:0;

}

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

#contact{

padding:100px 8%;

background:#F4F7FC;

}


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

.section-title{

font-size:48px;

font-weight:700;

text-align:center;

color:#0A2F73;

margin-bottom:15px;

}



.contact-subtitle{

font-size:18px;

text-align:center;

color:#64748B;

margin-bottom:60px;

line-height:1.7;

}



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

.contact-container{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:60px;

flex-wrap:wrap;

}




/*=========================
INFO KIRI
=========================*/

.contact-info{

flex:1;

min-width:320px;

max-width:400px;

display:flex;

flex-direction:column;

align-items:flex-start;

text-align:left;

}



/* Mari Terhubung */

.contact-info h3{

font-size:36px;

font-weight:700;

color:#0A2F73;

margin-bottom:15px;

text-align:left;

width:100%;

}



/* deskripsi */

.desc{

font-size:17px;

line-height:1.7;

color:#64748B;

margin-bottom:25px;

text-align:left;

width:100%;

}



/*=========================
ITEM
=========================*/

.item{

width:100%;

margin-bottom:18px;

text-align:left;

}



.item h4{

font-size:22px;

font-weight:700;

color:#0A2F73;

margin-bottom:2px;

text-align:left;

width:100%;

}



.item p{

font-size:18px;

line-height:1.6;

color:#64748B;

margin:0;

text-align:left;

width:100%;

}




/*=========================
FORM
=========================*/

.contact-form{

flex:2;

min-width:450px;

background:#FFFFFF;

padding:40px;

border-radius:25px;

box-shadow:

0 5px 20px rgba(0,0,0,.05);

}



.contact-form input{

width:100%;

padding:18px;

margin-bottom:20px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

font-family:'Poppins';

outline:none;

}



.contact-form textarea{

width:100%;

height:180px;

padding:18px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

font-family:'Poppins';

resize:none;

outline:none;

margin-bottom:20px;

}



.contact-form button{

padding:15px 40px;

background:#2257B7;

border:none;

border-radius:10px;

font-size:16px;

font-weight:600;

color:white;

cursor:pointer;

transition:.3s;

}



.contact-form button:hover{

background:#173792;

}




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

@media(max-width:992px){


.contact-container{

flex-direction:column;

gap:40px;

}


.contact-info{

max-width:100%;

}


.contact-form{

min-width:100%;

}


}



@media(max-width:768px){


.contact-info h3{

font-size:30px;

}



.desc{

font-size:16px;

}



.item h4{

font-size:20px;

}



.item p{

font-size:16px;

}



.contact-form{

padding:25px;

}


}



@media(max-width:480px){


.contact-info h3{

font-size:28px;

}


.contact-form{

padding:20px;

}


.contact-form button{

width:100%;

}


}



/*======================================
FORM
======================================*/


.contact-form{


flex:2;


min-width:320px;


background:white;


padding:40px;


border-radius:20px;


box-shadow:


0 5px 20px rgba(0,0,0,.05);

}



.contact-form input,


.contact-form textarea{


width:100%;


padding:18px;


margin-bottom:20px;


border:1px solid #ddd;


border-radius:10px;


font-size:16px;


outline:none;


font-family:Poppins;

}



.contact-form textarea{


height:180px;


resize:none;

}



.contact-form button{


padding:15px 35px;


background:var(--primary);


border:none;


border-radius:10px;


color:white;


font-size:16px;


cursor:pointer;


transition:.3s;

}



.contact-form button:hover{


background:#173792;

}




/*======================================
MAPS
======================================*/


.maps{


margin-top:70px;

}



.maps iframe{


width:100%;


height:450px;


border:none;


border-radius:20px;


box-shadow:


0 5px 20px rgba(0,0,0,.05);

}




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


footer{


padding:60px 20px;


background:


linear-gradient(

135deg,

#0A2F73,

#2257B7

);


text-align:center;

}



.footer-logo{


width:75px;


margin:auto;


margin-bottom:20px;

}



footer h3{


font-size:32px;


color:white;


margin-bottom:15px;

}



.footer-text{


max-width:650px;


margin:auto;


font-size:17px;


line-height:1.8;


color:#D6E4FF;

}



.copyright{


margin-top:30px;


padding-top:20px;


max-width:300px;


margin-left:auto;


margin-right:auto;


border-top:


1px solid rgba(255,255,255,.2);


font-size:14px;


color:#C8D8FF;

}




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


section{


opacity:0;


transform:


translateY(30px);


transition:.8s;

}



section.show{


opacity:1;


transform:


translateY(0);

}




/*======================================
LAPTOP
======================================*/


@media(max-width:1200px){


.hero-left h1{


font-size:60px;

}



.hero-right img{


max-width:420px;

}


}




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


@media(max-width:992px){


.hero{


flex-direction:column;


text-align:center;

}



.hero-left{


max-width:100%;

}



.buttons{


justify-content:center;

}



.contact-container{


flex-direction:column;


gap:50px;

}



.contact-info{


max-width:100%;

}



.contact-form{


width:100%;

}



.team-grid{


grid-template-columns:


repeat(2,1fr);

}


}




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


@media(max-width:768px){



nav{


padding:15px 5%;

}



nav ul{


gap:20px;

}



.logo-area h2{


font-size:22px;

}



.hero{


padding-top:120px;

}



.hero-left h1{


font-size:42px;

}



.hero-left h3{


font-size:22px;

}



.hero-left p{


font-size:17px;

}



section{


padding:70px 7%;

}



section h2{


font-size:36px;

}



.quote{


font-size:20px;

}



.cards{


grid-template-columns:1fr;

}



.team-grid{


grid-template-columns:1fr;

}



.contact-form{


padding:25px;

}



.maps iframe{


height:300px;

}



.footer-logo{


width:65px;

}



footer h3{


font-size:28px;

}



.footer-text{


font-size:15px;

}


}




/*======================================
HP KECIL
======================================*/


@media(max-width:430px){


.hero-left h1{


font-size:34px;

}



.hero-left h3{


font-size:19px;

}



.buttons{


flex-direction:column;

}



.btn1,
.btn2{


width:100%;

}



section{


padding:60px 6%;

}



.contact-form{


padding:20px;

}



.maps iframe{


height:250px;

}



.footer-text{


font-size:14px;

}



.copyright{


font-size:13px;

}


}

.menu-toggle{

display:none;

font-size:30px;

cursor:pointer;

}


@media(max-width:768px){

.menu-toggle{

display:block;

}


nav ul{

display:none;

}


nav ul.active{

display:flex;

flex-direction:column;

position:absolute;

top:80px;

left:0;

width:100%;

background:white;

padding:20px;

gap:20px;

text-align:center;

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

}

}

.innovation{

    padding:90px 8%;
    background:#f8fbff;

}

.innovation-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    margin-top:50px;

}

.innovation-card{

    background:white;

    border-radius:25px;

    padding:35px;

    text-align:center;

    transition:.4s;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.innovation-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.innovation-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#edf4ff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:40px;

    margin-bottom:25px;

}

.innovation-card h3{

    margin-bottom:15px;

    color:#002B5B;

}

.innovation-card p{

    line-height:1.8;

    color:#666;

    margin-bottom:30px;

}

.btn-innovation{

    display:inline-block;

    padding:14px 30px;

    border-radius:50px;

    background:#1d63ff;

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.btn-innovation:hover{

    background:#003eb8;

}

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

.contact{

    padding:100px 8%;

    background:#f6f9ff;

}

.contact .section-title{

    text-align:center;

    margin-bottom:60px;

}

.contact-card-container{

    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;

}

.contact-card{

    width:340px;

    background:#ffffff;

    border-radius:24px;

    padding:40px;

    text-decoration:none;

    text-align:center;

    color:#163A86;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.contact-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:#eef4ff;

    display:flex;

    justify-content:center;

    align-items:center;

}

.contact-icon i{

    font-size:42px;

    color:#1d63ff;

}

.contact-card h3{

    margin-bottom:10px;

    color:#163A86;

}

.contact-card p{

    color:#666;

    margin-bottom:25px;

}

.contact-card span{

    font-weight:700;

    color:#1d63ff;

}

@media(max-width:768px){

.contact-card{

width:100%;

}

}

.aksiSwiper{

    width:100%;

    padding:70px 0;

}

.swiper-slide{

    width:650px;

}

.swiper-slide img{

    width:100%;

    height:420px;

    object-fit:cover;

    border-radius:25px;

    transition:.4s;

}

/*======================================
MOBILE SLIDER
======================================*/

@media screen and (max-width:768px){

    .swiper-slide img{

        width:100%;

        height:auto;

        max-height:500px;

        object-fit:contain;

        background:#ffffff;

        border-radius:20px;

    }

}