/* ===========================================
   GEOGRAPHY
=========================================== */

.geography{

    padding:140px 0;

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            #f8fbff 0%,
            #ffffff 50%,
            #eef5ff 100%
        );

}
.geography .container{

    display:grid;

    grid-template-columns:56% 44%;

    gap:60px;

    align-items:center;

    z-index:2;

}

.geo-left{

    position:relative;

}
.geo-map{

    position:relative;

    height:560px;

    overflow:hidden;

    border-radius:32px;

    background:#edf4fd;

    box-shadow:
        0 20px 50px rgba(41,78,155,.08);

}
.world-map{

    position:absolute;

    top:-35px;
    left:-40px;

    width:115%;
    height:115%;

    object-fit:cover;

    object-position:center;

    user-select:none;

    pointer-events:none;

}
.map-overlay{

    position:absolute;

    inset:0;

    z-index:5;

}
.map-routes{

    width:100%;

    height:100%;

}
.geo-stats{

    position:absolute;

    left:22px;
    right:22px;
    bottom:22px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:22px 28px;

    background:#ffffff;

    border-radius:26px;

    box-shadow:
        0 18px 40px rgba(33,72,145,.12);

    z-index:20;

}
.geo-stat{

    flex:1;

    display:flex;

    align-items:center;

    gap:18px;

}
.geo-stat-icon{

    width:62px;
    height:62px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #4b88ff,
        #2f67ff
    );

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    box-shadow:
        0 12px 24px rgba(47,103,255,.30);

}
.geo-stat-icon img{

    width:28px;
    height:28px;

}
.geo-stat-text{

    display:flex;

    flex-direction:column;

}
.geo-stat-text h3{

    margin:0;

    font-size:22px;

    font-weight:700;

    color:#182033;

    line-height:1;

}
.geo-stat-text p{

    margin-top:6px;

    font-size:13px;

    line-height:1.5;

    color:#7c879d;

}
/* =====================================
   Правая часть
===================================== */

.geo-right{

    display:flex;

    flex-direction:column;

    justify-content:center;

    position:relative;

}
.geo-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:#c79b47;

    font-size:14px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

}
.geo-right h2{

    font-size:48px;

    line-height:1.05;

    color:#16203B;

    font-weight:800;

    margin-bottom:15px;

    margin-top: 18px;

}
.geo-description{

    max-width:500px;

    color:#717D95;

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

}
.geo-countries{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:30px;

}
.country{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 20px;

    background:#fff;

    border-radius:18px;

    border:1px solid #edf1f7;

    box-shadow:
        0 10px 25px rgba(34,67,136,.06);

    transition:.3s;

}
.country:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 40px rgba(47,103,255,.15);

}
.country img{

    width:30px;

    height:30px;

    object-fit:contain;

    flex-shrink:0;

}
.country span{

    color:#16203B;

    font-size:17px;

    font-weight:600;

}
.geo-decoration{

    position:absolute;

    right:0;

    bottom:0;

    width:800px;

    opacity:0;

    pointer-events:none;

}
.world-map svg #KZ,
.world-map #KZ{

    fill:#2F67FF !important;

}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:992px){

    .geography{
        padding:110px 0 80px;
    }

    .geography .container{
        grid-template-columns:1fr;
        gap:50px;
    }

    .geo-left{
        order:2;
    }

    .geo-right{
        order:1;
    }

    .geo-right h2{
        font-size:42px;
        margin-top:12px;
    }

    .geo-description{
        max-width:100%;
        font-size:17px;
        line-height:1.7;
    }

    .geo-map{
        height:500px;
    }

    .world-map{
        width:108%;
        height:108%;
        top:-15px;
        left:-15px;
    }

    .geo-stats{
        left:18px;
        right:18px;
        bottom:18px;
        padding:18px;
        gap:14px;
    }

    .geo-stat-icon{
        width:54px;
        height:54px;
    }

    .geo-stat-text h3{
        font-size:20px;
    }

    .geo-countries{
        grid-template-columns:repeat(2,1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:576px){

    .geography{
        padding:80px 0 60px;
    }

    .geography .container{
        gap:32px;
    }

    .geo-subtitle{
        font-size:12px;
        letter-spacing:3px;
        margin-bottom:10px;
    }

    .geo-right h2{
        font-size:34px;
        line-height:1.08;
        margin:10px 0 14px;
    }

    .geo-description{
        font-size:15px;
        line-height:1.6;
        margin-bottom:24px;
    }

    .geo-countries{
        grid-template-columns:1fr;
        gap:10px;
        margin-bottom:24px;
    }

    .country{
        padding:14px 16px;
        border-radius:16px;
    }

    .country img{
        width:26px;
        height:26px;
    }

    .country span{
        font-size:15px;
    }

    .geo-map{
        height:340px;
        border-radius:22px;
    }

    .world-map{
        width:112%;
        height:112%;
        top:-10px;
        left:-10px;
    }

    .geo-stats{
        position:relative;

        left:auto;
        right:auto;
        bottom:auto;

        margin:16px;

        flex-direction:column;
        align-items:flex-start;

        padding:16px;
        border-radius:18px;
        gap:12px;
    }

    .geo-stat{
        width:100%;
    }

    .geo-stat-icon{
        width:46px;
        height:46px;
        border-radius:14px;
    }

    .geo-stat-icon img{
        width:22px;
        height:22px;
    }

    .geo-stat-text h3{
        font-size:18px;
    }

    .geo-stat-text p{
        font-size:12px;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width:390px){

    .geo-right h2{
        font-size:30px;
    }

    .geo-description{
        font-size:14px;
    }

    .geo-map{
        height:300px;
    }

    .country{
        padding:12px 14px;
    }

}