:root{
    --color-yellow: #FBB615;
    --color-yellow-bg: #fbf1db;
    --color-yellow-hover: #FBB61555;
    --color-yellow-line: #FBB615bb;
    --color-blue: #3282B6;
    --color-blue-bg: #dce9f2;
    --color-blue-hover: #3282B655;
    --color-blue-line: #3282B6aa;
    --color-gray: #708696;
    --color-gray-bg: #e0e4e8;
    --color-gray-hover: #70869655;
    --color-gray-line: #708696bb;
    --color-green: #348678;
    --color-green-bg: #dbe4e2;
    --color-green-hover: #34867855;
    --color-green-line: #348678bb;
    --color-teget: #305065;
    --color-teget-bg: #ccd7de;
    --color-teget-hover: #c1c8cf;
    --color-teget-line: #305065aa;
    --color-orange: #BF4E30;
    --color-orange-bg: #efd4ce;
    --color-orange-hover: #e7c2b9;
    --color-orange-line: #BF4E30aa;
    --color-brown: #6F4539;

}
*{
    box-sizing: border-box;
}
ul {
  margin-left: 0;
  padding-left: 18px; /* adjust to your preference */
}

body{
    background-color: white;
    border: 0;
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    overflow-x: hidden;
}

.main-container{
    position: relative;
    width: 1200px;
    max-width: 90%;
    margin: 0 auto 100px auto;
    padding-left: 30px;
    overflow-x: hidden;
    overflow-y: auto;
    @media (max-width: 768px){
        margin-bottom: 65px;
    }
    .title, .subtitle{
        font-weight: 600;
    }
    .title{
        position: relative;
        left: -30px;
        margin-top: 60px;
        margin-bottom: 10px;
        @media(max-width: 768px){
            margin-bottom: 2px;
        }
    }
    .title2{
        position: relative;
        left: -30px;
        margin-top: 0;
        margin-bottom: 50px;
        font-size: 24px;
        font-weight: 500;
        color: #444;
    }
    .subtitle{
        position: relative;
        &::before{
            content: '';
            display: inline-block;
            position: absolute;
            left: -30px;
            top: 9px;
            height: 13px;
            width: 13px;
            border: 2px solid var(--color-yellow);
            border-radius: 50%;
        }
        &.osnovno{
            &::before{
                border-color: var(--color-yellow-line)
            }
        }
        &.genetska-testiranja{
            &::before{
                border-color: var(--color-blue-line)
            }            
        }
        &.nipt{
            &::before{
                border-color: var(--color-gray-line)
            }            
        }
        &.rezultati{
            &::before{
                border-color: var(--color-green-line)
            }
            
        }
        &.uporedi{
            &::before{
                border-color: var(--color-teget-line)
            }
        }
        &.pojmovi{
            &::before{
                border-color: var(--color-orange-line)
            }
        }
    }
    .box-group-wrap{
        position: relative;
        &::before{
            content: '';
            display: inline-block;
            width: 2px;
            height: calc(100% + 70px);
            background-color: var(--color-blue);
            position: absolute;
            left: -23px;
            top: -31px;
        }
        &.osnovno::before{
            background: linear-gradient(var(--color-yellow-line), var(--color-blue-line));
        }
        &.genetska-testiranja::before{
            background: linear-gradient(var(--color-blue-line), var(--color-gray-line));
        }
        &.nipt::before{
            background: linear-gradient(var(--color-gray-line), var(--color-green-line));
        }
        &.rezultati::before{
            background: linear-gradient(var(--color-green-line), var(--color-teget-line));
        }
        &.uporedi::before{
             background: linear-gradient(var(--color-teget-line), var(--color-orange-line));
        }
        &.pojmovi::before{
            display: none;
        }
        .box-group{
            position: relative;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
            .box{
                padding: 30px 40px 70px 29px;
                min-height: 245px;
                position: relative;
                font-size: 18px;
                cursor: pointer;
                transition: all .32s ease-out;
                border-radius: 16px;
                &::after{
                    content: '';
                    display: inline-block;
                    width: 48px;
                    height: 32px;
                    border-radius: 16px;
                    background-color: #333;
                    position: absolute;
                    left: 30px;
                    bottom: 30px;
                    background-image: url(../img/strelica-desno.svg);
                    background-size: auto 75%;
                    background-position: center;
                    background-repeat: no-repeat;
                    transition: all .32s ease-out;
                }
                &:hover{
                    &::after{
                        width: 60px;
                        background-color: black;
                    }
                }
                &.checked{
                    &::before{
                        content: '';
                        display: inline-block;
                        width: 32px;
                        aspect-ratio: 1/1;
                        border-radius: 50%;
                        position: absolute;
                        right: 30px;
                        bottom: 30px;
                        background-image: url(../img/check.svg);
                        background-size: auto 75%;
                        background-position: center;
                        background-repeat: no-repeat;
                    }
                }
            }
            .osnovno &{
                .box{
                    background-color: var(--color-yellow-bg);
                    &:hover{
                        background-color: var(--color-yellow-hover);
                    }
                    &.checked::before{
                        background-color: var(--color-yellow);
                    }
                }
            } 
            .genetska-testiranja &{
                .box{
                    background-color: var(--color-blue-bg);
                    &:hover{
                        background-color: var(--color-blue-hover);
                    }
                    &.checked::before{
                        background-color: var(--color-blue);
                    }
                }
            } 
            .nipt &{
                .box{
                    background-color: var(--color-gray-bg);
                    &:hover{
                        background-color: var(--color-gray-hover);
                    }
                    &.checked::before{
                        background-color: var(--color-gray);
                    }
                }
            } 
            .rezultati &{
                .box{
                    background-color: var(--color-green-bg);
                    &:hover{
                        background-color: var(--color-green-hover);
                    }
                    &.checked::before{
                        background-color: var(--color-green);
                    }
                }
            } 
            .uporedi &{
                .box{
                    background-color: var(--color-teget-bg);
                    &:hover{
                        background-color: var(--color-teget-hover);
                    }
                    &.checked::before{
                        background-color: var(--color-teget);
                    }
                }
            } 
            .pojmovi &{
                .box{
                    background-color: var(--color-orange-bg);
                    &:hover{
                        background-color: var(--color-orange-hover);
                    }
                    &.checked::before{
                        background-color: var(--color-orange);
                    }
                }
            } 
    
    
        }
    }
}
footer{
    border-top: 1px solid var(--color-gray-hover);
    display: block;
    padding: 60px 0;
    @media (max-width: 768px){
        padding: 50px 0;

    }
    .footer-content{
        width: 1200px;
        max-width: 90%; 
        margin: auto;
        img{
            display: inline-block;
            width: 100px;
            height: auto;
        }
        p{
            font-size: 13px;
            color: var(--color-gray-line);
            margin-bottom: 0;
        }
        @media (max-width: 768px){
            img{
                width: 90px;
            }
            p{
                font-size: 12px;
            }
        }
    }
}

