@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
/* Root  */
:root{
    --main-font: "Bagel Fat One", system-ui;
    --regular: "Oswald", sans-serif;
    --color1: #1E5BB9;
    --color2: #FEBD19;
    --color3: #FEF3B3;
    --bg: #FFFAE0;
    --gray: #F5F5F5!important;
    --dark-text: #8C8C8C;
    --white: #fff;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: var(--regular)!important;
    background-color: var(--bg)!important;
    color: #000;
    overflow-x: hidden;
}
.cap {
    text-transform: uppercase;
}
.container-box{
    max-width: 1300px;
    margin: 0 auto;
}
section{
    padding: 80px 5vw 80px 5vw;
    position: relative;
}
.theme-btn{
    background-color: var(--color1);
    font-family: var(--regular);
    color: var(--color3)!important;
    padding: 13px 30px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    text-transform: uppercase;
    border-radius: 40px;
    height: fit-content;
    width: fit-content;
    transition: .3s;;
}
.theme-btn img{
    position: absolute;
    width: 93px;
    bottom: -36px;
    right: 19px;
    transition: .3s;
}
.theme-btn:hover img{
    filter: brightness(0.7);
}
.theme-btn:hover{
    background-color: #164081;
}
.secondary-btn{
    background-color: var(--color2);
    font-family: var(--regular);
    color: #ffffff !important;
    padding: 13px 30px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    text-transform: uppercase;
    border-radius: 40px;
    height: fit-content;
    width: fit-content;
    cursor: pointer;
    transition: .3s;
}
.secondary-btn:hover{
    background-color:#f09823;
}
h2.text-h2{
    font-family: var(--main-font);
    font-size: 80px;
    color: var(--color1);
    line-height: 80px;
    margin-bottom: 0;
}
.display-flex{
    display: flex;
    gap: 12px;
    justify-content: center;
}
nav{
    width: fit-content;
    margin: auto;
}
.navbar-brand {
    display: none!important;
}
.navbar-nav{
    gap: 20px;
}
.navbar-nav li a{
    font-size: 16px;
    color: var(--color1);
    font-weight: 400;
    text-transform: uppercase;
}
.navbar{
    position: absolute!important;
    left: 50%;
    transform: translate(-50%, 20px);
}
.container-box{
    max-width: 1260px;
    margin: auto;
}
/* End of Root */

