@charset "UTF-8";

@import url('./tooltip.css');

@font-face {
   font-family: 'Play-Regular';
   src: url('../resourses/fonts/Play-Regular.ttf') format('truetype');
}

@font-face {
   font-family: 'Play-Bold';
   src: url('../resourses/fonts/Play-Bold.ttf') format('truetype');
}

/*Обнуление*/
* {
   padding: 0;
   margin: 0;
   border: 0;
}

*,
*:before,
*:after {
   box-sizing: border-box;
}

:focus,
:active {
   outline: none;
}

a:focus,
a:active {
   outline: none;
}

nav,
footer,
aside {
   display: block;
}

html,
body {
   font-family: 'Exo 2', sans-serif;
   height: 100%;
   width: 100%;
   font-size: 100%;
   line-height: 1;
   font-size: 16px;
   -ms-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   background-color: #004b78;
}

body.no-scroll {
   overflow: hidden;
}

input,
button,
textarea {
   font-family: inherit;
}

input::-ms-clear {
   display: none;
}

button {
   cursor: pointer;
}

button::-moz-focus-inner {
   padding: 0;
   border: 0;
}

a,
a:visited {
   text-decoration: none;
}

a:hover {
   text-decoration: none;
}

ul li {
   list-style: none;
}

img {
   vertical-align: top;
}


.header {
   position: fixed;
   left: 0;
   z-index: 10;
   width: 100%;
   background-color: transparent;
}

.header.hidden {
   display: none;
}

.header.scrolled {
   background-color: #004b78;
}

.container {
   background-image: url('../resourses/images/img_bg.png');
   background-size: cover;
}

.header__inner {
   display: flex;
   max-width: 1120px;
   margin: 0 auto;
   align-items: center;
   justify-content: space-between;
}

.logo img {
   width: 206px;
}

.nav {
   display: flex;
}

ul {
   display: flex;
}

ul a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 112px;
   height: 42px;
   font-family: 'Play-regular';
   color: #FFF2E1;
   font-size: 16px;
}

.header__actions {
   display: flex;
   gap: 16px;
}

.social-button {
   width: 50px;
   height: 50px;
   background-size: cover;
}

.social-button.twitter {
   background-image: url('../resourses/images/btn_x_0.png');
}

.social-button.telegram {
   background-image: url('../resourses/images/btn_telegram_0.png');
}

.social-button.twitter:hover {
   background-image: url('../resourses/images/btn_x_1.png');
}

.social-button.telegram:hover {
   background-image: url('../resourses/images/btn_telegram_1.png');
}

.social-button img {
   max-width: 100%;
}

.chewy-button {
   width: 175px;
   height: 50px;
   font-family: 'Play-bold';
   color: #013C60;
   font-size: 16px;
   background-color: #FFA842;
   border-radius: 8px;
   border: 2px solid #054B76;
   box-shadow: 1px 3px 0 0 #003B5F;
   display: flex;
   align-items: center;
   justify-content: center;
}

.chewy-button:hover {
   background-color: #F58B0E;
}

.burger {
   display: none;
   width: 40px;
   height: 40px;
   background-image: url('../resourses/images/img_menu.png');
   background-size: cover;
}

.burger.close {
   background-image: url('../resourses/images/img_close.png');
}

.mobile-menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: 16px;
   padding-top: 56px;
   height: calc(100vh + 40px);
   padding-top: calc(40px + 16px);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
   background-color: rgba(0, 13, 20, 0.6);
   display: flex;
   flex-direction: column;
   z-index: 8;
   display: none;
   margin-top: -40px;
}

.mobile-menu-header {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.close-burger {
   width: 40px;
   height: 40px;
   background-image: url('../resourses/images/img_close.png');
   background-size: cover;
}

.mobile-menu-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 32px;
   height: 100%;
}

.mobile-menu.active {
   display: flex;
}

.mobile-menu .chewy-button{
   align-self: center;
}

.mobile-menu ul {
   flex-direction: column;
   align-items: center;
   gap: 32px;
}

.mobile-menu ul a {
   justify-content: center;
   width: auto;
   height: auto;
   font-family: 'Play-bold';
}

.mobile-menu .socials {
   align-self: center;
}

.content {}

.intro {
   position: relative;
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: end;
}

.intro-content {
   position: relative;
   width: 1120px;
   padding: 0px;
   margin: 0 auto;
   display: flex;
   justify-content: end;
}

