.elementor-1487 .elementor-element.elementor-element-aa9dce3{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-55acb25 *//*==============================
GOOGLE FONT
==============================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

body{
    font-family:'Poppins',sans-serif;
}

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

.foam-package-section{
    background:#2200b8;
    padding:80px 20px;
}

.foam-package-wrapper{
    max-width:1000px;
    margin:auto;
}

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

.foam-package-heading{
    text-align:center;
    margin-bottom:50px;
}

.foam-package-heading h2{
    display:inline-block;
    background:linear-gradient(90deg,#3eb8ff,#4ba8ff);
    color:#fff;
    padding:18px 45px;
    border-radius:15px;
    font-size:34px;
    font-weight:800;
    text-transform:uppercase;
    box-shadow:0 15px 30px rgba(0,0,0,.20);
}

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

.foam-package-card{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:25px;

    background:linear-gradient(90deg,#11b5ff,#0b8ff5);

    border:3px solid #48d0ff;

    border-radius:20px;

    padding:28px;

    margin-bottom:30px;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 18px 35px rgba(0,0,0,.20);

}

.foam-package-card:hover{

    transform:translateY(-8px);

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

}

/* dashed border */

.foam-package-card:after{

    content:"";

    position:absolute;

    left:10px;

    right:10px;

    top:10px;

    bottom:10px;

    border:2px dashed rgba(255,255,255,.35);

    border-radius:15px;

    pointer-events:none;

}

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

.foam-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    z-index:2;

}

.foam-icon img{

    width:38px;

}

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

.foam-content{

    flex:1;

    z-index:2;

}

.foam-step{

    display:inline-block;

    background:#fff;

    color:#1b91ff;

    padding:6px 15px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    margin-bottom:12px;

}

.foam-content h3{

    color:#fff;

    font-size:28px;

    margin-bottom:18px;

    font-weight:700;

}

.foam-content ul{

    list-style:none;

    margin-bottom:25px;

}

.foam-content ul li{

    color:#fff;

    padding:7px 0;

    font-size:16px;

    position:relative;

    padding-left:24px;

}

.foam-content ul li:before{

    content:"●";

    position:absolute;

    left:0;

    color:#fff;

}

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

.foam-btn{

    display:inline-block;

    background:linear-gradient(90deg,#39b6ff,#8be85b);

    color:#fff;

    text-decoration:none;

    padding:14px 34px;

    border-radius:12px;

    font-weight:700;

    transition:.3s;

}

.foam-btn:hover{

    transform:translateY(-3px);

}

/*==============================
BALLOONS
==============================*/

.foam-balloons{

    position:absolute;

    right:15px;

    bottom:10px;

    z-index:1;

}

.foam-balloons img{

    width:90px;

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

}

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

@keyframes balloon{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }

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

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

body{
    font-family:'Poppins',sans-serif;
}

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

.foam-package-section{
    background:#2200b8;
    padding:80px 20px;
}

.foam-package-wrapper{
    max-width:1000px;
    margin:auto;
}

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

.foam-package-heading{
    text-align:center;
    margin-bottom:50px;
}

.foam-package-heading h2{
    display:inline-block;
    background:linear-gradient(90deg,#3eb8ff,#4ba8ff);
    color:#fff;
    padding:18px 45px;
    border-radius:15px;
    font-size:34px;
    font-weight:800;
    text-transform:uppercase;
    box-shadow:0 15px 30px rgba(0,0,0,.20);
}

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

.foam-package-card{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:25px;

    background:linear-gradient(90deg,#11b5ff,#0b8ff5);

    border:3px solid #48d0ff;

    border-radius:20px;

    padding:28px;

    margin-bottom:30px;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 18px 35px rgba(0,0,0,.20);

}

.foam-package-card:hover{

    transform:translateY(-8px);

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

}

/* dashed border */

.foam-package-card:after{

    content:"";

    position:absolute;

    left:10px;

    right:10px;

    top:10px;

    bottom:10px;

    border:2px dashed rgba(255,255,255,.35);

    border-radius:15px;

    pointer-events:none;

}

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

.foam-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    z-index:2;

}

.foam-icon img{

    width:38px;

}

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

.foam-content{

    flex:1;

    z-index:2;

}

.foam-step{

    display:inline-block;

    background:#fff;

    color:#1b91ff;

    padding:6px 15px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    margin-bottom:12px;

}

.foam-content h3{

    color:#fff;

    font-size:28px;

    margin-bottom:18px;

    font-weight:700;

}

.foam-content ul{

    list-style:none;

    margin-bottom:25px;

}

.foam-content ul li{

    color:#fff;

    padding:7px 0;

    font-size:16px;

    position:relative;

    padding-left:24px;

}

.foam-content ul li:before{

    content:"●";

    position:absolute;

    left:0;

    color:#fff;

}

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

.foam-btn{

    display:inline-block;

    background:linear-gradient(90deg,#39b6ff,#8be85b);

    color:#fff;

    text-decoration:none;

    padding:14px 34px;

    border-radius:12px;

    font-weight:700;

    transition:.3s;

}

.foam-btn:hover{

    transform:translateY(-3px);

}

/*==============================
BALLOONS
==============================*/

.foam-balloons{

    position:absolute;

    right:15px;

    bottom:10px;

    z-index:1;

}

.foam-balloons img{

    width:90px;

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

}

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

@keyframes balloon{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }

}
/*=====================================
PART 4 - FINAL PREMIUM DESIGN
======================================*/

/* Water Bubble Background */
.foam-package-section{
    position:relative;
    overflow:hidden;
}

.foam-package-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.08) 0 35px, transparent 36px),
        radial-gradient(circle at 80% 30%, rgba(255,255,255,.06) 0 25px, transparent 26px),
        radial-gradient(circle at 30% 70%, rgba(255,255,255,.05) 0 40px, transparent 41px),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,.07) 0 28px, transparent 29px);
    pointer-events:none;
}

/* Card Shine */
.foam-package-card::before{
    content:"";
    position:absolute;
    left:-120%;
    top:0;
    width:60%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );
    transform:skewX(-25deg);
    transition:1s;
}

.foam-package-card:hover::before{
    left:160%;
}

/* Better Gradient */
.foam-package-card{

    background:linear-gradient(
        135deg,
        #1bc4ff 0%,
        #129df8 45%,
        #0d82ef 100%
    );

}

/* Strong Border */
.foam-package-card{

    border:3px solid #47d5ff;

}

/* Better Icon */
.foam-icon{

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

    box-shadow:
        0 15px 30px rgba(0,0,0,.18),
        inset 0 0 10px rgba(0,0,0,.05);

}

/* Better Heading */

.foam-content h3{

    text-shadow:
        0 2px 5px rgba(0,0,0,.18);

}

/* Better List */

.foam-content ul li{

    line-height:1.9;

}

/* Better Button */

.foam-btn{

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

}

.foam-btn:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 35px rgba(0,0,0,.28);

}

/* Floating Balloons */

.foam-balloons{

    opacity:.95;

}

.foam-balloons img{

    filter:drop-shadow(0 10px 15px rgba(0,0,0,.15));

}

/* Floating Bubble Elements */

.foam-package-card span.circle1,
.foam-package-card span.circle2,
.foam-package-card span.circle3{

    position:absolute;

    border-radius:50%;

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

}

.circle1{

    width:18px;

    height:18px;

    right:105px;

    top:25px;

}

.circle2{

    width:10px;

    height:10px;

    right:135px;

    bottom:45px;

}

.circle3{

    width:25px;

    height:25px;

    right:75px;

    bottom:20px;

}/* End custom CSS */