@import url('https://fonts.googleapis.com/css2?family=Ysabeau+SC:wght@300;500;600&family=Ysabeau+Office:wght@100;300;700&display=swap');

* {
    font-family: 'Ysabeau Office', sans-serif;
    color: #181f1a;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Ysabeau SC', sans-serif;
}

#main {
    background: rgb(36, 53, 71);
    background: -moz-linear-gradient(90deg, rgba(36, 53, 71, 1) 0%, rgba(70, 77, 95, 1) 25%, rgba(87, 87, 101, 1) 50%, rgba(125, 102, 112, 1) 75%, rgba(137, 110, 117, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(36, 53, 71, 1) 0%, rgba(70, 77, 95, 1) 25%, rgba(87, 87, 101, 1) 50%, rgba(125, 102, 112, 1) 75%, rgba(137, 110, 117, 1) 100%);
    background: linear-gradient(90deg, rgba(36, 53, 71, 1) 0%, rgba(70, 77, 95, 1) 25%, rgba(87, 87, 101, 1) 50%, rgba(125, 102, 112, 1) 75%, rgba(137, 110, 117, 1) 100%);

}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.75) !important;
}

.btn-success {
    background-color: #152234;
    border-color:#152234;
}

.btn-success:hover {
    background-color: rgb(137, 110, 117) !important;
    border-color: rgb(137, 110, 117) !important;
}

.site-primary,
.site-primary * {
    background-color: #152234 !important;
    color: #fff !important;
}



.bg-light-accent {
    background-color: #F6F6DD;
}

h1.logo {
    color: #F6F7F6;
}

.main-container {
    margin-top: -150px;
}

.square-card {
    border-radius: 0px;
}
.round-top-left {
    border-top-left-radius: var(--bs-card-border-radius);
}
.round-top-right {
    border-top-right-radius: var(--bs-card-border-radius);
}

.borderless {
    border: 0;
}

.btn-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.call-to-action {
    opacity: 0;
}

.call-to-action:hover {
    opacity: 1;
    background-color: rgba(21, 34, 52, 0.6);
}

.call-to-action>.btn:hover {
    opacity: 1;
}

.portfolio-scroll {
    height: 300px;
    overflow-y: clip;
    overflow-x: hidden;
}

.port-img {
    width: 100%;
    animation-direction: reverse;
    opacity: 0.3;
}

.port-img:hover {
    transform: translateY(-100%) translateY(300px);
    opacity: 1;
    transition: transform 7s;

}

.w-lg-33 {
    width: 33% !important;
}

.main-icon {
    width: 265px !important;
}

.code-box *{
    background-color: #152234;
    color: #fff;
}

.code-tags {
    color: rgba(137, 110, 117, 1);
    font-weight: 600;
}


/*Start of rotating card*/
.flip-card-3D-wrapper {
    height: 100%;
    perspective: 900px;
    margin: 10px auto;
}

.flip-card {
    height: 100%;
    transition: all 1s ease-in-out;
    transform-style: preserve-3d;
    height: 500px;
}

.flip-card img {
    display: block;
    width: 100%;
    object-fit: cover;
    min-height: 350px;
}


.do-flip {
    transform: rotateY(-180deg);
}

.flip-card-btn-turn-to-back,
.flip-card-btn-turn-to-front {
    position: absolute;
    visibility: hidden;
    border-radius: 10px;
}

.flip-card-btn-turn-to-back {
    border: white;
    background: white;
    color: #858AA6;
}

.flip-card-btn-turn-to-front {
    border: #152234;
    background: #152234;
    color: white;
    position: absolute;
    bottom: 0px;
    left: 100%;
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    backface-visibility: hidden;
    z-index: 2;
    border-radius: 10px;
    border: 5px solid #152234;
    min-width: 100%;
}

.flip-card-front {
    background: #fff;
}

.flip-card-back {
    background: #152234;
    transform: rotateY(180deg);
    background-image: url(images/hestia-logo.jpg);
    background-size: 35%;
    background-repeat: no-repeat;
    background-position: 86%;
}

.flip-card-front {
    color: white;
}

.flip-card-back h4 {
    color: #fff;
}

.flip-card-back form input {
    margin-top: 5px;
    margin-bottom: 5px;
}
/*End of rotating card*/

@media (min-width: 768px) {
    #collapseFootNav {
        display: flex;
    }
}

@media (max-width: 1400px) {
    .w-lg-33 {
        width: 33% !important;
    }
}


@media (max-width: 1200px) {
    .main-container {
        margin-top: -100px;
    }
}



@media (max-width: 992px) {
    .main-container {
        margin-top: -100px;
    }

    .portfolio-scroll {
        height: 200px;
        overflow-y: clip;
        overflow-x: hidden;
    }

    .port-img:hover {
        transform: translateY(-100%) translateY(200px);
        opacity: 1;
        transition: transform 7s;

    }

    .w-md-50 {
        width: 50% !important;
    }
}

@media (max-width: 768px) {
    .card-image-top {
        width: 100%;
        height: 379px;
        object-fit: cover;
    }

    .main-container {
        margin-top: -25px;
    }
    .flip-card-back {
        background-image: unset !important;
    }
    .flip-card-back .card-body {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .main-container {
        margin-top: 0px;
    }

    .portfolio-scroll {
        height: 100px;
        overflow-y: clip;
        overflow-x: hidden;
    }

    .port-img:hover {
        transform: translateY(-100%) translateY(100px);
        opacity: 1;
        transition: transform 7s;

    }
}

/*
Shuttle Gray	#596275	Primary
Heavy Metal	#181f1a	Info
Fruit Salad	#50985b	Success
Brandy Punch	#cd8823	Warning
Pomegranate	#f44336	Danger

Light shades: F6F7F6
Light accent: 717882
Main: 8493A0
Dark Accent: 7F8A9F
Dark shades: 152234

*/