@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
  margin: 0;
  padding: 0;
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center; /* Center text globally */
    background-color: red;
    min-width: 100%;
    min-height: 100%;
    float: left;

    --primary-color: #E02A1F;
  }

  a {
    text-decoration: none;
    color: #FFF;
  }
  header, footer {
    font-family: 'Poppins', sans-serif;
    background-color: var(--primary-color);
    color: #030303;
    padding: 50px;
  }
  
  .container {
    display: flex;
    justify-content: space-around;
    padding: 20px;
  }
  
  .column {
    flex: 1;
    padding: 20px;
  }
  
  /* Additional styling */
  h1, h2, p {
    margin: 0;
  }
  .img_logo {
position: relative;
float: left;
left: -50px;
margin-top: -85px;
width: 250px;
height: auto;
  }



  /* NAVBAR STYLE */
  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }

  #header {
    display: flex;
    background-color: #2C2C2C;
    color: #FFF;
    justify-content:space-between;
    gap: 32px;
    padding-left: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 24px;
  }

  #menuOptions {
    display: flex;
    gap: 32px;
    align-items: center;
    
  }

  #home,
  #about-us,
  #services,
  #testimonials,
  #gallery,
  #why-choose-us{
    color: #B8B7B7;
  }

  #home {
    color: #FFF;
  }

  #contactBtn {
    display: flex;
    height: 32px;
    padding: 0px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background-color: var(--primary-color);
    border-width: 0px;
    justify-self: flex-end;
    align-self: flex-end;
    color: #FFF;
    text-decoration: none;
  }

  #contactBtn:hover {
    background-color: #545454;
  }
  #contactBtn:active {
    background-color: var(--primary-color);
  }

  #innerTitle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #titleImage {
    width: 393px;
    height: 393px;
  }

  #title {
    color: #FFF;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 60px */
    letter-spacing: -0.88px;
    width: 590px;
    padding-bottom: 48px;
  }

  #titleContainer {
    background-image: url(images/car_background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background: url(images/car_background.png), lightgrey 50% / cover no-repeat ;

  }

  .background-tint {
    /* background-color: rgba(224, 42, 31, 0.85); */
    background-blend-mode: multiply;
  }

  #serviceContainer,
  #contactUsContainer{
    display: flex;
    justify-content: space-between;
    background: #2C2C2C;
    color: #FFF;
    padding: 40px 80px 80px;
    gap: 12px;
  }

#serviceContainer {
  gap: 150px;
}

  .sectionTitle {
    font-size: 64px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: -1.408px;
    color: #FFF;
  }

  #serviceList {
    display: flex;
    flex-direction: column;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.528px;
    background-color: #2C2C2C;
    flex-grow: 1;
    padding-top: 32px;
  }

  #accordionFlushExample {
    --bs-accordion-btn-icon: "images/plus.svg";

  }

  #first-accordion-button,
  #second-accordion-button {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 36px */
    letter-spacing: -0.528px;
  }

  #first-accordion-button::after,
  #second-accordion-button::after {
    background-image: url("images/plus.svg");
  }

  #first-accordion-button:not(.collapsed)::after,
  #second-accordion-button:not(.collapsed)::after {
    background-image: url("images/minus.svg");
  }

  .accordion-header {
    --bs-accordion-btn-bg: #2C2C2C;
    --bs-accordion-active-bg: #2C2C2C;
    --bs-accordion-color: #FFF;
    --bs-accordion-active-color: #FFF;
  }

  .accordion-body {
    background-color: #2C2C2C;
    color: #FFF;
  }
  .accordion-button {
    background-color: #2C2C2C;
    color: #FFF;
    --bs-accordion-btn-color: #FFF;
  }

  .accordion-body {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .sub-header {
    color: #D8D6D6;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */
    letter-spacing: -0.44px;
  }

  .accordion_paragraph {
    color: #B8B7B7;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: -0.352px;
  }

  #chooseUsContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
    padding-right: 80px;
    padding-left: 80px;
    padding-top: 40px;
    padding-bottom: 80px;
    background-color: #545454;

  }

  #cardContainer {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .card {
    width: 300px;
    height: 300px;
    background-color: #D8D6D6;
    display: flex;
    padding: 16px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 16px;
  }
  