.intro picture {
   position: absolute;
   top: 0;
   left: 0;
}

.intro img {
   max-width: 90%;
}

.chewy-intro {
   width: 452px;
   height: auto;
   padding: 32px;
   display: flex;
   flex-direction: column;
   gap: 24px;
   align-items: center;
   border: 2px solid #023F65;
   background-color: #D7E9FFBF;
   border-radius: 24px;
   position: relative;
   z-index: 3;
}

.intro-title {
   font-family: 'Play-bold';
   color: #FFA842;
   font-size: 64px;
   line-height: 48px;
   text-shadow: 2px 0px #013C60, -2px 0px #013C60, 0px -2px #013C60, 0px 2px #013C60,1px 1px #013C60,
      -1px -1px #013C60,
      1px -1px #013C60,
      -1px 1px #013C60;
}

.intro-text {
   font-family: 'Play-bold';
   color: #013C60;
   font-size: 16px;
   line-height: 18px;
}

.intro-buttons {
   display: flex;
   gap: 16px;
}

.about {
   padding: 100px 80px 289px;
   background-image: url('../resourses/images/bg_white.png');
   background-size: 100% 100%;
}

.about-content {
   max-width: 1120px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 25px;
   margin: 0 auto;
}

.about img {
   width: 436px;
}

.about-chewy {
   width: 679px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
}

.about-chewy-title {
   font-family: 'Play-bold';
   color: #FFA842 ;
   font-size: 40px;
   line-height: 48px;
   text-shadow: 2px 0px #013C60, -2px 0px #013C60, 0px -2px #013C60, 0px 2px #013C60, 1px 1px #013C60,
         -1px -1px #013C60,
         1px -1px #013C60,
         -1px 1px #013C60;
}

.about-chewy-text {
   font-family: 'Play-regular';
   color: #013C60;
   font-size: 24px;
   line-height: 30px;
}

.merch {
   display: flex;
   align-items: center;
   justify-content: center;
   padding-bottom: 28px;
   margin-top: -200px;
}

.merch-content {
   width: 868px;
   height: auto;
   display: flex;
   align-items: center;
   padding: 32px;
   border: 2px solid #023F65;
   background-color: #D7E9FFBF;
   border-radius: 24px;
}

.merch-image-desktop {
   width: 346px;
   height: 331px;
}

.merch-image-mobile {
   display: none;
}

.merch-image-desktop img {
   width: 100%;
}

.merch-info {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 24px;
   width: 60%;
}

.merch-info-title {
   font-family: 'Play-bold';
   color: #FFA842;
   font-size: 40px;
   line-height: 48px;
   text-shadow: 2px 0px #013C60, -2px 0px #013C60, 0px -2px #013C60, 0px 2px #013C60, 1px 1px #013C60,
         -1px -1px #013C60,
         1px -1px #013C60,
         -1px 1px #013C60;
}

.merch-info-text {
   font-family: 'Play-regular';
   color: #013C60;
   font-size: 16px;
   line-height: 18px;
}

footer {
   padding: 27px 80px 32px;
}

.footer-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0 auto;
   padding-bottom: 40px;
   max-width: 1120px;
}

.footer-logos {
   width: 258px;
}

.logo {}

.socials {
   display: flex;
   gap: 16px;
}

.social-button {}

.casino-logo-mobile {
   width: 158px;
   display: none;
} 

.casino-logo-desktop {
   width: 258px;
}

.casino-logo img {
   max-width: 100%;
}

.footer-trademark {
   margin: 0 auto;
   text-align: center;
}

.footer-trademark p {
   font-family: 'Play-regular';
   color: #FFFFFF;
   font-size: 14px;
}


.contact-popup {
   position: fixed;
   inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   backdrop-filter: blur(6px);
   background: rgba(0, 0, 0, 0.4);
   z-index: 11;
   display: none;
}

.contact-popup.active {
   display: flex;
}

.popup-inner {
   position: relative;
   width: 550px;
   height: auto;
   padding: 40px;
   border-radius: 16px;
   background: rgba(173, 202, 239, 0.95);
   border: 2px solid #004080;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
   display: flex;
   flex-direction: column;
   align-items: center;
}

