@import url('./general.css');


.main-info p {
    margin-bottom: 2rem;
}


#motto {
    font-size: 2.5rem;
    font-weight: bold;
    width: 50vw;
}

p span{
    color: var(--secondary-font-color);
}

#main-img {
    max-height: 60vh;
    margin-left: 3rem;
    border-radius: 8px;
    box-shadow: var(--button-shadow);
}

.secondary-section h2 {
    padding-right: 1.5rem;
}

.card i {
    color: var(--secondary-font-color);
}

@media screen and (max-width: 890px) {

   .image-container {
    display: none;
    }
    .main-section {
       justify-content: space-between;
       margin-left: 1rem;
        
    }
    .main-info {
        max-width: 90vw;
        padding-inline: 2rem;
        margin-inline: 0;
        right: 10%;
    }

    .main-info p {
        margin-bottom: 2rem;
        padding-inline: 0;
        margin-inline: 0rem;
    }

    #motto {
        font-size: 1.8rem;
        width: 82vw;
    }

    .card-container {
        justify-content: center;
        align-items: center;       
    }

  .secondary-section {
      margin-left: 6rem
  }

   .secondary-section h2 {
     width: 120%;
     text-align: center;
     padding-left: 1rem;
  }
}