/* Header */
.header-box{
    height: 100%;
    position: relative;
    background: var(--color1);
    padding: 18px;
    overflow: hidden;
}
.header-bg{
    background: url(images/yellow-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    border-radius: 30px;
}
.header-logo{
    width: fit-content;
    margin: 0px auto 0 auto;
}
.header-logo img{
    width: 1000px;
    margin: auto;
    display: block;
    padding-top: 66px;
}
.header-main h2{
    font-family: var(--regular);
    color: var(--color1);
    font-size: 17px;
    font-weight: 500;
    text-transform: uppercase;
}
.header-logo h2{
    text-align: right;
    padding-top: 13px;
    padding-right: 2px;
}
.image-one{
    position: absolute;
    width: 190px;
    top: -19px;
    z-index: 999;
    left: -102px;
}
.image-two{
    position: absolute;
    width: 170px;
    top: 235px;
    z-index: 999;
    right: -58px;
}
.image-three {
    position: absolute;
    width: 186px;
    bottom: 50px;
    z-index: 999;
    right: 11%;
}
.image-four{
    position: absolute;
    width: 270px;
    bottom: -21px;
    z-index: 999;
    left: -130px;
}
.big-icecream{
    position: relative;
    width: fit-content;
    margin: auto;
    z-index: 2;
}
.big-icecream img.img-cone-1{
    width: 400px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: -107px;
}
.big-icecream .img-cone-2{
    width: 180px;
    position: absolute;
    top: 25px;
    left: 86px;
    transform: rotate(62deg);
    filter: blur(2px);
}
.big-icecream .img-cone-3{
    width: 150px;
    position: absolute;
    top: 285px;
    right: 42px;
}
.group-img{
    position: relative;
}
.group-left{
    display: flex;
    gap: 51px;
    width: fit-content;
    position: absolute;
    top: 48%;
    left: 7%;
}
.group-left h2{
    margin-bottom: 0;
    width: 128px;
    line-height: normal;
    margin-top: 30px;
}
.group-left .scoops-img{
    width: 121px;
    top: -53px;
    position: absolute;
    left: 8px;
    z-index: 3;
}
.group-left .d3-img{
    width: 38px;
    position: absolute;
    left: 70px;
    top: 11px;
    z-index: 2;
}
.group-left .cone-img{
    width: 87px;
    position: relative;
    left: 36px;
    z-index: 1;
}
.group-right .scoops-img {
    width: 94px;
    position: absolute;
    z-index: 3;
    top: -46px;
}
.group-right .d3-img {
    width: 38px;
    position: absolute;
    z-index: 2;
    right: -70px;
    top: 26px;
}
.group-right .cone-img {
    width: 106px;
    position: absolute;
    z-index: 1;
    right: -83px;
}
.group-right{
    display: flex;
    gap: 24px;
    width: fit-content;
    position: absolute;
    top: 43%;
    right: 17%;
}
.group-right h2{
    width: 192px;
    text-align: right;
    line-height: unset;
    margin-bottom: 20px;
}
.group-right .g-grid{
    display: block;
}
.g-grid .theme-btn{
    display: block;
    float: right;
}
.header-footer h3{
    font-family: var(--regular);
    color: var(--color3);
    font-weight: 400;
    font-size: 48px;
    padding-top: 36px;
    padding-bottom: 25px;
    margin-bottom: 0;
}
.header-footer {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 100s linear infinite;
}
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
.marquee-text img{
    width: 100px;
}
.bubble-div{
    background: var(--bg);
}
.bubble-header{
    width: 100%;
}
/* End of Header */

/* About Us */
#about-us {
    margin-bottom: 25px;
}
.about-content p{
    font-size: 20px;
    font-family: var(--regular);
    font-weight: 400;
    color: var(--color1);
    text-align: center;
    width: 750px;
    margin: auto;
}
.about-content{
    display: grid;
    gap: 44px;
    text-align: center;
}
/* End of About Us */

/* Services */
#services{
    background: var(--color1);
}
.s-melt-1{
    position: absolute;
    top: -48px;
    left: 31px;
    width: 119px;
}
.s-melt-2{
    position: absolute;
    width: 166px;
    bottom: -65px;
    right: 40px;
}
.services-grid{
    display: grid;
    grid-template-columns: 1.1fr 1.3fr 1fr;
}
.services-grid h2.text-h2{
    color: var(--color3);
    position: relative;
}
.services-grid h2.text-h2 span{
    display: block;
}
.services-grid h2.text-h2 img{
    position: absolute;
    width: 31px;
    left: 48px;
    top: 15px;
}
.services-grid p{
    font-size: 20px;
    font-family: var(--regular);
    font-weight: 400;
    color: #fef3b2;
    margin-bottom: 0;
}
.content-left{
    display: grid;
    grid-gap: 31px;
}
.content-left a{
    width: fit-content;
}
.img-center{
    position: relative;
    display: grid;
}
.img-center .img-big{
    width: 385px;
    border-radius: 12px;
    margin: auto;
    display: block;
}
.img-center .img-van{
    position: absolute;
    width: 160px;
    bottom: -30px;
    left: -25px;
}
.service-list{
    position: relative;
}
.service-list .img-cone-1{
    position: absolute;
    width: 160px;
    left: -43px;
}
.service-list .img-cone-2{
    position: absolute;
    width: 127px;
    z-index: 2;
    right: 5px;
    bottom: -31px;
    transform: rotate(16deg);
}
.service-list-content{
    position: relative;
    left: 10px;
}
.list-bg{
    width: 340px;
}
.s-list{
    position: absolute;
    top: 111px;
    left: 64px;
    transform: rotate(8deg);
    text-align: center;
    list-style: none;
}
.s-list li{
    font-size: 22px;
    color: var(--color1);
    font-weight: 400;
    font-family: var(--regular);
    line-height: 36px;
}
/* End of Services */

