.elementor-575 .elementor-element.elementor-element-b8df0f9{--display:flex;}.elementor-575 .elementor-element.elementor-element-349dd33{--display:flex;}.elementor-575 .elementor-element.elementor-element-28df997{--display:flex;}.elementor-575 .elementor-element.elementor-element-83b11db{--display:flex;}.elementor-575 .elementor-element.elementor-element-4ab7fe9{--display:flex;}.elementor-575 .elementor-element.elementor-element-810b39f{--display:flex;}.elementor-575 .elementor-element.elementor-element-c3eabdd{--display:flex;}.elementor-575 .elementor-element.elementor-element-fdf15fd{--display:flex;}.elementor-575 .elementor-element.elementor-element-9b12957{--display:flex;}.elementor-575 .elementor-element.elementor-element-7bf1330{--display:flex;}.elementor-575 .elementor-element.elementor-element-025c454{--display:flex;}.elementor-575 .elementor-element.elementor-element-5f406c9{--display:flex;}.elementor-575 .elementor-element.elementor-element-fa3d4a8{--display:flex;}.elementor-575 .elementor-element.elementor-element-7b2e385{--display:flex;}.elementor-575 .elementor-element.elementor-element-9c19ea5{--display:flex;}/* Start custom CSS for html, class: .elementor-element-2ca9ec4 *//*=========================================
 GOOGLE FONTS
=========================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');

/*=========================================
 RESET
=========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f5f9ff;
    color:#222;
    overflow-x:hidden;
}

/*=========================================
 COLOR VARIABLES
=========================================*/

:root{

    --primary:#0d5fff;
    --secondary:#00b4d8;
    --accent:#18c29c;

    --dark:#071b35;
    --text:#4d5b6d;

    --white:#ffffff;

    --glass:rgba(255,255,255,.18);
    --glass-border:rgba(255,255,255,.28);

    --shadow:
    0 20px 50px rgba(0,0,0,.12);

}

/*=========================================
 HERO SECTION
=========================================*/

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #edf6ff,
    #ffffff,
    #f5fbff);

}

/*=========================================
 ANIMATED BACKGROUND
=========================================*/

.gradient-bg{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 20% 20%,
    rgba(13,95,255,.18),
    transparent 40%),

    radial-gradient(circle at 80% 30%,
    rgba(0,180,216,.20),
    transparent 35%),

    radial-gradient(circle at 60% 90%,
    rgba(24,194,156,.18),
    transparent 40%);

    animation:bgMove 14s linear infinite;

    z-index:0;

}

@keyframes bgMove{

0%{

transform:scale(1) rotate(0deg);

}

50%{

transform:scale(1.08) rotate(3deg);

}

100%{

transform:scale(1) rotate(0deg);

}

}

/*=========================================
 FLOATING SHAPES
=========================================*/

.shape{

position:absolute;

border-radius:50%;

backdrop-filter:blur(30px);

-webkit-backdrop-filter:blur(30px);

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

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

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

z-index:1;

}

.shape1{

width:180px;

height:180px;

left:-60px;

top:120px;

}

.shape2{

width:280px;

height:280px;

right:-80px;

top:70px;

animation-delay:2s;

}

.shape3{

width:160px;

height:160px;

bottom:40px;

left:42%;

animation-delay:4s;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-25px);

}

100%{

transform:translateY(0);

}

}

/*=========================================
 CONTAINER
=========================================*/

.hero-container{

position:relative;

z-index:5;

width:100%;

max-width:1400px;

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:70px;

}

/*=========================================
 LEFT CONTENT
=========================================*/

.hero-content{

position:relative;

}

.hero-badge{

display:inline-flex;

align-items:center;

padding:10px 24px;

border-radius:50px;

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

backdrop-filter:blur(15px);

-webkit-backdrop-filter:blur(15px);

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

font-size:15px;

font-weight:600;

color:var(--primary);

box-shadow:var(--shadow);

margin-bottom:28px;

}

.hero-content h1{

font-family:'Playfair Display',serif;

font-size:68px;

line-height:1.08;

font-weight:800;

color:var(--dark);

margin-bottom:25px;

}

.hero-content h1 span{

display:block;

margin-top:12px;

background:linear-gradient(
90deg,
var(--primary),
var(--secondary),
var(--accent));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-content p{

font-size:18px;

line-height:1.9;

max-width:650px;

color:var(--text);

margin-bottom:42px;

}

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

.hero-buttons{

    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:55px;

}

.hero-buttons a{

    text-decoration:none;
    font-size:16px;
    font-weight:600;
    transition:.4s ease;
    position:relative;
    overflow:hidden;

}

/* Primary Button */

.btn-primary{

    padding:18px 38px;

    border-radius:60px;

    color:#fff;

    background:linear-gradient(135deg,#0d5fff,#00b4d8);

    box-shadow:
    0 18px 40px rgba(13,95,255,.30);

}

.btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:
    0 28px 60px rgba(13,95,255,.45);

}

/* Secondary Button */

.btn-secondary{

    padding:18px 38px;

    border-radius:60px;

    color:#0d5fff;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.btn-secondary:hover{

    background:#fff;

    transform:translateY(-6px);

}

/*=========================================
 HERO IMAGE AREA
=========================================*/

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*=========================================
 GLASS FRAME
=========================================*/

.glass-frame{

    position:relative;

    width:460px;

    height:560px;

    border-radius:40px;

    padding:18px;

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

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

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

    box-shadow:
    0 30px 80px rgba(0,0,0,.15);

    overflow:hidden;

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

}

/* Animated Border Glow */

.glass-frame::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:
    linear-gradient(
    130deg,
    rgba(13,95,255,.5),
    rgba(0,180,216,.45),
    rgba(24,194,156,.5));

    z-index:-2;

    filter:blur(25px);

    opacity:.9;

}

/* Mirror Reflection */

.glass-frame::after{

    content:"";

    position:absolute;

    top:-40%;

    left:-30%;

    width:60%;

    height:170%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent);

    transform:rotate(25deg);

    animation:mirrorShine 7s linear infinite;

}

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

.glass-frame img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:28px;

    display:block;

}

/*=========================================
 IMAGE GLOW CIRCLE
=========================================*/

.hero-image::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(0,180,216,.28),
    transparent 70%);

    z-index:-1;

    animation:pulseGlow 5s infinite;

}

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

@keyframes glassFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-16px);

    }

    100%{

        transform:translateY(0px);

    }

}

@keyframes mirrorShine{

    0%{

        left:-45%;

    }

    100%{

        left:140%;

    }

}

@keyframes pulseGlow{

    0%{

        transform:scale(.9);

        opacity:.5;

    }

    50%{

        transform:scale(1.05);

        opacity:1;

    }

    100%{

        transform:scale(.9);

        opacity:.5;

    }

}

/*=========================================
 HERO FEATURES
=========================================*/

.hero-features{

    display:flex;
    gap:22px;
    flex-wrap:wrap;
    margin-top:20px;

}

.feature{

    display:flex;
    align-items:center;
    gap:15px;

    padding:18px 22px;

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

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

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

    border-radius:18px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

    transition:.4s ease;

}

.feature:hover{

    transform:translateY(-10px);

    box-shadow:
    0 25px 50px rgba(13,95,255,.18);

}

.feature i{

    width:60px;
    height:60px;

    border-radius:50%;

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

    font-size:24px;

    color:#fff;

    background:linear-gradient(
    135deg,
    #0d5fff,
    #00b4d8);

    box-shadow:
    0 10px 25px rgba(13,95,255,.35);

}

.feature h4{

    font-size:18px;

    color:var(--dark);

    margin-bottom:5px;

}

.feature p{

    margin:0;

    font-size:14px;

    color:var(--text);

    line-height:1.5;

}

/*=========================================
 SCROLL INDICATOR
=========================================*/

.scroll-down{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    width:34px;

    height:58px;

    border:2px solid rgba(13,95,255,.35);

    border-radius:40px;

    display:flex;

    justify-content:center;

    padding-top:10px;

    z-index:20;

}

.scroll-down span{

    width:7px;

    height:12px;

    border-radius:10px;

    background:#0d5fff;

    animation:scrollMouse 1.8s infinite;

}

@keyframes scrollMouse{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(18px);

opacity:0;

}

}

/*=========================================
 HERO ENTRANCE ANIMATION
=========================================*/

.hero-content{

    animation:leftFade 1s ease;

}

.hero-image{

    animation:rightFade 1.1s ease;

}

