/* ==========================================================================
   JUODASIS GANDRAS UI KIT
   ========================================================================== */

:root {

    /* ==========================================================================
       COLORS
       ========================================================================== */

    --jg-red: #B32025;
    --jg-red-hover: #971A1E;

    --jg-dark: #161616;
    --jg-text: #1D1D1D;

    --jg-light: #F5F2EC;
    --jg-white: #FFFFFF;
    --jg-light-hover: #ECE6DB;


   /* ==========================================================================
   EFFECTS
   ========================================================================== */

--jg-cut: 14px;
--jg-border: 2px;

--jg-transition: .25s ease;

--jg-shadow-soft: 0 15px 40px rgba(0,0,0,.08);
--jg-shadow-medium: 0 20px 60px rgba(0,0,0,.12);


    /* ==========================================================================
       TYPOGRAPHY
       ========================================================================== */

    --jg-font-heading: 'Bebas Neue', sans-serif;
    --jg-font-body: 'Manrope', sans-serif;

    /* Font sizes */

    --jg-fs-eyebrow: 15px;

    --jg-fs-h1: clamp(58px, 5vw, 88px);
    --jg-fs-h2: clamp(42px, 4vw, 64px);
    --jg-fs-h3: clamp(30px, 3vw, 42px);

    --jg-fs-lead: 22px;
    --jg-fs-body: 18px;
    --jg-fs-small: 16px;

    /* Font weights */

    --jg-fw-heading: 400;
    --jg-fw-body: 400;
    --jg-fw-semibold: 600;
    --jg-fw-bold: 700;

    /* Line heights */

    --jg-lh-h1: .88;
    --jg-lh-h2: .95;
    --jg-lh-h3: 1;

    --jg-lh-lead: 1.7;
    --jg-lh-body: 1.7;

    /* Letter spacing */

    --jg-ls-h1: .5px;
    --jg-ls-eyebrow: 4px;


    /* ==========================================================================
       BUTTONS
       ========================================================================== */

    --jg-btn-height: 56px;
    --jg-btn-header-height: 48px;

    --jg-btn-padding: 16px 34px;
    --jg-btn-header-padding: 12px 28px;


    /* ==========================================================================
       LAYOUT
       ========================================================================== */

    --jg-container: 1280px;

    --jg-section-space: 100px;

    --jg-gap: 80px;

    --jg-radius: 0;


/* ==========================================================================
   BUTTONS
   ========================================================================== */

/* Primary button */

.jg-btn .elementor-button {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--jg-red);
    color: var(--jg-white);
    min-height: var(--jg-btn-height);
    padding: var(--jg-btn-padding);

    clip-path: polygon(
        0 0,
        calc(100% - var(--jg-cut)) 0,
        100% var(--jg-cut),
        100% 100%,
        var(--jg-cut) 100%,
        0 calc(100% - var(--jg-cut))
    );

    transition:
        background-color var(--jg-transition),
        color var(--jg-transition),
        transform var(--jg-transition);
}

.jg-btn .elementor-button:hover {

    background: var(--jg-red-hover);
    color: var(--jg-white);

    transform: translateY(-2px);
}

/* ==========================================================================
   HEADER BUTTON
   ========================================================================== */

.jg-btn-header .elementor-button {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: var(--jg-btn-header-height);
    padding: var(--jg-btn-header-padding);

    background: var(--jg-red);
    color: var(--jg-white);

    font-family: var(--jg-font-body);
    font-size: var(--jg-fs-small);
    font-weight: var(--jg-fw-semibold);

    clip-path: polygon(
        0 0,
        calc(100% - var(--jg-cut)) 0,
        100% var(--jg-cut),
        100% 100%,
        var(--jg-cut) 100%,
        0 calc(100% - var(--jg-cut))
    );

    transition:
        background-color var(--jg-transition),
        transform var(--jg-transition);

}

.jg-btn-header .elementor-button:hover {

    background: var(--jg-red-hover);
    color: var(--jg-white);

    transform: translateY(-2px);

}

/* ==========================================================================
   OUTLINE BUTTON
   ========================================================================== */

