/* responsive for 575px */
@media only screen and (max-width: 575px) {
    .header-left h1 {
        font-size: 5vw;
    }

    .header-mob-right ul li {
        font-size: 3vw;
    }

    .header-mob-right ul li img {
        width: 3.5vw;
        height: 3vw;
        border-radius: 30px;
    }

    .search-bar {
        align-items: center;
    }

    input[type="text"] {
        font-size: 3vw;
    }



    .sec1-inn {
        padding: 5vw 2vw;
    }

    .sec1-inn h2 {
        padding-bottom: 3vw;
        text-align: center;
        font-size: 4vw;
        font-weight: 700;
    }

    .s1-flex-box {
        width: 94vw;
        gap: 2vw;
        flex-direction: column;
    }

    .s1-fb1 {
        width: 96vw;
        height: 80vw;
        padding: 5vw 3vw;
    }

    .s1-fb2 {
        width: 96vw;
        height: 80vw;
        padding: 5vw 3vw;
    }

    .s1-fb3 {
        width: 96vw;
        height: 80vw;
        padding: 5vw 3vw;
    }

    .s1-fb4 {
        width: 96vw;
        height: 80vw;
        padding: 5vw 3vw;
    }

    .s1-fb5 {
        width: 96vw;
        height: 80vw;
        padding: 5vw 3vw;
    }

    .quote {
        gap: 1vw;
        padding: 5px 5vw;
    }

    h5 {
        font-size: 2.5vw;
    }

    del {
        font-size: 2.5vw;
    }

    .sec2-inn {
        width: 96vw;
    }

    .sec2-inn h2 {
        text-align: center;
        font-size: 4vw;
        padding-bottom: 3vw;
    }

    .s2-flex-box {
        width: 96vw;
        flex-direction: column;
        gap: 5vw;
    }

    .s2-fb1 h4 {
        font-size: 3vw;
    }

    .s3-flex-box {
        flex-direction: column;
    }

    .s3-fb {
        width: 96vw;
        flex-direction: column;
        align-items: center;
    }

    .s3-fb a {
        width: 30vw;
        padding: 3vw 6vw;
        margin-top: 2vw;
        margin-bottom: 3vw;
        font-size: 2.5vw;
        text-align: center;
    }

    .quote-4 {
        width: 13vw;
        padding-left: 3vw;
        margin: 17vw 2vw;
    }

    .quote-4 h5 {
        font-size: 2vw;
    }

    .s3-fb1 {
        width: 96vw;
        height: 75vw;
    }

    .s4-flex-box {
        flex-wrap: wrap;
        gap: 2vw;
    }

    .s4-fb1 {
        width: 46vw;
        height: 35vw;
    }

    .s4-fb2 {
        width: 46vw;
        height: 35vw;
    }

    .s4-fb3 {
        width: 46vw;
        height: 35vw;
    }

    .s4-fb4 {
        width: 46vw;
        height: 35vw;
    }

    .s4-fb5 {
        width: 46vw;
        height: 35vw;
    }

    .s4-fb6 {
        width: 46vw;
        height: 35vw;
    }

    .sec5-inn h3 {
        font-size: 3vw;
        text-align: center;
    }

    .s5-flex-box {
        flex-wrap: wrap;
        gap: 2vw;
    }

    .s5-fb {
        width: 46vw;
        gap: 3vw;
    }

    .s5-fb img {
        width: 15vw;
    }

    .s5-fb p {
        font-size: 2.5vw;
    }

    .sec6-inner {
        width: 96vw;
        margin-left: 2vw;
    }

    .sec6-inner h2 {
        font-size: 3vw;
        text-align: center;
        margin-bottom: 3vw;
    }

    .s6-flex-box {
        flex-direction: column;
        gap: 5vw
    }

    .s6-fb h6 {
        font-size: 3vw;
    }

    .s9 {
        align-items: inherit;
    }

    .s9-box {
        width: 96vw;
        text-align: center;
    }

    .sec2-inn h2 {
        text-align: center;
        font-size: 4vw;
        /* padding-bottom: 3vw; */
    }

    .s10-flex-box {
        flex-direction: column;
        gap: 5vw;
    }

    .s10-fb1 {
        width: 96vw;
    }

    .s10-fb1 h4 {
        font-size: 3vw;
        margin-bottom: 1vw;
        text-align: center;
        margin-top: 2vw;
    }

    .s10-fb1 p {
        font-size: 2.5vw;
        text-align: center;
        margin-top: 3vw;
    }

    .introo h2 {
        font-size: 4vw;
    }

    .top-p {
        font-size: 3vw;
    }

    .btm-p {
        text-align: justify;
        font-size: 3vw;
        line-height: 2.5vw;
    }

    .works h2 {
        font-size: 4vw;
    }

    .works p {
        text-align: justify;
        line-height: 2.5vw;
        font-size: 3vw;
    }

    .btm-hdng {
        font-size: 3vw;
    }

    .btm-btn {
        font-size: 2.5vw;
    }

    .sec-12 h4 {
        font-size: 2.5vw;
        margin-bottom: 2vw;
    }

    .input-button-wrapper button {
        font-size: 2vw;
    }

    .input-button-wrapper {
        width: 67vw;
    }

    .footer-top svg {
        width: 3vw;
        color: white;
    }

    .footer-top h2 {
        font-size: 3vw;
    }

    .footer-btm {
        flex-direction: column;
    }

    .fi-left {
        width: 100%;
        padding: 5vw;
        gap: 2vw;
    }

    .fi-left h2 {
        width: 15vw;
        height: 14vw;
        border-radius: 50px;
    }

    .fi-left h3 {
        width: 35vw;
        height: 5vw;
        font-size: 2vw;
    }

    .fi-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .shop h2,
    .sell h2,
    .about h2,
    .help h2 {
        font-size: 3vw;
    }

    .shop,
    .sell,
    .about,
    .help {
        text-align: center;
    }

    .shop ul,
    .sell ul,
    .about ul,
    .help ul {
        gap: 1vw;
    }

    .shop ul li,
    .sell ul li,
    .about ul li,
    .help ul li {
        font-size: 2.5vw;
    }

    .footer-outer {
        flex-direction: column;
        align-items: center;
    }

    .fo-left {
        width: 80vw;
    }

    .fo-right {
        width: 96vw;
    }

    .fol-fb {
        justify-content: center;
    }

    .fol-fb img {
        width: 5vw;
        height: 4vw;
    }

    .fb h6 {
        font-size: 2vw;
        color: white;
    }

    .for-fb {
        justify-content: center;
        gap: 2vw;
    }

    .fb-r h6 {
        font-size: 2vw;
    }

    .intro {
        font-size: 2vw;
    }

    .icon-box {
        justify-content: center;
    }

    .ib i {
        font-size: 3vw;
    }
}











