body {
    padding-top: 75px;
}

.bg-ibraa-gradient {
        background: rgb(255,255,255);
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(200,200,200,1) 150%);
        min-height: 90vh;

}
.bg-ibra-gradient {
        background: rgb(255,255,255);
        background: linear-gradient(360deg, rgba(255,255,255,1) 0%, rgb(200, 200, 200) 150%);
        
}
.bg-ibraaa-gradient {
        background: rgb(255,255,255);
         
         background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(220,220,220,1) 50%, rgba(255,255,255,1) 100%);
         min-height: 50vh;
}

.link-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.link-hover:hover {
    color: rgb(255, 191, 54) !important ; 
    transform: scale(1.05);    
}

.foto-profil {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
}
.foto-profil:hover {
            transform: scale(1.05) translateY(-5px); 
            box-shadow: 0 1rem 3rem rgb(255, 191, 54) !important;
}

.card {
     transition: transform 0.5s ease, box-shadow 0.5s ease;
     cursor: pointer;
}
.card:hover {
   
    transform: translateY(-10px); 
    box-shadow: 0 1rem 3rem rgb(255, 191, 54) !important; 
    border-color: #ffffff;
}  

.text-ibraa {
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: #2a2929;
}
.text-ibraa::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;        
    bottom: 0;
    left: 0;
    background-color: rgb(255, 191, 54) !important; 
    transform: scaleX(0); 
    transform-origin: bottom right;
    transition: transform 0.5s ease-out;
}
.text-ibraa:hover::after {
    transform: scaleX(1); 
    transform-origin: bottom left;
}

.accordion-button:not(.collapsed) {
    background-color: rgb(221, 221, 221); 
    color: #000000 !important;          
    box-shadow: 0 0 0 0.25rem rgba(118, 118, 118, 0.25);       
}

.nav-pills .nav-link {
    color: #6c6c6c;           
    background-color: transparent;
    transition: all 0.3s ease;  
    border-radius: 5px;      
}
.nav-pills .nav-link:hover {
    background-color: #636363; 
    color: #ebebeb;             
}
.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link {
    background-color: #6c757d;  
    color: white !important;   
}

.form-control:focus, .form-select:focus {
            border-color: rgb(255, 191, 54); 
            box-shadow: 0 0 0 0.25rem rgb(255, 191, 54);
 }
 .form-check-input:checked {
            background-color: #ffd65b;
            border-color: #ffd350 ;
 }

.form-check-input:focus {
            border-color: rgb(255, 191, 54);
            box-shadow: 0 0 0 0.25rem rgb(255, 191, 54) ;
}