:root {
--blue: #0988F1;
--green: #50c878;
--blue-dark: #0988F1;
--green-dark: #3aad60;
--blue-light: #e8f4ff;
--green-light: #eafff1;
--white: #fff;
--dark: #0d1b2a;
--gray: #6c757d;
--font-head: 'Unbounded', sans-serif;
--font-body: 'Manrope', sans-serif;
}
.wpcf7-not-valid-tip{
margin-bottom: 12px;
}
.contact-val img{
width: 30px;
}
.wpcf7-list-item-label{
color:rgba(255,255,255,.35);
font-size:.75rem;
margin-top:10px;
text-align:center;
line-height: 1 !important;
}
.wpcf7-list-item label {
display: flex;
line-height: 1.6 !important;
}
.wpcf7-response-output{
border-radius: 15px;
}
.contact-box{
justify-content: space-around;
}
a{ 
text-decoration: none !important; 
} .hero {
min-height: 100vh;
background: linear-gradient(to bottom, rgba(13,27,42,.7) 0%, rgba(9,136,241,.3) 100%),
url(//progulkiponeve.ru/wp-content/uploads/2026/05/orig.jpg) center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 120px 20px 60px;
position: relative;
overflow: hidden;
margin-top: 40px;
}
.hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 80px;
background: linear-gradient(to top, #fff, transparent);
}
.hero h1 {
font-family: var(--font-head);
font-size: clamp(2rem, 5vw, 3.8rem);
font-weight: 900;
color: #fff;
letter-spacing: -0.03em;
line-height: 1.15;
margin-bottom: 1.2rem;
text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.hero h1 span { color: var(--green); }
.hero p {
color: rgba(255,255,255,.9);
font-size: clamp(1rem, 2vw, 1.15rem);
max-width: 640px;
margin: 0 auto 2.5rem;
line-height: 1.7;
border-radius: 20px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
} .timer-box {
display: inline-flex;
align-items: center;
gap: 24px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.25);
backdrop-filter: blur(16px);
border-radius: 20px;
padding: 18px 32px;
margin-bottom: 2rem;
flex-wrap: wrap;
justify-content: center;
}
.timer-label {
color: rgba(255,255,255,.7);
font-size: .8rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
.timer-digits {
display: flex;
align-items: center;
gap: 8px;
}
.timer-unit {
text-align: center;
}
.timer-num {
font-family: var(--font-head);
font-size: 2.4rem;
font-weight: 900;
color: #fff;
line-height: 1;
min-width: 56px;
background: rgba(9,136,241,.35);
border-radius: 10px;
padding: 6px 10px;
}
.timer-sep {
font-family: var(--font-head);
font-size: 2rem;
color: var(--green);
font-weight: 900;
line-height: 1;
padding-bottom: 8px;
}
.timer-cap {
font-size: .7rem;
color: rgba(255,255,255,.55);
margin-top: 4px;
letter-spacing: .06em;
}
.btn-hero {
background: linear-gradient(135deg, var(--green), var(--green-dark));
color: #fff;
font-family: var(--font-head);
font-weight: 700;
font-size: 1rem;
padding: 16px 44px;
border-radius: 50px;
border: none;
box-shadow: 0 8px 32px rgba(80,200,120,.4);
transition: transform .2s, box-shadow .2s;
cursor: pointer;
display: inline-block;
text-decoration: none;
width: auto;
}
.btn-hero:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(80,200,120,.55);
color: #fff;
} section { padding: 80px 0; }
.section-title {
font-family: var(--font-head);
font-weight: 800;
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
letter-spacing: -0.03em;
line-height: 1.2;
margin-bottom: 1rem;
}
.section-sub {
color: var(--gray);
font-size: 1.05rem;
max-width: 640px;
line-height: 1.7;
}
.badge-pill {
display: inline-block;
padding: 5px 16px;
border-radius: 50px;
font-size: .75rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: .8rem;
}
.badge-blue { background: var(--blue-light); color: var(--blue-dark); }
.badge-green { background: var(--green-light); color: var(--green-dark); } .section-boats { background: #f8fbff; }
.boat-card {
background: #fff;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 4px 30px rgba(9,136,241,.1);
transition: transform .3s, box-shadow .3s;
height: 100%;
}
.boat-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(9,136,241,.18);
}
.boat-img {
width: 100%;
height: 240px;
object-fit: cover;
}
.boat-body { padding: 28px; }
.boat-name {
font-family: var(--font-head);
font-weight: 800;
font-size: 1.2rem;
margin-bottom: 16px;
}
.price-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 0;
border-bottom: 1px solid #f0f4f8;
font-size: .9rem;
}
.price-row:last-child { border-bottom: none; }
.price-time { color: var(--gray); display: flex; align-items: center; gap: 6px; }
.price-amount { font-weight: 700; color: var(--blue-dark); }
.boat-cap {
display: flex; align-items: center; gap: 6px;
font-size: .9rem; color: var(--gray);
margin: 14px 0;
}
.boat-desc { font-size: .9rem; color: #555; line-height: 1.6; margin-bottom: 20px; }
.btn-primary-custom {
background: linear-gradient(135deg, var(--blue), var(--blue-dark));
color: #fff;
border: none;
border-radius: 50px;
padding: 10px 24px;
font-weight: 600;
font-size: .9rem;
transition: transform .2s, box-shadow .2s;
text-decoration: none;
display: inline-block;
}
.btn-primary-custom:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(9,136,241,.4);
color: #fff;
}
.btn-outline-custom {
border: 2px solid var(--blue);
color: var(--blue);
border-radius: 50px;
padding: 10px 24px;
font-weight: 600;
font-size: .9rem;
background: transparent;
transition: .2s;
text-decoration: none;
display: inline-block;
}
.btn-outline-custom:hover {
background: var(--blue);
color: #fff;
} .boat-h-card {
background: #fff;
border-radius: 24px;
box-shadow: 0 4px 32px rgba(9,136,241,.1);
overflow: hidden;
transition: box-shadow .3s;
margin-bottom: 32px;
}
.boat-h-card:last-child { margin-bottom: 0; }
.boat-h-card:hover { box-shadow: 0 10px 44px rgba(9,136,241,.18); }
.boat-h-left { padding: 36px 36px 36px 40px; }
.boat-h-title {
font-family: var(--font-head);
font-weight: 800;
font-size: 1.35rem;
color: var(--blue-dark);
margin-bottom: 20px;
letter-spacing: -0.02em;
}
.boat-h-prices { margin-bottom: 16px; }
.boat-h-price-row {
display: flex; align-items: center; gap: 12px;
padding: 6px 0;
border-bottom: 1px dashed #e8f0fa;
font-size: .92rem;
}
.boat-h-price-row:last-child { border-bottom: none; }
.bpr-time { display: flex; align-items: center; gap: 6px; color: #555; min-width: 80px; }
.bpr-price { font-weight: 700; color: var(--dark); margin-left: auto; }
.bpr-badge-price {
display: inline-flex; align-items: center; gap: 5px;
background: var(--blue-light);
color: var(--blue-dark);
border-radius: 8px;
padding: 2px 10px;
font-size: .85rem;
font-weight: 700;
}
.boat-h-meta {
display: flex; align-items: center; gap: 8px;
font-weight: 600; font-size: .92rem;
color: var(--dark);
margin-bottom: 14px;
}
.boat-h-desc { font-size: .9rem; color: #666; line-height: 1.65; margin-bottom: 22px; }
.boat-h-features {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 22px;
}
.feat-tag {
display: inline-flex; align-items: center; gap: 5px;
background: #f0f7ff;
border: 1px solid #d0e8ff;
border-radius: 50px;
padding: 4px 12px;
font-size: .8rem;
color: var(--blue-dark);
font-weight: 500;
}
.boat-h-price-hero {
display: flex; align-items: baseline; gap: 10px;
margin-bottom: 20px;
}
.price-from-label { font-size: .85rem; color: var(--gray); }
.price-from-val {
font-family: var(--font-head);
font-weight: 900;
font-size: 1.8rem;
color: var(--blue-dark);
letter-spacing: -0.03em;
}
.price-per { font-size: .85rem; color: var(--gray); } .boat-h-slider {
position: relative;
height: 100%;
min-height: 360px;
}
.boat-h-slider .carousel,
.boat-h-slider .carousel-inner,
.boat-h-slider .carousel-item {
height: 100%;
}
.boat-h-slider .carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
@media (max-width: 991px) {
.boat-h-slider { min-height: 280px; }
.boat-h-left { padding: 28px 24px; }
} .section-included { background: var(--dark); color: #fff; }
.section-included .section-title { color: #fff; }
.included-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-top: 40px;
}
.included-item {
display: flex;
align-items: flex-start;
gap: 16px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 16px;
padding: 20px;
transition: background .2s;
}
.included-item:hover { background: rgba(9,136,241,.15); }
.included-icon {
width: 44px; height: 44px;
background: linear-gradient(135deg, var(--blue), var(--green));
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
color: #fff;
}
.included-text { font-size: .95rem; color: rgba(255,255,255,.85); line-height: 1.5; }
.included-note {
margin-top: 36px;
background: rgba(80,200,120,.12);
border-left: 4px solid var(--green);
border-radius: 0 12px 12px 0;
padding: 16px 20px;
color: rgba(255,255,255,.8);
font-size: .92rem;
line-height: 1.6;
} .section-gallery { background: #fff; }
.yt-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 40px rgba(9,136,241,.15);
}
.yt-wrapper iframe {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
border: none;
} .carousel-item img {
border-radius: 20px;
object-fit: cover;
height: 320px;
width: 100%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: var(--blue);
border-radius: 50%;
padding: 18px;
background-size: 60%;
} .section-conditions {
background: linear-gradient(135deg, #f0f8ff 0%, #f0fff6 100%);
}
.condition-card {
background: #fff;
border-radius: 20px;
padding: 32px;
box-shadow: 0 4px 24px rgba(9,136,241,.08);
height: 100%;
}
.condition-card h3 {
font-family: var(--font-head);
font-weight: 800;
font-size: 1.1rem;
margin-bottom: 20px;
}
.cond-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #f0f4f8;
font-size: .95rem;
}
.cond-item:last-child { border-bottom: none; }
.cond-icon {
width: 36px; height: 36px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.cond-blue { background: var(--blue-light); color: var(--blue-dark); }
.cond-green { background: var(--green-light); color: var(--green-dark); }
.btn-green {
background: linear-gradient(135deg, var(--green), var(--green-dark));
color: #fff;
border: none;
border-radius: 50px;
padding: 14px 40px;
font-weight: 700;
font-size: 1rem;
transition: transform .2s, box-shadow .2s;
cursor: pointer;
}
.btn-green:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(80,200,120,.4);
color: #fff;
} .section-routes { background: #fff; }
.route-card {
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
border-radius: 20px;
padding: 28px;
color: #fff;
height: 100%;
transition: transform .3s;
}
.route-card:hover { transform: translateY(-4px); }
.route-duration {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,.2);
border-radius: 50px;
padding: 4px 14px;
font-size: .8rem;
font-weight: 600;
margin-bottom: 12px;
}
.route-name {
font-family: var(--font-head);
font-weight: 800;
font-size: 1rem;
margin-bottom: 10px;
}
.route-desc { font-size: .88rem; opacity: .85; line-height: 1.6; margin-bottom: 14px; }
.route-note {
font-size: .8rem;
background: rgba(255,255,255,.15);
border-radius: 10px;
padding: 8px 12px;
opacity: .9;
}
.map-embed {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(9,136,241,.15);
}
.map-embed img{
height: 600px;
object-fit: cover;
}
.map-embed iframe { display: block; border: none; width: 100%; height: 525px; } .section-certs { background: var(--dark); color: #fff; }
.section-certs .section-title { color: #fff; }
.step-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.step-num {
width: 48px; height: 48px;
background: linear-gradient(135deg, var(--blue), var(--green));
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-head);
font-weight: 900;
font-size: 1.2rem;
color: #fff;
flex-shrink: 0;
}
.step-text { font-size: .95rem; color: rgba(255,255,255,.8); line-height: 1.6; padding-top: 10px; }
.cert-visual {
background: linear-gradient(135deg, #1a3050, #0d4a80);
border-radius: 24px;
padding: 36px;
text-align: center;
border: 1px solid rgba(9,136,241,.3);
box-shadow: 0 0 60px rgba(9,136,241,.15);
}
.cert-badge {
display: inline-block;
background: linear-gradient(135deg, var(--blue), var(--green));
color: #fff;
font-family: var(--font-head);
font-weight: 900;
font-size: 1.3rem;
padding: 18px 36px;
border-radius: 20px;
letter-spacing: .05em;
margin-bottom: 16px;
}
.cert-sub { color: rgba(255,255,255,.6); font-size: .9rem; }
.cert-note { color: rgba(255,255,255,.4); font-size: .78rem; margin-top: 24px; }
.btn-cert {
background: linear-gradient(135deg, var(--blue), var(--blue-dark));
color: #fff;
border: none;
border-radius: 50px;
padding: 12px 30px;
font-weight: 700;
font-size: .95rem;
transition: .2s;
text-decoration: none;
display: inline-block;
margin: 6px;
}
.btn-cert:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(9,136,241,.4); color: #fff; }
.btn-cert-outline {
border: 2px solid rgba(255,255,255,.3);
color: #fff;
border-radius: 50px;
padding: 10px 28px;
font-weight: 600;
font-size: .95rem;
background: transparent;
transition: .2s;
text-decoration: none;
display: inline-block;
margin: 6px;
}
.btn-cert-outline:hover { border-color: var(--green); color: var(--green); } .section-faq { background: #f8fbff; }
.accordion-item {
border: none;
border-radius: 16px !important;
margin-bottom: 10px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(9,136,241,.07);
}
.accordion-button {
font-weight: 600;
font-size: 1rem;
color: var(--dark);
background: #fff;
padding: 20px 24px;
}
.accordion-button:not(.collapsed) {
color: var(--blue-dark);
background: var(--blue-light);
box-shadow: none;
}
.accordion-button::after {
filter: invert(34%) sepia(97%) saturate(1500%) hue-rotate(196deg);
}
.accordion-body {
background: #fff;
color: #555;
font-size: .95rem;
line-height: 1.7;
padding: 0 24px 20px;
} .section-contacts { background: #fff; }
.contact-info-item {
display: flex; align-items: center; gap: 14px;
padding: 14px 0;
border-bottom: 1px solid #f0f4f8;
}
.contact-info-item:last-child { border-bottom: none; }
.contact-icon {
width: 44px; height: 44px;
background: var(--blue-light);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
color: var(--blue-dark);
font-size: 1.15rem;
flex-shrink: 0;
}
.contact-label { font-size: .78rem; color: var(--gray); margin-bottom: 2px; }
.contact-val { font-weight: 600; font-size: .95rem; color: var(--dark); }
.form-control-custom {
border: 2px solid #e8f0fe;
border-radius: 12px;
padding: 12px 16px;
font-size: .95rem;
font-family: var(--font-body);
transition: border-color .2s;
width: 100%;
background: #fff;
color: var(--dark);
outline: none;
margin-bottom: 14px;
}
.form-control-custom:focus { border-color: var(--blue); }
.form-card {
background: linear-gradient(135deg, var(--dark), #132540);
border-radius: 24px;
padding: 36px;
color: #fff;
}
.form-card h3 {
font-family: var(--font-head);
font-weight: 800;
font-size: 1.3rem;
margin-bottom: 8px;
}
.form-card p { color: rgba(255,255,255,.6); font-size: .9rem; margin-bottom: 24px; }
.form-control-dark {
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
border-radius: 12px;
padding: 12px 16px;
font-size: .95rem;
font-family: var(--font-body);
color: #fff;
width: 100%;
outline: none;
margin-bottom: 14px;
transition: border-color .2s;
}
.form-control-dark::placeholder { color: rgba(255,255,255,.35); }
.form-control-dark:focus { border-color: var(--blue); } footer {
background: var(--dark);
color: rgba(255,255,255,.5);
padding: 30px 0;
font-size: .85rem;
text-align: center;
}
footer a { color: var(--blue); text-decoration: none; } .wave-divider { line-height: 0; overflow: hidden; }
.wave-divider svg { display: block; } @keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .7s ease forwards; }
.delay-1 { animation-delay: .15s; opacity: 0; }
.delay-2 { animation-delay: .3s; opacity: 0; }
.delay-3 { animation-delay: .45s; opacity: 0; }
.delay-4 { animation-delay: .6s; opacity: 0; } @media (max-width: 767px) {
.timer-box { padding: 14px 20px; gap: 14px; }
.timer-num { font-size: 1.8rem; min-width: 44px; }
section { padding: 60px 0; }
.boat-img { height: 200px; }
.map-embed img {
height: 350px;
}
.button-center-mob{
text-align: center;
}
}