/* Products */
#products h2{
    text-align: center;
}
.products-nav{
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
    width: 65%;
    justify-content: center;
    margin: 50px auto;
    list-style: none;
}
.products-nav .secondary-btn{
    padding: 12px 22px;
}
.products-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    margin-bottom: 40px;
    margin-top: 65px;
}
.product-item {
    border: 1px solid var(--color1);
    border-radius: 10px;
    padding: 11px;
    position: relative;
}
.product-item img{
    width: 100%;
}
.product-bottom{
    display: grid;
    justify-content: space-between;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    grid-template-columns: 1fr;
    align-items: end;
    padding-right: 30px;

}
.product-item h4{
    font-family: var(--regular);
    color: var(--color1);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 0;
    line-height: 22px;
}
.product-item h4.price{
    text-align: right;
}
.product-item h5{
    position: absolute;
    top: 10px;
    left: 10px;
    margin-bottom: 0;
    background: var(--color2);
    font-family: var(--main-font);
    color: var(--white);
    border-radius: 20px;
    padding: 2px 11px;
    font-size: 16px;
    text-transform: uppercase;
}
.load-more{
    display: block;
    margin: auto;
}
.product-item{
    transition: all .3s ease;
    display:none;
}

.product-item[data-category="soft"]{
    display:block;
}
.product-item .price{
    display: none;
}
.secondary-btn.active{
    background: #f09823;
}
/* End of Products */

/* Gallery */
#gallery{
    padding-top: 0;
    padding-bottom: 100px;
}
#gallery h2{
    text-align: center;
}
.gallery-box{
    position: relative;
}
.g-img1, .g-img2, .g-img3, .g-img4, .g-img5{
    width: 100%;
}
.gallery-box h5{
    font-family: var(--regular);
    font-size: 13px;
    font-weight: 500;
    color: var(--color1);
    text-transform: uppercase;
    position: absolute;
}
.gallery-box h5.text-1{
    width: 150px;
    bottom: -2px;
    left: 346px;
    transform: rotate(6deg);
}
.gallery-box h5.text-2{
    width: 70px;
    top: -13px;
    right: 305px;
    transform: rotate(5deg);
}
#gallery .theme-btn{
    margin: 30px auto 0 auto;
    display: block;
}
.gallery-img{
    width: 970px;
    margin: 80px auto 0 auto;
    display: block;
}
.g-van{
    width: 137px;
    position: absolute;
    right: 117px;
    bottom: 14px;
}
.ice-cup{
    width: 133px;
    position: absolute;
    bottom: 30px;
    left: 100px;
}
.ice-map{
    width: 123px;
    position: absolute;
    top: -26px;
    right: 387px;
}
.gallery-mob{
    display: none;
}
/* End of Gallery */

