.card-product .about-card,
.card-product .about-card strong {
width: max-content;
color: var(--tm-dark-blue);
font-family: Nunito;
font-weight: 900;
line-height: 24px;
font-size: 14px;
position: relative;
z-index: 1;
display: block;
}
.card-info span strong {
font-weight: 800;
}
.about-card {
display: flex;
}
.card-product .about-card {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.card-info .about-card span {
background: var(--tm-pink);
color: #fff;
padding: 0px 8px;
border-radius: 4px;
display: block;
margin-top: -2px;
font-size: 14px;
}
.button-about {
width: max-content;
border-radius: 100px;
padding: 8px 76px 8px 66px;
border: unset;
font-size: 16px;
cursor: pointer;
font-family: 'Nunito';
font-weight: 700;
overflow: hidden;
color: white;
letter-spacing: -0.2px;
line-height: 28px;
box-shadow: -4px 12px 25px -10px rgba(93, 49, 255, .65);
text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
transition: .3s ease;
margin: auto;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>') var(--tm-blue) top center no-repeat;
background-position: 158px 11px;
background-size: 18px;
margin: 0 0px 0 0px;
}
.card-info p {
margin: 0 0 20px 0;
}
.content-modal-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: var(--tm-border);
}
.content-modal-header h2 {
color: var(--tm-dark-blue);
}
.button-about:hover {
background-color: #2b00ca;
box-shadow: -1px 9px 19px -10px rgba(93, 49, 255, .65);
-ms-transform: scale(.98, .98);
-webkit-transform: scale(.98, .98);
transform: scale(.98, .98);
}
.tm-fadeIn {
opacity: 0;
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn
}
@keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
.card-product:nth-child(6) .card-video img,
.card-product:nth-child(6) .card-video video {
margin-left: 10px;
}
.card-product:nth-child(4) .card-video img,
.card-product:nth-child(4) .card-video video {
margin-right: -2px;
}
.modal-video-content {
width: 98%;
max-width: 1000px;
border-radius: 20px;
padding: 28px 35px 35px 35px;
border: var(--tm-border);
background: var(--tm-grey);
display: flex;
justify-content: end;
flex-wrap: wrap;
gap: 34px;
position: relative;
}
.modal-video-content iframe {
border-radius: 20px;
width: 100%;
height: 400px;
}
.modal-video-content iframe {
border-radius: 20px;
width: 100%;
height: 500px;
}
.card-info {
display: flex;
flex-wrap: wrap;
align-content: center;
gap: 28px;
height: 400px;
}
#lightbox-product,
.modal-video {
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
z-index: 990;
background: #000000d6;
display: flex;
align-items: center;
justify-content: center;
align-content: flex-start;
flex-direction: column;
}
.img-modal-product img {
width: auto;
height: 90%;
border-radius: 20px;
}
.img-modal-product {
display: flex;
align-items: flex-end;
justify-content: flex-start;
flex-direction: column;
background: #fff;
padding: 24px;
gap: 20px;
border-radius: 20px;
height: auto;
}
.close-lightbox,
.close-video {
font-family: 'Nunito';
font-weight: 900;
color: var(--tm-darken-blue);
cursor: pointer;
border-radius: 100px;
height: 44px;
width: 44px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231B0169" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') no-repeat;
background-position: center;
background-size: 26px;
transition: all 0.3s;
opacity: 1;
}
.close-lightbox:hover,
.close-video:hover {
transition: all 0.3s;
background-color: #eaeaea;
}
.close-lightbox:active,
.close-video:active {
transition: all 0.3s;
background-color: #cbcbcb;
}
.ytp-title {
display: none !important;
}
.close-video {
text-align: center;
line-height: 38px;
display: block;
}
.remove-relative {
position: unset !important;
}
.first-shape-prod {
position: absolute;
right: -50px;
transform: rotate(344deg);
}
.shape-complete-section-prod.item-5 {
position: absolute;
bottom: 0;
left: -226px;
}
.shape-complete-section-prod.item-7 {
position: absolute;
transform: rotate(207deg);
margin-top: 290px;
margin-left: 200px;
}
.overflow-hidden {
overflow: hidden;
}
div#lightbox-product {
flex-wrap: wrap;
display: flex;
flex-direction: column;
align-content: center;
}
button.close-lightbox {
order: -1;
}
.card-info h3 {
font-weight: 800;
text-align: left;
font-size: 26px;
margin: 0;
line-height: 36px;
}
.card-info strong {
font-size: 13px;
font-weight: 500;
margin-bottom: 4px;
display: block;
}
.card-info p>strong {
display: unset;
text-transform: unset;
font-size: inherit;
font-weight: 700;
color: #000;
}
.shape-complete-section-prod-dash {
position: absolute;
right: 0;
margin-top: -67px;
}
.card-product {
border-radius: 30px;
padding: 80px 28px 56px 56px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 50px;
max-width: 1000px;
margin: auto auto 90px auto;
z-index: 1;
position: relative;
border: var(--tm-border);
background: var(--tm-grey);
overflow: hidden;
height: 580px;
}
.card-product:last-child {
margin-bottom: 0;
}
.overflow-hdden {
overflow: hidden;
}
.card-video img,
.card-video video {
border-radius: 18px;
width: 73%;
display: block;
box-shadow: var(--tm-dropshadow-1);
margin-top: 2px;
margin-left: 9px;
}
.card-video {
border-radius: 30px;
font-size: 0;
display: flex;
align-items: flex-start;
justify-content: center;
max-width: 706px;
height: 540px;
padding-top: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 60px;
}
.card-info img {
width: 50px;
}
.card-video.dashboard-product {
width: 460px;
}
.description-product ul {
padding-left: 19px;
margin: 0;
}
.description-product li::marker {
color: var(--tm-dark-blue);
}
.dashboard-product img {
width: 80%;
margin-right: 0;
}
.description-product {
position: absolute;
bottom: 56px;
}
.dashboard-product img {
width: 80%;
height: 100%;
object-fit: cover;
object-position: -28px -2px;
margin-right: 21px;
border-radius: 20px 20px 0px 0px;
}
.card-video.card-video-img video {
max-width: 394px;
margin-right: -8px;
}  .container-center-app strong {
background: var(--tm-pink);
color: #fff;
padding: 0px 8px;
border-radius: 4px;
margin-bottom: 12px;
font-size: 14px;
display: block;
width: max-content;
margin-left: 4px;
}
.tm-center-app-tm-pt-180 {
padding-top: 200px;
padding-bottom: 28px!important;
}
.tutoring-products h2 {
padding-top: 60px;
}
.center-element-app img {
width: 68px;
}
.center-element-app {
display: flex;
align-items: flex-end;
}
.tm-center-the-app img {
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
border-radius: 18px;
width: 66px;
margin-left: 12px;
}
.container-center-app {
width: 538px;
margin: auto;
position: relative;
}
.lines-container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
z-index: -1;
}
.lines-container img:nth-child(1) {
width: 240px;
animation: floatLine1 6s ease-in-out infinite;
margin-left: 8px;
}
.lines-container img:nth-child(2) {
width: 40px;
margin-top: -84px;
animation: floatLine2 6s ease-in-out infinite;
animation-delay: 2s;
}
.lines-container img:nth-child(3) {
width: 238px;
margin-left: 26px;
animation: floatLine3 6s ease-in-out infinite;
animation-delay: 4s;
}
@keyframes floatLine1 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
100% {
transform: translateY(0);
}
}
@keyframes floatLine2 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
100% {
transform: translateY(0);
}
}
@keyframes floatLine3 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
100% {
transform: translateY(0);
}
}
.tm-center-the-app {
display: flex;
align-items: center;
justify-content: center;
top: 34px;
position: relative;
}
.center-element-app.center-app-student {
position: absolute;
top: -28px;
left: -34px;
animation: moveStudent 4s ease-in-out infinite;
animation-delay: 0s;
}
.center-element-app.center-app-teacher {
position: absolute;
right: -112px;
top: -32px;
animation: moveTeacher 4s ease-in-out infinite;
animation-delay: 1.3s;
}
.center-element-app.center-app-parents {
top: -148px;
position: absolute;
right: 114px;
animation: moveParent 4s ease-in-out infinite;
animation-delay: 2.6s;
}
@keyframes moveStudent {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0);
}
}
@keyframes moveTeacher {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0);
}
}
@keyframes moveParent {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0);
}
}
@media (max-width: 1008px) {
.container-center-app {
max-width: 504px;
width: auto;
}
.lines-container img:nth-child(1) {
width: 270px;
}
.lines-container img:nth-child(2) {
width: 50px;
margin-right: -5px;
}
.lines-container img:nth-child(3) {
width: 265px;
}
.center-element-app.center-app-teacher {
right: -58px;
top: -26px;
}
}
@media (max-width: 600px) {
.center-element-app img {
width: 50px;
}
.tm-center-the-app img {
width: 52px;
margin-left: 8px;
}
.container-center-app strong {
font-size: 11px;
}
.center-element-app.center-app-teacher {
right: 6px;
top: -11px;
}
section.tm-center-app.tm-pt-180 {
padding: 0;
}
.center-element-app.center-app-student {
left: 4px;
top: -13px;
}
.center-element-app.center-app-parents {
top: -124px;
width: 100%;
display: flex;
align-items: center;
margin: auto;
right: unset;
}
.lines-container img:nth-child(3) {
margin-right: 36px;
margin-top: 20px;
}
.lines-container img:nth-child(2) {
margin-right: -75px;
}
.center-element-app {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
}
@media (max-width: 767px) {
.tm-center-app-tm-pt-180 {
padding-top: 128px !important;
padding-bottom: 20px!important;
}
}
@media (max-width: 699px) {
.card-product .about-card {
margin-bottom: 0;
}
.card-product:last-child .card-info p,
.card-info p {
height: auto;
margin: 0 0 -10px 0;
}
.modal-video-content {
width: 94%;
padding: 12px;
}
.card-info .mark-style-visible:before {
background: unset;
}
.card-video.dashboard-product {
padding-bottom: 0;
overflow: hidden;
border-radius: 0;
position: relative;
width: auto;
height: 464px;
}
.card-product {
grid-template-columns: 1fr;
padding: 20px 20px 0px 20px;
margin-bottom: 40px;
overflow: hidden;
height: auto;
gap: 0px;
}
.description-product {
margin-top: 40px;
position: relative;
bottom: unset;
}
.card-video img,
.card-video video {
width: 100%;
}
.dashboard-product img {
width: auto;
height: 400px;
}
.card-product:last-child {
margin-bottom: 0;
}
.dashboard-product img {
width: auto;
}
#lightbox-product img {
width: 100%;
width: 69vw;
height: auto;
}
.close-lightbox {
top: 20px;
left: 40px;
}
.shape-complete-section-prod {
display: none;
}
.card-product:nth-child(3) .card-video img,
.card-video img,
.card-product:nth-child(4) .card-video img,
.card-product:nth-child(6) .card-video img,
.dashboard-product img,
.card-product:nth-child(3) .card-video video,
.card-video video,
.card-product:nth-child(4) .card-video video,
.card-product:nth-child(6) .card-video video,
.dashboard-product video {
max-width: 100%;
margin: 0;
margin-right: unset;
width: auto;
}
.card-info h3 {
margin-top: 20px;
font-size: 22px;
line-height: 28px;
letter-spacing: -0.2px;
text-align: left;
}
.shape-complete-section-prod-dash {
display: none;
}
.card-video {
position: relative;
width: 100%;
right: 0;
max-width: 100%;
overflow: hidden;
margin-bottom: 0;
border-radius: 0;
padding: 10px;
height: 620px;
}
.dashboard-product img {
object-position: -43px -4px;
}
.close-video {
left: 45%;
top: 60px;
}
.card-info {
height: auto;
margin-bottom: -12px;
}
.button-about {
bottom: 0;
position: absolute;
z-index: 1;
margin: auto;
left: 50%;
transform: translate(-50%, -50%) !important;
}
.card-info img {
width: 40px;
}
.card-product .about-card span,
.card-product .about-card strong {
font-size: 11px;
}
.card-product .about-card strong {
margin-bottom: -2px;
}
.card-info .about-card span {
height: 21px;
display: flex;
align-items: center;
}
}
@media (min-width: 200px) and (max-width: 400px) {
.card-video {
height: 490px;
padding: 10px;
}
.dashboard-product img {
height: 400px;
}
}
@media (min-width: 700px) and (max-width: 950px) {
.description-product {
position: relative;
bottom: 0;
}
.card-product {
padding: 90px 28px 32px 32px;
height: 528px;
}
.card-product.bigger-card {
height: 560px;
}
.card-video.first-product {
bottom: -59px;
}
.card-info h3 {
margin-top: 20px;
margin: 0;
}
.card-video {
width: 412px;
right: -18px;
top: unset;
bottom: -59px;
}
.shape-complete-section-prod.item-7 {
margin-top: 166px;
}
}
@media (min-width: 680px) and (max-width: 1040px) {
.dashboard-product img {
width: 315px;
margin-right: 0;
object-position: -59px 2px;
height: 100%;
}
.card-video.dashboard-product {
max-width: 100%;
overflow: unset;
bottom: -80px;
height: 566px;
width: 485px;
right: -40px;
}
}
@media (min-width: 751px) and (max-width: 790px) {
.card-dash .card-info p {
margin-bottom: 28px !important;
}
}