/* =====================================================
   NEWFLY TRAVEL
   MAIN STYLE
   PART 1/4

   RESET
   VARIABLES
   GLOBAL
   HEADER
   LANGUAGE
   BUTTONS
===================================================== */


/* ================= RESET ================= */

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


html{
    scroll-behavior:smooth;
}


body{
    font-family:'Inter', Arial, sans-serif;
    background:#f7faf8;
    color:#222;
    overflow-x:hidden;
}


img{
    max-width:100%;
    display:block;
}


a{
    text-decoration:none;
    color:inherit;
}


button{
    font-family:inherit;
}


/* ================= VARIABLES ================= */


:root{

    --primary:#0F8A43;

    --primary-dark:#087238;

    --green-light:#13A35B;

    --background:#f7faf8;

    --white:#ffffff;

    --text:#222;

    --gray:#666;


    --shadow:
    0 15px 40px rgba(0,0,0,.08);


    --radius:20px;

}



/* ================= CONTAINER ================= */


.container{

    width:min(1200px,92%);

    margin:auto;

}



/* =====================================================
   HEADER
===================================================== */


.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;


    background:rgba(255,255,255,.92);

    backdrop-filter:blur(12px);


    box-shadow:
    0 5px 20px rgba(0,0,0,.05);

}



.header-container{

    height:85px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}




/* ================= LOGO ================= */


.logo img{

    width:75px;

    height:75px;

    border-radius:50%;

    object-fit:cover;

    background:white;

    padding:5px;


    box-shadow:
    0 8px 25px rgba(0,0,0,.18);


    transition:.3s;

}



.logo img:hover{

    transform:scale(1.05);

}



/* ================= NAVIGATION ================= */


.navbar{

    display:flex;

    gap:30px;

}



.navbar a{

    font-size:15px;

    font-weight:600;

    color:#333;

    transition:.3s;

}



.navbar a:hover{

    color:var(--primary);

}



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


.language-switcher{

    display:flex;

    align-items:center;

}



.language-switcher select{

    padding:10px 18px;

    border-radius:12px;

    border:2px solid var(--primary);


    background:white;

    color:var(--primary);


    font-weight:600;

    cursor:pointer;


    transition:.3s;

}



.language-switcher select:hover{

    box-shadow:
    0 5px 15px rgba(15,138,67,.2);

}



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


.btn-primary{


    background:var(--primary);

    color:white;


    padding:15px 30px;


    border-radius:12px;


    font-weight:700;


    border:none;


    cursor:pointer;


    transition:.3s;

}



.btn-primary:hover{


    background:var(--primary-dark);


    transform:translateY(-3px);

}





.btn-secondary{


    background:transparent;


    color:white;


    border:2px solid white;


    padding:15px 30px;


    border-radius:12px;


    font-weight:700;


    cursor:pointer;


    transition:.35s;

}



.btn-secondary:hover{


    background:white;


    color:var(--primary);


    transform:translateY(-3px);

}




.btn-outline{


    border:2px solid white;


    color:white;


    padding:13px 28px;


    border-radius:12px;


    font-weight:700;


    transition:.3s;

}



.btn-outline:hover{


    background:white;


    color:var(--primary);

}






/* ================= SECTION GLOBAL ================= */


section{

    padding:90px 0;

}



section h2{

    font-size:42px;

    font-weight:700;

    margin-bottom:55px;


    text-align:center;


    color:#0d3b36;

}
/* =====================================================
   PREMIUM HERO DESIGN
===================================================== */


.hero{

    min-height:100vh;

    padding-top:100px;

    display:flex;

    align-items:center;

    position:relative;


    background:

    linear-gradient(
        90deg,
        rgba(0,40,20,.75),
        rgba(0,0,0,.35)
    ),

    url("../assets/images/hero.jpg");


    background-size:cover;

    background-position:center;

}



.hero-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

}



.hero-content{

    max-width:700px;

}



.hero-label{

    display:inline-flex;

    padding:10px 20px;


    background:

    rgba(255,255,255,.15);


    backdrop-filter:blur(10px);


    border-radius:50px;


    font-size:14px;

    margin-bottom:25px;

}




