@media  screen and (min-width: 2200px) {
    .swiper {
        max-height: unset;
    }

    .swiper-wrapper {
        right: 9%;
    }

    .content {
        font-size: 8.5rem !important;
    }

    .makeitsimple .content {
        font-size: 10.5rem !important;
        top: 0 !important;
    }

    .ceojohnny .marquee {
        bottom: 0;
    }

    .ceojohnny .content {
        top: 0;
    }

    .ceo-inner {
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

    .ceo-text p {
        margin: 7% 0;
        font-size: 1.6vw;
        line-height: 120%;
    }
}

@media  screen and (min-width: 1500px) and (max-width: 2199px) {
    .makeitsimple .content {
        font-size: 8.5rem !important;
    }
}


@media  screen and (min-width: 1281px) and (max-width: 1440px){
    img.img-fluid.banner-1 {
        left: 0;
    }
    .book-intro .marquee {
        height: 230px;
    }
    .mobile-right h2 span {
        font-size: 100px;
    }
    .mobile-right h2 {
        font-size: 136px;
    }
    i.fa.fa-angle-right {
        right: 45.4%;
    }
    .banner-captions {
        width: 100%;
    }
    img.img-fluid.banner-1 {
        left: -100px;
    }
    img.img-fluid.banner-2 {
        right: -650px;
    }
    .marquee {
        height: 230px;
    }
    .book-intro-top {
        margin-top: 100px;
    }
    .download-total {
        padding: 20px 0 70px 0;
    }
    .mobile-right h2 {
        font-size: 120px;
        line-height: 110px;
    }
    .mobile-right h2 span {
        font-size: 150px;
    }
    .ceo-text p {
        font-size: 22px;
    }
    .ceo-text {
        width: 100%;
    }
    .ceojohnny .marquee {
        height: 279px;
    }
    .test-uptext {
        left: 20%;
        top: 0;
    }
    .about-us-banner h1 {
        font-size: 120px;
    }
    .about-us-banner h6 {
        font-size: 45px;
    }
    .about-us-banner p {
        font-size: 26px;
    }
    .abt-prd-wrap h5 {
        font-size: 32px;
    }
    .about-us-banner h1 {
        font-size: 48px;
    }
    .ceojohnny {
        margin-top: -279px;
    }
    .cl-wrape {
        width: 100%;
    }
    .about-us-banner p {
        width: 100%;
    }
    .about-us-banner h6 {
        width: 100%;
    }
    .terms-services-banner h1 {
        font-size: 120px;
    }
    .counting-list {
        width: 100%;
    }
    .howmany ul {
        gap: 0;
        top: 31%;
    }
    .howmany ul li svg {
        width: 14px;
    }
    .formcontrol {
        padding-left: 20px;
        font-size: 17px;
    }
}

@media  screen and (min-width: 1025px) and (max-width: 1280px){
    nav.navbar.navbar-expand-lg li.nav-item a {
        font-size: 17px !important;
        padding: 10px 15px !important;
    }
    img.img-fluid.banner-2 {
        right: -600px;
    }
    img.img-fluid.banner-1 {
        left: 60px;
    }
    .marquee {
        height: 180px;
    }
    .mobile-right h2 {
        font-size: 102px;
        line-height: 100px;
    }
    h2.get-clients {
        width: 900px;
        height: 900px;
        font-size: 110px;
        line-height: 90px;
    }
    .controlwrap {
        width: 100%;
    }
    .ceo-text {
        width: 100%;
    }
    .ceo-inner {
        width: 100%;
    }
    .ceo-text p {
        font-size: 20px;
    }
    .content {
        font-size: 150px;
    }
    .test-uptext p {
        font-size: 20px;
        margin-top: 24px;
    }
    .bookintro {
        position: relative;
        top: 0;
    }
    .book-intro-top {
        margin-top: 0;
    }
    .mobile-right h2 span {
        font-size: 86px !important;
    }
    .mobile-right h2 {
        font-size: 72px !important;
        line-height: 70px !important;
    }
    .formcontrol {
        padding-left: 15px;
        font-size: 12px;
    }
    .howmany ul li svg {
        width: 10px;
    }
    .mobile-right h2 span {
        font-size: 90px;
    }
    .mobile-right h2 {
        font-size: 123px;
    }
    h2.get-clients {
        width: 1200px;
        height: 1200px;
    }
    .ceojohnny {
        margin-top: -250px;
    }
    .ceojohnny .marquee {
        height: 250px;
    }
    .bottom-text h5 {
        font-size: 70px;
    }
    .bottom-text p {
        font-size: 30px;
        margin-top: -20px;
    }
    .bottom-text {
        right: 80px;
    }
    .top-text {
        width: 100%;
        padding-top: 20px;
    }
    .test-uptext {
        left: 36%;
    }
    .test-uptext p {
        font-size: 22px;
        margin-top: 40px;
        margin-left: 0;
    }
    .test-uptext {
        left: 20%;
    }
    .formcontrol {
        padding-left: 15px;
        font-size: 16px;
    }
}

@media  screen and (min-width: 768px) and (max-width: 1024px) {
    /* menu */
    #navbarTogglerDemo03 {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        background-color: #021A6E;
        left: 0;
    }
    .navbar-nav {
        padding: 0 50px;
        display: flex;
        gap: 18px;
        flex-direction: column !important;
        width: 85%;
    }
    .navbar-mobile-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .shop-wrap {
        flex-direction: column;
    }
    .shop-column {
        min-height: unset;
    }
    .book-intro {
        padding: 80px 0 50px 0 !important;
    }
    .banner-captions {
        width: 100%;
        height: 100vh;
        min-height: 700px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    img.img-fluid.banner-1,
    img.img-fluid.banner-2 {
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
    }
    .banner-text {
        text-align: center;
    }
    h1.banner-heading {
        line-height: 40px;
        font-size: 44px;
    }
    .banner-images {
        position: relative;
        width: 50%;
        margin: 0;
        margin-top: 30px;
    }
    img.img-fluid.banner-1 {
        left: -220px;
    }
    img.img-fluid.banner-2 {
        right: -280px;
    }
    .bookintro {
        position: unset;
        top: unset;
        margin-bottom: -290px;
    }
    .boo-lists {
        padding: 0 0;
    }
    #book-list-container {
        width: 100% !important;
    }
    .mobile-right h2 {
        line-height: 30px !important;
        font-weight: 700 !important;
    }
    .mobile-lists {
        padding-left: 0;
    }
    .mobile-right {
        margin-top: 20px;
    }
    .makeitsimple .content {
        font-size: 40px;
    }
    .makeitsimple {
        padding: 130px 0;
    }
    .marquee {
        height: 80px;
    }
    .top-text {
        padding: 10% 0 0 0 !important;
    }
    .top-text h6,
    .top-text p {
        color: white;
        font-size: 1rem !important;
    }
    .bottom-text {
        position: relative !important;
        left: 0;
        right: 0;
        text-align: end !important;
        margin-right: 6%;
        margin-top: 30%;
    }
    .bottom-text h5 {
        font-size: 4rem !important;
    }
    .bottom-text p {
        font-size: 1.5rem;
        margin-top: -20px;
    }
    i.fa.fa-angle-right {
        position: unset;
        display: table;
        margin: 0 auto;
    }
    .ceo-inner .row {
        flex-direction: column-reverse;
    }
    .ceo-text {
        width: 45%;
    }
    .ceo-text p {
        font-size: 1rem;
    }
    .ceo-sec {
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }
    .img-ceo-sec-cont {
        width: 100%;
    }
    .text-ceo-sec-cont {
        width: 100%;
    }
    .ceojohnny .content {
        font-size: 64px;
    }
    .ceojohnny {
        margin-top: -101px;
    }
    .ceojohnny .marquee {
        height: 100px;
    }
    .ceojohnny .track {
        bottom: 0;
    }
    button.accordion-button {
        font-size: 14px;
        padding-left: 0;
    }
    h2.control-heading {
        font-size: 36px;
        line-height: 36px;
    }
    ul.social_media {
        justify-content: left;
    }
    .bottom_footer {
        padding: 0 0;
    }
    .footer-column {
        padding: 20px 0;
    }
    footer#footer {
        padding-top: 20px;
        padding-bottom: 0;
    }
    .scroll-down {
        bottom: -210px;
    }
    .content {
        font-size: 44px !important;
    }
    .test-images {
        width: 100%;
    }
    .test-images ul {
        gap: 10px;
    }
    .img-test-cont {
        overflow: visible;
    }
    .shop-heading {
        line-height: 50px;
        font-size: 48px;
    }
    .product-carousal {
        max-width: 100%;
        padding-left: 0;
    }
    .product-nav {
        height: unset;
        max-width: unset;
        overflow-x: auto;
        overflow-y: unset;
        width: 100%;
        height: 210px;
    }
    .prd-wraping {
        display: flex;
        flex-direction: column-reverse;
    }
    h6.product-title {
        font-size: 48px;
    }
    .prd-sing-lists {
        margin-top: 30px;
    }
    .reviews-heading h6 {
        font-size: 32px;
    }
    .reviews-heading h5 {
        font-size: 70px;
    }
    .prd-review-left h6 {
        font-size: 48px;
    }
    .reviews-rating {
        justify-content: space-between;
        gap: 10px;
    }
    .addreview-text h5 {
        font-size: 36px;
    }
    .addreview-text h6 {
        font-size: 20px;
    }
    select.form-select {
        width: 120px;
    }
    .customer-review-riting {
        justify-content: flex-start;
        margin-top: 20px;
    }
    h5.rating-date {
        font-size: 17px;
        text-align: left;
    }
    .prd-price {
        font-size: 36px;
    }
    .terms-services-banner h1 {
        line-height: 50px;
        font-size: 48px;
    }
    h6.terms-heading {
        font-size: 32px;
        margin-top: 40px;
    }
    .serives-text {
        padding-top: 30px;
    }
    .serives-text p {
        font-size: 14px;
        margin: 20px 0;
    }
    .counting-list h6 {
        font-size: 32px;
    }
    .counting-list p {
        font-size: 12px;
    }
    .terms-services-banner .container-fluid .row:last-child .col-lg-4 {
        flex-basis: 33.33%;
    }
    .terms-services-banner .container-fluid .row:last-child {
        display: flex;
        flex-direction: row;
    }
    .terms-sec-2 {
        padding: 40px 0;
    }
    .sec2-text h6 {
        font-size: 40px;
    }
    .sec2-text p {
        font-size: 14px;
    }
    .shipping-info-banner h1 {
        line-height: 50px;
        font-size: 48px;
    }
    h6.shipping-heading {
        font-size: 32px;
    }
    .shippingsrow p {
        font-size: 14px;
    }
    .shipping-sec-2 {
        padding: 40px 0;
    }
    .shiping-box h6 {
        font-size: 40px;
    }
    .shiping-box p {
        font-size: 24px;
    }
    .box-detail p {
        font-size: 14px;
    }
    .con-left h1 {
        line-height: 50px;
        font-size: 48px;
    }
    .innercon {
        width: 100%;
        padding-left: 0;
    }
    .innercon h1 {
        width: 36%;
    }
    input.blue-btn {
        width: 70%;
        margin: 0 auto;
        margin-top: 20px;
        display: table;
    }
    .con-right {
        padding-top: 30px;
        padding-bottom: 0;
    }
    a.navbar-brand img {
        width: 115px;
    }
    h2.get-clients {
        width: 700px;
        height: 700px;
    }
    .clients-box {
        margin: 15px 0;
    }
    .about-us-banner {
        padding: 150px 0 0 0;
    }
    .right-terms {
        width: 100%;
    }
    .px-5 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
    .customer-text {
        width: 100%;
    }
    .customer-heaiding {
        width: 100%;
    }
    .customer-review-riting h6 {
        font-size: 36px;
    }
    ul.prl-rating li svg {
        width: 30px;
    }
    .clients-sec {
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }
    .testimonial-sec {
        height: 640px !important;
    }  
    .img-carrusel-container {
        width: 50% !important;
        overflow: hidden;
    }
    .header-socials {
        display: block;
    }
    .header-socials {
        padding: 30px 0 0 0;
    }
    .header-socials ul.social_media {
        justify-content: center;
    }
    .header-socials ul.social_media li i {
        background: white;
        color: #021a6e;
    }
    .navbar-toggler .toogleimg {
        filter: unset;
    }
    button.navbar-toggler {
        z-index: 9999;
        display: block !important;
    }
    button.navbar-toggler,
    .navbar-toggler:focus {
        border: none;
        box-shadow: none;
    }
    .navbar-nav {
        padding: 0 50px;
    }
    .navbar {
        justify-content: space-between !important;
    }
    nav.navbar.navbar-expand-lg li.nav-item.active a:after {
        display: none;
    }
    nav.navbar.navbar-expand-lg li.nav-item a {
        font-size: 30px;
        border: none;
        border-bottom: 1px solid white;
        border-radius: 0 !important;
    }
    nav.navbar.navbar-expand-lg li.nav-item.active a,
    nav.navbar.navbar-expand-lg li.nav-item a:hover {
        color: #ffffff !important;
        background: transparent;
    }
    li.nav-item.mobilelogo {
        display: block;
    }
    nav.navbar.navbar-expand-lg li.nav-item:last-child a {
        border: none;
    }
    .reviews-rating {
        justify-content: space-between;
    }
    a.revibtn {
        font-size: 20px;
        padding: 10px 24px;
    }
    select.form-select {
        width: 200px;
    }
    .con-right {
        padding-right: 0;
    }
    i.fa.fa-angle-right {
        right: 43%;
    }
    nav.navbar.navbar-expand-lg li.nav-item a {
        padding: 10px 20px;
        margin: 0 10px;
    }
    h1.banner-heading {
        line-height: 60px;
        font-size: 70px;
    }
    .banner-text p {
        width: 97% !important;
        margin-top: 10px !important;
    }
    img.img-fluid.banner-1 {
        left: -80px;
        bottom: -280px;
    }
    #testimonial-image {
        height: 100% !important;
        width: 65% !important;
    }
    #prev-img-testimonial {
        height: 100% !important;
        width: 30% !important;
    }
    #prev-img-testimonial2, #testimonial-image2 {
        height: 100% !important;
        width: 30% !important;
    }
    .test-uptext {
        top: 5px !important;
        right: 30% !important;
    }
    .test-uptext p {
        font-size: 1.75rem;
    }
    .test-uptext h6 {
        font-size: 1.125rem;
    }
    .prelative {
        width: 50%;
        padding-top: 10%;
    }
    .shop-column {
        width: 100%;
        min-height: 500px;
    }
    .terms-services-banner h1 {
        line-height: 100px;
        font-size: 120px;
    }
    .content {
        font-size: 110px;
    }
    .ceojohnny .marquee {
        height: 150px;
    }
    .ceojohnny {
        margin-top: -150px;
    }
    h2.control-heading {
        font-size: 100px;
        line-height: 85px;
    }
    .about-us-banner {
        padding: 150px 0 150px 0;
    }
    .abt-prd-wrap h5 {
        font-size: 32px;
        line-height: 36px;
    }
    .cover-book1-ctrl-sec {
        width: 9%;
        height: 14%;
    }
    .cover-book2-ctrl-sec {
        width: 11%;
        height: 19%;
    }
    .cover-book3-ctrl-sec {
        width: 19%;
        height: 33%;

    }
    .cover-book4-ctrl-sec {
        width: 11%;
        height: 15%;
    }
    .cover-book5-ctrl-sec {
        width: 20%;
        height: 33%;
    }
    .cover-book6-ctrl-sec {
        width: 15%;
        height: 24%;
    }
    .accordion-button::after {
        height: auto;
        width: auto;
    }
    #mobile {
        width: 50%;
        height: auto;
        top: 30px;
    }
    .intro-btn a {
        font-size: 0.875rem;
    }
    .product-thumb-single {
        display: flex;
        flex-direction: column-reverse;
    }

    /* About us */
    .ceojohnny {
        margin-top: -300px;
    }
    .about-us-banner p {
        width: 90%;
        font-size: 1rem;
    }
    .about-us-banner h6 {
        font-size: 1.5rem;
        padding-top: 40px;
    }

    /* Single details */
    .prdthumb-nav {
        max-width: unset;
        height: auto;
        width: 100%;
        margin: 15px 0%;
        overflow-x: auto;
    }
    .product-img-cont {
        width: 16% !important;
        height: auto;
    }
    .single-details-cont-child {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
    }
    h6.product-title {
        font-size: 2.5rem;
    }
    .single-details-cont-child { 
        width: 100%;
    }
}

