@import url("./fonts.css");
@import url("./grid.css");
/*__________________________ Global _____________________________*/
.font {
  font-family: "Roboto", sans-serif;
}

.gray {
  color: #455A64;
}

.gr-ay {
  color: #697077;
}

.lighter-gray {
  color: rgba(11, 11, 11, 0.7);
}

.light-gray {
  color: rgba(69, 90, 100, 0.6);
}

.mediumgray {
  color: rgba(0, 0, 0, 0.25);
}

.medium-gray {
  color: #BEBFBF;
}

.coolgray {
  color: #DDE1E6;
}

.cool-gray {
  color: #F2F4F8;
}

.heavygray {
  color: #21272A;
}

.rgba-gray {
  color: rgba(223, 217, 217, 0.8);
}

.black {
  color: #000;
}

.white {
  color: #FFF;
}

.light-black {
  color: #313131;
}

/*_________________ H E A D E R _____________________*/
header {
  background-color: #FFF;
  border-bottom: 1px solid #DDE1E6;
  /*------- dropdown menu -------*/
  /*--- Mobile side menu ----*/
}
header .row {
  min-height: 80px;
}
header .nav-list .list-item a {
  font-size: 16px;
  font-weight: 500;
}
header .nav-list .list-item a .active {
  font-size: 16px;
  font-weight: 500;
}
header .nav-list .list-item a:hover {
  color: #455A64;
}
header .nav-list .list-item a.active:hover {
  color: rgba(69, 90, 100, 0.6);
}
header .buttons .outline-a {
  font-size: 16px;
  font-weight: 500;
  height: 48px;
  min-width: 115px;
  border: 2px solid #455A64;
  transition: all ease-in-out 0.3s;
}
header .buttons .outline-a:hover {
  background-color: #455A64;
  color: #FFF;
}
header .buttons .solid-a {
  font-size: 16px;
  font-weight: 500;
  height: 48px;
  min-width: 115px;
  border: 2px solid #455A64;
  background-color: #455A64;
  transition: all ease-in-out 0.3s;
}
header .buttons .solid-a:hover {
  background-color: transparent;
  color: #455A64;
}
header .main-menu {
  position: relative;
}
header .main-menu .sub-menu {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  box-shadow: 2px 0px 10px 0px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  overflow: hidden;
  transition: all ease-in-out 0.3s;
}
header .main-menu .sub-menu li a {
  color: #000;
  font-weight: 400;
  font-size: 11px;
  background-color: #FFF;
  min-width: 135px;
  min-height: 30px;
  display: block;
  padding: 10px;
  border-bottom: 1px solid #DDE1E6;
}
header .main-menu .sub-menu li a:hover {
  color: #000;
  background-color: #DDE1E6;
}
header .main-menu .sub-menu li:last-child a {
  border: none;
}
header .main-menu:hover .sub-menu {
  visibility: visible;
}
header .overlay {
  background-color: rgba(43, 43, 43, 0.5215686275);
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  visibility: hidden;
  opacity: 0.5;
  transition: all ease-in-out 0.75s;
}
header .sidenav {
  background-color: #FFF;
  position: fixed;
  top: 0;
  padding: 24px;
  height: 100vh;
  width: 250px;
  right: -250px;
  z-index: 100;
  padding: 24px;
  opacity: 1;
  transition: all ease-in-out 0.3s;
}
header .sidenav .close-btn {
  border: 1px solid #455A64;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all ease-in-out 0.3s;
  position: absolute;
  right: 25px;
  top: 25px;
}
header .sidenav .close-btn:hover {
  background-color: rgba(69, 90, 100, 0.6);
}
header label {
  cursor: pointer;
}
header #sidebar-active {
  display: none;
}
header #sidebar-active:checked + .overlay {
  visibility: visible;
  opacity: 1;
}
header #sidebar-active:checked ~ .sidenav {
  right: 0;
}
@media (max-width: 899px) {
  header .nav-bar {
    border-bottom: 1px solid #DDE1E6;
    padding-top: 10px;
    padding-bottom: 210px;
  }
}