/* === CLOSE BUTTON === */
.popup-close {
   position: absolute;
   top: 16px;
   right: 16px;
   background: none;
   font-size: 20px;
   cursor: pointer;
   width: 40px;
   height: 40px;
   background-image: url('../resourses/images/btn_close_0.png');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

.popup-close:hover {
   background-image: url('../resourses/images/btn_close_1.png');
}

.error {
   border: 2px solid red !important;
}

/* === TITLE === */
.popup-title {
   font-family: 'Play-bold';
   font-size: 40px;
   line-height: 46px;
   color: #ff9d00;
   text-shadow: 2px 2px 0 #004080;
   margin-bottom: 24px;
   text-shadow: 2px 0px #013C60, -2px 0px #013C60, 0px -2px #013C60, 0px 2px #013C60, 1px 1px #013C60,
         -1px -1px #013C60,
         1px -1px #013C60,
         -1px 1px #013C60;
}

/* === FORM === */
.popup-form {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.input-row {
   display: flex;
   gap: 12px;
}

.popup-form input,
.popup-form textarea {
   flex: 1;
   font-family: inherit;
   font-size: 16px;
   line-height: 20px;
   padding: 12px;
   border-radius: 8px;
   border: 1px solid #013C60;
   background: #FDFFEF;
   outline: none;
   color: #013C60;
}

.popup-form textarea {
   width: 100%;
   height: 114px;
   resize: none;
   flex: none;
   box-sizing: border-box;
}

#recaptcha-container {
   margin:0 auto;
}

/* === BUTTON === */
.contact-popup .chewy-button {
   align-self: center;
}

.contact-popup .chewy-button:disabled {
   background-color: #989898;
}

#recaptcha-container {
   transform: scale(0.91);
      
      transform-origin: 0 0;
}
/* === ADAPTIVE === */
@media (max-width: 600px) {
   .popup-inner {
      width: 358px;
      height: auto;
      padding: 40px;
      border-radius: 24px;
   }

   .contact-popup-close {
      top: 0;
      right: 0;
   }

   .input-row {
      flex-direction: column;
   }

   .popup-form textarea {
      height: 75px;
   }

   .popup-form input,
   .popup-form textarea {
      font-size: 14px;
      padding: 10px 12px;
   }

   /* #recaptcha-container {
      margin-left: -15px;
   } */
}

@media screen and (max-width: 900px) {
   .container {
      background-image: url('../resourses/images/img_bg_mobile.png');
   }

   .header {
      width: 100%;
      left: 0;
   }

   .header__inner {
      width: 100%;
      padding: 16px;
   }

   .logo img {
      width: 138px;
   }

   .nav {
      display: none;
   }

   .header__actions {
      display: none;
   }

   .burger {
      display: block;
   }

   .intro {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      padding: 0;
      align-items: flex-end;
      justify-content: center;
   }

   .intro-content {
      justify-content: center;
   }

   .chewy-intro {
      width: 324px;
      height: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: center;
      margin-bottom: -113px;
   }
   
   .intro-buttons {
      flex-direction: column;
   }

   .about {
      display: flex;
      flex-direction: column;
      padding: 140px 32px 120px;
      background-image: url('../resourses/images/img_bg_white.png');
      background-size: 100% 100%;
   }

   .about-content {
      flex-direction: column;
   }

   .about img {
      width: 158px;
      margin-top: 20px;
   }
   
   .about-chewy {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
   }

   .merch {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 70px;
      margin-top: -80px;
   }

   .merch-content {
      width: 343px;
      height: auto;
      display: flex;
      align-items: center;
      padding: 16px 24px 24px;
   }
   
   .merch-info {
      width: 100%;
      gap: 16px;
   }

   .merch-image-desktop {
      display: none;
   }

   .merch-image-mobile {
      display: block;
      width: 100%;
   }

   .merch-image-mobile img {
      max-width: 100%;
   }

   footer {
      padding: 0px 16px 32px;
   }

   .footer-content {
      flex-direction: column;
      gap: 16px;
      padding-bottom: 20px;
   }

   .footer-logos {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
   }

   .casino-logo-mobile {
      display: block;
   } 

   .casino-logo-desktop {
      display: none;
   }
   
   .chewy-button {
      font-size: 16px;
   }

   .about-chewy-title,
   .intro-title,
   .merch-info-title {
      font-size: 32px;
      line-height: 30px;
   }
   
   .about-chewy-text,
   .intro-text, 
   .merch-info-text {
      font-size: 14px;
   }
}