.cardImage {
  width: 40px;
  height: 40px;
  
}

.cardTitle {
  align-self: stretch;
    color:  black;
    font-size: 18px;
    font-weight: bolder;
    line-height: 150%; /* 27px */
    letter-spacing: -0.396px;
    text-align: left;
}

  .cardDescription {
    align-self: stretch;
    color: var(--Gray-5, #545454);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: -0.352px;
    text-align: left;
  }

  #contactUsContainer {
    flex-direction: column;
    text-align: left;
    color: #FFF;
    justify-content: flex-start;
    gap: 48px;
    padding-bottom: 80px;
  }

  #contactUsContentContainer {
    display: flex;
    justify-content: flex-start;
    gap: 120px;
  }

  #contactUsDescription {
  }

  #contactInfoContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 120px;

  }

  .contactInfo {
    display: flex;
    gap: 8px;
  }

  #whoWeAreContainer {
    display: flex;
    background-color: var(--primary-color);
    text-align: left;
    flex-grow: 1;
    flex-wrap: wrap;

  }

  #whoWeAreContentContainer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px;
    color: #FFF;
    max-width: 640px;
    min-width: 300px;
  }

  .bioSection {

  }

  .bioName {
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */
    letter-spacing: -0.44px;
    align-self: stretch;
  }

  .bioDescription {
    color: #FFF;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: -0.352px;
  }

  footer {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #2C2C2C;
    color: #FFF;
  }

  #footerContainer {
    display: flex;
    justify-content: space-around;

  }

  .footerSection {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .footerTitle {
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.396px;
  }

  .footerContent {
    color: #FFF;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
    letter-spacing: -0.308px;
  }

  .b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  }

  .b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
  }

  .bi {
    vertical-align: -.125em;
    fill: currentColor;
  }

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .nav{
    color: #B8B7B7;
  }
  .nav-link{
    color: #B8B7B7
  }
  .nav-item{
    color: #B8B7B7
  }


  .btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
  }

  .bd-mode-toggle {
    z-index: 1500;
  }

  .bd-mode-toggle .dropdown-menu .active .bi {
    display: block !important;
  }

/*@media only screen and (max-width: 950px) {*/
/*  body {*/
/*    background-color: lightblue;*/
/*  }*/
/*}*/


/*Gallery-specific styles*/
#gallery-container {
  background-color: #1B1A17;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 80px 80px;
  gap: 0px;
}

#photo-grid{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-radius: 25px;
  padding: 0px;
  width: fit-content;
  height: fit-content;
}


.gallery-image {
  width: 300px;
  height: 300px;
  margin-top: 24px;
  margin-bottom: 24px;
  margin-right: 22px;
  margin-left: 22px;
}

#lightbox{
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  gap: 24px;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  padding: 24px;
  visibility: hidden;
}

#lightboxImagewButtons {
  max-width: 80vw;
  max-height: 80vh;
}

#closeBtnContainer {
  padding-left: 42px;
  justify-self: flex-start;
  align-self: flex-start;
}

#closeBtn{
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 24px;

}

#lightboxImagewButtons{
  display: flex;
  gap: 110px;
}

#lightboxImage{
  max-width: 80vw;
  max-height: 80vh;
}

.nextBtn{
  background-color: #ffffff60;
  border-radius: 100%;
  width: 32px;
  height: 32px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nextBtn:hover {
  background-color: #ffffff90;
}

.nextBtn:active {
  background-color: #ffffff75;
}

#closeBtn:hover {
  background-color: #ffffff20;
}

.gallery-image:hover {
  transform: translateX(5px) translateY(-2%);
  box-shadow: -21px 21px 94px -2px rgba(224,42,31,0.5);
  -webkit-box-shadow: -21px 21px 94px -2px rgba(224,42,31,0.5);
  -moz-box-shadow: -21px 21px 94px -2px rgba(224,42,31,0.5);

}


@media only screen and (max-width: 950px) and (min-width: 300px)  {
  #serviceContainer {
    flex-direction: column;
    gap: 10px;
  }

  #contactUsContentContainer {
    gap: 10px;
  }
}