/*_________________ H E R O  S E C T I O N _____________________*/
.hero-section .hero-items .title-hero {
  font-size: 54px;
  font-weight: 400;
  line-height: 59px;
  padding-top: 44px;
  padding-bottom: 25px;
}
.hero-section .hero-items .title-hero::first-letter {
  cursor: pointer;
  color: #000;
}
.hero-section .hero-items .hero-desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  padding-bottom: 56px;
}
.hero-section .hero-items .hero-desc::first-letter {
  color: #000;
  cursor: pointer;
  font-style: bold;
}
.hero-section .hero-buttons .solid-butn {
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  background-color: #455A64;
  width: 100%;
  height: 56px;
  padding: 16px 56px;
  transition: all ease-in-out 0.3s;
}
.hero-section .hero-buttons .solid-butn:hover {
  color: #455A64;
  background-color: #FFF;
  border: 2px solid #455A64;
}
.hero-section .hero-buttons .outline-butn {
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  background-color: rgba(223, 217, 217, 0.8);
  width: 100%;
  height: 56px;
  padding: 16px 56px;
  transition: all ease-in-out 0.3s;
}
.hero-section .hero-buttons .outline-butn:hover {
  color: #455A64;
  background-color: #FFF;
  border: 2px solid #455A64;
}
@media (max-width: 1255px) {
  .hero-section .row {
    justify-content: center;
  }
  .hero-section .hero-buttons {
    justify-content: center;
  }
  .hero-section .title-hero {
    text-align: center;
  }
  .hero-section .hero-desc {
    text-align: center;
  }
}
@media (max-width: 487px) {
  .hero-section .hero-buttons {
    flex-direction: column;
  }
}
@media (min-width: 786px) {
  .hero-section .hero-buttons .solid-butn {
    max-width: 179px;
    height: 56px;
  }
  .hero-section .hero-buttons .outline-butn {
    max-width: 187px;
    height: 56px;
  }
}
.hero-section .hero-img img {
  width: 100%;
  height: 100%;
}
@media (max-width: 1255px) {
  .hero-section .hero-img img {
    margin-top: 80px;
  }
}

/*_______________  A B O U T  U S  S E C T I O N  ________________________*/
.about-us-section {
  background-color: #FFF;
  border-bottom: 1px solid #DDE1E6;
}
.about-us-section .title-about-us {
  font-size: 42px;
  font-weight: 400;
  line-height: 46px;
  padding-top: 124px;
  padding-bottom: 20px;
}
.about-us-section .desc-about-us {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  padding-bottom: 32px;
}
.about-us-section .desc-about-us::first-letter {
  color: #000;
  font-style: bold;
  font-size: large;
}
.about-us-section .items-about-us-section {
  width: 100%;
  min-height: 80px;
  justify-content: center;
  background-color: #FFF;
  border: 1px solid #DDE1E6;
  padding: 16px;
  margin-bottom: 40px;
  transition: all ease-in-out 0.3s;
}
.about-us-section .items-about-us-section:hover {
  border: 1px solid #455A64;
  cursor: pointer;
}
.about-us-section .items-about-us-section .about-us-feedback .title-about-us-feedback {
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
}
.about-us-section .items-about-us-section .about-us-feedback .desc-about-us-feedback {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}
@media (max-width: 767px) {
  .about-us-section .row {
    text-align: center;
  }
}
@media (min-width: 1110px) {
  .about-us-section .items-about-us-section {
    margin-bottom: 80px;
    max-width: 302px;
    min-height: 80px;
    justify-content: flex-start;
  }
}
@media (min-width: 767px) and (max-width: 1109px) {
  .about-us-section .about-us-div {
    width: 50%;
  }
}

