.elementor-480 .elementor-element.elementor-element-a0412f3 > .elementor-widget-container{margin:-30px 0px 0px 0px;border-style:none;border-radius:94px 94px 94px 94px;box-shadow:0px -1px 14px -11px rgba(0,0,0,0.5);}/* Start custom CSS for html, class: .elementor-element-1329db6 *//* ===========================
   JANTIANA HERO
=========================== */

.jantiana-hero{

position:;
overflow:hidden;

padding:120px 0 170px;

background:linear-gradient(
135deg,
#fffdfd 0%,
#fff7f9 35%,
#fdeef3 100%
);

}

/* Container */

.jantiana-container{

max-width:1320px;

margin:auto;

padding:0 30px;

display:flex;

align-items:center;

justify-content:space-between;

gap:80px;

position:relative;

z-index:5;

}

/* ===========================
TEXT
=========================== */

.jantiana-content{

flex:1;

}

.jantiana-subtitle{

display:inline-block;

padding:10px 22px;

background:#ffffff;

border-radius:40px;

box-shadow:

0 15px 35px rgba(244,180,205,.18);

font-size:14px;

font-weight:700;

color:#d46d96;

margin-bottom:25px;

}

.jantiana-content h1{

font-size:62px;

font-weight:900;

line-height:1.4;

margin-bottom:30px;

color:#333;

}

.jantiana-content h1 span{

display:block;

color:#df7ea8;

}

.jantiana-content p{

font-size:19px;

line-height:2.2;

color:#666;

max-width:620px;

}

/* ===========================
BUTTONS
=========================== */

.jantiana-buttons{

display:flex;

gap:18px;

margin-top:45px;

flex-wrap:wrap;

}

.btn-primary{

background:#ea8eb4;

color:#fff;

padding:18px 38px;

border-radius:60px;

text-decoration:none;

font-weight:700;

transition:.35s;

box-shadow:

0 20px 40px rgba(234,142,180,.35);

}

.btn-primary:hover{

transform:translateY(-6px);

box-shadow:

0 35px 55px rgba(234,142,180,.45);

}

.btn-secondary{

background:#fff;

color:#555;

padding:18px 38px;

border-radius:60px;

text-decoration:none;

font-weight:700;

border:1px solid #f1d4df;

transition:.35s;

}

.btn-secondary:hover{

background:#fff4f8;

transform:translateY(-6px);

}

/* ===========================
IMAGE
=========================== */

.jantiana-image{

flex:1;

display:flex;

justify-content:center;

align-items:center;

}
/*======================================
LOGO CARD
======================================*/

.logo-card{

width:420px;
height:420px;

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

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.9);

border-radius:42px;

display:flex;
justify-content:center;
align-items:center;

box-shadow:
0 30px 80px rgba(238,170,195,.25),
0 12px 30px rgba(0,0,0,.05);

position:relative;

transition:.45s;

animation:logoFloat 6s ease-in-out infinite;

}

.logo-card:hover{

transform:translateY(-10px) rotate(-1deg);

box-shadow:
0 40px 100px rgba(238,170,195,.38);

}

.logo-card img{

width:72%;

height:auto;

display:block;

transition:.4s;

}

.logo-card:hover img{

transform:scale(1.05);

}

/*======================================
BACKGROUND CIRCLES
======================================*/

.jantiana-bg-circle{

position:absolute;

border-radius:50%;

filter:blur(12px);

animation:circleFloat 10s ease-in-out infinite;

}

.circle-1{

width:340px;
height:340px;

background:#ffd9e8;

top:-90px;
right:-60px;

opacity:.55;

}

.circle-2{

width:260px;
height:260px;

background:#ffeef4;

left:-80px;
bottom:90px;

animation-delay:2s;

}

.circle-3{

width:160px;
height:160px;

background:#f8bfd4;

top:170px;
left:46%;

opacity:.45;

animation-delay:4s;

}

/*======================================
DECORATION
======================================*/

.logo-card::before{

content:"";

position:absolute;

width:150px;
height:150px;

border-radius:50%;

border:2px dashed rgba(234,142,180,.28);

top:-30px;
right:-30px;

animation:rotateSlow 28s linear infinite;

}

