@import url('fonts.css');

@import url('utility.css');

@import url('components/navbar.css');

@import url('components/navbar_menu.css');

@import url('components/tile_background.css');

@import url('components/signature.css');

@import url('components/login_status_bar.css');


/* Home css ---------------------------------------------------------------- */

#home-container {
  width: 100%;
  /* height is set dynamically via js */
  max-width: var(--system-max-width);
  
  margin: auto;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  position: relative;

  background-color: var(--system-white);

  overflow-x: hidden;
}

.home-page-section-container {
  width: 100%;
  /* height: 400px; */

  padding-top: 1rem;
  padding-bottom: 1rem;

  padding-left: 2rem;
  padding-right: 2rem;
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  z-index: 300;

}

/* For Landscape Orientation -------------------------------------------- */
@media only screen and (orientation: landscape) {
  .home-page-section-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.home-page-section-landscape-reverse {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
}

#home-page-image-container-01 {
  background-image: url('../images/backgrounds/portrait/portrait_450/site_avatar_whitesmoke_450.jpg');
  
  background-size: cover;
}

#home-page-image-container-02 {
  background-image: url('../images/backgrounds/portrait/portrait_450/home_contact_450.jpg');
  background-size: cover;
}

#home-page-image-container-03 {
  background-image: url('../images/backgrounds/portrait/portrait_450/home_report_450.jpg');
  background-size: cover;
}

#home-page-image-container-04 {
  background-image: url('../images/backgrounds/portrait/portrait_450/home_store_450.jpg');
  background-size: cover;
}

#home-page-image-container-05 {
  background-image: url('../images/backgrounds/portrait/portrait_450/home_services_450.jpg');
  background-size: cover;
}

#home-page-image-container-06 {
  background-image: url('../images/backgrounds/portrait/portrait_450/home_magazine_450.jpg');
  background-size: cover;
}

#home-page-image-container-07 {
  background-image: url('../images/backgrounds/portrait/portrait_450/home_register_450.jpg');
  background-size: cover;
}

#home-page-image-container-08 {
  background-image: url('../images/backgrounds/portrait/portrait_450/home_login_450.jpg');
  background-size: cover;
}

.home-page-image-container {
  width: 100%;

  position: relative;

  box-shadow: 0px 0px 8px 1px var(--system-shadow);

  border-radius: 4px;

  overflow: hidden;
}

.home-page-image-glass {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;

  background-image: linear-gradient(-45deg, var(--system-blue), var(--system-white));

  opacity: 0.33;
  /* opacity: 0.25; */
}


.home-page-info-container {
  width: 100%;
}


@media only screen and (orientation: landscape) {
  .home-page-image-container {
    width: 39%;
    /* box-shadow: 0px 0px 8px 1px var(--system-shadow); */
    /* box-shadow: 0px 0px 80px 10px red; */
    filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.1))
  }
  .home-page-info-container {
    width: 61%;

    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.home-page-info-title-container {
  width: 100%;

  margin-top: 2rem;

  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

@media only screen and (orientation: landscape) {
  .home-page-info-title-container {
    margin-top: 0;
  }
}

.home-page-info-title-text {
  color: var(--system-blue);

  font-family: 'Custom-1-Bold';
  font-size: 2rem;
}

.home-page-info-description-container {
  width: 100%;

  padding-left: 1rem;
  padding-right: 1rem;

  margin-top: 1rem;

  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

@media only screen and (orientation: landscape) {
  .home-page-info-description-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}


.home-page-info-description-text {
  color: var(--system-blue);

  font-family: 'Custom-1-SemiBold';
  font-size: 1.4rem;

  direction: rtl;

  text-align: justify;
  text-align: center;
}

.home-page-info-button-container {
  width: fit-content;

  padding-top: 0.5rem;
  padding-bottom: 0.5rem;

  padding-left: 2rem;
  padding-right: 2rem;

  margin: auto;
  margin-top: 2rem;

  position: relative;

  background-color: var(--system-blue);
}

.home-page-button-glass {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;

  background-image: linear-gradient(45deg, var(--system-blue), var(--system-white));

  opacity: 0.33;
}

.home-page-info-button-text {
  color: var(--system-white);

  position: relative;

  font-family: 'Custom-1-SemiBold';
  font-size: 1.6rem;
}

/* Pad div specific to home page */

@media only screen and (orientation: portrait) {
  .pad-div-navbar-height-home {
    height: var(--navbar-height-portrait);
  }
}

@media only screen and (orientation: landscape) {
  .pad-div-navbar-height-home {
    height: calc(var(--navbar-height-landscape) / var(--number-two));
  }
}

/* Slider container --------------------------------------------------- */

#slider-section-container {
  width: 100%;

  padding-left: 2rem;
  padding-right: 2rem;
  
  position: relative;

  display: flex;
  flex-direction: column;

  /* border: 1px solid blue; */

  z-index: 300;

}

#slider-explanation-container {
  width: 100%;

  margin-top: 2rem;

  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (orientation: landscape) {
  #slider-explanation-container {
    margin-top: 0rem;
  }
}

#slider-title-text {
  color: var(--system-blue);
  font-family: 'Custom-1-Bold';
  font-size: 1.75rem;
}


#slider-container {
  width: 100%;
}

@media only screen and (orientation: landscape) {
  #slider-section-container {
    flex-direction: row;
  }

  #slider-explanation-container {
    width: 61%;
  }

  #slider-container {
    width: 39%;
  }

}

#slider-wrapper {
  width: 100%;
  /* test, must be set via js */
  /* height: 15rem; */

  position: relative;

  overflow: hidden;

  /* border: 1px solid red; */
}

