@import url('./styles.css');

body {
   font-family: 'Sen', sans-serif;
   background-color: var(--black);
}
#cards-container {
   background-color: var(--black);
}

.bg-grey {
   background-color: var(--dark-grey);
}
.bg-white {
   background-color: var(--white);
}
.bg-blue-primary {
   background-color: var(--blue-primary);
}
.bg-blue-secondary {
   background-color: var(--blue-secondary);
}
.bg-badge {
   background-color: var(--badge-color);
}
.text-white {
   color: var(--white);
}
.text-grey {
   color: var(--light-grey);
}
.text-blue {
   color: var(--blue-primary);
}
.text-blue-third {
   color: var(--blue-third);
}
.width-100 {
   width: 100%;
}
.border-radius {
   border-radius: 1rem;
}
.border-grey, .border-grey:focus, .border-grey:active, .border-grey:hover {
  border: 1px solid var(--light-grey);
}

.border-bottom-grey {
  border-bottom: 1px solid var(--light-grey);
}
.border-bottom-white {
   border-bottom: 1px solid var(--white);
 }
 .border-left {
    border-left: 2px solid var(--blue-primary);
 }
 ul {
    list-style: none;
 }
 ul,li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
 }
 li img {
    margin-right: 1rem;
 }

 /* make accordion header blue and text white when open */
 .accordion-button:not(.collapsed) {
   background-color: var(--blue-secondary);
   color: var(--white);
}
/* remove accordion button outline */
.accordion-button:focus {
   box-shadow: none;
   border-color: rgba(0,0,0,.125);
}

span.badge, .accordion-button {
   transition: 0.4s forwards all;
}
/* make badge number white and background blue when accordion open */
.accordion-button:not(.collapsed) span.badge {
  background-color: var(--blue-primary);
  color: var(--white) !important;
}

.margin-left-lg {
   margin-left: 4.5rem;
}
.accordion-padding {
   padding-left: 2rem;
}

/* give accordion border radius */

.accordion-flush .accordion-item .accordion-button {
   border-radius: 1rem 1rem 0 0;
}
.accordion-flush .accordion-item .accordion-body {
   border-radius: 0 0 1rem 1rem;
}

.image-container {
  height: 35rem;
  overflow: hidden;
  width: 25rem;
}
.image {
   width: 100%;
   object-fit: none;
   object-position: 180% 120%;
} 
#header {
   width: 100%;
   margin: 0;
}
#headerLeft {
   margin-right: -2px;
}


@media only screen and (max-width: 414px) {
   #headerLeft {
      padding-left: 30px;
    }
 }
 
 @media only screen and (max-width: 300px) {
   #headerLeft {
     padding-left: 20px;
   }
 }
 
 /*HAMBURGER STYLE END*/