/* ==========================================================
   BRISTOL VISITOR
   Main Stylesheet
   ========================================================== */


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

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

html{
    scroll-behavior:smooth;
}

body{
    background:#E7EAF1;
    color:#333;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    line-height:1.7;
}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

p{
    margin:0 0 18px;
}

h1{
    font-size:32px;
    font-weight:700;
    color:#31465A;
    margin:0 0 20px;
}

h2{
    font-size:26px;
    font-weight:600;
    color:#5D9DC1;
    margin:0 0 18px;
}

h3{
    font-size:22px;
    font-weight:600;
    color:#5D9DC1;
    margin:25px 0 15px;
}

h4{
    font-size:18px;
    font-weight:600;
    color:#31465A;
    margin:20px 0 12px;
}

h5{
    font-size:16px;
    font-weight:600;
}

h6{
    font-size:15px;
    font-weight:700;
}

ul,
ol{
    margin:0 0 20px 22px;
}

li{
    margin-bottom:8px;
}

hr{
    border:none;
    height:1px;
    background:#D8E1EA;
    margin:35px 0;
}


/* ==========================================================
   LINKS
   ========================================================== */

a{
    color:#5D9DC1;
    text-decoration:none;
    transition:.25s;
}

a:hover{
    color:#3D7EA6;
    text-decoration:underline;
}


/* ==========================================================
   IMAGES
   ========================================================== */

img{
    max-width:100%;
    height:auto;
    border:0;
    display:block;
}

.image-left{
    float:left;
    margin:0 20px 20px 0;
}

.image-right{
    float:right;
    margin:0 0 20px 20px;
}

.whiteimageborder{
    border:3px solid #fff;
}


/* ==========================================================
   HELPERS
   ========================================================== */

.clear{
    clear:both;
}

.red{
    color:#D64242;
}

.highlight{
    color:#5D9DC1;
}

.label{
    color:#fff;
}


/* ==========================================================
   PAGE LAYOUT
   ========================================================== */

.top-bar{
    height:6px;
    background:#ABC9E1;
}

.main-container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

.page-container{
    background:#FFFFFF;
}


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

.header{
    position: relative;

    width:100%;

    aspect-ratio:1800 / 380;

    background:url("../img/header.jpg") center center no-repeat;

    background-size:cover;

    overflow: visible;
}

.header-home{

    display:none;

}

.header-private{

    width:230px;

    height:100px;

    padding:6px 0 0 680px;

    background:url("../img/header-private.png") no-repeat;

}


/* ==========================================================
   CONTENT
   ========================================================== */

.content-container{

    width:100%;

    background:#DEE3E9;

    overflow:hidden;

}

.content-main{

    width:100%;

    padding:26px 40px 30px;

    background:#D9DFED;

}

.content-main p{

    font-size:17px;

    line-height:1.9;

}

.content-container-sub{

    width:100%;

    padding:30px 40px;

    background:#D9DFED;

}

.content-container-sub2{

    width:100%;

    padding:30px 40px;

    background:#D9DFED;

}
/* ==========================================================
   HOMEPAGE
   ========================================================== */

.home-slide{
    position:relative;
    width:100%;
}

#slideshow{
    position:relative;
    width:100%;
    aspect-ratio:1800 / 500;
    overflow:hidden;
    margin:0;
}

#slideshow img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    z-index:1;
}

#slideshow img.active{
    opacity:1;
    z-index:2;
}

#slideshow img.last-active{
    z-index:1;
}


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

.menu-container{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    display:flex;

    justify-content:center;

    z-index:100;

    padding-bottom:0;

    background:none;

}

#menuh{

    display:flex;

    gap:8px;

    align-items:flex-end;

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

    font-size:17px;

    font-weight:600;

}

#menuh ul{

    display:flex;

    list-style:none;

    margin:0;

    padding:0;

}

#menuh li{

    position:relative;

    margin:0;

    padding:0;

}

#menuh > ul > li > a{

    display:block;

    padding:16px 26px;

    color:#ffffff;

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

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    border-radius:14px 14px 0 0;

    text-decoration:none;

    transition:.25s;

}