.logo-card::after{

content:"";

position:absolute;

width:70px;
height:70px;

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

border-radius:20px;

left:-25px;
bottom:45px;

transform:rotate(20deg);

}

/*======================================
BOTTOM WAVE
======================================*/

.hero-wave{

position:absolute;

left:0;

bottom:-8px;

width:100%;

line-height:0;

z-index:3;

}

.hero-wave svg{

width:100%;
height:120px;

display:block;

}

/*======================================
ANIMATIONS
======================================*/

@keyframes logoFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-16px);

}

100%{

transform:translateY(0);

}

}

@keyframes circleFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(24px);

}

100%{

transform:translateY(0);

}

}

@keyframes rotateSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/*======================================
TABLET
======================================*/

@media(max-width:1024px){

.jantiana-container{

gap:40px;

}

.jantiana-content h1{

font-size:50px;

}

.logo-card{

width:340px;
height:340px;

}

}

/*======================================
MOBILE
======================================*/

@media(max-width:767px){

.jantiana-hero{

padding:70px 0 120px;

}

.jantiana-container{

flex-direction:column-reverse;

text-align:center;

gap:50px;

padding:0 22px;

}

.logo-card{

width:270px;
height:270px;

border-radius:30px;

}

.logo-card img{

width:68%;

}

.jantiana-content h1{

font-size:36px;

line-height:1.55;

}

.jantiana-content p{

font-size:16px;

line-height:2;

max-width:100%;

}

.jantiana-buttons{

justify-content:center;

}

.btn-primary,
.btn-secondary{

width:100%;

padding:17px 25px;

}

.circle-1{

width:180px;
height:180px;

}

.circle-2{

width:140px;
height:140px;

}

.circle-3{

display:none;

}

.hero-wave svg{

height:70px;

}

}

/*==========================
Ripple
==========================*/

.btn-primary,
.btn-secondary{

position:relative;

overflow:hidden;

}

.btn-ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .65s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a908a49 *//*================================*/

.jantiana-story{

padding:130px 0;

background:#ffffff;

position:relative;

}

.story-container{

max-width:1180px;

margin:auto;

padding:0 30px;

}

.story-title{

text-align:center;

margin-bottom:90px;

}

.story-title span{

display:inline-block;

padding:10px 25px;

background:#fff4f8;

border-radius:40px;

color:#db7ea8;

font-weight:700;

margin-bottom:20px;

}

.story-title h2{

font-size:48px;

margin-bottom:20px;

color:#333;

}

.story-title p{

max-width:700px;

margin:auto;

line-height:2.1;

font-size:18px;

color:#666;

}

/* Timeline */

.timeline{

position:relative;

padding:40px 0;

}

