/*------------------TOP------------------*/

.top {
    background: rgba(57, 73, 91, 0.8);
    margin: 1.2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 5%;
}

.topimage {
    width: 80%;
    margin: auto 10% 0.8rem 10%;
}

.topparagraph {
    color: rgba(255, 247, 214, 1);
    text-align: center;
    font-size: 1.2rem;
    margin: 1rem 1.2rem;   
}

/*------------------MIDDLE------------------*/
.middle {
    margin: 1.8rem;    
    text-align: center;
    
}
.areas-middle {    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.title-middle, .title-botom{
    color: whitesmoke;
    font-size: 1.2rem;       
    width: 100%;
    background: rgba(27, 155, 224, 0.56);
}

.areas-middle > *{
    background: rgba(230, 244, 241, 0.6);
    width: 40%;    
    margin: 1rem;
    border-radius: 3%;
    display: flex;
    flex-wrap: wrap;
}

h2 {
    color: rgba(8, 61, 119, 1);
    font-size: 1rem;  
    margin-left: 1vh;  
}

p {
    color: rgba(13, 29, 62, 1);
    font-size: 0.55rem;    
    margin: 0;
    padding: auto 0.2vh;
}

.description {
    width: 70%;
    padding: 0.5rem;border-radius: 5%;
}

.more-link {
    width: 15%;
    text-align: center;
}

/*------------------BOTTOM------------------*/

.bottom {    
    margin: 1.8rem;     
    text-align: center;
}

.brands {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;        
}

h3 {
    background: rgba(217, 217, 217, 0.59);
    color: #004B6C;
    text-transform: uppercase;    
    font-size: 1rem;    
    padding: auto 10vh;
    z-index: 100;
    position: absolute;    
}

.brands > *{    
    border: solid 0.15rem #00ab916d;
    background: #162039;
    width: 10rem;    
    height: 22vh;     
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}

.brand-company {
    width: 100%; 
    height: 100%; 
    object-fit: contain;
    opacity: 0.65;
    
}
.brand-company:hover{
    opacity: 1;    
}

/*----------CARD_EFFECT--------------*/

.general {
    position: relative;
    top: 100%;
    justify-items: center;
    margin: 7vh auto;
}

.general:active .two {
    transform: rotate(-5deg) translateX(25vh) scale(0.7);
}

.general:active .three {
    transform: rotate(5deg) translateX(-25vh) scale(0.7);
}

.card {
    display: flex;
    align-items: center;
    justify-content: center;   
    width: 30vh;
    height: 30vh;
    border-radius: 5%;
}

.one {
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3; 
}

.two{
    position: absolute;
    opacity: .85;
    right: 0;
    z-index: 2;
    transform: rotate(-10deg) translate(8px, 8px);
}

.three {
    position: absolute;
    opacity: .85;
    left: 0;
    z-index: 1;
    transform: rotate(10deg) translate(-5px, 7px);    
}

.move {
    transition: all 0.5s cubic-bezier(.5, .40, .10, 1);
}

.brand-image {
    width: 45%;
    margin: 1.1rem;    
    border-radius: 5%;
}


/* =============================
   Mobile Styles: 0px, to 480px
   =============================
*/
@media screen and (max-width:481px){
      
    .card {         
        width: 17vh;
        height: 17vh;        
    }
    
    .general:active .two {
        transform: rotate(-5deg) translateX(15vh) scale(0.7);
    }
    
    .general:active .three {
        transform: rotate(5deg) translateX(-15vh) scale(0.7);
    }
}
    /* ================================
   Tablet Styles: 481px and greater
   ================================
*/
@media only screen and (min-width: 481px) {
    .top {  margin: 3.75rem; }

    .topimage {  width: 55%; }

    .more-link {
        width: 10%; 
        margin-left: 1.2rem;       
    }    

    .card {         
        width: 35vh;
        height: 35vh;        
    }
    
    .general:active .two {
        transform: rotate(-5deg) translateX(30vh) scale(0.7);
    }
    
    .general:active .three {
        transform: rotate(5deg) translateX(-30vh) scale(0.7);
    }
        
}

/* ================================
   Desktop Styles: 769px and greater
   ================================
*/

@media only screen and (min-width: 769px) {
    .top {  
        margin: 3.75rem;         
        flex-wrap: nowrap;
    }

    .topparagraph {        
        display: flex;        
        align-items: center;
        font-size: 1.6rem;
        padding: 2vh;
    }

    .topimage {  
        width: 40%; 
        margin: 1.5rem;
    }

    p {
        margin-top: 2vh;
        font-size: 1rem;    
        
    }
}