#menuh > ul > li > a:hover{

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

    transform:translateY(-2px);

}

#menuh ul ul{

    display:none;

    position:absolute;

    left:0;

    top:100%;

    min-width:260px;

    background:#F3F6F9;

    border:1px solid #C7D5E1;

    border-radius:0 0 10px 10px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

}

#menuh ul ul li{

    width:100%;

}

#menuh ul ul a{

    display:block;

    padding:12px 18px;

    color:#40505F;

    background:#F3F6F9;

}

#menuh ul ul a:hover{

    background:#DCE8F2;

}

#menuh li:hover > ul{

    display:block;

}


/* ==========================================================
   NEWS TICKER
   ========================================================== */

.ticker-container{

    width:100%;

    background:#DEE3E9;

    border-top:1px solid #C8D7E5;

    border-bottom:1px solid #C8D7E5;

    padding:8px 0;

}

.tickercontainer{

    width:100%;

    height:28px;

    overflow:hidden;

}

.tickercontainer .mask{

    width:100%;

    height:28px;

    overflow:hidden;

    position:relative;

    left:0;

    top:0;

}

ul.newsticker{

    position:relative;

    list-style:none;

    margin:0;

    padding:0;

    white-space:nowrap;

}

ul.newsticker li{

    display:inline-block;

    margin-right:80px;

    font-size:15px;

    line-height:28px;

    color:#40505F;

}

ul.newsticker a{

    color:#40505F;

    text-decoration:none;

}


/* ==========================================================
   HOMEPAGE CONTENT
   ========================================================== */

.home-content{

    padding:45px;

    background:#DEE3E9;

}

.home-content h1{

    margin-bottom:25px;

}

.home-content p{

    font-size:17px;

    line-height:1.9;

}

.section{

    margin:50px 0;

}

.section:last-child{

    margin-bottom:0;

}


/* ==========================================================
   OLD BLOCKS
   (оставляем временно для внутренних страниц)
   ========================================================== */

.home-left{

    width:28%;

    float:left;

    padding:30px 1.5%;

}

.home-right{

    width:72%;

    float:left;

}

.home-timetabled{

    width:49%;

    float:left;

    margin-right:2%;

}

.home-privatehire{

    width:49%;

    float:left;

}

.newsletter{

    background:url("../img/newsletter-bgd.png") no-repeat;

}
/* ==========================================================
   FORMS
   ========================================================== */

.contactform{
    width:100%;
    max-width:650px;
}

.formRow{
    display:flex;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.formTitle{
    width:180px;
    padding-top:8px;
    font-size:15px;
    color:#496F6E;
    font-weight:600;
}

.formInput{
    flex:1;
}

.formInput input,
.formInput select{
    width:100%;
    padding:10px 12px;
    border:1px solid #C5D2E3;
    border-radius:6px;
    font-size:15px;
}

.formTextTitle{
    width:180px;
    padding-top:8px;
    font-size:15px;
    color:#496F6E;
    font-weight:600;
}

.formTextInput{
    flex:1;
}

.formTextInput textarea{
    width:100%;
    min-height:180px;
    padding:12px;
    border:1px solid #C5D2E3;
    border-radius:6px;
    resize:vertical;
    font-size:15px;
    font-family:Arial, Helvetica, sans-serif;
}


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

.footer{
    width:100%;
    margin-top:0;
    margin:0;
    padding:0;
}

.footer img{
    width:100%;
    display:block;
}

.footer-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    padding:25px 35px;

    background:#DEE3E9;

    color:#5A6C7E;

    font-size:14px;

}

.footer-left{

    flex:1;

}

.footer-right{

    text-align:right;

}

.footer-link{

    color:#5D9DC1;

    text-decoration:none;

}

.footer-link:hover{

    color:#3D7EA6;

}


/* ==========================================================
   SMALL HELPERS
   ========================================================== */

.testimonial{

    padding:25px;

    background:#F3F6F9;

    border-left:4px solid #5D9DC1;

    margin:30px 0;

    font-style:italic;

}

.imageR15{

    margin-right:15px;

}

.whitebackground{

    background:#FFFFFF;

    padding:10px;

    border-radius:6px;

}

