.section {
    padding: 4rem 0;
}

#about {
    padding-top: 0;
}

.section-title {
    margin: 1rem 0;
}
.profile-img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.project-img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

h2 {
  font-size: 2rem;
}

.section .website-title {
    margin: 4rem 0;
    text-align: center;
    font-size: 3rem;
    color: #DFF2FD;
    font-family: "Titillium Web", system-ui;
    font-weight: 700;
    font-style: normal;

}

p {
  font-size: 1.25rem;
}

.emphasises {
  color: rgb(74, 146, 255);
  font-weight: 600;
}

.center-col-6 {
    justify-content: center;
    gap: 2rem;
}

.project {
  border-radius: 1.25rem;
  border: 2px solid #ffffff00;
  transition: all 0.5s ease;
}

.project:hover {
  cursor: pointer;
  border: 2px solid #ffffff;
}



.modal-content {
    background-color: #DBE3FF;
    color: #0A0E1C;

}

.modal-body a {
    text-decoration: none;
    border-bottom: 1px solid rgb(74, 146, 255);
}

.modal-body {
    font-size: 1.25rem;
}

.modal-header {
    border-color: #0A0E1C80;
}

.modal-footer {
    border-color: #0A0E1C80;
    justify-content: center;
}

.btn-sel-primarly { 
    background-color: #0A0E1C;
    color: #ffffff;
    transition: 0.25s all ease;
    font-size: 1.20rem;
    font-weight: 300;
    padding: 0.50rem 4rem;
}

.btn-sel-primarly:hover {
    background-color: #1c2855;
    color: #e6e6e6;
}

.g-recaptcha {
    margin: 1rem 0;
}

#alert-bx {
    margin: 2rem 0;
}

#contact-form {
    font-size: 1.25rem;
}

#contact-form input {
    font-size: 1.25rem;
}

#message {
  max-height: 10rem;
  min-height: 8rem;
  font-size: 1.25rem;
}

#contact-form button {
  font-size: 1.25rem;
  padding: 0.5rem 4rem;
}


.social-bar {
    padding: 0.50rem 0rem;
    width: 75%;
    border-radius: 1rem;
    margin: 1rem auto;
}


.social-bar .icon-container a {
    font-size: 2rem;
    padding: 0 1rem;
    color: #DFF2FD;
}

.social-bar .icon-container a:hover {
    color: #ccdee9;
}

@media only screen and (max-width: 400px) {
    .social-bar {
        width: 100%
    }

    .section .website-title {
        font-size: 3rem;
    }

    
  }

.badge-custom {
    margin: 0 10px;
 }