/* Footer */
#footer{
    background-image: url(images/footer-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.footer-top{
    width: 100%;
}
.footer-img-1{
    width: 247px;
    position: absolute;
    left: -42px;
    top: -155px;
    transform: rotate(27deg);
}
.footer-img-2{
    position: absolute;
    right: 0;
    width: 282px;
    top: -152px;
}
.wheel{
    width: 160px;
    position: absolute;
    animation: spin 5s linear infinite;
}
@keyframes spin {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
.wheel-1{
    bottom: 23px;
    left: 5vw;
}
.wheel-2{
    bottom: 23px;
    right: 5vw;
}
.logo-footer{
    width: 320px;
    display: block;
    margin: 35px auto 20px auto;
}
.secondary-btn img{
    width: 67px;
    position: absolute;
    bottom: -19px;
    left: 33px;
}
.footer-content p{
    font-size: 19px;
    color: #FFF8CC;
    width: 45%;
    text-align: center;
    font-weight: 400;
    margin: auto;
    display: grid;
}
.footer-content ul{
    display: flex;
    list-style: none;
    gap: 35px;
    margin: 30px auto;
    width: fit-content;
}
.footer-content ul li a{
    font-size: 17px;
    text-transform: uppercase;
    color: var(--color2)!important;
}
.footer-content  .secondary-btn:nth-child(2) img{
    right: 20px;
    left: auto;
}
.footer-content a:hover{
    text-decoration: unset;
}
.footer-content a span{
    position: relative;
    z-index: 2;
}
.footer-socials{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 60%;
    margin: 50px auto;
    text-align: center;
}
.footer-content .secondary-btn:hover {background-color: var(--color2)}
.footer-socials a  .social-name{
    font-size: 17px;
    color: #FFF8CC;
    width: 45%;
    text-align: center;
    font-weight: 300;
}
.social-icon{
    background: var(--color2);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: block;
    text-align: center;
    color: white;
    margin: auto;
    margin-bottom: 9px
}
.copyright-text{
    background: #16448B;
    padding: 40px 0;
    text-align: center;
    font-size: 16px;
    color: #FFF8CC;
    font-weight: 300;
}
.copyright-text a{
    color: #FFF8CC;
}
/* End of Footer */

/* Responsive */
@media (max-width: 1280px) {
    .navbar{width: max-content;}
    .bubble-header{margin-top: -15px;}
    .header-logo img { width: 930px;}
    .products-nav{width: 75%;}
    .products-grid {grid-template-columns: repeat(4, 1fr); gap: 26px;}
    .ice-cup{left: 55px;}
    .gallery-box h5.text-1 { bottom: -10px; left: 267px; transform: rotate(5deg);}
    .gallery-box h5.text-2{right: 230px;}
    .ice-map{right: 315px;}
}
@media (max-width: 1024px) {
    .services-grid{grid-template-columns: 1fr 1fr;}
    .service-list-content {left: 55%; top: 25px;}
    .service-list .img-cone-1{left: 200px;}
    .service-list .img-cone-2{right: 0; bottom: -37px;}
    .gallery-img {width: 800px;}
}
@media (max-width: 991px) {
    .header-logo img {width: 700px;}
    .group-right{top: 56%;}
    .group-left{top: 35%; gap: 40px;}
}
@media (max-width: 800px) {
    .about-content p{width: 87%;}
    .img-center .img-big {width: 300px;}
    .img-center .img-van{bottom: -5px;}
    .service-list .img-cone-1 {left: 140px;}
    .service-list .img-cone-2 {right: 0;}
    .products-grid {grid-template-columns: repeat(3, 1fr);gap: 23px;}
    .gallery-img{width: 95%;}
    h2.text-h2{font-size: 65px;}
    .footer-img-1 {width: 200px;}
    .footer-img-2{right: 0;width: 187px;top: -164px;}
    .footer-top{margin-top: -6px;}
    .footer-content p{width: 61%;}
    .footer-socials{width: 96%;}
    .wheel {width: 100px;}
    .wheel-2 {  bottom: 37px; right: 10vw;}
    .wheel-1 {  bottom: 37px; left: 10vw;}
    .footer-socials{margin-bottom: 70px;}
    .copyright-text{padding: 32px 0;}
}
@media (max-width: 600px) {
    .header-logo img {width: 79%;}
    .header-logo h2{width: 93%;}
    .header-logo img{padding-top: 50px;}
    .header-logo img {width: 85%;}
    .big-icecream img.img-cone-1{width: 300px; top: -65px;transform: translate(-58%, 0);}
    .image-two{display: none;}
    .big-icecream .img-cone-2 {width: 123px; top: 20px; left: 50px;}
    .group-left .cone-img { width: 70px;}
    .group-left{left: 15%;}
    .group-left {top: 70%;}
    .group-right {display: grid; top: 57%; right: 10%;} 
    .image-three{right: 3%;width: 104px; bottom: 80px;}
    .group-right .scoops-img{left: 90px;top: -157px;width: 80px;}
    .group-right .d3-img{top: -93px; right: 9px; width: 33px;}
    .group-right .cone-img{width: 90px;right: 9px;top: -117px;}
    .group-right .g-grid{order: 1;}
    .header-bg{height: 90vh;}  
    .header-main h2{font-size: 15px;}
    .group-right h2{width: 165px;}
    .group-left .scoops-img {width: 110px;}
    .header-footer h3{font-size: 33px; padding-top: 27px; padding-bottom: 2px;}
    .bubble-header {margin-top: -22px;}
    .marquee-text img { width: 84px;}
    h2.text-h2 {font-size: 53px; line-height: 55px;}
    #about-us{padding-top: 36px; margin-bottom: 5px;}
    .about-content{gap: 40px;}
    .about-content p{width: 96%;}
    .services-grid {grid-template-columns: 1fr;}
    .service-list{order: 3;}
    .content-left{order: 2;}
    .img-center{order: 1;}
    .img-center .img-big { width: 97%;}
    #services{padding-top: 30px;}
    .s-melt-1{z-index: 999;}
    .services-grid h2.text-h2{margin-top: 20px;}
    .img-center .img-van {bottom: -40px; left: auto; right: 40px;}
    .service-list-content {left: 25px;}
    .service-list .img-cone-1 {left: -25px;}
    .service-list .img-cone-2 {right: 14px; bottom: -55px; transform: rotate(10deg); width: 120px;}
    #products{padding-top: 55px; padding-bottom: 40px;}
    .s-melt-2 {width: 147px;bottom: -56px;}
    .products-nav {width: 100%; gap: 10px; margin: 40px auto;}
    .products-grid {grid-template-columns: repeat(2, 1fr);gap: 11px; margin-top: 45px;}
    .footer-img-1{width: 110px; top: -75px;}
    .footer-top {margin-top: -18px;}
    .footer-img-2 {width: 109px;top: -60px;}
    .logo-footer{margin-top: 28px;}
    .footer-content p {width: 80%; display: block;}
    .footer-content ul{flex-wrap: wrap;justify-content: center;gap: 19px;padding: 0;row-gap: 10px;}
    .footer-socials{display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;margin-top: 32px;}
    .wheel-1, .wheel-2 {bottom: 64px; width: 93px;}
    .copyright-text{padding-top: 58px; font-size: 14px;}
    .gallery-img{display: none;}
    .gallery-mob{display: block; width: 98%; margin: auto;} 
    .gallery-box{margin-top: 48px;}
    .gallery-box h5.text-2{line-height: 15px;transform: rotate(353deg);top: -24px; right: auto;}
    .ice-map {right: 89px;transform: rotate(22deg);width: 83px; top: -26px;}
    .g-van {width: 137px;position: absolute;right: 0px;bottom: 154px;}
    .ice-cup {left: 0px; transform: rotate(344deg); bottom: 0; width: 100px;}
    .gallery-box h5.text-1 {bottom: -38px;left: 143px;transform: rotate(4deg);}
    #gallery .theme-btn{margin-top: 70px;}
    .logo-footer { width: 260px;}
    #gallery h2{padding-bottom: 16px;}
    .group-left .group-img{display: none;}
    .services-grid h2.text-h2 img {
        position: absolute;
        width: 21px;
        left: 46px;
        top: 8px;
    }
    .footer-content ul{width: 90%;}
    .product-bottom{padding-right: 0;}
}
/* End of Responsive */