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

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

}

/* NAVBAR */

.navbar{
    width:100%;
    height:85px;

    background:#0f1d3a;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 60px;

   position: sticky; top: 0; z-index: 999;

    
}


.logo{
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo img{
    width:75px;
    
}


.logo-text h2{
    color: white;

}



.menu{
    display: flex;
    align-items: center;
    gap: 35px;
}

.menu a{
    text-decoration: none;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    transition: .3s;
}

.menu a:hover{
    color: #ff7900;
}

.menu a.active{
    color: #ff7900;
}

/* Footer*/
.footer {
	background: #0c1a2b;
	color: white;
	font-family: Arial, sans-serif;
}

.footer-top {
	display: flex;
	justify-content: space-between;
	gap: 7rem;
	padding: 5rem;
	flex-wrap: wrap;
}

.footer-col {
	flex: 1 1 250px;
}

.footer-logo {
	display: flex;
	width: 300px;
	margin-bottom: 0.5rem;
}
.footer-logo h4 {
	font-weight: 800;
	text-align: left;
	margin-left: 16px;
	margin-top: 10px;
}

.footer h4 {
	margin-bottom: 18px;
	font-size: 1rem;
	margin-top: 20px;
	margin-left: 15px;
}
.footer h4:hover {
	color: #ff6600;
}

.footer p {
	font-size: 0.9rem;
	line-height: 1.4;
	text-align: justify;
}
.footer-social {
	display: flex;
}
.footer-social img {
	margin-top: 20px;
	width: 20px;
	margin-left: 15px;
}
.footer-social .instagram img {
	margin-top: 20px;
	width: 20px;
	margin-left: 15px;
	transition: transform 0.3s ease;
}

.footer-social .instagram:hover img {
	transform: scale(1.3);
}
.footer-social .facebook img {
	margin-top: 20px;
	width: 20px;
	margin-left: 15px;
	transition: transform 0.3s ease;
}

.footer-social .facebook:hover img {
	transform: scale(1.3);
}
.footer-social .youtube img {
	margin-top: 20px;
	width: 25px;
	margin-left: 15px;
	height: 20px;
	transition: transform 0.3s ease;
}

.footer-social .youtube:hover img {
	transform: scale(1.5);
}
.footer-social .whatsapp img {
	margin-top: 20px;
	width: 20px;
	margin-left: 15px;
	transition: transform 0.3s ease;
}

.footer-social .whatsapp:hover img {
	transform: scale(1.5);
}
.footer-social .tiktok img {
	margin-top: 20px;
	width: 20px;
	margin-left: 15px;
	transition: transform 0.3s ease;
}

.footer-social .tiktok:hover img {
	transform: scale(1.5);
}
.footer-col .fa-solid {
	font-size: 16px;
	margin-right: 15px;
	margin-top: 10px;
}
.footer-col p {
	margin-left: 15px;
	text-align: justify;
}
.footer-col p:hover {
	color: #ff6600;
}

.footer-bottom {
	background: #07111e;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.8rem 2rem;
	flex-wrap: wrap;
	font-size: 0.85rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Profil dropdown */
.dropdown-user {
    position: relative;
    display: inline-block;
}

.dropdown-btn {
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: white;

    display: flex;
    align-items: center;
    gap: 8px;

    transition: .3s;
}

.dropdown-btn:hover {
    color: #ff7900;
}

.dropdown-btn i {
    font-size: 13px;
    transition: .3s;
}

/* Rotate icon */
.dropdown-btn.active i {
    transform: rotate(180deg);
}

.dropdown-content {
    position: absolute;
    right: 0;
    top: 45px;

    background: #fff;
    min-width: 120px;

    border-radius: 10px;
    overflow: hidden;

    box-shadow: 0 5px 18px rgba(0,0,0,0.12);

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition: .3s;

    z-index: 999;
}

/* ACTIVE */
.dropdown-content.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-content a {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 16px 11px;

    text-decoration: none;
    color: #333;
    font-size: 14px;

    transition: .3s;
}

.dropdown-content a:hover {
    background: #fff3eb;
    color: #ff7900;
}

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

.menu-toggle{
    display:none;
    flex-direction:column;
    justify-content:space-between;
    width:28px;
    height:20px;
    cursor:pointer;
}

.menu-toggle span{
    display:block;
    height:3px;
    background:#fff;
    border-radius:5px;
    transition:.3s;
}



@media(max-width:768px){

     .navbar{
        padding:15px;
    }

    .logo img{
        width:60px;
    }

    .logo-text h2{
        font-size:16px;
    }

    .menu{
        gap:15px;
    }

    .menu a{
        font-size:14px;
    }

    .dropdown-content.show{
        display:block;
    }


    

}

@media(max-width:480px){

    .navbar{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        padding:15px 20px;
        position:sticky;
        z-index:99999;
    }

   

    .menu-toggle{
        display:flex;
    }

    .menu{

        display:none;

        position:absolute;

        top:100%;
        right:15px;

        width:220px;

        background:#fff;

        border-radius:12px;

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

        padding:10px;

        flex-direction:column;

        gap:5px;

        z-index:999;
    }

    .menu.active{
        display:flex;
    }

    .menu a{
        color:#222;
        width:100%;
        padding:10px;
        border-radius:8px;
    }

    .menu a:hover{
        background:#f5f5f5;
    }

    .dropdown-user{
        width:100%;
    }

    .dropdown-btn{
        width:100%;
        justify-content:space-between;
        color:#222;
        padding:10px;
    }

    .dropdown-content{
        position:static;
        box-shadow:none;
        width:100%;
        margin-top:5px;
    }

    .logo img{
        width:55px;
    }

    .logo-text h2{
        font-size:15px;
    }

    /* ANIMASI X */

    .menu-toggle.active span:nth-child(1){
        transform:rotate(45deg) translate(6px,6px);
    }

    .menu-toggle.active span:nth-child(2){
        opacity:0;
    }

    .menu-toggle.active span:nth-child(3){
        transform:rotate(-45deg) translate(6px,-6px);
    }

    .footer-top {
    display: flex;
    justify-content: center;
    padding: 1rem 1rem;
    margin: 0 auto;
    flex-wrap: wrap;        
    gap: 3rem;              
    max-width: 1200px;      
}

.footer-col {
    flex: 1 1 250px;       
    margin: 0 auto;
    text-align: left;
}

    
    .footer-col p {
        text-align: justify;
    }

    .footer-logo {
        display: flex;
        align-items: center; 
        justify-content: flex-start;
         margin: 0 0 10px 0;
    }

    .footer-logo img {
        width: 80px; 
        margin-right: 8px; 
        margin-top: 3px;   
    }

    .footer-logo h4 {
        text-align: left;  
        margin: 0;
        line-height: 1.2; 
        font-size: 1rem;  
    }

    .footer-bottom { 
       margin-top: 20px;
    }

    

}