body {
    background-color: #202020;
}

.adrb-frame-top {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.adrb-frame-top-heads {
    position: absolute;
    top: 0;
    left: 0 !important;
    width: 920px;
    height: 467px;
    z-index: 2;
}

.adrb-video {
    width: 640px;
    height: 360px;
    margin-top: 400px;
}

  .adrb-text {
    font-family: 'Patrick Hand', cursive;
    font-weight: 700; 
    color: #ffffff;  
    font-size: 22px !important;
    margin-top: 25px;
    margin-bottom: 25px;
    letter-spacing: 1px;
  }

    .adrb-text-new {
    font-family: 'Patrick Hand', cursive;
    font-weight: 700; 
    color: #ffffff;  
    font-size: 26px !important;
    margin-top: 45px;
    margin-bottom: 25px;
    letter-spacing: 1px;
  }

  .adrb-logo {
    transform: scale(0.8); 
    margin-top: 230px;
    margin-bottom: 0px;
}


  .adrb-logo-ph {
    transform: scale(0.8); 
    margin-top: 230px;
    margin-bottom: 0px;
}


center {
  display: flex;
  justify-content: center;
  gap: 0; /* no gap between items */
}

/* ========== Gallery Grid ========== */
.adrb-gallery {
  display: grid;
  grid-template-columns: repeat(7, 100px); /* 7 per row */
  grid-auto-rows: 80px;                    /* fixed height per row */
  gap: 0;                                  /* no spacing */
  width: max-content;
  margin: 0 auto;
}

/* ========== Thumbnail Tiles ========== */
.adrb-gallery > a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative; /* allows z-index */
  z-index: 0;
  text-decoration: none;
}

/* ========== Images ========== */
.adrb-gallery > a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;

  /* Smooth animation */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ========== Hover Grow Effect ========== */
.adrb-gallery > a:hover {
  z-index: 10; /* bring above neighbors */
}

.adrb-gallery > a:hover img {
  transform: scale(1.15); /* grow factor — adjust (1.05 to 1.2) */
  box-shadow: 0 8px 20px rgba(0,0,0,0.25); /* soft lift */
}


.adrb-gallery-heads > a img {
  display: inline;
  width: 100px;
  height: 80px;
  object-fit: cover;
  border: 0;

  /* Smooth animation */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ========== Hover Grow Effect ========== */
.adrb-gallery-heads > a:hover {
  z-index: 10; /* bring above neighbors */
}

.adrb-gallery-heads > a:hover img {
  transform: scale(1.15); /* grow factor — adjust (1.05 to 1.2) */
  box-shadow: 0 8px 20px rgba(0,0,0,0.25); /* soft lift */
}

.adrb-text-thanks {
    font-family: 'Patrick Hand', cursive;
    font-weight: 700; 
    color: #ffffff;
    margin-top: 40px;
    font-size: 22px;   
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* spacing between buttons */
  justify-content: center;
  margin-top: 20px;
}

.button-primary {
  display: inline-block;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  background-color: #313131; /* dark grey */
  border-radius: 50px;
  border: none;
  transition: all 0.35s ease-in-out;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Fancy hover effect */
.button-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #b8860b; /* dark golden yellow */
  z-index: -1;
  transition: all 0.35s ease-in-out;
}

.button-primary:hover {
  color: #fff;
}

.button-primary:hover::before {
  left: 0;
}

.dmca-text {
    font-family: 'Patrick Hand', cursive;
    font-weight: 700; 
    color: #ffffff;
    margin-top: 40px;
    font-size: 18px;   
}

.dmca-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dmca-badge {
  display: inline-block;
  text-decoration: none;
}

.dmca-badge .DMCA {
  width: 93px;
  height: 101px;
  position: relative;
  display: inline-block;

  /* smoother breathing */
  animation: dmca-breathe 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;

  transition: transform 0.35s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.35s ease,
              filter 0.35s ease;
  will-change: transform, box-shadow, filter;
}

.dmca-badge .DMCA img.logo-dmca-pro {
  width: 100%;
  height: 100%;
  display: block;
}

/* Hover pop effect overrides breathing */
.dmca-badge:hover .DMCA {
  animation: none; /* pause breathing */
  transform: scale(1.08) rotate(1.5deg);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
  filter: brightness(1.08) saturate(1.1);
}

/* Smooth breathing keyframes */
@keyframes dmca-breathe {
  0%, 20% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.045); /* gentle peak */
  }
  80%, 100% {
    transform: scale(1);
  }
}

.adrb-container {
    position: relative;      /* establishes absolute positioning context */
    padding-bottom: 257px;   /* border height (467px) + 100px top margin */
}

.adrb-frame-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 920px;        /* keep your original size */
    height: auto; 
    z-index: -1;       
}

.adrb-container-heads {
    position: relative;      /* establishes absolute positioning context */
    padding-bottom: 290px;   /* border height (467px) + 100px top margin */
}

.adrb-frame-bottom-heads {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 920px;        /* keep your original size */
    height: auto;  
    z-index: -1; 
}

.adrb-container-radio {
    position: relative;      /* establishes absolute positioning context */
    padding-bottom: 290px;   /* border height (467px) + 100px top margin */
}

.adrb-frame-bottom-radio {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 920px;        /* keep your original size */
    height: auto;  
    z-index: -1; 
}

.developers-text {
    font-family: 'Patrick Hand', cursive;
    font-weight: 700; 
    color: #ffffff;
    margin-top: 40px;
    font-size: 22px;
    text-align: center;   
}

.instructions-text {
    font-family: 'Patrick Hand', cursive;
    font-weight: 700; 
    color: #ffffff;
    font-size: 22px;
    text-align: center;   
}







