/* =========================
   RESET & BASE
========================= */

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html {
    scroll-behavior:smooth;
}


body {

    background:#000;

    color:#fff;

    overflow-x:hidden;

    font-family:Arial, Helvetica, sans-serif;
    
    padding-top:10px;

}



img {

    display:block;

    max-width:100%;

    height:auto;

}



a {

    text-decoration:none;

}



:root{

    --gap:10px;

}





/* =====================
   MAIN BLOCKS
===================== */


.hero,
.slogan,
.services,
.contacts,
.about {

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}








/* =====================
   BANNER & SLOGAN
===================== */


.hero,
.slogan {

    padding:0;

    margin:0;

}



.banner {

    width:min(100vw,1600px);

}


.time {

    width:min(100vw,1550px);

}



.banner:hover {

    transform:scale(1.01);

}



.time:hover {

    transform:scale(1.01);

}







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


.services {

    width:100%;

    max-width:1600px;

    margin:0 auto;

    padding:0;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:var(--gap);

    flex-wrap:nowrap;

}



.services a {

    display:block;

    flex:1;

    min-width:0;

    max-width:520px;

}



.services img {

    width:100%;

    height:auto;

    transition:.35s ease;

}



.services img:hover {

    transform:translateY(-4px) scale(1.04);

    filter:brightness(1.15);

}



.services img:active {

    transform:scale(.96);

}



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


@media(max-width:768px){


    .services {

        gap:var(--gap);

        padding:0 5px;

        flex-wrap:nowrap;

    }



    .services a {

        flex:1 1 33.33%;

        max-width:none;

    }



    .services img {

        width:100%;

    }


}









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


.contacts {

    width:100%;

    max-width:1600px;

    margin:0 auto;

    padding:0;

    margin-bottom:10px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

}



.contacts a {

    display:flex;

    align-items:center;

    justify-content:center;

}



.contact-btn {

    width:310px;

    height:310px;

    object-fit:contain;

    transition:.35s ease;

}



.contact-btn.app {

    width:477px;

    height:auto;

}



.contact-btn:hover {

    transform:translateY(-4px) scale(1.04);

    filter:brightness(1.15);

}



.contact-btn:active {

    transform:scale(.96);

}



/* =====================
   MOBILE CONTACTS FIX
===================== */

@media(max-width:500px){


    .contacts {

        padding:10px 0;

        gap:10px;

        flex-wrap:nowrap;

        justify-content:center;

        align-items:center;

    }


    .contact-btn {

        width:20vw;

        height:20vw;

    }


    .contact-btn.app {

        width:32vw;

        height:32vw;

        max-width:170px;

        max-height:170px;

        transform:translateY(-3px);

    }


    .contact-btn:hover {

        transform:none;

    }

}

/* =====================
   ABOUT COMPANY
===================== */


.about {

    width:100%;

    display:flex;

    justify-content:center;

    padding:var(--gap) 0;

}



.about-box {

    width:min(100vw,1600px);

    padding:20px 40px 25px;

    text-align:center;

    border-top:1px solid rgba(220,180,90,.5);

}



.about-box h2 {

    color:#cfa85b;

    font-size:16px;

    letter-spacing:6px;

    margin-bottom:10px;

}



.about-box h3 {

    color:#fff;

    font-size:28px;

    letter-spacing:4px;

    margin-bottom:18px;

}



.about-box p {

    max-width:1200px;

    margin-left:auto;

    margin-right:auto;

    color:#d8d8d8;

    font-size:16px;

    line-height:1.6;

    margin-bottom:12px;

}








/* =====================
   FOOTER
===================== */


footer {

    width:100%;

    display:flex;

    justify-content:center;

    padding:0 0 30px;

}



.footer-box {

    width:min(100vw,1600px);

    text-align:center;

    border-top:1px solid rgba(220,180,90,.5);

    padding-top:20px;

}



.footer-contact {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:var(--gap);

}



