:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #a46220;
  --primary-light: #d6934f;
  --secondary: #673bb7;
  --success: #10d876;
  --info: #2754e6;
  --warning: #fe9431;
  --danger: #e50202;
  --light: #faf8f2;
  --dark: #262f5a;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1440;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
}
.dlab-social-icon a {
  color: var(--primary);
}
.service-icon {
  margin: 10px auto;
}
.archia-counter i {
  color: var(--primary);
}
.dlab-bnr-inr:before {
  background: var(--primary);
}
.top-bar .dlab-topbar-center ul i,
.top-bar .dlab-topbar-left ul i,
.top-bar .dlab-topbar-right ul i {
  color: var(--primary);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--primary-light);
  border-color: var(--primary-light);
}
.exhibition-carousel .owl-dot.active {
  background: var(--primary-light);
}
.icon-lg {
  width: 50px;
}
.icon-lg img {
  vertical-align: middle;
  max-width: 100%;
  width: auto;
  height: 50px;
}
/* ----------------------------- Gallery Display ---------------------------- */
.index-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}
@media all and (max-width: 1000px) {
  .index-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media all and (max-width: 768px) {
  .index-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.index-gallery-item {
  max-height: 200px;
  width: 100%;
  /* overflow: hidden; */
}
.index-gallery-item img {
  object-fit: cover;
}
.index-gallery-item .dlab-media img,
.dlab-post-media img {
  width: 100%;
  height: 200px;
}
/* --------------------------------- Footer --------------------------------- */

footer .footer-top {
  background: var(--primary);
  padding: 70px 0 30px;
}
footer .footer-bottom {
  background-color: var(--primary);
  padding: 20px 0;
  font-size: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.wechat-wrap {
  display: flex;
  flex-direction: column;
}
.wechat-wrap img {
  width: 120px;
}
.wechat-wrap img:first-child {
  width: 30px;
  margin-bottom: 10px;
}

/* -------------------------------------------------------------------------- */
/*                                Contact Page                                */
/* -------------------------------------------------------------------------- */
.breadcrumb-row ul li a {
  color: var(--primary);
}
.contact-box .title-box {
  background: var(--primary);
}

.contact-question li i {
  background: var(--primary);
}

/* -------------------------------------------------------------------------- */
/*                                Commercial Page                             */
/* -------------------------------------------------------------------------- */
.commercial-row-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
}
.commercial-row-1 h3:first-child {
  text-align: center;
  font-size: 32px;
}
.commercial-row-1 p:first-child {
  text-align: center;
  font-size: 32px;
}
.business-icons-wrap {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media all and (max-width:700px){
  .business-icons-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}
.business-icon-cell {
  display: flex;
  flex-direction: column;
  background-color: var(--primary-light);
  border-radius: 20px;
  padding: 30px 25px;
}
.business-icon-cell h3 {
  text-align: center;
  color: #ffffff;
  margin: auto auto 15px;
}
.business-icon-cell p {
  text-align: center;
  color: #ffffff;
}
.business-icon-cell i{
 font-size: 60px;
 color:#fff;
 margin:15px auto 30px auto;
}

/* -------------------------------------------------------------------------- */
/*                                 SECURE PAGE                                */
/* -------------------------------------------------------------------------- */
.question-title{
  font-size: 35px;
  text-align: center;
  margin: 40px auto;
}
.common-question-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px 20px;
  grid-template-areas:
    "question1 question-img question3"
    "question2 question-img question4";
}
.question1 h3,.question2 h3,.question3 h3,.question4 h3 {
  color:var(--primary);
  font-size: 29px;
}
.question1,.question2{
  padding-right: 40px;
}
.question3,.question4{
  padding-left: 40px;
  text-align: right;
}
.question1 { grid-area: question1; }
.question2 { grid-area: question2; }
.question-img { grid-area: question-img; }
.question3 { grid-area: question3; }
.question4 { grid-area: question4; }

@media all and (max-width:700px){
  .common-question-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px 20px;
    justify-content: center;
    grid-template-areas:
      "question1"
      "question2"
      "question-img"
      "question3"
      "question4"
      ;
  }
  .question-img{
    width: 70%;
    justify-self: center;
    margin: 20px auto;
  }
  .question1,.question2{
    padding-right: 0px;
    text-align: center;

  }
  .question3,.question4{
    padding-left: 0px;
    text-align: center;
  }
}

/* ------------------------------------------------------ */
/*                  INDEX ABOUT ROW STYLE                 */
/* ------------------------------------------------------ */
#index-about-us {
  padding: 150px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#index-about-us h1{
  font-size: 45px;
  font-weight: 300;
  margin: 20px auto;
}
#index-about-us h2{
  font-size: 25px;
  font-weight: 300;
  padding: 20px 0;
  border-top: 1px solid var(--primary);
}
#index-about-us ul {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