/*_______________  C L I E N T  S U C C E S S   S E C T I O N  __________________*/
.client-success-section {
  background-color: #F2F4F8;
}
.client-success-section .span {
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
  padding-top: 80px;
  padding-bottom: 8px;
  display: block;
}
.client-success-section .title-client-success {
  font-size: 42px;
  font-weight: 700;
  line-height: 46px;
  padding-bottom: 32px;
}
.client-success-section .items-client-success {
  max-width: 416px;
  min-height: 350px;
  padding: 24px;
  border: 1px solid #DDE1E6;
  background-color: #FFF;
  transition: all ease-in-out 0.3s;
  margin-bottom: 32px;
}
.client-success-section .items-client-success:hover {
  border: 1px solid #21272A;
  cursor: pointer;
}
.client-success-section .items-client-success .top-content-client {
  padding-top: 24px;
  padding-bottom: 16px;
}
.client-success-section .items-client-success .top-content-client h4 {
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
}
.client-success-section .items-client-success .bottom-content-client .desc-bottom-client {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  padding-top: 16px;
  padding-bottom: 32px;
}
.client-success-section .items-client-success .bottom-content-client img {
  width: 48px;
  height: 48px;
}
.client-success-section .items-client-success .bottom-content-client h4 {
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  padding-top: 16px;
}
.client-success-section .items-client-success .bottom-content-client p {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
}
@media (max-width: 1079px) {
  .client-success-section .center-div {
    display: flex;
    justify-content: center;
  }
}

/*_______________  R E C E N T L Y  A D E D D   S E C T I O N  __________________*/
.recently-added-section .title-recently-added {
  padding: 32px 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 35px;
}
.recently-added-section .desc-recently-added {
  padding: 32px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 17px;
  white-space: nowrap;
}
.recently-added-section .desc-recently-added:hover {
  cursor: pointer;
  color: #21272A;
}
.recently-added-section svg:hover {
  cursor: pointer;
  transform: rotate(90deg);
}

@media (max-width: 900px) {
  .title-recently-added {
    font-size: 15px;
  }
  .desc-arrow {
    flex-wrap: nowrap;
  }
}
.img {
  width: 100%;
  display: block;
  border: 1px solid transparent;
}
.img:hover {
  border: 1px solid #455A64;
  cursor: pointer;
}

.top-contents h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
  padding-top: 16px;
  padding-bottom: 8px;
}
.top-contents p {
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
  padding-bottom: 25px;
}

.bottom-contents {
  padding-bottom: 24px;
}
.bottom-contents span {
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
}
.bottom-contents p {
  font-size: 18px;
  font-weight: 400;
  line-height: 19px;
}

@media (max-width: 1200px) {
  .bottom-contents {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  h3 {
    text-align: center;
  }
  p {
    text-align: center;
  }
}
.recently-added-butn {
  padding-bottom: 16px;
}
.recently-added-butn .outline-butn {
  width: 100%;
  height: 48px;
  font-size: 18px;
  font-weight: 700;
  line-height: 19px;
  border: 1px solid #455A64;
  transition: all ease-in-out 0.3s;
}
.recently-added-butn .outline-butn:hover {
  color: #FFF;
  background-color: #455A64;
}
@media (min-width: 900px) {
  .recently-added-butn .outline-butn {
    max-width: 305px;
    height: 48px;
  }
}
@media (max-width: 767px) {
  .recently-added-butn .row {
    align-items: center;
    justify-content: center;
  }
  .recently-added-butn .top-contents {
    text-align: center;
  }
  .recently-added-butn .bottom-contents {
    align-items: center;
  }
  .recently-added-butn .bottom-contents .span-bottom-contents {
    gap: 30px;
    display: flex;
  }
  .recently-added-butn .recently-added-butn {
    text-align: center;
  }
}

/*________________ C O N T A C T   U S   S E C T I O N _______________*/
.contact-us-section {
  background-color: #FFF;
}
.contact-us-section h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 32px;
  padding-top: 54px;
  padding-bottom: 8px;
}
.contact-us-section p {
  font-size: 20px;
  font-weight: 400;
  line-height: 22px;
  padding-bottom: 32px;
}
.contact-us-section .buttons {
  margin-bottom: 32px;
}
.contact-us-section .buttons .solid-butn {
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  width: 100%;
  height: 56px;
  border: 2px solid #455A64;
  background-color: #455A64;
  padding: 16px;
  transition: all ease-in-out 0.3s;
}
.contact-us-section .buttons .solid-butn:hover {
  color: #455A64;
  background-color: #FFF;
}
.contact-us-section .buttons .outline-butn {
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  width: 100%;
  height: 56px;
  border: 2px solid #455A64;
  padding: 16px;
  transition: all ease-in-out 0.3s;
}
.contact-us-section .buttons .outline-butn:hover {
  color: #FFF;
  background-color: #455A64;
}
@media (min-width: 786px) {
  .contact-us-section .buttons .solid-butn {
    max-width: 167px;
    height: 56px;
  }
  .contact-us-section .buttons .outline-butn {
    max-width: 165px;
    height: 56px;
  }
}
@media (max-width: 478px) {
  .contact-us-section .buttons {
    flex-direction: column;
  }
}
@media (max-width: 1300px) {
  .contact-us-section .items-contact-us {
    text-align: center;
  }
  .contact-us-section .buttons {
    justify-content: center;
  }
}