.hero h1{


    font-size:64px;


    line-height:1.1;


    font-weight:800;


    color:white;


    margin-bottom:25px;


}




.hero p{


    font-size:20px;


    line-height:1.7;


    color:

    rgba(255,255,255,.9);


    margin-bottom:35px;


}





.hero-buttons{


    display:flex;


    gap:20px;


}




.btn-primary{


    background:

    linear-gradient(
        135deg,
        #13A35B,
        #087238
    );


    box-shadow:

    0 15px 30px rgba(15,138,67,.35);


}



.btn-primary:hover{


    transform:

    translateY(-5px);


}




.btn-secondary{


    background:

    rgba(255,255,255,.1);


    backdrop-filter:blur(10px);


}





.btn-secondary:hover{


    background:white;


    color:#0F8A43;


}






.hero-statistics{


    display:flex;


    flex-direction:column;


    gap:20px;


}



.stat-card{


    background:

    rgba(255,255,255,.15);


    backdrop-filter:

    blur(15px);


    border:

    1px solid rgba(255,255,255,.25);


    padding:25px;


    border-radius:25px;


    min-width:180px;


    color:white;


    transition:.3s;


}



.stat-card:hover{


    transform:

    translateY(-8px);


    background:

    rgba(255,255,255,.25);


}



.stat-card strong{


    font-size:38px;


}


/* ================= HERO STATISTICS ================= */


.hero-statistics{

    display:flex;

    flex-direction:column;

    gap:20px;

}



.stat-card{

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(10px);


    padding:25px;

    border-radius:20px;


    text-align:center;


    min-width:160px;

}



.stat-card strong{

    display:block;

    font-size:32px;

}



.stat-card span{

    font-size:15px;

}



/* =====================================================
   PREMIUM SEARCH BOX
===================================================== */


.search-section{

    margin-top:-70px;

    position:relative;

    z-index:20;

}



.search-box{


    background:white;


    padding:35px;


    border-radius:30px;


    box-shadow:

    0 25px 60px rgba(0,0,0,.12);


}



.search-box h2{


    font-size:32px;


    color:#0d3b36;


    text-align:center;


    margin-bottom:35px;


}




.search-grid{


    display:grid;


    grid-template-columns:

    1fr 1fr 1fr auto;


    gap:20px;


    align-items:end;


}





.search-item{


    display:flex;


    flex-direction:column;


    gap:10px;


}




.search-item label{


    font-size:14px;


    font-weight:700;


    color:#444;


}




.search-item input{


    height:55px;


    padding:0 18px;


    border-radius:15px;


    border:

    1px solid #ddd;


    font-size:16px;


    transition:.3s;


}



.search-item input:focus{


    outline:none;


    border-color:

    var(--primary);


    box-shadow:

    0 0 0 4px rgba(15,138,67,.12);


}




.search-button{


    height:55px;


    padding:

    0 35px;


    border-radius:15px;


    border:none;


    cursor:pointer;


    color:white;


    font-weight:700;


    font-size:16px;


    background:


    linear-gradient(

        135deg,

        #13A35B,

        #087238

    );


    box-shadow:


    0 15px 30px

    rgba(15,138,67,.3);


    transition:.3s;


}




.search-button:hover{


    transform:

    translateY(-4px);


    box-shadow:


    0 20px 40px

    rgba(15,138,67,.4);


}



/* =====================================================
   PREMIUM ADVANTAGES
===================================================== */


.advantages{

    background:

    linear-gradient(
        180deg,
        #f5fbf8,
        #ffffff
    );

}



.advantages-grid{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:30px;


}




.advantage-card{


    background:white;


    padding:40px 30px;


    border-radius:28px;


    text-align:center;


    box-shadow:


    0 20px 50px rgba(0,0,0,.06);


    border:


    1px solid rgba(15,138,67,.08);


    transition:.4s;


}





