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

*:not(i) {font-family: "Poppins", sans-serif;}
.chobi-landing-page img {max-width: 100%}

.chobi-landing-page {font-size: 16px;}
.landing-title {font-size: 54px; font-weight: 600; color: #fff;}
.landing-title strong {font-weight: 600}

.chobi-landing-page .container {max-width: 1340px; padding: 0 20px;}


.hum-menu-icon span {width: 26px; height: 2px; background: #fff; border-radius: 3px}

.close-menu-icon {position: absolute; right: 30px; top: 45px}
.close-menu-icon span {display: block; width: 26px; height: 2px; background: #000; border-radius: 3px}
.close-menu-icon span:nth-child(1) {transform: rotate(45deg); position: relative; top: 2px}
.close-menu-icon span:nth-child(2) {transform: rotate(-45deg)}


.chobi-landing-page .site-header {position: absolute; left: 0; top: 0; width: 100%; padding: 20px 0; z-index: 2;}
.chobi-landing-page .site-header .header-holder {display: flex; align-items: center; justify-content: space-between;}
.chobi-landing-page .site-header .logo img {width: 130px}
.chobi-landing-page .site-header ul {display: flex; align-items: center; grid-gap: 35px; list-style: none; margin: 0;}
.chobi-landing-page .site-header a {position: relative; text-decoration: none; color: #fff}
.chobi-landing-page .site-header ul a::after {content: ''; position: absolute; left: 0; right: 0; width: 0; margin: auto; height: 2px; bottom: -8px; background: #ff7954; transition: all .3s ease;} 
.chobi-landing-page .site-header a:hover::after {width: 100%}
.chobi-landing-page .site-header a.active {font-weight: 500}

.app-icons {display: flex; align-items: center; grid-gap: 15px; margin: 40px 0 0;}
.app-icons a {padding: 7px 12px; background: #fff; border-radius: 8px;}

.chobi-landing-page .main-section {position: relative; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 25s ease infinite; padding: 180px 0 0; color: #fff; overflow: hidden;}
.chobi-landing-page .main-section > div {position: relative; z-index: 1;}
.chobi-landing-page .main-section .section-holder {display:grid; grid-template-columns: 500px 1fr; grid-gap: 50px; align-items: center; justify-content: space-between;}
.chobi-landing-page .main-section .landing-title {margin: 0 0 30px;}
.chobi-landing-page .main-section p {margin: 0 0 15px}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.main-section .main-img {animation: move 3s ease infinite;}
@keyframes move {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(40px);
    }            
    0% {
        transform: translateY(0px);
    }
}

.challenges-section {position: relative; background: #122268; padding: 80px 0; overflow: hidden;}
.challenges-section:before {content: ''; position: absolute; left: -50px; top: 0; width: 340px; height: 340px; border-radius: 100%; background: #42cbcf; opacity: .16; filter: blur(94px)}
.challenges-section .landing-title {margin: 0 0 50px}
.challenges-section .chln-img {margin: auto; margin-bottom: -200px; max-width: 900px}

.animated-score--bar {position: relative; background: #ff7954; padding: 6px 24px; display: flex; align-items: center; justify-content: space-between; margin-top: 200px}
.animated-score--bar:before {content: ''; animation: widthmore 10s ease infinite; background: #03e8de; position: absolute; left: 0; top: 0; width: 40%; height: 100%;}
.animated-score--bar span {position: relative; z-index: 1; font-size: 40px; line-height: 1; font-weight: 600; color: #fff;}
.animated-score--bar .text-dark {position: relative; font-size: 0;}
.animated-score--bar .text-dark:before {content: '40'; animation: textcount 10s infinite; display: block; font-size: 40px;}
.animated-score--bar .fire {position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; width: 30%}
.animated-score--bar .love {position: absolute; right: 0; bottom: 10px;}
.animated-score--bar .fire-icon {position: absolute; left: 50%; top: -18px; z-index: 1; width: 70px; transform: rotate(90deg) translateY(20px); animation: imgmoveleft 10s ease infinite; transition: all .3s ease;}

@keyframes textcount {
    0% {
        content: '40';
    }
    10% {
        content: '42';
    }
    20% {
        content: '44';
    }
    30% {
        content: '46';
    }
    40% {
        content: '48';
    }
    50% {
        content: '50';
    }
    60% {
        content: '48';
    }
    70% {
        content: '46';
    }
    80% {
        content: '44';
    }
    90% {
        content: '42';
    }
    100% {
        content: '40';
    }
}

@keyframes widthmore {
    0% {
        width: 40%;
    }
    10% {
        width: 42%;
    }
    20% {
        width: 44%;
    }
    30% {
        width: 46%;
    }
    40% {
        width: 48%;
    }
    50% {
        width: 50%;
    }
    60% {
        width: 48%;
    }
    70% {
        width: 46%;
    }
    80% {
        width: 44%;
    }
    90% {
        width: 42%;
    }
    100% {
        width: 40%;
    }
}

@keyframes imgmoveleft {
    0% {
        left: 40%;
    }
    10% {
        left: 42%;
    }
    20% {
        left: 44%;
    }
    30% {
        left: 46%;
    }
    40% {
        left: 48%;
    }
    50% {
        left: 50%;
    }
    60% {
        left: 48%;
    }
    70% {
        left: 46%;
    }
    80% {
        left: 44%;
    }
    90% {
        left: 42%;
    }
    100% {
        left: 40%;
    }
}


.animated-gifts {position: relative; padding: 80px 0 0; background: linear-gradient(45deg, #d42a54, #f9883d); overflow: hidden;}
.animated-gifts:before {content: ''; position: absolute; right: -50px; top: 0; width: 340px; height: 340px; border-radius: 100%; background: #42cbcf; opacity: .11; filter: blur(94px)}
.animated-gifts .landing-title {margin: 0 0 60px}
.animated-gifts .challenges-img {margin: 0 auto -10px; max-width: 900px;}
.animated-gifts .container {position: relative; z-index: 1;}

.pyro {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.pyro > .before,
.pyro > .after {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
-moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
-moz-animation-delay: 1.25s, 1.25s, 1.25s;
-webkit-animation-delay: 1.25s, 1.25s, 1.25s;
-o-animation-delay: 1.25s, 1.25s, 1.25s;
-ms-animation-delay: 1.25s, 1.25s, 1.25s;
animation-delay: 1.25s, 1.25s, 1.25s;
-moz-animation-duration: 1.25s, 1.25s, 6.25s;
-webkit-animation-duration: 1.25s, 1.25s, 6.25s;
-o-animation-duration: 1.25s, 1.25s, 6.25s;
-ms-animation-duration: 1.25s, 1.25s, 6.25s;
animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
to {
    box-shadow: 12px -384.6666666667px #003cff, -49px -393.6666666667px #9100ff, 235px -151.6666666667px #ff00f2, 129px 55.3333333333px #00ff4d, 10px -353.6666666667px #ffdd00, -26px -82.6666666667px #ffc800, 96px 9.3333333333px aqua, -126px -178.6666666667px #ff0026, -244px -285.6666666667px #ff0091, -190px -327.6666666667px #0026ff, -126px -219.6666666667px #ffaa00, -31px -87.6666666667px #8c00ff, 23px -11.6666666667px #c400ff, -77px -342.6666666667px #fff700, -19px -209.6666666667px #ea00ff, -43px -66.6666666667px #a2ff00, -23px -63.6666666667px #00e1ff, 73px -58.6666666667px #003cff, -37px -75.6666666667px #002bff, 92px -166.6666666667px #00ff2f, 41px -263.6666666667px #5e00ff, -144px -349.6666666667px #a2ff00, -46px -23.6666666667px #007bff, -1px 9.3333333333px #04ff00, -29px 21.3333333333px #66ff00, 65px -307.6666666667px #33ff00, -238px -301.6666666667px #0091ff, 173px -281.6666666667px #ff006f, -14px -32.6666666667px #0dff00, -33px 66.3333333333px #4800ff, 185px -142.6666666667px #ff005e, 123px -131.6666666667px #7b00ff, -115px -133.6666666667px #00fffb, -249px -317.6666666667px #ff0062, -177px 30.3333333333px #ff00ea, 247px -244.6666666667px #1aff00, 202px 39.3333333333px #002fff, -146px -398.6666666667px #001eff, -102px -286.6666666667px #00ff9d, 125px -168.6666666667px #6600ff, 220px -276.6666666667px #0900ff, 113px -280.6666666667px #00e1ff, -73px -399.6666666667px #95ff00, 152px -74.6666666667px #ff00dd, 168px -370.6666666667px #ff0088, 178px 49.3333333333px #00ff59, 156px -84.6666666667px #00ffc8, 201px -331.6666666667px #00a2ff, -108px -339.6666666667px #d500ff, -157px -7.6666666667px #ff0015, -134px -34.6666666667px #ff0055;
}
}
@-moz-keyframes bang {
to {
    box-shadow: 12px -384.6666666667px #003cff, -49px -393.6666666667px #9100ff, 235px -151.6666666667px #ff00f2, 129px 55.3333333333px #00ff4d, 10px -353.6666666667px #ffdd00, -26px -82.6666666667px #ffc800, 96px 9.3333333333px aqua, -126px -178.6666666667px #ff0026, -244px -285.6666666667px #ff0091, -190px -327.6666666667px #0026ff, -126px -219.6666666667px #ffaa00, -31px -87.6666666667px #8c00ff, 23px -11.6666666667px #c400ff, -77px -342.6666666667px #fff700, -19px -209.6666666667px #ea00ff, -43px -66.6666666667px #a2ff00, -23px -63.6666666667px #00e1ff, 73px -58.6666666667px #003cff, -37px -75.6666666667px #002bff, 92px -166.6666666667px #00ff2f, 41px -263.6666666667px #5e00ff, -144px -349.6666666667px #a2ff00, -46px -23.6666666667px #007bff, -1px 9.3333333333px #04ff00, -29px 21.3333333333px #66ff00, 65px -307.6666666667px #33ff00, -238px -301.6666666667px #0091ff, 173px -281.6666666667px #ff006f, -14px -32.6666666667px #0dff00, -33px 66.3333333333px #4800ff, 185px -142.6666666667px #ff005e, 123px -131.6666666667px #7b00ff, -115px -133.6666666667px #00fffb, -249px -317.6666666667px #ff0062, -177px 30.3333333333px #ff00ea, 247px -244.6666666667px #1aff00, 202px 39.3333333333px #002fff, -146px -398.6666666667px #001eff, -102px -286.6666666667px #00ff9d, 125px -168.6666666667px #6600ff, 220px -276.6666666667px #0900ff, 113px -280.6666666667px #00e1ff, -73px -399.6666666667px #95ff00, 152px -74.6666666667px #ff00dd, 168px -370.6666666667px #ff0088, 178px 49.3333333333px #00ff59, 156px -84.6666666667px #00ffc8, 201px -331.6666666667px #00a2ff, -108px -339.6666666667px #d500ff, -157px -7.6666666667px #ff0015, -134px -34.6666666667px #ff0055;
}
}
@-o-keyframes bang {
to {
    box-shadow: 12px -384.6666666667px #003cff, -49px -393.6666666667px #9100ff, 235px -151.6666666667px #ff00f2, 129px 55.3333333333px #00ff4d, 10px -353.6666666667px #ffdd00, -26px -82.6666666667px #ffc800, 96px 9.3333333333px aqua, -126px -178.6666666667px #ff0026, -244px -285.6666666667px #ff0091, -190px -327.6666666667px #0026ff, -126px -219.6666666667px #ffaa00, -31px -87.6666666667px #8c00ff, 23px -11.6666666667px #c400ff, -77px -342.6666666667px #fff700, -19px -209.6666666667px #ea00ff, -43px -66.6666666667px #a2ff00, -23px -63.6666666667px #00e1ff, 73px -58.6666666667px #003cff, -37px -75.6666666667px #002bff, 92px -166.6666666667px #00ff2f, 41px -263.6666666667px #5e00ff, -144px -349.6666666667px #a2ff00, -46px -23.6666666667px #007bff, -1px 9.3333333333px #04ff00, -29px 21.3333333333px #66ff00, 65px -307.6666666667px #33ff00, -238px -301.6666666667px #0091ff, 173px -281.6666666667px #ff006f, -14px -32.6666666667px #0dff00, -33px 66.3333333333px #4800ff, 185px -142.6666666667px #ff005e, 123px -131.6666666667px #7b00ff, -115px -133.6666666667px #00fffb, -249px -317.6666666667px #ff0062, -177px 30.3333333333px #ff00ea, 247px -244.6666666667px #1aff00, 202px 39.3333333333px #002fff, -146px -398.6666666667px #001eff, -102px -286.6666666667px #00ff9d, 125px -168.6666666667px #6600ff, 220px -276.6666666667px #0900ff, 113px -280.6666666667px #00e1ff, -73px -399.6666666667px #95ff00, 152px -74.6666666667px #ff00dd, 168px -370.6666666667px #ff0088, 178px 49.3333333333px #00ff59, 156px -84.6666666667px #00ffc8, 201px -331.6666666667px #00a2ff, -108px -339.6666666667px #d500ff, -157px -7.6666666667px #ff0015, -134px -34.6666666667px #ff0055;
}
}
@-ms-keyframes bang {
to {
    box-shadow: 12px -384.6666666667px #003cff, -49px -393.6666666667px #9100ff, 235px -151.6666666667px #ff00f2, 129px 55.3333333333px #00ff4d, 10px -353.6666666667px #ffdd00, -26px -82.6666666667px #ffc800, 96px 9.3333333333px aqua, -126px -178.6666666667px #ff0026, -244px -285.6666666667px #ff0091, -190px -327.6666666667px #0026ff, -126px -219.6666666667px #ffaa00, -31px -87.6666666667px #8c00ff, 23px -11.6666666667px #c400ff, -77px -342.6666666667px #fff700, -19px -209.6666666667px #ea00ff, -43px -66.6666666667px #a2ff00, -23px -63.6666666667px #00e1ff, 73px -58.6666666667px #003cff, -37px -75.6666666667px #002bff, 92px -166.6666666667px #00ff2f, 41px -263.6666666667px #5e00ff, -144px -349.6666666667px #a2ff00, -46px -23.6666666667px #007bff, -1px 9.3333333333px #04ff00, -29px 21.3333333333px #66ff00, 65px -307.6666666667px #33ff00, -238px -301.6666666667px #0091ff, 173px -281.6666666667px #ff006f, -14px -32.6666666667px #0dff00, -33px 66.3333333333px #4800ff, 185px -142.6666666667px #ff005e, 123px -131.6666666667px #7b00ff, -115px -133.6666666667px #00fffb, -249px -317.6666666667px #ff0062, -177px 30.3333333333px #ff00ea, 247px -244.6666666667px #1aff00, 202px 39.3333333333px #002fff, -146px -398.6666666667px #001eff, -102px -286.6666666667px #00ff9d, 125px -168.6666666667px #6600ff, 220px -276.6666666667px #0900ff, 113px -280.6666666667px #00e1ff, -73px -399.6666666667px #95ff00, 152px -74.6666666667px #ff00dd, 168px -370.6666666667px #ff0088, 178px 49.3333333333px #00ff59, 156px -84.6666666667px #00ffc8, 201px -331.6666666667px #00a2ff, -108px -339.6666666667px #d500ff, -157px -7.6666666667px #ff0015, -134px -34.6666666667px #ff0055;
}
}
@keyframes bang {
to {
    box-shadow: 12px -384.6666666667px #003cff, -49px -393.6666666667px #9100ff, 235px -151.6666666667px #ff00f2, 129px 55.3333333333px #00ff4d, 10px -353.6666666667px #ffdd00, -26px -82.6666666667px #ffc800, 96px 9.3333333333px aqua, -126px -178.6666666667px #ff0026, -244px -285.6666666667px #ff0091, -190px -327.6666666667px #0026ff, -126px -219.6666666667px #ffaa00, -31px -87.6666666667px #8c00ff, 23px -11.6666666667px #c400ff, -77px -342.6666666667px #fff700, -19px -209.6666666667px #ea00ff, -43px -66.6666666667px #a2ff00, -23px -63.6666666667px #00e1ff, 73px -58.6666666667px #003cff, -37px -75.6666666667px #002bff, 92px -166.6666666667px #00ff2f, 41px -263.6666666667px #5e00ff, -144px -349.6666666667px #a2ff00, -46px -23.6666666667px #007bff, -1px 9.3333333333px #04ff00, -29px 21.3333333333px #66ff00, 65px -307.6666666667px #33ff00, -238px -301.6666666667px #0091ff, 173px -281.6666666667px #ff006f, -14px -32.6666666667px #0dff00, -33px 66.3333333333px #4800ff, 185px -142.6666666667px #ff005e, 123px -131.6666666667px #7b00ff, -115px -133.6666666667px #00fffb, -249px -317.6666666667px #ff0062, -177px 30.3333333333px #ff00ea, 247px -244.6666666667px #1aff00, 202px 39.3333333333px #002fff, -146px -398.6666666667px #001eff, -102px -286.6666666667px #00ff9d, 125px -168.6666666667px #6600ff, 220px -276.6666666667px #0900ff, 113px -280.6666666667px #00e1ff, -73px -399.6666666667px #95ff00, 152px -74.6666666667px #ff00dd, 168px -370.6666666667px #ff0088, 178px 49.3333333333px #00ff59, 156px -84.6666666667px #00ffc8, 201px -331.6666666667px #00a2ff, -108px -339.6666666667px #d500ff, -157px -7.6666666667px #ff0015, -134px -34.6666666667px #ff0055;
}
}
@-webkit-keyframes gravity {
to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
}
}
@-moz-keyframes gravity {
to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
}
}
@-o-keyframes gravity {
to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
}
}
@-ms-keyframes gravity {
to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
}
}
@keyframes gravity {
to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
}
}
@-webkit-keyframes position {
0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
}
20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
}
40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
}
60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
}
80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
}
}
@-moz-keyframes position {
0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
}
20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
}
40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
}
60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
}
80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
}
}
@-o-keyframes position {
0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
}
20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
}
40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
}
60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
}
80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
}
}
@-ms-keyframes position {
0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
}
20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
}
40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
}
60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
}
80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
}
}
@keyframes position {
0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
}
20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
}
40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
}
60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
}
80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
}
}