.slide-container {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;
  
  padding: 0.25rem;

  background-color: var(--system-blue);

  border-top-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;

  transition: transform;
  transition-timing-function: ease-in;
  transition-duration: var(--system-slider-transition-duration);
}

.slide-wrapper {
  width: 100%;
  height: 100%;

  position: relative;

  /* background-color: white; */

  border-top-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;

}

.slide-box {
  width: 100%;
  height: 100%;

  background-repeat: no-repeat;
  background-size: cover;
}

#slider-navigation-container {
  width: 100%;
  height: 100%;

  padding-left: 1rem;
  padding-right: 1rem;

  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  /* background-color: rgba(245, 245, 245, 0.7); */

  z-index: 320;
}

.slider-navigation-button {
  /* width: 1rem; */
  height: 6rem;
  padding: 0.5rem;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1rem;
  color: var(--system-white);
  font-weight: bolder;

  border-radius: 0.25rem;

  background-color: var(--system-blue);

  opacity: 0.3;

  cursor: pointer;
}

.displace-silde-right {
  transform: translateX(100%);
}

.displace-silde-left {
  transform: translateX(-100%);
}

/* Home certificate slides backgrounds -------------------------- */

#home-slide-box-01 {
  background-image: url('../public/images/home_slides/1_parvaneh_kasb_original.png');
}

#home-slide-box-02 {
  background-image: url('../public/images/home_slides/2_symax_certificate_original.jpg');
}

#home-slide-box-03 {
  background-image: url('../public/images/home_slides/3_design_certificate_original.jpg');
}

#home-slide-box-04 {
  background-image: url('../public/images/home_slides/4_parvaneh_kasb_majazi_original.png');
}

#home-slide-box-05 {
  background-image: url('../public/images/home_slides/5_parvaneh_kasb_screenshot_original.png');
}

#home-slide-box-06 {
  background-image: url('../public/images/home_slides/6_parvaneh_kasb_majazi_screenshot_original.png');
}

#home-slide-box-07 {
  background-image: url('../public/images/home_slides/7_salahiat_peymankari_original.jpg');
}


/* Home page famous customers ----------------------------------------------- */

#home-customers-container {
  width: 100%;

  padding-left: 2rem;
  padding-right: 2rem;

  display: flex;

  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 2rem;
  column-gap: 2rem;

  position: relative;

  z-index: 300;
}

.customer-container {
  /* width and height set via js */

  padding: 0.25rem;

  background-color: var(--system-blue);

  border-top-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.customer-wrapper {
  width: 100%;
  height: 100%;

  background-color: var(--system-white);

  background-repeat: no-repeat;
  background-size: cover;

  border-top-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

#home-customers-title {
  width: 100%;
}

#customers-title-text {
  width: 100%;

  direction: rtl;

  text-align: center;

  color: var(--system-blue);
  font-family: 'Custom-1-Bold';
  font-size: 1.5rem;
}


/* famous customers backgruonds ----------------------------------------- */
#famous-customer-01 {
  background-image: url('../public/images/famous_customers/1_labour_ministry.jpg');
}

#famous-customer-02 {
  background-image: url('../public/images/famous_customers/2_audit.jpg');
}

#famous-customer-03 {
  background-image: url('../public/images/famous_customers/3_heritage.jpg');
}

#famous-customer-04 {
  background-image: url('../public/images/famous_customers/4_insurance.jpg');
}

#famous-customer-05 {
  background-image: url('../public/images/famous_customers/5_lang_inst.jpg');
}


/* Electronic icons -------------------------------------------------------- */

#electronic-icons-container {
  width: 100%;

  padding-left: 2rem;
  padding-right: 2rem;

  display: flex;

  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 2rem;
  column-gap: 2rem;

  position: relative;

  z-index: 300;
}

.electronic-icon-container {
  /* width and height set via js */
  width: 6rem;
  height: 6rem;

  padding: 0.25rem;
  /* padding: 0.125rem; */

  background-color: var(--system-blue);

  border-top-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;

  cursor: pointer;
}

.electronic-icon-wrapper {
  width: 100%;
  height: 100%;

  background-color: var(--system-white);

  background-repeat: no-repeat;
  background-size: contain;

  border-top-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

#electronic-icons-title {
  width: 100%;
}

#electronic-icons-text {
  width: 100%;

  direction: rtl;

  text-align: center;

  color: var(--system-blue);
  font-family: 'Custom-1-Bold';
  font-size: 1.5rem;
}

#electronic-icons-title {
  width: 100%;
}

#electronic-icons-title-text {
  width: 100%;

  direction: rtl;

  text-align: center;

  color: var(--system-blue);
  font-family: 'Custom-1-Bold';
  font-size: 1.5rem;
}

/* Electronic icons backgrounds ---------------------------------------- */

#electronic-icon-01 {
  background-image: url('../public/images/electronic_icons/enamad.png');
}

#electronic-icon-02 {
  background-image: url('../public/images/electronic_icons/ecunion.png');
}

#electronic-icon-03 {
  background-image: url('../public/images/electronic_icons/samandehi.png');
}

#electronic-icon-04 {
  background-image: url('../public/images/electronic_icons/syndicate.jpg');
}

#electronic-icon-05 {
  background-image: url('../public/images/electronic_icons/industry_ministry.jpg');
}

#electronic-icon-06 {
  background-image: url('../public/images/electronic_icons/lift_union.jpg');
}


/* Bottom copyright container -------------------------------------------- */

#bottom-copyright-container {
  width: 100%;

  padding: 1rem;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  z-index: 300;
}

#copyright-text {
  width: 100%;

  text-align: center;

  direction: rtl;

  color: var(--system-blue);
  font-family: 'Custom-1-SemiBold';
  font-size: 1.5rem;
}