.advantage-card:hover{


    transform:

    translateY(-12px);


    box-shadow:


    0 30px 70px rgba(0,0,0,.12);


}





.advantage-icon{


    width:80px;


    height:80px;


    margin:

    0 auto 25px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:


    rgba(15,138,67,.12);


    color:var(--primary);


    font-size:32px;


    font-weight:800;


}




.advantage-card h3{


    font-size:24px;


    margin-bottom:15px;


    color:#0d3b36;


}




.advantage-card p{


    color:#666;


    line-height:1.7;


    font-size:16px;


}

/* =====================================================
   PREMIUM TOUR CARDS
===================================================== */


.tours-section{

    background:#f7faf8;

}



/* =====================================================
   TOUR SLIDER CONTROLS
===================================================== */


.tour-slider-wrapper{

    position:relative;

    display:flex;

    align-items:center;

}



.tours-slider{

    width:100%;

}



.slider-btn{


    position:absolute;


    top:50%;


    transform:translateY(-50%);


    z-index:10;


    width:48px;


    height:48px;


    border-radius:50%;


    border:none;


    background:white;


    color:var(--primary);


    font-size:22px;


    font-weight:bold;


    cursor:pointer;


    box-shadow:

    0 10px 30px rgba(0,0,0,.15);


    transition:.3s;


}



.slider-btn:hover{


    background:var(--primary);


    color:white;


    transform:

    translateY(-50%)

    scale(1.1);


}



.slider-btn.prev{


    left:15px;


}



.slider-btn.next{


    right:15px;


}

.tours-slider{

    display:flex;

    gap:30px;

    overflow:hidden;

    width:100%;

    scroll-behavior:auto;

}

.tours-slider:hover .tour-card:not(:hover){

    opacity:.75;

}



.tour-card{


    min-width:330px;


    background:white;


    border-radius:28px;


    overflow:hidden;


    position:relative;


    box-shadow:


    0 15px 45px rgba(0,0,0,.08);


    transition:
    .45s ease,
    opacity .45s ease;


}





.tour-card:hover{


    transform:

    translateY(-12px);


    box-shadow:


    0 25px 60px rgba(0,0,0,.15);


}






.tour-card img{


    width:100%;


    height:250px;


    object-fit:cover;


    transition:.6s;


}





.tour-card:hover img{


    transform:

    scale(1.08);


}






.tour-content{


    padding:28px;


}




.tour-content h3{


    font-size:26px;


    font-weight:800;


    color:#0d3b36;


    margin-bottom:12px;


}




.tour-description{


    color:#666;


    line-height:1.6;


    min-height:50px;


    margin-bottom:15px;


}




.tour-duration{


    display:inline-block;


    padding:

    6px 14px;


    border-radius:30px;


    background:

    rgba(15,138,67,.1);


    color:var(--primary);


    font-size:14px;


    font-weight:600;


}






.tour-price{


    margin:20px 0;


    font-size:32px;


    font-weight:900;


    color:var(--primary);


}





.book-btn{


    width:100%;


    height:50px;


    border:none;


    border-radius:15px;


    cursor:pointer;


    font-size:16px;


    font-weight:700;


    color:white;


    background:


    linear-gradient(

        135deg,

        #13A35B,

        #087238

    );


    transition:.3s;


}





.book-btn:hover{


    transform:

    translateY(-3px);


    box-shadow:


    0 15px 30px

    rgba(15,138,67,.35);


}

/* ================= SLIDER BUTTONS ================= */


.slider-btn{


    width:50px;


    height:50px;


    border-radius:50%;


    border:none;


    background:var(--primary);


    color:white;


    font-size:22px;


    cursor:pointer;


    flex-shrink:0;


    transition:.3s;

}




.slider-btn:hover{


    background:var(--primary-dark);


}
/* =====================================================
   PREMIUM PARTNERS
===================================================== */


.partners-section{

    background:white;

    padding:90px 0;

}



.partners-section h2{

    margin-bottom:20px;

}




.partners-slider{


    width:100%;


    overflow:hidden;


    margin-top:50px;


}