@keyframes leftFade{

0%{

opacity:0;

transform:translateX(-60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes rightFade{

0%{

opacity:0;

transform:translateX(60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

/*=========================================
 RESPONSIVE
=========================================*/

@media(max-width:1200px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.hero-content p{

margin:auto auto 40px;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

justify-content:center;

}

.hero-image{

order:-1;

}

}

@media(max-width:768px){

.hero{

padding:100px 20px;

}

.hero-content h1{

font-size:42px;

line-height:1.2;

}

.hero-content p{

font-size:16px;

}

.glass-frame{

width:320px;

height:420px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn-primary,
.btn-secondary{

width:100%;

max-width:280px;

text-align:center;

}

.feature{

width:100%;

}

.hero-badge{

font-size:13px;

padding:8px 18px;

}

.scroll-down{

display:none;

}

}

@media(max-width:480px){

.hero-content h1{

font-size:34px;

}

.glass-frame{

width:280px;

height:360px;

border-radius:28px;

}

.feature{

padding:15px;

}

.feature i{

width:50px;

height:50px;

font-size:20px;

}

.feature h4{

font-size:16px;

}

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

.services-intro{

    position:relative;
    padding:20px 8%;
    background:#f7fbff;
    overflow:hidden;

}

.container{

    max-width:1300px;
    margin:auto;
    position:relative;
    z-index:2;

}

.section-title{

    text-align:center;
    max-width:850px;
    margin:auto  auto 70px;

}

.section-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:40px;

    background:#e9f4ff;

    color:#0d5fff;

    font-weight:600;

    margin-bottom:20px;

}

.section-title h2{

    font-family:'Playfair Display',serif;

    font-size:52px;

    color:#071b35;

    line-height:1.2;

}

.section-title h2 span{

    display:block;

    background:linear-gradient(90deg,#0d5fff,#00b4d8,#18c29c);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.section-title p{

    margin-top:25px;

    font-size:18px;

    line-height:1.9;

    color:#5d6977;

}

.intro-grid{

    display:grid;

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

    gap:30px;

}

.intro-card{

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

    backdrop-filter:blur(20px);

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

    border-radius:28px;

    padding:45px;

    text-align:center;

    transition:.45s;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.intro-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 55px rgba(13,95,255,.18);

}

.intro-card.active{

    background:linear-gradient(135deg,#0d5fff,#00b4d8);

    color:#fff;

}

.intro-card.active p{

    color:#fff;

}

.intro-card .icon{

    width:85px;

    height:85px;

    margin:auto auto 25px;

    border-radius:50%;

    background:linear-gradient(135deg,#0d5fff,#18c29c);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:#fff;

}

.intro-card.active .icon{

    background:#fff;

    color:#0d5fff;

}

.intro-card h3{

    margin-bottom:18px;

    font-size:24px;

    color:#071b35;

}

.intro-card.active h3{

    color:#fff;

}

.intro-card p{

    font-size:16px;

    line-height:1.8;

    color:#5d6977;

}

.intro-bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(60px);

    opacity:.35;

}

.circle-1{

    width:300px;

    height:300px;

    background:#00b4d8;

    top:-80px;

    left:-80px;

}

.circle-2{

    width:280px;

    height:280px;

    background:#18c29c;

    right:-80px;

    bottom:-80px;

}

@media(max-width:992px){

.intro-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:40px;

}

}

@media(max-width:768px){

.services-intro{

padding:80px 20px;

}

.section-title h2{

font-size:32px;

}

.section-title p{

font-size:16px;

}

.intro-card{

padding:35px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1930964 *//*==================================================
  PART 3A-3A
  PREMIUM SERVICES SECTION
==================================================*/

.gastro-services{

    position:relative;
    padding:20px 7%;
    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #f6fbff 0%,
    #ffffff 100%);

}

/* Background Glow */

.gastro-services::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:-120px;
    top:-120px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(13,95,255,.12),
    transparent 70%);

    filter:blur(40px);

}

.gastro-services::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    right:-100px;
    bottom:-100px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(24,194,156,.10),
    transparent 70%);

    filter:blur(40px);

}

/* Container */

.gastro-services .container{

    position:relative;

    z-index:5;

    max-width:1350px;

    margin:auto;

}

/*==================================
 Section Heading
===================================*/

.section-heading{

    text-align:center;

    max-width:850px;

    margin:auto auto 70px;

}

.section-subtitle{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(13,95,255,.08);

    color:#0d5fff;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:22px;

}

.section-heading h2{

    font-family:'Playfair Display',serif;

    font-size:52px;

    color:#071b35;

    margin-bottom:22px;

    line-height:1.15;

}

.section-heading p{

    font-size:18px;

    line-height:1.9;

    color:#627183;

}

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

.services-grid{

    display:grid;

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

    gap:35px;

}

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

.service-card{

    position:relative;

    padding:38px;

    border-radius:30px;

    overflow:hidden;

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:

    0 15px 40px
    rgba(0,0,0,.08);

    transition:.45s ease;

}

/* Glass Reflection */

.service-card::before{

    content:"";

    position:absolute;

    top:-140%;

    left:-20%;

    width:55%;

    height:320%;

    background:
    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.35),

    transparent);

    transform:rotate(25deg);

    transition:1s;

}

.service-card:hover::before{

    left:150%;

}

/* Hover Effect */

.service-card:hover{

    transform:

    translateY(-14px);

    box-shadow:

    0 30px 60px
    rgba(13,95,255,.15);

}

/*==================================================
  PART 3A-3B
  SERVICE ICONS • CONTENT • BUTTONS
==================================================*/

/*==================================
 Service Icon
===================================*/

.service-icon{

    width:82px;
    height:82px;

    border-radius:24px;

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

    margin-bottom:28px;

    font-size:34px;

    color:#fff;

    background:linear-gradient(
        135deg,
        #0d5fff 0%,
        #00b4d8 55%,
        #18c29c 100%
    );

    box-shadow:
        0 18px 40px rgba(13,95,255,.28);

    transition:.45s ease;

    position:relative;

    overflow:hidden;

}

/* Shine Effect */

.service-icon::before{

    content:"";

    position:absolute;

    top:-120%;
    left:-30%;

    width:50%;
    height:260%;

    background:
        linear-gradient(
            rgba(255,255,255,0),
            rgba(255,255,255,.55),
            rgba(255,255,255,0)
        );

    transform:rotate(25deg);

    transition:.8s;

}

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

    left:150%;

}

.service-card:hover .service-icon{

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

}

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

.service-card.featured{

    background:
        linear-gradient(
            135deg,
            #0d5fff,
            #00b4d8
        );

    color:#fff;

    border:none;

}

.service-card.featured h3{

    color:#fff;

}

.service-card.featured p{

    color:rgba(255,255,255,.92);

}

.service-card.featured .service-icon{

    background:#fff;

    color:#0d5fff;

    box-shadow:
        0 15px 35px rgba(255,255,255,.22);

}

/*==================================
 Heading
===================================*/

.service-card h3{

    font-size:26px;

    font-weight:700;

    color:#071b35;

    line-height:1.35;

    margin-bottom:18px;

    transition:.3s;

}

/*==================================
 Paragraph
===================================*/

.service-card p{

    font-size:16px;

    line-height:1.9;

    color:#5d6977;

    margin-bottom:32px;

}

/*==================================
 Learn More Button
===================================*/

.service-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    color:#0d5fff;

    transition:.35s ease;

}

.service-btn i{

    transition:.35s ease;

}

.service-btn:hover{

    color:#18c29c;

}

.service-btn:hover i{

    transform:translateX(8px);

}

/* Featured Button */

.service-card.featured .service-btn{

    color:#fff;

}

.service-card.featured .service-btn:hover{

    opacity:.9;

}

/*==================================================
  PART 3A-3C
  ANIMATIONS • RESPONSIVE • FINAL POLISH
==================================================*/

/*=========================================
 CARD APPEAR ANIMATION
=========================================*/

.service-card{

    animation:serviceFade .8s ease both;

}

.service-card:nth-child(2){

    animation-delay:.15s;

}

.service-card:nth-child(3){

    animation-delay:.30s;

}

.service-card:nth-child(4){

    animation-delay:.45s;

}

.service-card:nth-child(5){

    animation-delay:.60s;

}

.service-card:nth-child(6){

    animation-delay:.75s;

}

@keyframes serviceFade{

0%{

opacity:0;

transform:translateY(45px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/*=========================================
 HOVER GLOW
=========================================*/

.service-card:hover{

border-color:rgba(13,95,255,.15);

}

.service-card:hover h3{

color:#0d5fff;

}

.service-card.featured:hover h3{

color:#fff;

}

/*=========================================
 SOFT BACKGROUND GLOW
=========================================*/

.service-card::after{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(13,95,255,.10),

transparent 70%);

top:-120px;

right:-120px;

opacity:0;

transition:.45s;

pointer-events:none;

}

.service-card:hover::after{

opacity:1;

}

/*=========================================
 IMAGE/ICON SMOOTH EFFECT
=========================================*/

.service-icon{

transition:

transform .45s ease,

box-shadow .45s ease;

}

.service-card:hover .service-icon{

box-shadow:

0 18px 45px rgba(13,95,255,.35);

}

/*=========================================
 BUTTON MICRO ANIMATION
=========================================*/

.service-btn{

position:relative;

}

.service-btn::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:0;

height:2px;

background:#18c29c;

transition:.35s;

}

.service-btn:hover::after{

width:100%;

}

.service-card.featured .service-btn::after{

background:#fff;

}

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

@media (max-width:1024px){

.services-grid{

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

gap:25px;

}

.section-heading h2{

font-size:42px;

}

.service-card{

padding:30px;

}

}

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

@media (max-width:768px){

.gastro-services{

padding:80px 20px;

}

.services-grid{

grid-template-columns:1fr;

gap:20px;

}

.section-heading{

margin-bottom:50px;

}

.section-heading h2{

font-size:32px;

}

.section-heading p{

font-size:16px;

}

.service-card{

padding:28px;

border-radius:24px;

}

.service-icon{

width:70px;

height:70px;

font-size:28px;

margin-bottom:20px;

}

.service-card h3{

font-size:22px;

}

.service-card p{

font-size:15px;

line-height:1.8;

}

}

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

@media (max-width:480px){

.section-subtitle{

font-size:13px;

padding:10px 18px;

}

.section-heading h2{

font-size:28px;

}

.service-card{

padding:24px;

}

.service-card h3{

font-size:20px;

}

.service-btn{

font-size:14px;

}

}

/*=========================================
 ACCESSIBILITY
=========================================*/

.service-btn:focus,
.service-card:focus-within{

outline:2px solid #0d5fff;

outline-offset:4px;

}

/*=========================================
 END OF PART 3A CSS
=========================================*//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e2d36d2 *//*==================================================
  PART 4B-1
  LIVER CARE SECTION
  Layout • Background • Glass Image
==================================================*/

.liver-care{

    position:relative;
    padding:20px 7%;
    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #f5fbff 100%);

}

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

.liver-care::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    left:-150px;
    top:-120px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(13,95,255,.12),
    transparent 70%);

    filter:blur(45px);

}

.liver-care::after{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    right:-120px;
    bottom:-120px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(24,194,156,.12),
    transparent 70%);

    filter:blur(45px);

}

