:root{
    --greenColor1:rgb(57, 211, 0);
    --greenColor2:rgb(0, 172, 55);    
    --grayColor1:rgb(222, 222, 222);
    --grayColor2:rgb(154, 154, 154);
    --blueColor1:rgb(16,184,236);
    --blueColor2:rgb(15,154,197);
    --violetColor1:rgb(100,45,145);
    --violetColor2:rgb(85,37,120);

    
}


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


body{
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-text-smoothing:antialiased;
    -moz-osx-text-smoothing:grayscale;
    font-family: "Open Sans";
    color: #000;    
    font-size: 14px;   
}


a,
a:visited,
a:link,
a:active,
a:hover{
    color: inherit;
    text-decoration: none;
}


/* Desktop */
.container{
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 3px 3px 5px rgba(224, 224, 224, 0.85); 
    margin: 0px auto;
    margin-top: 20px;
    margin-bottom: 10px;
    border: 1px solid var(--grayColor1);
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}


.card{
    display: flex;
    justify-content: center;
    align-items: center;    
    width: 100%;
    height: auto;
}

img.brand{    
    width: 100%;
    height: 100%;
    max-width: 220px;    
}

.content{    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;    
    max-width: 500px;   
    padding-bottom: 25px;
    padding-top: 20px;    
}


img.brand{
    width: 100%;
    height: 100%;
    max-width: 220px;
}


img.logo{
    width: 100%;
    max-height: 20px;
}

img.logo-x{
    width: 100%;
    max-height: 53px;
}

img.logo-y{
    width: 100%;
    max-height: 24px;
}

p.desc{
    margin-bottom: 10px;
    padding: 20px;
}

.button{
    display:flex;
    flex-direction: row;
}


.btn-con{
    display: block;
    justify-content: center;
    text-align: center;
    width: 140px;   
    background-color: #fff;
    border: 1.9px solid var(--grayColor1);
    border-radius: 8px;
    padding: 7px 11px;
    text-transform: uppercase;
    font-weight: 730;
    cursor: pointer;
    transition: all .3s linear;
    margin: 5px;
}


.btn-con:hover{
    border: 1.8px solid var(--greenColor1);    
}


.line-green{
    background: linear-gradient(90deg, var(--greenColor1) 0%, var(--greenColor2) 100%);    
    width: 100%;
    height: 4px;    
}


.line-blue{
    background: linear-gradient(90deg, var(--blueColor1) 0%, var(--blueColor2) 100%);    
    width: 100%;
    height: 4px;    
}


.line-violet{
    background: linear-gradient(90deg, var(--violetColor1) 0%, var(--violetColor2) 100%);    
    width: 100%;
    height: 4px;    
}


.line-gray{
    background: linear-gradient(90deg, var(--grayColor1) 0%, var(--grayColor2) 100%);    
    width: 100%;
    height: 4px;    
}


/* Responsive */

@media (max-width:730px){       
    .container{
        width: 100%;
        max-width: 300px;
        user-select: none;
    }
    
    .card{
        display: flex;   
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .content{           
        padding-bottom: 5px;
    }


    .button{
        display: flex;
        flex-direction: column;        
    }

    .btn-con{        
        margin-bottom: 10px;        
    }
    

    p.desc{
        display: none;
    }
   
    
    img.logo{
        width: 100%;
        max-height: 20px;
        margin-bottom: 15px;
    }

    
    img.logo-x{
        width: 100%;
        max-height: 51px;
        margin-bottom: 25px;
    }
   
    img.logo-y{
        width: 100%;
        max-height: 24px;
        margin-bottom: 25px;
    }
    
    img.brand{
        margin-top: 8px;
    }


    .btn-con{
        pointer-events: none;        
    }
}