/* ==========================================
   ABOUT SECTION - POČETNA STRANICA
   ========================================== */

.about-section-pocetna {
    position: relative;
    min-height: 100vh;
    background-color: #f8f8f8;
    /* background-color: #fff; */
    display: flex;
    flex-direction: column;
    padding: 60px 36px;
    overflow: hidden;
    justify-content: center;
}

/* Mobilni - sakrivanje visual container */
.about-visual-container {
    display: none;
}

.about-content-pocetna {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    font-size: 18px;
    line-height: 1.5;    
    font-weight: 500;
    text-align: left;
}

.about-content-text {
    max-width: 100%;
    width: 100%;
    color: #000;
}

.we-are-cherry-mobile {   
    font-size: 40px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 30px;
    white-space: nowrap;
}

.paragraph-about {
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 22px;
}

.little-cherry-paragraph {
    display: inline;
    width: 10%;
    height: auto;
    vertical-align: text-bottom;
}

/* Animacija rotacije za velike trešnje */
@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ==========================================
   SVG HIGHLIGHT - ZAJEDNIČKI STILOVI
   ========================================== */

.highlight-wrapper {
    position: relative;
    display: inline-block;
}

.highlight-text {
    position: relative;
    display: inline-block;
}

.highlight-svg {
    position: absolute;
    top: 50%;
    left: 50%;    
    overflow: visible;
    pointer-events: none;
}

.highlight-path {
    stroke: #E8235B;    
    fill-opacity: 0;
}

/* ==========================================
   SVG HIGHLIGHT 1 - "Od 2015"
   ========================================== */

.highlight-svg-1 {
    width: calc(100% + 2.75em);
    transform: translate(-65%, -50%);
}

.highlight-path-1 {
    stroke-width: 4;
}

/* ==========================================
   SVG HIGHLIGHT 2 - "vrednosti"
   ========================================== */

.highlight-svg-2 {
    width: calc(100% + 7em);    
    transform: translate(-55%, -57%);
}

.highlight-path-2 {
    stroke-width: 6;
}

.highlight-svg-3 {
    width: calc(100% + 2.5em);    
    transform: translate(-55%, -57%);
}

.highlight-path-3 {
    stroke-width: 6;
}
@media (max-width: 320px) {
    .we-are-cherry-mobile {
        font-size: 32px;
    }
}

/* ==========================================
   TABLET - 768px+
   ========================================== */
@media (min-width: 768px) {
    .about-section-pocetna {
        height: 50vh;
        flex-direction: row;
        padding: 0;
        padding: 60px 20px;
    }
    
    .about-section-pocetna {
        min-height: 65vh;      
    }

    .about-content-pocetna {
        align-items: center;
    } 
    .about-content-text {
        max-width: 540px;
    }
    .little-cherry-paragraph {
        width: 5%;
    }
    .highlight-svg-2 {
        transform: translate(-55%, -45%);
    }
    .highlight-svg-3 {        
        transform: translate(-55%, -45%);
    }
}

/* ==========================================
   DESKTOP - 992px+
   ========================================== */
@media (min-width: 992px) {
    .about-section-pocetna {
        min-height: 100vh;
        flex-direction: row;
        padding: 0;
    }

    .about-visual-container {
        display: flex;
        position: relative;
        width: 50%;
        height: 100%;
        justify-content: center;
        align-items: center;
    }

    .about-content-pocetna {
        width: 50%;
        height: 100%;
        justify-content: center;
        align-items: center;
        padding: 60px;        
        text-align: left;
    }

    .about-content-text {
        max-width: 690px;
    }

    .paragraph-about {
        margin-bottom: 55px;       
    }
    
    .little-cherry-paragraph {
        display: inline;
        width: 8%;
    }

    .we-are-cherry-mobile {
        display: none;
    }    
    .big-cherry {
        position: absolute;
        top: 43%;
        left: 46%;
        transform: translate(-50%, -50%);
        width: 44%;
        height: auto;
        animation: rotate 20s linear infinite;
        z-index: 1;
    }    
    .little-cherry {
        position: absolute;
        width: 16%;
        height: auto;
        filter: blur(4px);
        animation: rotate 20s linear infinite;
        z-index: 1;
    }
    .little-cherry-1 {
        top: 16%;
        left: 21%;
    }
    .little-cherry-2 {
        bottom: 17%;
        left: 72%;
        filter: blur(10px);
        width: 14%;
    }    
    .we-are-cherry-desktop {
        display: flex;
        position: absolute;        
        bottom: 15%;
        left: 20%;       
        font-size: 38px;
        font-weight: 700;
        color: #000000;
        z-index: 2;
        align-items: center;
    }
    .we-are-cherry-desktop::before {
        content: '';
        display: block;
        width: 3px;
        height: 1.6em;
        background-color: #E8235B;
        margin-right: 20px;
    }    
    .highlight-svg-1 {
        width: calc(100% + 2em);
    }

    .highlight-svg-2 {
        width: calc(100% + 6em);
    }

    .highlight-svg-3 {
        width: calc(100% + 1.5em);
    }
}
@media (min-width: 1280px) {
    .we-are-cherry-desktop {
        font-size: 38px;
    }
    .about-content-text {
        max-width: 425px;
    }
    .about-content-pocetna {        
        align-items: flex-start;
        padding-left: 30px;
    }
    .paragraph-about:last-child {
        margin-bottom: 0;
    } 
    [data-lang="en"] .about-section-pocetna {       
        min-height: 120vh;
    }   
}
@media (min-width: 1280px) and (max-height: 900px) {
    .little-cherry-1 {
        top: 23%;
        left: 21%;
    }
    .little-cherry-2 {
        bottom: 23%;
    }
    .we-are-cherry-desktop {
        bottom: 21%;
    }
}
@media (min-width: 1280px) and (max-height: 768px) {
    .we-are-cherry-desktop {
        bottom: 12%;
    }   
}
@media (min-width: 1360px) {    
    .about-content-text {
        max-width: 425px;
    }
    .about-content-pocetna {
        
        align-items: flex-start;
    }
}
@media (min-width: 1400px) {
    .paragraph-about {
        font-size: 28px;
    }
    .about-content-text {
        max-width: 545px;
    }
}
@media (min-width: 1920px) {
    .paragraph-about {
        font-size: 36px;
    }
    .about-content-text {
        max-width: 690px;
    }
    .we-are-cherry-desktop {
        font-size: 49px;
    }
    .we-are-cherry-desktop {
        bottom: 13%;
    }
}
/* ==========================================
   SVG HIGHLIGHT - INICIJALNO STANJE
   ========================================== */

/* Sakrij SVG path-ove dok se ne pokrene animacija */
.highlight-path-1,
.highlight-path-2,
.highlight-path-3 {
    stroke-dasharray: 1000; /* Privremena velika vrednost */
    stroke-dashoffset: 1000; /* Privremena velika vrednost */
    fill-opacity: 0;
    /* opacity: 0; */
}
@media (min-width: 2560px) {
    [data-lang="en"] .about-section-pocetna {       
        min-height: 100vh;
    }  
}