/*=========================================
 Container
=========================================*/

.liver-care .container{

    max-width:1350px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*=========================================
 Two Column Layout
=========================================*/

.liver-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/*=========================================
 Image Wrapper
=========================================*/

.liver-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*=========================================
 Glass Image Frame
=========================================*/

.image-glass{

    position:relative;

    width:100%;

    max-width:520px;

    padding:18px;

    border-radius:35px;

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:
    0 30px 80px
    rgba(0,0,0,.12);

    overflow:hidden;

}

/* Glass Reflection */

.image-glass::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-30%;

    width:55%;

    height:300%;

    background:
    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.35),

    transparent);

    transform:rotate(25deg);

    animation:
    glassShine 8s linear infinite;

}

/*=========================================
 Image
=========================================*/

.image-glass img{

    width:100%;

    display:block;

    border-radius:24px;

    object-fit:cover;

}

/*=========================================
 Floating Experience Card
=========================================*/

.experience-box{

    position:absolute;

    left:-20px;

    bottom:35px;

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

    backdrop-filter:blur(15px);

    padding:24px 30px;

    border-radius:22px;

    box-shadow:
    0 20px 45px
    rgba(0,0,0,.12);

}

.experience-box h2{

    font-size:34px;

    font-weight:700;

    color:#0d5fff;

    line-height:1;

    margin-bottom:8px;

}

.experience-box span{

    display:block;

    color:#5f6d7b;

    font-weight:600;

    font-size:16px;

}
/*==================================================
  PART 4B-2
  CONTENT • TYPOGRAPHY • CHECKLIST • CTA
==================================================*/

/*=========================================
 Right Content
=========================================*/

.liver-content{

    position:relative;

    z-index:2;

}

/* Section Tag */

.liver-content .section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(13,95,255,.08);

    color:#0d5fff;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:24px;

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

}

/* Heading */

.liver-content h2{

    font-family:'Playfair Display',serif;

    font-size:54px;

    line-height:1.15;

    color:#071b35;

    margin-bottom:24px;

}