.footer-contact a {

    color:#cfa85b;

    font-size:15px;

    transition:.3s ease;

}



.footer-contact a:hover {

    color:#fff;

}



.footer-box span {

    display:block;

    color:#777;

    font-size:12px;

    margin-top:20px;

}








/* =====================
   SCROLL ANIMATION
===================== */


.hidden {

    opacity:0;

    transform:translateY(30px);

    transition:1s ease;

}



.show {

    opacity:1;

    transform:translateY(0);

}








/* =====================
   CALLBACK MODAL
===================== */


.modal {

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.85);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}



.modal.active {

    display:flex;

}





.modal-box {


    width:min(90vw,600px);

    background:#000;

    border:1px solid rgba(220,180,90,.7);

    padding:35px;

    text-align:center;

    position:relative;

    box-shadow:0 0 40px rgba(220,180,90,.15);


}






.modal-box h2 {


    color:#cfa85b;

    letter-spacing:6px;

    font-size:26px;

    margin-bottom:18px;


}






.modal-box p {


    color:#d8d8d8;

    font-size:16px;

    line-height:1.5;

    margin-bottom:25px;


}






.close {


    position:absolute;

    right:20px;

    top:10px;


    color:#cfa85b;


    font-size:32px;

    cursor:pointer;


}






.modal-box input,
.modal-box textarea {


    width:100%;


    background:#4b3035;


    border:1px solid rgba(220,180,90,.5);


    padding:16px;


    margin-bottom:15px;


    color:#fff;


    font-size:16px;


    font-family:Arial, Helvetica, sans-serif;


    outline:none;


}







.modal-box textarea {


    height:100px;

    resize:none;

    color:#ffffff;

    line-height:1.5;


}







.modal-box input::placeholder,
.modal-box textarea::placeholder {


    color:#d0c0b0;

    opacity:1;


}







.modal-box button {


    width:100%;


    background:#cfa85b;


    color:#000;


    border:none;


    padding:17px;


    font-size:15px;


    font-weight:bold;


    letter-spacing:5px;


    cursor:pointer;


    transition:.3s ease;


}







.modal-box button:hover {


    background:#fff;


}









/* =====================
   SUCCESS MESSAGE
===================== */


.success-message {

    display:none;

    text-align:center;

    padding:30px 20px;

    animation:fadeIn .5s ease;

}



.success-message.active {

    display:block;

}



.success-icon {

    width:60px;

    height:60px;

    margin:0 auto 20px;

    border:2px solid #cfa85b;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#cfa85b;

    font-size:35px;

}



.success-message h3 {

    color:#cfa85b;

    letter-spacing:4px;

    font-size:20px;

    margin-bottom:15px;

}



.success-message p {

    color:#d8d8d8;

    font-size:15px;

    line-height:1.6;

}