/*_________________ S U B S C R I B E    N E W   S E C T I O N _____________________*/
.subscribe-new-section {
  background-color: #F2F4F8;
  padding: 80px 0px;
}
.subscribe-new-section .items-subscribe h2 {
  font-size: 42px;
  font-weight: 700;
  line-height: 46px;
  padding-bottom: 12px;
}
.subscribe-new-section .items-subscribe p {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
}
.subscribe-new-section .form-items input {
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  width: 100%;
  height: 56px;
  padding: 16px;
  border: 0.6px solid #21272A;
}
.subscribe-new-section .form-items input:hover {
  border: 0.6px solid #21272A;
  cursor: pointer;
}
.subscribe-new-section .form-items button {
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  width: 100%;
  height: 56px;
  padding: 16px;
  background-color: #455A64;
}
.subscribe-new-section .form-items button:hover {
  color: #455A64;
  background-color: #FFF;
  border: 0.6px solid #21272A;
}
@media (min-width: 786px) {
  .subscribe-new-section .form-items input {
    max-width: 370px;
    height: 56px;
    justify-content: center;
    display: flex;
  }
  .subscribe-new-section .form-items button {
    max-width: 126px;
    height: 56px;
    justify-content: center;
    display: flex;
  }
}
@media (max-width: 786px) {
  .subscribe-new-section .form-items button {
    justify-content: center;
  }
}
@media (max-width: 1300px) {
  .subscribe-new-section .row {
    flex-direction: column;
    align-items: center;
  }
  .subscribe-new-section form {
    justify-content: center;
  }
  .subscribe-new-section .items-subscribe h2 {
    text-align: center;
  }
  .subscribe-new-section .items-subscribe p {
    text-align: center;
  }
}
@media (min-width: 1300px) {
  .subscribe-new-section .row {
    align-items: center;
  }
}
@media (max-width: 700px) {
  .subscribe-new-section .form-items {
    flex-direction: column;
    white-space: nowrap;
  }
  .subscribe-new-section .items-subscribe h2 {
    text-align: center;
  }
  .subscribe-new-section p {
    text-align: center;
  }
}

/*_________________ F O O T E R  _____________________*/
.footer {
  background-color: #455A64;
  padding-top: 24px;
  padding-bottom: 48px;
}
.footer .footer-list-item li a {
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
}
.footer .footer-list-item li a:hover {
  color: #BEBFBF;
}
.footer p {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  padding-top: 48px;
}
.footer p:hover {
  cursor: pointer;
  color: #BEBFBF;
}
.footer ul li a img:hover {
  transform: scale(1.1);
}
@media (min-width: 900px) and (max-width: 1200px) {
  .footer .row {
    margin-top: 45px;
  }
}
@media (max-width: 900px) {
  .footer .ul-icons {
    display: flex;
    justify-content: center;
  }
  .footer .footer-logo {
    width: auto;
    margin: auto;
    display: block;
  }
}
@media (max-width: 1200px) {
  .footer .ul-footer-list-item {
    display: none;
  }
  .footer p {
    padding-top: 0px;
  }
}
.footer .media-center {
  padding: 0px 25px;
}

/*# sourceMappingURL=style.css.map */