.timeline::before{

content:"";

position:absolute;

right:50%;

top:0;

width:4px;

height:100%;

background:linear-gradient(#f8cade,#e98eb4);

transform:translateX(50%);

border-radius:20px;

}

.timeline-item{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:80px;

position:relative;

}

.timeline-item:nth-child(even){

flex-direction:row-reverse;

}

.timeline-dot{

width:95px;

height:95px;

background:#ea8eb4;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

font-weight:800;

color:#fff;

box-shadow:

0 20px 45px rgba(234,142,180,.35);

z-index:2;

}

.timeline-card{

width:42%;

background:#fff;

padding:35px;

border-radius:28px;

box-shadow:

0 25px 60px rgba(0,0,0,.06);

transition:.35s;

}

.timeline-card:hover{

transform:translateY(-10px);

box-shadow:

0 35px 80px rgba(234,142,180,.18);

}

.timeline-card h3{

margin-bottom:15px;

font-size:26px;

color:#333;

}

.timeline-card p{

line-height:2;

color:#666;

}

/* موبایل */

@media(max-width:767px){

.timeline::before{

right:30px;

}

.timeline-item{

flex-direction:column!important;

align-items:flex-start;

padding-right:80px;

margin-bottom:60px;

}

.timeline-dot{

position:absolute;

right:0;

width:60px;

height:60px;

font-size:15px;

}

.timeline-card{

width:100%;

padding:25px;

}

.story-title h2{

font-size:34px;

}

.story-title p{

font-size:16px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-821e850 *//*============================*/

.jantiana-about{

padding:100px 0 50px;

background:

linear-gradient(
180deg,
#ffffff,
#fff8fa);

position:relative;

overflow:hidden;

}

.about-container{

max-width:1280px;

margin:auto;

padding:0 30px;

display:flex;

align-items:center;

gap:80px;

}

/* Image */

.about-image{

flex:1;

display:flex;

justify-content:center;

}

.logo-frame{

width:420px;

height:420px;

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

border-radius:40px;

backdrop-filter:blur(18px);

box-shadow:

0 25px 80px rgba(0,0,0,.08);

display:flex;

align-items:center;

justify-content:center;

position:relative;

overflow:hidden;

transition:.4s;

}

.logo-frame:hover{

transform:translateY(-10px);

}

.logo-frame img{

width:70%;

}

/* Content */

.about-content{

flex:1;

}

.about-subtitle{

display:inline-block;

padding:10px 22px;

background:#fff;

border-radius:50px;

color:#d9709b;

font-weight:700;

box-shadow:

0 12px 30px rgba(234,142,180,.18);

margin-bottom:25px;

}

.about-content h2{

font-size:48px;

margin-bottom:10px;

color:#333;

}

.about-content h3{

font-size:30px;

color:#df7ca6;

margin-bottom:30px;

}

.about-content p{

font-size:18px;

line-height:2.2;

color:#666;

margin-bottom:20px;

}

/* Bottom Card */

.about-box{

display:flex;

gap:25px;

margin-top:45px;

}

.about-box div{

flex:1;

background:#fff;

padding:30px;

border-radius:22px;

box-shadow:

0 18px 45px rgba(0,0,0,.05);

transition:.35s;

}

.about-box div:hover{

transform:translateY(-8px);

box-shadow:

0 30px 60px rgba(234,142,180,.16);

}

.about-box strong{

display:block;

font-size:15px;

color:#999;

margin-bottom:8px;

}

.about-box span{

font-size:22px;

font-weight:700;

color:#333;

}

/* Decoration */

.logo-frame::before{

content:"";

position:absolute;

width:260px;

height:260px;

border-radius:50%;

background:

radial-gradient(#ffd6e5,transparent);

top:-120px;

left:-120px;

}

.logo-frame::after{

content:"";

position:absolute;

width:150px;

height:150px;

border-radius:50%;

background:

radial-gradient(#fff2f7,transparent);

bottom:-70px;

right:-70px;

}

/* Responsive */

@media(max-width:767px){

.about-container{

flex-direction:column;

gap:50px;

padding:0 22px;

}

.logo-frame{

width:260px;

height:260px;

}

.about-content{

text-align:center;

}

.about-content h2{

font-size:34px;

}

.about-content h3{

font-size:24px;

}

.about-content p{

font-size:16px;

}

.about-box{

flex-direction:column;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a0412f3 *//*==================================================

JANTIANA CERTIFICATES

==================================================*/

.jantiana-certificates{

padding:70px 0 120px;

background:

linear-gradient(
180deg,
#fff,
#fff8fb);

position:relative;

overflow:hidden;

}

.jantiana-certificates::before{

content:"";

position:absolute;

width:520px;

height:520px;

background:#ffe6ef;

border-radius:50%;

filter:blur(90px);

top:-250px;

left:-180px;

opacity:.55;

}

.jantiana-certificates::after{

content:"";

position:absolute;

width:420px;

height:420px;

background:#fff1f6;

border-radius:50%;

filter:blur(90px);

bottom:-200px;

right:-120px;

opacity:.7;

}

/*==========================*/

.certificate-header{

text-align:center;

margin-bottom:80px;

position:relative;

z-index:3;

}

.certificate-header span{

display:inline-block;

padding:12px 28px;

background:#fff;

border-radius:50px;

box-shadow:

0 15px 40px rgba(233,142,180,.18);

color:#d36c96;

font-weight:700;

margin-bottom:18px;

}

.certificate-header h2{

font-size:48px;

margin-bottom:20px;

color:#333;

}

.certificate-header p{

max-width:700px;

margin:auto;

line-height:2.1;

font-size:18px;

color:#666;

}

/*==========================*/

.certificate-grid{

max-width:1280px;

margin:auto;

padding:0 30px;

display:grid;

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

gap:40px;

position:relative;

z-index:2;

}

/*==========================*/

.certificate-item{

text-align:center;

}

/*==========================*/

.certificate-card{

position:relative;

background:#fff;

padding:14px;

border-radius:26px;

overflow:hidden;

cursor:pointer;

transition:.45s;

box-shadow:

0 25px 60px rgba(0,0,0,.08),

0 8px 18px rgba(233,142,180,.10);

}

/* قاب سفید داخل */

.certificate-card::before{

content:"";

position:absolute;

inset:10px;

border:2px solid rgba(255,255,255,.85);

border-radius:18px;

pointer-events:none;

}

/* انعکاس نور */

.certificate-card::after{

content:"";

position:absolute;

top:-120%;

left:-70%;

width:60%;

height:250%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.65),

transparent

);

transform:rotate(22deg);

transition:.9s;

}

.certificate-card:hover::after{

left:150%;

}

/*==========================*/

.certificate-card img{

width:100%;

display:block;

border-radius:18px;

transition:.6s;

}

.certificate-card:hover img{

transform:scale(1.07);

}

/*==========================*/

.certificate-card:hover{

transform:

translateY(-15px)

rotate(-1deg);

box-shadow:

0 35px 90px rgba(233,142,180,.25);

}

/*==========================*/

.certificate-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(0,0,0,0),

rgba(0,0,0,.78)

);

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:25px;

opacity:0;

transition:.45s;

}

.certificate-card:hover

.certificate-overlay{

opacity:1;

}

.certificate-overlay h3{

font-size:26px;

color:white;

margin-bottom:15px;

}

.certificate-overlay span{

display:inline-block;

padding:12px 22px;

border-radius:50px;

background:

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

backdrop-filter:blur(12px);

font-size:15px;

color:white;

}

/*==========================*/

.certificate-name{

display:inline-flex;

align-items:center;

justify-content:center;

position:relative;

overflow:hidden;

margin-top:24px;

padding:18px 12px;

border-radius:60px;

background:

rgba(255,255,255,.72);

backdrop-filter:blur(17px);

border:1px solid rgba(255,255,255,.9);

box-shadow:

0 15px 45px rgba(233,142,180,.18);

font-size:18px;

font-weight:700;

color:#555;

transition:.45s;

}

/*==========================*/

.jantiana-popup{

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.88);

justify-content:center;

align-items:center;

z-index:999999;

padding:40px;

animation:popupFade .3s;

}

.jantiana-popup img{

max-width:92%;

max-height:90vh;

border-radius:22px;

background:white;

padding:10px;

box-shadow:

0 30px 100px rgba(0,0,0,.5);

}

.popup-close{

position:absolute;

top:30px;

left:40px;

font-size:52px;

color:white;

cursor:pointer;

transition:.3s;

}

.popup-close:hover{

transform:rotate(90deg);

}

/*==========================*/

@keyframes popupFade{

from{

opacity:0;

}

to{

opacity:1;

}

}

/*==========================*/

@media(max-width:1024px){

.certificate-grid{

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

}

}

/*==========================*/

@media(max-width:767px){

.jantiana-certificates{

padding:60px 0 90px;

}

.certificate-grid{

grid-template-columns:1fr;

gap:35px;

padding:0 20px;

}

.certificate-header h2{

font-size:34px;

}

.certificate-header p{

font-size:16px;

}

.certificate-item h4{

font-size:20px;

}

.popup-close{

left:20px;

top:20px;

font-size:42px;

}

}

.glass-circle{

position:absolute;

width:18px;

height:18px;

background:#ffc2d8;

border-radius:50%;

top:10px;

right:-20px;

animation:circleMove 5s linear infinite;

opacity:.8;

}
.glass-square{

position:absolute;

width:14px;

height:14px;

background:#ffdbe8;

transform:rotate(45deg);

bottom:12px;

left:-18px;

animation:squareMove 7s linear infinite;

}
@keyframes circleMove{

0%{

right:-20px;

}

50%{

right:95%;

}

100%{

right:-20px;

}

}

@keyframes squareMove{

0%{

left:-18px;

}

50%{

left:92%;

}

100%{

left:-18px;

}

}
.certificate-name:hover{

transform:translateY(-6px);

box-shadow:

0 25px 60px rgba(233,142,180,.28);

}
.certificate-name::before{

content:"";

position:absolute;

width:70px;

height:240%;

background:

rgba(255,255,255,.45);

transform:rotate(25deg);

left:-100px;

top:-70px;

transition:1.2s;

}

.certificate-name:hover::before{

left:160%;

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bf181a8 *//*======================================================
            JANTIANA FEATURES
======================================================*/

.jantiana-features{

position:relative;

padding:120px 0;

overflow:hidden;

background:
linear-gradient(
180deg,
#fff,
#fff9fb
);

}

/*================ Background ================*/

.features-bg-shape{

position:absolute;

border-radius:50%;

filter:blur(90px);

pointer-events:none;

}

.shape-1{

width:420px;

height:420px;

background:#ffd9e7;

top:-180px;

right:-120px;

animation:shapeFloat 12s ease-in-out infinite;

}

.shape-2{

width:340px;

height:340px;

background:#fff1f7;

bottom:-140px;

left:-80px;

animation:shapeFloat2 15s ease-in-out infinite;

}

/*================ Header ================*/

.features-header{

max-width:780px;

margin:auto;

text-align:center;

margin-bottom:80px;

position:relative;

z-index:5;

}

.features-header span{

display:inline-block;

padding:12px 28px;

border-radius:50px;

background:#fff;

box-shadow:

0 15px 35px rgba(238,150,185,.18);

font-weight:700;

color:#d87199;

margin-bottom:22px;

position:relative;

overflow:hidden;

}

.features-header span::before{

content:"";

position:absolute;

width:80px;

height:250%;

background:

rgba(255,255,255,.65);

transform:rotate(28deg);

left:-120px;

top:-60px;

animation:glassLight 4s linear infinite;

}

.features-header h2{

font-size:48px;

color:#333;

margin-bottom:25px;

line-height:1.6;

}

.features-header p{

font-size:18px;

line-height:2.2;

color:#666;

}

/*================ Grid ================*/

.features-grid{

max-width:1300px;

margin:auto;

padding:0 30px;

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:34px;

position:relative;

z-index:3;

}

/*================ Card ================*/

.feature-card{

position:relative;

overflow:hidden;

padding:40px 32px;

border-radius:38px;

background:

rgba(255,255,255,.72);

backdrop-filter:blur(16px);

border:

1px solid rgba(255,255,255,.9);

box-shadow:

0 18px 55px rgba(0,0,0,.05),

0 12px 24px rgba(237,160,191,.10);

transition:.45s;

cursor:default;

isolation:isolate;

}

/* نور داخل کارت */

.feature-light{

position:absolute;

width:140px;

height:240%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.65),

transparent

);

top:-60%;

left:-180px;

transform:rotate(28deg);

transition:1s;

}

.feature-card:hover .feature-light{

left:150%;

}

/* قاب داخلی */

.feature-card::before{

content:"";

position:absolute;

inset:10px;

border-radius:30px;

border:

1px solid rgba(255,255,255,.65);

pointer-events:none;

}

/* حباب صورتی */

.feature-card::after{

content:"";

position:absolute;

width:18px;

height:18px;

border-radius:50%;

background:#ffc7dc;

right:28px;

top:26px;

animation:bubbleFloat 6s ease-in-out infinite;

opacity:.85;

}

/* Hover */

.feature-card:hover{

transform:

translateY(-12px)

rotate(-1deg);

box-shadow:

0 30px 70px rgba(236,140,180,.20);

}
/*======================================================
                CARD CONTENT
======================================================*/

.feature-icon{

width:82px;
height:82px;

margin-bottom:30px;

display:flex;
align-items:center;
justify-content:center;

border-radius:28px;

background:
linear-gradient(
145deg,
rgba(255,255,255,.95),
rgba(255,241,247,.75)
);

border:1px solid rgba(255,255,255,.95);

box-shadow:
0 15px 40px rgba(234,142,180,.18);

position:relative;

overflow:hidden;

transition:.45s;

}

/* انعکاس نور روی آیکون */

.feature-icon::before{

content:"";

position:absolute;

width:60px;
height:220%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.65),
transparent
);

left:-80px;

top:-60px;

transform:rotate(25deg);

transition:1s;

}

.feature-card:hover .feature-icon::before{

left:140px;

}

/*========================*/

.feature-icon svg{

width:42px;

height:42px;

fill:none;

stroke:#d9709b;

stroke-width:2.4;

stroke-linecap:round;

stroke-linejoin:round;

transition:.5s;

animation:iconFloat 5s ease-in-out infinite;

}

.feature-card:hover .feature-icon{

transform:
rotate(-8deg)
scale(1.08);

}

.feature-card:hover svg{

stroke:#bf4b7d;

transform:scale(1.15);

}

/*========================*/

.feature-card h3{

font-size:24px;

margin-bottom:18px;

color:#333;

line-height:1.7;

font-weight:800;

}

/*========================*/

.feature-card p{

font-size:16px;

line-height:2.1;

color:#666;

}

/*==========================
Decorations
==========================*/

.feature-card .mini-circle{

position:absolute;

width:12px;
height:12px;

background:#ffd2e2;

border-radius:50%;

left:30px;

bottom:30px;

animation:circleMove 8s ease-in-out infinite;

opacity:.8;

}

.feature-card .mini-square{

position:absolute;

width:11px;
height:11px;

background:#ffe9f2;

transform:rotate(45deg);

left:60px;

bottom:65px;

animation:squareMove 10s linear infinite;

}

/*==========================
Hover Border Glow
==========================*/

.feature-card:hover{

border-color:#f6d5e4;

}

.feature-card:hover::before{

border-color:

rgba(255,255,255,.95);

box-shadow:

0 0 0 1px rgba(255,214,230,.7);

}

/*==========================
Animations
==========================*/

@keyframes bubbleFloat{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-18px);

}