@keyframes fadeIn {

    from {

        opacity:0;

        transform:translateY(20px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}

/* =====================
   LAND CARGO GRID
===================== */


.land-cargo-grid {

    width:100%;

    max-width:1600px;

    margin:0 auto;

    display:grid;

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

    gap:var(--gap);

    padding:0;

}



.land-cargo-grid a {

    display:block;

    transition:.35s ease;

}



.land-cargo-grid img {

    width:100%;

    transition:.35s ease;

}



.land-cargo-grid a:hover img {

    transform:translateY(-4px) scale(1.04);

    filter:brightness(1.15);

}



.land-cargo-grid a:active img {

    transform:scale(.96);

}







/* =====================
   CARGO PAGE
===================== */


.vehicle {

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:var(--gap) 0;

}



.vehicle-frame {

    position:relative;

    width:min(90vw,1080px);

}



/* готовая картинка с рамкой */

.car-photo {

    width:100%;

    height:auto;

    display:block;

}





/* =====================
   ARROWS
===================== */


.arrow {

    position:absolute;

    top:50%;

    width:70px;

    cursor:pointer;

    transform:translateY(-50%);

    transition:.3s ease;

    z-index:5;

}



.arrow:hover {

    transform:translateY(-50%) scale(1.1);

}



.arrow.left {

    left:-90px;

}



.arrow.right {

    right:-90px;

}







/* =====================
   GALLERY
===================== */


.cargo-gallery {

    position:relative;

    width:min(90vw,900px);

    margin:var(--gap) auto;

    display:flex;

    justify-content:center;

    align-items:center;

}







/* =====================
   DESCRIPTION
===================== */


.cargo-description {

    width:100%;

    text-align:center;

    padding:var(--gap) 20px 40px;

}



.cargo-description h2 {

    color:#cfa85b;

    font-size:28px;

    letter-spacing:5px;

    margin-bottom:15px;

}



.cargo-description p {

    color:#d8d8d8;

    font-size:16px;

    line-height:1.6;

}




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

@media(max-width:768px){

    .footer-box {

        width:100%;

        padding-left:10px;
        padding-right:10px;

    }


    .footer-columns {

        width:100%;

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

        gap:0;

    }


    /* CONTACT LEFT */

    .footer-contact {

        width:30%;

        align-items:flex-start;

        text-align:left;

        gap:6px;

        padding:0;

        min-width:0;

    }


    .footer-contact a {

        font-size:13px;

        line-height:1.4;

        white-space:nowrap;

    }


    /* LANGUAGE CENTER */

    .footer-language {

        width:40%;

        justify-content:center;

        min-width:0;

    }


    .footer-language img {

        width:130px;

        max-width:100%;

        height:auto;

    }


    /* ADDRESS RIGHT */

    .footer-address {

        width:30%;

        text-align:right;

        font-size:13px;

        line-height:1.4;

        padding:0;

        min-width:0;

        overflow-wrap:anywhere;

        word-break:break-word;

    }

}



.hero,
.slogan{

     padding:0 !important;

}


.hero img,
.slogan img{

    margin:0 !important;

}


/* =====================
   FINAL SPACING SYSTEM
===================== */


/* единый отступ между главными блоками */

.hero,
.slogan,
.services,
.contacts,
.about,
.land-cargo-grid,
.cargo-gallery {

    margin-bottom:var(--gap);

}



/* убираем лишние внешние отступы */

.hero,
.slogan {

    padding:0 !important;

}



/* картинки всегда без внутренних отступов */

.hero img,
.slogan img,
.services img,
.land-cargo-grid img {

    margin:0;

}



/* единый размер контейнера */

.hero,
.slogan,
.services,
.contacts,
.about-box,
.land-cargo-grid {

    max-width:1600px;

}



/* LAND карточки */

.land-cargo-grid {

    margin-left:auto;

    margin-right:auto;

}



/* CARGO страница */

.vehicle {

    margin-bottom:var(--gap);

}



/* FOOTER */

footer {

    margin-top:var(--gap);

}


/* =====================
   MOBILE CARGO FINAL FIX
===================== */

@media(max-width:768px){

    .vehicle-frame {

        width:88vw;

        margin:0 auto;

    }


    .cargo-gallery {

        width:88vw;

        margin:10px auto;

    }


    .cargo-gallery .car-photo {

        width:100%;

        height:auto;

        object-fit:cover;

    }


    .arrow {

        width:22px;

    }


    .arrow.left {

        left:-25px;

    }


    .arrow.right {

        right:-25px;

    }

}

/* =====================
   LANGUAGES PAGE
===================== */


.languages {

    width:min(100vw,1600px);

    margin:0 auto;

    padding:0 20px;

    display:grid;

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

    gap:20px;

}



.languages a {

    display:block;

}



.languages img {

    width:100%;

    height:auto;

    display:block;

}





@media(max-width:768px){


    .languages {

        width:100%;

        padding:0 12px;

        gap:8px;

    }


}

/* =====================
   LANGUAGES HOVER EFFECT
===================== */


.languages img {

    transition:.35s ease;

}



.languages a:hover img {

    transform:translateY(-6px) scale(1.04);

    filter:brightness(1.15);

}



.languages a:active img {

    transform:scale(.96);

}


/* =====================
   FOOTER COLUMNS
===================== */

.footer-columns {

    width:min(100vw,1200px);

    max-width:100%;

    margin:0 auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/* =====================
   LANGUAGE LEFT
===================== */

.footer-language {

    width:40%;

    display:flex;

    justify-content:flex-start;

}


.footer-language img {

    width:300px;

    height:auto;

    transition:.35s ease;

}


.footer-language img:hover {

    transform:translateY(-4px) scale(1.04);

    filter:brightness(1.15);

}


/* =====================
   ADDRESS RIGHT
===================== */

.footer-address {

    width:40%;

    text-align:right;

    color:#cfa85b;

    font-size:18px;

    line-height:1.5;

    

}



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

@media(max-width:768px){

    .footer-columns {

        width:100%;

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

        gap:0;

    }


    /* LANGUAGE LEFT */

    .footer-language {

        width:45%;

        justify-content:flex-start;

    }


    .footer-language img {

        width:140px;

        max-width:100%;

        height:auto;

    }


    /* ADDRESS RIGHT */

    .footer-address {

        width:55%;

        text-align:right;

        font-size:14px;

        line-height:1.4;

        padding-right:10px;

        min-width:0;

        overflow-wrap:normal;

        word-break:normal;

    }

}



/* =====================
   SMALL TABLET / FOLD
===================== */

@media (min-width:501px) and (max-width:768px){


    .contacts {

        gap:10px;

    }


    .contact-btn {

        width:180px;

        height:180px;

    }


    .contact-btn.app {

        width:280px;

    }


}





/* =====================
   HIGH DPI WINDOWS FIX
===================== */

@media (min-resolution:1.5dppx) and (min-width:769px) {

    .contact-btn {
        width:360px;
        height:360px;
    }

    .contact-btn.app {
        width:550px;
        height:auto;
    }


    /* CARGO GALLERY */

    .cargo-gallery {
        width:calc(100% - 40px) !important;
        max-width:1200px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }


    /* CARGO FRAME */

    .vehicle-frame {
        width:85% !important;
        max-width:none !important;
    }

}


/* =====================
   FINAL BLOCK SPACING
===================== */


.hero {

    margin-bottom:10px !important;

}


.slogan {

    margin-bottom:10px !important;

}


/* =====================
   GLOBAL SIDE SPACING
===================== */

.hero,
.slogan,
.services,
.contacts,
.land-cargo-grid,
.languages {

    padding-left:10px !important;
    padding-right:10px !important;

}

/* =====================
   CARGO BLOCK SPACING
===================== */

.vehicle {

    padding:0 !important;

}


.cargo-gallery {

    margin:10px auto 0 !important;

}











/* =====================
   LAPTOP / DESKTOP — 20PX SPACING
===================== */

@media (min-width:770px) {

    /* 20px слева и справа */

    .hero,
    .slogan,
    .services,
    .contacts,
    .land-cargo-grid,
    .languages {

        padding-left:20px !important;
        padding-right:20px !important;

    }


    /* 20px между AIR / RIVER / LAND */

    .services {

        gap:20px !important;

    }


    /* 20px между LAND блоками */

    .land-cargo-grid {

        gap:20px !important;

    }


    /* 20px между блоками сверху вниз */

    .hero {

        margin-bottom:20px !important;

    }


    .slogan {

        margin-bottom:20px !important;

    }


    .services {

        margin-bottom:20px !important;

    }


    .contacts {

        /*padding-left:20px !important;
        padding-right:20px !important;*/
        margin-top:20px !important;
        margin-bottom:20px !important;
        
        gap:20px !important;
        

    }

}