@import url("https://use.typekit.net/tmo8zuj.css");

/*
Theme Name: Die Kleine Garage
Theme URI: https://wordpress.org/
Author: Lazăr Ganea
Author URI: https://wordpress.org/
Description: Custom developed theme
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
This theme, like WordPress, is licensed under the GPL.
*/

/* Resets */

/*
1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
box-sizing: border-box;
}

/*
2. Remove default margin
*/
* {
margin: 0;
}

/*
Typographic tweaks!
3. Add accessible line-height
4. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}

/*
5. Improve media defaults
*/
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}

/*
6. Remove built-in form typography styles
*/
input, button, textarea, select {
font: inherit;
}

/*
7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
margin-bottom: 0px!important;
}

/*
8. Create a root stacking context
*/
#root, #__next {
isolation: isolate;
}

body {
    overflow-x: hidden;
    background-image: url(assets/bg-gray.png)!important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.nostyle {
	text-decoration: none!important;
}

/* Fonts */


@font-face {
    font-family: "BW Modelica Regular";
    src:  url('fonts/BwModelica-Regular.otf');

}
@font-face {
    font-family: "BW Modelica Medium";
    src:  url('fonts/BwModelica-Medium.otf');

}

@font-face {
    font-family: "BW Modelica Bold";
    src:  url('fonts/BwModelica-Bold.otf');

}


/* Vars */

:root {
    --main-green: #1A6744;
    --text-gray: #7B7B7B;
    --red: #DC2D24;
}

/* Utilities */

html {
    margin-top: 0px!important;
}

p, h1 {
    font-family: "BW Modelica Medium";
}

.spacer {
    padding-top: 100px;
}

.contact-band {
	border-bottom-left-radius: 40px;
	border-bottom-right-radius: 40px;
}

.flex-center {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.grid {
    display: grid;
    grid-template-columns: 25% 74%;
    gap: 20px;
}

.hero-s {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;

    display: none;
}

.grid-lvl-2 {
    display: grid;
    grid-template-columns: 41% 57%;
    column-gap: 20px;
}

.links {
    cursor: pointer;
    
}

.links img:hover{
    scale: 1.02;
    transition: scale 1s;
}
.links img{
    transition: scale 1s;
}

.small-view {
    display: none;
}

.large-view {
    display: grid;
}

.return {
    display: flex;
    flex-direction: row;
    font-family: "BW Modelica Bold";

    font-weight: 600;
}

.back {
    text-decoration: none;
    line-height: 1em;
    font-weight: 600;
    color: #ea292a;
    font-size: 20px;
}

.back:hover {
    opacity: 0.8;
    color: #ea292a;
}

.logo {
    max-width: 230px;
}
.menu-well {
    margin-top: 50px;
    margin-bottom: 40px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.back-chevron {
    width: 22px;
    height: 22px;
}

.story-grid {
    display: grid;
    grid-template-columns: 27% 70%;
    gap: 3%;
}

.story-main-img {
    border-radius: 50px;
    width: 100%;
    
}

.story-content {
    background-color: #E8322F;
    border-radius: 50px;
    margin: 0px 10px!important;

    height: 100%;
    padding: 70px!important;

    max-width: 100%;
    min-height: 470px!important;
}

.story-header {
    font-size: 42px;
    color: #fff;
}

.story-text {
    color: #fff;
    font-size: 24px;
    line-height: 1.3em;
    font-weight: 400;

    font-family: 'BW Modelica Regular';
    margin-top: 15px!important;
}

.islid.slick-initialized.slick-slider > .slick-prev{
    z-index: 22;
    
    top: unset;
    left: 85px!important;
    bottom: 85px!important;
    
    /* width: 10%!important; */
    background: unset!important;
}


.islid.slick-initialized.slick-slider > .slick-next  {
    z-index: 22;
    
    top: unset;
    left: 150px!important;
    bottom: 85px!important;
    
    /* width: 40%!important; */
    background: unset!important;
}

.slick-img {
    width: 50px!important;
    max-width: 100px!important;
}

.islid.slick-initialized.slick-slider > .slick-prev::before{
    display: none;
}
.islid.slick-initialized.slick-slider > .slick-next::before{
    display: none;
}

.max-600 {
    max-width: 500px;
}

.abstract-glass {
    position: absolute;
    right: 70px;
    bottom: 50px;
    max-width: 170px;
}

.abstract-beansv2 {
    position: absolute;
    right: 70px;
    bottom: 50px;
    max-width: 170px;
}

.islid {
    height: 100%;
}

.islid > .slick-list {
    height: 100%;
}

.islid > .slick-list > .slick-track {
    height: 100%;
}



.smi-2 {
    display: none;
}

.story-card {
    margin-top: 40px;
    width: 100%;
    height: 70vh;

    border-radius: 40px;
    background-position: center;
    background-size: cover;

    position: relative;
    cursor: pointer;

    padding: 60px;
}

.story-card:hover .tag{
    visibility: hidden;
}

.story-card:hover .tap{
    visibility: hidden;
}

.story-card:hover .story-text-sm{
    visibility: visible;
}

.story-card:hover {
    box-shadow: inset 0 0 0 2000px #ea292ab8;
}

.story-text-sm {
    visibility: hidden;

    font-size: 17px;
    line-height: 1.3em;
    font-weight: 600;
    color: #fff;
}

.tag {
    background-color: #ea292a;
    display: inline-block;

    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: 23px;
    line-height: 1.2em;

    padding: 15px;
    border-radius: 10px;

    position: absolute;
    left: 30px;
    top: 25%;
}

.tap {
    max-width: 80px;
    position: absolute;
    bottom: -30px;
    right: 0;
}

.card-1 {
    background-image: url(assets/main-mob.png);
}
.card-2 {
    background-image: url(assets/origine.png);
}
.card-3 {
    background-image: url(assets/colaboratori.png);
}

.sm-view-story {
    display: none;
}

.slick-slide {
    border-radius: 40px!important;
    margin: 50px 0px;
    transition: all 1s;
}

.slick-slide img {
    border-radius: 40px!important;
}

.slick-current img {
    scale: 1.2;
    transition: all 1s;
}

.player video {
    min-height: 100vh;
    object-fit: cover;
    width: 100%;
}

.fade-out {
    opacity: 0;
    transition: opacity 1s ease-out;
    pointer-events: none;
}

.fade-in {
    opacity: 1;
    transition: opacity 1s ease-in;
    display: flex !important;
}

.video-lg {
    background-color: #fff!important;
}
.player {
    background-color: #fff!important;
}

video {
    background-color: #fff!important;
}

.pin {
    width: 35px;
}

.sm-holder {
    display: flex;
    align-items: center;
}

.sm {
    margin-right: 20px;
    width: 33px;
    cursor: pointer;
}

.contact-grid {
    display: flex;
    align-items: center;
}

.contact-well {
    background-image: url(assets/bg.png);
    background-size: contain;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;

    padding: 40px;
}

.contact-text {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2em;

    font-family: "BW Modelica Regular";
}

.slick-next:before, .slick-prev:before {
    color: #ea292a!important;
    font-size: 25px!important;
}

.v-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.slick-slide {
    padding: 10px;
}

#home-logo {
    margin: auto 0;
}

.contact-well-footer {
	margin-top: 30px;
}

.menu-card-text {
    font-size: 5rem;
    line-height: 1.2em;
    color: #fff;
}

.menu-card {
    background-color: #3E485C;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    overflow: hidden;
}

.menu-card-dark{
    background-color: #3E485C;
    overflow: hidden;
}

.regular-modelica {
    font-family: "BW Modelica Regular";;
}

.menu-card-red{
    background-color: #E8322F;
}

.contact-card {
    margin-top: 20px;
}

.menu-col {
    gap: 20px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.pr {
    position: relative;
}
.hr {
    margin-top: 50px!important;
    margin-bottom: 30px;
    width: 100%;
    height: 3px!important;
    background-color: #fff;
    opacity: 1;
    display: inline-block;

}

.contact-p {
    width: 50px;
}

.adress-line-home {
    color: #fff;
    font-size: 20px;
    padding-left: 25px;
}

.home-contact {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.poweredby {
    text-align: center;
    font-size: 16px;
    margin-top: 20px;
    padding-bottom: 40px;
}

.s-media {
    max-width: 50px;
}

.j-center {
    justify-content: center;
    flex-direction: row;
    gap: 15px;
    margin-top: 20px;
    /* margin-bottom: 20px; */
}

.invite {
    color: #3E485C;
    text-align: center;
    font-size: 24px;
}

.menu-card-v2 {
    border-radius: 30px;
    height: 100%;
    padding: 40px 30px;

    min-height: 285px;
    overflow: hidden;

}

.menu-card-text-v2 {
    font-size: 3em;
    color: #fff;
    line-height: 1.1em;
    font-family: "BW Modelica Bold";;
}

/* ABSTRACTs */

.abstract-phone {
    position: absolute;
    bottom: -10px;
    right: -30px;
    max-width: 100%;
}

.abstract-bottle {
    position: absolute;
    bottom: -10px;
    right: -30px;
    max-width: 100%;
}

.abstract-drink {
    position: absolute;
    top: -45px;
    left: -40px;
    max-width: 100%;
}

.flex-center-v {
    display: flex;
    align-items: center;
    justify-content: center;
}

.abstract-croissant{
    position: absolute;
    top: -10px;
    right: -30px;
    max-width: 170px;
}

.abstract-fruits{
    position: absolute;
    bottom: -50px;
    left: -20px;
    max-width: 175px;
}

.abstract-beans {
    position: absolute;
    right: 20px;
    bottom: 10px;
    max-width: 100%;
}

.no-style-a {
    text-decoration: none;
}

.menu-card-wrapper {
    height: 100%;
    width: 100%;
}

.galerie-fs {
    font-size: 3.5em;
}

.poveste-fs {
    font-size: 2em;
}

.contact-full {
    display: none;
}



@media only screen and (max-width: 1400px) { 
    .story-grid {
        grid-template-columns: unset;
        display: block;
    }

    .smi-2 {
        display: block;
    }

    .smi-1 {
        display: none;
    }
    
    .story-content {
        min-height: 570px!important;
    }

}

@media only screen and (max-width: 1200px) { 
    .story-grid {
        grid-template-columns: unset;
    }

    .smi-2 {
        display: block;
    }

    .smi-1 {
        display: none;
    }
    


}


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

    .story-header {
        font-size: 30px;
    }

    .story-text {
        font-size: 18px;
    }

    .contact-full {
        display: block;
    }

    .menu-card-text-v2 {
        font-size: 26px;
    }

    .abstract-form {
        max-width: 70%;
    }

    .adress-line-home {
        
        color: #fff;
        font-size: 17px;
        padding-left: 10px;

        line-height: 1.3em;
    }

    .hr {
        margin-top: 40px !important;
        margin-bottom: 20px;
        width: 100%;
        height: 3px !important;
        background-color: #fff;
        opacity: 1;
        display: inline-block;
    }

    .pn-padd {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pn-padd p {
        margin-top: -90px;
    }

    .home-contact {
        margin-top: 10px;
    }

    .contact-p {
        width: 37px;
    }

    /* ABSTRACTs */

    .abstract-phone {
        position: relative;
        float: right;
        margin-top: -80px;
    }

    .abstract-bottle {
        position: absolute;
        bottom: -110px;
        right: 0px;
    }

    .abstract-drink {
        position: absolute;
        top: -25px;
        left: -50px;
    }


    .abstract-croissant{
        position: absolute;
        top: -10px;
        right: -30px;
        max-width: 150px;
    }

    .abstract-fruits{
        position: absolute;
        bottom: -50px;
        left: -20px;
        max-width: 150px;
    }

    .abstract-beans {
        position: absolute;
        right: 20px;
        bottom: 10px;
        max-width: 50%;
    }

    .grid {
        grid-template-columns: 48% 48%;
        flex-wrap: wrap;
        /* overflow: hidden; */
        gap: 4%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .menu-card-text {
        font-size: 3rem;
    }

    .menu-card {
        min-height: 420px;
    }

    
    .grid-lvl-2 {
        grid-template-columns: 1fr;
        gap: 3%;
        height: 100%;
    }
	
    .menu-card-v2  {
        min-height: unset;
        padding: 10px 10px;
        border-radius: 20px;
    }

    .contact-card {
        margin-top: 3%;
    }

    .hide-large {
        display: none;
    }

	.contact-well-footer {
		margin-top: 8px;
	}

    .hero-s {
        height: auto;
    }

    .sm-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    .padd-top-menu {
        padding-top: 30px;
    }

    .large-view-story {
        display: none;
    }

    .sm-view-story {
        display: block;
    }

    .logo {
        max-width: 160px;
    }

    .slick-slide {
        margin: 10px;
    }

    .slick-current img {
        scale: unset;
        transition: all 1s;
    }

}

@media only screen and (max-width: 580px) {
	
	
body {
		background-image: url(https://diegarage.ro/wp-content/uploads/2025/02/bg-mobile.png)!important;
		
	}

    .abstract-beans {
        position: absolute;
        right: 20px;
        bottom: 10px;
        max-width: 80%;
    }

    .slick-slide {
        margin: 10px;
    }

    .slick-current img {
        scale: unset;
        transition: all 1s;
    }

    .slick-prev {
        z-index: 222;
    }
    .slick-next {
        z-index: 222;
    }

    .slick-prev {
        left: 45px!important;
    }
    .slick-next {
        right: 55px!important;
    }

}