100%{

transform:
translateY(0);

}

}

@keyframes iconFloat{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-8px);

}

100%{

transform:
translateY(0);

}

}

@keyframes shapeFloat{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(30px);

}

100%{

transform:
translateY(0);

}

}

@keyframes shapeFloat2{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-25px);

}

100%{

transform:
translateY(0);

}

}

@keyframes glassLight{

0%{

left:-120px;

}

100%{

left:220px;

}

}

@keyframes circleMove{

0%{

transform:
translateY(0);

opacity:.5;

}

50%{

transform:
translateY(-16px);

opacity:1;

}

100%{

transform:
translateY(0);

opacity:.5;

}

}

@keyframes squareMove{

0%{

transform:
rotate(45deg);

}

50%{

transform:
rotate(180deg)
translateY(-8px);

}

100%{

transform:
rotate(405deg);

}

}

/*======================================================
Responsive
======================================================*/

@media(max-width:1024px){

.features-grid{

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

}

}

/*==============================*/

@media(max-width:767px){

.jantiana-features{

padding:80px 0;

}

.features-header{

padding:0 20px;

margin-bottom:45px;

}

.features-header h2{

font-size:34px;

}

.features-header p{

font-size:16px;

}

.features-grid{

display:flex;

overflow-x:auto;

gap:20px;

padding:10px 20px 30px;

scroll-snap-type:x mandatory;

}

.features-grid::-webkit-scrollbar{

display:none;

}

.feature-card{

min-width:320px;

scroll-snap-align:center;

border-radius:32px;

}

}
.feature-card{

--x:50%;

--y:50%;

}

.feature-card::after{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(

circle at var(--x) var(--y),

rgba(255,255,255,.32),

transparent 45%

);

opacity:0;

transition:.25s;

pointer-events:none;

}

.feature-card:hover::after{

opacity:1;

}

.feature-icon svg{

animation:

leafMove 4s ease-in-out infinite;

}

@keyframes leafMove{

0%{

transform:rotate(0);

}

50%{

transform:rotate(8deg);

}

100%{

transform:rotate(0);

}

}/* End custom CSS */