/* Universal Style */
*,
*::before,
*::after {
    box-sizing: border-box;
    
}
html,
body {
    background-color: #000;
    font-family: 'Chivo', sans-serif;
    margin: 0;
    padding: 0;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    
}
.container {
    max-width: 375px;
    overflow-x: hidden;
    background: 
        linear-gradient(rgba(18,23,37,0.65), rgba(18,23,37,0.65)),
        url("../images/host-mobile-image.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.content-container {
    width: 303px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.5em;
    padding: 2.25em; 
}
main {
    width: 303px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5em;
}
.text-sec {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    
}
.text-sec > h1 {
   font-size: 2rem;
   text-align: center;
   text-transform: uppercase;
   font-weight: 300;
   line-height: 1.2;
   color: #54E6AF;
}
.text-sec  span {
    color: #ffffff;
}
.text-sec > p {
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.5;
    color: #C2CBE5;
}

   /* Logos Section */

.logos-sec {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
 
  /* Form Section */
  .form-sec > form {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
  }
    .form-sec > form > input {
        width: 303px;
        padding: 0.5em 2em;
        border: none;
        border-radius: 25px;
        font-size: 0.875rem;
        line-height: 2;
        background-color: #2C344B;
        color: #ffffff; 
        outline: none;  
    }
    .form-sec > form > input:focus {
        background-color: #2C344B;
        color: #ffffff;
    }
    .form-sec > form > input:invalid {
        border: 2px solid #FB3E3E;
    }
    .form-sec > form > input::placeholder {
        color: #6C7A9B;
    }
    input[type="email"]::-webkit-inner-spin-button,
     input[type="email"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0
     }
     input:-webkit-autofill,
     input:-webkit-autofill:hover,
     input:-webkit-autofill:focus,
     input:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 1000px #2C344B inset !important;
            -webkit-text-fill-color: #ffffff !important;
            caret-color: #ffffff !important;
        }
    .form-sec > form > button {
        width: 303px;
        padding: 0.5em 2em;
        border: none;
        font-size: 0.875rem;
        line-height: 2;
        border-radius: 28px;
        color: #121725;
        font-weight: 700;
        background-color: #54E6AF;
        text-align: center;
        cursor: pointer;
    }
    .form-sec > form > button:hover,
    .form-sec > form > button:focus {
        background-color: #54E6AF;
        opacity: 0.95;
    }
    .error{
        color: #FB3E3E;
        font-size: 0.875rem;
        text-align: center; 
    }
       /* Footer Design */
      footer  {
        font-size: 1rem;
        line-height: 2;
        color: #C2CBE5;
        text-align: center;
      }
       footer a {
        color: #5A66BA;
        text-decoration: none;
         }
        footer a:hover,
        footer a:focus {
             text-decoration: underline;
             color: #54E6AF;
        }  

        /* Reponsive Design */
        /* Tablet Style */
    @media only screen and (min-width: 768px) {
       .container {
            max-width: 768px;
            height: 1024px;
            background-color: #121725;
            background-image: unset;
            gap: 0.5em;
            padding: 2.75em 2.75em;
            position: relative;
        }
        .container::before {
            content: "";
            position: absolute;
            top:0;
            right:0;
            width: 416px;
            height: 712px;
            background-image: url(../images/image-host-tablet.png);
            background-size: cover;
            background-repeat: no-repeat;   
            opacity: 0.80;
        }
        .container::after {
            content: "";
            position: absolute;
            top: auto;
            bottom: 260px ;
            right: -120px;
            left: auto;
            width: 232px;
            height: 104px;
            background-image: url(../images/bg-pattern-dots.svg);
            background-size: cover;
            background-repeat: no-repeat;   
            opacity: 0.85;
        }
        .content-container {
            width: 680px;
            height: 712px;
            align-items: flex-start;
            justify-content: space-between;
            padding: 0;
        }
        main {
            max-width: 592px;
            height: 100%; ;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .text-sec {
            width: 100%;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .text-sec h1 {
          text-align: left;
        }
        .text-sec p {
            text-align: left;
        }
        .form-sec {
            order: 2;
        }
        .logos-sec {
            order: 3;
            width: 547px; 
        }
        .form-sec > form {
           width: 448px;
            position: relative;
        }
        .form-sec > form > input {
           width: 100%;
           height: 48px;
           
        }
        .form-sec > form > button {
            position: absolute;
            width: 172px;
            right: 3px;
            top: 3px;   
        }
         .error {
            align-self: self-start;
            margin-top: 0;
            margin-left: 2em;
         }
}
            /* Desktop Design */
        @media only screen and (min-width: 1440px) {
            .container {
                max-width: 1440px;
                height: 960px;
                padding: 5em 5em;
            }
            .container::before{
                content: "";
                position: absolute;
                width: 960px;
                height: 654px;
                background-image: url(../images/image-host-desktop.png);
                background-size: cover;
                background-repeat: no-repeat;
                top: auto;
                right: -20px;
                opacity: 0.80;
            }
            .container::after {
                content: "";
                position: absolute;
                top: auto;
                bottom: 130px ;
                right: 0;
                opacity: 0.85;
            }
            .content-container {
                width: 1120px;
                height: 654px;
                gap: 4em; 
            }
            main {
                width: 736px;
                height: auto;
                padding: 4em 4em 0 0;  
            }
            .text-sec {
                max-width: 665px;
                height: auto;
                padding:0;
            }
        }