.liver-content h2 span{

    display:block;

    margin-top:12px;

    background:linear-gradient(
    90deg,
    #0d5fff,
    #00b4d8,
    #18c29c);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/* Paragraph */

.liver-content p{

    font-size:17px;

    line-height:1.95;

    color:#5d6977;

    margin-bottom:22px;

}

/*=========================================
 Checklist
=========================================*/

.liver-points{

    display:grid;

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

    gap:18px;

    margin:40px 0;

}

.liver-points div{

    position:relative;

    padding:18px 20px;

    border-radius:18px;

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

    backdrop-filter:blur(12px);

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

    box-shadow:
    0 12px 28px rgba(0,0,0,.06);

    color:#071b35;

    font-size:16px;

    font-weight:600;

    transition:.35s ease;

}

.liver-points div:hover{

    transform:translateY(-6px);

    box-shadow:
    0 18px 40px rgba(13,95,255,.15);

    border-color:rgba(13,95,255,.15);

}

/*=========================================
 CTA Button
=========================================*/

.liver-content .btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:60px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    color:#fff;

    background:linear-gradient(
    135deg,
    #0d5fff,
    #00b4d8);

    box-shadow:
    0 18px 45px rgba(13,95,255,.28);

    transition:.4s ease;

}

.liver-content .btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:
    0 26px 55px rgba(13,95,255,.38);

}
/*==================================================
  PART 4B-3
  ANIMATIONS • RESPONSIVE • FINAL POLISH
==================================================*/

/*=========================================
 Glass Shine Animation
=========================================*/

@keyframes glassShine{

0%{

left:-40%;

}

100%{

left:140%;

}

}

/*=========================================
 Floating Image Animation
=========================================*/

.image-glass{

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

}

@keyframes imageFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/*=========================================
 Experience Card Animation
=========================================*/

.experience-box{

animation:experiencePulse 4s ease-in-out infinite;

}

@keyframes experiencePulse{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

/*=========================================
 Entrance Animation
=========================================*/

.liver-image{

animation:slideLeft .9s ease both;

}

.liver-content{

animation:slideRight .9s ease .15s both;

}

@keyframes slideLeft{

0%{

opacity:0;

transform:translateX(-50px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes slideRight{

0%{

opacity:0;

transform:translateX(50px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

/*=========================================
 Hover Effects
=========================================*/

.image-glass{

transition:
transform .4s ease,
box-shadow .4s ease;

}

.image-glass:hover{

transform:translateY(-8px);

box-shadow:
0 35px 90px rgba(13,95,255,.18);

}

.image-glass:hover img{

transform:scale(1.03);

}

.image-glass img{

transition:transform .5s ease;

}

/*=========================================
 Tablet
=========================================*/

@media (max-width:1024px){

.liver-grid{

grid-template-columns:1fr;

gap:60px;

}

.liver-content{

text-align:center;

}

.liver-content h2{

font-size:42px;

}

.liver-points{

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

}

.image-glass{

margin:auto;

}

.experience-box{

left:20px;

bottom:20px;

}

}

/*=========================================
 Mobile
=========================================*/

@media (max-width:768px){

.liver-care{

padding:80px 20px;

}

.liver-content h2{

font-size:32px;

}

.liver-content p{

font-size:16px;

line-height:1.8;

}

.liver-points{

grid-template-columns:1fr;

gap:15px;

margin:30px 0;

}

.liver-points div{

padding:16px;

font-size:15px;

}

.image-glass{

max-width:340px;

padding:14px;

}

.experience-box{

position:relative;

left:0;

bottom:0;

margin-top:20px;

display:inline-block;

}

.liver-content .btn-primary{

width:100%;

max-width:320px;

}

}

/*=========================================
 Small Mobile
=========================================*/

@media (max-width:480px){

.liver-content .section-tag{

font-size:13px;

padding:10px 18px;

}

.liver-content h2{

font-size:28px;

}

.image-glass{

max-width:280px;

border-radius:24px;

}

.image-glass img{

border-radius:18px;

}

.experience-box{

padding:18px 22px;

}

.experience-box h2{

font-size:28px;

}

.experience-box span{

font-size:14px;

}

}

/*=========================================
 Accessibility
=========================================*/

.liver-content .btn-primary:focus{

outline:2px solid #0d5fff;

outline-offset:4px;

}

/*==================================================
 END OF PART 4 CSS
==================================================*//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8a5cb64 *//*==================================================
  PART 5B-1
  ADVANCED ENDOSCOPY & PANCREAS CARE
  Layout • Background • Image Panel
==================================================*/

/*=========================================
 SECTION
=========================================*/

.endo-care{

    position:relative;

    padding:20px 7%;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #f7fbff 0%,
    #ffffff 100%);

}

/*=========================================
 BACKGROUND GLOW
=========================================*/

.endo-care::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-120px;

    top:-120px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(13,95,255,.12),
    transparent 70%);

    filter:blur(40px);

}

.endo-care::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    right:-120px;

    bottom:-120px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(24,194,156,.12),
    transparent 70%);

    filter:blur(40px);

}

/*=========================================
 CONTAINER
=========================================*/

.endo-care .container{

    position:relative;

    z-index:2;

    max-width:1350px;

    margin:auto;

}

/*=========================================
 GRID
=========================================*/

.endo-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

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

.endo-image{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

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

.glass-image{

    position:relative;

    width:100%;

    max-width:520px;

    padding:18px;

    border-radius:34px;

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:
    0 30px 80px
    rgba(0,0,0,.12);

    overflow:hidden;

}

/*=========================================
 GLASS REFLECTION
=========================================*/

.glass-image::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-30%;

    width:55%;

    height:300%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent);

    transform:rotate(25deg);

    animation:
    endoShine 8s linear infinite;

}

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

.glass-image img{

    width:100%;

    display:block;

    border-radius:24px;

    object-fit:cover;

    transition:.5s;

}

/*=========================================
 PROCEDURE CARD
=========================================*/

.procedure-card{

    position:absolute;

    right:-20px;

    bottom:35px;

    padding:22px 28px;

    border-radius:22px;

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

    backdrop-filter:blur(15px);

    box-shadow:
    0 20px 45px
    rgba(0,0,0,.12);

}

.procedure-card h3{

    font-size:28px;

    color:#0d5fff;

    margin-bottom:6px;

    font-weight:700;

    line-height:1.2;

}

.procedure-card p{

    font-size:15px;

    color:#5f6d7b;

    margin:0;

}
/*==================================================
  PART 5B-2
  CONTENT • TYPOGRAPHY • FEATURE LIST • CTA
==================================================*/

/*=========================================
 CONTENT
=========================================*/

.endo-content{

    position:relative;

    z-index:2;

}

/*=========================================
 SECTION TAG
=========================================*/

.endo-content .section-tag{

    display:inline-flex;

    align-items:center;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(13,95,255,.08);

    color:#0d5fff;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:24px;

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

}

/*=========================================
 HEADING
=========================================*/

.endo-content h2{

    font-family:'Playfair Display', serif;

    font-size:54px;

    line-height:1.15;

    color:#071b35;

    margin-bottom:24px;

}

.endo-content h2 span{

    display:block;

    margin-top:10px;

    background:linear-gradient(
        90deg,
        #0d5fff,
        #00b4d8,
        #18c29c
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/*=========================================
 DESCRIPTION
=========================================*/

.endo-content p{

    font-size:17px;

    line-height:1.9;

    color:#5d6977;

    margin-bottom:34px;

}

/*=========================================
 FEATURE LIST
=========================================*/

.endo-list{

    display:grid;

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

    gap:18px;

    margin-bottom:42px;

}

.endo-list div{

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:18px;

    border-radius:18px;

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

    backdrop-filter:blur(14px);

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

    box-shadow:
        0 12px 28px rgba(0,0,0,.06);

    color:#071b35;

    font-size:15px;

    font-weight:600;

    transition:.35s ease;

}

.endo-list div:hover{

    transform:translateY(-6px);

    border-color:rgba(13,95,255,.15);

    box-shadow:
        0 20px 40px rgba(13,95,255,.12);

}

.endo-list i{

    width:34px;

    height:34px;

    min-width:34px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    background:linear-gradient(
        135deg,
        #0d5fff,
        #00b4d8
    );

    font-size:13px;

}

/*=========================================
 CTA BUTTON
=========================================*/

.endo-content .btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:60px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    color:#fff;

    background:linear-gradient(
        135deg,
        #0d5fff,
        #00b4d8
    );

    box-shadow:
        0 18px 45px rgba(13,95,255,.28);

    transition:.4s ease;

}

.endo-content .btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:
        0 28px 55px rgba(13,95,255,.38);

}
/*==================================================
  PART 5B-3
  ANIMATIONS • RESPONSIVE • FINAL POLISH
==================================================*/

/*=========================================
 GLASS SHINE ANIMATION
=========================================*/

@keyframes endoShine{

0%{

left:-45%;

}

100%{

left:145%;

}

}

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

.glass-image{

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

}

@keyframes endoFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/*=========================================
 PROCEDURE CARD ANIMATION
=========================================*/

.procedure-card{

animation:procedurePulse 4s ease-in-out infinite;

}

@keyframes procedurePulse{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

/*=========================================
 ENTRANCE ANIMATION
=========================================*/

.endo-content{

animation:fadeInLeft .9s ease both;

}

.endo-image{

animation:fadeInRight .9s ease .15s both;

}

@keyframes fadeInLeft{

0%{

opacity:0;

transform:translateX(-50px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeInRight{

0%{

opacity:0;

transform:translateX(50px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

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

.glass-image{

transition:
transform .4s ease,
box-shadow .4s ease;

}

.glass-image:hover{

transform:translateY(-8px);

box-shadow:
0 35px 90px rgba(13,95,255,.18);

}

.glass-image:hover img{

transform:scale(1.04);

}

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

@media (max-width:1024px){

.endo-grid{

grid-template-columns:1fr;

gap:60px;

}

.endo-content{

text-align:center;

}

.endo-content h2{

font-size:42px;

}

.endo-list{

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

}

.glass-image{

margin:auto;

}

.procedure-card{

right:20px;

bottom:20px;

}

}

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

@media (max-width:768px){

.endo-care{

padding:80px 20px;

}

.endo-content h2{

font-size:32px;

}

.endo-content p{

font-size:16px;

line-height:1.8;

}

.endo-list{

grid-template-columns:1fr;

gap:15px;

}

.glass-image{

max-width:340px;

padding:14px;

}

.procedure-card{

position:relative;

right:0;

bottom:0;

margin-top:20px;

display:inline-block;

}

.endo-content .btn-primary{

width:100%;

max-width:320px;

}

}

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

@media (max-width:480px){

.endo-content .section-tag{

font-size:13px;

padding:10px 18px;

}

.endo-content h2{

font-size:28px;

}

.glass-image{

max-width:280px;

border-radius:24px;

}

.glass-image img{

border-radius:18px;

}

.procedure-card{

padding:18px 22px;

}

.procedure-card h3{

font-size:22px;

}

.procedure-card p{

font-size:14px;

}

}

/*=========================================
 ACCESSIBILITY
=========================================*/

.endo-content .btn-primary:focus{

outline:2px solid #0d5fff;

outline-offset:4px;

}

/*==================================================
 END OF PART 5 CSS
==================================================*//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-11fca87 *//*==================================================
  PART 6B-1
  INTESTINAL DISORDERS
  Layout • Background • Glass Image
==================================================*/

/*=========================================
 SECTION
=========================================*/

.intestinal-care{

    position:relative;

    padding:20px 7%;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #f7fbff 100%);

}

/*=========================================
 BACKGROUND GLOW
=========================================*/

.intestinal-care::before{

    content:"";

    position:absolute;

    width:430px;

    height:430px;

    left:-130px;

    top:-130px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(13,95,255,.10),
    transparent 70%);

    filter:blur(45px);

}

.intestinal-care::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    right:-120px;

    bottom:-120px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(24,194,156,.10),
    transparent 70%);

    filter:blur(45px);

}

/*=========================================
 CONTAINER
=========================================*/

.intestinal-care .container{

    max-width:1350px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*=========================================
 GRID
=========================================*/

.intestinal-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

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

.intestinal-image{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

/*=========================================
 GLASS BOX
=========================================*/

.glass-box{

    position:relative;

    width:100%;

    max-width:520px;

    padding:18px;

    border-radius:34px;

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:
    0 30px 80px rgba(0,0,0,.12);

    overflow:hidden;

}

/*=========================================
 GLASS SHINE
=========================================*/

.glass-box::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-30%;

    width:55%;

    height:300%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent);

    transform:rotate(25deg);

    animation:intestinalShine 8s linear infinite;

}

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

.glass-box img{

    width:100%;

    display:block;

    object-fit:cover;

    border-radius:24px;

    transition:.5s ease;

}

/*=========================================
 FLOATING CARD
=========================================*/

.floating-card{

    position:absolute;

    left:-20px;

    bottom:35px;

    padding:22px 28px;

    border-radius:22px;

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

    backdrop-filter:blur(15px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.12);

}

.floating-card h3{

    margin:0 0 6px;

    font-size:28px;

    color:#0d5fff;

    font-weight:700;

}

.floating-card p{

    margin:0;

    color:#5f6d7b;

    font-size:15px;

    font-weight:500;

}
/*==================================================
  PART 6B-2
  CONTENT • TYPOGRAPHY • SYMPTOM CARDS • CTA
==================================================*/

/*=========================================
 CONTENT
=========================================*/

.intestinal-content{

    position:relative;

    z-index:2;

}

/*=========================================
 SECTION TAG
=========================================*/

.intestinal-content .section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(13,95,255,.08);

    color:#0d5fff;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:24px;

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

}

/*=========================================
 HEADING
=========================================*/

.intestinal-content h2{

    font-family:'Playfair Display',serif;

    font-size:54px;

    line-height:1.15;

    color:#071b35;

    margin-bottom:24px;

}

.intestinal-content h2 span{

    display:block;

    margin-top:10px;

    background:linear-gradient(
        90deg,
        #0d5fff,
        #00b4d8,
        #18c29c
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/*=========================================
 DESCRIPTION
=========================================*/

.intestinal-content p{

    font-size:17px;

    line-height:1.9;

    color:#5d6977;

    margin-bottom:34px;

}

/*=========================================
 SYMPTOM GRID
=========================================*/

.symptom-grid{

    display:grid;

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

    gap:18px;

    margin-bottom:42px;

}

.symptom-grid div{

    display:flex;

    align-items:center;

    padding:18px 20px;

    border-radius:18px;

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

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

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

    box-shadow:
        0 12px 28px rgba(0,0,0,.06);

    color:#071b35;

    font-size:15px;

    font-weight:600;

    transition:.35s ease;

}

.symptom-grid div:hover{

    transform:translateY(-6px);

    border-color:rgba(13,95,255,.18);

    box-shadow:
        0 18px 40px rgba(13,95,255,.12);

}

/*=========================================
 CTA BUTTON
=========================================*/

.intestinal-content .btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:60px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    color:#fff;

    background:linear-gradient(
        135deg,
        #0d5fff,
        #00b4d8
    );

    box-shadow:
        0 18px 45px rgba(13,95,255,.28);

    transition:.4s ease;

}

.intestinal-content .btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:
        0 28px 60px rgba(13,95,255,.38);

}
/*==================================================
  PART 6B-3
  ANIMATIONS • RESPONSIVE • FINAL POLISH
==================================================*/

/*=========================================
 GLASS SHINE ANIMATION
=========================================*/

@keyframes intestinalShine{

0%{

left:-45%;

}

100%{

left:145%;

}

}

/*=========================================
 FLOATING IMAGE ANIMATION
=========================================*/

.glass-box{

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

}

@keyframes intestinalFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/*=========================================
 FLOATING CARD ANIMATION
=========================================*/

.floating-card{

animation:cardFloat 4s ease-in-out infinite;

}

@keyframes cardFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

/*=========================================
 SECTION ENTRANCE
=========================================*/

.intestinal-image{

animation:intestinalFadeLeft .9s ease both;

}

.intestinal-content{

animation:intestinalFadeRight .9s ease .15s both;

}

@keyframes intestinalFadeLeft{

0%{

opacity:0;

transform:translateX(-50px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes intestinalFadeRight{

0%{

opacity:0;

transform:translateX(50px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

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

.glass-box{

transition:
transform .4s ease,
box-shadow .4s ease;

}

.glass-box:hover{

transform:translateY(-8px);

box-shadow:
0 35px 90px rgba(13,95,255,.18);

}

.glass-box:hover img{

transform:scale(1.04);

}

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

@media (max-width:1024px){

.intestinal-grid{

grid-template-columns:1fr;

gap:60px;

}

.intestinal-content{

text-align:center;

}

.intestinal-content h2{

font-size:42px;

}

.symptom-grid{

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

}

.glass-box{

margin:auto;

}

.floating-card{

left:20px;

bottom:20px;

}

}

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

@media (max-width:768px){

.intestinal-care{

padding:80px 20px;

}

.intestinal-content h2{

font-size:32px;

}

.intestinal-content p{

font-size:16px;

line-height:1.8;

}

.symptom-grid{

grid-template-columns:1fr;

gap:15px;

}

.symptom-grid div{

padding:16px;

font-size:15px;

}

.glass-box{

max-width:340px;

padding:14px;

}

.floating-card{

position:relative;

left:0;

bottom:0;

margin-top:20px;

display:inline-block;

}

.intestinal-content .btn-primary{

width:100%;

max-width:320px;

}

}

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

@media (max-width:480px){

.intestinal-content .section-tag{

font-size:13px;

padding:10px 18px;

}

.intestinal-content h2{

font-size:28px;

}

.glass-box{

max-width:280px;

border-radius:24px;

}

.glass-box img{

border-radius:18px;

}

.floating-card{

padding:18px 22px;

}

.floating-card h3{

font-size:22px;

}

.floating-card p{

font-size:14px;

}

}

/*=========================================
 ACCESSIBILITY
=========================================*/

.intestinal-content .btn-primary:focus{

outline:2px solid #0d5fff;

outline-offset:4px;

}

/*==================================================
 END OF PART 6 CSS
==================================================*//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-dc5b4cd *//*==================================================
  PART 7B-1
  WHY CHOOSE DR. SWAPNIL MUJAWDIYA
  SECTION • LAYOUT • GLASS CARDS
==================================================*/

/*=========================================
SECTION
=========================================*/

.why-choose{

    position:relative;

    padding:20px 7%;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #f8fcff 0%,
    #ffffff 100%);

}

/*=========================================
BACKGROUND GLOW
=========================================*/

.why-choose::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-150px;

    left:-120px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(13,95,255,.12),
    transparent 70%);

    filter:blur(50px);

}

.why-choose::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    bottom:-120px;

    right:-120px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(24,194,156,.12),
    transparent 70%);

    filter:blur(45px);

}

/*=========================================
CONTAINER
=========================================*/

.why-choose .container{

    max-width:1350px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*=========================================
SECTION HEADING
=========================================*/

.why-choose .section-heading{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}

.why-choose .section-subtitle{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(13,95,255,.08);

    color:#0d5fff;

    font-size:15px;

    font-weight:600;

    margin-bottom:20px;

    letter-spacing:.5px;

}

.why-choose .section-heading h2{

    font-family:'Playfair Display',serif;

    font-size:52px;

    color:#071b35;

    line-height:1.2;

    margin-bottom:20px;

}

.why-choose .section-heading h2 span{

    display:block;

    margin-top:10px;

    background:
    linear-gradient(
    90deg,
    #0d5fff,
    #00b4d8,
    #18c29c);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.why-choose .section-heading p{

    font-size:18px;

    line-height:1.9;

    color:#5d6977;

}

/*=========================================
GRID
=========================================*/

.choose-grid{

    display:grid;

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

    gap:30px;

}

/*=========================================
GLASS CARD
=========================================*/

.choose-card{

    position:relative;

    padding:38px;

    border-radius:30px;

    overflow:hidden;

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:
    0 20px 45px rgba(0,0,0,.08);

    transition:.45s ease;

}

/*=========================================
GLASS SHINE
=========================================*/

.choose-card::before{

    content:"";

    position:absolute;

    top:-140%;

    left:-30%;

    width:55%;

    height:320%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent);

    transform:rotate(25deg);

    transition:1s;

}

.choose-card:hover::before{

    left:150%;

}

/*=========================================
CARD HOVER
=========================================*/

.choose-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 30px 60px rgba(13,95,255,.16);

}
/*==================================================
  PART 7B-2
  ICONS • CONTENT • FEATURED CARD • HOVER EFFECTS
==================================================*/

/*=========================================
 ICON
=========================================*/

.choose-icon{

    position:relative;

    width:82px;

    height:82px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    border-radius:24px;

    background:
    linear-gradient(
    135deg,
    #0d5fff,
    #00b4d8,
    #18c29c);

    color:#fff;

    font-size:34px;

    overflow:hidden;

    box-shadow:
    0 18px 45px
    rgba(13,95,255,.25);

    transition:.45s ease;

}

/*=========================================
 ICON SHINE
=========================================*/

.choose-icon::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-30%;

    width:55%;

    height:300%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent);

    transform:rotate(25deg);

    transition:.8s;

}

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

    left:150%;

}

.choose-card:hover .choose-icon{

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

}

/*=========================================
 CARD TITLE
=========================================*/

.choose-card h3{

    font-size:25px;

    font-weight:700;

    line-height:1.35;

    color:#071b35;

    margin-bottom:18px;

    transition:.3s;

}

/*=========================================
 DESCRIPTION
=========================================*/

.choose-card p{

    font-size:16px;

    line-height:1.9;

    color:#5d6977;

    margin:0;

}

/*=========================================
 FEATURED CARD
=========================================*/

.choose-card.featured{

    background:
    linear-gradient(
    135deg,
    #0d5fff,
    #00b4d8);

    border:none;

    color:#fff;

}

.choose-card.featured h3{

    color:#fff;

}

.choose-card.featured p{

    color:
    rgba(255,255,255,.94);

}

.choose-card.featured .choose-icon{

    background:#fff;

    color:#0d5fff;

    box-shadow:
    0 18px 45px
    rgba(255,255,255,.25);

}

/*=========================================
 HOVER TEXT EFFECT
=========================================*/

.choose-card:hover h3{

    color:#0d5fff;

}

.choose-card.featured:hover h3{

    color:#ffffff;

}

/*=========================================
 SOFT GLOW
=========================================*/

.choose-card::after{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(13,95,255,.10),
    transparent 70%);

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.choose-card:hover::after{

    opacity:1;

}
/*==================================================
  PART 7B-3
  ANIMATIONS • RESPONSIVE • FINAL POLISH
==================================================*/

/*=========================================
 CARD ENTRANCE ANIMATION
=========================================*/

.choose-card{

    animation:chooseFadeUp .8s ease both;

}

.choose-card:nth-child(1){

    animation-delay:.05s;

}

.choose-card:nth-child(2){

    animation-delay:.15s;

}

.choose-card:nth-child(3){

    animation-delay:.25s;

}

.choose-card:nth-child(4){

    animation-delay:.35s;

}

.choose-card:nth-child(5){

    animation-delay:.45s;

}

.choose-card:nth-child(6){

    animation-delay:.55s;

}

@keyframes chooseFadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/*=========================================
 ICON FLOATING
=========================================*/

.choose-icon{

animation:chooseIconFloat 4s ease-in-out infinite;

}

@keyframes chooseIconFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}

/*=========================================
 FEATURED CARD GLOW
=========================================*/

.choose-card.featured{

position:relative;

overflow:hidden;

}

.choose-card.featured::after{

content:"";

position:absolute;

inset:-40%;

background:
radial-gradient(circle,
rgba(255,255,255,.12),
transparent 70%);

animation:featuredGlow 6s linear infinite;

pointer-events:none;

}

@keyframes featuredGlow{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

/*=========================================
 HOVER POLISH
=========================================*/

.choose-card{

transition:
transform .45s ease,
box-shadow .45s ease,
border-color .45s ease;

}

.choose-card:hover{

border-color:rgba(13,95,255,.18);

}

.choose-card:hover p{

color:#475569;

}

.choose-card.featured:hover p{

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

}

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

@media (max-width:1024px){

.choose-grid{

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

gap:24px;

}

.why-choose{

padding:90px 5%;

}

.why-choose .section-heading h2{

font-size:42px;

}

.choose-card{

padding:32px;

}

}

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

@media (max-width:768px){

.why-choose{

padding:80px 20px;

}

.choose-grid{

grid-template-columns:1fr;

gap:20px;

}

.why-choose .section-heading{

margin-bottom:50px;

}

.why-choose .section-heading h2{

font-size:32px;

}

.why-choose .section-heading p{

font-size:16px;

line-height:1.8;

}

.choose-card{

padding:28px;

border-radius:24px;

}

.choose-icon{

width:70px;

height:70px;

font-size:28px;

margin-bottom:20px;

}

.choose-card h3{

font-size:22px;

}

.choose-card p{

font-size:15px;

line-height:1.8;

}

}

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

@media (max-width:480px){

.why-choose .section-subtitle{

font-size:13px;

padding:10px 18px;

}

.why-choose .section-heading h2{

font-size:28px;

}

.choose-card{

padding:24px;

}

.choose-card h3{

font-size:20px;

}

.choose-card p{

font-size:14px;

}

}

/*=========================================
 REDUCE MOTION
=========================================*/

@media (prefers-reduced-motion:reduce){

.choose-card,
.choose-icon,
.choose-card::before,
.choose-card::after{

animation:none;

transition:none;

}

}

/*=========================================
 ACCESSIBILITY
=========================================*/

.choose-card:focus-within{

outline:2px solid #0d5fff;

outline-offset:4px;

}

/*==================================================
 END OF PART 7 CSS
==================================================*//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e32c377 *//*==================================================
  PART 9B-1
  SYMPTOMS WE TREAT
  SECTION • LAYOUT • GLASS CARDS
==================================================*/

/*=========================================
SECTION
=========================================*/

.symptoms-section{

    position:relative;

    padding:20px 7%;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #f6fbff 100%);

}

/*=========================================
BACKGROUND EFFECTS
=========================================*/

.symptoms-section::before{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(13,95,255,.10),
    transparent 70%);

    filter:blur(55px);

}

.symptoms-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-160px;

    bottom:-160px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(24,194,156,.10),
    transparent 70%);

    filter:blur(55px);

}

/*=========================================
CONTAINER
=========================================*/

.symptoms-section .container{

    max-width:1350px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*=========================================
SECTION HEADING
=========================================*/

.symptoms-section .section-heading{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}

.symptoms-section .section-subtitle{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(13,95,255,.08);

    color:#0d5fff;

    font-size:15px;

    font-weight:600;

    margin-bottom:20px;

    letter-spacing:.5px;

}

.symptoms-section .section-heading h2{

    font-family:'Playfair Display',serif;

    font-size:52px;

    line-height:1.2;

    color:#071b35;

    margin-bottom:20px;

}

.symptoms-section .section-heading h2 span{

    display:block;

    margin-top:10px;

    background:
    linear-gradient(
    90deg,
    #0d5fff,
    #00b4d8,
    #18c29c);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.symptoms-section .section-heading p{

    font-size:18px;

    line-height:1.9;

    color:#5d6977;

}

/*=========================================
GRID
=========================================*/

.symptoms-grid{

    display:grid;

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

    gap:28px;

}

/*=========================================
CARD
=========================================*/

.symptom-card{

    position:relative;

    padding:34px 28px;

    border-radius:28px;

    overflow:hidden;

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:
    0 20px 45px rgba(0,0,0,.08);

    transition:.45s ease;

}

/*=========================================
GLASS SHINE
=========================================*/

.symptom-card::before{

    content:"";

    position:absolute;

    top:-140%;

    left:-35%;

    width:55%;

    height:320%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent);

    transform:rotate(25deg);

    transition:1s;

}

.symptom-card:hover::before{

    left:150%;

}

/*=========================================
CARD HOVER
=========================================*/

.symptom-card:hover{

    transform:translateY(-12px);

    border-color:
    rgba(13,95,255,.15);

    box-shadow:
    0 30px 60px
    rgba(13,95,255,.16);

}
/*==================================================
  PART 9B-2
  ICONS • TYPOGRAPHY • FEATURED CARD • HOVER
==================================================*/

/*=========================================
 SYMPTOM ICON
=========================================*/

.symptom-icon{

    position:relative;

    width:78px;

    height:78px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    border-radius:22px;

    background:
    linear-gradient(
    135deg,
    #0d5fff,
    #00b4d8,
    #18c29c);

    color:#ffffff;

    font-size:32px;

    overflow:hidden;

    box-shadow:
    0 18px 40px
    rgba(13,95,255,.22);

    transition:
    transform .4s ease,
    box-shadow .4s ease;

}

/*=========================================
 ICON SHINE
=========================================*/

.symptom-icon::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-35%;

    width:55%;

    height:300%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent);

    transform:rotate(25deg);

    transition:.9s ease;

}

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

    left:150%;

}

.symptom-card:hover .symptom-icon{

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

}

/*=========================================
 CARD TITLE
=========================================*/

.symptom-card h3{

    font-family:'Playfair Display',serif;

    font-size:24px;

    font-weight:700;

    color:#071b35;

    margin:0 0 16px;

    line-height:1.3;

    transition:.35s ease;

}

/*=========================================
 DESCRIPTION
=========================================*/

.symptom-card p{

    margin:0;

    color:#5d6977;

    font-size:15px;

    line-height:1.85;

    transition:.35s ease;

}

/*=========================================
 FEATURED CARD
=========================================*/

.symptom-card.featured{

    background:
    linear-gradient(
    135deg,
    #0d5fff,
    #00b4d8);

    border:none;

}

.symptom-card.featured h3{

    color:#ffffff;

}

.symptom-card.featured p{

    color:
    rgba(255,255,255,.92);

}

.symptom-card.featured .symptom-icon{

    background:#ffffff;

    color:#0d5fff;

    box-shadow:
    0 18px 45px
    rgba(255,255,255,.22);

}

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

.symptom-card:hover h3{

    color:#0d5fff;

}

.symptom-card.featured:hover h3{

    color:#ffffff;

}

.symptom-card:hover p{

    color:#475569;

}

.symptom-card.featured:hover p{

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

}

/*=========================================
 SOFT GLOW
=========================================*/

.symptom-card::after{

    content:"";

    position:absolute;

    top:-100px;

    right:-100px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(13,95,255,.10),
    transparent 70%);

    opacity:0;

    transition:.45s ease;

    pointer-events:none;

}

.symptom-card:hover::after{

    opacity:1;

}
/*==================================================
  PART 9B-3
  ANIMATIONS • RESPONSIVE • FINAL POLISH
==================================================*/

/*=========================================
 CARD ENTRANCE ANIMATION
=========================================*/

.symptom-card{

    animation:symptomFadeUp .8s ease both;

}

.symptom-card:nth-child(1){animation-delay:.05s;}
.symptom-card:nth-child(2){animation-delay:.10s;}
.symptom-card:nth-child(3){animation-delay:.15s;}
.symptom-card:nth-child(4){animation-delay:.20s;}
.symptom-card:nth-child(5){animation-delay:.25s;}
.symptom-card:nth-child(6){animation-delay:.30s;}
.symptom-card:nth-child(7){animation-delay:.35s;}
.symptom-card:nth-child(8){animation-delay:.40s;}
.symptom-card:nth-child(9){animation-delay:.45s;}
.symptom-card:nth-child(10){animation-delay:.50s;}
.symptom-card:nth-child(11){animation-delay:.55s;}
.symptom-card:nth-child(12){animation-delay:.60s;}

@keyframes symptomFadeUp{

0%{

opacity:0;

transform:translateY(45px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/*=========================================
 FLOATING ICON
=========================================*/

.symptom-icon{

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

}

@keyframes iconFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}

/*=========================================
 FEATURED CARD GLOW
=========================================*/

.symptom-card.featured{

position:relative;

overflow:hidden;

}

.symptom-card.featured::after{

content:"";

position:absolute;

inset:-40%;

background:
radial-gradient(circle,
rgba(255,255,255,.12),
transparent 70%);

animation:featuredRotate 8s linear infinite;

pointer-events:none;

}

@keyframes featuredRotate{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

/*=========================================
 IMAGE / CARD POLISH
=========================================*/

.symptom-card{

transition:
transform .45s ease,
box-shadow .45s ease,
border-color .45s ease;

}

.symptom-card:hover{

border-color:rgba(13,95,255,.18);

}

.symptom-card:hover .symptom-icon{

box-shadow:
0 22px 50px rgba(13,95,255,.28);

}

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

@media (max-width:1024px){

.symptoms-section{

padding:100px 5%;

}

.symptoms-grid{

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

gap:24px;

}

.symptoms-section .section-heading{

margin-bottom:55px;

}

.symptoms-section .section-heading h2{

font-size:42px;

}

.symptom-card{

padding:30px;

}

}

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

@media (max-width:768px){

.symptoms-section{

padding:80px 20px;

}

.symptoms-grid{

grid-template-columns:1fr;

gap:20px;

}

.symptoms-section .section-heading h2{

font-size:32px;

}

.symptoms-section .section-heading p{

font-size:16px;

line-height:1.8;

}

.symptom-card{

padding:28px;

border-radius:24px;

}

.symptom-icon{

width:68px;

height:68px;

font-size:28px;

margin-bottom:20px;

}

.symptom-card h3{

font-size:22px;

}

.symptom-card p{

font-size:15px;

line-height:1.8;

}

}

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

@media (max-width:480px){

.symptoms-section .section-subtitle{

font-size:13px;

padding:10px 18px;

}

.symptoms-section .section-heading h2{

font-size:28px;

}

.symptom-card{

padding:24px;

}

.symptom-card h3{

font-size:20px;

}

.symptom-card p{

font-size:14px;

}

}

/*=========================================
 REDUCED MOTION
=========================================*/

@media (prefers-reduced-motion:reduce){

.symptom-card,
.symptom-icon,
.symptom-card::before,
.symptom-card::after{

animation:none;

transition:none;

}

}

/*=========================================
 ACCESSIBILITY
=========================================*/

.symptom-card:focus-within{

outline:2px solid #0d5fff;

outline-offset:4px;

}

/*==================================================
 END OF PART 9 CSS
==================================================*//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f80195e *//*==================================================
  PART 9B-1
  SYMPTOMS WE TREAT
  PREMIUM SWIPER DESIGN
==================================================*/

/*=========================================
SECTION
=========================================*/

.symptoms-slider-section{

    position:relative;

    padding:20px 7%;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #f5fbff 100%);

}

/*=========================================
BACKGROUND GLOW
=========================================*/

.symptoms-slider-section::before{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    top:-180px;

    left:-160px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(13,95,255,.12),
    transparent 70%);

    filter:blur(55px);

}

.symptoms-slider-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    bottom:-180px;

    right:-150px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(24,194,156,.10),
    transparent 70%);

    filter:blur(55px);

}

/*=========================================
CONTAINER
=========================================*/

.symptoms-slider-section .container{

    max-width:1380px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*=========================================
HEADING
=========================================*/

.symptoms-slider-section .section-heading{

    text-align:center;

    max-width:850px;

    margin:auto;

    margin-bottom:70px;

}

.symptoms-slider-section .section-subtitle{

    display:inline-block;

    padding:12px 26px;

    border-radius:50px;

    background:
    rgba(13,95,255,.08);

    color:#0d5fff;

    font-weight:600;

    font-size:15px;

    margin-bottom:20px;

}

.symptoms-slider-section h2{

    font-family:'Playfair Display',serif;

    font-size:54px;

    color:#071b35;

    line-height:1.2;

    margin-bottom:20px;

}

.symptoms-slider-section h2 span{

    display:block;

    margin-top:8px;

    background:
    linear-gradient(
    90deg,
    #0d5fff,
    #00b4d8,
    #18c29c);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.symptoms-slider-section p{

    font-size:17px;

    color:#5d6977;

    line-height:1.9;

}

/*=========================================
SWIPER
=========================================*/

.symptomsSwiper{

    padding:20px 8px 80px;

}

/*=========================================
CARD
=========================================*/

.symptom-card{

    position:relative;

    padding:38px 28px;

    border-radius:30px;

    text-align:center;

    overflow:hidden;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:
    0 18px 45px rgba(0,0,0,.08);

    transition:.45s;

}

/*=========================================
GLASS SHINE
=========================================*/

.symptom-card::before{

    content:"";

    position:absolute;

    top:-150%;

    left:-35%;

    width:55%;

    height:320%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent);

    transform:rotate(25deg);

    transition:1s;

}

.symptom-card:hover::before{

    left:160%;

}

/*=========================================
ICON
=========================================*/

.symptom-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:#fff;

    background:
    linear-gradient(
    135deg,
    #0d5fff,
    #00b4d8,
    #18c29c);

    box-shadow:
    0 18px 40px
    rgba(13,95,255,.25);

    transition:.4s;

}

.symptom-card:hover .symptom-icon{

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

}
/*==================================================
  PART 9B-2
  TYPOGRAPHY • HOVER • SWIPER UI • RESPONSIVE
==================================================*/

/*=========================================
 CARD TITLE
=========================================*/

.symptom-card h3{

    margin:0 0 14px;

    font-size:24px;

    font-weight:700;

    color:#071b35;

    line-height:1.3;

    transition:.35s ease;

}

/*=========================================
 DESCRIPTION
=========================================*/

.symptom-card p{

    margin:0;

    font-size:15px;

    line-height:1.8;

    color:#667085;

}

/*=========================================
 HOVER EFFECTS
=========================================*/

.symptom-card{

    transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-color .45s ease;

}

.symptom-card:hover{

    transform:translateY(-12px);

    border-color:
    rgba(13,95,255,.18);

    box-shadow:
    0 28px 60px
    rgba(13,95,255,.16);

}

.symptom-card:hover h3{

    color:#0d5fff;

}

/*=========================================
 ICON FLOAT
=========================================*/

.symptom-icon{

    animation:symptomFloat 4s ease-in-out infinite;

}

@keyframes symptomFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

/*=========================================
 SWIPER ARROWS
=========================================*/

.symptomsSwiper .swiper-button-next,
.symptomsSwiper .swiper-button-prev{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#ffffff;

    color:#0d5fff;

    box-shadow:
    0 15px 35px rgba(0,0,0,.12);

    transition:.35s ease;

}

.symptomsSwiper .swiper-button-next:hover,
.symptomsSwiper .swiper-button-prev:hover{

    background:
    linear-gradient(
    135deg,
    #0d5fff,
    #00b4d8);

    color:#fff;

    transform:scale(1.08);

}

.symptomsSwiper .swiper-button-next::after,
.symptomsSwiper .swiper-button-prev::after{

    font-size:18px;

    font-weight:700;

}

/*=========================================
 PAGINATION
=========================================*/

.symptomsSwiper .swiper-pagination{

    bottom:10px !important;

}

.symptomsSwiper .swiper-pagination-bullet{

    width:12px;

    height:12px;

    opacity:1;

    background:#cfd8e3;

    transition:.35s ease;

}

.symptomsSwiper .swiper-pagination-bullet-active{

    width:34px;

    border-radius:30px;

    background:
    linear-gradient(
    90deg,
    #0d5fff,
    #18c29c);

}

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

@media (max-width:1024px){

.symptoms-slider-section{

padding:90px 5%;

}

.symptoms-slider-section h2{

font-size:42px;

}

.symptom-card{

padding:32px 24px;

}

}

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

@media (max-width:768px){

.symptoms-slider-section{

padding:80px 20px;

}

.symptoms-slider-section .section-heading{

margin-bottom:50px;

}

.symptoms-slider-section h2{

font-size:32px;

}

.symptoms-slider-section p{

font-size:16px;

line-height:1.8;

}

.symptom-card{

padding:28px 20px;

border-radius:24px;

}

.symptom-card h3{

font-size:20px;

}

.symptom-card p{

font-size:14px;

}

.symptom-icon{

width:72px;

height:72px;

font-size:28px;

margin-bottom:20px;

}

.symptomsSwiper .swiper-button-next,
.symptomsSwiper .swiper-button-prev{

display:none;

}

}

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

@media (max-width:480px){

.symptoms-slider-section .section-subtitle{

font-size:13px;

padding:10px 18px;

}

.symptoms-slider-section h2{

font-size:28px;

}

.symptom-card{

padding:24px 18px;

}

.symptom-icon{

width:64px;

height:64px;

font-size:24px;

}

}

/*=========================================
 ACCESSIBILITY
=========================================*/

.symptomsSwiper .swiper-button-next:focus,
.symptomsSwiper .swiper-button-prev:focus{

outline:2px solid #0d5fff;

outline-offset:4px;

}

/*==================================================
 END OF PART 9 CSS
==================================================*//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c3c1859 *//*==================================================
  PART 10B-1
  PREMIUM FAQ
  SECTION • LAYOUT • GLASS ACCORDION
==================================================*/

/*=========================================
 SECTION
=========================================*/

.faq-section{

    position:relative;

    padding:20px 7%;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #f5fbff 100%);

}

/*=========================================
 BACKGROUND GLOW
=========================================*/

.faq-section::before{

    content:"";

    position:absolute;

    width:460px;

    height:460px;

    top:-180px;

    left:-160px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(13,95,255,.10),
    transparent 70%);

    filter:blur(55px);

}

.faq-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-160px;

    bottom:-180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(24,194,156,.10),
    transparent 70%);

    filter:blur(55px);

}

/*=========================================
 CONTAINER
=========================================*/

.faq-section .container{

    max-width:1150px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*=========================================
 SECTION HEADING
=========================================*/

.faq-section .section-heading{

    text-align:center;

    max-width:820px;

    margin:0 auto 70px;

}

.faq-section .section-subtitle{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(13,95,255,.08);

    color:#0d5fff;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:22px;

}

.faq-section .section-heading h2{

    font-family:'Playfair Display',serif;

    font-size:52px;

    line-height:1.2;

    color:#071b35;

    margin-bottom:22px;

}

.faq-section .section-heading h2 span{

    display:block;

    margin-top:10px;

    background:
    linear-gradient(
    90deg,
    #0d5fff,
    #00b4d8,
    #18c29c);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.faq-section .section-heading p{

    font-size:17px;

    line-height:1.9;

    color:#5d6977;

}

/*=========================================
 FAQ WRAPPER
=========================================*/

.faq-wrapper{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/*=========================================
 FAQ ITEM
=========================================*/

.faq-item{

    position:relative;

    overflow:hidden;

    border-radius:24px;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:
    0 18px 45px rgba(0,0,0,.08);

    transition:.4s ease;

}

/*=========================================
 GLASS SHINE
=========================================*/

.faq-item::before{

    content:"";

    position:absolute;

    top:-150%;

    left:-35%;

    width:55%;

    height:320%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent);

    transform:rotate(25deg);

    transition:1s;

}

.faq-item:hover::before{

    left:160%;

}

/*=========================================
 HOVER
=========================================*/

.faq-item:hover{

    transform:translateY(-5px);

    box-shadow:
    0 25px 60px
    rgba(13,95,255,.14);

}
/*==================================================
  PART 10B-2
  QUESTION • ANSWER • ACTIVE STATE • RESPONSIVE
==================================================*/

/*=========================================
 FAQ BUTTON
=========================================*/

.faq-question{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:28px 32px;

    background:transparent;

    border:none;

    outline:none;

    cursor:pointer;

    text-align:left;

}

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

.faq-question span{

    font-size:22px;

    font-weight:700;

    line-height:1.5;

    color:#071b35;

    transition:.35s ease;

}

/*=========================================
 ICON
=========================================*/

.faq-question i{

    width:52px;

    height:52px;

    min-width:52px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    color:#0d5fff;

    background:rgba(13,95,255,.08);

    transition:.35s ease;

}

/*=========================================
 ANSWER
=========================================*/

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:
    max-height .45s ease,
    padding .35s ease;

}

.faq-answer p{

    padding:0 32px 28px;

    margin:0;

    font-size:16px;

    line-height:1.9;

    color:#667085;

}

/*=========================================
 ACTIVE STATE
=========================================*/

.faq-item.active{

    border-color:rgba(13,95,255,.18);

    box-shadow:
    0 28px 60px
    rgba(13,95,255,.16);

}

.faq-item.active .faq-question span{

    color:#0d5fff;

}

.faq-item.active .faq-question i{

    color:#fff;

    background:linear-gradient(
        135deg,
        #0d5fff,
        #00b4d8);

    transform:rotate(45deg);

}

.faq-item.active .faq-answer{

    max-height:300px;

}

/*=========================================
 HOVER
=========================================*/

.faq-item:hover .faq-question span{

    color:#0d5fff;

}

.faq-item:hover .faq-question i{

    transform:scale(1.08);

}

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

@media (max-width:992px){

.faq-section{

padding:90px 5%;

}

.faq-section .section-heading h2{

font-size:42px;

}

.faq-question{

padding:24px 28px;

}

.faq-question span{

font-size:20px;

}

}

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

@media (max-width:768px){

.faq-section{

padding:80px 20px;

}

.faq-section .section-heading{

margin-bottom:50px;

}

.faq-section .section-heading h2{

font-size:32px;

}

.faq-section .section-heading p{

font-size:16px;

line-height:1.8;

}

.faq-question{

padding:22px;

gap:15px;

}

.faq-question span{

font-size:18px;

}

.faq-question i{

width:44px;

height:44px;

min-width:44px;

font-size:16px;

}

.faq-answer p{

padding:0 22px 22px;

font-size:15px;

}

}

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

@media (max-width:480px){

.faq-section .section-subtitle{

font-size:13px;

padding:10px 18px;

}

.faq-section .section-heading h2{

font-size:28px;

}

.faq-question span{

font-size:17px;

line-height:1.5;

}

.faq-answer p{

font-size:14px;

line-height:1.8;

}

}

/*=========================================
 ACCESSIBILITY
=========================================*/

.faq-question:focus{

outline:2px solid #0d5fff;

outline-offset:-2px;

border-radius:18px;

}

/*==================================================
 END OF PART 10 CSS
==================================================*//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b5dcbde *//*==================================================
  PART 11B-1
  PREMIUM CTA
  SECTION • LAYOUT • GLASS IMAGE
==================================================*/

/*=========================================
 SECTION
=========================================*/

.cta-section{

    position:relative;

    padding:130px 7%;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #0d5fff 0%,
        #0099ff 35%,
        #18c29c 70%,
        #0d5fff 100%
    );

    background-size:300% 300%;

    animation:ctaGradient 14s ease infinite;

}

/*=========================================
 ANIMATED BACKGROUND
=========================================*/

@keyframes ctaGradient{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

/*=========================================
 FLOATING SHAPES
=========================================*/

.cta-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(10px);

    opacity:.25;

    pointer-events:none;

}

.circle-1{

    width:280px;

    height:280px;

    top:-80px;

    left:-70px;

    background:#ffffff;

    animation:floatOne 9s ease-in-out infinite;

}

.circle-2{

    width:200px;

    height:200px;

    right:8%;

    top:20%;

    background:#8be8ff;

    animation:floatTwo 7s ease-in-out infinite;

}

.circle-3{

    width:340px;

    height:340px;

    right:-120px;

    bottom:-120px;

    background:#ffffff;

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

}

@keyframes floatOne{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(25px);

}

}

@keyframes floatTwo{

0%,100%{

transform:translate(-10px,0);

}

50%{

transform:translate(20px,-25px);

}

}

@keyframes floatThree{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-30px);

}

}

/*=========================================
 CONTAINER
=========================================*/

.cta-section .container{

    max-width:1350px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*=========================================
 GRID
=========================================*/

.cta-wrapper{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:70px;

    align-items:center;

}

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

.cta-image{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

/*=========================================
 GLASS CARD
=========================================*/

.doctor-glass{

    position:relative;

    width:100%;

    max-width:470px;

    padding:18px;

    border-radius:34px;

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

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

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

    box-shadow:
        0 30px 80px rgba(0,0,0,.18);

    overflow:hidden;

}

/*=========================================
 GLASS SHINE
=========================================*/

.doctor-glass::before{

    content:"";

    position:absolute;

    top:-140%;

    left:-35%;

    width:55%;

    height:320%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.40),
        transparent);

    transform:rotate(25deg);

    animation:glassShine 8s linear infinite;

}

@keyframes glassShine{

0%{

left:-45%;

}

100%{

left:150%;

}

}

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

.doctor-glass img{

    width:100%;

    display:block;

    border-radius:26px;

    object-fit:cover;

    transition:.45s ease;

}

.doctor-glass:hover img{

    transform:scale(1.04);

}

/*=========================================
 EXPERIENCE CARD
=========================================*/

.experience-card{

    position:absolute;

    left:-20px;

    bottom:35px;

    padding:22px 28px;

    border-radius:22px;

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

    backdrop-filter:blur(18px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.15);

}

.experience-card h3{

    margin:0 0 8px;

    color:#0d5fff;

    font-size:26px;

    font-weight:700;

}

.experience-card p{

    margin:0;

    color:#5f6d7b;

    font-size:15px;

    line-height:1.6;

}
/*==================================================
  PART 11B-2
  CONTENT • TYPOGRAPHY • GLOW BUTTONS
==================================================*/

/*=========================================
 CONTENT
=========================================*/

.cta-content{

    position:relative;

    z-index:2;

}

/*=========================================
 CTA TAG
=========================================*/

.cta-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

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

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

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

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:28px;

}

