@charset "UTF-8";

.logo-padding {
    padding: 20px;
}

/*login.php (Klik di sini untuk mendaftar)*/
.link-white {
    color: white !important;
    text-decoration: none !important;
}

/*login.php (Klik di sini untuk mendaftar)*/
.link-white:hover {
    color: #bdbdbd !important;
}

/*login.php (Log Masuk button)*/
.signin {
    background-color: #ff6b00 ; 
    color: white;
}
.signin:hover {
    /* background-color: #ff6b00 ; 
    color: white; */
    transform: translateY(-1px);
    box-shadow: 
        0 6px 12px rgba(175, 175, 175, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

/*five image as recycle logo - login page*/
.logo-container {
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 100px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 500px;
}

/*Every Section Title - Register*/
.font-18bb-register{
	font-size:18px;
	color:#00ac00;
	font-weight:bold;
}

/*Every Section Title - Register*/
.section-header {
    font-weight: bold;
    text-align: left;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/*hantar button - Register*/
.hantar{
    background: linear-gradient(145deg, #2c3e50, #34495e);
    color: #ecf0f1;
    padding: 12px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    /* letter-spacing: 0.5px; */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.hantar:hover {
    background: linear-gradient(145deg, #34495e, #2c3e50);
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(105, 171, 219, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.5);
}

/*hantar button - Form*/
.hantar_form{
    background: linear-gradient(145deg, #2c3e50, #34495e);
    color: #ecf0f1;
    padding: 5px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    /* letter-spacing: 0.5px; */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 8px rgba(105, 171, 219, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.5);
}

.hantar_form:hover {
    background: linear-gradient(145deg, #34495e, #2c3e50);
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
}


/*reset button - Register*/
.reset-btn {
    background: #ff6b00;
    color: white;
    padding: 12px 32px;
    /* border: 1px solid #95a5a6; */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    transition: all 0.3s ease;
    margin-left: 10px;
    box-shadow: 
        0 6px 12px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

.reset-btn:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(105, 171, 219, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.5);
}


/*reset button - Form*/
.reset-btn-form {
    background: #ff6b00;
    color: white;
    padding: 5px 20px;
    /* border: 1px solid #95a5a6; */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    transition: all 0.3s ease;
    margin-left: 10px;
    box-shadow: 
        0 4px 8px rgba(105, 171, 219, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.5);
}

.reset-btn-form:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 6px 12px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

/* .reset-btn:hover {
    background: #c2ec5d;
    transform: translateY(-1px);
    box-shadow: 
        0 6px 12px rgba(105, 171, 219, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.6);
} */

.lihat-btn {
    background: #ffffff;
    color: black;
    padding: 12px 32px;
    /* border: 1px solid #95a5a6; */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    transition: all 0.3s ease;
    /* margin-left: 10px; */
    box-shadow: 
        0 4px 8px rgba(105, 171, 219, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.5);
}

.lihat-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 
        0 6px 12px rgba(105, 171, 219, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.6);
}

/*five image as recycle logo - register page*/
.logo-container-register {
    /* background: rgba(255, 255, 255, 0.9);
    padding: 5px 0px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); */
    /* text-align: right; */
    /* display: right; */
    /* justify-content: space-between; */
    display: flex; 
    justify-content: center; 
    align-items: center;
    flex-wrap: wrap; 
    column-gap: 20px;
}


.social-icon {
  float: right;
  /* transition: filter 0.3s ease; */
}

/* .social-icon:hover {
  filter: brightness(0) invert(1);
} */

.pading_box2 {
    font-size: 14px;
    padding: 5px;
}


.log_out i:hover{
    color:#ff6b00!important;
}