/* *,
::before,
::after {
     border: 1px solid red;  
} */

body{
    background-color: #222831;
    background: linear-gradient(147deg,rgba(34, 40, 49, 1) 26%, rgba(35, 41, 50, 1) 11%, rgba(0, 173, 181, 1) 62%);
}

.glass-bg {
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.011);
}

.text-hero{
  text-align: justify;
}

.text-about{
  text-align: justify;
}

.judul-nama{
  font-size: 75px;
}

.foto-bingkai {
  width: 350px;
  height: 350px;       
  object-fit: cover;    
  border-radius: 100%;   
  border: 10px solid #ffffff;  
}


.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px var(--shadow-accent);
    transition: all 0.3s ease; 
}
.card:hover .card-index {
    transform: scale(1.15); 
    filter: drop-shadow(0 0 15px var(--color-accent)); 
    transition: transform 0.3s ease-in-out; 
}

.footer-section {
    background-color: #222831 ;
}

.footer-link {
    color: #bbb;
    text-decoration: none;
    transition: 0.3s;
}

.footer-link:hover {
   color: #fff;
   margin-left: 6px;
}

.social-icon {
    color: #bbb;
    font-size: 1.5rem;
    transition: 0.3s;
}

.social-icon:hover {
    color: #fff;
    transform: scale(1.2);
}

.accordion-item {
   overflow: hidden;
   border: none;
   background-color: #222831 !important;
}

.accordion-button {
  border-radius: 15px !important;
  background-color: #222831!important;
  color: #fff !important;
}

.accordion-button:not(.collapsed) {
  background-color: #222831 !important;
  color: #fff !important;
}

.nav-tabs .nav-link {
    background-color: transparent;
    border: none;
    padding: 10px 20px;
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    background-color: #00ADB5; 
    color: #fff !important;
    border-radius: 10px;
}

.nav-tabs .nav-link:hover {
    background-color: #393E46;
    border-radius: 10px;
}

.portfolio-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.portfolio-card img {
    height: 200px;            
    object-fit: cover;        
    width: 100%;
}

.portfolio-card .card-body {
    flex-grow: 1;             
}

.bg-container{
  background-color: #ffffff;
}
.contact-header{
  font-size: 25px;
}
.form-control::placeholder {
    color: #ccc !important;
    opacity: 1; 
}