#index-about-us li {
  padding: 10px 20px;
  border: 1px solid var(--primary);
  display: flex;
  align-items: center;
}
#index-about-us li img{
width: 70px;
}
#index-about-us li p{
  font-size: 18px;
  margin-left: 15px;
  margin-bottom: 0;
}
@media all and (max-width:1200px) {
  #index-about-us {
    padding: 80px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }
  #index-about-us h1{
    text-align: center;
    font-size: 25px;
    margin: 20px auto;
  }
  #index-about-us h2{
    font-size: 18px;
    font-weight: 300;
    padding: 20px 0;
    border-top: 1px solid var(--primary);
  }
  #index-about-us ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  #index-about-us li img{
    width: 40px;
    }
    #index-about-us li p{
      font-size: 14px;
      margin-left: 8px;
      margin-bottom: 0;
    }
}
@media all and (max-width:600px) {
  #index-about-us {
    padding: 80px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }
  #index-about-us h1{
    text-align: center;
    font-size: 25px;
    margin: 20px auto;
  }
  #index-about-us h2{
    font-size: 18px;
    font-weight: 300;
    padding: 20px 0;
    border-top: 1px solid var(--primary);
  }
  #index-about-us ul {
  margin-top: 30px;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
#index-about-us li {
  padding: 10px 10px;
  border: 1px solid var(--primary);
  display: flex;
}
  #index-about-us li img{
    width: 30px;
    height: 30px;
    max-height:100px;
    }
    #index-about-us li p{
      font-size: 14px;
      margin-left: 8px;
      margin-bottom: 0;
    }
}

/* ------------------------------------------------------ */
/*               Steps Style in secure.html               */
/* ------------------------------------------------------ */
.step-wrap{
  display:flex; 
  justify-content: center;
  align-items: center;

}
.step-wrap h6{
  margin: 0;
  color:#fff;
  font-size: 28px;
  font-weight: bold;
}

/* ------------------------------------------------------ */
/*                   Index Gallery Style                  */
/* ------------------------------------------------------ */
.index-gallery-grid2{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 25px;
}
@media all and (max-width:1200px){
  .index-gallery-grid2{
    grid-template-columns: repeat(2,1fr);
    gap: 25px;
  }
}
@media all and (max-width:600px){
  .index-gallery-grid2{
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
  }
}
.index-gallery-item2{
  position: relative;
  transition: all 0.4s ease;
  margin-bottom: 10px;
 
}
.index-gallery-item2 .index-gallery-zoom{
  width: 60px;
  height: 60px;
  color:#fff; 
  font-size: 25px;
  background-color: var(--primary);
  padding: 15px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.index-gallery-item2 img{
  object-fit: cover;
  width: 100%;
  height: 200px;
  max-height: 200px;
}
.index-gallery-fixed-title{
  overflow: hidden;
  position: absolute;
  bottom: 0px;
  left: 0;
  background-color: var(--primary);
  width: 100%;
  min-height: 50px;
  padding: 5px 15px;
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.index-gallery-fixed-title *{
  margin: 0;
}
.index-gallery-title{
  overflow: hidden;
  position: absolute;
  bottom: -50px;
  left: 0;
  background-color: var(--primary);
  width: 100%;
  height: 50px;
  padding: 5px 15px;
}

.index-gallery-title p{
  margin: 0;
  color:#fff;
  font-size: 16px;
}
/* .index-gallery-item2:hover .index-gallery-title{
  animation: titleMoveUp 0.5s ease ;
  bottom: 0px;
}
.index-gallery-item2:hover .index-gallery-zoom{
  opacity: 0;
} */
@keyframes titleMoveUp {
  from{
    bottom: -50px;
  }
  to{
    bottom: 0;
  }
}
/* ------------------ Images Animation ------------------ */
.img-zoom-wrap{
  overflow: hidden;
  object-fit: cover;


}
.img-zoom{
  overflow: hidden;
  transition: opacity 1s,transform 1s;
  object-fit: cover;

  
}

.img-zoom:hover {
/* transform: scale(1.05); */
opacity: .9;
transform: scale3d(1.1,1.1,1);
cursor: pointer;
object-fit: cover;

}

/* -------------- Index Gallery Tabs Style -------------- */
/* Style the tab */
.tab {
  overflow: hidden;
  display: flex;
  justify-content: center;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}
.ig-filter{
  display: none;
}
.ig-doorwindow{
  display: flex;
}