
/* custom fonts, colors and background */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');  
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');

:root {
  --primary-color: #ec3237;
  --secondary-color: #1f1d1e;
  --primary-light: #ec32380f;
  --xxs-font: 0.75rem;
  --xs-font: 0.875rem;
  --sm-font: 1rem;
  --md-font: 1.2rem;
  --lg-font: 1.5rem;
  --xl-font: 2rem;
  --xxl-font: 2.5rem;
  --heading-font:  "Parkinsans", sans-serif;
  --body-font: "Montserrat", sans-serif;
}

body{ font-family: var( --body-font)!important; font-size: var(--xs-font);}
/* section{  overflow: hidden; } */
a{color:inherit; text-decoration: none;}
h1,h2,h3,h4,h5,h6{ font-family: var(--heading-font); letter-spacing: 1px;}
/* typography */
.text-xxs{font-size: var(--xxs-font);}
.text-xs{font-size: var(--xs-font);}
.text-sm{font-size: var(--sm-font);}
.text-md{font-size: var(--md-font);}
.text-lg{font-size: var(--lg-font);}
.text-xl{font-size: var(--xl-font);}
.text-xxl{font-size: var(--xxl-font);}

/* background color start */
.bg-primary-color{background-color: var(--primary-color);}
.bg-primary-light{background-color: var(--primary-light);}
.bg-secondary-color{background-color: var(--secondary-color);}
.bg-gradient-color { background: linear-gradient( 295deg,var(--primary-color) 56%, var(--secondary-color) 30%);}
.bg-back{ 
  background-image: url('../img/bg-image.svg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* background color end */

/* color start */
.text-primary-color{color: var(--primary-color)!important;}
.text-secondary-color{color: var(--secondary-color) !important;}
.text-yellow-color{ color: var(--yellow-color); }
/* color end */
/* border css start */
.border-right{ border-right: 6px solid var(--primary-color) !important;}
.border-left{ border-left: 6px solid var(--primary-color) !important;}
.border-bottom-dashed{ border-bottom: 2px dashed var(--primary-color);}
/* button start */
.primary-button{
  border: none;
  color: white;
  position: relative;
  background-color: var(--primary-color);
  transition: 0.5s;
  z-index: 1;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}
.primary-button::after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: var(--secondary-color);
  transition: all 0.5s ease-in-out;
}
.primary-button:hover:after { left: 0; width: 100%;}
.primary-button:hover,.primary-button:focus,.primary-button:active{ color: white;  background-color: var(--primary-color);}

.secondary-button{
  border: none;
  color: white;
  background-color: var(--secondary-color);
  transition: 0.5s;
  z-index: 1;
  transition: all 0.5s ease-in-out;
}
.secondary-button:hover,.secondary-button:focus,.secondary-button:active{ color: white;  background-color: var(--prismary-color);}

/* button end */
/* commond css */
.title-center-shape {
  position: absolute;
  bottom: -20px;
  left: 47%;
}
.title-left-shape {
  position: absolute;
  left: 0;
  bottom: -20px;
}
/* navbar css start */
.header-event-details{ width: 19%;}
.nav-link, .nav-link:hover{ color: white;}
.dropdown-menu{ min-width: 12rem;}
.dropdown-item::before{
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
  height: 2px;
  width: 0px;
  background: rgb(228, 50, 45);
  transition: 0.3s ease-in-out;
}
.dropdown-item{ padding-left: 0 !important; transition: 0.3s ease-in-out;}
.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus { color: var(--primary-color); padding-left: 15px !important; background-color: transparent;}
.nav-item.dropdown .dropdown-menu{ animation: downOut 500ms ease-in-out forwards; transform-origin: center center;}
.nav-item.dropdown:hover .dropdown-menu{ display: block !important; top: 100%; }
.dropdown-item.active::before, .dropdown-item:active::before, .dropdown-item:hover::before, .dropdown-item:focus::before{ width: 10px; }
@-moz-keyframes downOut {
  0% { transform: translateZ(200px) transLateY(40px); }
  80% { transform: translateZ(-10px) transLateY(0px); }
  100% { transform: translateZ(0px) transLateY(0px); }
}
@-webkit-keyframes downOut {
  0% { transform: translateZ(200px) transLateY(40px); }
  80% { transform: translateZ(-10px) transLateY(0px); }
  100% { transform: translateZ(0px) transLateY(0px); }
}
@-o-keyframes downOut {
  0% { transform: translateZ(200px) transLateY(40px); }
  80% { transform: translateZ(-10px) transLateY(0px); }
  100% { transform: translateZ(0px) transLateY(0px); }
}
@keyframes downOut {
  0% { transform: translateZ(200px) transLateY(40px); }
  80% { transform: translateZ(-10px) transLateY(0px); }
  100% { transform: translateZ(0px) transLateY(0px); }
}
/* navbar css end */

/* home page css start */

/* banner section start */
.home-page-video{ height: 80vh;} 
.home-page-banner video::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index:1;
  background-color: #1f1d1eca;
  /* background-color: #ec323752; */
}
.home-page-banner .carousel-inner, .home-page-banner .carousel-item  { height: 77vh;} 
.banner-image{ width: 32rem !important;}
.banner-logo{ height: 10rem;}
.home-page-banner .carousel-control-next, .home-page-banner .carousel-control-prev {
  top: 46%;
  bottom: 46%;
  background-color: var(--secondary-color) !important;
  width: 2.5rem;
  padding: 0;
  height: 2.5rem;
  opacity: 1;
}
.home-page-banner .carousel-control-next{ border-radius: 10% 0 0 10%;}
.home-page-banner .carousel-control-prev{ border-radius: 0 10% 10% 0;}


