/* Copyright (c) 2025 by Yudiz Solutions Limited (https://codepen.io/yudizsolutions/pen/vENNWxx) */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&display=swap');
 
*                                       {margin: 0;padding: 0;box-sizing: border-box;}
img                                     {width: 100%;height: auto;}
button,a                                {border: 1px solid transparent;background: transparent;display: flex;align-items: center;justify-content: center;text-decoration: none;color: #EBEBEB;}
body                                    {font-family: "Golos Text";}
/*  */
.webgl                                  {position: fixed;left: 0;top: 0;width: 100vw;height: 100dvh;z-index: -1;}
.header                                 {display: flex;align-items: center;justify-content: space-between;padding: 34px 40px;}
.logo                                   {max-width: 270px;display: flex;align-self: center;justify-content: center;}
.nav-link-container                     {display: flex;align-items: center;gap: 40px;}
.nav-link-container                     {background: #0F0F0F;padding-left: 30px;}
.nav-link-container button img          {width: 20px;aspect-ratio: 1;}
.nav-link-container a                   {font-size: 14px;text-transform: uppercase;transition: all ease-in-out 0.15s;}
.nav-link-container a:hover             {color: #D6F844;}
.toggle-btn                             {background: #515151;padding: 16px;}
.banner-section                         {max-width: 1122px;margin: 0 auto;text-align: center;}
h1                                      {font-size: 100px;line-height: 140px;color: white;font-weight: 900;text-transform: uppercase;}
p                                       {color: #949494;}
/*  */
.banner-section a                       {display: flex;align-items: center;gap: 4px;color: #D6F844;position: relative;max-width: fit-content;margin: 30px auto 0;font-weight: 500;text-transform: uppercase;}
.banner-section a img                   {width: 18px;aspect-ratio: 1;transition: all ease-in-out 0.15s;transform-origin: center;}
.banner-section a::after                {content: '';position: absolute;right: 0;top: calc(100% + 2px);width: 0%;height: 1px;background: #D6F844;transition: all ease-in-out 0.15s;}
.banner-section a:hover:after           {width: 100%;left: 0;right: unset;}
.banner-section a:hover img             {transform: rotate(45deg);}
/*  */
.images-container                       {display: flex;justify-content: space-between;flex-wrap: wrap;padding: 100px 40px;}
.images-container .img                  {width: 100%;display: flex;}
.images-container .img:nth-child(even)  {justify-content: end;}
.images-container img                   {aspect-ratio: 16 / 9;object-fit: cover;transition: all ease 1s;}
.img-main                               {max-width: 30vw;width: 100%;border: 1px solid transparent;overflow: hidden;position: relative;line-height: 0;opacity: 0;transition: all ease-in-out 0.15s;}
.img-main:hover:after                   {content: '';position: absolute;top: -100%;left: -100%;height: 200%;width: 200%;background: linear-gradient(to bottom right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);animation: slide 1s forwards;filter: blur(33px);}
/*  */
@keyframes slide                        {
    from                                { top: -100%; left: -100%; }
    to                                  { top: 100%; left: 100%; }
}
.img-main:hover img                     {transform: scale(1.2);}
.img-main:hover                         {border-color: #5599FF;}
.zoom-img img                           {aspect-ratio: 16 / 9;object-fit: cover;transition: all ease 0.2s;object-position: top;}
.images-container img:hover             {transform: scale(1.1) ;opacity: 1;}
section{min-height: 100vh;}
/*  */
html.lenis, html.lenis body             {height: auto;}
.lenis.lenis-smooth                     {scroll-behavior: auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior: contain;}
.lenis.lenis-stopped                    {overflow: hidden;}
.lenis.lenis-scrolling iframe           {pointer-events: none;}
 
 
@keyframes spin                         {
  to                                    { transform: rotate(360deg); }
}
#preloader                              {position: fixed; top: 0;left: 0;width: 100%;height: 100%;z-index: 1001;}
.loder-parent                           {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
#loader                                 {display: block;position: relative;width: 300px;height: 300px;border-radius: 50%;border: 5px solid transparent;border-top-color: #D6F844;-webkit-animation: spin 2s linear infinite;animation: spin 2s linear infinite;}
#loader:before                          {content: "";position: absolute;top: 5px;left: 5px;right: 5px;bottom: 5px;border-radius: 50%;border: 4px solid transparent;border-top-color: #D6F844;-webkit-animation: spin 3s linear infinite;animation: spin 3s linear infinite;}
#loader:after                           {content: "";position: absolute;top: 15px;left: 15px;right: 15px;bottom: 15px;border-radius: 50%;border: 3px solid transparent;border-top-color: #D6F844;-webkit-animation: spin 1.5s linear infinite;animation: spin 1.5s linear infinite;}
@-webkit-keyframes spin                 {
    0%                                  {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
    100%                                {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}
}
/* Movie poster with glare effect */
.loader-text                            {position: absolute;left: 50%;transform: translate(-50%, -50%);top: 50%;font-size: 2rem;line-height: 1;font-weight: 700;color: #D6F844;}
.loader-info-text{
    position: absolute;left: 50%;transform: translate(-50%,-50%);top: 70%;font-size: 1rem;line-height: 1;font-weight: 400;color: #D6F844;   }
.dg.ac                                  {background-color: rgba(0, 0, 0, 0.8)}
 
/* ===== MOBILE RESPONSIVE ===== */
 
/* Tablet and smaller screens */
@media screen and (max-width: 1024px)   {
    .header                             {padding: 20px 30px;}
    .nav-link-container                 {gap: 25px;padding-left: 20px;}
    h1                                  {font-size: 80px;line-height: 120px;}
}
 
/* Mobile landscape and smaller tablets */
@media screen and (max-width: 768px)    {
    .header                             {padding: 15px 20px;flex-direction: column;gap: 20px;}
    .logo                               {max-width: 200px;}
    .nav-link-container                 {gap: 20px;padding-left: 15px;flex-wrap: wrap;justify-content: center;}
    
    .nav-link-container a               {font-size: 12px;}
    h1                                  {font-size: 60px;line-height: 80px;}
    .banner-section                     {padding: 0 20px;}
    .images-container                   {padding: 40px 20px;flex-direction: column;align-items: center;gap: 30px;}
    .img-main                           {max-width: 35vw;}
}
@media screen and (max-width: 575px)    {
    .img-main                           {max-width: 50vw;width: 100%;}
}
/* Mobile portrait */
@media screen and (max-width: 480px)    {
    .header                             {padding: 15px;}
    .logo                               {max-width: 150px;}
    .nav-link-container                 {gap: 10px;padding-left: 10px;padding-right: 0px;}    
    .nav-link-container a               {font-size: 11px;}    
    .toggle-btn                         {padding: 12px;}
    h1                                  {font-size: 40px;line-height: 50px;}
    .banner-section                     {padding: 0 15px;}
    .banner-section a                   {margin: 20px auto 0;font-size: 14px;}
    .images-container                   {padding: 40px 15px;gap: 20px;}    
    /* Loader adjustments for mobile */
    #loader                             {width: 200px;height: 200px;}    
    .loader-text                        {font-size: 1.5rem;}
}
 
/* Very small screens */
@media screen and (max-width: 360px)    {
    .header                             {padding: 10px;}
    .nav-link-container                 {gap: 10px;padding-left: 8px;padding-right: 8px;}
    .nav-link-container a               {font-size: 10px;}
    h1                                  {font-size: 32px;line-height: 40px;}    
    .banner-section                     {padding: 0 10px;}
    .images-container                   {padding: 30px 10px;}    
    #loader                             {width: 150px;height: 150px;}
    .loader-text                        {font-size: 1.2rem;}
}
 
/* Landscape orientation specific */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .header                             {padding: 10px 20px;}
    h1                                  {font-size: 50px;line-height: 60px;}
    .banner-section                     {margin-top: 20px;}
}