@font-face {
    font-family: 'Manrope';
    src: url('../font/Manrope-VariableFont_wght.ttf');
    font-weight: 200 800;
}
@font-face {
    font-family: 'Forum';
    src: url('../font/Forum-Regular.ttf');
}
body{
    font-family: 'Manrope', sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: none;
}
a{
    text-decoration: none;
}
h1{
    font-size: 80px;
    margin: 0;
}
h2{
    font-size: 32px;
    margin: 0;
}
h6{
    font-size: 28px;
    margin: 0;
}
h1,h2,h3,h4,h5,h6,p{
    margin: 0;
}
.none{
    display: none;
}
.button{
    border: 1px solid white;
    background: none;
    border-radius: 23px;
    overflow: hidden;
    padding: 10px 10px 10px 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    p{
        margin: 0;
        font-weight: 400;
        line-height: 150%; /* 24px */
        letter-spacing: -0.32px;
        color: white;
    }
}
.card_list{
    display: grid;
    list-style: none;
    grid-template-columns: 3fr 3fr;
    gap: 20px;
    padding: 0;
    .card{
        display: flex;
        flex-direction: column;
        gap: 20px;
        .text{
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 0 20px;
            font-family: 'Manrope', sans-serif;
            h3{
                margin: 0;
                font-size: 32px;
                font-style: normal;
                font-weight: 600;
                line-height: 130%; /* 41.6px */
                letter-spacing: -0.64px;
            }
            p{
                margin: 0;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 150%; /* 24px */
                letter-spacing: -0.32px;
            }
        }
        a{
            text-decoration: none;
            color: #000000;
        }
        img{
            aspect-ratio: 16 / 9;
            width: 100%;
            align-self: stretch;
            border-radius: 23px;
            object-fit: contain;
            background: #ffff;
        }
    }
}
main{
    .first{
        position: relative;
        video{
            width: 100%;
        }
        .content{
            position: absolute;
            bottom: 120px;
            left: 80px;
            color: white;
            display: flex;
            flex-direction: column;
            gap: 20px;
            h1{
                width: 50%;
                font-family: 'Forum', sans-serif;
                font-weight: 400;
                margin: 0;
            }
            h2{
                font-family: 'Manrope', sans-serif;
                width: 50%;
                font-weight: 200;
                margin: 0;
            }
        }
    }
    .second{
        padding: 80px;
        display: grid;
        grid-template-columns: 2fr 4fr;
            h3{
                font-family: 'Forum', sans-serif;
                font-size: 80px;
                font-weight: 400;
                line-height: 86%; /* 68.8px */
                letter-spacing: -0.8px;
                margin: 0;
            }
            .button{
                width: fit-content;
                border: 1px solid black;
                p{
                    font-family: Manrope, sans-serif;
                    font-size: 20px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 130%; /* 26px */
                    letter-spacing: -0.4px;
                    color: black;
                }
            }
            p{
                margin: 0;
                font-family: Manrope, sans-serif;
                font-size: 48px;
                font-style: normal;
                font-weight: 500;
                line-height: 120%; /* 57.6px */
                letter-spacing: -0.96px;
            }
    }
    .third{
        padding: 80px;
        display: grid;
        grid-template-columns: 2fr 4fr;
        h6{
            font-family: Manrope;
            font-size: 28px;
            font-style: normal;
            font-weight: 400;
            line-height: 140%; /* 39.2px */
            letter-spacing: -0.56px;
        }
        ul{
            display: flex;
            gap: 40px;
            align-items: center;
            list-style: none;
            li{
                gap: 10px;
                h4{
                    margin: 0;
                    font-size: 80px;
                    font-family: 'Forum', sans-serif;
                    font-weight: 400;
                    line-height: 80%; /* 23.4px */
                    letter-spacing: -0.36px;
                    color: #005D3F;
                }
                p{
                    margin: 0;
                    font-size: 18px;
                    font-family: 'Manrope', sans-serif;
                }
            }
        }
    }
    .fourth{
        background-color: #F5F5F5;
        padding: 80px;
        display: grid;
        grid-template-columns: 5fr 1fr;
        align-items: center;
            h2{
                font-family: 'Forum', sans-serif;
                font-size: 80px;
                font-weight: 400;
                color: #005D3F;

                grid-column: 1;
                grid-row: 1;
            }
            .button{
                grid-column: 2;
                grid-row: 1;
                width: fit-content;
                height: fit-content;
                border: 1px solid #C6C6C6;
                p{
                    color: black;
                }
            }
        ul{
            grid-column: 1 / span 2; /* Занимает две колонки */
            grid-row: 2;
        }
    }
    .fifth{
        padding: 80px;
        background-color: #005D3F;
        color: white;
        display: flex;
        flex-direction: column;
        gap: 40px;
        .header{
            display: flex;
            justify-content: space-between;
            h2{
                font-family: Manrope;
                font-size: 28px;
                font-style: normal;
                font-weight: 400;
                line-height: 140%; /* 39.2px */
                letter-spacing: -0.56px;
            }
            .buttons{
                display: flex;
                gap: 20px;
                button{
                    background: none;
                    border: none;
                    transition: scale 0.1s ease;
                    &:hover{
                        scale: 1.1;
                    }
                }
            }
        }
        .splide__slide{
            display: flex;
            flex-direction: column;
            gap: 40px;
            p{
                font-family: Manrope;
                font-size: 36px;
                font-style: normal;
                font-weight: 700;
                line-height: 120%; /* 57.6px */
                letter-spacing: -0.96px;
            }
            .person{
                display: flex;
                gap: 20px;
                h5{
                    font-family: Manrope;
                    font-size: 28px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 140%; /* 39.2px */
                    letter-spacing: -0.56px;
                }
                p{
                    font-family: Manrope;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 150%; /* 24px */
                    letter-spacing: -0.32px;
                }
                img{
                    width: 72px;
                    height: 72px;
                    border-radius: 50%;
                }
            }
        }
    }
    .sixth{
        padding: 80px;
        display: grid;
        grid-template-columns: 2fr 4fr;
        gap: 20px;
        h4{
            font-family: Manrope;
            font-size: 28px;
            font-style: normal;
            font-weight: 400;
            line-height: 140%; /* 39.2px */
            letter-spacing: -0.56px;
            color: #005D3F;
            margin: 0;
            width: 70%;
        }
        ul{
            list-style: none;
            display: flex;
            flex-direction: column;
            margin: 0;
            padding: 0;
            li{
                padding: 20px 0;
                width: 100%;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 10px;
                button{
                    background: none;
                    border: none;
                    text-align: start;
                    padding: 0;
                }
                h4{
                    color: black;
                }
                .head{
                    display: flex;
                    justify-content: space-between;
                }
                &::before{
                    content: '';
                    width: 100%;
                    height: 1px;
                    background: #C6C6C6;
                    z-index: 12;
                    position: absolute;
                    top: 0;
                }
            }
        }
    }
}