/* banner section start */

/* about section */
.about-img img {
  width: 580px!important;
  height: 400px !important;
  animation: border-radius-ani 4.5s linear infinite alternate;
}
@-webkit-keyframes border-radius-ani {
  0% {
      border-radius: 48% 52% 57% 43% / 34% 44% 56% 66%;
  }
  25% {
      border-radius: 62% 38% 64% 36% / 34% 55% 45% 66%;
  }
  50% {
      border-radius: 43% 57% 51% 49% / 33% 42% 58% 67%;
  }
  100% {
      border-radius: 40% 60% 43% 57% / 52% 32% 68% 48%;
  }
}
@keyframes border-radius-ani {
  0% {
      border-radius: 48% 52% 57% 43% / 34% 44% 56% 66%;
  }
  25% {
      border-radius: 62% 38% 64% 36% / 34% 55% 45% 66%;
  }
  50% {
      border-radius: 43% 57% 51% 49% / 33% 42% 58% 67%;
  }
  100% {
      border-radius: 40% 60% 43% 57% / 52% 32% 68% 48%;
  }
}
/* about section css end */

/* meet our dignity css start */
.dignity-profile-img { width: 8rem; height: 8rem; border: 2px solid var(--primary-color);}
/* meet our dignity css end */

/* appreciation css start */
.appreciation-letter { height: 12rem; }
.appreciation-letter:hover{transform: scale(1.1); cursor: pointer; border: 3px solid var(--primary-color)}
/* appreciation css end */

