/* loading screen*/
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  filter: var(--img-filter);
  background-repeat: no-repeat;
  background-size: 1000px;
  background-position: center;
}

#animation-container{
  height: auto;
  width: 100%;
  max-width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* Content*/



.main-page-container{
  margin-top: 100px;
  display: flex;
  transition: all 0.4s;
  justify-content: center;
  align-items: center;
}

.div1-container{
  margin: auto 20px;
  overflow: hidden;
}

#div1{
  text-align: center;
  height: 500px;
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: div1 0.5s;
}
@keyframes div1{
  from {transform: translate(10%);}
  to {opacity: 1;}
}

#logo{
  height: 300px;
  width: auto;
  filter: var(--img-filter);
}

#slogan{
  font-size: 20px;
  margin-bottom: 50px;
  color: var(--primary-text-color);
}

#about-button{
  background-color: var(--primary-button-color);
  color: var(--primary-button-text-color);
  padding: 12px 20px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.4s;
}
#about-button:hover{
  background-color: var(--primary-button-hover-color);
}

#div-rec{
  display: flex;
  justify-content: center;
  align-items: center;
}
#line{
  height: 450px;
  width: 2px;
  background-color: var(--cards-bg-color);
}

.div2-container{
  margin: auto 20px;
  overflow: hidden;
}

#div2{
  height: 500px;
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: div2 0.5s;
}
@keyframes div2{
  from {transform: translate(-10%);}
  to {opacity: 1;}
}

#div2-text1{
  color: var(--primary-text-color);
  font-size: 30px;
  margin: 0px 0px 30px 10px;
}

#img-cc{
  height: 150px;
  width: 150px;
  border-radius: 20px;
}

#page-by-collections, #page-by-IHP{
  display: flex;
  border-radius: 30px;
  width: 340px;
  height: 150px;
  padding: 20px;
  margin: 10px;
  cursor: pointer;
  color: var(--primary-text-color);
  line-height: 28px;
  background-color: var(--cards-bg-color);
  transition: all 0.4s;
}
#page-by-collections:hover, #page-by-IHP:hover{
  background-color: #46675c;
  color: #ffffff;
}

#cc-exp-button{
  background-color: var(--primary-button-color);
  color: var(--primary-button-text-color);
  padding: 5px 12px;
  border-radius: 20px;
  margin-top: 15px;
  float: right;
}
span.exp{
  color: var(--primary-button-text-color);
  vertical-align: middle;
  font-size: 18px;
}

#browse-text1cc{
  font-size: 15px;
}
#browse-text2cc{
  font-size: 30px;
}

@media screen and (max-width: 900px) {
  .main-page-container{
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .div1-container{
    overflow: hidden;
  }
  
  #div1{
    margin: 0 auto;
    text-align: center;
    height: 400px;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: div1 0.5s;
  }
  
  #logo{
    height: 200px;
    width: auto;
  }
  
  .div2-container{
    margin: auto ;
    overflow: hidden;
    width: 400px;
  }
  
  #div2{
    margin: 0 auto;
    transform: scale(0.8);
    align-items: center;
  }

  #line{
    height: 2px;
    width: 400px;
  }

  #bg{
    height: 100%;
    width: 100%;
    border-radius: 0px;
    background-image: url('Ref/hero@75.b2469a49.jpg');
    background-size: contain;
  }
}

/* div3-container */

#div3-container{
  margin: 0 auto;
  margin-top: 20px;
  max-width: 780px;
  width: 100%;
  height: 300px;
  background-color: #efeae0;
  background-image: url("https://globalsourcingexpo.com.au/wp-content/uploads/2023/10/Melbourne-Speaker-Tiles.png");
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center right;
  border-radius: 20px;
  padding: 20px;
}

#div3-container p{
  color: var(--primary-text-color);
}

#event-button{
  margin: 10px;
  padding: 8px 15px;
  border-radius: 20px;
  background-color: #001108;
  color: #ffffff;
  cursor: pointer;
}
#event-button:hover{
  background-color: var(--primary-button-hover-color);
}

#material-button{
  text-decoration: none;
  cursor: pointer;
  margin: 10px;
  padding: 8px 15px;
  border-radius: 20px;
  background-color: #46675c;
  color: #ffffff;
}
#material-button i{
  margin-left: 10px;
  color: var(--secondary-button-text-color);
}
#material-button:hover {
  background-color: var(--secondary-button-hover-color);
}

span.event{
  color: var(--primary-button-text-color);
  vertical-align: middle;
  margin-left: 10px;
}

#div3-con-buttons{
  margin-top: 30px;
}

#div4-container{
  margin: 0 auto;
  margin-top: 20px;
  max-width: 780px;
  width: 100%;
  height: 250px;
  background-image: url(https://cdn.glitch.global/731126b6-60f0-4f27-b381-3bbd3d43760e/e53812ef-90d4-4aa2-bdb3-89825b274b1f.image.png?v=1731915223268);
  background-size: cover;
  background-position: left;
  border-radius: 20px;
  padding: 20px;
}

#div4-container p{
  color: #ffffff;
}

#event-button_2{
  margin: 10px;
  padding: 8px 15px;
  border-radius: 20px;
  background-color: var(--secondary-button-color);
  color: var(--secondary-button-text-color);
  cursor: pointer;
}
#event-button_2:hover{
  background-color: var(--secondary-button-hover-color);
}
#event-button_2 span{
  margin-left: 10px;
  color: var(--secondary-button-text-color);
}

