@import "tailwindcss";

@theme {
    --color-clifford: #da373d;
}

html {
  scroll-behavior: smooth;
}
body {
  background-color: #414042;
  background-image: 
    radial-gradient(rgba(245, 158, 11, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12, 15, 23, 0.95), rgb(22, 5, 45));
  background-size: 28px 28px, 100% 100%;
}
.panel-card {
  background: rgba(12, 15, 23, 0.85);
  border: 1px solid #1b2234;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8);
}
.panel-card-hero {
  background: url('../img/hero-bg-img-001.png') no-repeat 0 0;
  background-clip: content-box;
  background-size: 100%;
  box-shadow: none !important;
  border: 1px solid #28324a !important;
}
.glow-amber {
  box-shadow: 0 0 35px -8px rgba(245, 158, 11, 0.25);
}
.glow-cyan {
  box-shadow: 0 0 35px -8px rgba(6, 182, 212, 0.25);
}
.glow-purple {
  box-shadow: 0 0 35px -8px rgba(168, 85, 247, 0.25);
}

/* 3D Z-Axis Elevation & Physics for Release & Interactive Main Cards */
.release-card-3d, .interactive-card-3d {
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.35s ease, 
              border-color 0.35s ease;
  will-change: transform, box-shadow;
  transform: perspective(1000px) translateZ(0);
}
.release-card-3d:hover, .interactive-card-3d:hover {
  transform: perspective(1000px) translateY(-8px) translateZ(24px) scale(1.025);
  z-index: 20;
}
.interactive-card-3d-tile {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.3s ease, 
              border-color 0.3s ease;
  will-change: transform, box-shadow;
  transform: perspective(800px) translateZ(0);
}
.interactive-card-3d-tile:hover {
  transform: perspective(800px) translateY(-6px) translateZ(18px) scale(1.04);
  z-index: 25;
}
.glow-orange {
  box-shadow: 0 0 35px -8px rgba(255, 85, 0, 0.35);
}
.interactive-card-3d.glow-orange:hover, .interactive-card-3d-tile.glow-orange:hover {
  box-shadow: 0 22px 42px -8px rgba(255, 85, 0, 0.45), 0 0 28px 2px rgba(255, 85, 0, 0.3);
  border-color: rgba(255, 85, 0, 0.9);
}
.release-card-3d.glow-amber:hover, .interactive-card-3d.glow-amber:hover {
  box-shadow: 0 24px 45px -8px rgba(243, 222, 58, 0.38), 0 0 30px 2px rgba(243, 222, 58, 0.22);
  border-color: rgba(243, 222, 58, 0.85);
}
.interactive-card-3d.glow-cyan:hover {
  box-shadow: 0 22px 42px -8px rgba(6, 182, 212, 0.38), 0 0 28px 2px rgba(6, 182, 212, 0.25);
  border-color: rgba(6, 182, 212, 0.85);
}
.interactive-card-3d.glow-purple:hover {
  box-shadow: 0 22px 42px -8px rgba(168, 85, 247, 0.38), 0 0 28px 2px rgba(168, 85, 247, 0.25);
  border-color: rgba(168, 85, 247, 0.85);
}
.interactive-card-3d.glow-rose:hover {
  box-shadow: 0 22px 42px -8px rgba(244, 63, 94, 0.38), 0 0 28px 2px rgba(244, 63, 94, 0.25);
  border-color: rgba(244, 63, 94, 0.85);
}
.release-card-3d:not(.glow-amber):hover, .interactive-card-3d:not([class*="glow-"]):hover {
  box-shadow: 0 22px 40px -10px rgba(6, 182, 212, 0.3), 0 0 25px 1px rgba(6, 182, 212, 0.18);
  border-color: rgba(6, 182, 212, 0.7);
}

@media print {
  body {
    background-color: #414042 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .no-print {
    display: none !important;
  }
  .panel-card {
    box-shadow: none !important;
    border: 1px solid #28324a !important;
    break-inside: avoid;
  }
  .panel-card-hero {
    background: url('img/hero-bg-img-001.png') no-repeat 0 0;
    background-clip: content-box;
    background-size: 100%;
    box-shadow: none !important;
    border: 1px solid #28324a !important;
  }
  @page {
    margin: 0.8cm;
    size: A4 portrait;
  }
}

  .bg-green {
    background-color: #8dc64f;
  }
  .bg-menu-gray {
    background-color: #414042;
  }
  .bg-main-violet {
    background-color: #e7d9f0;
  }
  .bg-menu-light-gray {
    background-color: #414042;
  }
  .logo-gray {
    background-color: #231f20;;
  }

  .main {
    background-color: #45083f;
  }
  .wrapper {
    margin: 0 auto;
    /* width: 612px; */
    background-color: #000; 
  }

  .nav-container {
    background: url(../img/bg_header_top.png) no-repeat 0 0;
    background-clip: content-box;
    background-size: 100%;
    /* width: 612px;
    height: 277px;  */
    height: 100px;
  }

  nav ul {
        float: right;
        list-style-type: none; /* Remove bullets */
        margin: 0;
        padding: 0;
        /* background-color: #333; */
        overflow: hidden; /* Contain floated elements */
        padding-right: 15px;
    }

    /* Make list items inline */
    nav ul li {
        display: inline-block; /* Inline but allows padding/margin */
    }

    /* Style the links */
    nav ul li a {
        display: block; /* Makes the whole area clickable */
        color: white;
        text-align: center;
        padding: 15px 8px;
        text-decoration: none;
    }

    /* Hover effect */
    nav ul li a:hover {
        background-color: #1c0551;
    }

  .hero-container {
    background: url(../img/hero_img_001.png) no-repeat 0 0;
    background-clip: content-box;
    background-size: 100%;
    /* width: 612px;
    height: 277px;  */
    height: 315px;
  }

  .bg-page-title {
    background: url(../img/h1-bg.png) no-repeat 0 0;
    background-clip: content-box;
    background-size: 450px;
    /* width: 612px;
    height: 277px;  */
    height: 75px
  }

  .section-home-container {
    height: 100%;
  }

  .section-about-container {
    height: 100%;
  }

  .news-col-container {
    min-height: 980px;
  }

  .cell-left {
    width: 50%;
  }

  .cell-right {
    width: 45%;
  }

  .l-green-img-bar {
    width: 49%;
    height: 27px;
    float: left;
  }
  r-green-img-bar {
    width: 49%;
    height: 27px;
    float: right;
  }

  .top-bar-design2 {
    width: 100%;
    height: 57px;
  }
  .bot-bar-design {
    width: 100%;
    height: 42px;
  }

  .footer-mobile-container {
    min-width: 390px
    /* max-width:550px; */
  }

  @media screen and (min-width: 1024px) {

    .section-home-container {
      height: 1580px;
    }

    .section-about-container {
      height: 1590px;
    }

    .news-col-container {
      min-height: 1590px;
    }
  
}