.hero__wrapper {
position: relative;
}
.hero__content {
display: flex;
flex-direction: column;
align-items: center;
}
.hero__article {
max-width: 824px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero__title {
margin: 0 0 20px;
}
.hero__subtitle {
margin: 0 0 12px;
}
.hero__buttons {
margin-bottom: 32px;
}
.hero__video-wrapper {
position: relative;
display: inline-block;
width: 100%;
border-radius: 10px;
overflow: hidden;
}
.hero__video-element {
width: 100%;
display: block;
}
.hero__video-play {
position: absolute;
top: 45%;
left: 48%;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: none;
background-color: var(--clr-blue);
cursor: pointer;
z-index: 2;
}
.hero__video-wrapper--playing .hero__video-play {
display: none;
}
.hero__video-icon {
opacity: .8;
}
.hero__bg {
position: absolute;
top: -150px;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
@media screen and (max-width: 438px) {
.hero {
padding: 0;
}
.hero__wrapper {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.hero__video-play {
top: 32%;
left: 42%;
width: 52px;
height: 52px;
}
.hero__bg {
top: 0;
}
} .rewiews__wrapper {
display: flex;
flex-direction: column;
gap: 48px;
}
.rewiews__content {
display: flex;
align-items: center;
justify-content: space-between;
}
.rewiews__article {
max-width: 824px;
}
.rewiews__text {
color: var(--clr-gray);
}
.swiper {
width: 100%;
height: 100%;
}
.rewiews__swiper-slide {
width: 100%;
height: 100%;
}
.rewiews__slide-wrapper {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.rewiews__picture {
position: relative;
width: 180px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 180px;
cursor: pointer;
}
.rewiews__picture::before {
position: absolute;
content: '';
height: 32px;
width: 32px;
display: block;
z-index: 2;
background: no-repeat url(//coachingisl.com/wp-content/themes/coalchingisl/assets/icons/play.svg) center / cover;
}
.rewiews__slide-img {
width: 180px;
height: 180px;
object-fit: cover;
transition: .3s ease-in-out;
}
.rewiews__picture:hover .rewiews__slide-img {
width: 200px;
height: 200px;
}
.rewiews__picture--linear {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(180.00deg, rgba(0, 68, 226, 0.07) 49.5%,rgba(0, 38, 124, 0.7) 100%),url(//coachingisl.com/wp-content/themes/coalchingisl/styles/1);
}
.rewiews__slide-article {
display: flex;
flex-direction: column;
gap: 16px;
}
.rewiews__slide-title {
margin: 0;
}
.rewiews__slide-subtitle {
margin: 0;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 24px !important;
}
.video-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9);
}
.video-modal__content {
position: relative;
margin: auto;
width: 80%;
max-width: 800px;
top: 50%;
transform: translateY(-50%);
}
.video-modal__close {
position: absolute;
top: -40px;
right: 0;
color: white;
font-size: 35px;
cursor: pointer;
}
.video-modal__container {
position: relative;
padding-bottom: 80%;
height: 0;
overflow: hidden;
}
.video-modal__container iframe,
.video-modal__container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.video-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
opacity: 0.8;
transition: opacity 0.3s;
}
.video-play-icon:hover {
opacity: 1;
}
.has-video {
cursor: pointer;
}
@media screen and (max-width: 1024px) {
.rewiews__content {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
}
@media screen and (max-width: 430px) {
.video-modal__container {
padding-bottom: 200%;
}
} .course__wrapper {
position: relative;
height: 550px;
display: flex;
align-items: center;
}
.course__img-wrap {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 80%;
border-radius: 8px;
overflow: hidden;
}
.course__img-shadow {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(135.00deg, rgba(0, 38, 124, 0) 0%,rgb(0, 38, 124) 100%),url(//coachingisl.com/wp-content/themes/coalchingisl/styles/1);
z-index: 1;
}
.course__image {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.course__content {
position: absolute;
top: 15%;
right: 0;
max-width: 642px;
padding: 62px 56px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 32px;
box-sizing: border-box;
border: 1px solid var(--clr-white-hover);
border-radius: 8px;
box-shadow: 0px 1px 4px 0px rgba(25, 33, 61, 0.08);
background: var(--clr-white);
z-index: 1;
}
.course__article {
display: flex;
flex-direction: column;
gap: 24px;
}
.course__title {
margin: 0;
}
.course__text {
margin: 0;
}
@media screen and (max-width: 768px) {
.course__wrapper {
justify-content: center;
}
.course__img-wrap {
width: 100%;
}
.course__content {
top: auto;
right: auto;
max-width: 90%;
padding: 32px;
align-items: center;
}
.course__article {
align-items: center;
}
.btn__course {
align-self: stretch;
text-align: center;
}
} .about__wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 32px;
}
.about__article {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.about__title {
margin: 0;
}
.about__text {
margin: 0;
text-align: center;
max-width: 704px;
color: var(--clr-gray);
}
.about__buttons {
margin-top: 8px;
display: flex;
flex-direction: row;
gap: 16px;
}
.about__img-wrap {
position: relative;
margin-bottom: 20px;
border-radius: 8px;
overflow: hidden;
}
.about__image {
width: 100%;
}
.about__img-shadow {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(180.00deg, rgba(0, 61, 124, 0) 0%,rgba(0, 61, 124, 0.5) 100%),url(//coachingisl.com/wp-content/themes/coalchingisl/styles/1732020079859-1-e1732022394738);
}
.about__content {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.about__content-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16;
align-self: stretch;
}
.about__content-title {
margin: 0;
}
.about__content-list {
list-style: none;
padding-left: 0;
}
@media screen and (max-width: 1024px) {
.about__content {
flex-direction: column;
gap: 42px;
}
}
@media screen and (max-width: 768px) {
.about__buttons {
flex-direction: column;
text-align: center;
}
} .team__wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 40px;
}
.team__article {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.team__title {
margin: 0;
}
.team__text {
max-width: 600px;
text-align: center;
color: var(--clr-gray);
}
.team__list {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 430px; gap: 22px;
}
.team__item {
position: relative;
box-sizing: border-box;
}
.team__item:first-child::after {
position: absolute;
top: 25%;
left: -100px;
content: '';
display: block;
width: 200px;
height: 200px;
border-radius: 100%;
background-color: #ffacac;
opacity: 0.3;
}
.team__item:last-child::after {
position: absolute;
top: 25%;
right: -100px;
content: '';
display: block;
width: 200px;
height: 200px;
border-radius: 100%;
background-color: #acc2ff;
opacity: 0.3;
}
.team__image-shadow {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: 8px;
background: linear-gradient(180.00deg, rgba(0, 38, 124, 0),rgba(0, 38, 124, 0.7) 100%),url(//coachingisl.com/wp-content/themes/coalchingisl/styles/1);
z-index: 1;
}
.team__image {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.team__content {
position: absolute;
bottom: 32px;
padding: 0 22px;
display: flex;
flex-direction: column;
gap: 16px;
z-index: 1;
}
.team__name, .team__subtitle {
margin: 0;
color: var(--clr-white);
}
.team__subtitle {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-height: 3.6em; transition: max-height 1s ease-in-out;
line-height: 1.8em;
}
.team__item:hover .team__subtitle {
-webkit-line-clamp: unset;
max-height: 500px; }
@media screen and (max-width: 1280px) {
.team__list {
grid-template-rows: repeat(2, 300px);
}
.team__content {
bottom: 20px;
padding: 0 12px;
}
.team__item:first-child::after {
top: 30%;
left: -75px;
width: 150px;
height: 150px;
}
.team__item:last-child::after {
top: 30%;
right: -75px;
width: 150px;
height: 150px;
}
}
@media screen and (max-width: 1280px) {
.team__list {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 380px);
}
}
@media screen and (max-width: 480px) {
.team__list {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(6, 340px);
}
.team__subtitle {
-webkit-line-clamp: 4;
max-height: 7.2em; }
} .services__wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 48px;
}
.services__article {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 24px;
}
.services__title {
margin: 0;
}
.services__text {
margin: 0;
text-align: center;
max-width: 420px;
color: var(--clr-gray);
}
.services__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 22px;
row-gap: 40px;
}
.services__item {
position: relative;
padding-bottom: 144px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.services__img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.services__item--article {
position: absolute;
bottom: 0;
margin: 0 38px;
padding: 32px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 24px;
border: 1px solid var(--clr-white-hover);
border-radius: 8px;
box-shadow: 0px 1px 4px 0px rgba(25, 33, 61, 0.08);
background: var(--clr-white);
}
.services__item--title {
margin: 0;
}
.services__item--subtitle {
margin: 0;
color: var(--clr-gray);
}
.services__item--link {
color: var(--clr-blue);
}
@media screen and (max-width: 1024px) {
.services__item--article {
bottom: 0;
margin: 0 24px;
padding: 24px;
gap: 18px;
}
}
@media screen and (max-width: 768px) {
.services__list {
grid-template-columns: repeat(1, 1fr);
column-gap: 22px;
row-gap: 32px;
}
.services__item {
padding-bottom: 64px;
}
}
@media screen and (max-width: 425px) {
.services__item {
padding-bottom: 0;
}
.services__img {
border-radius: 8px 8px 0 0;
}
.services__item--article {
position: relative;
margin: 0;
padding: 24px 12px;
border-radius: 0 0 8px 8px;
}
} .edu__wrapper {
display: flex;
flex-direction: row;
align-items: center;
gap: 22px;
}
.edu__img {
width: 738px;
height: 452px;
border-radius: 8px;
}
.edu__article {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 24px;
}
.edu__title {
margin: 0;
}
.edu__list {
padding: 0;
margin: 0;
list-style: none;
}
.edu__text {
color: var(--clr-gray);
}
@media screen and (max-width: 1280px) {
.edu__img {
width: 560px;
height: 380px;
}
}
@media screen and (max-width: 1024px) {
.edu__wrapper {
flex-direction: column;
}
.edu__img {
width: 100%;
height: 100%;
}
}
@media screen and (max-width: 430px) {
.edu__btn {
text-align: center;
align-self: normal;
}
} .store__wrapper {
overflow: hidden;
border-radius: 8px;
}
.store__banner {
position: relative;
padding: 85px 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 24;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.store__banner-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00000090;
}
.store__article {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 24px;
z-index: 1;
}
.store__title {
margin: 0;
color: var(--clr-white);
max-width: 420px;
}
.store__subtitle {
margin: 0;
color: var(--clr-white);
max-width: 372px;
} .club__wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 22px;
}
.club__article {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.club__title {
margin: 0;
}
.club__subtitle {
margin: 0;
color: var(--clr-gray);
}
.club__list {
list-style: none;
padding: 0;
margin: 0;
}
.club__text {
color: var(--clr-gray);
}
@media screen and (max-width: 1024px) {
.club__wrapper {
flex-direction: column-reverse;
}
.club__article {
width: 100%;
}
} .news__wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 48px;
}
.news-page__article {
margin-top: 42px;
margin-bottom: 38px;
max-width: 90%;
}
.news-page__title {
margin: 0;
}
.news-page-subtitle {
}
.news__list {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: flex-start;
align-items: flex-start;
gap: 22px;
}
.news__post--none {
height: 20vh;
display: flex;
align-items: center;
justify-content: center;
}
.news__item {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
overflow: hidden;
box-sizing: border-box;
border: 1px solid var(--clr-white-hover);
border-radius: 8px;
box-shadow: 0px 1px 4px 0px rgba(25, 33, 61, 0.08);
background: var(--clr-white);
}
.news__item picture {
height: 320px;
width: 100%;
}
.news__img {
width: 100%;
height: 320px;
object-fit: cover;
}
.news__item-article {
padding: 32px 24px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.news__date {
margin: 0 0 28px 0;
color: var(--clr-gray);
}
.news__item-title {
margin: 0 0 32px 0;
}
.news__link {
margin-top: auto;
color: var(--clr-blue);
}
.btn__news {
align-self: center;
}
@media screen and (max-width: 1024px) {
.news__item picture {
height: 200px;
}
.news__img {
height: 200px;
}
.news__item-article {
padding: 24px;
}
.news__date {
margin: 0 0 20px 0;
}
}
@media screen and (max-width: 768px) {
.news-page__article {
margin-top: 90px;
max-width: 100%;
}
.news__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.news__item {
width: 100%;
}
.news__item-article {
padding: 18px;
}
.news__date {
margin: 0 0 12px 0;
}
.news__item-title {
margin: 0 0 18px 0;
}
} .event__wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 48px;
}
.event__article {
max-width: 542px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
gap: 24px;
}
.event__title {
margin: 0;
}
.event__text {
margin: 0;
color: var(--clr-gray);
}
.event__list {
max-width: 846px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.event__item {
padding: 48px 0px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
align-self: stretch;
gap: 24px;
box-sizing: border-box;
border-top: 1px solid var(--clr-white-hover);
}
.event__item:last-child {
border-bottom: 1px solid var(--clr-white-hover);
}
.event__date {
margin: 0;
color: var(--clr-gray);
}
.event__item-title {
margin: 0;
}
.event__subtitle {
margin: 0;
color: var(--clr-gray);
}
@media screen and (max-width: 1024px) {
.event__wrapper {
gap: 32px;
}
.event__item {
padding: 24px 0px;
gap: 12px;
}
}