dl{

    margin:25px 0;

    padding:20px;

    background:#F4F7FA;

    border-left:4px solid #ABC9E1;

}

dt{

    font-weight:bold;

    margin-bottom:8px;

    color:#31465A;

}

dd{

    margin-bottom:18px;

}


/* ==========================================================
   TOOLTIP
   ========================================================== */

.info{

    position:relative;

}

.info span{

    display:none;

}

.info:hover span{

    display:block;

    position:absolute;

    left:0;

    bottom:120%;

    width:240px;

    padding:15px;

    background:#31465A;

    color:#FFFFFF;

    border-radius:8px;

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

    z-index:999;

}


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

@media (max-width:992px){

    .main-container{

        width:96%;

    }

    .content-main,
    .content-container-sub,
    .content-container-sub2{

        padding:30px;

    }

    .footer-container{

        flex-direction:column;

        text-align:center;

    }

    .footer-right{

        text-align:center;

    }

}


@media (max-width:768px){

    #menuh{

        font-size:15px;

    }

    #menuh > ul > li > a{

        padding:14px 18px;

    }

    .content-main{

        padding:25px;

    }

    h1{

        font-size:28px;

    }

}


@media (max-width:600px){

    .formRow{

        display:block;

    }

    .formTitle,
    .formTextTitle{

        width:100%;

        margin-bottom:8px;

    }

    .footer-container{

        padding:20px;

    }

}

/* ==========================================================
   INTRO
   ========================================================== */

.intro{
    max-width:900px;
    margin:25px auto;
    padding:0 20px;
    background:transparent;
}

.intro h1{

    font-size:46px;

    color:#31465A;

    margin-bottom:18px;

}

.intro-lead{

    font-size:23px;

    line-height:1.6;

    color:#5D9DC1;

    margin-bottom:35px;

    font-weight:300;

}

.intro p{

    font-size:18px;

    line-height:1.9;

    color:#495A68;

    margin-bottom:22px;

}

.button-primary{

    display:inline-block;

    margin-top:20px;

    padding:14px 28px;

    background:#5D9DC1;

    color:#fff;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.button-primary:hover{

    background:#4B8CAF;

    color:#fff;

    text-decoration:none;

}

.intro-cards{

    display:grid;

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

    gap:24px;

    margin-top:50px;

}

.intro-card{

    display:block;

    padding:28px;

    background:#FFFFFF;

    border-radius:18px;

    color:#495A68;

    text-decoration:none;

    box-shadow:0 8px 24px rgba(0,0,0,.08);

    transition:all .25s ease;

}

.intro-card:hover{

    transform:translateY(-6px);

    box-shadow:0 16px 35px rgba(0,0,0,.14);

    text-decoration:none;

}

.intro-icon{

    font-size:42px;

    margin-bottom:18px;

}

.intro-card h3{

    margin:0 0 12px;

    font-size:22px;

    color:#31465A;

}

.intro-card p{

    margin:0;

    font-size:15px;

    line-height:1.7;

    color:#617283;

}

/* Планшеты */

@media (max-width:900px){

    .intro-cards{

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

    }

}

/* Телефоны */

