/* @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200;800&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;400;600&family=Unbounded:wght@200;800&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Manrope:wght@200;400;600&family=Unbounded:wght@200;800&display=swap');
* {
    /* font-family: 'Raleway', sans-serif; */
    font-family: 'Manrope', sans-serif;
}
h1,h2,h3,h4,h5 {font-family: 'Unbounded', sans-serif;}
img {
    max-width: 100%;
}
.w600 {
    font-weight: 600;
}
.w900 {
    font-weight: 900;
}
.py-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}
#popup .menu-svg {
    display: flex;
    justify-content: center;
    height: 100px;
    margin-bottom: 30px;
    align-items: center;
}
.pmenu-list .btn {
    font-size: 2rem;
    margin-bottom: 20px;
}
#header {
    position: fixed;
    z-index: 99999;
    width: 100%;
    background: #FFF;
    box-shadow: 0 2px 6px -2px rgb(85, 85, 85, 0.22);
}
#header ul {
    margin-bottom: 0;
}
#header .logo-dt {
    margin-top: 5px;
    margin-bottom: 15px;
}
#header .callme {
    font-weight: 900;
    text-decoration: none;
    color: var(--ground-dark);
    font-size: 15px;
    font-family: 'Unbounded', sans-serif;
}
#main {
    position: relative;
    height: 100vh;
    margin-bottom: 100px;
    background: url('img/main.jpg') center center no-repeat;
    background-size: cover;
}
#main .offer-text {height: 100vh;}
#main h1 {
    font-weight: 900;
    font-size: 30px;
    color: #fff;
    text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
}
#submain h2 {font-size: 40px;}

.section-header {
    font-weight: 900;
    font-size: 35px;
    background-color: #2AA5A0;
    background-image: linear-gradient(90deg, #E3535D, #2AA5A0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
@media (min-width: 768px) {
    #main h1 {
        font-size: 50px;
    }
    .section-header {
        font-size: 60px;
    }
}
#intro .card-2 {margin-top: 54px;}
.dot {
    background: #ffe44d;
    width: 11px;
    height: 11px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px;
}
#cause .item {
    /* border: 2px solid #eee; */
    border-radius: 20px;
    padding: 20px;
    position: relative;
}
:root {
    --ring-op-1: 90%;
    --ring-op-2: 40%;
    --ring-op-3: 20%;
    --ring-op-4: 10%;
    --ring-color: 229 233 234;
    --ground-dark: #585640;
    --coral: #e35;
}
.coral {color: var(--coral);}
#cause .item-ring {
    --ring-width: 80px;
    content: "";
    position: absolute;
    width: var(--ring-width);
    height: var(--ring-width);
    border-radius: 20px;
    top: 62px;
    left: calc(50% - 40px);
    background: rgb(var(--ring-color) / var(--ring-op-1));
    outline: 25px solid rgb(var(--ring-color) / var(--ring-op-2));
    box-shadow: 0 0 0 55px rgb(var(--ring-color) / var(--ring-op-3)), 0 0 0 85px rgb(198 220 199 / var(--ring-op-4));
}
#cause .item-text {position: relative;}
#cause .item-text h4 {
    font-weight: bold;
    color: var(--ground-dark);
    text-shadow: 0 2px 1px #fff, 0 -2px 1px #fff, 2px 0 1px #fff, -2px 0px 1px #fff;
}
#cause img {max-width: 80px;position: relative;z-index: 2;}
#cause .item.ny .item-ring {--ring-color: 198 220 199;}
#cause .item.hb {--ring-color: 240 224 230;}
#cause .item.out {--ring-color: 237 230 207;}
#cause .item.wed {--ring-color: 209 225 235;}
#cause .item.bir {--ring-color: 214 230 229;}
#cause .item.any {--ring-color: 246 218 218;}
#cause .formats span {
    display: inline-block;
    background: linear-gradient(45deg, #ffcb00, #ffe44d);
    padding: 8px 15px;
    border-radius: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
}

