/* global */

a {
  text-decoration: none;
  color: #0b429d;
}

.body-wrapper {
  display: flex;
}

/* *{outline: 1px solid rebeccapurple;} */

/* Sidebar nav */
.side-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  height: 100vh;
  top: 0;
  position: sticky;
}

.logo {
  height: 10dvh;
}

.border-custom {
  border-right: solid;
  background-color: white;
}

.icon-display {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;
}

.nav-wrapper {
  display: flex;
}

.nav-name {
  display: none;
}


/* hero section */
.main-landing {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.jp-photo {
  height: 60dvh;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 3rem;
}




/* Review, portfolio, pricing, contact Section */
.reviews,
.portfolio,
.contact,
.pricing,
.brand {
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* portfolio images */

.portfolio-img {
  height: 450px;
  width: 350px;
  object-fit: cover;
  object-position: top;
}



/* review cards */
.review-card {
  height: fit-content;
}

/* brands worked with */
.eagle-vision {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
}

.eagle-vision-logo {
  max-height: 200px;
  width: 200px;
}

/* Contact sectio */

.contact-info {
  font-size: 1.75rem;
}

/* footer */

.e-man:hover {
  text-decoration: underline;
}

/* fonts and bootstrap adjustments */
.quicksand-font {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

.cutive-mono-regular {
  font-family: "Cutive Mono", monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-decoration: underline;
}

.cutive-mono-regular-no-underline {
  font-family: "Cutive Mono", monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.abril-fatface-regular {
  font-family: "Abril Fatface", serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.btn-outline-info {
  --bs-btn-color: #0b429d;
  --bs-btn-border-color: #0b429d;
  --bs-btn-hover-color: #ffff;
  --bs-btn-hover-bg: #0b429d;
  --bs-btn-hover-border-color: #0b429d;
  --bs-btn-focus-shadow-rgb: 13, 202, 240;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #0b429d;
  --bs-btn-active-border-color: #0b429d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0b429d;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0b429d;
  --bs-gradient: linear;
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0b429d;
  --bs-btn-border-color: #0b429d;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffff;
  --bs-btn-hover-border-color: #0b429d;
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #0b429d;
  --bs-btn-active-border-color: #0b429d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #0dcaf0;
  --bs-btn-disabled-border-color: #0dcaf0;
}

/* media queries */

@media screen AND (max-width: 1024px) {

  /* hero */

  .jp-photo {
    height: 45dvh;
  }

  /* brands */

  .eagle-vision {
    display: block;
  }
}

@media screen AND (max-width: 820px) {

  /* nav */
  .logo {
    height: 8dvh;
  }

  /* hero */

  .jp-photo {
    height: 45dvh;
  }


  /* portfolio section */

  .portfolio-img {
    margin-top: 15px;
  }

  /* reviews section */

  .review-card {
    margin-top: 15px;
  }

  /* brands */

  .eagle-vision {
    display: block;
  }
}

@media screen AND (max-width: 425px) {

  /* global/body */

  .body-wrapper {
    display: unset;
    overflow-x: hidden;
  }

  /* nav */
  .side-bar {
    flex-direction: row;
    padding-left: 10px;
    padding-right: 10px;
    height: 10dvh;
    position: unset;
  }

  .logo {
    height: 8dvh;
  }

  .border-custom {
    border-right: hidden;
    position: sticky;
    top: 0;
  }

  .contact-icons {
    gap: 10px;
  }

  .icon-display {
    font-size: 1.56rem;
    font-weight: 300;
    line-height: 1.2;
  }

  .nav-name {
    display: inline;
    padding: 0em .1em 0em
  }

  .body-name {
    display: none;
  }

  .nav-wrapper {
    display: unset;
  }

  /* hero */

  .hero-text {
    padding: 1rem;
  }

  .jp-photo {
    height: 30dvh;
  }



  /* portfolio */

  .portfolio-img {
    height: 40dvh;
    width: 25dvh;
    object-fit: cover;
    object-position: top;
  }

  .eagle-vision {
    display: block;
    text-align: center;
    gap: 1rem;
  }

  /* contact */

  .contact-info {
    font-size: 1rem;
  }
}