@media (max-width:600px){

    .intro-cards{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   GUIDE SECTION
   ========================================================== */

.section-guide{

    max-width:1100px;

    margin:30px auto;
    margin-bottom:20px;

    padding:0 20px;

}

.section-guide h2{

    text-align:center;

    font-size:42px;

    color:#31465A;

    margin-bottom:10px;

}

.section-subtitle{

    text-align:center;

    color:#5D9DC1;

    font-size:20px;

    margin-bottom:60px;

}

.guide-list{

    display:flex;

    flex-direction:column;

    gap:36px;

}

.guide-card{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:34px;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    margin-bottom:40px;

}

.guide-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.guide-image{

    min-height:280px;

    background:#DCE7EF;

}

.guide-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}

.guide-content{

    padding:34px;

}

.guide-content h3{

    margin-top:0;

    color:#31465A;

    font-size:30px;

}

.guide-content p{

    color:#58697A;

    font-size:17px;

    line-height:1.8;

}

.guide-content a{

    display:inline-block;

    margin-top:20px;

    color:#5D9DC1;

    font-weight:700;

}

.guide-content a:hover{

    text-decoration:none;

}

@media(max-width:900px){

.guide-card{

    flex-direction:column;

}

.guide-image{

    width:100%;

    height:260px;

}

}

/* ==========================================================
   WHY VISIT BRISTOL
   ========================================================== */

.why-bristol{

    margin:30px 0;

    padding:30px 40px;

    background:#DEE3E9;

    border-top:1px solid #C5D2E3;

    border-bottom:1px solid #C5D2E3;

}

.why-bristol h2{

    text-align:center;

    font-size:42px;

    color:#31465A;

    margin-bottom:10px;

}

.why-grid{

    display:grid;

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

    gap:30px;

    max-width:1100px;

    margin:60px auto 0;

}

.why-card{

    background:#F6F8FB;

    padding:35px;

    border-radius:18px;

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

    transition:.25s;

}

.why-card:hover{

    transform:translateY(-5px);

    box-shadow:0 16px 35px rgba(0,0,0,.10);

}

.why-icon{

    font-size:42px;

    margin-bottom:15px;

}

.why-card h3{

    margin:0 0 15px;

    font-size:26px;

    color:#31465A;

}

.why-card p{

    margin:0;

    color:#58697A;

    line-height:1.8;

    font-size:16px;

}

@media(max-width:900px){

.why-grid{

    grid-template-columns:1fr;

}

}

/* ==========================================================
   LATEST ARTICLES
   ========================================================== */

.latest-articles{

    max-width:1100px;

    margin:30px auto 0;

    padding:0 20px 70px;

}

.latest-articles h2{

    text-align:center;

    font-size:42px;

    color:#31465A;

    margin-bottom:10px;

}

.articles-grid{

    display:grid;

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

    gap:30px;

    margin-top:55px;

}

.article-card{

    background:#FFFFFF;

    border-radius:18px;

    padding:35px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.article-card h3{

    margin:0 0 18px;

    font-size:26px;

}

.article-card h3 a{

    color:#31465A;

    text-decoration:none;

}

.article-card h3 a:hover{

    color:#5D9DC1;

}

.article-card p{

    margin:0 0 25px;

    color:#58697A;

    line-height:1.8;

    font-size:16px;

}

.read-more{

    color:#5D9DC1;

    font-weight:700;

    text-decoration:none;

}

.read-more:hover{

    text-decoration:underline;

}

@media(max-width:900px){

.articles-grid{

    grid-template-columns:1fr;

}

}

/* ===================================
   Article Sections
=================================== */

.guide-article{

    max-width:900px;
    margin:30px auto;
    padding:0 20px;

}

.guide-article img{

    width:100%;
    display:block;

    border-radius:16px;

    margin-bottom:24px;

}

.guide-article h2{

    margin-bottom:18px;

}

.guide-article p{

    font-size:17px;

    line-height:1.9;

    color:#58697A;

    margin-bottom:18px;

}
.map-section{
    max-width:900px;
    margin:60px auto;
    padding:0 20px;
}

.city-map{
    margin-top:30px;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
}

.city-map img{
    display:block;
    width:100%;
    height:auto;
}

.transport-section{
    margin:60px 0;
}

.transport-section.reverse{
    flex-direction:row-reverse;
}

.transport-section.reverse .transport-image{
    float:left;
    margin:8px 35px 20px 0;
}

.transport-section::after{
    content:"";
    display:block;
    clear:both;
}

.transport-image{
    float:right;
    width:340px;
    margin:8px 0 20px 35px;
}

.transport-image img{
    width:100%;
    display:block;
    border-radius:10px;
}

.transport-content{
    flex:1;
}

.transport-content h2{
    margin-top:0;
    margin-bottom:22px;
}

.transport-content p{
    font-size:17px;
    line-height:1.9;
    color:#58697A;
    margin-bottom:18px;
}

.transport-content .read-more{
    display:inline-block;
    margin-top:10px;
    font-weight:600;
}


@media (max-width:900px){

    .transport-image,
    .transport-section.reverse .transport-image{
        float:none;
        width:100%;
        margin:0 0 25px;
    }

}