#programs .item .hat {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
}
#programs .title {
    padding: 20px;
}
#programs .item .options {
    background-color: #fff;
    border-radius: 20px;
    padding: 10px;
}
#programs .title h5 {
    font-size: 1rem;
}
@media (min-width: 768px) {
    #programs .title h5 {font-size: 1.25rem;}
}
#programs .title.pooh {background: linear-gradient(90deg, #eeefa0, #eeefa0, #ffcdaa);}
#programs .title.mermaid {
    background: linear-gradient(180deg, #6ed6ea, #4ad3d2, #00a2aa);
    color: #fff;
}
#programs .title.elza {
    background: linear-gradient(90deg, #007fbe, #006dae, #00a0f0);
    color: #fff;
}
#programs .title.lbug {
    background: linear-gradient(90deg, #5c2b7e, #5c2b7e, #f60211);
    color: #fff;
}
#programs .title.aladdin {
    background: linear-gradient(90deg, #f7f372, #f59e2f, #f6a602);
}
#programs .title.barby {
    background: linear-gradient(90deg, #95dade, #ffa6c5, #ff086a);
    color: #fff;
}
#programs .title.wednesday {
    background: linear-gradient(90deg, #db2cf2, #c1d1eb, #010010);
    color: #fff;
}
#programs .title.dogs {
    background: linear-gradient(90deg, #25a9f0, #92b5db, #1b61eb);
    color: #fff;
}
#programs .title.unicorn {
    background: linear-gradient(90deg, #3dc4ef, #e792d2, #e35ca9);
}
#programs .title.potter {
    background: linear-gradient(90deg, #f1bb6c, #b1754b, #8a370c);
    color: #fff;
}
#programs .title.pyjamas {
    background: linear-gradient(90deg, #e9d2c0, #e5a6a7, #e1af8d);
    color: #fff;
}
#programs .title.blog {
    background: linear-gradient(90deg, #e99d6e, #e9b752, #ffdf30);
}
#programs .title.cats {
    background: linear-gradient(90deg, #ebe4e3, #ffcf01, #b23b06);
}
#programs .title.brawl {
    background: linear-gradient(90deg, #e92440, #ffcf01, #1996b7);
    color: #fff;
}
#programs .title.robot {
    background: linear-gradient(90deg, #f0e5f9, #f4f7f8, #1386d0);
}
#programs .title.hero {
    background: linear-gradient(90deg, #c84463, #833c55, #480d1c);
    color: #fff;
}

