@font-face {
    font-family: josef;
    src: url(../fonts/Josefin_Slab/static/JosefinSlab-Medium.ttf);
}

body {
    font-family: Georgia, josef , Times, serif;
}
.logo {
    height: 30rem;
    position: relative;
    bottom: 35px;
    z-index: -1;
}

.border-1 {
    border-width: 1px;
}

.icon-m {
    width: 35px;
}
.icon-h {
    width: 135px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.5em;
    font-weight: bold;
    line-height: 1.2;
    color: #2d3748;
}

h1 {
    font-size: 2.25rem;
}

h2 {
    font-size: 1.875rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

.bg_gray {
    background-color: #393535;
}

.bg_img {
    background-image: url("../img/bg-1.jpg");
    opacity: 6%;
}

.sam {
    font-size: 4rem;
    font-weight: 900;
}

/* footer */

.bg_footer {
    background-color: #0e1927;
    /* color: #e6c9a2; */
}

.bg-darkblue {
    background-color: #0e1927;
}

.text-yellow-500 {
    color: #fbbf24;
}

.border-yellow-500 {
    border-bottom: 1px solid #fbbf24;
    max-width: 30%;
}

.txt_blue {
    color: #219ebc;
}

.border_blue {
    border-color: #219ebc;
}

.border_blue:hover {
    border-color: #219ebc;
}

.bg_blue {
    background-color: #219ebc;
}

.gallery_card {
    background-color: #fff;
    width: 80%;
    height: 6rem;
    align-content: center;
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset,
        rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
    opacity: 0;
    transform: perspective(1000px) translateX(0) rotateY(90deg);
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.gallery_card_rtl{
    transform-origin: right;
}
.gallery_card_ltr{
    transform-origin: left;
}

@keyframes slideIn3D {
    from {
        transform: perspective(1000px) translateX(-100%) rotateY(90deg);
        opacity: 0;
    }
    to {
        transform: perspective(1000px) translateX(0) rotateY(0);
        opacity: 1;
    }
}

.relative:hover .gallery_card {
    opacity: 1;
    transform: perspective(1000px) translateX(0) rotateY(0);
}