.share-the-noise {position: relative; background: #122268; padding: 80px 0 0; overflow: hidden;}
.share-the-noise:before {content: ''; position: absolute; right: 0px; top: 0; width: 100%; height: 100%; background: url('../images/bg-banner-dot.png'); opacity: .3;}
.share-the-noise:after {content: ''; position: absolute; right: -50px; top: 0; width: 340px; height: 340px; border-radius: 100%; background: #42cbcf; opacity: .11; filter: blur(94px)}
.share-the-noise .landing-title {margin: 0 0 80px}
.share-the-noise .challenges-img {margin: 0 auto -10px; max-width: 800px; animation: move 3s ease infinite;}
.share-the-noise .container {position: relative; z-index: 1;}

.download-the-app {background: linear-gradient(45deg, #d42a54, #f9883d); color: #fff; min-height: 500px; display: flex; align-items: center; overflow: hidden;}
.download-the-app .content-holder {padding: 20px 0 0}
.download-the-app .content-holder .row {align-items: center}
.download-the-app .content-holder .landing-title {margin: 0 0 30px; font-weight: 600}
.download-the-app .content-holder p {margin: 0 0 50px}

.chobi-landing {padding: 80px 0; overflow-x: hidden;}
.chobi-landing .landing-title {margin: 0 0 40px; color: #000; font-weight: 600}

.contact-us {position: relative; background: #122268; color: #fff; padding: 60px 0; overflow: hidden;}
.contact-us:before {content: ''; position: absolute; left: -50px; top: 0; width: 340px; height: 340px; border-radius: 100%; background: #42cbcf; opacity: .1; filter: blur(94px)}
.contact-us .form-group {margin: 0 0 20px}
.contact-us .form-group .form-label {margin: 0 0 6px}
.contact-us .form-control {border-radius: 24px; padding: 12px 20px; box-shadow: none; outline: none; border: 2px solid transparent}
.contact-us .form-control:focus {border-color: #d42a54}
.contact-us  .btn-primary {padding:14px 46px; border-radius: 30px; height: auto; background: #ff7954; border-color:#ff7954}
.contact-us  .btn-primary:hover {background: #d42a54; border-color: #f9883d}
.contact-us textarea {resize: none}

.landing-footer {position: relative; background: #1f1f1f; color: #fff; padding: 60px 0; overflow: hidden;}
/* .landing-footer:before {content: ''; position: absolute; left: -50px; top: 0; width: 340px; height: 340px; border-radius: 100%; background: #42cbcf; opacity: 0.02; filter: blur(94px)} */
.landing-footer .logo img {max-width: 120px}
.landing-footer ul {list-style: none; padding: 0 !important; margin: 0 !important;}
.landing-footer ul a {margin: 0; padding: 4px 0 !important; font-weight: 300}
.landing-footer ul a:hover {color: #ff7954 !important;}
.landing-footer h4 {margin: 0 0 20px; font-size: 20px}

.detail-banner-wrapper {padding: 150px 0 70px; background: #122268 url('../images/pp-bg.png') no-repeat; background-size: cover}
#page-content-wrapper {margin-bottom: 40px;}

@media screen and (max-width: 1550px) {
    .chobi-landing-page {
        font-size: 14px;
    }

    .landing-title {
        font-size: 44px;
    }

    .chobi-landing-page .container {max-width: 100%; padding: 0 140px}

    .chobi-landing-page .site-header .logo img {width: 110px;}
    .chobi-landing-page .site-header ul {grid-gap: 25px;}

    .chobi-landing-page .main-section {padding-top: 120px}
}

@media screen and (max-width: 1280px) {
    .chobi-landing-page .container {padding: 0 80px}
}


@media screen and (max-width: 1100px) {

    .landing-title {
        font-size: 36px;
    }

    .chobi-landing-page .container { padding: 0 40px}

    .chobi-landing-page .site-header .logo img {width:90px;}

    .animated-gifts .landing-title {margin: 0 0 40px}
    .challenges-section .chln-img {max-width: 100%}


}


@media screen and (max-width: 991px) {

    .chobi-landing-page .main-section .section-holder {grid-template-columns: auto; text-align: center}
    .chobi-landing-page .main-section .section-holder .landing-title {margin: 0 0 20px}
    .chobi-landing-page .main-section .section-holder br {display: none}
    .chobi-landing-page .main-section .section-holder p {max-width: 60%; margin: auto}
    .chobi-landing-page .main-img {max-width: 50%; margin: auto;}

    .contact-us,
    .landing-footer,
    .chobi-landing,
    .challenges-section {padding: 40px 0}

    
    .share-the-noise, 
    .animated-gifts {padding: 40px 0 0}
    
    .download-the-app {min-height: auto; padding: 50px 0; text-align: center;}
    .download-the-app .app-icons {justify-content: center}


    .share-the-noise .challenges-img,
    .animated-gifts .challenges-img {max-width: 100%}

}


@media screen and (max-width: 767px) {

    .chobi-landing-page .container { padding: 0 20px}

    .landing-title {
        font-size: 30px;
    }

    .chobi-landing-page .site-header ul {display: block; position: fixed; left: 0; top: 0; padding: 60px 30px 20px; background: rgba(255, 255, 255, .9); min-height: 100vh; width: 100%; transition: all .3s ease; transform: translateX(-100%)}
    .chobi-landing-page .site-header li:not(:last-child) {margin: 0 0 20px}
    .chobi-landing-page .site-header a {color: #000}

    .active--left-menu {overflow: hidden}
    .active--left-menu .site-header ul {transform: translateX(0%)}

    .chobi-landing-page .main-section .section-holder p {max-width: 100%}
    .chobi-landing-page .main-img {max-width: 90%}

    .animated-score--bar .text-dark:before,
    .animated-score--bar span {font-size: 24px}
    .animated-score--bar .fire-icon {width: 50px; top: -13px}

    .chobi-landing-page br {display: none}

    .download-the-app .content-holder {padding: 0}

}


@media screen and (max-width: 480px) {
    .animated-score--bar .fire {bottom: 25px}

    .animated-score--bar .love {width: 100px}
}


/* delete-account */

.delete-account.chobi-landing-page .site-header {position: relative; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);}

.delete-account.chobi-landing-page .landing-title,
.delete-account.chobi-landing-page .site-header a {color: #000;}

.delete-account.chobi-landing-page .request-page {padding: 60px 0;}

.delete-account h1 {font-size: 44px; font-weight: 600; color: #000;}
.delete-account p {color: #6f6f6f;}
.delete-account form {max-width: 650px; margin: 70px auto;}
.delete-account form .form-group {margin: 0 0 24px;}
.delete-account form .form-control {padding: 15px 20px; border-radius: 8px; box-shadow: none !important; outline: none; border-color: #ccc !important;}
.delete-account form .form-control:focus,
.delete-account form .form-control:active,
.delete-account form .form-control:active {border-color: #ec6133;}
.delete-account form .form-label {font-size: 16px;font-weight: 500; display: flex; align-items: center; grid-gap: 2px;}
.delete-account form .btn {min-width: 100%; min-height: 60px; border-radius: 8px; background: #ec6133 !important; border-color: #ec6133; box-shadow: none;}
.delete-account form .btn:hover {background: #e05628 !important;}
.delete-account .require {color: #ff0015;}

@media screen and (max-width: 767px) {
    .delete-account h1 {font-size: 30px;}
}