/* tab 1 */

#program{
    background-color: white;
}

#program .menuKu2 li{
    color: black;
}

#program .menuKu2 h3{
    color: black;
}

#program .menuKuA li{
    color: black;
}

#program .menuKuA h3{
    color: black;
}

#program .menukuB li{
    color: black;
}

#program .menukuB h3{
    color: black;
}

#program .menuKuC li{
    color: black;
}

#program .menuKuC h3{
    color: black;
}

#program .menuKuD li{
    color: black;
}

#program .menuKuD h3{
    color: black;
}

#program .menuKuE li{
    color: black;
}

#program .menuKuE h3{
    color: black;
}

#program .menuKuF li{
    color: black;
}

#program .menuKuF h3{
    color: black;
}

#program .menuKuG li{
    color: black;
}

#program .menuKuG h3{
    color: black;
}





.menuKu{
    display: grid;
    grid-template-areas: 
    'hero hero feature-1 feature-1' 
    'hero hero feature-2 feature-2' ;
    gap:15px;
    
    
}

.hero{
    grid-area: hero;
    background-image: url(../images/ponies.jpg);
    background-size:cover;
    background-position: center;
    min-height: 300px;
     padding: 50px;
    border: 1px solid #aaa;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}
  
    
.hero > *{
    display: block;
        background-color: rgb(35, 82, 124);
        opacity: 0.7;
        color: white;
        padding: 5px;
        margin-bottom: 5px;
}

.features{
background-color: black;
display: grid;
place-content: center;
cursor: pointer;
min-height: 200px;
    
}


.feature-1{
    grid-area: feature-1;
    background-image: url(../images/ponies1.jpg);
    background-size: cover;
    background-position: center;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.feature-2{
    grid-area: feature-2;
    background-image: url(../images/ponies2.jpg);    
    background-size: cover;
    background-position: center;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}


.menuKu2{
     display: grid;    
    grid-template-columns: repeat(auto-fit,minmax(200px, 1fr));
    gap: 10px;    
}

.deskrip{
    background-color: white;
    padding: 50px;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
    
}

.containerE{
    display: grid;
    gap: 15px;
}


.judul{
    
    text-align: center;
    background-color: white;
    padding: 10px;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.judul h2{
    font-weight: 600;
    text-transform: capitalize;

}

.deskrip li {
    font-size: 17px;
    
}

/* tab 2 */
.menuKuA{
    display: grid;
    grid-template-areas: 
    'heroA heroA featureA-1 featureA-1'
    'heroA heroA featureA-2 featureA-2';    
    gap:10px;
    
}

.heroA{
    grid-area: heroA;
    background-image: url(../images/centaur.jpg);
    background-size: cover;
    background-position: center;
    min-height: 30px;    
    padding: 50px;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;

}

.heroA > *{
        display: block;
        background-color: rgb(35, 82, 124);
        opacity: 0.7;
        color: white;
        padding: 5px;
        margin-bottom: 5px;
        
}



.featuresA{
    display: grid;
    place-content: center;
    min-height: 300px;
}

.featureA-1{
    background-image: url(../images/centaur1.jpg);
    grid-area: featureA-1;
    background-position: center;
    background-size: cover;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.featureA-2{
    background-image: url(../images/centaur2.jpg);
    grid-area: featureA-2;
    background-position: center;
    background-size: cover;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}


/* tab3 */
.menukuB{
    display: grid;
    grid-template-areas: 
    'heroB heroB featureB-1'
    'heroB heroB featureB-1';
    gap: 15PX;
}

.heroB{
    grid-area: heroB;
    background-image: url(../images/unicorn.jpg);
    min-height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 -500px;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
    padding: 10px;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;



}

.heroB > *{
        display: block;
        background-color: rgb(35, 82, 124);
        opacity: 0.7;
        color: white;
        padding: 5px;
        margin-bottom: 5px;
}


.featureB-1{
    grid-area: featureB-1;
    background-image: url(../images/unicorn1.jpg);
    min-height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}



/* tab4 */
.menuKuC{
    display: grid;
    grid-template-areas: 
    'heroC featureC-1'
    'heroC featureC-2'
    'heroC featureC-3';
    gap: 10PX;
}

.heroC{

    grid-area: heroC;
    background-image: url(../images/cubical.jpg);
    background-size: cover;
    
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
    
    padding: 50px;
    background-position:center ;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;

}

.featuresC{
    display: grid;
    place-content: center;
    min-height: 200px;
    
}

.featureC-1{
    grid-area: featureC-1;
    background-image: url(../images/cubical1.jpg);
    background-position: center;
    background-size: cover;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
    background-repeat: no-repeat;
}

.featureC-2{
    grid-area: featureC-2;
    background-image: url(../images/cubical2.jpg);
    background-position: center;
    background-size: cover;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
    background-repeat: no-repeat;
}

.featureC-3{
    grid-area: featureC-3;
    background-position: center;
    background-image: url(../images/cubical3.jpg);
    background-size: cover;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.feat{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(120px, 1fr));
    background-color: white;
    padding: 50px;
    color: black;
    
}

.feat .cok > * {
    color : black;
}

.feat .cok li {
    color : black;
}



.heroC > *{
    display: block;
        background-color: rgb(35, 82, 124);
        opacity: 0.7;
        color: white;
        padding: 5px;
        margin-bottom: 5px;
}
 

.deskrip2{
    background-color: white;
    padding: 30px;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
    
    place-content: center;
    
}


/* tab5 */
.menuKuD{
    display: grid;
    grid-template-areas: 
    'heroD featureD-1'
    'heroD featureD-2'
    'heroD featureD-3';   
    gap: 10px; 
 
}

.heroD{
    grid-area: heroD;
    background-image:url(../images/cubical3.jpg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 2px black;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 50px;

}

.featuresD{
    display: grid;
    place-content: center;
    min-height: 200px;   
}

.featureD-1{
    grid-area: featureD-1;
    background-image:url(../images/cubical1.jpg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 2px black;
}

.featureD-2{
    grid-area: featureD-2;
    background-image:url(../images/cubical2.jpg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 2px black;
}

.featureD-3{
    grid-area: featureD-3;
    background-image:url(../images/cubical.jpg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 2px black;
}

.heroD > *{
    display: block;
    background-color: rgb(35, 82, 124);
    opacity: 0.7;
    color: white;
    padding: 5px;
    margin-bottom: 5px;
}

/* TAB 6 */

.menuKuE{
    display: grid;
    grid-template-areas: 
    'heroE heroE featureE-1'
    'heroE heroE featureE-2'
    'heroE heroE featureE-3';
    gap:15px;
    
    
}

.heroE{
    grid-area: heroE;
    background-image: url(../images/meeting.jpg);
    background-position: center;
    background-size: cover;
    padding: 50px;
    min-height: 300px;
    box-shadow: 0 0 2px black;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
 
    
}

.heroE > *{
    display: block;
    background-color: rgb(35, 82, 124);
    opacity: 0.7;
    color: white;
    padding: 5px;
    margin-bottom: 5px;
}


.featuresE{
    display: grid;
    place-content: center;
    min-height: 200px;   
    background-color: RED;
}

.featureE-1{
    grid-area: featureE-1;
    background-image: url(../images/meeting1.jpg);
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 2px black;
}

.featureE-2{
    grid-area: featureE-2;
    background-image: url(../images/meeting2.jpg);
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 2px black;
}

.featureE-3{
    grid-area: featureE-3;
    background-color: white;
    box-shadow: 0 0 2px black;
}

.judulkuh{
    display: none;
}


.nama{
    grid-area: oke;
    padding: 10px;
    text-align: center;
    border: 1px solid #aaa;
    background-color: white;
    
}

.lol{
    grid-area: oke2;
    padding: 10px;
    place-content: center;
    border: 1px solid #aaa;
    background-color: white;
}




/* TAB 7 */
.menuKuF{
    display: grid;
    grid-template-areas: 
    'heroF featureF-1'
    'heroF featureF-2'
    'heroF featureF-3';

    gap:15px;
}

.heroF{
    grid-area: heroF;
    background-image: url(../images/mini\ meeting.jpeg);
    background-size: cover;
    background-position: center;
    min-height: 300px;
    padding: 50px;
    box-shadow: 0 0 2px black;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.featuresF{
    display: grid;
    min-height: 200px;
}

.featureF-1{
    grid-area: featureF-1;
    background-image: url(../images/mini\ meeting1.jpeg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 2px black;
}

.featureF-2{
    grid-area: featureF-2;
    background-image: url(../images/mini\ meeting3.jpg);
    background-color: tomato;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 2px black;
}

.featureF-3{
    grid-area: featureF-3;
    background-color: white;
    box-shadow: 0 0 2px black;
    padding: 50px;
    
}

.heroF > *{
    display: block;
        background-color: rgb(35, 82, 124);
        opacity: 0.7;
        color: white;
        padding: 5px;
        margin-bottom: 5px;
}

/* TAB 8 */
.menuKuG{
    display: grid;
    grid-template-areas: 
    'heroG  heroG featureG-1'
    'heroG  heroG featureG-2'
    'heroG  heroG featureG-3';
    gap: 15px;
}

.heroG{
    grid-area: heroG;
    background-image: url(../images/traning1.jpg);
    min-height: 300px;
    padding: 50px;
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 2px black;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.heroG > *{
    display: block;
        background-color: rgb(35, 82, 124);
        opacity: 0.7;
        color: white;
        padding: 5px;
        margin-bottom: 5px;
}



.featuresG{
    background-color: black;
    display: grid;
    place-content: center;
    cursor: pointer;
    min-height: 200px;
    
}

.featureG-1{
    grid-area: featureG-1;
    background-image: url(../images/traning.jpg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 2px black;
}

.featureG-2{
    grid-area: featureG-2;
    background-image: url(../images/traning3.jpeg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 2px black;
}

.featureG-3{
    background-color:white;
    color: black;
    box-shadow: 0 0 2px black;
}



/* navbar */
#iki{
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
 
}



#iki ul{
    
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(120px, 1fr));
    align-items: center;
    gap: 5px;
    padding: 0;
}

#iki li{
    background-color: black;
    padding: 5px;
    
    min-width: 100px;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

#iki li a{
    color: white;
    font-weight: bolder;
    display: block;
    padding: 5px;
    font-size: 10px;
    text-align: center;
    text-transform:capitalize;   
    
}

#iki li:hover  {
    background-color: rgb(35, 82, 124);
}

#iki li.active {
    background-color: rgb(35, 82, 124);

} 




@media (max-width:1024px){
    .hero >*{
        display: block;
        background-color: rgb(35, 82, 124);
        opacity: 0.7;
        color: white;
        padding: 5px;
        margin-bottom: 5px;;
    }

    .hero{
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }

    .judul{
        display: none;
    }


}

@media (max-width:900px) {
 .menuKu{
     grid-template-areas: 
     'hero'
     'feature-1'
     'feature-2';
 }
 
 .menuKuA{
    grid-template-areas: 
    'heroA'
    'featureA-1'
    'featureA-2';    
}

.menukuB{
    grid-template-areas: 
    'heroB'
    'featureB-1';  
}

.menuKuC{
    grid-template-areas: 
    'heroC' 
    'featureC-1'
    'featureC-2'
    'featureC-3';
}

.menuKuD{
    grid-template-areas: 
    'heroD' 
    'featureD-1'
    'featureD-2'
    'featureD-3';
}

.menuKuE{
    grid-template-areas: 
    'heroE' 
    'featureE-1'
    'featureE-2'
    'featureE-3';
}

.menuKuF{
    grid-template-areas: 
    'heroF' 
    'featureF-1'
    'featureF-2'
    'featureF-3';
}

.menuKuG{
    grid-template-areas: 
    'heroG' 
    'featureG-1'
    'featureG-2'
    'featureG-3';
}

.heroB{
 background-position: 0 -400px;   
    
}



 
}

@media (max-width:700px){
    .hero >*{
        font-size: 15px;
    }
    .heroA > *{
        font-size: 15px;
    }

    .heroB > *{
        font-size: 15px;
    }
    .heroD > *{
        font-size: 15px;
    }

    .menuKu2{
        display: grid;    
       grid-template-columns:1fr;
       gap: 10px;    
    }



    .heroB{
        background-position: center;   

Success!
       }
       



}