/*=========================================
 HEADING
=========================================*/

.cta-content h2{

    font-family:'Playfair Display',serif;

    font-size:62px;

    line-height:1.15;

    color:#ffffff;

    margin-bottom:24px;

}

.cta-content h2 span{

    display:block;

    margin-top:10px;

    color:#dff8ff;

}

/*=========================================
 DESCRIPTION
=========================================*/

.cta-content p{

    max-width:640px;

    font-size:18px;

    line-height:1.9;

    color:rgba(255,255,255,.92);

    margin-bottom:40px;

}

/*=========================================
 BUTTON WRAPPER
=========================================*/

.cta-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

/*=========================================
 COMMON BUTTON STYLE
=========================================*/

.cta-buttons a{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    border-radius:60px;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    overflow:hidden;

    transition:all .4s ease;

}

/*=========================================
 BOOK APPOINTMENT
=========================================*/

.btn-book{

    background:#ffffff;

    color:#0d5fff;

    box-shadow:
    0 18px 40px rgba(255,255,255,.30);

}

.btn-book:hover{

    transform:translateY(-8px);

    box-shadow:
    0 30px 60px rgba(255,255,255,.45);

}

/*=========================================
 WHATSAPP
=========================================*/

.btn-whatsapp{

    background:#25D366;

    color:#ffffff;

    box-shadow:
    0 18px 40px rgba(37,211,102,.35);

}