#programs .item .hat .title img {
    width: 20px;
    margin-right: 15px;
}
#programs .item {
    padding: 10px;
    background: #f1f5f6;
    border-radius: 25px;
}
#programs .item .more {
    background: #fff;
    border-radius: 20px;
    padding: 10px;
    font-size: 20px;
    box-shadow: 0 2px 8px -4px rgb(51 51 51 / 22%);
    color: #037374;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
}
#programs .item .opts img {
    width: 20px;
    margin-right: 5px;
}
.photo-title {
    position: relative;
    margin-bottom: 18px;
}
#addons .item h5 {
    position: absolute;
    left: 18px;
    bottom: 18px;
    color: #fff;
    font-weight: bold;
    font-size: 25px;
    text-shadow: 0 0 10px #062032
    /* text-shadow: 0 2px 1px #fff, 0 -2px 1px #fff, 2px 0 1px #fff, -2px 0px 1px #fff; */
}
#addons .item h5.dark {color: #212529;}
#addons .item h5.coral {color: var(--coral);}
#addons .item img {border-radius: 20px;}
#addons .item.outlined {
    padding: 20px;
    border: 10px solid #eea;
    border: 10px solid #ffe44d;
}
#meal {
    /* background: linear-gradient(180deg, transparent, #eea, transparent); */
    background: url('img/meal-bg.png') 34% 50% no-repeat;
}
#meal .section-header-meal {
    font-weight: 900;
    font-size: 40px;
    color: #e35;
}
@media (min-width: 768px) {
    #meal .section-header-meal {
        font-size: 60px;
    }
}
#meal .item {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px -4px #24241b69;
    position: relative;
}
#meal .desc {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 15px 0;
    background: linear-gradient(360deg, #2f2f2f, transparent);
    color: #fff;
    font-weight: 900;
    font-size: 17px;
    margin: 0;
    text-align: center;
    width: 100%;
}
#meal .desc-out {
    font-weight: 900;
    font-size: 17px;
}
#meal .item-white {
    background-color: #fff;
    padding: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px -4px #baba8b59;
}
#meal .item-white h5 {line-height: 1.8rem;}
#meal .item-white > * {margin: 0;}
.order-prog, #order #form button.submit {
    background: #ffd20d;
    border: none;
    padding: 10px 30px;
    border-radius: 10px;
    box-shadow: 0 2px 0 0 #ecc106;
    text-decoration: none;
    color: #111;
    font-weight: 900;
}
#order #form button.submit:disabled {opacity: 0.5;}
#about .about {
    position: relative;
    overflow: hidden;
    background: linear-gradient(142deg, #00ffff, #ff1e82, #ffa100);
    background: linear-gradient(142deg, #f9b296, #ff1e67, #ffa100);
    padding: 60px;
    padding-top: 100px;
    border-radius: 100px;
    color: #fff;
}
#about .about::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 150%;
    background-color: #ffffff24;
    border-radius: 300px 400px;
    box-shadow: -60px 5px 3px 0 #ffffff0f;
    right: -70%;
    bottom: 0%;
}
#about .star {
    position: absolute;
    left: calc(50% - 120px);
    top: -100px;
    z-index: 9;
}
#about .item {
    background: #f1f5f6;
    padding: 20px;
    border-radius: 40px;
}
#about .item img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
#about .resp span {
    display: inline-block;
    background: #fff;
    padding: 8px 15px;
    border-radius: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px -6px #33333369;
}
#about .quote, #feedback .quote, #popup .quote {
    background: #fff;
    padding: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    font-family: 'Caveat', cursive;
    font-family: 'Caveat', cursive;
    font-size: 22px;
    line-height: 24px;
}
#about .quote .quotemark, #feedback .quotemark {
    text-align: center;
    font-size: 120px;
    margin: 0;
    line-height: 30px;
    color: #f9b296;
}
#price .item {
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 30px;
}
#price .item .title-box {
    padding: 20px;
    text-align: center;
}
#price .item .title-box.price-1 {background: linear-gradient(45deg, #FFC107, #f7ff05);}
#price .item .title-box.price-2 {background: linear-gradient(45deg, #2196F3, #22f1ff);}
#price .item .title-box.price-3 {background: linear-gradient(45deg, #fd1fb3, #ffe007);}
#price .item .title {
    font-weight: bold;
    color: #fff;
    margin: 0;
}
#price .item .desc {
    background: #f1f5f6;
    padding: 20px;
}
#price .dark .item .desc {
    background: #273033;
    color: #fff;
}
#price .item .desc li {
    padding-left: 26px;
    position: relative;
    margin-bottom: 10px;
}
#price .item .desc li:last-child {margin-bottom: 0;}
#price .item .desc li::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
    top: 3px;
    background: url('img/check.png') no-repeat;
    background-size: contain;
}
#order {
    background: linear-gradient(180deg, transparent, #eea, transparent);
    background: linear-gradient(180deg, transparent, #ffffcc, transparent);
}
#order #form {
    background-color: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
#order #form .ermes {
    display: none;
    background: #ec192e;
    margin-bottom: 10px;
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    text-align: center;
}
#order #form .oke {font-weight: bold;text-align: center;color: #08a12f;}
#order #form .ermes.show {display: block;}
#order #form .form-row {margin-bottom: 14px;}
#order #form .form-row:last-child {margin-bottom: 0px;}
#order #form input.input {
    width: 100%;
    padding: 8px;
    background: #f1f5f6;
    border: none;
    border-radius: 8px;
}
#order #form input.error {outline: 2px solid #f63b16;}
#order #form input.input:focus {outline: 2px solid #68d0ff;}
#order #form .policy span {
    font-size: 12px;
    color: #779;
}
#order #form .policy input {
    margin-top: 2px;
    margin-right: 6px;
}
#skills .item {
    margin-top: 100px;
    margin-bottom: 100px;
}
#skills img {border-radius: 40px;}
#skills .photo {position: relative;}
#skills .skill-1 {transform: rotate(3deg);}
#skills .skill-2 {transform: rotate(-3deg);}
#skills .photo::before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: -6px;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    scale: 1.04;
    border: 4px solid #fee275;
    transform: rotate(-6deg);
    opacity: 0.8;
}
#skills .photo.skill-2::before {
    border-color: #fdbdff;
    transform: rotate(5deg);
    left: 6px;
}
#skills .title {
    font-weight: bold;
    color: var(--ground-dark);
    margin-bottom: 1.5rem;
}
#feedback .item, .feedback-popup {
    background-color: #fff;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    border-radius: 30px;
    padding: 20px;
}
#feedback .item .quote {padding-top: 0;}
#feedback .video {
    position: relative;
    background-color: #dce5ea;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
}
#feedback .play-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#feedback .video .play {
    width: 20%;
}
#feedback .author {
    display: flex;
    align-items: center;
    padding: 0 20px;
}
#feedback .author img {
    width: 20%;
    border-radius: 50%;
    margin-right: 20px;
    outline: 4px solid #7d8e9733;
}
#feedback .author .name {
    color: #8b979e;
}
#feedback .author .role {font-size: 14px;}
.readmore {
    background: #3792ed;
    color: #fff;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 40px;
    margin-bottom: 20px;
    cursor: pointer;
}
#photos {padding-bottom: 0;}
#footer {
    background: #e9e3e7;
    padding-top: 50px;
    padding-bottom: 100px;
    color: #345;
}
#footer a {color: #ca1c5d;}
#footer .dev img {
    width: 80px;
    margin-left: 5px;
}
#footer .copy {
    border-top: 2px solid #d9d3d7;
    padding-top: 20px;
    color: #837f85;
    font-size: 14px;
}
#popup {
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background: transparent;
    backdrop-filter: blur(10px);
    z-index: 99999;
    width: 100%;
    height: 100%;
    height: 100vh;
    display: none;
}
#popup.show {display: flex;}
#popup .item {
    width: 100%;
    position: relative;
    display: none;
}
#popup .item.show {display: block;}
#popup .pmenu {
    width: 100%;
    height: 100vh;
    background: linear-gradient(0deg, rgb(250 157 144 / 83%), #E3535D)  ;
}
#popup .prog-popup {
    background-color: #fff;
    padding: 50px 40px 20px 40px;
    border-radius: 20px;
    height: 100vh;
}
#popup .prog-popup .text {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
}
#popup .prog-popup .text img {border-radius: 50%;}
@media (min-width: 768px) {
    #popup .item:not(.pmenu) {
        width: 800px;
    }
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.close-btn svg {
    width: 20px;
    height: 20px;
    color: #456;
}
.slider-container {
    overflow: hidden;
    user-select: none;
}
.slider-container .slides {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    left: 0;
    transition: all 0.2s ease-in;
}
.slider-container .slide {
    position: relative;
}
.slider-container .controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 25px;
}
.slider-container .slider-btn {
    padding: 0px 20px 4px 20px;
    background-color: rgb(216, 228, 237);
    color: #345;
    border-radius: 100px;
    font-size: 30px;
    font-weight: 900;
    cursor: pointer;
}
.slider-container .slider-btn:hover {background-color: rgb(203, 223, 238);}
.slider-container .slider-btn:active {background-color: rgb(170, 185, 196);}
.slider-container .slide-box img {
    border-radius: 20px;
    margin-bottom: 20px;
}
.slider-container .slide-box .title {font-weight: 600;}
.slider-container .slide-box .title.abs {
    position: absolute;
    bottom: 12px;
    color: #fff;
    text-shadow: 0 0 6px #404030;
    text-align: center;
    width: 100%;
    background: rgb(238 68 153 / 69%);
    padding: 6px 10px;
    border-radius: 20px;
}
#newyear {
    padding: 150px 0;
}
.nyteam {
    border-radius: 60px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 70px -20px #8dd5ff;
}
.play-btn {
    position: absolute;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background-color: #fff;
    border-radius: 50%;
    left: calc(50% - 50px);
    bottom: calc(37% - 50px);
}
.snowflake {
    position: absolute;
    left: -22px;
    bottom: -67px;
    width: 30%;
    rotate: -15deg;
}
#shorts .item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}