.jg-btn-outline .elementor-button {



    position: relative;
    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: var(--jg-btn-height);
    padding: var(--jg-btn-padding);

    border: 0;

    background: var(--jg-dark);
    color: var(--jg-dark);

    font-weight: var(--jg-fw-semibold);

    clip-path: polygon(
        0 0,
        calc(100% - var(--jg-cut)) 0,
        100% var(--jg-cut),
        100% 100%,
        var(--jg-cut) 100%,
        0 calc(100% - var(--jg-cut))
    );

    transition:
        color var(--jg-transition),
        transform var(--jg-transition);

}

/* Vidinis sluoksnis */

.jg-btn-outline .elementor-button::before {

    content: "";

    position: absolute;
    inset: var(--jg-border);
    z-index: 0;

    background: var(--jg-light);

    clip-path: polygon(
        0 0,
        calc(100% - calc(var(--jg-cut) - var(--jg-border))) 0,
        100% calc(var(--jg-cut) - var(--jg-border)),
        100% 100%,
        calc(var(--jg-cut) - var(--jg-border)) 100%,
        0 calc(100% - calc(var(--jg-cut) - var(--jg-border)))
    );

    transition:
        background-color var(--jg-transition);

}

/* Tekstas */

.jg-btn-outline .elementor-button-content-wrapper {

    position: relative;
    z-index: 1;

}

/* Hover */

.jg-btn-outline .elementor-button:hover {

    color: var(--jg-dark);
    transform: translateY(-2px);

}

.jg-btn-outline .elementor-button:hover::before {

    background: var(--jg-light-hover);

}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

/* Eyebrow */

.jg-eyebrow {

    margin: 0;
    margin-bottom:24px;

    font-family: var(--jg-font-body);
    font-size: var(--jg-fs-eyebrow);
    font-weight: var(--jg-fw-eyebrow);

    line-height: 1;
    letter-spacing: var(--jg-ls-eyebrow);

    text-transform: uppercase;

    color: var(--jg-red);
}


/* Hero H1 */

.jg-h1{

    margin:0 0 36px;

    font-family:var(--jg-font-heading);
    font-size:var(--jg-fs-h1);
    font-weight:var(--jg-fw-heading);

    line-height:var(--jg-lh-h1);
    letter-spacing:var(--jg-ls-h1);

    text-transform:uppercase;

    color:var(--jg-text);

    text-wrap: pretty;

}

/* H2 */

.jg-h2{

    margin:0 0 28px;

    font-family:var(--jg-font-heading);
    font-size:var(--jg-fs-h2);
    font-weight:var(--jg-fw-heading);

    line-height:var(--jg-lh-h2);

    text-transform:uppercase;

    color:var(--jg-text);

}

/* H3 */

.jg-h3{

    margin:0 0 20px;

    font-family:var(--jg-font-heading);
    font-size:var(--jg-fs-h3);
    font-weight:var(--jg-fw-heading);

    line-height:var(--jg-lh-h3);

    text-transform:uppercase;

    color:var(--jg-text);

}
	.jg-card-title{
    margin: 0 0 10px;
	line-height:1.05;
}


/* Hero lead */


.jg-lead{

    margin:0 0 48px;

    max-width:520px;

    font-family:var(--jg-font-body);

    font-size:var(--jg-fs-lead);

    font-weight:400;

    line-height:var(--jg-lh-lead);

    color:var(--jg-text);

}

/* Body text */

.jg-text {

    margin: 0;

    font-family: var(--jg-font-body);
    font-size: var(--jg-fs-body);
    font-weight: var(--jg-fw-body);

    line-height: var(--jg-lh-body);

    color: var(--jg-text);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.jg-section{
    padding-block: var(--jg-section-space);
}

.jg-container{
    width: min(100%, var(--jg-container));
    margin-inline: auto;
}


/* ==========================================================================
   IMAGES
   ========================================================================== */

.jg-image{
    overflow:hidden;
}

.jg-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;

    transition:
        transform .45s ease,
        filter .45s ease;
}

.jg-image:hover img{
    transform:scale(1.04);
    filter:brightness(.92);
}


/* ==========================================================================
IMAGE CARD
========================================================================== */

.jg-image-card{
    position:relative;
    overflow:hidden;
    
    background:#ddd;

    clip-path:polygon(
        0 0,
        calc(100% - var(--jg-cut)) 0,
        100% var(--jg-cut),
        100% 100%,
        0 100%
    );
}

/* Svarbiausia dalis */

.jg-image-card .elementor-widget-image{
    height:100%;
    line-height:0;
}

.jg-image-card .elementor-widget-container{
    height:100%;
    line-height:0;
}