.btn-whatsapp:hover{

    transform:translateY(-8px);

    box-shadow:
    0 30px 60px rgba(37,211,102,.50);

}

/*=========================================
 CALL NOW
=========================================*/

.btn-call{

    background:transparent;

    color:#ffffff;

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

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

}

.btn-call:hover{

    background:#ffffff;

    color:#0d5fff;

    transform:translateY(-8px);

    border-color:#ffffff;

    box-shadow:
    0 25px 55px rgba(255,255,255,.30);

}

/*=========================================
 ICONS
=========================================*/

.cta-buttons i{

    font-size:18px;

    transition:.35s ease;

}

.cta-buttons a:hover i{

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

}

/*=========================================
 BUTTON GLOW EFFECT
=========================================*/

.cta-buttons a::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent);

    transform:skewX(-25deg);

    transition:.8s;

}

.cta-buttons a:hover::before{

    left:150%;

}
/*==================================================
  PART 11B-3
  ANIMATIONS • RESPONSIVE • FINAL POLISH
==================================================*/

/*=========================================
 CONTENT ENTRANCE
=========================================*/

.cta-content{

    animation:ctaContentFade 1s ease both;

}

.cta-image{

    animation:ctaImageFade 1s ease .2s both;

}

@keyframes ctaContentFade{

0%{

opacity:0;

transform:translateX(-60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes ctaImageFade{

0%{

opacity:0;

transform:translateX(60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

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

.doctor-glass{

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

}

@keyframes doctorFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-14px);

}

}

/*=========================================
 EXPERIENCE CARD FLOAT
=========================================*/

.experience-card{

animation:experienceFloat 4s ease-in-out infinite;

}

@keyframes experienceFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

/*=========================================
 BUTTON GLOW PULSE
=========================================*/

.btn-book,
.btn-whatsapp{

animation:buttonGlow 3s ease-in-out infinite;

}

@keyframes buttonGlow{

0%,100%{

box-shadow:
0 18px 40px rgba(255,255,255,.25);

}

50%{

box-shadow:
0 25px 65px rgba(255,255,255,.45);

}

}

/*=========================================
 CTA HOVER EFFECT
=========================================*/

.cta-wrapper:hover .doctor-glass{

box-shadow:
0 40px 90px rgba(0,0,0,.25);

}

.cta-wrapper:hover .experience-card{

transform:translateY(-10px);

}

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

@media (max-width:1024px){

.cta-section{

padding:100px 5%;

}

.cta-wrapper{

grid-template-columns:1fr;

gap:60px;

text-align:center;

}

.cta-content p{

margin-left:auto;

margin-right:auto;

}

.cta-buttons{

justify-content:center;

}

.cta-content h2{

font-size:48px;

}

.experience-card{

left:20px;

bottom:20px;

}

}

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

@media (max-width:768px){

.cta-section{

padding:80px 20px;

}

.cta-content h2{

font-size:34px;

}

.cta-content p{

font-size:16px;

line-height:1.8;

}

.cta-buttons{

flex-direction:column;

align-items:center;

}

.cta-buttons a{

width:100%;

max-width:320px;

}

.doctor-glass{

max-width:340px;

margin:auto;

}

.experience-card{

position:relative;

left:0;

bottom:0;

margin-top:20px;

display:inline-block;

}

.circle-1,
.circle-2,
.circle-3{

opacity:.15;

}

}

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

@media (max-width:480px){

.cta-tag{

font-size:13px;

padding:10px 18px;

}

.cta-content h2{

font-size:28px;

}

.doctor-glass{

max-width:280px;

padding:14px;

border-radius:24px;

}

.doctor-glass img{

border-radius:18px;

}

.experience-card{

padding:18px 20px;

}

.experience-card h3{

font-size:22px;

}

.experience-card p{

font-size:14px;

}

}

/*=========================================
 REDUCED MOTION
=========================================*/

@media (prefers-reduced-motion:reduce){

.cta-content,
.cta-image,
.doctor-glass,
.experience-card,
.btn-book,
.btn-whatsapp,
.circle-1,
.circle-2,
.circle-3{

animation:none;

transition:none;

}

}

/*=========================================
 ACCESSIBILITY
=========================================*/

.cta-buttons a:focus{

outline:2px solid #ffffff;

outline-offset:4px;

}

/*==================================================
 END OF PART 11 CSS
==================================================*//* End custom CSS */