@media screen and (min-width: 1025px) {
    /* cook-book */
    h6.product-title {
        font-size: clamp(30px, 3.33vw, 90px);
    }

    .prd-price {
        font-size: clamp(30px, 3.33vw, 90px);
    }

    .prd-sing-lists li {
        font-size: clamp(13px, 0.99vw, 28px);
    }
    /* cook-book end */
}

@media  screen and (max-width: 1024px){
    .navbar-collapse:not(.show) {
        display: none !important;
    }

    .navBar-color-mobile { 
        display: none;
    }

    .navbar-light .navbar-toggler {
        width: 10%;
        height: auto;
    }

    .btn-menu-mob > img {
        width: 100%;
        height: auto;
    }

    #img-logo-header {
        height: auto;
        width: 40%;
    }

    #text-logo-header {
        height: auto;
        width: 100%;
        margin: 2%;
    }

    h1.banner-heading {
        font-size: clamp(20px, 9.73vw, 100px);
        line-height: 80%;
    }

    h2.banner-heading {
        font-size: clamp(25px, 10.8vw, 110px);
        text-align: center;
        line-height: 80%;
    }

    .home-banner {
        height: 1150px;
    }

    .banner-images {
        width: 100%;
        height: 100%;
        margin: 0;
        min-height: 1100px;
    }

    .banner-text-container {
        position: absolute;
        top: 5%;
        left: 0;
        right: 0;
        margin: auto;
        width: 85.88%;
        height: 100%;
        overflow: hidden;
    }

    .banner-text p {
        font-size: clamp(12px, 4.27vw, 47px);
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        text-transform: uppercase;
        text-align: center;
        width: 100%;
    }

    .white-border-btn {
        font-size: clamp(12px, 4.27vw, 47px);
    }

    #book-cover {
        top: 7%;
        width: 50%;
        left: 2%;
    }

    #mobile {
        top: 4%;
        right: 16%;
        width: 23% !important;
        height: auto;
    }

    .book-intro .marquee {
        height: auto;
    }

    .content {
        font-size: clamp(20px, 11.73vw, 100px) !important;
    }

    .boo-lists ul li {
        font-size: clamp(10px, 3.73vw, 28px);
        margin: 40px 0;
        line-height: 130%;
    }

    #overflow-book-intro {
        padding: 10% 8% 0 8% !important;
    }

    .book-intro {
        padding: 10% 0 15% 0 !important;
    }

    .intro-btn a {
        font-size: clamp(10px, 3.73vw, 28px);
    }

    .mobile-right h2 {
        position: absolute;
        top: -64%;
        right: 4%;
        font-size: clamp(20px, 11.2vw, 85px);
        line-height: 90% !important;
        width: 50%;
    }

    .mobile-right h2 span {
        font-size: clamp(15px, 5.4vw, 45px);
    }

    ul.lists-mobile li {
        font-size: clamp(10px, 3.73vw, 28px);
        line-height: 120% !important;
        margin: 5% 0;
    }
    .track {
        position: relative;
        bottom: 50%;
    }

    .marquee {
        height: auto;
    }

    .total-captions {
        display: flex;
        flex-direction: column;
    }

    .mobile-right {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dow-mob-text {
        width: 100%;
        position: relative;
    }

    .mobile-right .apps {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mobile-right .apps ul {
        width: 90%;
    }

    .mobile-right .apps li {
        width: 50%;
    }

    .mobile-right .apps li > img {
        width: 100%;
        height: auto;
    }

    .mobile-lists {
        width: 100%;
        padding-left: 6%;
        margin-top: 8%;
    }

    .tes-content {
        display: flex;
        flex-direction: column;
    }

    .testimonial-sec {
        height: 100vh !important;
        min-height: 1080px;
    }

    .test-left {
        width: 100%;
        height: 70%;
        right: 11%;
    }

    .swiper-wrapper {
        left: 7%;
        height: 55%;
    }

    .tes-reviews-date {
        left: 20%;
        height: 500px;
    }

    .tes-reviews-date > div > span {
        font-size: clamp(9px, 3.2vw, 26px);
    }

    .tes-reviews-date h3 {
        font-size: clamp(9px, 3.2vw, 26px);
    }

    .test-right {
        width: 100%;
        height: 30%;
    }

    .test-right > div > h3 {
        font-size: clamp(20px, 12.07vw, 100px);
        line-height: 120%;
    }

    .test-right > div > h4 {
        font-size: clamp(18px, 8.53vw, 50px);
        line-height: 110%;
        font-weight: 500;
    }

    .ceo-sec {
        min-height: 1080px;
    }

    .ceojohnny {
        margin-top: -24%;
    }

    .ceo-inner {
        height: 100%;
    }

    .ceo-text {
        width: 100%;
    }

    .ceo-text p {
        font-size: clamp(12px, 4.27vw, 30px);
        line-height: 130%;
    }

    .cli-logo-container {
        width: 50%;
    }

    .cli-logo-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 10%;
    }

    .cli-logo-container2 {
        width: 50%;
        justify-content: flex-start;
    }

    .cli-logo-container2 > div {
        width: 40%;
    }

    .ceojohnny .marquee {
        height: 250px;
    }

    .content {
        top: unset;
    }

    button.accordion-button {
        font-size: clamp(10px, 3.73vw, 28px);
    }

    .faq-wrap h2 {
        font-size: clamp(1rem, 6.93vw, 50px);
    }

    .accordion-body {
        padding: 1rem 1rem 1rem 0 !important;
        font-size: clamp(10px, 3.73vw, 28px);
    }

    h2.control-heading {
        font-size: clamp(24px, 9.6vw, 90px);
        line-height: 90%;
    }

    .control-btn a.white-border-btn {
        font-size: clamp(10px, 3.73vw, 28px);
    }

    .foo-content {
        display: flex;
        flex-direction: column;
    }

    .footer-logo-cont {
        width: 72%;
    }

    .fstclumn {
        width: 100%;
        display: flex;
        gap: 15px;
        flex-direction: column;
    }

    .fstclumn > img {
        width: 72%;
    }

    .fstclumn p {
        font-size: clamp(7px, 2.667vw, 25px);
    }

    .col-footer-text {
        width: 50%;
    }


    .footer-column ul {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .footer-column h6 {
        font-size: clamp(10px, 3.73vw, 28px);
    }

    .footer-column ul li{
        font-size: clamp(9px, 3.2vw, 26px);
    }

    .bot-footer-animation {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start !important;
        gap: 20px;
    }

    p.dev-text {
        font-size: clamp(7px, 2.667vw, 25px);
    }

    ul.social_media {
        justify-content: flex-start;
    }
}

@media  screen and (min-width: 481px) and (max-width: 767px) {
    /* menu */
    .navbar-light .navbar-toggler {
        width: 15%;
    }
    #header > div {
        padding: 0 3% !important;
        
    }
    #navbarTogglerDemo03 {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        background-color: #021A6E;
        left: 0;
    }
    .navbar-nav {
        padding: 0 50px;
        display: flex;
        gap: 18px;
        flex-direction: column !important;
        width: 85%;
    }
    .navbar-mobile-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .header-socials {
        display: block;
        margin-top: 50px;
    }
    li.nav-item.mobilelogo {
        display: block;
    }
    nav.navbar.navbar-expand-lg li.nav-item a {
        color: white;
        font-size: 1rem;
        border: unset;
        border-radius: unset;
        text-transform: uppercase;
        border-bottom: 1px solid;
        padding: 10px 0;
        width: 100%;
        margin: 0 8px;
    }
    .navbar-toggler {
        z-index: 100;
    }
    img.img-fluid.banner-2 {
        right: -190px;
    }
    .banner-images {
        min-height: 600px
    }
    h1.banner-heading {
        font-size: clamp(20px, 8.73vw, 100px);
    }
    img.img-fluid.banner-1 {
        left: -170px;
    }
    img.img-fluid.banner-2 {
        right: -120px;
        top: 60px;
    }
    .scroll-down {
        bottom: 0;
    }
    .book-intro {
        padding: 50px 0 50px 0;
    }
    .boo-lists {
            padding: 0px 0 90px 0;
    }
    .intro-wrap {
            width: 98%;
            margin: 0;
    }
    #book-list-container {
            width: 100%;
    }
    #overflow-book-intro {
        padding: 15% 8% 0 8% !important;
    }
    .content {
        font-size: 2.75rem;
    }
    h2.get-clients {
        width: 600px;
        height: 600px;
        font-size: 80px;
        line-height: 70px;
    }
    .our-clients {
        padding: 100px 0;
        height: 100vh;
    }
    .innercon h1 {
        width: 100%;
    }
    .fstclumn {
        width: 100%;
    }
    .home-banner {
        padding: 100px 0 150px 0;
        height: 700px;
    }
    .banner-captions {
        padding: 0;
    }
    .banner-btn {
        margin-top: 20px;
    }
    .scroll-down h6 {
        font-size: 10px;
        line-height: 9px;
    }
    .scroll-down svg {
        height: 25px;
    }
    .scroll-down {
        bottom: 30px;
    }
    .testimonial-sec {
        height: 100%;
        padding: 20% 0 15% 0;
    }
    .test-left {
        right: 15%;
    }
    .swiper-wrapper {
        left: 7%;
        height: 55%;
    }
    .test-uptext {
        top: 4% !important;
        right: 60% !important;
    }
    .img-test-cont {
        display: flex;
        justify-content: flex-end;
    }
    .test-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .bottom-text {
        position: relative;
        bottom: -80%;
        right: 5%;
    }
    .top-text {
        padding: 10% 0 0 10%;
        width: 70%;
    }
    #next-img-btn {
        position: absolute;
        left: unset;
        right: -3%;
        bottom: 109%;
        width: 15%;
        height: 15%;
    }
    .prelative {
        width: 100%;
    }
    .bottom-text {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .bottom-text h5 {
        font-size: 4rem;
        width: 40%;
    }
    .bottom-text p {
        font-size: 2rem;
        width: 40%;
        margin-top: -4%;
    }
    .ceo-sec-cont-mquery {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        height: 100%;
        flex-wrap: nowrap;
    }
    .ceo-text {
        width: 90%
    }
    .ceojohnny .marquee {
        height: auto;
        bottom: 0;
    }
    .cover-book1-ctrl-sec {
        width: 9%;
        height: auto;
    }
    .cover-book2-ctrl-sec {
        width: 11%;
        height: auto;
    }
    .cover-book3-ctrl-sec {
        width: 19%;
        height: auto;

    }
    .cover-book4-ctrl-sec {
        width: 11%;
        height: auto;
    }
    .cover-book5-ctrl-sec {
        width: 20%;
        height: auto;
    }
    .cover-book6-ctrl-sec {
        width: 15%;
        height: auto;
    }
    .accordion-button:after {
        font-size: 3.125rem;
        width: auto;
        height: auto;
    }

    .mobile-right h2 {
        font-size: clamp(20px, 8.2vw, 85px)
    }

    .mobile-right h2 span {
        font-size: clamp(15px, 4.4vw, 45px);
    }

    .dow-mob-text {
        width: 100% !important;
    }

    .mobile-right {
        width: 100%;
    }

    .mobile-lists {
        width: 100%;
        padding-left: 6%;
        margin-top: 8%;
    }
    .track {
        position: relative;
        bottom: 50%;
    }
    h2.control-heading {
        font-size: clamp(24px, 8.6vw, 90px);
    }
    footer#footer {
        padding-top: 10%;
    }
    .intro-btn {
        margin-top: 40px;
        margin-left: -14px;
    }
    .ceo-text p {
        font-size: 1rem;
        line-height: 150%;
    }
    .col-xs-6 {
        width: 50%;
    }
    .clients-box h6,
    .clients-box p {
        font-size: 10px;
        line-height: 12px;
    }
    .fstclumn p {
        font-size: 12px;
    }
    .footer-column h6 {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .footer-column ul li {
        font-size: 14px;
    }
    .footer-column {
        padding: 10px 0;
    }
    p.dev-text {
        font-size: 12px;
    }
    ul.social_media li i {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
    }
    .bottom_footer .row {
        flex-direction: column-reverse;
    }
    .about-us-banner {
        padding: 100px 0 0 0;
    }
    .about-us-banner p {
        font-size: 16px;
        line-height: 20px;
    }
    .about-us-banner h6 {
        padding-top: 50px;
        font-size: 32px;
        line-height: 38.4px;
    }
    .shop-banner {
        padding: 100px 0 150px 0;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }
    .con-left {
        padding-top: 100px;
    }
    .terms-services-banner {
        padding: 100px 0 50px 0;
    }
    .shipping-info-banner {
        padding: 100px 0 50px 0;
    }
    .single-detail {
        padding: 100px 0;
    }
    ul.dd-filters {
        justify-content: center;
        margin-bottom: 20px;
    }
    .reivew-button {
        text-align: center;
    }
    .reviews-heading h5 {
        font-size: 50px;
    }
    ul.prl-rating svg {
        width: 100%;
    }
    ul.five-stars svg {
        width: 100%;
    }
    .accordion-button::after {
        height: auto;
        width: auto;
    }
    .banner-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .clinets-center {
        scale: 0.4 !important;
        max-width: none;
    }

    /* Internal Pages */

    /* Term of services */

    .counting-list h6 {
        font-size: 5rem;
    }
    .counting-list p {
        font-size: 2rem;
    }
    .terms-sec-2 {
        padding: 40px 0;
    }
    .sec2-text h6 {
        font-size: 2rem;
    }
    h6.terms-heading {
        font-size: 2.5rem;
    }
    .serives-text {
        padding-top: 30px;
    }

    /* Shipping information */
    .shippingsrow {
        padding-top: 50px;
    }
    .shipping-info-banner h1 {
        font-size: 3rem;
        line-height: 100%;
    }
    h6.shipping-heading {
        font-size: 2.5rem;
    }
    .shippingsrow p {
        font-size: 1.2rem;
    }
    .shipping-sec-2 {
        padding: 40px 5%;
    }
    .shiping-box h6 {
        font-size: 4rem;
    }
    .shiping-box p {
        font-size: 2.5rem;
    }
    .shiping-lists {
        padding: 30px 0;
    }

    /* Contact */
    .con-left h1 {
        font-size: 3rem;
        line-height: 100%;
    }
    form.contact-form{
        padding-top: 50px;
    }
    .con-right {
        padding-top: 40px;
    }
    .contact-form .fontact-field {
        font-size: 1.5rem;
    }

    /* About us */
    .about-us-banner p {
        font-size: 1rem;
        width: 90%;
    }
    .about-us-banner h6 {
        font-size: 2rem;
    }
    .abt-prd-wrap h5 {
        font-size: 3rem;
    }
    .abt-prd-wrap p {
        font-size: 1.125rem;
    }

    /* Cook book section */
    h6.product-title {
        font-size: 2rem;
    }
    .review-count {
        font-size: 1.75rem;
    }
    .prd-price {
        font-size: 2rem;
    }
    .reviews-heading h6 {
        font-size: 2rem;
    }
    .reviews-heading h5 {
        font-size: 3.125rem;
    }
    .prd-review-left h6 {
        font-size: 6rem;
    }
    h5 {
    font-size: 1.5rem;
    }
    .addreview-text h5 {
        font-size: 3.5rem;
    }
    .formcontrol { 
        font-size: 0.9rem;
    }
    .formcontrol::placeholder { 
        font-size: 0.9rem;
    }
    .add-review {
        padding: 15px 2%;
    }
    button.form-btn {
        font-size: 1.5rem;
    }
    select.form-select {
        width: 165px;
    }
    ul.dd-filters {
        gap: 12%;
    }
    a.revibtn {
        font-size: 1.5rem;
    }
    .customer-heaiding h6 {
        font-size: 2.25rem;
    }
    .customer-heaiding p {
        font-size: 1.25rem;
        width: 130%;
    }
    .customer-text h6 {
        font-size: 1.563rem;
        width: 145%;
    }
    .customer-text p {
        font-size: 1.188rem;
        width: 138%;
        margin-top: 30px;
    }
    .customer-review-riting {
        display: flex;
        align-items: center;
        gap: 3%;
        justify-content: flex-start;
    }
    .customer-review-riting h6 {
        font-size: 3.438rem;
    }
    ul.five-stars li {
        font-size: 1.25rem;
    }
    .reviews-rating {
        gap: 5%;
    }
    .customer-heaiding h6 {
        width: 153%;
    }
    h5.rating-date {
        text-align: unset;
        padding-top: 8px;
    }
    .product-review-sec {
        padding-bottom: 50px;
    }
    .product-img-cont {
        width: 100%;
    }
    .product-nav {
        max-width: unset;
        height: unset;
        width: 100%;
    }
    .product-thumb-single {
        display: flex;
        flex-direction: column-reverse;
    }
    .prdthumb-nav {
        max-width: unset;
        height: auto;
        margin: 15px auto;
        overflow-x: auto;
    }
    .single-details-cont-child {
        flex-wrap: wrap;
        width: 100%;
    }
    .prd-wraping {
        display: flex;
        flex-direction: column-reverse;
    }
    .arrow-prod-carousal {
        width: 2rem !important;
        height: 2rem;
    }
    .arrow-prod-carousal svg {
        height: auto;
        width: 50%;
    }
    .search-prod-carousal {
        width: 2rem !important;
        height: 2rem;
    }
    .search-prod-carousal svg { 
        height: auto;
        width: 50%;
    }
}

