@import '../../css/global.css';



#aboutus{
    padding: 10rem;
    background-color: var(--blue-color);
    position: relative;
    bottom: 80px;
}

.about-us-column-1{
    background-color: #7eb3c072;
    width: 100%;
    height: 100%;
    border-radius: 20px 0px 0px 0px;

    display: grid;
    align-items: center;
    justify-content: center;
}

.about-us-column-2{
    background-color:  #7eb3c072;
    width: 100%;
    height: 100%;
    border-radius: 0px 0px 20px 0px;

    display: grid;
    align-items: center;
    justify-content: center;
}


.about-us-waves{
    opacity: 0.7;
}

.about-us-title{
    padding-inline: 25px;
    letter-spacing: 0.1rem;
    text-align: center;
}

.about-us-content{
    position: relative;
    padding-inline-start: 7.5rem;
    padding-block-start: 5rem;
    width: 70%;
}

.about-us-content h3{

    color: var(--dark-color);
}
.about-us-content p{
    color: var(--dark-color);
}

.about-us-two-columns{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 0.5fr));
    
    justify-items: center;
    align-items: center;

    position: relative;

    /* border: solid 5px;
    border-radius: 10px; */

  }

.about-us-card {
    position: relative;
    width: 100%;
    height: 80vh;
    display: inline-block;
}


.about-us-card ::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 10px;
}

.about-us-card  .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* Add opacity transition with ease-in-out effect */
}

.about-us-card  .video:hover{
    cursor: pointer;
    transition: ease-in 0.2s;
}


.about-us-card:hover .name {
    display: none; /* Hide the name when the card is hovered */
}

.about-us-card:hover .video {
    opacity: 1; /* Show the video with a smooth fade-in effect on hover */
}

.about-us-card:not(:hover) .video {
    opacity: 0; /* Smooth fade-out effect when not hovered */
}


.card1 {
    height: 100%;
    background-image: url('adrian_mountains.webp');
    background-repeat: no-repeat;
    background-size: 120%;

    border-radius: 0px 20px 0px 0px;

}

.card2 {
    background-image: url('jesse_mountains.webp');
    background-repeat: no-repeat;
    background-size: 120%;


    border-radius: 0px 0px 0px 20px;
}


@media (max-width: 798px){

.card1{
    background-size: 180%;

    background-position: 500px 0px;


    border-radius: 20px 20px 20px 20px;
}

.card2{
    background-size: 180%;


    border-radius: 20px 20px 20px 20px;
}
 #aboutus{
    padding: 0rem !important;
 }

 .about-us-two-columns{
    display: grid;
    grid-template-columns: none !important;
    grid-template-rows: 1fr 1fr;
 }

 .about-us-content{
    padding-block-start: 6rem !important;
    padding-inline-start: 1rem !important;

    width: 90%;

 }
}