.open-sans-normal {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;

}



/** nav style **/


header {
  max-width: 1440px;
  background-image: url(../Assets/Hero-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0 auto;
  margin-bottom: 50px;
}

nav {
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  margin-top: 0px;
  margin-left: 90px;
  margin-right: 90px;


}

.nav-title {
  padding-top: 50px;
  padding-bottom: 50px;
  font-weight: 34px;
  font-size: 25px;
  font-family: inherit;
  color: rgb(39, 39, 255);
}



/** shared style **/


.btn-primary {
  color: rgb(255, 255, 255);
  border: none;
  cursor: pointer;
  background-color: blue;
  font-weight: bold;
  font-size: 20px;
  border-radius: 10px;
  padding: 10px 30px;
}

.btn-primary:hover {
  background-color: rgb(72, 64, 99);
  color: rgb(255, 0, 0);
  border: 2px solid rgb(255, 123, 0);
  border-radius: 10px;
  padding: 10px 30px;
}


/** banner style **/


.banner-section {
  display: flex;
  justify-content: center;
  max-width: 905px;
  text-align: center;
  align-items: center;

}

.banner-title {
  font-size: 40px;
  font-weight: bold;
  max-width: 600px;
  margin-left: 355px;
}

.header-button {
  margin-left: 538px;
  margin-bottom: 152px;
  height: 105px;
}



/**hero section style **/


.hero-section {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  max-width: 1140px;
  text-align: center;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 116px;
}

.hero-title {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 10px;

}

.hero-text {
  max-width: 417px;
  text-align: left;
}

.hero-img {
  width: 403px;
  height: 328px;
  border: none;
  border-radius: 50px;
}

.hero-discrib {
  font-size: 24px;

}



/** Productive Users style **/


.prodact-user {
  max-width: 1120px;
  background-color: #4d47ff3d;
  margin: 0 auto;
  border: none;
  border-radius: 15px;
}

.prodact-title {
  font-size: 35px;
  font-weight: bold;
  text-align: center;
  padding-top: 50px;
  margin-bottom: 5px;
}

.prodact-controller {
  display: flex;
  gap: 90px;
  align-items: center;
  margin: 0 auto;
  margin-left: 250px;
  text-align: center;
  margin-bottom: 100px;
}

.prodact-sab-title {
  font-size: 80px;
  font-weight: bold;
  text-align: center;
  align-items: center;
  color: blue;
  margin: 20px auto 5px;
}

.prodact-discribtion {
  text-align: left;
  margin: 0 auto 50px;
  text-align: center;
  font-size: 22px;
}

#extra-style {
  text-align: center;
  align-items: center;
  color: rgb(2, 6, 253);
  padding-top: 1px;
}

#rate {
  text-align: right;
}



/** Reviewer Profile Style **/


.users-reviewer {
  max-width: 1240px;
  display: flex;
  justify-content: space-around;
  gap: 0px;
  margin: 0 auto;
  margin-bottom: 130px;
}

.card-1 {
  max-width: 250px;
  text-align: left;
  align-items: center;
  border: none;
  border-radius: 15px;
  background-color: rgba(216, 226, 206, 0.226);
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-right: 50px;

}

.card-2 {
  max-width: 250px;
  text-align: left;
  align-items: center;
  border: none;
  border-radius: 15px;
  background-color: rgba(211, 221, 202, 0.226);
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-right: 50px;
}

.card-3 {
  max-width: 250px;
  text-align: left;
  align-items: center;
  border-radius: 15px;
  background-color: rgba(204, 216, 193, 0.226);
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-right: 50px;
}

.card-profaile {
  display: flex;
  gap: 20px;
  padding-left: 10px;
}

#profaile-photo-one {
  max-width: 40px;
  max-height: 40px;
  border: 2px solid blue;
  border-radius: 100%;
  text-align: center;
  align-items: center;
}

#profaile-photo-two {
  max-width: 40px;
  max-height: 40px;
  border: 2px solid blue;
  border-radius: 100%;
  text-align: center;
  align-items: center;
}

#profaile-photo-thire {
  max-width: 40px;
  max-height: 40px;
  border: 2px solid blue;
  border-radius: 100%;
  text-align: center;
  align-items: center;
  margin-bottom: 20px;

}

.last-card {
  margin-top: 4px;
}

span {
  font-weight: bold;
  font-size: 18px;
}

.card-icon {
  padding-top: 10px;
  padding-left: 10px;
}

.card-text {
  padding-top: 10px;
  padding-left: 10px;
  max-width: 200px;
}

.reviewer-title {
  text-align: center;
  align-items: center;
  margin-bottom: 50px;
  font-size: 42px;
  font-weight: bold;
}


/** Template Section Style **/


.template-photo {
  max-width: 840px;
  max-height: 365px;
  margin: 0 auto;
}

#template-photo-style {
  border: none;
  border-radius: 40px;
}

.template-text {
  margin-left: 190px;
  margin-bottom: 20px;
}

.template-button {
  margin-left: 110px;
}

.template-title {
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 20px;
}

.template-discribtion {
  font-size: 15px;
  margin-left: 35px;
}


/** From Section Stlye **/


.from-section {
  max-width: 800px;
  margin-top: 300px;
  display: flex;
  justify-content: space-between;
  text-align: left;
  align-items: center;
  margin-left: 260px;



}

.from-title {
  max-width: 528px;
}

.from-title-text {
  font-size: 97px;
  font-weight: bold;
  margin-left: 0;
}

.input-email {
  padding: 10px 20px;
  padding-right: 160px;
  border: 2px solid rgba(53, 51, 51, 0.192);
  border-radius: 10px;
}

.input-name {
  padding: 10px 20px;
  padding-right: 160px;
  border: 2px solid rgba(53, 51, 51, 0.192);
  border-radius: 10px;
}

.input-text {
  padding: 10px 20px;
  border: 2px solid rgba(53, 51, 51, 0.192);
  border-radius: 10px;

}

#from-button-style {
  padding-left: 120px;
  padding-right: 120px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  text-align: center;
  align-items: center;
  white-space: nowrap;
}


/** footer Section Style **/


.footer-item {
  max-width: 454px;
  margin: 0 auto;
  text-align: left;
  align-items: center;
  padding: 100px 50px 100px 50px;

}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

.anchor-items {
  display: flex;
  margin-top: 8px;
  color: white;
}

.footer-section {
  background-color: rgba(173, 224, 224, 0.288);
  max-width: 1450px;
}

.logo-name {
  font-size: 90px;
  font-family: inherit;
  margin-bottom: 5px;
  color: blue;
  margin-left: 75px;
}

.footer-dic {
  margin-top: 5px;
  margin-bottom: 10px;
}