:root {
  --main-font: "Inter", sans-serif;
  --main-text-color: rgb(14,14,14); /* Replace with the color you want */
}
/* media queries for printing */
@media print {
  :root {
    --bs-body-font-size: 12px;
  }
  .print-show {
    display: block !important;
    color: black !important;
  }

  .print-hide, #navbarNav.print-hide {
    display: none !important;
  }
  .img-fluid{
    max-width: 100% !important;
    height: auto !important;
  }
  body{
    padding-top: 0 !important; /* Adjust this value as needed for printing */
  }
  div.row, div.row div:first-child{
    --webkit-page-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  h1, h2, h3, h4{
    --webkit-page-break-after: avoid;
    page-break-after: avoid;
    break-after: avoid;
  }
  /* no borders if printing */
  div.col-auto:not(.collapsed){
    border: none !important;
    background-color: transparent !important;
  }
}
/* END media queries */
body {
  font-family: var(--main-font);
  font-weight: 400;
  letter-spacing: -0.2px;
}
h1, h2, h3, h4, h5 {
  font-family: var(--main-font);
  font-weight: 600;
}

/* Add 2rem top margin to any .row whose first column starts with h2 */
.row:has(> [class*="col-"]:first-child > h2:first-child),
.row:has(> [class*="col-"]:first-child > h3:first-child) {
  margin-top: 3rem;
}

/* special card border radius override */
.card{
  border-radius: 0;
}
/* Change navbar background color */
.navbar {
  background-color: transparent
}

/* Change navbar text color */
.navbar .navbar-nav .nav-link {
  color: white;
}

/* Change navbar active link color */
.navbar .navbar-nav .nav-item.active .nav-link {
  color: yellow;
}

/* Change navbar hover link color */
.navbar .navbar-nav .nav-link:hover {
  color: yellow;
}

/* Change navbar brand color */
.navbar .navbar-brand {
  font-size: 1.5em;
  line-height: 1.5em;
  color: yellow;
}

#defaultContent {
  display: none;
}

.header {
  background-image: url('images/k1go_sketch2blue.png');
  /* background image fills width */
  background-size: cover;
  color: white;
  text-align: left;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: dodgerblue;
  background-blend-mode: multiply;
  transition: transform 0.3s ease-in-out;
}
.hide-header {
  transform: translateY(-100%);
}
.footer {
  transition: transform 0.3s ease-in-out;
}
.hide-footer {
  transform: translateY(100%);
}

.brand-color {
  color: dodgerblue;
}

/* content section 1 */
.color-box-1 {
  background-color: dodgerblue;
  text-align: left;
  color: white;
}

/* below fixes header */
#work::before {
  content: "";
  display: block;
  height: 270px;
  /* Replace with the height of your header */
  margin-top: -270px;
  /* Negative value of your header's height */
  visibility: hidden;
  pointer-events: none;
}

body {
  padding-top: 270px;
}

/* initially, may be changed by javascript */

#logos .img-fluid {
  filter: grayscale(100%) brightness(180%);
  max-height: 40px;
  width: auto;
  object-fit: contain
}

.img-fluid.border {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

#hero {
  transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
  max-height: 1000px;
  /* adjust this to the maximum possible height of your #hero div */
  opacity: 1;
  overflow: hidden;
}

.navbar-toggler.collapsed .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-x-lg' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3E%3C/svg%3E");
}
.img-ratio {
  /* div wrap an image you want to crop */
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* default for 4:3 aspect ratio */
  overflow: hidden;
}
.img-ratio img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.r4to3 {
  padding-bottom: 75%; /* combine with .img-ratio for 4:3 aspect ratio */
}
.r1to1 {
  padding-bottom: 100%; /* combine with .img-ratio for 1:1 aspect ratio */
}
.r5to3 {
  padding-bottom: 60%; /* combine with .img-ratio for 5:3 aspect ratio */
}

.pos-left {
  object-position: 0 center;
}
.pos-right {
  object-position: 100% center;
}
.nav-link.active{color: yellow; border-bottom: 3px solid yellow;}

/* ************for carousel sizing */
#testimonials .carousel-item {
  height: 400px; /* Adjust this value according to your needs */
  overflow: hidden;
}
.img-container {
  width: 100px; /* adjust as needed */
  height: 100px; /* adjust as needed */
  background-size: cover;
  background-position: center;
  border:1px solid #ccc;
  border-radius: 5px;
}
/* ************* extra styles for text on hover */
.image-container {
  position: relative;
}

.image-container img {
  width: 100%;
  vertical-align: middle
}

.image-container .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: .5s ease;
  background-color: transparent;
}
/*
.image-container:hover .image-overlay {
  opacity: 1;
}
*/
.image-container .overlay-content {
  color: white;
  font-size: 20px;
  text-align: center;
  padding: 10px;
  background-color: rgba(9, 73, 167, 0.8);
  width: 100%;
  position: absolute;
  bottom: 0%;
}
.overlay-content p{
  margin-bottom: 0;
}
/* ***** and the overlay on mobile-touch */
@media (hover: none) {
  .image-container .image-overlay {
    opacity: 1;
    top: auto;
    bottom: 0;
    height: 2em;
  }
  
  .image-overlay.rounded {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    max-width: 50%;
    max-height: 50%;
  }


  .image-container .overlay-content h2 {
    margin: 0;
    font-size: small;
  }

}
/* ********* new styles for image overlay caousel */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 14, 32, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

#overlay img {
  max-width: 100%;
  max-height: 100%;
}

#prev, #next, #close {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  padding: 0.3em;
  cursor: pointer;
  color:#fff;
  font-size: xx-large;
}

#prev {
  left: 10px;
}
#close {
  right: 10px;
  top: 50px;
  padding-top: 0;
  padding-bottom: 0;
}

#next {
  right: 10px;
}


/* Override or reset styles for img if div.col-auto has .collapsed */
div.col-auto:hover img{
  filter: none !important;
}
/* Style for img inside div.col-auto that is not explicitly .collapsed */
div.col-auto:not(.collapsed) img{
  filter: none !important;
}
div.col-auto:not(.collapsed){
  background-color: rgb(248, 249, 250)!important;
  border: 1px solid #ccc; 
  border-bottom: none; 
  position: relative; bottom: -1px;
}
.collapsing {transition:none;}
div#details>div{border: 1px solid #ccc;}