/* ========================= */
/* Mobile horizontal snapping */
/* ========================= */

@media (max-width: 768px){

    .main-container{
        width: 100%;
        max-width: 100%;
        padding-left: 40px;
        .title, .title2{
            left: -24px;
        }
        .box-group-wrap{
            .box-group{
                display: flex;
                gap: 16px;
                overflow-x: auto;
                overflow-y: hidden;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
                padding-right: 20px; /* so last card can snap nicely */
                .box{
                    flex: 0 0 82%;            /* full first, partial second */
                    min-height: 220px;
                    scroll-snap-align: start;
                    scroll-snap-stop: always;
                }
            }
        }
    }
    /* Optional: hide scrollbar (keeps UX clean) */
    .box-group::-webkit-scrollbar{
        display: none;
    }
    .box-group{
        scrollbar-width: none;
    }
}

.screen{
    position: fixed;
    top: 0;
    left: 101vw;
    width: 100vw;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    transition: left .32s ease-out;
    &.show{
        left: 0;
    }
    .screen-content{
        width: 620px;
        max-width: 92vw;
        margin: 150px auto;
        line-height: 1.7;
        font-size: 18px;
        @media (max-width: 768px){
            margin: 80px auto;
            font-size: 17px;
        }
        img{
            height: 80px;
        }
        .screen-title{
            line-height: 1.4;
            @media (max-width: 768px){
                font-size: 30px;
            }
        }
        .menu-age{
            margin-bottom: 20px;
            .menu-age-item{
                display: inline-block;
                border: 2px solid var(--color-teget);
                color: var(--color-teget);
                padding: 2px 16px;
                border-radius: 30px;
                font-size: 17px;
                cursor: pointer;
                transition: all .32s ease-out;
                @media(max-width: 768px){
                    font-size: 13.6px;
                    padding: 5px 8px;
                }
                &:hover{
                    background-color: var(--color-teget-hover);
                }
                &:not(:last-child){
                    margin-right: 4px;
                }
                &.active{
                    background-color: var(--color-teget);
                    color: var(--color-teget-bg);
                }
            }
        }
        .uporedi-content{
            position: relative;
            display: inline-block;
            width: 100%;
            height: 300px;
            .poredjenje{
                display: none;
            }
            .poredjenje.show{
                display: block;
                width: 100%;
            }
        }
        .menu-opcije{
            margin-bottom: 36px;
            .menu-opcije-item{
                display: inline-block;
                border: 2px solid var(--color-teget);
                color: var(--color-teget);
                padding: 5px 14px;
                border-radius: 30px;
                font-size: 15px;
                cursor: pointer;
                transition: all .32s ease-out;
                @media(max-width: 768px){
                    margin-bottom: 6px;
                    font-size: 13.6px;
                }
                &:hover{
                    background-color: var(--color-teget-hover);
                }
                &:not(:last-child){
                    margin-right: 4px;
                }
                &.active{
                    background-color: var(--color-teget);
                    color: var(--color-teget-bg);
                }
            }
        }
        .opcije-content{
            position: relative;
            display: inline-block;
            width: 100%;
            min-height: 325px;
            .opcija{
                display: none;
                .opcija-table{
                    font-size: 16px;
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    text-align: center;
                    line-height: 1.3;
                    border: 1px solid var(--color-teget-line);
                    border-radius: 16px;
                    @media(max-width: 768px){
                        font-size: 14px;
                    }
                    &>div{
                        border-bottom: 1px solid var(--color-teget-line);
                        padding: 10px;
                        @media(max-width: 768px){
                            padding: 10px 10px;
                        }
                    }
                    .table-head{
                        font-weight: 700;
                        padding: 16px 12px;
                    }
                    .double-column{
                        grid-column: span 2;
                        font-size: 15px;
                        font-weight: 400;
                        color: var(--color-teget)
                    }
                    .left{
                        border-right: 1px solid var(--color-teget-line);
                    }
                    .bottom{
                        border-bottom: none;
                    }
                }
            }
            .opcija.show{
                display: block;
                width: 100%;
            }
        }
        .check-btn{
            display: inline-block;
            width: 80px;
            height: 40px;
            border-radius: 20px;
            background-color: #333;
            background-image: url(../img/check.svg);
            background-size: auto 75%;
            background-position: center;
            background-repeat: no-repeat;
            transition: all .32s ease-out;
            cursor: pointer;
            margin-top: 30px;
            &:hover{
                background-color: black;
                width: 100px;
            }
        }
    }
    &.osnovno{
        background-color: var(--color-yellow-bg);
    }
    &.genetska-testiranja{
        background-color: var(--color-blue-bg);
    }
    &.nipt{
        background-color: var(--color-gray-bg);
    }
    &.rezultati{
        background-color: var(--color-green-bg);
    }
    &.uporedi{
        background-color: var(--color-teget-bg);
    }
    &.pojmovi{
        background-color: var(--color-orange-bg);
    }
}