.jg-image-card img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    vertical-align:top;
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.jg-card{
    display:flex;
    flex-direction:column;
    gap:12px;

    transition:
        transform var(--jg-transition),
        box-shadow var(--jg-transition);
}

.jg-card:hover{
    transform:translateY(-6px);
}


/* ==========================================================================
   SERVICE CARD
   ========================================================================== */

.jg-card-service{
    gap:0;
}

.jg-card-service:hover{
    box-shadow:var(--jg-shadow-soft);
}

.jg-card-service:hover .jg-image-card img{
    transform:scale(1.05);
}

.jg-card-service:hover .jg-image-card::after{
    opacity:.8;
}


/* ==========================================================================
   CARD CONTENT
   ========================================================================== */

.jg-card-content{

    display:flex;
    flex-direction:column;
    flex:1;
	gap:10px;


    background: #faf8f5;
	box-shadow:0 2px 10px rgba(0,0,0,.03);

    padding:18px;

    border:1px solid rgba(0,0,0,.08);

    border-top:3px solid var(--jg-red);

    transition:
        background-color var(--jg-transition),
        border-color var(--jg-transition);
}

.jg-card-service:hover .jg-card-content{

    background:#FAF8F4;

    border-color:rgba(0,0,0,.12);
}

/* Paskutinis elementas (PLAČIAU) visada apačioje */

.jg-card-content .elementor-widget:last-child{
    margin-top:auto;
}

	.jg-card-link{
    margin-top:8px;
		font-size:15px;
font-weight:600;
letter-spacing:.04em;
text-transform:uppercase;
}

/* ==========================================================================
   CARD NUMBER
   ========================================================================== */

.jg-card-number{

    position:absolute;

    top:8px;
    left:8px;

    z-index:2;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:40px;
    height:32px;

    padding:0 12px;

    background:var(--jg-red);

    color:var(--jg-white);

    font-family:var(--jg-font-heading);
    font-size:18px;

    line-height:1;
    letter-spacing:.5px;

    clip-path:polygon(
        0 0,
        calc(100% - var(--jg-cut)) 0,
        100% var(--jg-cut),
        100% 100%,
        0 100%
    );

    transition:background-color var(--jg-transition);
}

.jg-card-service:hover .jg-card-number{
    background:var(--jg-red-hover);
}
	
	/* ==========================================================================
   FEATURES
   ========================================================================== */

.jg-feature{

    display:flex;
    align-items:flex-start;

    gap:20px;
}

.jg-feature + .jg-feature{
    margin-top:28px;
}

.jg-feature-icon .elementor-icon{

    width:26px;
    min-width:26px;

    color:var(--jg-red);
	fill: var(--jg-red);
}

.jg-feature-title{
    margin:0 0 8px;
}

.jg-feature-text{
    margin:0;
}
	
	/* ==========================================================================
   STATS
   ========================================================================== */

.jg-stat{

    width:150px;
	padding:16px 16px;

    text-align:center;
	 position:relative;

    border:1px solid rgba(0,0,0,.08);

   

    transition:
        transform var(--jg-transition),
        border-color var(--jg-transition),
        box-shadow var(--jg-transition);
}
	
	.jg-stat::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:var(--jg-red);
    opacity:.9;
}

.jg-stat:hover{

    transform:translateY(-2px);

    border-color:rgba(0,0,0,.14);

    box-shadow:var(--jg-shadow-soft);
}

.jg-stat-number .elementor-counter .elementor-counter-number-wrapper{

    margin-bottom:8px;
	font-size:42px;
	Font weight: 700;
}

.jg-stat-title{

    margin:0;
	font-size:14px;
	line-height:1.15;
letter-spacing:.04em;

    text-transform:uppercase;
}
	
	/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.jg-breadcrumbs{

    margin-bottom:32px;

    font-family:var(--jg-font-body);
    font-size:14px;
    font-weight:500;

    color:#777;
}

.jg-breadcrumbs a{

    color:#777;

    text-decoration:none;

    transition:color var(--jg-transition);
}

.jg-breadcrumbs a:hover{

    color:var(--jg-red);
}

.jg-breadcrumbs .separator{

    margin-inline:8px;

    color:#B9B9B9;
}

.jg-breadcrumbs strong,
.jg-breadcrumbs .last{

    color:var(--jg-text);

    font-weight:600;
}