/* event highlight section start */
.vendor-box {
  transition: 0.3s all ease-in;
  background-color: white;
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.04);
  border: 5px double var(--primary-color)
}
.vendor-box:hover {
  background-color: #ec32380b;
  transform: translateY(-20px);
  filter: drop-shadow(0 10px 24px rgba(23, 27, 42, .2));
  transition: 0.3s all ease-in;
}
.vendor-box ul li:last-child{ border-bottom: none !important; margin-bottom: 0 !important }
/* event highlight section start */
/* showcase card css start */
.back-bg-section{
  background-color: var(--secondary-dark);
  /* background-image: url('https://enggexpo.in/assets/img/site-images/001.jpg'); */
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(https://enggexpo.in/assets/img/site-images/001.jpg) center bottom no-repeat;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.back-bg-section::before{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: .75;
  background: var(--secondary-dark);
}
/* showcase card css end */
.slider-logo-container{ height: 4rem; width: 100%;}
.card-wrapper { transition: all 0.3s ease-in-out; }
.card-top {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.card-top.image-container { height: 15rem; transition: all 0.3s linear; }
.card-wrapper:hover .image-container {
  /* filter: blur(1.4px); */
  transform: scale(1.1);
  overflow: hidden;
  transition: all 0.3s linear;
  cursor: pointer;
}
.card-bottom {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 20;
  top: 50%;
  /* background-color: rgba(110, 122, 92, 0); */
  background: linear-gradient(to top, #060606eb 20%, transparent);
  padding: 100px 20px;
  color: #fff;
  transform: translate(0%, -50%);
  transition: all 0.8s ease;
}
.card-wrapper:hover .card-bottom {
  transform: translate(0%, -50%);
  transition: all 0.8s ease;
  background: rgb(207, 0, 0, 0.7);
  cursor: pointer;
}
/* why choose us */
/* gallery css start */
.outer-container {
  width: 100%;
  height: 12rem;
  transition: 0.6s all ease-in-out;
}
.outer-container:hover {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}
.outer-container:before {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 5px;
  content: '';
  z-index: 2;
  background-color: white;
  transition: 0.6s all ease-in-out;
}
.outer-container:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  content: '';
  z-index: 2;
  background-color: white;
  transition: 0.6s all ease-in-out;
}

.inner-content-box {
  width: 100%;
  height: 12rem;
  cursor: pointer;
  border: 5px solid var(--primary-color);
  transition: 0.6s all ease-in-out;
}
.inner-content-box:before {
  position: absolute;
  width: 5px;
  height: 100%;
  content: '';
  bottom: 0;
  right: -5px;
  transition: 0.6s all ease-in-out;
  background-color: white;
}
.inner-content-box:after {
  position: absolute;
  width: 5px;
  height: 100%;
  content: '';
  top: 0;
  left: -5px;
  transition: 0.6s all ease-in-out;
  background-color: white;
}
.outer-container:hover .inner-content-box:before, .outer-container:hover .inner-content-box:after { height: 0; }
.outer-container:hover:before, .outer-container:hover:after { width: 0; }
/* venue section css start */
.venue-details-title{
  position: relative;
  padding: 10px 25px;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  background-color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  margin-right: 5px;
  border: 1px solid #dddddd;
  border-bottom: 0;
  margin-bottom: -2px;
  z-index: 3;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.tabs-content {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  padding: 30px 30px;
  box-shadow: 0 30px 20px rgba(0, 0, 0, .05);
}
/* home page css end */

/* exhibitor profile css start */
.profile-list, .profile-list ul{ list-style-type: none;}
.profile-list li{ width: 100%; transition: all 300ms ease; position: relative; padding-top:0.5rem; font-size: var(--xs-font); font-weight: 600; padding-left: 0.5rem !important; font-weight: 600;}
.profile-list li:hover{ margin-left: 1rem !important; }
.profile-list li::before {
  transition: all 300ms ease;
  position: absolute;
  content: "●";
  top: 9px;
  left: -2%;
  font-family: 'bootstrap-icons' !important;
  color: var(--blue);
  font-size: 1rem;
  color: var(--primary-color);
}
.exhibitor-profile-image{ width: 14rem; height: 14rem; background-color: #ec323712;}
/* exhibitor profile css end */
.timing-list ul{list-style: none; padding: 0; margin:0; }
.timing-list li{ position: relative; font-size: var(--xs-font); font-weight: 500; padding-top: 0.5rem; display: flex; gap:10px; transition: 0.3s all ease-in;}
.timing-list li::before{ 
  /* content:url(../img/icon.png)no-repeat; */
  content: "";
  background: url(../img/icon.png) no-repeat;
  background-size: contain;
  background-position: center;
  width: 40px;
  height: 30px;
}

.listing-ul{ list-style: none; padding: 0; margin:0; display: flex; flex-wrap: wrap; gap:15px; justify-content: space-between;}
.listing-ul li{ position: relative; padding-left: 1.3rem; font-size: var(--xs-font); font-weight: 600; width: 48%; transition: 0.3s all ease-in;}
.listing-ul li:hover{ transform: translateY(-10px);}
.listing-ul li::before{ 
  content:'✔';
  position:absolute;
  top: 0; bottom:0;
  left:0;
  color: var(--primary-color);
  font-size: 19px;
}
/* why visit css start */
.why-list{ list-style-type: none;}
.why-list li{ width: 100%; transition: all 300ms ease; position: relative; padding-top: 1rem; font-size: var(--xs-font); padding-left: 1rem !important; font-weight: 600;}
.why-list li:hover{ margin-left: 1rem !important; }
.why-list li::before {
  transition: all 300ms ease;
  position: absolute;
  content: "✔";
  top: 13px;
  left: -2%;
  font-family: 'bootstrap-icons' !important;
  color: var(--blue);
  font-size: 1.3rem;
  color: var(--primary-color);
  transform: rotate(16deg);
}
/* contact us start */
.icon-box{ width: 5rem !important; height: 5rem !important; background-color: #ec323712;}

/* honor section css start */
.honor-img{ height: 12rem; width: 12rem;}
.accommodation-img{ height: 12rem;}

.icon-img-width { width: 7rem; height: 7rem;}
/* ----------------------------------------------------------------------------- */

.dignitaries-box{ height: 18rem; margin-bottom: 5rem;}
/* media css start */

/* small device css start */
@media (max-width:767px){
    
      .home .nav-link{ color: var(--primary-color) !important;}
      .home-page-banner .w-50{ width: 100% !important;}
      .home-page-banner .text-lg{ font-size: var(--md-font);}
      .bg-gradient-color { background: linear-gradient(0deg, var(--primary-color) 60%, var(--secondary-color) 30%); }

  .contact-details-section {
    position: static !important;
    transform: none !important;
    padding: 10px;
  }
  .profile-list{ padding-left: 1rem;}
  .profile-list li { width: 100%;}
  
  
    .dignitaries-box{ height: max-content; margin-bottom: 5rem;}
    .dignitaries-box svg{ width:40 !important; }
    .dignity-profile-img { width: 5rem !important; height: 5rem !important; }
    .mobile-static.position-absolute{ position: static !important; transform: none !important;}

}
@media (min-width: 768px) and (max-width: 1024px) {
  .home .nav-link{ color: var(--primary-color) !important;}
  .home-page-banner .w-50{ width: 100% !important;}
  .img-width-contact { height: 25rem !important; }
  .contact-details-section {
    width: 30rem;
    margin: 33px auto;
    right: 0;
    bottom: 0 !important;
    transform: none !important;
    top: 0 !important;
}
.profile-list li { width: 100%;}

}

.back-to-top {
  position: fixed;
  right: 10px;
  bottom: 60px;
  right: 60px;
  background-color: var(--primary-color);
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
  pointer-events: none; /* prevent clicking when invisible */
}
.back-to-top.show {
  opacity: 1;
  z-index: 999;
  transform: translateY(0);
  pointer-events: auto;
}
.bounce {
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}