@media (max-width: 784px){
    header{
        padding: 10px 20px;
        border-radius: 10px;
        .left {
            ul{
                display: none;
            }
            a{
                .menu{
                    svg {
                        width: 156px;
                        height: 20px;}
                }
            }
        }
    }
    main{
        .first{
            overflow: hidden;
            video{
                height: 600px;
                object-fit: cover;
                overflow: hidden;
            }
            .content{
                left: 20px;
                h1{
                    font-family: Forum;
                    font-size: 48px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 86%; /* 41.28px */
                    letter-spacing: -0.48px;
                    width: 100%;
                }
                h2{
                    font-family: Manrope;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 150%; /* 24px */
                    letter-spacing: -0.32px;
                    width: 100%;
                }
            }
        }
        .second{ /* бітпедім нтмл код кате жазылған адаптация жоқ */
            padding: 20px;
            grid-template-columns: 1fr;
            gap: 20px;
                h3{
                    font-family: Forum;
                    font-size: 40px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 86%; /* 34.4px */
                    letter-spacing: -0.4px;
                    color: #005D3F;
                }
            p{
                font-family: Manrope;
                font-size: 20px;
                font-style: normal;
                font-weight: 500;
                line-height: 120%; /* 24px */
                letter-spacing: -0.4px;
            }
            .button{
                font-family: Manrope;
                font-size: 20px;
                font-style: normal;
                font-weight: 500;
                line-height: 130%; /* 26px */
                letter-spacing: -0.4px;
            }
        }
        .third{
            padding: 20px;
            grid-template-columns: 1fr;
            h6{

                font-family: Manrope;
                font-size: 24px;
                font-style: normal;
                font-weight: 400;
                line-height: 150%; /* 36px */
                letter-spacing: 0.24px;
            }
            ul{
                flex-direction: column;
                padding: 0;
                align-items: start;
                li{
                    h4{
                        font-family: Forum;
                        font-size: 48px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 86%; /* 41.28px */
                        letter-spacing: -0.48px;
                    }
                    p{
                        font-family: Manrope;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 150%; /* 24px */
                        letter-spacing: -0.32px;
                    }
                }
            }
        }
        .fourth{
            padding: 20px;

            grid-template-columns: 1fr;
            h2{
                font-family: Forum;
                font-size: 40px;
                font-style: normal;
                font-weight: 400;
                line-height: 86%; /* 34.4px */
                letter-spacing: -0.4px;
            }
            ul{
                grid-column: 1;
                grid-row: auto;
                grid-template-columns: 1fr;
                li{
                    .text{
                        h3{
                            font-family: Manrope;
                            font-size: 24px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 150%; /* 36px */
                            letter-spacing: 0.24px;
                        }
                        p{

                            font-family: Manrope;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 140%; /* 19.6px */
                        }
                    }
                }
            }
            .button{
                grid-column: auto;
                grid-row: 3;
            }
        }
        .fifth{
            padding: 20px;
            gap: 20px;
            .splide__slide{
                display: flex;
                flex-direction: column;
                gap: 20px;
                p{
                    font-family: Manrope;
                    font-size: 28px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 140%; /* 39.2px */
                    letter-spacing: -0.56px;
                }
                .person{
                    display: flex;
                    gap: 20px;
                    align-items: center;
                    h5{
                        font-family: Manrope;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: 150%; /* 24px */
                        letter-spacing: -0.32px;
                    }
                    p{
                        font-family: Manrope;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 140%;
                    }
                }
            }
        }
        .sixth{
            grid-template-columns: 1fr;
            padding: 20px;
            h4{
                font-family: Manrope;
                font-size: 24px;
                font-style: normal;
                font-weight: 400;
                line-height: 150%; /* 36px */
                letter-spacing: 0.24px;
            }
            ul{
                li{
                    button{
                        h4{
                            font-family: Manrope;
                            font-size: 16px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 150%; /* 24px */
                            letter-spacing: -0.32px;
                        }
                    }
                    p{
                        font-family: Manrope;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 140%; /* 19.6px */
                    }
                }
            }
        }
    }
}