.partners-track{


    display:flex;


    align-items:center;


    gap:80px;


    width:max-content;


    animation:

    partnersMove 30s linear infinite;


}




.partners-track:hover{


    animation-play-state:paused;


}





.partners-track img{


    height:60px;


    width:auto;


    max-width:160px;


    object-fit:contain;


    filter:

    grayscale(100%);


    opacity:.65;


    transition:.35s;


}





.partners-track img:hover{


    filter:

    grayscale(0);


    opacity:1;


    transform:

    scale(1.1);


}






@keyframes partnersMove{


    from{

        transform:translateX(0);

    }


    to{

        transform:translateX(-50%);

    }


}
/* =====================================================
   PAYMENT / QR SECTION
===================================================== */


.qr-box{


    display:flex;

    justify-content:center;

    margin-top:70px;

    padding:40px 20px;


}




.qr-payment{


    width:380px;


    background:white;


    padding:40px;


    text-align:center;


    border-radius:30px;


    box-shadow:

    0 20px 60px rgba(0,0,0,.10);


    border:

    1px solid rgba(15,138,67,.12);


}




.qr-payment::before{


    content:"Безопасная оплата";


    display:block;


    font-size:28px;


    font-weight:800;


    color:#0d3b36;


    margin-bottom:25px;


}




.qrcode{


    width:220px;


    height:220px;


    object-fit:contain;


    margin:0 auto 25px;


    border-radius:15px;


}




.qr-payment .partners-text{


    color:#666;


    line-height:1.7;


    font-size:16px;


    margin-top:15px;


}
/* =====================================================
   ABOUT PREMIUM DESIGN
===================================================== */


.about-content{

    max-width:1100px;

    margin:auto;

}



.about-content > p{


    font-size:18px;


    line-height:1.8;


    color:#555;


    text-align:center;


}



.about-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


    margin-top:50px;


}



.about-card{


    background:white;


    padding:35px;


    border-radius:25px;


    box-shadow:

    0 20px 50px rgba(0,0,0,.08);


    transition:.35s;


}



.about-card:hover{


    transform:translateY(-8px);


}




.about-card h3{


    color:var(--primary);


    font-size:24px;


    margin-bottom:20px;


}




.service-list{


    list-style:none;


}




.service-list li{


    padding:10px 0;


    color:#555;


}




.service-list li::before{


    content:"✓";


    color:var(--primary);


    font-weight:bold;


    margin-right:10px;


}




.specialist-card{


    margin-top:25px;


    padding:25px;


    background:#f5fbf8;


    border-radius:20px;


    border-left:

    5px solid var(--primary);


}




.specialist-card h4{


    font-size:22px;


    color:#0d3b36;


    margin-bottom:10px;


}




.specialist-card p{


    color:var(--primary);


    font-weight:600;


    margin-bottom:10px;


}




.specialist-card span{


    color:#666;


}
/* =====================================================
   CONTACTS
===================================================== */


.contacts-section{


    background:

    linear-gradient(
        180deg,
        #eef8ff,
        white
    );

}





.contacts-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;


    margin-bottom:40px;

}





.contact-card{


    background:#f7faf8;


    padding:35px;


    text-align:center;


    border-radius:20px;


    transition:.3s;

}



.contact-card:hover{


    transform:translateY(-8px);

}




.contact-card .icon{


    font-size:35px;


    margin-bottom:15px;

}



.contact-card h3{


    margin-bottom:10px;

}



.contact-card p{


    color:#666;

}



.contacts-section a{


    color:var(--primary);


    font-weight:600;


    transition:.3s;

}



.contacts-section a:hover{


    color:var(--primary-dark);


    text-decoration:underline;

}





/* =====================================================
   MAP
===================================================== */


.map-box{


    margin-top:60px;


    width:100%;


    height:430px;


    border-radius:24px;


    overflow:hidden;


    background:#ddd;


    box-shadow:


    0 20px 60px rgba(0,0,0,.12);


    transition:.35s;

}



.map-box:hover{


    transform:translateY(-6px);

}





