/* custom.css */

@media (max-width: 992px) { /* Adjust according to your navbar breakpoint */
  .social-media {
    flex-direction: row !important;
    justify-content: center; /* Centers the icons */
  }
  .social-media .nav-link {
    flex: 1;
    text-align: center;
    margin: 0 10px; /* Creates space between the icons */
  }
}

.btn-svg {
    display: inline-block; /* Allows transforms on inline elements */
    &:hover {transform: scale(1.05);}
    transition: transform 0.15s linear;
  }

.btn-svg img {
    width: 100%; /* Set width to 100% to make image responsive */
    height: auto; /* Set height to auto to maintain aspect ratio */
    max-width: 500px; /* Set a max-width to prevent image from becoming too large on wider screens */
}

.modal-dialog {
    max-width: 90vw !important;
    height: 90vh;
}

.modal-dialog .modal-body {
    overflow-y: auto;
}

/* This is for the scrollbar background */
::-webkit-scrollbar {
    width: 10px;
}

/* This is for the thumb (the moving part) */
::-webkit-scrollbar-thumb {
    background: darkgrey;
    border-radius: 10px;
}

/* This is for the track */
::-webkit-scrollbar-track {
    background: black;
}


body.ouasf {
  background: url('images/ouasf_bg.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}

body.dof {
  background: url('images/projects/dof/dof_bg.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}

body::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 100vh;
  background: rgba(22, 42, 63, 0.8); /* dark blue with opacity */
  z-index: -1;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: rgba(128, 128, 128, 0.5); /* Translucent grey background */
    transition: background-color 0.3s; /* Smooth transition for the background color */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: transparent; /* Ensure that the arrow icons are not affected by the background */
}

.container {
  background: rgba(128, 128, 128, 0.7); /* light grey with opacity */
}

.banner-background {
    background-color: #117890;  /* replace #yourColor with your actual color */
}

.accent-dim {
  background: rgba(105, 105, 105, 0.7); /* dark grey with opacity */
}

.accent-bright {
  background: rgba(192, 192, 192, 0.7); /* bright grey with opacity */
}

h1, h2, h3 {
  color: #ffffff; /* white */
}

p {
  color: #dddddd; /* light grey */
}

a:link {
  color: #add8e6; /* light blue */
}

a:visited {
  color: #dda0dd; /* plum */
}