:root {
  --color-primary: #295fb7;
  --primary-light: #ecf4fd;
  --primary-dark: #25356a;

  /* --color-primary: #636b2f;
  --primary-light: #bac095;
  --primary-dark: #3d4127; */

  /* --color-primary: #2E6F40;
  --primary-light: #CFFFDC;
  --primary-dark: #2a5035; */


  /* --color-primary: #5C5C99;
  --primary-light: #CCCCFF;
  --primary-dark: #292966; */

  /* --color-primary: #3EBB9E;
  --primary-light: #73E6CB;
  --primary-dark: #00674F; */

  --text-white: white;
  --text-dark: black;
  --grayColor: lightgray;
  --gradient: linear-gradient(
    0deg,
    var(--color-primary) 0%,
    var(--primary-dark) 90%
  );
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  overflow-x: hidden;
}

.navbar-brand,
.footerBrand,
.navbar-nav .nav-link:hover,
.footerSection .nav-link:hover,
.servicesContentDiv h2,
.collectionContentDiv h2,
.featureContentDiv h2,
.formDiv h2,
.cardContentDiv h3,
.formDiv h2 {
  color: var(--primary-dark);
}

.navbar-brand:hover {
  color: var(--primary-dark);
}

.btn-primary,
.navBtn,
.featureContentDiv button {
  text-transform: uppercase;
}

.featureCardDiv:hover .featureContentDiv,
.btn-primary,
.navBtn,
.featureContentDiv button {
  cursor: pointer;
}

.btn-primary:hover,
.navBtn:hover,
.featureContentDiv button:hover {
  background-color: var(--primary-dark);
}

.navBtn,
.featureContentDiv button {
  background-color: transparent;
  padding: 8px 10px;
}

.signInBtn,
.featureContentDiv button,
.btn-primary {
  background-color: var(--color-primary);
}

.signInBtn,
.featureContentDiv button,
.heroSection,
.servicesCardSection .card.active .cardContentDiv,
.servicesCardSection .card.active .cardContentDiv h3,
.collectionCardSection .active .card,
.featureCardDiv:hover .featureContentDiv,
.contactSection .row,
.navBtn:hover {
  color: var(--text-white);
}

.heroRoundDiv p,
.heroCardsDiv,
.heroRoundDiv {
  color: var(--text-dark);
}

.signInBtn,
.featureContentDiv button {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.heroSection .formFind {
  border-right: 1px solid var(--grayColor);
}

.heroBgDiv {
  background-image: url("./assets/Image_Hero.png");
  background-repeat: no-repeat;
  background-position: right top 40px;
  background-size: contain;
  width: 80%;
}

.contentDiv {
  margin: 80px 0;
  width: 70%;
}

.contentDiv h1 {
  font-size: 54px;
}

.heroCardsDiv {
  padding: 20px 0;
}

.heroCardsDiv p,
.heroRoundDiv p {
  margin-bottom: 0;
}

.heroRoundDiv {
  border-radius: 50%;
  padding: 12px;
}

.heroRoundDiv i {
  font-size: 22px;
}

.servicesSection,
.featureSection,
.collectionCardSection .card {
  background-color: var(--primary-light);
}

.card.active,
.collectionCardSection .active .card,
.cardIconDiv img,
.heroSection {
  background: var(--gradient);
}

.collectionCardSection .card,
.navBtn,
.featureContentDiv button,
.btn-primary {
  border: none;
}

.cardsIconDiv {
  padding: 10px;
  border-radius: 50%;
}

.cardIconDiv img {
  width: 100px;
  height: 100px;
  object-fit: none;
  padding: 10px;
  border-radius: 50%;
}

.card.active .cardIconDiv img {
  background: none;
}

.heroCardsDiv,
.heroRoundDiv,
.card.active .cardIconDiv img {
  background-color: var(--text-white);
}

.cardContentDiv h3,
.cardContentDiv p,
.cardIconDiv,
.servicesContentDiv h2,
.collectionContentDiv h2,
.featureContentDiv h2,
.formDiv h2 {
  text-align: center;
}

.servicesCardSection .card {
  flex: 1 1 200px;
  min-width: 200px;
}

.featureCardDiv:hover .featureContentDiv {
  animation: fadeInBottom 0.9s linear 0s 1 normal forwards;
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.329);
}

@keyframes fadeInBottom {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.contactSection {
  background-image: url("./assets/r-architecture-KQPEhYweLrQ-unsplash\ 2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.backdropDiv {
  background-color: rgba(0, 0, 0, 0.4);
}

.headingDiv h2,
.servicesContentDiv h2,
.collectionContentDiv h2,
.featureContentDiv h2,
.formDiv h2 {
  font-weight: bolder;
  font-size: 42px;
}

.contactInfoDiv h6,
.socialInfoDiv h6 {
  font-size: 24px;
  font-weight: bold;
}

.contactInfoDiv ul,
.socialInfoDiv ul {
  list-style-type: none;
}

.contactInfoDiv li,
.socialInfoDiv li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contactInfoDiv li p,
.socialInfoDiv li p {
  margin: 0;
}

.formDiv {
  background-color: white;
}

.form-control,
.form-control:active,
.form-control:focus {
  background-color: var(--grayColor);
}

@media (min-width: 1400px) {
  .heroSection {
    height: 700px;
  }

  .contentDiv {
    margin: 0;
  }
}

@media (max-width: 768px) {
  .heroBgDiv {
    background-size: cover;
  }

  .contentDiv,
  .heroBgDiv {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .heroSection .contentDiv h1,
  .heroSection .contentDiv p {
    text-align: center;
  }

  .heroSection .formFind {
    border-right: 0;
  }
}