.map-box iframe{


    width:100%;


    height:100%;


    border:0;


}




.map-title{


    text-align:center;


    padding:22px;


    font-size:24px;


    font-weight:700;


    background:var(--primary);


    color:white;

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


.footer{


    background:#075b2d;


    color:white;


    padding:45px 0;


}



.footer-container{


    text-align:center;


}



.footer-logo{


    display:flex;


    justify-content:center;


    margin-bottom:20px;


}



.footer-logo img{


    width:90px;


    height:90px;


    border-radius:50%;


    object-fit:cover;


    background:white;


    padding:8px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.3);


    transition:.3s;


}



.footer-logo img:hover{


    transform:

    translateY(-5px)

    scale(1.05);


}





.footer-links{


    display:flex;


    justify-content:center;


    flex-wrap:wrap;


    gap:25px;


    margin-bottom:25px;


}



.footer-links a{


    transition:.3s;


}



.footer-links a:hover{


    color:#8ff0b0;


}



.footer-copy{


    opacity:.8;


    font-size:14px;


}








/* =====================================================
   BOOKING MODAL
===================================================== */


.modal{


    display:none;


    position:fixed;


    inset:0;


    background:

    rgba(0,0,0,.65);


    z-index:3000;


    justify-content:center;


    align-items:center;


    padding:20px;


}




.modal-content{


    width:100%;


    max-width:520px;


    background:white;


    padding:35px;


    border-radius:25px;


    position:relative;


    animation:

    modalShow .3s ease;


}



@keyframes modalShow{


    from{


        opacity:0;


        transform:translateY(-30px);


    }


    to{


        opacity:1;


        transform:translateY(0);


    }


}





.close-modal{


    position:absolute;


    right:25px;


    top:15px;


    font-size:35px;


    cursor:pointer;


    color:#555;


}



.modal-content h2{


    margin-bottom:20px;


}



#selectedTour{


    margin-bottom:20px;


    color:#555;


}



.modal-content form{


    display:flex;


    flex-direction:column;


    gap:15px;


}



.modal-content input{


    padding:15px;


    border-radius:12px;


    border:1px solid #ddd;


    font-size:16px;


}



.counter{


    display:flex;


    align-items:center;


    justify-content:center;


    gap:15px;


}



.counter button{


    width:35px;


    height:35px;


    border:none;


    border-radius:50%;


    background:var(--primary);


    color:white;


    font-size:20px;


    cursor:pointer;


}



.counter button:hover{


    background:var(--primary-dark);


}





#successMessage{


    display:none;


    margin-top:20px;


    text-align:center;


    color:var(--primary);


    font-weight:700;


}








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


.hero-content,

.stat-card,

.advantage-card,

.tour-card{


    animation:


    fadeUp .8s ease;


}



@keyframes fadeUp{


    from{


        opacity:0;


        transform:translateY(30px);


    }


    to{


        opacity:1;


        transform:translateY(0);


    }


}







/* =====================================================
   RESPONSIVE
===================================================== */



@media(max-width:1000px){



.hero-container{


    flex-direction:column;


    text-align:center;


}



.hero h1{


    font-size:45px;


}



.hero-buttons{


    justify-content:center;


}



.hero-statistics{


    flex-direction:row;


    flex-wrap:wrap;


    justify-content:center;


}



.search-grid{


    grid-template-columns:1fr;


}



.advantages-grid{


    grid-template-columns:

    repeat(2,1fr);


}



.contacts-grid{


    grid-template-columns:1fr;


}



}





@media(max-width:600px){



.header-container{


    height:75px;


}



.navbar{


    display:none;


}



.hero h1{


    font-size:36px;


}



.hero p{


    font-size:16px;


}



.hero-statistics{


    flex-direction:column;


}



section{


    padding:90px 0;


}



section h2{


    font-size:32px;


}



.advantages-grid{


    grid-template-columns:1fr;


}



.tour-card{

    flex:0 0 330px;

    min-width:330px;

}



.footer-links{


    flex-direction:column;


}



.modal-content{


    padding:25px;


}



}