* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
max-width: 100%;
position: relative;
}
nav{
position: fixed;
z-index: 99;
width: 100%;
background: #ffffff;
}
nav .wrapper{
position: relative;
max-width: 1300px;
padding: 0px 30px;
height: 70px;
/* line-height: 70px; */
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
max-width: 160px;
margin-top: 10px;
padding: 10px 10px;
width: 100%;
height: auto;
}
/* ≤ 1080px */
@media (max-width: 1080px) {
.logo img {
width: 140px;
}
}
/* ≤ 768px */
@media (max-width: 768px) {
.logo img {
max-width: 120px;
}
}
/* ≤ 480px */
@media (max-width: 480px) {
.logo img {
max-width: 100px;
}
}
.wrapper .nav-links{
display: inline-flex;
}
.nav-links li{
list-style: none;
}
.nav-links li a{
color: #222;
text-decoration: none;
font-size: 16px;
font-weight: 500;
padding: 10px 14px;
border-radius: 12px;
transition: all 0.25s ease;
}
.nav-links li a:hover{
color: #F09933;
}
.nav-links .mobile-item{
display: none;
}
.nav-links .drop-menu{
position: absolute;
background: #ffffff;
width: 180px;
line-height: 45px;
top: 85px;
opacity: 0;
visibility: hidden;
box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}
.nav-links li:hover .drop-menu,
.nav-links li:hover .mega-box{
transition: all 0.3s ease;
top: 70px;
opacity: 1;
visibility: visible;
}
.drop-menu li a{
width: 100%;
display: block;
padding: 0 0 0 15px;
font-weight: 400;
border-radius: 0px;
}
.mega-box{
position: absolute;
left: 0;
width: 100%;
padding: 0 30px;
top: 85px;
opacity: 0;
visibility: hidden;
}
.mega-box .content{
background: #ffffff;
padding: 25px 20px;
display: flex;
width: 100%;
justify-content: space-between;
box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}
.mega-box .content .row{
width: calc(25% - 30px);
line-height: 45px;
}
.content .row img{
width: 100%;
height: 100%;
object-fit: cover;
}
.content .row header{
color: #131313;
font-size: 20px;
font-weight: 500;
}
.content .row .mega-links{
margin-left: -40px;
border-left: 1px solid rgba(255,255,255,0.09);
}
.row .mega-links li{
padding: 0 20px;
}
.row .mega-links li a{
padding: 0px;
padding: 0 20px;
color: #1e1e1e;
font-size: 17px;
display: block;
}
.row .mega-links li a:hover{
color: #F09933;
}
.wrapper .btn{
color: #000000;
font-size: 20px;
cursor: pointer;
display: none;
}
.wrapper .btn.close-btn{
position: absolute;
text-align: left;
top: 10px;
}
@media screen and (max-width: 1125px) {
.wrapper .btn{
display: block!important;
}
.wrapper .nav-links{
position: fixed;
height: 100vh;
width: 100%;
max-width: 350px;
top: 0;
left: -100%;
background: #ffffff;
display: block;
padding: 50px 10px;
line-height: 50px;
overflow-y: auto;
box-shadow: 0px 15px 15px rgba(0,0,0,0.18);
transition: all 0.3s ease;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #ffffff;
}
::-webkit-scrollbar-thumb {
background: #ffffff;
}
#menu-btn:checked ~ .nav-links{
left: 0%;
}
#menu-btn:checked ~ .btn.menu-btn{
display: none;
}
#close-btn:checked ~ .btn.menu-btn{
display: block;
}
.nav-links li{
margin: 15px 10px;
}
.nav-links li a{
padding: 0 20px;
display: block;
font-size: 20px;
}
.nav-links .drop-menu{
position: static;
opacity: 1;
top: 65px;
visibility: visible;
padding-left: 20px;
width: 100%;
max-height: 0px;
overflow: hidden;
box-shadow: none;
transition: all 0.3s ease;
}
/* #showDrop:checked ~ .drop-menu,
#showMega:checked ~ .mega-box{
max-height: 100%;
} */
#showDrop1:checked ~ .drop-menu,
#showDrop2:checked ~ .drop-menu,
#showDrop3:checked ~ .drop-menu,
#showDrop4:checked ~ .drop-menu {
max-height: 500px;
}
.nav-links .desktop-item{
display: none;
}
.nav-links .mobile-item{
display: block;
color: #000000;
font-size: 20px;
font-weight: 500;
padding-left: 20px;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease;
}
.nav-links .mobile-item:hover{
background: #ffffff;
}
.drop-menu li{
margin: 0;
}
.drop-menu li a{
border-radius: 5px;
font-size: 18px;
}
.mega-box{
position: static;
top: 65px;
opacity: 1;
visibility: visible;
padding: 0 20px;
max-height: 0px;
overflow: hidden;
transition: all 0.3s ease;
}
.mega-box .content{
box-shadow: none;
flex-direction: column;
padding: 20px 20px 0 20px;
}
.mega-box .content .row{
width: 100%;
margin-bottom: 15px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.mega-box .content .row:nth-child(1),
.mega-box .content .row:nth-child(2){
border-top: 0px;
}
.content .row .mega-links{
border-left: 0px;
padding-left: 15px;
}
.row .mega-links li{
margin: 0;
}
.content .row header{
font-size: 19px;
}
}
@media (max-width: 480px) {
nav {
position: fixed;
left: 0;
right: 0;
}
/* wrapper остаётся space-between — лого слева, nav-right справа */
.wrapper {
justify-content: space-between;
padding: 0 16px;
}
/* бургер остаётся внутри nav-right, не вырывать в fixed */
.btn.menu-btn {
position: static;
z-index: auto;
}
}
nav input{
display: none;
}
.body-text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
padding: 0 30px;
}
.body-text div{
font-size: 45px;
font-weight: 600;
}
/* ===== AUTH BUTTONS ===== */
.auth-buttons {
display: flex;
align-items: center;
gap: 15px;
text-decoration: none!important;
}
.auth-buttons a {
color: #000;
text-decoration: none!important;
}
.login-btn-nav {
color: #000;
text-decoration: none;
font-size: 1em;
font-weight: 500;
transition: 0.3s;
}
.login-btn-nav a {
text-decoration: none!important;
color: #000;
}
.auth-buttons .signup-btn {
position: relative;
overflow: hidden;
background: #F09933;
color: #fff !important;
padding: 15px 26px;
border-radius: 70px;
text-decoration: none;
font-weight: 400;
letter-spacing: 0.5px;
display: inline-block;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(240, 153, 51, 0.35);
}
/* Сам блеск */
.auth-buttons .signup-btn::before {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.5) 50%,
rgba(255,255,255,0) 100%
);
transform: skewX(-25deg);
}
/* Анимация при наведении */
.auth-buttons .signup-btn:hover::before {
animation: shine 0.9s ease forwards;
}
@keyframes shine {
100% {
left: 130%;
}
}
.auth-buttons .signup-btn:hover {
background: #F2B200;
color: #fff !important;
}
@media screen and (max-width: 1080px) {
.auth-buttons {
display: none;
}
}
.mobile-auth {
display: none;
}
@media screen and (max-width: 1080px) {
.nav-links .mobile-auth {
display: block;
margin: 15px 20px;
}
.nav-links .mobile-auth a {
display: block;
text-align: center;
font-size: 16px;
padding: 0px;
font-weight: 500;
}
/* LOGIN */
.nav-links .login-btn-nav {
border: 1px solid #F09933;
border-radius: 30px;
color: #F09933;
background: transparent;
}
.login-btn-nav a {
text-decoration: none;
}
.nav-links .login-btn-nav:hover {
background: #F09933;
color: #fff;
}
/* SIGN UP */
.nav-links .signup-btn {
margin-top: 12px;
background: #F09933;
border-radius: 30px;
color: #fff;
}
.nav-links .signup-btn:hover {
background: #F2B200;
color:#3399ff;
}
}
/* =============================================
HERO V2
============================================= */
.hero-v2 {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 100px; /* высота navbar */
}
/* Зеркальный фон — только изображение перевёрнуто, контент не трогается */
.hero-v2::before {
content: '';
position: absolute;
inset: 0;
background-image: url('../images/main_screen.jpg');
background-size: cover;
background-position: center 20px;
transform: scaleX(-1);
z-index: 0;
}
.hero-v2__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to right,
rgba(0,0,0,0.68) 0%,
rgba(0,0,0,0.35) 25%,
rgba(0,0,0,0.08) 100%
);
z-index: 1;
}
/* --- Content --- */
.hero-v2__content {
position: relative;
z-index: 2;
padding: 80px 80px 60px;
max-width: 55%;
}
.hero-v2__title {
font-size: clamp(28px, 5.6vw, 82px);
font-weight: 800;
color: #fff;
line-height: 1.08;
margin: 0 0 20px;
}
.hero-v2__subtitle {
font-size: clamp(15px, 2.3vw, 35px);
color: rgba(255,255,255,0.88);
line-height: 1.5;
margin: 0 0 36px;
}
.hero-v2__btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #F09933;
color: #fff;
padding: 16px 32px;
border-radius: 50px;
font-size: 17px;
font-weight: 600;
text-decoration: none;
transition: background 0.25s ease, transform 0.2s ease;
}
.hero-v2__btn:hover {
background: #F2B200;
color: #fff;
transform: translateY(-2px);
}
.hero-v2__arrow {
font-size: 18px;
}
/* --- Stats bar --- */
.hero-v2__stats {
position: relative;
z-index: 2;
display: flex;
align-items: center;
padding: 26px 80px;
background: rgba(0,0,0,0.15);
backdrop-filter: blur(3px);
}
.hero-stat {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
}
.hero-stat__icon {
width: 52px;
height: 52px;
min-width: 52px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hero-stat__icon i {
font-size: 20px;
color: #F09933;
}
.hero-stat__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.hero-stat__text strong {
font-size: 15px;
font-weight: 700;
color: #fff;
}
.hero-stat__text span {
font-size: 13px;
color: rgba(255,255,255,0.72);
}
.hero-stat__sep {
width: 1px;
height: 44px;
background: rgba(255,255,255,0.2);
margin: 0 28px;
flex-shrink: 0;
}
/* --- Adaptive --- */
/* Tablet landscape */
@media (max-width: 1080px) {
.hero-v2::before {
background-position:50% 20px;
}
.hero-v2__content {
padding: 60px 52px 48px;
max-width: 65%;
margin-top: 5%;
}
.hero-v2__stats {
padding: 22px 52px;
}
.hero-stat__sep {
margin: 0 18px;
}
}
/* Tablet portrait */
@media (max-width: 768px) {
.hero-v2::before {
background-position: 25% 15px;
}
.hero-v2__content {
padding: 44px 32px 38px;
max-width: 100%;
}
.hero-v2__subtitle {
margin-bottom: 28px;
}
.hero-v2__stats {
flex-wrap: wrap;
padding: 18px 32px;
gap: 14px;
}
.hero-stat {
flex: 1 1 calc(50% - 8px);
min-width: 170px;
}
.hero-stat__sep {
display: none;
}
}
/* Large mobile */
@media (max-width: 540px) {
.hero-v2::before {
background-position: 18% 10px;
}
.hero-v2 {
padding-top: 72px;
}
.hero-v2__content {
padding: 34px 22px 30px;
}
.hero-v2__subtitle {
margin-bottom: 24px;
}
.hero-v2__btn {
padding: 13px 26px;
font-size: 15px;
}
.hero-v2__stats {
padding: 16px 22px;
gap: 12px;
}
.hero-stat {
flex: 1 1 100%;
}
.hero-stat__icon {
width: 44px;
height: 44px;
min-width: 44px;
}
.hero-stat__icon i {
font-size: 17px;
}
}
/* Standard mobile */
@media (max-width: 440px) {
.hero-v2::before {
background-position: 18% 5px;
}
.hero-v2 {
padding-top: 66px;
}
.hero-v2__content {
padding: 28px 18px 26px;
}
.hero-v2__subtitle {
margin-bottom: 22px;
}
.hero-v2__btn {
width: 100%;
justify-content: center;
padding: 14px 20px;
font-size: 15px;
border-radius: 14px;
}
.hero-stat__icon {
width: 40px;
height: 40px;
min-width: 40px;
}
.hero-stat__icon i {
font-size: 15px;
}
.hero-stat__text strong {
font-size: 13px;
}
.hero-stat__text span {
font-size: 12px;
}
}
/* Small mobile */
@media (max-width: 360px) {
.hero-v2::before {
background-position: 25% 0px;
}
.hero-v2__content {
padding: 24px 16px 22px;
font-size: 1em!important;
}
}
/* =============================================
HERO (old — kept for other pages)
============================================= */
.hero {
position: relative;
height: 110vh;
width: 100%;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: flex-end;
}
.btn-primary {
display: inline-block;
padding: 15px 80px;
background: #F09933;
color: #fff;
border-radius: 50px;
text-transform: lowercase;
transition: 0.3s;
}
.btn-primary:hover {
background: #F2B200;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 100%;
margin-right: 80px;
color: #fff;
text-align: right;
}
.hero-content a {
text-decoration: none;
text-transform: capitalize;
}
.hero-content a:hover {
color: #3974E6;
}
.hero-content h1 {
font-size: 4.5em;
color: white;
font-weight: 700;
}
.hero-content p {
font-size: 3em;
margin: 20px 0;
color: #f1f1f1;
}
@media (max-width: 1080px) {
.hero-content h1 {
font-size: 4em;
}
.hero-content p {
font-size: 2.8em;
}
}
@media (max-width: 768px) {
.hero {
justify-content: center;
text-align: center;
}
.hero-content {
margin-right: 0;
padding: 0 30px;
text-align: center;
}
.hero-content h1 {
font-size: 3.8em;
}
.hero-content p {
font-size: 1.8em;
}
}
@media (max-width: 480px) {
.hero {
background-position: 30% center; /* или 80% center — подбирается */
}
.hero-content {
padding: 0 20px;
}
.hero-content h1 {
font-size: 3.2em;
}
.hero-content p {
font-size: 1.6em;
}
}
@media (max-width: 385px) {
.hero-content h1 {
font-size: 3em;
}
.hero-content p {
font-size: 1.5em;
}
}
/* HEADING */
.heading {
margin: 50px 0;
margin-left: 100px;
}
.heading h2 {
font-size: 3em;
margin-bottom: 25px;
}
.heading h2 span {
color: #0b2b45;
font-weight: 700;
}
.heading .accent {
color: #F09933;
}
@media (max-width: 1080px) {
.heading {
margin-left: 60px;
}
.heading h2 {
font-size: 2.6em;
}
}
@media (max-width: 768px) {
.heading {
margin-left: 0;
text-align: center;
}
.heading h2 {
font-size: 2.2em;
}
}
@media (max-width: 480px) {
.heading {
margin: 20px 0;
padding: 0 20px;
}
.heading h2 {
font-size: 1.8em;
margin-bottom: 20px;
}
}
@media (max-width: 385px) {
.heading h2 {
font-size: 1.6em;
}
}
/* ============================================
ABOUT PROGRAM – v2
============================================ */
.about-v2 {
padding: 96px 0 110px;
background: #f9f7f4;
overflow: hidden;
}
.about-v2__inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
/* ---- Media column ---- */
.about-v2__media {
position: relative;
}
.about-v2__video-wrap {
position: relative;
border-radius: 18px;
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow: 0 28px 70px rgba(0,0,0,0.18);
background: #ddd;
height: 550px;
width: 100%;
}
.about-v2__video-wrap video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Play button (global, used here too) */
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
background: rgba(255,255,255,0.88);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #F09933;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 20px rgba(0,0,0,0.18);
backdrop-filter: blur(4px);
}
.play-button:hover {
transform: translate(-50%, -50%) scale(1.1);
box-shadow: 0 8px 28px rgba(0,0,0,0.22);
}
/* Floating badge inside video */
.about-v2__badge {
position: absolute;
top: 22px;
left: 20px;
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.93);
backdrop-filter: blur(10px);
border-radius: 14px;
padding: 11px 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.14);
}
.about-v2__badge-ico {
width: 38px;
height: 38px;
background: rgba(240,153,51,0.13);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.about-v2__badge-info {
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1.2;
}
.about-v2__badge-info strong {
font-size: 17px;
font-weight: 800;
color: #1a1a2e;
}
.about-v2__badge-info span {
font-size: 11px;
color: #888;
font-weight: 500;
}
/* ---- Content column ---- */
.about-v2__content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.about-v2__eyebrow {
display: inline-block;
background: rgba(240,153,51,0.12);
color: #E08820;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 50px;
margin-bottom: 22px;
}
.about-v2__title {
font-size: clamp(28px, 3.2vw, 46px);
font-weight: 800;
color: #1a1a2e;
line-height: 1.1;
margin: 0 0 10px;
}
.about-v2__tagline {
font-size: clamp(15px, 1.6vw, 20px);
color: #F09933;
font-weight: 500;
font-style: italic;
margin: 0 0 26px;
line-height: 1.45;
}
.about-v2__rule {
width: 44px;
height: 3px;
background: linear-gradient(90deg, #F09933 0%, #ffd280 100%);
border-radius: 2px;
margin-bottom: 26px;
}
.about-v2__para {
font-size: 15.5px;
color: #5a5a6a;
line-height: 1.78;
margin-bottom: 14px;
}
.about-v2__para--accent {
color: #3a3a4e;
font-weight: 500;
margin-bottom: 0;
}
/* Feature chips list */
.about-v2__feats {
list-style: none;
padding: 0;
margin: 26px 0 36px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.about-v2__feat {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1.5px solid #ede9e2;
border-radius: 50px;
padding: 8px 16px 8px 9px;
font-size: 13px;
font-weight: 600;
color: #333;
white-space: nowrap;
}
.about-v2__feat-ico {
width: 28px;
height: 28px;
background: rgba(240,153,51,0.11);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* CTA button */
.about-v2__cta {
display: inline-flex;
align-items: center;
gap: 9px;
background: #F09933;
color: #fff;
font-size: 15px;
font-weight: 700;
padding: 14px 30px;
border-radius: 50px;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-v2__cta:hover {
transform: translateY(-2px);
background: #F2B200;
color: #fff;
}
/* ---- Responsive ---- */
@media (max-width: 1080px) {
.about-v2__inner {
gap: 52px;
padding: 0 28px;
}
/* Видео немного ниже на промежуточных экранах */
.about-v2__video-wrap {
height: 460px;
}
/* Badge чуть компактнее */
.about-v2__badge {
padding: 9px 14px;
gap: 9px;
}
.about-v2__badge-ico {
width: 34px;
height: 34px;
}
.about-v2__badge-info strong {
font-size: 16px;
}
}
@media (max-width: 860px) {
.about-v2__inner {
grid-template-columns: 1fr;
max-width: 580px;
gap: 44px;
}
/* Снимаем фиксированную высоту, переходим на соотношение сторон */
.about-v2__video-wrap {
height: auto;
aspect-ratio: 4 / 3;
}
/* Badge прижат к левому верхнему углу фото */
.about-v2__badge {
top: 0;
left: 0;
border-radius: 0 0 13px 0;
padding: 9px 13px;
gap: 8px;
}
.about-v2__badge-ico {
width: 30px;
height: 30px;
border-radius: 8px;
}
.about-v2__badge-info strong {
font-size: 15px;
}
.about-v2__badge-info span {
font-size: 10px;
}
.about-v2__content {
align-items: center;
text-align: center;
}
.about-v2__rule {
align-self: center;
}
.about-v2__feats {
justify-content: center;
}
.about-v2__cta {
align-self: center;
}
}
@media (max-width: 600px) {
.about-v2 {
padding: 64px 0 72px;
}
.about-v2__inner {
padding: 0 18px;
}
/* Чуть шире соотношение на небольших экранах */
.about-v2__video-wrap {
aspect-ratio: 3 / 2;
}
.play-button {
width: 56px;
height: 56px;
font-size: 18px;
}
.about-v2__badge {
top: 0;
left: 0;
border-radius: 0 0 11px 0;
padding: 7px 11px;
gap: 7px;
}
.about-v2__badge-ico {
width: 26px;
height: 26px;
border-radius: 7px;
}
.about-v2__badge-ico svg {
width: 14px;
height: 14px;
}
.about-v2__badge-info strong {
font-size: 13px;
}
.about-v2__badge-info span {
font-size: 9px;
}
}
@media (max-width: 480px) {
/* Ещё более горизонтальное видео на маленьких телефонах */
.about-v2__video-wrap {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 420px) {
.about-v2__badge {
top: 0;
left: 0;
border-radius: 0 0 9px 0;
padding: 6px 10px;
gap: 6px;
}
.about-v2__badge-ico {
width: 18px;
height: 18px;
border-radius: 6px;
}
.about-v2__badge-ico svg {
width: 12px;
height: 12px;
}
.about-v2__badge-info strong {
font-size: 12px;
}
.about-v2__badge-info span {
font-size: 9px;
}
.about-v2__feats {
gap: 8px;
}
.about-v2__feat {
font-size: 12px;
padding: 7px 13px 7px 8px;
}
.about-v2__cta {
width: 100%;
justify-content: center;
}
}
/* SECTION */
.fixed-section {
min-height: 90vh;
background-image: url("../images/image_phone.png"); /* ← твоя картинка */
background-size: cover;
background-position: center;
background-attachment: fixed;
position: relative;
padding: 100px 0;
}
/* OVERLAY */
.overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}
/* CONTAINER */
.containers {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 2;
}
/* CONTENT GRID */
.includ {
display: flex;
justify-content: space-between;
gap: 80px;
color: #fff;
}
/* LEFT */
.left {
flex: 1;
}
.item {
display: flex;
align-items: flex-start;
margin-bottom: 60px;
}
.circle {
width: 35px;
height: 35px;
max-width: 35px; /* не сжимается в flex-строке */
flex-shrink: 0;
background: #fff;
border-radius: 50%;
margin-right: 20px;
margin-top: 6px;
}
.text h3 {
font-size: 1.8em;
font-weight: 700;
margin-bottom: 10px;
}
.text p {
font-size: 1.2em;
line-height: 1.6;
font-weight: 500;
}
/* RIGHT */
.right {
flex: 1;
}
.right p {
font-size: 1.2em;;
line-height: 1.7;
margin-bottom: 30px;
font-weight: 500;
}
/* ----------------- ADAPTIVE ----------------- */
@media (max-width: 1080px) {
.content {
gap: 50px;
}
}
@media (max-width: 768px) {
.fixed-section {
background-attachment: scroll;
padding: 60px 0;
}
.containers {
padding: 0 20px;
}
/* Две колонки → одна */
.includ {
flex-direction: column;
gap: 0;
}
.item {
margin-bottom: 36px;
align-items: flex-start;
}
.right p {
font-size: 1em;
}
.text p {
font-size: 1em;
}
.text h3 {
font-size: 1.3em;
}
}
@media (max-width: 480px) {
.fixed-section {
padding: 40px 0;
}
.containers {
padding: 0 16px;
}
.item {
margin-bottom: 28px;
}
.right p {
font-size: 16px;
}
.text h3 {
font-size: 18px;
}
}
@media (max-width: 385px) {
.right p {
font-size: 15px;
}
}
@media (max-width: 480px) {
.right p {
font-size: 16px;
}
.text h3 {
font-size: 18px;
}
}
@media (max-width: 385px) {
.right p {
font-size: 15px;
}
}
/* HOW IT WORKS*/
.fixed-section {
min-height: 100vh;
background-image: url("../images/image_phone.png"); /* ← твоя картинка */
background-size: cover;
background-position: center;
background-attachment: fixed;
position: relative;
padding: 100px 0;
}
/* OVERLAY */
.overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 1;
}
/* CONTAINER */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 2;
}
/* CONTENT GRID */
.content {
display: flex;
justify-content: space-between;
gap: 80px;
color: #fff;
}
/* LEFT */
.left {
flex: 1;
}
.item {
display: flex;
align-items: flex-start;
margin-bottom: 60px;
}
.circle {
width: 26px;
height: 26px;
background: #fff;
border-radius: 50%;
margin-right: 20px;
margin-top: 6px;
}
.text h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
.text p {
font-size: 14px;
line-height: 1.6;
opacity: 0.9;
}
/* RIGHT */
.right {
flex: 1;
}
.right p {
font-size: 18px;
line-height: 1.7;
margin-bottom: 30px;
opacity: 0.95;
}
/* ----------------- ADAPTIVE ----------------- */
@media (max-width: 1080px) {
.content {
gap: 50px;
}
}
@media (max-width: 768px) {
.fixed-section {
background-attachment: scroll; /* важно */
}
.content {
flex-direction: column;
text-align: center;
}
.item {
justify-content: center;
}
.circle {
margin-right: 15px;
}
}
@media (max-width: 480px) {
.right p {
font-size: 16px;
}
.text h3 {
font-size: 18px;
}
}
@media (max-width: 385px) {
.right p {
font-size: 15px;
}
}
/* ===== SECTION ===== */
.how-it-works {
max-width: 1080px;
margin: 0 auto;
padding: 60px 20px;
font-family: Arial, sans-serif;
}
/* ===== TIMELINE ===== */
.timeline {
position: relative;
display: flex;
flex-direction: column;
gap: 120px;
}
/* central wavy dashed line */
.timeline::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 56px;
transform: translateX(-50%);
background-color: transparent;
background-image: url("data:image/svg+xml,");
background-repeat: repeat-y;
background-size: 56px 120px;
}
/* ===== STEP ===== */
.step-item {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 60px;
}
/* ===== TEXT ===== */
.step-content {
max-width: 420px;
}
.step {
width: 36px;
height: 36px;
background: #f39a1e;
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-bottom: 12px;
}
.step-content h3 {
font-size: 1.5em;
color: #f39a1e;
margin-bottom: 10px;
}
.step-content p {
font-size: 1.2em;
line-height: 1.5;
color: #333;
}
/* ===== IMAGE ===== */
.step-image img {
width: 70%;
display: block;
border-radius: 6px;
}
/* ===== ALIGN TO CENTER LINE ===== */
/* odd: text left, image right */
.step-item:nth-child(odd) .step-content {
justify-self: end;
text-align: right;
}
.step-item:nth-child(odd) .step-image {
justify-self: end;
transform: translateX(100px);
}
/* even: image left, text right */
.step-item:nth-child(even) .step-content {
order: 2;
justify-self: start;
text-align: left;
}
.step-item:nth-child(even) .step-image {
order: 1;
justify-self: end;
transform: translateX(40px);
}
/* ===== ADAPTIVE ===== */
@media (max-width: 768px) {
/* центрируем сетку */
.step-item {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
/* сбрасываем все шахматные выравнивания */
.step-item .step-content,
.step-item .step-image {
justify-self: center !important;
text-align: center !important;
transform: none !important;
order: unset !important;
}
/* центрируем номер шага */
.step {
margin: 0 auto 12px;
}
/* центрируем изображение */
.step-image {
display: flex;
justify-content: center;
width: 100%;
}
.step-image img {
width: 70%;
}
/* типографика */
.step-content h3 {
font-size: 1.1em;
}
.step-content p {
font-size: 1em;
}
.timeline::before {
display: none;
}
}
@media (max-width: 480px) {
/* центрируем сетку */
.step-item {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
/* сбрасываем все шахматные выравнивания */
.step-item .step-content,
.step-item .step-image {
justify-self: center !important;
text-align: center !important;
transform: none !important;
order: unset !important;
}
/* центрируем номер шага */
.step {
margin: 0 auto 12px;
}
/* центрируем изображение */
.step-image {
display: flex;
justify-content: center;
width: 100%;
}
.step-image img {
width: 90%;
}
/* типографика */
.step-content h3 {
font-size: 16px;
}
.step-content p {
font-size: 13px;
}
}
/* ===== ANIMATION ===== */
.step-item {
opacity: 0;
transition: opacity 2s ease;
}
.step-item.show {
opacity: 1;
}
/* разные направления появления */
.step-item:nth-child(odd) {
transform: translateX(-80px);
}
.step-item:nth-child(even) {
transform: translateX(80px);
}
.step-item.show:nth-child(odd),
.step-item.show:nth-child(even) {
transform: translateX(0);
}
/* HOSTS */
.family-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 24px;
max-width: 1080px;
margin: 0 auto;
}
.card {
background: #fff;
box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
border-radius: 6px;
display: flex;
padding: 16px;
gap: 16px;
align-items: center;
}
.card-img {
width: 96px;
height: 96px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
}
.card-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.card-content h3 {
font-weight: 700;
margin: 0;
font-size: 1.1rem;
}
.card-content p {
margin: 0;
font-size: 0.9rem;
color: #333;
line-height: 1.3;
}
.details {
font-size: 0.8rem;
color: #888;
}
.rating {
font-size: 1rem;
background-color: white!important;
color: #f39a1e!important;
display: flex;
align-items: center;
gap: 4px;
}
.rating span {
color: #555!important;
font-size: 0.8rem;
}
.bottom-row {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.price-host {
font-weight: 700;
font-size: 1rem;
color: #000;
}
/* ===== ADAPTIVE ===== */
@media (max-width: 768px) {
.card {
flex-direction: row;
padding: 12px;
gap: 12px;
}
.card-img {
width: 80px;
height: 80px;
}
}
/* ===== SEARCH FOR HOSTS ===== */
/* SECTION */
.family-section {
padding: 20px 40px 80px;
background: #fff;
}
/* GRID: 2 columns desktop */
.family-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
/* CARD */
.family-card {
display: flex;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 16px rgba(0,0,0,0.09);
border: 1px solid #eef0f3;
transition: box-shadow 0.25s ease, transform 0.25s ease;
min-height: 360px;
}
.family-card:hover {
box-shadow: 0 10px 36px rgba(0,0,0,0.14);
transform: translateY(-3px);
}
/* IMAGE COLUMN / SLIDER */
.family-img {
position: relative;
width: 285px;
flex-shrink: 0;
overflow: hidden;
/* height determined by flex-stretch from the card */
}
/* ---- Slides (opacity-based, no horizontal overflow) ---- */
.card-slides {
position: absolute;
inset: 0;
}
.card-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.38s ease;
}
.card-slide.active {
opacity: 1;
}
.card-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ---- Prev / Next buttons ---- */
.slide-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
background: rgba(255,255,255,0.88);
border: none;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.72rem;
color: #333;
padding: 0;
opacity: 0;
transition: opacity 0.2s ease, background 0.15s;
backdrop-filter: blur(3px);
}
.slide-btn:hover {
background: rgba(255,255,255,1);
}
.slide-prev { left: 8px; }
.slide-next { right: 8px; }
/* Show arrows on card hover */
.family-card:hover .slide-btn {
opacity: 1;
}
/* ---- Dot indicators ---- */
.slide-dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex;
gap: 5px;
align-items: center;
}
.slide-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.55);
transition: background 0.2s, transform 0.2s;
cursor: pointer;
flex-shrink: 0;
}
.slide-dot.active {
background: #fff;
transform: scale(1.25);
}
/* VERIFIED BADGE */
.verified-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(255,255,255,0.95);
color: #3aaa35;
font-size: 0.7rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
backdrop-filter: blur(4px);
line-height: 1.3;
}
.verified-badge i {
font-size: 0.68rem;
}
/* HEART BUTTON */
.card-heart {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
background: rgba(255,255,255,0.9);
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
backdrop-filter: blur(4px);
transition: background 0.2s, color 0.2s;
color: #bbb;
font-size: 0.9rem;
padding: 0;
}
.card-heart:hover {
background: #fff;
color: #e05252;
}
.card-heart.saved i {
font-weight: 900; /* solid heart */
color: #e05252;
}
/* CONTENT COLUMN */
.family-content {
padding: 20px 22px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
min-width: 0;
}
/* NAME */
.card-name {
font-size: 1.12rem;
font-weight: 700;
color: #0b2b45;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* DESCRIPTION */
.card-desc {
font-size: 0.83rem;
line-height: 1.55;
color: #555;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* LOCATION */
.card-location {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
color: #888;
}
.card-location i {
color: #bbb;
font-size: 0.76rem;
width: 12px;
flex-shrink: 0;
}
/* DETAILS ROW: spaces · language */
.card-details {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px 14px;
font-size: 0.8rem;
color: #666;
}
.card-details span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.card-details-sep {
color: #ccc;
font-size: 0.9rem;
display: inline !important;
}
.card-details i {
color: #bbb;
font-size: 0.75rem;
width: 12px;
flex-shrink: 0;
}
/* PROGRAM TAGS */
.card-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.card-tag {
font-size: 0.73rem;
font-weight: 500;
padding: 3px 11px;
border: 1.5px solid #F09933;
color: #d4820e;
border-radius: 20px;
background: #fff9f0;
line-height: 1.5;
}
/* BOTTOM ROW */
.card-bottom {
margin-top: auto;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
padding-top: 6px;
border-top: 1px solid #f0f2f5;
}
/* PRICE COLUMN */
.card-price-col {
display: flex;
flex-direction: column;
gap: 2px;
}
.price-amount {
font-size: 1.25rem;
font-weight: 800;
color: #0b2b45;
line-height: 1.1;
}
.price-amount span {
font-size: 0.8rem;
font-weight: 400;
color: #999;
}
/* ALL-INCLUSIVE */
.card-inclusive {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
color: #3aaa35;
font-weight: 500;
}
.card-inclusive i {
font-size: 0.68rem;
}
/* JOIN BUTTON */
.btn-join {
display: inline-block;
background: #F09933;
color: #fff !important;
text-decoration: none;
border: none;
border-radius: 10px;
padding: 10px 20px;
font-size: 0.86rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.2s ease;
}
.btn-join:hover {
background: #d4820e;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
.family-section {
padding: 20px 24px 70px;
}
.family-img {
width: 240px;
}
}
@media (max-width: 960px) {
.family-grid {
grid-template-columns: 1fr;
max-width: 620px;
}
}
/* Планшет 441–660px — горизонтальная карточка, фото чуть уже */
@media (max-width: 660px) {
.family-grid {
max-width: 100%;
padding: 0 4px;
}
.family-img {
width: 180px;
}
.family-content {
padding: 14px 16px;
}
}
/* Мобильный ≤440px — фото на всю высоту карточки, контент поверх */
@media (max-width: 440px) {
.family-section {
padding: 16px 16px 60px;
}
.family-card {
position: relative; /* контейнер для абсолютного .family-img */
flex-direction: column;
border-radius: 14px;
min-height: 400px;
overflow: hidden;
}
/* Фото растягивается на всю карточку */
.family-img {
position: absolute;
inset: 0; /* привязывается к .family-card */
width: 100%;
height: 100%;
}
/* Слайды тоже получают явную высоту через родителя */
.card-slides {
height: 100%;
}
.card-slide {
height: 100%;
}
.card-slide img {
height: 100%;
}
/* Контент прибит к низу карточки абсолютно */
.family-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
padding: 70px 16px 16px;
background: linear-gradient(to top,
rgba(0,0,0,0.85) 0%,
rgba(0,0,0,0.55) 60%,
transparent 100%);
}
/* Белый текст поверх фото */
.card-name { color: #fff; }
.card-desc { color: rgba(255,255,255,0.82); }
.card-location { color: rgba(255,255,255,0.7); }
.card-location i { color: rgba(255,255,255,0.5); }
.card-details { color: rgba(255,255,255,0.7); }
.card-details i { color: rgba(255,255,255,0.45); }
.card-details-sep { color: rgba(255,255,255,0.35); }
/* Теги — полупрозрачный фон */
.card-tag {
border-color: rgba(255,255,255,0.5);
color: #fff;
background: rgba(255,255,255,0.1);
}
/* Цена */
.price-amount { color: #fff; }
.price-amount span { color: rgba(255,255,255,0.6); }
.card-inclusive { color: rgba(255,255,255,0.65); }
.card-inclusive i { color: rgba(255,255,255,0.65); }
/* Разделитель снизу убираем (он на тёмном фоне лишний) */
.card-bottom {
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: 10px;
}
/* Verified badge остаётся видимым */
.verified-badge { z-index: 3; }
.card-heart { z-index: 3; }
}
@media (max-width: 380px) {
.card-bottom {
flex-direction: column;
align-items: flex-start;
gap: 10px;
border-top: none;
}
.btn-join {
width: 100%;
text-align: center;
}
}
/* ===== SECTION ===== */
.contact-section {
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px;
}
label {
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
color: #333;
letter-spacing: 0.3px;
margin-left: 10px;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 50px;
}
.section-title span {
color: #f39a1e;
}
/* ===== LAYOUT ===== */
.contact-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}
/* ===== FORM ===== */
.contact-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 14px 18px;
border-radius: 30px;
border: 1px solid #999;
font-size: 14px;
}
.contact-form textarea {
border-radius: 20px;
height: 140px;
resize: none;
}
.contact-form button {
width: 160px;
padding: 12px;
border: none;
border-radius: 30px;
background: #f39a1e;
color: #fff;
transition: 0.3s;
cursor: pointer;
text-transform: capitalize;
}
.contact-form button:hover {
background: #f2b200;
color: #1a73e8;
}
/* ===== INFO ===== */
.contact-info .subtitle {
color: #f39a1e;
font-size: 14px;
}
.contact-info h3 {
font-size: 1.6rem;
margin: 10px 0 20px;
}
.contact-info p {
font-size: 14px;
line-height: 1.6;
color: #333;
margin-bottom: 30px;
}
/* ===== ICON GRID ===== */
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 40px;
margin-bottom: 30px;
}
.info-item {
display: flex;
align-items: center;
gap: 14px;
}
.info-item .icon {
width: 36px;
height: 36px;
background: #ddd;
border-radius: 50%;
}
.info-item strong {
display: block;
font-size: 13px;
}
.info-item span {
font-size: 13px;
color: #555;
}
/* ===== DOTS ===== */
.dots-icon {
display: flex;
gap: 32px;
}
.dots-icon img {
width: 36px;
height: 36px;
transition:
background-color 0.25s ease,
transform 0.25s ease;
}
@media (hover: hover) {
.dots-iconimg:hover {
transform: scale(1.08);
}
}
.checkbox-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #333;
cursor: pointer;
line-height: 1.4;
}
/* hide real checkbox */
.checkbox-label input {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* custom square */
.custom-checkbox {
width: 19px;
height: 18px;
border: 1px solid #2f8de4;
border-radius: 1px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* checkmark */
.custom-checkbox::after {
content: "✓";
font-size: 8px;
color: #fff;
transform: scale(0);
transition: 0.12s ease;
}
/* checked state */
.checkbox-label input:checked + .custom-checkbox {
background: #2f8de4;
}
.checkbox-label input:checked + .custom-checkbox::after {
transform: scale(1);
}
/* link */
.checkbox-label a {
color: #2f8de4;
text-decoration: none;
}
.checkbox-label a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.checkbox-label {
font-size: 12px;
gap: 6px;
}
.custom-checkbox {
width: 9px;
height: 9px;
}
.custom-checkbox::after {
font-size: 9px;
}
}
@media (max-width: 480px) {
.checkbox-label {
font-size: 11px;
line-height: 1.3;
gap: 6px;
}
.custom-checkbox {
width: 10px;
height: 10px;
}
.custom-checkbox::after {
font-size: 10px;
}
}
/* ===== ADAPTIVE ===== */
/* 768 */
@media (max-width: 768px) {
.contact-wrapper {
grid-template-columns: 1fr;
}
.contact-form button {
width: 100%;
}
}
/* 480 */
@media (max-width: 480px) {
.section-title {
font-size: 2rem;
text-align: center;
}
.contact-info h3,
.contact-info p,
.contact-info {
text-align: center;
}
.subtitle {
text-align: center;
}
.info-grid {
grid-template-columns: 1fr;
}
.info-item {
justify-content: center;
}
.dots-icon {
justify-content: center;
}
}
/* ===== SECTION ===== */
.faq-section {
padding: 60px 0;
background: #fff;
}
/* ===== LAYOUT ===== */
.faq-layout {
display: flex;
align-items: flex-start;
gap: 80px;
}
/* ===== MEDIA (LEFT) ===== */
.faq-media {
width: 320px;
flex-shrink: 0;
}
.faq-media img {
width: 100%;
border-radius: 40px;
display: block;
}
/* ===== CONTENT (RIGHT) ===== */
.faq-content {
flex: 1;
min-width: 0; /* 🔥 критично */
display: flex;
flex-direction: column;
border-top: 1px solid #eee;
}
.faq-content a {
text-decoration: none;
text-transform: capitalize;
}
.faq-content a:hover {
color: #3399ff;
}
/* ===== FAQ ITEMS ===== */
.faq-item {
border-bottom: 1px solid #eee;
}
.faq-question {
width: 100%;
background: none;
border: none;
padding: 18px 0;
font-size: 16px;
font-weight: 600;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
cursor: pointer;
}
.faq-question .arrow {
font-size: 18px;
transition: transform 0.3s ease;
flex-shrink: 0;
margin-right: 15px;
}
.faq-answer {
max-height: 0;
overflow: hidden;
font-size: 14px;
color: #555;
line-height: 1.6;
}
/* ACTIVE */
.faq-item.active .faq-answer {
max-height: 120px;
padding-bottom: 16px;
}
.faq-item.active .arrow {
transform: rotate(180deg);
}
/* ===== BUTTON ===== */
.faq-btn {
margin-top: 20px;
width: 130px;
padding: 10px 40px;
background: #F09933;
color: #fff;
border-radius: 50px;
text-transform: lowercase;
transition: 0.3s;
}
.faq-btn:hover {
background: #F2B200;
}
.faq-btn {
text-transform: capitalize;
}
/* ===== ADAPTIVE ===== */
/* 1080 */
@media (max-width: 1080px) {
.faq-layout {
gap: 40px;
}
.faq-media {
width: 260px;
}
}
/* ≤768 */
@media (max-width: 768px) {
.faq-layout {
flex-direction: column;
gap: 40px;
}
.faq-media {
width: 100%;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.faq-content {
width: 100%;
}
.faq-btn {
width: 90%;
text-align: center;
}
}
/* 480 */
@media (max-width: 480px) {
.faq-question {
font-size: 14px;
}
.faq-answer {
font-size: 13px;
}
.faq-btn {
width: 100%;
padding: 12px 0;
text-align: center;
}
}
/* ===== FOOTER ===== */
.site-footer {
background: #f39a1e;
padding: 60px 20px 0;
color: #fff;
}
/* CONTAINER */
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 30px;
}
/* LEGAL LINKS */
.footer-legal {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px 4px;
padding: 16px 20px 0;
border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-legal a {
font-size: 12px;
color: rgba(255,255,255,0.55);
text-decoration: none;
transition: color .2s;
white-space: nowrap;
}
.footer-legal a:hover {
color: #F09933;
}
.footer-legal-sep {
color: rgba(255,255,255,0.25);
font-size: 12px;
}
/* COPYRIGHT */
.footer-bottom {
padding: 14px 20px 20px;
text-align: center;
}
.footer-bottom p {
font-size: 13px;
color: rgba(255,255,255,0.4);
}
/* COLUMNS */
.footer-col h3 {
font-size: 20px;
margin-bottom: 16px;
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-col li {
margin-bottom: 10px;
}
.footer-col a {
color: #fff;
text-decoration: none;
font-size: 15px;
}
.footer-col a:hover {
text-decoration: underline;
}
/* SOCIAL */
.footer-social .social-icons {
display: flex;
gap: 14px;
margin-top: 20px;
}
.footer-social .social-icons img {
width: 48px;
height: 48px;
display: inline-block;
}
.footer-logo img {
max-width: 100%;
height: auto;
}
/* ===== ADAPTIVE ===== */
@media (max-width: 1080px) {
.footer-container {
grid-template-columns: repeat(3, 1fr);
}
.footer-logo {
grid-column: span 3;
width: 30%;
}
.footer-social {
grid-column: span 3;
text-align: center;
}
}
/* 481px – 768px */
@media (max-width: 768px) {
.footer-container {
grid-template-columns: 1fr 1fr;
gap: 32px 24px;
}
.footer-logo {
grid-column: span 2;
width: auto;
display: flex;
justify-content: center;
}
.footer-logo img {
max-width: 140px;
}
.footer-col {
text-align: center;
}
.footer-col h3 {
font-size: 17px;
margin-bottom: 12px;
}
.footer-col a {
font-size: 14px;
}
.footer-social {
grid-column: span 2;
text-align: center;
}
.footer-social .social-icons {
justify-content: center;
margin-top: 12px;
}
}
/* 480px */
@media (max-width: 480px) {
.footer-container {
grid-template-columns: 1fr;
text-align: center;
}
.footer-logo,
.footer-social {
justify-self: center;
}
.footer-social .social-icons {
justify-content: center;
}
.footer-logo {
width: 50%;
}
}
/* PHOTOS */
/* ===== SECTION ===== */
.photo-gallery {
max-width: 1080px;
margin: 0 auto;
padding: 40px 20px;
}
/* ===== GRID ===== */
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* ===== ITEM ===== */
.gallery-item {
position: relative;
overflow: hidden;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ===== TEXT OVER IMAGE ===== */
.with-text::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0) 40%,
rgba(0,0,0,0.6) 100%
);
}
.gallery-text {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
color: #fff;
font-size: 16px;
font-weight: 600;
z-index: 2;
}
/* ===== ADAPTIVE ===== */
/* 1080px */
@media (max-width: 1080px) {
.gallery-grid {
gap: 20px;
}
}
/* 768px */
@media (max-width: 768px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
.gallery-text {
font-size: 15px;
}
}
/* 480px */
@media (max-width: 480px) {
.gallery-grid {
grid-template-columns: 1fr;
}
.gallery-text {
font-size: 14px;
}
}
/* TRIPS */
/* ===== SECTION ===== */
.tours {
max-width: 1080px;
margin: 0 auto;
padding: 60px 20px;
font-family: Arial, sans-serif;
}
.tours-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
/* ===== CARD ===== */
.tour-card {
background: #fff;
display: flex;
flex-direction: column;
}
/* IMAGE */
.tour-image {
position: relative;
overflow: hidden;
border-radius: 2px;
}
.tour-image img {
width: 100%;
height: 380px;
object-fit: cover;
display: block;
}
/* PRICE */
.price-trip {
position: absolute;
top: 15px;
right: 15px;
background: #f39a1e;
color: #fff;
font-size: 14px;
padding: 6px 12px;
border-radius: 6px;
font-weight: 600;
}
/* META */
.tour-meta {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 13px;
color: #666;
padding: 12px 0;
border-bottom: 1px solid #eee;
}
/* TEXT */
.tour-card h3 {
font-size: 15px;
line-height: 1.4;
margin: 15px 0;
color: #222;
}
/* LINK */
.details-link {
margin-top: auto;
font-size: 14px;
color: #005A98;
text-decoration: none;
font-weight: 600;
}
.details-link:hover {
text-decoration: underline;
}
/* ===== ADAPTIVE ===== */
/* 768px */
@media (max-width: 768px) {
.tours-wrapper {
grid-template-columns: repeat(2, 1fr);
}
.tour-image img {
height: 320px;
}
}
/* 480px */
@media (max-width: 480px) {
.tours-wrapper {
grid-template-columns: 1fr;
}
.tour-image img {
height: 260px;
}
.price-trip {
font-size: 13px;
padding: 5px 10px;
}
.tour-card h3 {
font-size: 14px;
}
}
/* WHY CHOOSE US */
/* ===== SECTION ===== */
.experience-section {
width: 100%;
background: #f8f7f4;
padding: 20px 40px 80px;
}
/* cards grid */
.experience-cards {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* card */
.exp-card {
background: #fff;
border-radius: 20px;
padding: 36px 28px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
gap: 14px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.exp-card:hover {
transform: translateY(-6px);
box-shadow: 0 14px 36px rgba(0,0,0,0.1);
}
.exp-icon {
width: 56px;
height: 56px;
min-width: 56px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.exp-icon i {
font-size: 24px;
-webkit-text-stroke: 0;
}
/* Per-card icon colours */
.exp-card:nth-child(1) .exp-icon { background: rgba(240,153,51,0.13); }
.exp-card:nth-child(1) .exp-icon i { color: #F09933; }
.exp-card:nth-child(2) .exp-icon { background: rgba(37,99,235,0.11); }
.exp-card:nth-child(2) .exp-icon i { color: #2563EB; }
.exp-card:nth-child(3) .exp-icon { background: rgba(16,185,129,0.12); }
.exp-card:nth-child(3) .exp-icon i { color: #10B981; }
.exp-card:nth-child(4) .exp-icon { background: rgba(11,43,69,0.1); }
.exp-card:nth-child(4) .exp-icon i { color: #0b2b45; }
.exp-card:nth-child(5) .exp-icon { background: rgba(139,92,246,0.11); }
.exp-card:nth-child(5) .exp-icon i { color: #8B5CF6; }
.exp-card:nth-child(6) .exp-icon { background: rgba(244,63,94,0.11); }
.exp-card:nth-child(6) .exp-icon i { color: #F43F5E; }
.exp-card h3 {
font-size: 1.05rem;
font-weight: 700;
color: #1a1a1a;
line-height: 1.35;
margin: 0;
}
.exp-card p {
font-size: 0.88rem;
line-height: 1.65;
color: #666;
margin: 0;
}
/* ===== ADAPTIVE ===== */
/* ≤ 1080px — two columns */
@media (max-width: 1080px) {
.experience-cards {
grid-template-columns: repeat(2, 1fr);
}
}
/* ≤ 768px */
@media (max-width: 768px) {
.experience-section {
padding: 16px 20px 60px;
}
.experience-cards {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
/* ≤ 480px — single column */
@media (max-width: 480px) {
.experience-section {
padding: 12px 16px 50px;
}
.experience-cards {
grid-template-columns: 1fr;
}
.exp-card {
padding: 28px 22px;
}
}
/* ТУРЫ ЧИМБОРАСО */
.travel {
padding: 40px 20px;
}
.travel__container {
max-width: 1200px;
margin: 0 auto;
background: #fff;
display: flex;
gap: 30px;
border-radius: 0px;
overflow: hidden;
}
/* IMAGE */
.travel__image {
flex: 2;
width: 400px;
height: 500px;
}
.travel__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* INFO */
.travel__info {
flex: 1;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
}
.travel__dates {
font-size: 16px;
margin-bottom: 20px;
line-height: 1.5;
}
.travel__price {
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
}
.travel__installment {
font-size: 14px;
margin-bottom: 25px;
}
.travel__btn {
background: #F09933;
border: none;
color: #fff;
font-size: 16px;
padding: 15px;
border-radius: 30px;
cursor: pointer;
transition: 0.3s;
}
.travel__btn:hover {
background: #F2B200;
}
/* 📱 ADAPTIVE */
@media (max-width: 900px) {
.travel__container {
flex-direction: column;
}
.travel__image {
height: 300px;
}
.travel__info {
padding: 20px;
text-align: center;
}
.travel__btn {
width: 100%;
}
}
.travel__image {
position: relative;
flex: 2;
}
.travel__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* стрелки */
.travel__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.travel__arrow--left {
left: 15px;
}
.travel__arrow--right {
right: 15px;
}
.travel__arrow:hover {
background: rgba(0, 0, 0, 0.7);
}
.travel__arrow svg {
display: block;
}
/* 📱 Mobile */
@media (max-width: 768px) {
.travel {
padding: 20px 15px;
}
.travel__container {
flex-direction: column;
gap: 0;
}
.travel__image {
width: 100%;
height: 260px;
}
.travel__info {
padding: 20px;
text-align: center;
}
.travel__price {
font-size: 22px;
}
.travel__btn {
width: 100%;
padding: 14px;
font-size: 15px;
}
.travel__arrow {
width: 36px;
height: 36px;
}
.travel__arrow svg {
width: 12px;
height: 18px;
}
}
@media (max-width: 400px) {
.travel__image {
height: 220px;
}
.travel__dates {
font-size: 14px;
}
.travel__price {
font-size: 20px;
}
}
.day {
padding: 40px 20px;
background: #fff;
}
.day__container {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: 40px;
align-items: flex-start;
}
/* LEFT */
.day__content {
flex: 1;
}
.day__label {
display: inline-block;
background: #F09933;
color: #fff;
font-size: 12px;
padding: 6px 12px;
border-radius: 20px;
margin-bottom: 15px;
}
.day__title {
font-size: 26px;
margin-bottom: 15px;
}
.day__subtitle {
font-weight: 600;
margin-bottom: 10px;
}
.day__list {
margin: 0 0 15px;
padding-left: 20px;
}
.day__list li {
margin-bottom: 6px;
}
.day__text {
margin-bottom: 15px;
line-height: 1.5;
color: #444;
}
.day__more {
background: none;
border: none;
color: #F09933;
font-weight: 600;
cursor: pointer;
padding: 0;
}
/* RIGHT */
.day__media {
flex: 1;
}
.day__main-image {
width: 100%;
height: 380px;
object-fit: cover;
border-radius: 6px;
margin-bottom: 10px;
}
.day__gallery {
display: flex;
gap: 8px;
}
.day__gallery img {
width: calc(100% / 6);
height: 70px;
object-fit: cover;
border-radius: 4px;
cursor: pointer;
transition: 0.3s;
}
.day__gallery img:hover {
opacity: 0.8;
}
/* 📱 ADAPTIVE */
@media (max-width: 900px) {
.day__container {
flex-direction: column;
}
.day__title {
font-size: 22px;
}
.day__main-image {
height: 260px;
}
.day__gallery img {
height: 60px;
} }
.day--reverse .day__content {
order: 2;
}
.day--reverse .day__media {
order: 1;
}
/* мобилка */
@media (max-width: 900px) {
.day--reverse .day__content,
.day--reverse .day__media {
order: initial;
}
}
/* ТУРЫ ГЛАВНАЯ + ИНФОРМАЦИЯ ФОН */
.improve {
padding: 70px 20px;
background-color: #fff;
font-family: Arial, sans-serif;
}
.improve-wrapper {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.improve-title {
font-size: 42px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 25px;
color: #0b2b45;
}
.improve-title span {
color: #f5a623;
}
.improve-content p {
font-size: 15px;
line-height: 1.7;
color: #333;
margin-bottom: 16px;
max-width: 520px;
}
.improve-content ul {
margin: 20px 0;
padding-left: 18px;
}
.improve-content li {
font-size: 15px;
margin-bottom: 8px;
color: #333;
}
.improve-photo img {
width: 100%;
height: 100%;
max-height: 520px;
object-fit: cover;
border-radius: 6px;
}
.improve--reverse .improve-wrapper {
direction: ltr;
}
@media (max-width: 1080px) {
.improve-wrapper {
gap: 40px;
}
.improve-title {
font-size: 36px;
}
.improve-content p,
.improve-content li {
font-size: 14.5px;
}
.improve-photo img {
max-height: 460px;
}
}
@media (max-width: 768px) {
.improve {
padding: 50px 20px;
}
.improve-wrapper {
grid-template-columns: 1fr;
gap: 30px;
}
.improve-title {
font-size: 30px;
}
.improve-content p {
max-width: 100%;
}
.improve-photo img {
max-height: 380px;
}
}
@media (max-width: 480px) {
.improve {
padding: 40px 15px;
}
.improve-title {
font-size: 25px!important;
margin-bottom: 18px;
text-align: center;
}
.improve-content p,
.improve-content li {
font-size: 14px;
line-height: 1.6;
}
.improve-content ul {
margin: 15px 0;
}
.improve-photo img {
max-height: 280px;
border-radius: 4px;
}
}
/* TEXT 3 */
.improve-text-only {
padding: 60px 20px;
background: #ffffff;
font-family: Arial, sans-serif;
}
.improve-text-wrapper {
max-width: 81%;
margin: 0 auto;
}
.improve-title {
font-size: 40px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 25px;
color: #0b2b45;
}
.improve-title span {
color: #f5a623;
}
.improve-text-wrapper p {
font-size: 14px;
line-height: 1.8;
color: #333;
margin-bottom: 18px;
}
.disclaimer {
font-size: 12px;
color: #666;
margin-bottom: 20px;
}
.improve-text-wrapper a {
color: #1a73e8;
text-decoration: none;
}
.improve-text-wrapper a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.improve-title {
font-size: 30px;
}
.improve-text-wrapper p {
font-size: 14px;
}
}
/* ФОН для LIST TOURS */
.hero-info {
position: relative;
height: 60vh;
width: 100%;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.btn-primary {
display: inline-block;
padding: 15px 80px;
background: #F09933;
color: #fff;
border-radius: 50px;
text-transform: lowercase;
transition: 0.3s;
}
.btn-primary:hover {
background: #F2B200;
}
.hero-info::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
}
.hero-content-info {
position: relative;
z-index: 2;
max-width: 60%;
color: #fff;
text-align: center;
}
.hero-content-info a {
text-decoration: none;
text-transform: capitalize;
}
.hero-content-info a:hover {
color: #3974E6;
}
.hero-content-info h1 {
font-size: 3.8em;
font-weight: 700;
color: white;
}
.hero-content-info p {
font-size: 3.5em;
margin: 20px 0;
color: #f1f1f1;
}
@media (max-width: 1080px) {
.hero-content-info h1 {
font-size: 4em;
}
.hero-content-info p {
font-size: 2.8em;
}
}
@media (max-width: 768px) {
.hero-info {
justify-content: center;
text-align: center;
}
.hero-content-info {
margin-right: 0;
padding: 0 30px;
text-align: center;
width: 100%;
}
.hero-content-info h1 {
font-size: 3em!important;
}
}
@media (max-width: 480px) {
.hero-content-info {
padding: 0 20px;
max-width: 100%;
}
.hero-content-info h1 {
font-size: 1em!important;
}
}
@media (max-width: 385px) {
.hero-content-info {
padding: 0 20px;
max-width: 100%;
}
.hero-content-info h1 {
font-size: 1em!important;
}
}
/* TEACHER */
.contact-link {
display: inline-block;
font-size: 1em;
color: #3974E6;
text-decoration: none;
margin-top: 10px;
}
.contact-link:hover {
text-decoration: none;
color: #1d53c1;
}
@media (max-width: 768px) {
.contact-link {
display: block;
text-align: center;
margin-top: 15px;
}
}
.about-actions-teachers {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin-bottom: 25px;
}
.teacher-btn.outline {
display: inline-block;
padding: 10px 40px;
background: #ffffff;
border: 1px solid #F09933;
color: #000000;
border-radius: 50px;
transition: 0.3s;
}
.teacher-btn.outline:hover{
color: #F09933;
}
.about-btn-orange-teacher {
display: inline-block;
padding: 10px 40px;
background: #F09933;
color: #fff;
border-radius: 50px;
text-transform: lowercase;
transition: 0.3s;
}
.about-btn-orange-teacher:hover{
background: #F2B200;
}
.contact-link {
display: inline-block;
font-size: 1em;
color: #3974E6;
text-decoration: none;
margin-top: 10px;
}
.contact-link:hover {
text-decoration: none;
color: #1d53c1;
}
@media (max-width: 1080px) {
.about-actions {
gap: 12px;
}
.about-btn-orange-teacher,
.teacher-btn.outline {
padding: 10px 30px;
font-size: 0.95em;
}
}
@media (max-width: 768px) {
.about-actions-teachers {
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
.about-btn-orange-teacher,
.teacher-btn.outline {
padding: 12px 36px;
font-size: 1em;
}
.contact-link {
display: block;
text-align: center;
margin-top: 15px;
}
}
/* schedule */
.schedule {
max-width: 1100px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
/* HEADER */
.schedule-head {
display: grid;
grid-template-columns: 100px repeat(7, 1fr);
text-align: center;
font-weight: 600;
color: #5a5f73;
margin-bottom: 5px;
}
.schedule-head div {
padding: 10px 0;
}
/* BODY */
.schedule-body {
display: grid;
grid-template-columns: 100px repeat(7, 1fr);
grid-auto-rows: 50px;
border: 1px solid #e6e9ef;
border-radius: 8px;
overflow: hidden;
}
.schedule-body > div {
border-right: 1px solid #e6e9ef;
border-bottom: 1px solid #e6e9ef;
}
.schedule-body > div:nth-child(8n) {
border-right: none;
}
.time {
padding: 12px 10px;
font-size: 14px;
color: #6b7280;
background: #fafbfc;
}
.active-green {
background: #7EC937!important;
}
@media (max-width: 768px) {
.schedule-head {
grid-template-columns: 70px repeat(7, 1fr);
}
.schedule-body {
grid-template-columns: 70px repeat(7, 1fr);
grid-auto-rows: 42px;
}
.schedule-head div {
font-size: 12px;
padding: 6px 0;
}
.time {
font-size: 12px;
padding: 6px;
}
}
@media (max-width: 480px) {
.schedule-head {
grid-template-columns: 60px repeat(7, 1fr);
}
.schedule-body {
grid-template-columns: 60px repeat(7, 1fr);
grid-auto-rows: 36px;
}
.schedule-head div {
font-size: 10px;
line-height: 1.2;
}
.time {
font-size: 11px;
padding: 4px;
}
}
/*button*/
.sign-up {
display: inline-block;
margin: 40px auto 0; /* центрирование */
padding: 16px 48px;
background: #f39a1e;
color: #fff;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border-radius: 50px;
text-align: center;
transition: 0.3s ease;
}
/* центр по горизонтали */
.sign-up {
display: block;
width: fit-content;
transition: 0.3s ease;
}
.sign-up:hover {
background: #f2b200;
}
/* ===== CERTIFICATES ===== */
.certificates {
padding: 70px 20px;
background: #fff;
}
.cert-container {
max-width: 1200px;
margin: 0 auto;
}
/* TITLE */
.cert-title {
font-size: 2.6em;
margin-bottom: 50px;
text-align: center;
font-weight: 700;
}
.cert-title span {
color: #F09933;
}
/* GRID */
.cert-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
/* CARD */
.cert-card {
background: #fff;
border-radius: 6px;
padding: 20px;
text-align: center;
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cert-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 35px rgba(0,0,0,0.18);
}
/* IMAGE */
.cert-card img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 3px;
margin-bottom: 18px;
}
/* TEXT */
.cert-card h3 {
font-size: 18px;
margin-bottom: 8px;
}
.cert-card p {
font-size: 14px;
color: #666;
}
@media (max-width: 1080px) {
.cert-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.cert-title {
font-size: 2.2em;
}
.cert-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
}
@media (max-width: 480px) {
.certificates {
padding: 50px 15px;
}
.cert-title {
font-size: 1.9em;
}
.cert-grid {
grid-template-columns: 1fr;
}
.cert-card img {
height: 200px;
}
}
/* MODAL */
.cert-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: 0.3s;
z-index: 9999;
}
.cert-modal.active {
opacity: 1;
visibility: visible;
}
.cert-modal-img {
max-width: 90%;
max-height: 90%;
border-radius: 6px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.cert-close {
position: absolute;
top: 30px;
right: 40px;
font-size: 36px;
color: #fff;
cursor: pointer;
}
@media (max-width: 480px) {
.cert-close {
top: 15px;
right: 20px;
font-size: 30px;
}
}
/* REVIEWS */
.reviews {
padding: 60px 20px;
background: #fff;
}
.reviews-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
/* CARD */
.review-card {
background: #fff;
padding: 28px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
/* HEADER */
.review-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.review-header img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.review-header strong {
display: block;
font-size: 15px;
}
.review-header span {
font-size: 13px;
color: #777;
}
/* STARS */
.stars {
color: #f5b301;
font-size: 14px;
margin-bottom: 12px;
}
/* TEXT */
.review-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
}
.review-text {
font-size: 13px;
color: #555;
line-height: 1.6;
}
@media (max-width: 1080px) {
.reviews-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
}
@media (max-width: 768px) {
.reviews {
padding: 50px 15px;
}
.reviews-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.review-card {
padding: 24px;
}
}
@media (max-width: 480px) {
.reviews {
padding: 40px 12px;
}
.review-card {
padding: 20px;
border-radius: 10px;
}
.review-header img {
width: 42px;
height: 42px;
}
.review-header strong {
font-size: 14px;
}
.review-header span {
font-size: 12px;
}
.stars {
font-size: 13px;
}
.review-title {
font-size: 13px;
}
.review-text {
font-size: 12.5px;
}
}
/* SPEAKING CLUB */
/* ===== SWITCH ===== */
.language-switch {
display: flex;
justify-content: center;
gap: 15px;
margin: 40px 0;
}
.lang-btn {
padding: 10px 30px;
border-radius: 30px;
border: 1px solid #ddd;
background: #fff;
cursor: pointer;
font-weight: 600;
transition: 0.3s;
}
.lang-btn.active {
background:#3974E6;
color: #fff;
}
.lang-btn:hover {
transform: translateY(-2px);
}
/* ===== TOURS ===== */
.tours {
max-width: 1080px;
margin: 0 auto;
padding: 0 20px 80px;
}
.tours-group {
display: none;
background-color: white;
}
.tours-group.active {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
/* ===== CARD ===== */
.tour-card {
background: #fff;
display: flex;
flex-direction: column;
}
.tour-image {
position: relative;
overflow: hidden;
}
.tour-image img {
width: 100%;
height: 380px;
object-fit: cover;
}
.price-trip {
position: absolute;
top: 15px;
right: 15px;
background: #f39a1e;
color: #fff;
font-size: 14px;
padding: 6px 12px;
border-radius: 6px;
font-weight: 600;
}
.tour-meta {
display: flex;
justify-content: center;
gap: 25px;
font-size: 14px;
color: #666;
padding: 12px 0;
border-bottom: 1px solid #eee;
}
.tour-card h3 {
font-size: 15px;
line-height: 1.4;
margin: 15px 0;
color: #222;
}
.details-link {
margin-top: auto;
font-size: 14px;
color: #005A98;
text-decoration: none;
font-weight: 600;
}
.details-link:hover {
text-decoration: underline;
}
/* ===== ADAPTIVE ===== */
@media (max-width: 768px) {
.tours-group.active {
grid-template-columns: repeat(2, 1fr);
}
.tour-image img {
height: 320px;
}
}
.pricing {
padding: 80px 20px;
background: #fff;
text-align: center;
}
.pricing-title {
font-size: 32px;
margin-bottom: 50px;
}
.pricing-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.price-card {
position: relative;
padding: 35px 25px;
border-radius: 30px;
border: 1px solid #eee;
background: #fafafa;
transition: 0.3s ease;
}
.price-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
.price-card h3 {
font-size: 20px;
margin-bottom: 15px;
}
.price {
font-size: 36px;
font-weight: 700;
color: #F09933;
margin-bottom: 15px;
}
.description {
font-size: 16px;
color: #666;
margin-bottom: 30px;
line-height: 1.5;
}
.price-btn {
display: inline-block;
padding: 12px 35px;
background: #F09933;
color: #fff;
border-radius: 50px;
text-decoration: none;
transition: 0.3s;
}
.price-btn:hover {
background: #F2B200;
color: #3974E6;
}
/* Special styles */
.price-card.free {
background: #f6f9ff;
}
.price-card.popular {
border: 2px solid #F09933;
background: #fff7ec;
}
.badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #F09933;
color: #fff;
padding: 5px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
/* Responsive */
@media (max-width: 1024px) {
.pricing-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.pricing-cards {
grid-template-columns: 1fr;
}
}
.hero-speaking {
position: relative;
height: 100vh;
width: 100%;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: flex-end;
}
.hero-speaking::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
}
.hero-content-speaking {
position: relative;
z-index: 2;
max-width: 100%;
color: #fff;
text-align: left;
}
.hero-content-speaking h1 {
font-size: 4.8em;
font-weight: 700;
width: 70%;
color: #ffffff;
}
.hero-content-speaking p {
font-size: 1.9em;
width: 60%;
margin: 20px 0;
color: #f1f1f1;
}
.hero-content-speaking a {
text-decoration: none;
font-size: 1.2em;
text-transform: capitalize;
}
.hero-content-speaking a:hover {
color: #3974E6;
}
@media (max-width: 1080px) {
.hero-content-speaking h1 {
font-size: 3.8em;
width: 80%;
}
.hero-content-speaking p {
font-size: 1.5em;
width: 75%;
}
.hero-content-speaking {
padding-right: 40px;
}
}
@media (max-width: 768px) {
.hero-speaking {
justify-content: center;
text-align: center;
}
.hero-content-speaking {
padding: 0 20px;
text-align: center;
}
.hero-content-speaking h1 {
font-size: 3em;
width: 100%;
}
.hero-content-speaking p {
font-size: 1.3em;
width: 100%;
}
}
@media (max-width: 480px) {
.hero-speaking {
height: 90vh;
}
.hero-content-speaking h1 {
font-size: 2.2em;
line-height: 1.2;
}
.hero-content-speaking p {
font-size: 1.1em;
margin: 15px 0;
}
.hero-content-speaking a {
font-size: 1em;
display: inline-block;
margin-top: 10px;
}
}
/* REGISTRATION */
.container-registr {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: calc(100vh - 78px);
margin-top: 78px;
}
/* LEFT SIDE */
.auth {
padding: 48px 80px;
display: flex;
flex-direction: column;
justify-content: center;
}
.auth h2 {
font-size: 26px;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 24px;
}
.tab-content {
background-color: white!important;
}
.tabs {
display: flex;
gap: 0;
border-bottom: 2px solid #ebebeb;
margin-bottom: 30px;
}
.tab {
background: none;
border: none;
font-size: 15px;
padding: 10px 20px 12px;
cursor: pointer;
flex: 1;
text-align: center;
}
.tab.active {
border-bottom: 3px solid #f6a623;
font-weight: 600;
}
h2 {
margin-bottom: 20px;
}
.tab-content { display: none; }
.tab-content.active { display: block; }
.tab.active { border-bottom: 3px solid #f6a623; }
.social {
width: 100%;
padding: 14px;
margin-bottom: 12px;
border-radius: 6px;
font-size: 15px;
cursor: pointer;
background: #fff;
}
.facebook {
border: 1px solid #3b5998;
color: #3b5998;
}
.google {
border: 1px solid #ea4335;
color: #ea4335;
}
.divider {
display: flex;
align-items: center;
margin: 30px 0 20px;
color: #666;
}
.divider::before,
.divider::after {
content: "";
flex: 1;
height: 1px;
background: #ddd;
}
.divider span {
padding: 0 10px;
font-size: 14px;
}
/* Registration form inputs — exclude checkboxes */
.auth form input:not([type="checkbox"]),
.auth form select {
width: 100%;
padding: 11px 14px;
margin-bottom: 12px;
border-radius: 10px;
border: 1.5px solid #e0e0e0;
font-size: 14px;
color: #222;
background: #fafafa;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.auth form input:not([type="checkbox"]):focus,
.auth form select:focus {
border-color: #F09933;
box-shadow: 0 0 0 3px rgba(240,153,51,0.12);
background: #fff;
}
/* Consent checkboxes — reset all overrides */
.auth form input[type="checkbox"] {
width: 15px !important;
height: 15px !important;
min-width: 15px;
padding: 0 !important;
margin: 0;
border-radius: 3px !important;
border: 1.5px solid #ccc !important;
background: #fff !important;
box-shadow: none !important;
appearance: auto !important;
-webkit-appearance: checkbox !important;
accent-color: #F09933;
cursor: pointer;
flex-shrink: 0;
}
.form-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.login-btn-nav {
background: #f6a623;
border: none;
padding: 12px 26px;
border-radius: 25px;
font-size: 15px;
cursor: pointer;
color: white;
transition: 0.3s;
}
.login-btn-nav:hover {
background-color: #ffbe3b;
color: #1F93E3;
}
.form-footer a {
font-size: 14px;
text-decoration: none;
color: #888;
white-space: nowrap;
}
.form-footer a:hover {
color: #F09933;
}
.image {
background: url("../images/reg_img.jpg")
center / cover no-repeat;
clip-path: ellipse(85% 100% at 100% 50%);
}
/* REGISTRATION — RESPONSIVE */
@media (max-width: 900px) {
.container-registr {
grid-template-columns: 1fr;
min-height: auto;
padding-bottom: 48px;
}
.image {
display: none;
}
.auth {
padding: 40px 48px;
max-width: 520px;
margin: 0 auto;
width: 100%;
justify-content: flex-start;
}
}
@media (max-width: 600px) {
.auth {
padding: 32px 24px;
}
.auth h2 {
font-size: 22px;
margin-bottom: 20px;
}
.login-btn-reg {
width: 100%;
padding: 14px 20px;
border-radius: 50px;
font-size: 15px;
margin-top: 20px;
}
.form-footer {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.form-footer a {
text-align: center;
}
.tabs {
margin-bottom: 24px;
}
}
@media (max-width: 440px) {
.auth {
padding: 24px 18px;
}
.auth form input:not([type="checkbox"]),
.auth form select {
padding: 10px 12px;
font-size: 13px;
}
.auth h2 {
font-size: 20px;
}
.tab {
font-size: 14px;
padding: 10px 12px 11px;
}
}
/* REGISTRO STEPS */
.wrapper-reg {
max-width: 1100px;
margin: 0 auto;
padding: 40px 20px;
}
/* HEADER */
h1{
color: #033455;
margin-bottom: 5px;
}
.subtitle {
color: #666;
margin-bottom: 30px;
}
/* BENEFITS */
.benefits {
display: flex;
gap: 40px;
margin-bottom: 40px;
}
.benefit {
text-align: center;
flex: 1;
font-size: 14px;
}
.benefit span {
display: block;
margin-top: 10px;
}
/* STEPS */
.steps-reg {
display: flex;
margin-bottom: 30px;
}
.step-reg {
flex: 1;
padding: 10px;
background: #eaeaea;
font-size: 14px;
text-align: center;
position: relative;
}
.step-reg.active {
background:#ffbe3b;
color: #fff;
}
.step-reg:not(:last-child)::after {
content: "›";
position: absolute;
right: -15px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: #999;
}
/* FORM */
.form-box {
border: 1px solid #ddd;
padding: 25px;
}
.form-section {
margin-bottom: 30px;
}
.form-section h3 {
margin-bottom: 15px;
font-size: 16px;
}
.form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
input, select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 2px;
}
.radio-group {
display: flex;
gap: 20px;
font-size: 14px;
}
.note {
font-size: 12px;
color: #777;
margin-bottom: 10px;
}
/* BUTTON */
.next-btn {
background: #f6a623;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 15px;
cursor: pointer;
border-radius: 25px;
transition: 0.3s;
}
.next-btn:hover {
background: #ffbe3b;
}
.form-step {
display: none;
}
.form-step.active {
display: block;
}
.icon-step {
width: 60px;
height: 60px;
}
/* LANGUAGE COURSE HERO */
.hero-course {
position: relative;
height: 100vh;
width: 100%;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: flex-end;
}
.hero-course::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
}
.hero-content-course {
position: relative;
z-index: 2;
max-width: 100%;
color: #fff;
text-align: left;
}
.hero-content-course h1 {
font-size: 4.8em;
font-weight: 700;
width: 70%;
color: white;
}
.hero-content-course p {
font-size: 1.9em;
width: 60%;
margin: 20px 0;
color: #f1f1f1;
}
.hero-content-course a {
text-decoration: none;
font-size: 1.2em;
text-transform: capitalize;
}
.hero-content-course a:hover {
color: #3974E6;
}
@media (max-width: 1080px) {
.hero-content-course h1 {
font-size: 3.8em;
width: 80%;
}
.hero-content-course p {
font-size: 1.5em;
width: 75%;
}
.hero-content-course {
padding-right: 40px;
}
}
@media (max-width: 768px) {
.hero-course {
justify-content: center;
text-align: center;
}
.hero-content-course {
padding: 0 20px;
text-align: center;
}
.hero-content-course h1 {
font-size: 3em;
width: 100%;
}
.hero-content-course p {
font-size: 1.3em;
width: 100%;
}
}
@media (max-width: 480px) {
.hero-course {
height: 90vh;
}
.hero-content-course h1 {
font-size: 2.2em;
line-height: 1.2;
}
.hero-content-course p {
font-size: 1.1em;
margin: 15px 0;
}
.hero-content-course a {
font-size: 1em;
display: inline-block;
margin-top: 10px;
}
}
.price-course {
font-size: 1.1em;
font-weight: 500;
}
.page {
display: grid;
grid-template-columns: 320px 1fr;
gap: 40px;
padding: 40px;
}
/* LEFT CARD */
.card-host {
background: #fff;
border-radius: 20px;
padding: 25px;
text-align: center;
}
.avatar {
width: 180px;
height: 180px;
border-radius: 0%;
object-fit: cover;
}
.rating {
display: inline-block;
margin: 10px 0;
background: #22c55e;
color: #fff;
padding: 5px 10px;
border-radius: 20px;
font-size: 14px;
}
.actions {
display: flex;
justify-content: center;
gap: 10px;
margin: 15px 0;
}
.actions img {
width: 25px;
height: 25px;
}
.actions button {
border: none;
background: #ffffff;
padding: 10px;
border-radius: 12px;
cursor: pointer;
}
.price {
font-size: 22px;
font-weight: bold;
margin-top: 10px;
}
.primary {
margin-top: 20px;
width: 100%;
padding: 12px;
border-radius: 12px;
border: none;
background: #2563eb;
color: white;
font-size: 16px;
cursor: pointer;
}
/* RIGHT SIDE */
.info h1 {
margin: 0;
}
.subtitle {
color: #555;
}
.location {
margin: 15px 0;
color: #444;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.tags span {
background: #F09933;
padding: 6px 12px;
border-radius: 20px;
font-size: 14px;
color: white;
}
.tags.light span {
background: #f1f5f9;
}
.map {
margin: 25px 0;
height: 160px;
background: #e5e7eb;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #555;
}
.about p {
line-height: 1.6;
}
.more {
color: #2563eb;
cursor: pointer;
}
/* КНОПКА АКТИВАЦИИ */
.host-btn {
padding: 14px 28px;
font-size: 15px;
border-radius: 25px;
border: none;
cursor: pointer;
transition: 0.3s;
color: #fff;
margin-top: 40px;
}
.host-btn.ready {
background: #7EC937;
}
.host-btn.not-ready {
background: #ccc;
color: #333;
}
/* ЛЕВАЯ КОЛОНКА */
.side-block {
background: #fff;
border-radius: 12px;
padding: 15px;
margin-top: 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.side-block h4 {
font-size: 14px;
margin-bottom: 10px;
color: #033455;
text-align: left;
}
/* PHOTOS */
.photos {
display: flex;
gap: 8px;
}
.photos img {
width: 70px;
height: 90px;
object-fit: cover;
border-radius: 8px;
}
/* TEXT */
.label {
font-size: 12px;
color: #777;
margin: 10px 0 6px;
}
.country {
display: inline-block;
background: #f1f5f9;
padding: 6px 10px;
border-radius: 20px;
font-size: 13px;
}
/* CHIPS */
.chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.chips span {
background: #033455;
color: #fff;
font-size: 12px;
padding: 5px 10px;
border-radius: 20px;
}
/* CHECK LIST */
.check-list {
list-style: none;
padding: 0;
margin: 0;
}
.check-list li {
font-size: 13px;
margin-bottom: 6px;
padding-left: 22px;
position: relative;
}
.check-list li.yes::before {
content: "✔";
color: #7EC937;
position: absolute;
left: 0;
}
.check-list li.no::before {
content: "❌";
color: red;
position: absolute;
left: 0;
}
/* VIDEO */
.side-block video {
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 8px;
}
/* ДОКУМЕНТЫ */
.documents {
padding: 16px;
border: 1px solid #e5e5e5;
border-radius: 14px;
background: #fff;
}
.side-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 12px;
}
.doc-list {
list-style: none;
padding: 0;
margin: 0;
}
.doc-list li + li {
margin-top: 10px;
}
.doc-list a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
text-decoration: none;
font-size: 14px;
color: #033455;
background: #f6f8fa;
transition: 0.25s;
}
.doc-list a:hover {
background: #F39A1E;
color: #fff;
}
/* ГЛАВНАЯ ПРАВО */
.profile-card {
background: #ffffff;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
border-radius: 14px;
padding: 20px;
margin-bottom: 10px;
max-width: 900px;
}
.profile-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.profile-header .title {
display: flex;
align-items: center;
gap: 8px;
}
.profile-header h3 {
font-size: 16px;
font-weight: 600;
}
.profile-header .edit {
font-size: 14px;
color: #666;
text-decoration: none;
}
.profile-header .edit:hover {
text-decoration: underline;
}
/* GRID */
.profile-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 40px;
}
.profile-item {
display: flex;
gap: 12px;
}
.profile-item .icon {
font-size: 18px;
opacity: 0.8;
}
.label {
font-size: 13px;
color: #777;
margin-bottom: 2px;
}
.value {
font-size: 14px;
color: #033455;
line-height: 1.4;
}
/* MOBILE */
@media (max-width: 700px) {
.profile-grid {
grid-template-columns: 1fr;
}
}
/* ДОП ИНФОРАИЦЯ */
.accordion {
max-width: 900px;
}
.acc-item {
background: #ffffff;
border-radius: 12px;
margin-bottom: 16px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.acc-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
}
.acc-header h3 {
font-size: 16px;
font-weight: 600;
}
.acc-actions {
display: flex;
gap: 10px;
}
.acc-actions button {
background: none;
border: none;
cursor: pointer;
font-size: 14px;
color: #555;
}
.acc-body {
display: block; /* none */
padding: 0 20px 20px;
}
.acc-body.open {
display: block;
}
.acc-text {
font-size: 14px;
line-height: 1.6;
color: #333;
outline: none;
}
.acc-text[contenteditable="true"] {
border: 1px dashed #f6a623;
padding: 10px;
border-radius: 8px;
background: #fffaf0;
}
.save-btn {
margin-top: 12px;
background: #f6a623;
border: none;
padding: 8px 20px;
border-radius: 20px;
color: #fff;
cursor: pointer;
}
.hidden {
display: none;
}
/* PHOTOS */
.photos {
display: flex;
gap: 10px;
}
.photos img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
}
/* viewer */
.photo-viewer {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.8);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
.photo-viewer img {
max-width: 90%;
max-height: 90%;
border-radius: 12px;
}
.photo-viewer .close {
position: absolute;
top: 20px;
right: 30px;
font-size: 32px;
color: #fff;
cursor: pointer;
}
.photo-viewer .nav {
position: absolute;
top: 50%;
font-size: 40px;
color: #fff;
cursor: pointer;
user-select: none;
}
.photo-viewer .prev {
left: 30px;
}
.photo-viewer .next {
right: 30px;
}
.photos img:nth-child(n + 4) {
display: none;
}
/* REVIEWS */
.reviews {
padding: 60px 20px;
background: #fff;
}
.reviews-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
/* CARD */
.review-card {
background: #fff;
padding: 28px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
/* HEADER */
.review-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.review-header img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.review-header strong {
display: block;
font-size: 15px;
}
.review-header span {
font-size: 13px;
color: #777;
}
/* STARS */
.stars {
color: #f5b301;
font-size: 14px;
margin-bottom: 12px;
}
/* TEXT */
.review-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
}
.review-text {
font-size: 13px;
color: #555;
line-height: 1.6;
}
.contact-link {
text-decoration: none;
color:#0b2b45;
}
@media (max-width: 1080px) {
.reviews-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
}
@media (max-width: 768px) {
.reviews {
padding: 50px 15px;
}
.reviews-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.review-card {
padding: 24px;
}
}
@media (max-width: 480px) {
.reviews {
padding: 40px 12px;
}
.review-card {
padding: 20px;
border-radius: 10px;
}
.review-header img {
width: 42px;
height: 42px;
}
.review-header strong {
font-size: 14px;
}
.review-header span {
font-size: 12px;
}
.stars {
font-size: 13px;
}
.review-title {
font-size: 13px;
}
.review-text {
font-size: 12.5px;
}
}
/* FAMILY LIST — styles defined above near line 1658 */
/* ENGLISH */
.exp-btn {
display: inline-block;
margin-top: 20px;
font-size: 1.2em;
font-weight: 400;
color:#3974E6;
text-decoration: none;
transition: all 0.3s ease;
}
.exp-btn:hover {
color:#f2b200;
transform: translateX(4px);
}
.prices-section {
padding: 80px 20px;
background-color: #f8f9fb;
font-family: Arial, sans-serif;
}
.prices-wrapper {
max-width: 1200px;
margin: 0 auto;
}
.prices-header {
text-align: center;
margin-bottom: 50px;
}
.prices-header h2 {
font-size: 36px;
color: #0b2b45;
margin-bottom: 10px;
}
.prices-header p {
font-size: 15px;
color: #555;
}
.prices-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.price-card {
background: #fff;
padding: 35px 30px;
border-radius: 8px;
text-align: center;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.price-card h3 {
font-size: 20px;
margin-bottom: 15px;
color: #0b2b45;
}
.price {
font-size: 36px;
font-weight: 700;
color: #f5a623;
margin-bottom: 20px;
}
.price span {
font-size: 14px;
color: #777;
}
.price-card ul {
list-style: none;
padding: 0;
margin-bottom: 25px;
}
.price-card li {
font-size: 14px;
margin-bottom: 10px;
color: #333;
}
.price-btn {
display: inline-block;
padding: 10px 26px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #f5a623;
text-decoration: none;
border-radius: 25px;
transition: background 0.3s ease;
}
.price-btn:hover {
background:#f9bc16;
color:#3399ff;
}
.price-card.featured {
transform: translateY(-10px);
border: 2px solid #f5a623;
}
@media (max-width: 900px) {
.prices-cards {
grid-template-columns: 1fr;
}
.price-card.featured {
transform: none;
}
}
/* КАК КУРСЫ РАБОТАЮТ */
.learning-process {
padding: 80px 20px;
background-color: #ffffff;
font-family: Arial, sans-serif;
}
.learning-container {
max-width: 1100px;
margin: 0 auto;
}
.learning-header {
text-align: center;
max-width: 720px;
margin: 0 auto 60px;
}
.learning-header h2 {
font-size: 36px;
color: #0b2b45;
margin-bottom: 12px;
}
.learning-header p {
font-size: 15px;
color: #555;
}
.learning-steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 30px;
}
.learning-item {
text-align: center;
}
.learning-step {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background-color: #f5a623;
color: #ffffff;
border-radius: 50%;
font-weight: 700;
margin-bottom: 15px;
}
.learning-item h4 {
font-size: 16px;
margin-bottom: 10px;
color: #0b2b45;
}
.learning-item p {
font-size: 14px;
line-height: 1.6;
color: #555;
}
@media (max-width: 900px) {
.learning-steps {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.learning-steps {
grid-template-columns: 1fr;
}
.learning-header h2 {
font-size: 28px;
}
}/* УСЛОВИЯ */
.study-terms {
padding: 80px 20px;
background-color: #f7f9fc;
font-family: Arial, sans-serif;
}
.study-terms-container {
max-width: 1000px;
margin: 0 auto;
}
.study-terms-title {
font-size: 34px;
text-align: center;
margin-bottom: 40px;
color: #0b2b45;
}
/* two columns */
.study-terms-list {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px 60px;
}
.study-terms-list li {
position: relative;
padding-left: 28px;
font-size: 15px;
line-height: 1.7;
color: #333;
}
.study-terms-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #f5a623;
font-weight: bold;
}
/* tablet */
@media (max-width: 768px) {
.study-terms-title {
font-size: 28px;
}
.study-terms-list {
grid-template-columns: 1fr;
gap: 18px;
}
}
/* mobile */
@media (max-width: 480px) {
.study-terms {
padding: 60px 15px;
}
.study-terms-list li {
font-size: 14px;
}
}/* SPEAKING CLUB */
.speaking-club {
padding: 90px 20px;
background: linear-gradient(135deg, #0b2b45, #123e63);
color: #ffffff;
font-family: Arial, sans-serif;
}
.speaking-club-container {
max-width: 1200px;
margin: 0 auto;
}
.speaking-club-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
/* TEXT */
.speaking-club-label {
display: inline-block;
margin-bottom: 12px;
padding: 6px 14px;
background-color: #f5a623;
color: #0b2b45;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
border-radius: 20px;
}
.speaking-club-content h2 {
font-size: 38px;
margin-bottom: 18px;
}
.speaking-club-text {
font-size: 16px;
line-height: 1.7;
margin-bottom: 28px;
opacity: 0.95;
}
.speaking-club-list {
list-style: none;
padding: 0;
margin-bottom: 28px;
}
.speaking-club-list li {
position: relative;
padding-left: 26px;
margin-bottom: 12px;
font-size: 15px;
}
.speaking-club-list li::before {
content: "●";
position: absolute;
left: 0;
color: #f5a623;
}
.speaking-club-info {
display: flex;
gap: 30px;
font-size: 15px;
margin-bottom: 30px;
opacity: 0.9;
}
.speaking-club-btn {
display: inline-block;
padding: 14px 36px;
background-color: #f5a623;
color: #0b2b45;
font-size: 15px;
font-weight: 700;
text-decoration: none;
border-radius: 30px;
transition: all 0.3s ease;
}
.speaking-club-btn:hover {
background-color: #f2b200;
transform: translateY(-2px);
}
/* IMAGE */
.speaking-club-image img {
width: 100%;
height: 420px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
@media (max-width: 1080px) {
.speaking-club-grid {
gap: 40px;
}
}
@media (max-width: 768px) {
.speaking-club-grid {
grid-template-columns: 1fr;
}
.speaking-club-image img {
height: 320px;
}
.speaking-club-content h2 {
font-size: 30px;
}
.speaking-club-info {
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 480px) {
.speaking-club {
padding: 70px 15px;
}
.speaking-club-content h2 {
font-size: 26px;
}
.speaking-club-image img {
height: 260px;
}
}
/* ОТЗЫВЫ */
/* REVIEWS */
.more-review{
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
margin-bottom: 50px;
}
.slider-container {
position: relative;
width: 900px;
overflow: hidden;
width: 70%;
}
.slider {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
display: flex;
justify-content: space-around;
min-width: 100%;
}
.review {
background: #ffffff;
width: 280px;
height: auto;
font-family: "Roboto", sans-serif;
padding: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
text-align: center;
padding: 60px 20px;
color: #000;
}
.review p {
font-weight: 200;
}
.review span {
font-weight: 500;
}
.avatar {
width: 60px;
height: 60px;
background: #ccc;
border-radius: 50%;
margin: 0 auto 15px;
}
.author {
display: block;
margin-top: 10px;
font-size: 14px;
color: #666;
}
.nav {
position: absolute;
top: 40%;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}
.prev {
left: -30px;
}
.next {
right: -30px;
}
.dots {
text-align: center;
margin-top: 20px;
justify-content: center;
}
.dot {
height: 20px;
width: 20px;
margin: 0 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
cursor: pointer;
background-color: rgb(225, 221, 221);
border: 1px solid rgb(225, 221, 221);
}
.dot.active {
background-color:#3399ff;
border: 1px solid #3399ff;
}
/* Планшет 769px - 1080px */
@media (max-width: 1080px) {
.slider-container {
width: 100%; /* адаптивная ширина */
}
.review {
width: 250px; /* чуть меньше карточки */
padding: 40px 20px;
}
}
/* Планшет/малый планшет 480px - 768px */
@media (max-width: 768px) {
.slider-container {
width: 90%;
}
.slide {
flex-direction: column; /* отзывы один под другим, если нужно */
min-width: 100%;
}
.review {
width: 100%; /* на всю ширину слайдера */
padding: 30px 15px;
}
.nav.prev, .nav.next {
display: none; /* убрать стрелки, если свайп на мобиле */
}
.add-review-btn {
width: 200px;
height: 40px;
margin-top: 30px;
}
}
/* Мобильные устройства до 480px */
@media (max-width: 480px) {
.slider-container {
width: 100%;
}
.review {
width: 100%;
padding: 20px 10px;
}
.add-review-btn {
width: 180px;
height: 35px;
margin-top: 20px;
font-size: 14px;
}
.dots {
margin-top: 10px;
}
}
.blog-wrapper {
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
font-family: Georgia, serif;
}
.posts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.post {
display: flex;
flex-direction: column;
}
.post img {
width: 100%;
height: 220px;
object-fit: cover;
}
.post-meta {
font-size: 12px;
letter-spacing: 1px;
color: #777;
margin: 15px 0 10px;
text-transform: uppercase;
}
.post h3 {
font-size: 26px;
margin: 0 0 15px;
}
.post p {
font-size: 15px;
color: #555;
line-height: 1.6;
}
.read-more {
margin-top: 20px;
align-self: flex-start;
padding: 10px 24px;
border: 1px solid #033455;
border-radius: 30px;
background: none;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
color: #033455;
}
.read-more:hover {
color: white;
background-color: #033455;
}
/* PAGINATION */
.pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 50px;
}
.pagination button {
padding: 8px 14px;
border: 1px solid #ccc;
background: #fff;
cursor: pointer;
}
.pagination button.active {
background: #F09933;
color: #fff;
border-color: #F09933;
}
.country-select {
color: #6c6c6c;
}
.country-select option {
color: #000000;
}
/* ===== STEP 2 Styling ===== */
.form-section h3 {
margin-bottom: 20px;
}
.form-section h4 {
margin-top: 25px;
margin-bottom: 10px;
font-size: 15px;
font-weight: 600;
}
/* form row layout */
.form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
/* make fields equal width inside row */
.form-row input,
.form-row textarea,
.form-row select {
width: 100%;
padding: 12px 14px;
border: 1px solid #dcdcdc;
border-radius: 8px;
font-size: 14px;
font-family: inherit;
box-sizing: border-box;
background: #fff;
transition: border 0.2s ease;
}
/* textarea specific */
.form-row textarea {
min-height: 120px;
resize: vertical;
}
/* focus state */
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
border-color: #000;
outline: none;
}
/* select dropdown arrow consistency */
.form-row select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
}
/* divider */
.form-section hr {
margin: 30px 0;
border: none;
height: 1px;
background: #eee;
}
.add-language {
margin-top: 10px;
font-size: 14px;
color: #2b52ac;
cursor: pointer;
font-weight: 500;
cursor: pointer;
}
.add-language:hover {
text-decoration: underline;
}
.consent-label {
display: flex;
align-items: flex-start; /* текст красиво выравнивается */
gap: 10px;
font-size: 14px;
line-height: 1.4;
cursor: pointer;
margin-top: 15px;
}
.consent-label input[type="checkbox"] {
margin-top: 3px; /* немного опускаем для идеального выравнивания */
width: 16px;
height: 16px;
cursor: pointer;
}
.login-btn-reg {
background-color: #F09933;
border: none;
color: white;
padding: 14px 48px;
border-radius: 50px;
margin-top: 24px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 4px 12px rgba(240,153,51,0.3);
letter-spacing: 0.3px;
}
.login-btn-reg:hover {
background-color: #F2B200;
box-shadow: 0 6px 16px rgba(240,153,51,0.4);
}
.blog-content a{
color: #000;
text-decoration: none;
}
.user-toggle {
border: none;
outline: none;
}
.user-toggle:focus {
outline: none;
box-shadow: none;
}
/* .settings-section {
padding: 80px 0;
}
.settings-box {
max-width: 500px;
margin: 0 auto;
background: #fff;
padding: 40px;
border-radius: 14px;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.settings-warning {
color: #666;
margin-bottom: 25px;
}
.delete-account-btn {
background: #e63946;
color: white;
border: none;
padding: 14px 26px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
transition: 0.2s;
}
.delete-account-btn:hover {
background: #c1121f;
} */
.user-menu {
position: relative;
}
.user-dropdown {
display: none;
position: absolute;
top: 110%;
right: 0;
background: #fff;
min-width: 180px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
overflow: hidden;
z-index: 999;
}
.user-dropdown a {
display: block;
padding: 12px 18px;
text-decoration: none;
color: #333;
font-size: 14px;
}
.user-dropdown a:hover {
background: #f7f7f7;
color: #F09933;
}
/* показываем только при клике */
.user-menu.active .user-dropdown {
display: block;
}
/* info */
/* ═══════════════════════════════════════════════════════════════
UNIFIED CTA BUTTON HOVER — единый эффект для всех кнопок платформы
Смещение вверх translateY(-2px) + цвет #F2B200 + мягкая тень
═══════════════════════════════════════════════════════════════ */
/* Base: добавляем transition там, где его нет или он неполный */
.hero-v2__btn,
.btn-join,
.btn-primary,
.login-btn-reg,
.faq-btn,
.about-v2__cta,
.travel__btn,
.about-btn-orange-teacher,
.sign-up,
.price-btn,
.contact-form button,
.submit-btn,
.auth-buttons .signup-btn,
.bk-submit-btn,
.rv-submit-btn,
.lsn-submit-btn {
transition: background 0.25s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
/* Unified hover effect */
.hero-v2__btn:hover,
.btn-join:hover,
.btn-primary:hover,
.login-btn-reg:hover,
.faq-btn:hover,
.about-v2__cta:hover,
.travel__btn:hover,
.about-btn-orange-teacher:hover,
.sign-up:hover,
.price-btn:hover,
.contact-form button:hover,
.submit-btn:hover,
.auth-buttons .signup-btn:hover,
.bk-submit-btn:hover,
.rv-submit-btn:hover,
.lsn-submit-btn:hover {
background: #F2B200 !important;
color: #fff !important;
transform: translateY(-2px);
}
/* Disabled кнопки — никакого hover-эффекта */
.bk-submit-btn:disabled:hover,
.rv-submit-btn:disabled:hover,
.lsn-submit-btn:disabled:hover,
.login-btn-reg:disabled:hover {
transform: none !important;
background: #F09933 !important;
opacity: 0.6;
cursor: default;
}