@import url("https://fonts.googleapis.com/css?family=Manrope");

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   overflow-x: hidden;
   font-family: "Manrope";
}

:root {
   --primary-color: #FBFBFC;
   --secondary-light: #dceed3;
   --secondary-color: #8cd867;
   --secondary-dark-min: #4c7238;
   --secondary-dark: #2f4822;
   --secondary-darker: #293e20;
   --background-grey: #FAFBFB;
   --light-grey: #d6d7d4;
   --medium-grey: #667085;
   --semi-medium-grey: #868b98;
   --dark-grey: #545456;
   --text-color: #17171b;
}

.auth-page {
   width: 100%;
   min-height: 100dvh;
   display: flex;
   justify-content: center;
   align-items: stretch;
   background-color: var(--primary-color);
}

.auth-page>* {
   height: 100dvh;
}

.auth-page .first-section {
   width: 48%;
   background: linear-gradient(180deg, rgba(140, 216, 103, 0.8), rgba(120, 198, 125, 0.4)), url(../../assets/img/pattern-1.svg) no-repeat;
   background-size: cover;
   background-position: center;
   display: flex;
   justify-content: center;
   align-items: center;
}

.auth-page .first-section .logo-section {
   width: 350px;
   height: auto;
   display: flex;
   justify-content: center;
   align-items: center;
}

.auth-page .first-section .logo-section>img {
   width: 100%;
   height: fit-content;
}

.auth-page .second-section {
   width: 52%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
}


@media screen and (max-width: 1000px) {
   .auth-page {
      flex-direction: column;
      justify-content: flex-start;
   }

   .auth-page>* {
      height: auto;
   }
   
   .auth-page .first-section,
   .auth-page .second-section {
      width: 100%;
   }

   .auth-page .first-section {
      min-height: auto;
      padding-block: 50px;
   }

   .auth-page .first-section .logo-section {
      width: min(350px, 50%);
   }

   .auth-page .second-section {
      min-height: auto;
   }

   .auth-page .second-section>:nth-child(1){
      padding-top: 30px;
      padding-bottom: 70px;
   }
}