.comparison{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 620px;    
    max-width: 100%;
    margin-bottom: 30px;
    @media (max-width: 768px){
        gap: 16px;
    }
    .comp-title{
        color: var(--color-teget);
        &.fts{
            color: var(--color-brown);
        }
    }
}

.comp-graphics{
    display: grid;
    .pregnancy{
        aspect-ratio: 1/1.3;
        position: relative;
        .icon{
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 80%;
            height: auto;
            opacity: .4;
        }
        .pregnancy-cover{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0;
            overflow: hidden;
            .icon-cover{
                display: block;
                position: absolute;
                left: 0;
                bottom: 0;
                width: 80%;
                height: auto;
            }
        }
    }
}
.comp-graphics-20-24{
    grid-template-columns: repeat(5, 1fr);
}
.comp-graphics-25-29{
    grid-template-columns: repeat(6, 1fr);
}
.comp-graphics-30-34{
    grid-template-columns: repeat(8, 1fr);
}
.comp-graphics-35-39{
    grid-template-columns: repeat(11, 1fr);
}
.comp-graphics-40-45{
    grid-template-columns: repeat(21, 1fr);
}

.replace-text {
    position: relative;
    bottom: -1px;
    display: inline-block;
    height: .95em;
    vertical-align: baseline;
    overflow: hidden;
    text-indent: -9999px;
    &::before{
        content: "";
        position: absolute;
        inset: 0;
        background-size: contain;
        background-position: 0 center;
        background-repeat: no-repeat;
    }
}

.replace-one {
    aspect-ratio: 10 / 6;
    &::before{
        background-image: url(../img/one.svg);
    }
}
.replace-m {
    height: .85em;
    aspect-ratio: 10 / 6;
    &::before{
        background-image: url(../img/m.svg);
    }
}
.replace-23m {
    aspect-ratio: 11 / 6;
    &::before{
        background-image: url(../img/23m.svg);
    }
}