:root{
    --main-background: #0E1116;
    --primary-text: #E4E6EB;
    --body-text: #B0B3B8;
    --button-background: #2D3748;
    --button-hover-background: #3A475C;
    --button-text: #FFFFFF; 
    --button-padding: 15px;
    --button-font-size: 1.2rem;
    --button-radius: 4px;
    background-color: var(--main-background);
}

body{
    color: var(--body-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100vh;
        min-height: 825px;
    width: 100vw;
    overflow-x:hidden;
    display:flex;
    flex-direction: column;
    align-items: center;
    margin: 0px;
}

.content{
    width: 100%;
    height: 100%;
        max-width: 1080px;
}

.header{
    height: 20%;
}

.logo{
    height: 100%;
    object-fit: contain;
}

.information{
    display:flex;
    padding: 20px;
    justify-content: center;
    height: 55%;
}

.info-left{
    width: 50%;
}

.title{
    font-size: 1.8rem;
    color: var(--primary-text);
}

.description{
    font-size: 1.2rem;
}


@media (min-wdith: 600px){
    .title{
        font-size: 1.9rem;
    }

    .description{
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px){
    .title{
        font-size: 2.4rem;
    }

    .description{
        font-size: 1.7rem;
    }
}

.info-right{
    width: 50%;
    height: 100%;
    display:flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.mockup{
    height: 90%;
    width: 100%;
    object-fit: contain;
}

.cta-container{
    display:flex;
    width: 100%;
    justify-content: space-around;
}

.cta-left{
    width: 50%;
    display:flex;
    justify-content: center;
    align-items: center;
}

.cta-right{
    width: 50%;
    display:flex;
    justify-content: center;
    align-items: center;
}

.cta-btn {
margin: 10px;
  background-color: var(--button-background);
  color: var(--button-text);
  padding: var(--button-padding);
  font-size: var(--button-font-size);
  border: none;
  border-radius: var(--button-radius);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.cta-btn:hover {
  background-color: var(--button-hover-background);
  transform: translateY(-2px);
}

.cta-btn:active {
  transform: scale(0.98);
}

.form{
    width: 100%;
    height: 1500px;
    overflow-y:hidden;
    display: none;
    justify-content: center;
}