/* contact page*/
#contacts{
  display: block;
  user-select: text;
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 30px;
  height: 400px;
  max-width: 1000px;
  width: 100%;
}


#contact-buttons{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 20px;
}

#contact-buttons #h1{
  font-size: 25px;
  color: var(--primary-text-color);
}
#contact-buttons #h2{
  font-size: 20px;
  color: var(--secondary-text-color);
}
#contact-buttons #h3{
  color: var(--secondary-text-color);
  line-height: 5px;
}

#contacts hr{
  margin-bottom: 30px;
}

#ind, #aus{
  margin: 20px;
  width: 300px;
  padding: 30px;
  background-color: var(--cards-bg-color);
  border-radius: 30px;
}

#whatsapp-icon{font-size: 22px; color: var(--secondary-text-color); font-weight: 400;}
#ind a, #aus a{
  color: var(--primary-text-color);
  text-decoration: none;
  width: 300px;
  padding: 10px 15px;
  border-radius: 30px;
  transition: all 0.4s;
}
#ind a:hover, #aus a:hover{
  background-color: var(--primary-text-bg-hover-color);
}

#ind i, #aus i{
  padding-right: 10px;
  vertical-align: middle;
}

i.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 100,
  'opsz' 24;
  transition: all 0.3s;
  color: var(--secondary-text-color);
}

@media screen and (max-width: 900px){
  #contact-buttons{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}


/* FAQ */
#faq{
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 30px;
  overflow: hidden;
  max-width: 1000px;
  width: 100%;
}
#faq-a{
  text-align: center;
  padding: 20px;
  font-size: 20px;
}

#QA{
  border-radius: 30px;
  overflow: hidden;
}

.accordion {
  background-color: var(--cards-bg-color);
  font-family: var(--font);
  color: var(--primary-text-color);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  font-size: 15px;
  transition: 0.4s;
}

.active-faq, .accordion:hover {
  background-color: var(--primary-text-bg-hover-color);
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* About page */

#about{
  margin: 0 auto;
  margin-top: 100px;
  max-width: 970px;
  height: 600px;
  width: 100%;
}

#video-container{
  margin: 0 auto;
}

#about-video{
  width: 100%;
  height: 546px;
}

#about-text-container{
  max-width: 950px;
  margin: 20px;
  font-size: 20px;
  color: var(--secondary-text-color);
}

#button-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 40px 20px;
  height: 200px;
}

#button-container a{
  text-decoration: none;
  color: var(--primary-button-text-color);
  background-color: var(--primary-button-color);
  border-radius: 30px;
  padding: 10px 20px;
  margin: 10px;
  transition: all 0.4s;
}
#button-container a:hover{
  background-color: var(--primary-button-hover-color);
}

#footer{
  position: relative;
  margin: 0 auto;
  height: 100px;
  width: 100px;
}

/* IHP */

#img-ihp{
  height: 150px;
  width: auto;
  border-radius: 20px;
}

#IHP-m-div{
  display: flex;
  justify-content: center;
  align-items: center;
}

#ihp-bg-text{
  display: flex;
  position: fixed;
  z-index: -10;
  height: 100%;
  width: 100%;
  align-items: end;
  justify-content: center;
}
#ihp-bg-text p{
  font-size: 200px;
  line-height: 200px;
  letter-spacing: 40px;
  margin: 0;
  color: var(--cards-bg-color);
}

#ihp-con-div{
  margin-top: 150px;
  height: 600px;
  width: 100%;
  max-width: 900px;
}

#ihp-title-div{
  display: flex;
  flex-direction: row;
  height: 150px;
}

#ihp-title1{
  font-size: 45px;
  margin: 10px;
  color: var(--primary-text-color);
}

#ihp-title2-div{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  width: 5px;
  background-color: #46675c;
  color: #46675c;
  overflow: hidden;
  transition: all 0.4s;
}

#ihp-title2-div-con{
  position: relative;
  height: 120px;
}

#ihp-title2a{
  position: absolute;
  top: 0;
  font-size: 16px;
  margin: 0;
}

#ihp-title2{
  font-size: 80px;
  margin: 0;
}

#ihp-button-con{
  height: 400px;
}

#browse-buttons{
  margin: 50px auto;
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: row;
}

#ihp-fabric-button, #ihp-design-button{
  position: relative;
  margin: 0 auto;
  background-color: #c4c4c42d;
  backdrop-filter: blur(5px);
  height: 300px;
  width: 330px;
  cursor: pointer;
}

#ihp-button-div{
  position: absolute;
  bottom: 20px;
  right: 20px;
}

#ihp-browse-text1{
  font-size: 15px;
  color: var(--primary-text-color);
}
#ihp-browse-text2{
  font-size: 50px;
  color: var(--primary-text-color);
}

#ihp-exp-button{
  float: right;
  background-color: #46675c;
  color: #ffffff;
  padding: 10px 18px;
  transition: all 0.3s;
}
#ihp-exp-button:hover{
  background-color: #0f1614;
}

span.ihp-exp{
  color: #ffffff;
  vertical-align: middle;
  font-size: 18px;
}