@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap");

:root {
   --Desaturated-Red: hsl(0, 36%, 70%);
   --Soft-Red: hsl(0, 93%, 68%);

   --Dark-Grayish-Red: hsl(0, 6%, 24%);


   --bg-from: hsl(0, 0%, 100%);
   --bg-to: hsl(0, 100%, 98%);

   /* 2 */
   --from: hsl(0, 80%, 86%);
   --to: hsl(0, 74%, 74%);
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Josefin Sans", sans-serif;
}

body {
   background-image: linear-gradient(135deg, var(--bg-from), var(--bg-to));
}

main {
   display: flex;
   /* justify-content: center; */
   /* align-items: center; */
   min-height: 100vh;
}

.card {
   display: flex;
   /* width: 100%; */
   /* min-height: 100vh; */
}

.left-sec {
   width: 57.65%;
   background-image: url("./images/bg-pattern-desktop.svg");
   /* background-position: left center; */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   padding-top: 4.125rem;
   padding: 0 40px 0;
}

.inner-container {
   max-width: 450px;
   margin: auto;
}

.logo {
   margin-top: 4.125rem;
   width: 10rem;
}

/* .text-container{
    margin: 8.25rem 0 0;
} */

.text-container h1 {
   font-size: 4em;
}

h1 {
   font-size: 4em;
   letter-spacing: 1.25rem;
}

.text-container .we-are {
   text-transform: uppercase;
   color: var(--Desaturated-Red);
   font-weight: 300;
   /* letter-spacing: 1.5rem; */
   /* font-size: 4em; */
}
.we-are {
   text-transform: uppercase;
   color: var(--Desaturated-Red);
   font-weight: 300;
   /* letter-spacing: 1.5rem; */
   /* font-size: 4em; */
   margin-top: 8.25rem;
}

.text-container .coming-soon {
   color: var(--Dark-Grayish-Red);
   /* display: inline-block; */
   text-transform: uppercase;
   /* letter-spacing: 1.5rem; */
   /* font-size: 4em; */
   line-height: 1.1;
}

.coming-soon {
   color: var(--Dark-Grayish-Red);
   /* display: inline-block; */
   text-transform: uppercase;
   /* letter-spacing: 1.5rem; */
   /* font-size: 4em; */
   line-height: 1.1;
}

.text-container .desc {
   color: var(--Desaturated-Red);
   font-size: 1em;
   margin: 1.125rem 0 2.5rem;
   line-height: 1.75;
}

.desc {
   color: var(--Desaturated-Red);
   font-size: 1em;
   margin: 1.125rem 0 2.5rem;
   line-height: 1.75;
}

form {
   width: 100%;
   /* border: 1px solid greenyellow; */
   position: relative;
   /* padding: 1rem 0; */
}

input[type="text"] {
   padding: 1.25rem;
   font-size: 1rem;
   width: 100%;
   color: var(--Dark-Grayish-Red);
   border-radius: 2rem;
   border: 1px solid hsl(0, 36%, 70%);
   /* outline: 0; */
   outline-color: var(--Soft-Red);

   /* when error */
   /* background-image: url("./images/icon-error.svg"); */
   background-repeat: no-repeat;
   background-position: right 7rem center;
}

input[type="text"]::placeholder {
   color: var(--Desaturated-Red);
}

.submit-btn {
    padding-top: 3px;
   /* border: 1px solid; */
   display: inline-block;
   /* height: 1.25rem; */
   position: absolute;
   right: 0;
   /* top: center; */
   /* border: 1px solid; */
   border-radius: 2rem;
   background: linear-gradient(to right, var(--from), var(--to));

   /* box-shadow: 1px 10px 2rem -2px linear-gradient(red, greenyellow); */
   box-shadow: 1px 10px 2rem -2px var(--Desaturated-Red);
   
}

input[type="submit"] {
   border: none;
   padding: 1.175rem 3rem;
   /* position: absolute; */
   /* right: 0; */
   top: 20px;
   background-color: transparent;
   background-color: black;
   border-radius: 2rem;
   background: linear-gradient(to right, var(--from), var(--to));
   background-image: url("./images/icon-arrow.svg");
   background-size: 0.75rem;
   background-position: center;
   background-repeat: no-repeat;
   cursor: pointer;
   /* background-color: black; */
}

input[type="submit"]:hover {
    /* background: linear-gradient(to right, var(--from)); */
    background-color: hsl(0, 80%, 86%);
    background-image: url("./images/icon-arrow.svg");
    background-size: 0.75rem;
    background-position: center;
    background-repeat: no-repeat;
}


.right-sec {
    
   color: white;
   width: 42.35%;
   background-image: url(./images/hero-desktop.jpg);
   background-size: cover;
   background-position: center;
}

.bg-mobile {
   display: none;
}

.error-text {
   color: var(--Soft-Red);
   padding: 0.5rem 1.25rem;
   display: none;
}

@media (max-width: 750px) {
   .card {
      /* flex-direction: column; */
   }

   .left-sec {
      width: 100%;
      /* padding: 0; */
      padding: 0 30px 0;
      padding-bottom: 4.25rem;
   }

   .left-sec .logo {
      /* display: none; */
      width: 100px;
      margin: 2rem 0;
   }

   .text-container h1 {
      /* font-size: 2.5rem; */
   }
   h1 {
      font-size: 2.5rem;
      text-align: center;
      letter-spacing: 1rem;
   }

   .we-are {
      margin-top: 4rem;
   }

   .desc {
      /* color: black; */
      text-align: center;
      font-size: 14.5px;
      margin: 0.75rem 0 1.75rem;
      line-height: 1.5;
   }
   /* .right-sec{
        height: 84px;
        width: 100%;

        background-image: url("./images/logo.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top;
    } */

   .bg-mobile {
      display: block;
      /* height: 200px; */
      width: calc(100% + 60px);
      margin-left: -30px;
      margin-right: -30px;
      margin-top: -4px;
   }
   .right-sec {
      display: none;
   }

   input[type="text"] {
      padding: 1rem 1.25rem;
      font-size: 0.875rem;
      background-position: right 5rem center;
   }
   input[type="submit"] {
      padding: 0.875rem 2rem;
      /* margin-top: 0; */
   }

   .submit-btn {
      /* padding: 1.25rem; */
      /* padding: 1.25rem 2.5rem; */
   }

   .error-text {
      display: none;
      font-size: 0.875rem;
   }
}


.attribution {
   font-size: 11px;
   text-align: center;
   padding: 0.5rem 0;
}

.attribution a {
   color: hsl(228, 45%, 44%);
}