@font-face {
   font-family: 'Sukhumvit';
   font-style: normal;
   font-weight: 400;
   src: url('../fonts/SukhumvitSet-Text.ttf') format('truetype');
}

@font-face {
   font-family: 'Sukhumvit';
   font-style: normal;
   font-weight: 500;
   src: url('../fonts/SukhumvitSet-Medium.ttf') format('truetype');
}

@font-face {
   font-family: 'Sukhumvit';
   font-style: bold;
   font-weight: 500;
   src: url('../fonts/SukhumvitSet-SemiBold.ttf') format('truetype');
}

@font-face {
   font-family: 'Sukhumvit';
   font-style: bold;
   font-weight: 700;
   src: url('../fonts/SukhumvitSet-Bold.ttf') format('truetype');
}

@font-face {
   font-family: 'Fujitsuinfinitypro';
   font-display: swap;
   src: url('../fonts/FujitsuInfinityPro-Regular.woff2') format("woff2"), url('../fonts/FujitsuInfinityPro-Regular.woff') format("woff");
   font-weight: 400;
}

@font-face {
   font-family: 'Fujitsuinfinitypro-Bold';
   font-display: swap;
   src: url('../fonts/FujitsuInfinityPro-Bold.woff2') format("woff2"), url('../fonts/FujitsuInfinityPro-Bold.woff') format("woff");
   font-weight: 700;
}

@font-face {
   font-family: 'Texta-Bold';
   src: url('../fonts/TextaBold.ttf') format('truetype');
   font-weight: bold;
}

@font-face {
   font-family: 'Texta-Heavy';
   src: url('../fonts/TextaHeavy.ttf') format('truetype');
   font-weight: 900;
}

:root {
   --dark-blue: #1a1a2e;
   --pink: #ee208f;
}

body {
   color: #333;
}

footer {
   background: var(--dark-blue);
   color: white;
   padding: 3rem 0;
}

.bannerContainer {
   height: 600px;
   position: relative;
}

.bg-black {
   background-color: #000;
   color: #FFF;
}

.bg-pink {
   background-color: var(--pink);
   color: #fff;
}

.black-card {
   background: #000;
   border-radius: 16px;
   color: #fff;
   min-height: 340px;
   padding: 25px;
}

.white-card {
   background: #fff;
   border-radius: 16px;
   color: #000;
   min-height: 340px;
   padding: 25px;
}

.break {
   padding: 0px !important;
}

.qr-section {
   position: relative;
   z-index: 1;
}

.qr-frame {
   background: #ffffff;
   border-radius: 24px;
   padding: 10px;
   box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
   margin: 0 auto 28px;
   max-width: 260px;
   position: relative;
}

.qr-frame img {
   width: 100% !important;
   height: auto !important;
   display: block;
   margin: 0 auto;
}

.partner-logos {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
   padding: 0 10px;
}

.partner-logo {
   position: relative;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   transition: all 0.2s ease;
   cursor: pointer;
   /* border: 3px solid transparent; */
   background: #ffffff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.partner-logo.clear {
   border: none;
   background: transparent;
   box-shadow: none;
}

.partner-logo.wide {
   aspect-ratio: 2.2 / 1;
}

.partner-logo:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.partner-logo.selected {
   border-color: #f6b220;
   /* 007bff */
   /* background-color: rgba(0, 123, 255, 0.1); */
   box-shadow: 0 4px 16px rgba(0, 123, 255, 0.6);
}

.partner-logo img {
   object-fit: contain;
}

.booth-selection-form {
   background: #ffffff;
   border-radius: 12px;
   padding: 20px;
   margin: 20px 10px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive adjustments */
@media (max-width: 576px) {
   .partner-logos {
      gap: 8px;
      padding: 0 5px;
   }

   .partner-logo {
      border-radius: 6px;
   }

   .booth-selection-form {
      margin: 15px 5px;
      padding: 15px;
   }
}

@media (max-width: 770px) {
   .navbar-collapse {
      background-color: #000;
      height: 100%;
      left: 0;
      padding-bottom: 15px;
      padding-left: 15px;
      padding-right: 15px;
      position: fixed;
      top: 0px;
      width: 75%;
   }

   .navbar-collapse.collapsing {
      left: -75%;
      transition: height 0s ease;
   }

   .navbar-collapse.show {
      left: 0;
      padding-top: 3rem !important;
      transition: left 300ms ease-in-out;
   }

   .navbar-nav {
      border-bottom: none;
      margin-bottom: 20px;
   }

   .navbar-toggler.collapsed~.navbar-collapse {
      transition: left 500ms ease-in-out;
   }
}