@media  screen and (max-width: 480px){
    /* menu */
    .navbar-light .navbar-toggler {
        width: 17%;
    }
    .navBar-color-mobile { 
        display: none;
    }
    #header > div {
        padding: 0 3% !important;
    }
    #navbarTogglerDemo03 {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        background-color: #021A6E;
        left: 0;
    }
    .navbar-nav {
        padding: 0 50px;
        display: flex;
        gap: 18px;
        flex-direction: column !important;
        width: 85%;
    }
    .navbar-mobile-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .header-socials {
        display: block;
        margin-top: 50px;
    }
    li.nav-item.mobilelogo {
        display: block;
    }
    nav.navbar.navbar-expand-lg li.nav-item a {
        color: white;
        font-size: 1rem;
        border: unset;
        border-radius: unset;
        text-transform: uppercase;
        border-bottom: 1px solid;
        padding: 10px 0;
        width: 100%;
        margin: 0 8px;
    }
    .navbar-toggler {
        z-index: 100;
    }
    .shop-wrap {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }
    .shop-banner {
        padding-top: 100px;
    }
    .shop-column {
        width: 100%;
    }
    .display-off {
        display: none;
    }
    #home-banner-cont-child {
        --bs-gutter-x: 0;
        margin: 0 !important;
        width: 100%;
    }
    .banner-captions {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .banner-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .banner-images {
        min-height: 500px;
    }
    img.img-fluid.banner-2 {
        right: -120px;
        top: 60px;
    }
    .white-border-btn {
        font-size: 1rem;
    }
    .home-banner {
        height: 750px;
    }
    .home-banner .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #book-cover {
        top: 20%;
    }

    #mobile {
        top: 17%;
    }
    img.img-fluid.banner-1 {
        left: -110px;
        top: 60px;
    }
    .book-intro {
        padding: 50px 0 50px 0;
    }
    .scroll-down {
        position: absolute;
        bottom: 7%;
        right: 5%;
    }
    .scroll-down svg {
        width: 12%;
        height: 20%;
    }
    .scroll-down h6 {
        font-size: 0.625rem;
        line-height: normal;
    }
    .marquee {
        height: auto;
    }
    #overflow-book-intro {
        padding: 17% 8% 0 8% !important;
    }
    #book-list-container {
        width: 100%;
    }
    .book-intro-top h6 {
        font-size: 0.625rem;
    }
    .intro-wrap {
        width: 95%;
    }
    .boo-lists {
        padding: 30px 0 140px 0;
    }
    .boo-lists ul li {
        font-size: 0.875rem;
    }
    .intro-btn {
        margin-top: 40px;
    }
    nav.navbar.navbar-expand-lg li.nav-item a {
        font-size: 30px;
    }
    .navbar-nav {
        padding: 0 30px;
    }
    .makeitsimple .content {
        font-size: 2.5rem;
    }
    .download-child {
        padding: 0 !important;
    }
    .our-clients {
        height: 100vh;
    }
    .mobile-img {
        width: 60%;
        position: relative;
        left: 2%;

    }
    .mobile-right {
        position: relative;
    }
    .mobile-right h2 {
        font-size: clamp(20px, 7.2vw, 85px);
        width: 40%;
    }
    .mobile-right h2 span {
        font-size: clamp(15px, 3.4vw, 45px);
    }
    .mobile-lists {
        width: 100%;
        padding-left: 6%;
        margin-top: 8%;
    }
    .testimonial-sec {
        min-height: 500px;
        max-height: 800px;
    }

    .test-left {
        right: 16%;
    }

    .swiper-wrapper {
        left: 7%;
        height: 55%;
    }

    .tes-reviews-date {
        height: 300px;
    }

    .swiper-button-prev {
        width: 9%;
    }

    .img-carrusel-container {
        padding-right: 0;
        width: 90%;
    }
    .img-test-cont {
        display: flex;
        justify-content: flex-end;
    }
    #testimonial-image {
        width: 78%;
        height: auto;
    }
    #prev-img-testimonial {
        width: 30%;
        height: auto;
    }
    #prev-img-testimonial2, #testimonial-image2 {
        display: none;
    }
    .test-uptext {
        position: absolute !important;
        top: 4% !important;
        right: 79% !important;
    }
    .dat-days-cont {
        height: 15px;
    }
    .test-uptext h6 {
        font-size: 0.75rem;
    }
    .test-uptext p {
        font-size: 0.75rem;
    }
    .prelative {
        width: 100%;
    }
    .top-text {
        padding: 30% 0 0 10%;
        width: 100%;
    }
    .bottom-text h5 {
        font-size: 4rem;
    }
    .bottom-text {
        position: absolute;
        right: -2%;
        bottom: -70%;
    }
    .bottom-text p {
        font-size: 2rem;
        margin-top: -25px;
    }
    h2.get-clients {
        width: 100%;
        height: 460px;
        font-size: 50px;
        line-height: 49px;
    }
    .prd-small-img {
        border-radius: 8px;
    }
    h2.get-clients {
        height: 400px;
    }
    button.form-btn {
        font-size: 16px;
        padding: 10px 25px;
    }
    .clinets-center {
        scale: 0.4 !important;
        max-width: none;
    }
    h2.get-clients {
        height: auto;
        width: 36%;
        font-size: 3.5rem;
        line-height: 85%;
    }
    .ceo-inner .row {
        flex-direction: column-reverse;
    }
    .ceo-sec {
        height: 800px;
        min-height: unset;
    }
    .ceo-sec > .container-fluid {
        padding: 0 !important;
    }
    .ceo-text {
        width: 90%;
    }
    .ceo-sec-cont-mquery {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        height: 100%;
        flex-wrap: nowrap;
    }
    .ceojohnny {
        margin-top: -40%;
    }
    .ceojohnny .marquee{
        position: relative;
        height: auto;
    }
    .faq-sec > div,
    .control-sec > div,
    #footer > div,
    .bottom_footer
    {
        padding: 0 5% !important;
    }
    .accordion-header button {
        font-size: 0.875rem;
    }
    .accordion-button {
        padding: 10px 0;
    }
    h2.control-heading{
        font-size: 2rem;
        line-height: 92%;
    }
    .control-btn a.white-border-btn{
        font-size: 0.875rem;
    }
    .cover-book1-ctrl-sec {
        width: 20%;
        height: auto;
    }
    .cover-book2-ctrl-sec {
        width: 21%;
        top: 6%;
        right: 3%;
        height: auto;
    }
    .cover-book3-ctrl-sec {
        width: 38%;
        height: auto;
        transform: rotate(3deg);
        left: -4%;
    }
    .cover-book4-ctrl-sec {
        width: 15%;
        height: auto;

    }
    .cover-book5-ctrl-sec {
        width: 31%;
        height: auto;
    }
    .cover-book6-ctrl-sec {
        width: 22%;
        height: auto;
    }
    .control-btn a.white-border-btn {
        position: relative;
        z-index: 100;
    }
    footer#footer {
        padding-top: 39px;
    }
    .footer-column h6 {
        font-size: 0.875rem;
    }
    .footer-column ul li {
        font-size: 0.75rem;
    }
    .footer-logo-cont {
        margin-bottom: 36px;
    }
    p.dev-text {
        font-size: 0.625rem;
    }
    .bottom_footer .row {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    ul.social_media{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .bottom_footer {
        padding: 0 0 20px 0;
    }
    .intro-btn a {
        font-size: 1rem;
    }
    button.accordion-button.collapsed:after {
        font-size: 1.8rem;
    }
    .total-captions {
        margin: 0 !important;
    }
    .clients-box {
        height: auto;
        width: 100%;
    }
    .clients-box h6 {
        font-size: 0.8rem;
        margin-top: 20px;
        line-height: normal;
    }
    .clients-box p {
        font-size: 0.5rem;
    }
    #sec-logo1 {
        width: 35%;
    }
    #sec-logo2 {
        position: absolute;
        right: 10%;
        width: 35%;
    }
    #sec-logo3 {
        position: absolute;
        top: 180%;
        width: 35%;
    }
    #sec-logo4 {
        position: absolute;
        top: 180%;
        right: 10%;
        width: 35%;
    }
    #clientes-sec-logos {
        position: relative;
    }
    .clientes-sec-logos-child {
        position: relative;
    }

    /* Internal Pages */

    /* Term of services */

    .counting-list h6 {
        font-size: 4rem;
    }
    .counting-list p {
        font-size: 1.8rem;
    }
    .terms-sec-2 {
        padding: 40px 0;
    }
    .sec2-text h6 {
        font-size: 2rem;
    }
    h6.terms-heading {
        font-size: 1.8rem;
    }
    .serives-text {
        padding-top: 30px;
    }
    .terms-services-banner {
        padding: 100px 0 50px 0;
    }

    /* Shipping information */
    .shippingsrow {
        padding-top: 50px;
    }
    .shipping-info-banner h1 {
        font-size: 2.5rem;
        line-height: 100%;
    }
    h6.shipping-heading {
        font-size: 2rem;
    }
    .shippingsrow p {
        font-size: 1.2rem;
    }
    .shipping-sec-2 {
        padding: 40px 0;
    }
    .shiping-box h6 {
        font-size: 3rem;
    }
    .shiping-box p {
        font-size: 1.8rem;
    }
    .shiping-lists {
        padding: 30px 0;
    }

    /* Contact */
    .con-left {
        padding-top: 100px;
    }
    .con-left h1 {
        font-size: 3rem;
        line-height: 100%;
    }
    form.contact-form{
        padding-top: 50px;
    }
    .con-right {
        padding-top: 40px;
    }
    .contact-form .fontact-field {
        font-size: 1.5rem;
    }

    /* About us */
    .about-us-banner {
        padding: 100px 0 0 0;
    }

    .about-us-banner p {
        font-size: 1rem;
        width: 90%;
    }
    .about-us-banner h6 {
        font-size: 1.5rem;
        padding-top: 50px;
    }
    .abt-prd-wrap h5 {
        font-size: 1.5rem;
        line-height: 100%;
    }
    .abt-prd-wrap p {
        font-size: 1.125rem;
    }
    .abt-prd-wrap {
        margin-top: 50px;
    }

    /* Cook book section */
    .single-detail {
        padding-top: 100px;
    }
    h6.product-title {
        font-size: 2rem;
    }
    .review-count {
        font-size: 1.3rem;
    }
    .prd-price {
        font-size: 2rem;
    }
    .reviews-heading h6 {
        font-size: 2rem;
    }
    .reviews-heading h5 {
        font-size: 3.125rem;
    }
    .prd-review-left h6 {
        font-size: 2.5rem;
    }
    h5 {
    font-size: 1.5rem;
    }
    .addreview-text h5 {
        font-size: 3rem;
    }
    .formcontrol { 
        font-size: 0.7rem;
    }
    .formcontrol::placeholder { 
        font-size: 0.7rem;
    }
    .add-review {
        padding: 15px 2%;
    }
    button.form-btn {
        font-size: 1rem;
    }
    select.form-select {
        width: 120px;
    }
    ul.dd-filters {
        gap: 6%;
    }
    a.revibtn {
        font-size: 1rem;
    }
    .customer-heaiding h6 {
        font-size: 2.25rem;
    }
    .customer-heaiding p {
        font-size: 1.25rem;
        width: 130%;
    }
    .customer-text h6 {
        font-size: 1.563rem;
        width: 145%;
    }
    .customer-text p {
        font-size: 1.188rem;
        width: 138%;
        margin-top: 30px;
    }
    .customer-review-riting {
        display: flex;
        align-items: center;
        gap: 3%;
        justify-content: flex-start;
    }
    .customer-review-riting h6 {
        font-size: 3.438rem;
    }
    ul.five-stars li {
        font-size: 1.25rem;
    }
    .reviews-rating {
        gap: 5%;
        flex-wrap: wrap;
        display: flex;
        justify-content: flex-start;
    }
    .customer-heaiding h6 {
        width: 153%;
    }
    h5.rating-date {
        text-align: unset;
        padding-top: 8px;
    }
    .product-review-sec {
        padding-bottom: 50px;
    }
    .product-img-cont {
        width: 100%;
    }
    .product-nav {
        max-width: unset;
        height: unset;
        width: 100%;
    }
    .product-thumb-single {
        display: flex;
        flex-direction: column-reverse;
    }
    .prdthumb-nav {
        max-width: unset;
        height: auto;
        margin: 15px auto;
        overflow-x: auto;
    }
    .single-details-cont-child {
        flex-wrap: wrap;
        width: 100%;
    }
    .single-details-cont {
        padding: 0 1rem !important;
    }
    .prd-wraping {
        display: flex;
        flex-direction: column-reverse;
    }
    .product-rew-cont {
        padding: 0 1rem !important;
    }
    .customer-reviews {
        padding: 40px 3% !important;
    }
    .reivew-button {
        text-align: center;
    }
    ul.dd-filters {
        display: flex;
        justify-content: center;
    }
    .custo-rev-cont {
        margin-top: 20px;
    }
    .add-rev-btn {
        margin-top: 20px;
    }
    .arrow-prod-carousal {
        width: 1.5rem !important;
        height: 1.5rem;
    }
    .arrow-prod-carousal svg {
        height: auto;
        width: 50%;
    }
    .search-prod-carousal {
        width: 1.5rem !important;
        height: 1.5rem;
    }
    .search-prod-carousal svg { 
        height: auto;
        width: 50%;
    }

    #next-img-btn {
        position: absolute;
        left: unset;
        right: -3%;
        bottom: 109%;
        width: 15%;
        height: 15%;
    }
}