/* responsive for tablet screen 1024px */
@media only screen and (max-width: 1024px) {

    header {
        width: 96vw;
        padding: 1vw 0vw 0.2vw 2vw;
    }

    .header-desktop {
        display: none;
    }

    .header- .header-tab-mob {
        width: 100vw;
        display: block;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 2vw 2vw 0 2vw;
    }

    .header-mob-right ul {
        display: flex;
        gap: 1.5vw;
    }

    .header-mob-right ul li {
        font-size: 2vw;
    }

    .header-mob-right ul li img {
        width: 2.3vw;
        height: 2vw;
        border-radius: 30px;
    }

    .header-mob-top {
        width: 96vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        left: 7vw;
        top: 8.2vw;
        right: 20px;
        background: #fff;
        padding: 10px;
        border-radius: 6px;
    }

    .nav-links.active {
        display: flex;
        margin: 4vw 58vw 0vw 0vw;
        box-shadow: 0px 1px 5px 1px #b2b2b2;
        /* width: 24vw; */
    }

    li.head-h2 {
        font-size: 2.5vw;
        font-weight: 700;
        text-align: center;
    }

    nav {
        padding: 0.5vw 1vw 1vw 0vw;
        margin-left: 5vw;
        border: none;
    }

    .hamburger {
        display: block;
        font-size: 2.5vw;
    }

    .nav-links li {
        padding-bottom: 2vw;
    }

    .nav-links li a {
        color: black;
        font-size: 2vw;
    }

    .header-mob-btm {
        display: flex;
        align-items: center;
        width: 90vw;
        margin-top: 2vw;
    }

    .search-bar {
        width: 84vw;
        display: flex;
        border: 1px solid black;
        border-radius: 33px;
        padding: 0.2vw 0.2vw 0.2vw 1vw;
    }

    input[type="text"] {
        width: 80vw;
        padding: 1vw 0;
        font-size: 2vw;
        border-radius: 25px;
        border: none;
    }

    .search-bar button {
        background: pink;
        border: none;
        width: 5vw;
        height: 4vw;
        border-radius: 25px;
    }

    .hs-box-2 h2 {
        font-size: 2.5vw;
    }

    .hr-btn {
        font-size: 2vw;
    }




}


/* responsive for desktop screen min with 1025px */
@media only screen and (min-width: 1025px) {
    .header-desktop {
        display: block;
    }

    .header-tab-mob {
        display: none;
    }

    .header-inn {
        flex-direction: column;
    }

    .header-destop-top {
        align-items: center;
        margin-left: 2vw;
        display: flex;
    }

    .header-destop-btm {
        width: 96vw;
    }

    .nav-ul {
        margin: 1vw 0;
        justify-content: center;
    }

    i.fa-solid.fa-magnifying-glass {
        width: 3vw !important;
        border-radius: 25px;
    }



}