.line {
    font-family: "Space Grotesk", sans-serif;
    margin: 5px;
    font-size: 40px;
    font-weight: bold;
    color: whitesmoke;
}

.mpr {
    font-family: "Space Grotesk", sans-serif;
    margin: 2px;
    font-size: 28px;
    font-weight: 500;
    color: whitesmoke;
    line-height: 25px;
}

.merch {
    width: 860px;
    background: linear-gradient(135deg, #0b1120 0%, #121a2a 50%, #1a2438 100%);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    border-radius: 20px;
    margin-left: 20px;
    margin-right: 20px;
    border: 2px solid rgba(255, 255, 255, .8);
}

.buttons-money {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pro-btn-primary {
    font-family: "Sora", sans-serif;
    padding: 10px 15px;
    background: #a76d5e;
    color: whitesmoke;
    border: none;
    font-size: 24px;
    font-weight: 300;
    border-radius: 40px;
    margin: 20px 0;
}

.pro-btn-primary:hover {
    background: #bf8574;
    box-shadow: 0 0 20px rgba(167, 109, 94, 0.35);
    transition: 0.04s ease-in-out;
    cursor: pointer;
}

.pro-btn-secondary {
    font-family: "Sora", sans-serif;
    padding: 10px 35px;
    background: transparent;
    color: whitesmoke;
    border: 2px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(10px);
    font-size: 24px;
    font-weight: 300;
    border-radius: 40px;
    margin: 10px 0;
}

.pro-btn-secondary:hover {
    background: rgba(255, 255, 255, .06);
    border-color: #a76d5e;
    color: #a76d5e;
    transition: 0.04s ease-in-out;
    cursor: pointer;
}

.item-category {
    width: 400px;
    height: 60px;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    background: linear-gradient(45deg, #708f96, #aa895f);
}

.category {
    font-family: "Space Grotesk";
    font-size: 30px;
    font-weight: bold;
    margin: 10px;
    color: #1a1a1a;
}

.service-box {
    border-radius: 20px;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    width: 860px;
    height: auto;
    background: linear-gradient(
            rgba(71, 71, 71, 0.38),
            rgba(44, 41, 41, 0.83)
        ), url("../images/background-one.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    gap: 10px;
}

.service-cards {
    width: 260px;
    height: auto;
    background: rgba(255, 255, 255, 0.342);
    display: flex;
    margin: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    box-shadow: 6px 6px 10px -1px rgba(255, 255, 255, 0.733);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(c);
}

.servicename {
    font-family: "Space Grotesk" sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #000;
    margin: 5px;
}

.servicedescrip {
    font-family: "Sora" sans-serif;
    font-size: 18px;
    font-weight: 300;
    margin: 5px;
    margin-bottom: 8px;
    color: #000;
    line-height: 20px;
    padding: 0 20px;
}

.process-box {
    width: 860px;
    height: auto;
    background: linear-gradient(
            rgba(114, 113, 113, 0.38),
            rgba(65, 63, 63, 0.83)
        ), url(../images/background-two.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-radius: 20px;
    justify-content: space-evenly;
    gap: 10px;
}

.process-card {
    width: 350px;
    height: auto;
    background: rgba(255, 255, 255, 0.219);
    backdrop-filter: blur(25px);
    box-shadow: 6px 6px 10px -1px rgba(255, 255, 255, 0.733), inset 10px 10px 20px -8px rgba(2, 2, 2, 0.932);
    margin: 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.685);
}

.steps {
    font-family: "Space Grotesk" sans-serif;
    font-weight: bold;
    font-size: 30px;
    background: linear-gradient(45deg, #133c5a, #9c2968);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.processname {
    font-family: "Space Grotesk" sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #000;
    margin: 6px;
}

.processdescrip {
    font-family: "Sora" sans-serif;
    font-size: 18px;
    font-weight: 300;
    margin: 5px;
    margin-bottom: 8px;
    color: #000;
    line-height: 20px;
    padding: 0 20px;
}

.choose-box {
    width: 860px;
    height: auto;
    border-radius: 20px;
    background: url(../images/background-five.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.choose-card {
    width: 380px;
    height: 432px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.226);
    box-shadow: 8px 8px 15px -2px rgba(255, 255, 255, 0.733), inset -5px -5px 15px -2px rgba(2, 2, 2, 0.932);
    backdrop-filter: blur(10px);
    margin: 20px;
    border: 1px solid rgba(255, 255, 255, 0.685);
}

.chooseimg img {
    width: 380px;
    height: 380px;
    background-color: #14666d;
    border-radius: 15px 15px 40px 0;
}

.choosename {
    font-family: "Space Grotesk" sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #000;
    margin: 8px;
}

.faq-box {
    width: 860px;
    height: auto;
    border-radius: 20px;
    background: linear-gradient(
            rgba(114, 113, 113, 0.38),
            rgba(65,63, 63, 0.83)
        ), url(../images/background-six.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.faq-card {
    width: 380px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.342);
    box-shadow: 8px 8px 15px -2px rgba(255, 255, 255, 0.733);
    backdrop-filter: blur(10px);
    margin: 20px;
    border: 1px solid rgba(255, 255, 255, 0.685);
}

.faqname {
    font-family: "Space Grotesk" sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #000;
    margin: 5px;
    line-height: 25px;
    padding: 0 20px;
}

.faqdescrip {
    font-family: "Sora" sans-serif;
    font-size: 18px;
    font-weight: 300;
    margin: 5px;
    margin-bottom: 8px;
    color: #000;
    line-height: 20px;
    padding: 0 25px;
}

.cta-box {
    width: 860px;
    height: auto;
    border-radius: 20px;
    background: linear-gradient(
            rgba(114, 113, 113, 0.38),
            rgba(65, 63, 63, 0.83)
        ), url(../images/background-three.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.cta-card {
    width: 380px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.342);
    box-shadow: 8px 8px 15px -2px rgba(255, 255, 255, 0.733);
    backdrop-filter: blur(10px);
    margin: 20px;
    border: 1px solid rgba(255, 255, 255, 0.685);
}

.ctaname {
    font-family: "Space Grotesk" sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #000;
    line-height: 24px;
    padding: 15px;
}

.ctadescrip {
    font-family: "Sora" sans-serif;
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 8px;
    color: #000;
    line-height: 20px;
    padding: 15px;
}

.cta-btn {
    font-family: "Space Grotesk" sans-serif;
    width: 200px;
    height: 50px;
    border: none;
    border-radius: 0 20px 0 20px;
    margin: 8px;
    background: linear-gradient(45deg, #4d674d, #102317), rgba(114, 113, 113, 0.38);
    color: whitesmoke;
    font-size: 22px;
    font-weight: 500;
}

.cta-btn:hover {
    border-radius: 25px 0 25px 0;
    cursor: pointer;
    box-shadow: 10px 10px 6px -2px rgba(255, 255, 255, 0.733);
    border: 1px solid rgba(255, 255, 255, 0.685);
}

/*======================================
            800px
======================================*/

@media (max-width:800px){

    .merch,
    .service-box{

        width:95%;

    }

    .line{

        font-size:36px;

    }

    .mpr{

        font-size:24px;

    }

    .item-category{

        width:350px;

        height:55px;

    }

    .category{

        font-size:24px;

    }

    .service-box{

        grid-template-columns:repeat(2,1fr);

        gap:20px;

        padding:20px;

    }

    .service-cards{

        width:100%;

        margin:0;

    }

    .faq-box{

        width:95%;

        grid-template-columns:repeat(2,1fr);

        padding:20px;

        gap:20px;

    }

    .faq-card{

        width:100%;

        margin:0;

    }

    .cta-box{

        width:95%;

        grid-template-columns:repeat(2,1fr);

        padding:20px;

        gap:20px;

    }

    .cta-card{

        width:100%;

        margin:0;

        padding:25px;

    }

    .ctaname{

        font-size:26px;

        text-align:center;

    }

    .ctadescrip{

        font-size:18px;

        text-align:center;

    }

}


/*======================================
            700px
======================================*/

@media (max-width:700px){

    .line{

        font-size:32px;

    }

    .mpr{

        font-size:22px;

    }

    .service-box{

        grid-template-columns:repeat(2,1fr);

    }

    .service-cards{

        padding:15px;

    }

    .servicename{

        font-size:24px;

    }

    .servicedescrip{

        font-size:18px;

    }

    .faq-box{

        grid-template-columns:1fr;

    }

    .faq-card{

        width:100%;

    }

    .faqname{

        font-size:24px;

    }

    .faqdescrip{

        font-size:18px;

    }

}


/*======================================
            540px
======================================*/

@media (max-width:540px){

    .merch{

        width:96%;

        padding:20px;

    }

    .line{

        font-size:28px;

        text-align:center;

    }

    .mpr{

        font-size:18px;

        text-align:center;

    }

    .pro-btn{

        width:220px;

        height:48px;

        font-size:20px;

    }

    .item-category{

        width: 80%;

        height:50px;

    }

    .category{

        font-size:22px;

    }

    .service-box{

        grid-template-columns: repeat(2, 1fr);

    }

    .buttons-money {
        flex-direction: row;
        gap: 15px;
    }

    .pro-btn-primary {
        font-size: 18px;
        padding: 10px 10px;
    }

    .pro-btn-secondary {
        font-size: 18px;
        padding: 10px 25px;
    }

    .process-box {
        grid-template-columns: repeat(2, 1fr);
    }

    .choose-box{

        width:96%;

        padding:15px;

        gap:18px;

    }

    .choose-card{

        padding:20px;

    }

    .chooseimg img{

        height:260px;

        border-radius:15px;

    }

    .choosename{

        font-size:22px;

        text-align:center;

    }

    .cta-box{

        width:96%;
        grid-template-columns: repeat(1, 1fr);
        padding:15px;

    }

    .cta-card{

        padding:20px;

    }

    .ctaname{

        font-size:22px;

    }

    .ctadescrip{

        font-size:17px;

    }

    .cta-btn{

        width:220px;

        height:48px;

        font-size:20px;

    }

}


/*======================================
            490px
======================================*/

@media (max-width:490px){

    .line{

        font-size:26px;

    }

    .mpr{

        font-size:17px;

    }

    .service-cards{

        width:100%;

    }

    .servicename{

        font-size:22px;

    }

    .servicedescrip{

        font-size:17px;

    }

    .choose-card{

        padding:18px;

    }

    .chooseimg img{

        height:240px;

    }

    .choosename{

        font-size:20px;

    }

    .faq-card{

        padding:18px;

    }

    .faqname{

        font-size:20px;

    }

    .faqdescrip{

        font-size:16px;

    }

    .cta-card{

        padding:18px;

    }

    .cta-btn{

        width:200px;

        height:46px;

        font-size:18px;

    }

}


/*======================================
            460px
======================================*/

@media (max-width:460px){

    .merch{

        width:98%;

        margin:10px auto;

    }

    .pro-btn{

        width:200px;

        height:45px;

        font-size:18px;

    }

    .item-category{

        width: 80%;

    }

    .category{

        font-size:20px;

    }

    .service-box{

        padding:15px;

    }

    .servicename {
        font-size: 18px;
        line-height: 20px;
    }

    .servicedescrip {
        font-size: 14px;
        padding: 0 10px;
    }

    .process-box {
        width: 95%;
        grid-template-columns: repeat(2, 1fr);
    }

    .process-card {
        width: 90%;
        margin: 15px 10px;
        margin-bottom: 5px;
        backdrop-filter: blur(5px);
    }

    .steps {
        font-size: 18px;
    }

    .processname {
        font-size: 16px;
        margin: 0;
    }

    .processdescrip {
        font-size: 14px;
        line-height: 13px;
        padding: 0 10px;
        margin: 0;
        margin-bottom: 8px;
    }

    .choose-box{

        width:98%;
        grid-template-columns: repeat(2, 1fr);
        padding:12px;

    }

    .choose-card{
        width: 90%;
        border-radius:12px;
        padding: 0;
        height: auto;
        margin: auto;

    }

    .chooseimg img{

        border-radius: 13px;
        width: 100%;
        height:220pX;

    }

    .choosename{

        font-size:18px;

    }

    .faq-box{

        width:98%;

        padding:12px;

    }

    .faq-card{

        border-radius:12px;

    }

    .faqname{

        font-size:19px;

    }

    .faqdescrip{

        font-size:15px;

    }

    .cta-box{

        width:98%;

        padding:12px;

    }

    .cta-card{

        border-radius:14px;

        padding:18px;

    }

    .ctaname{

        font-size:20px;

    }

    .ctadescrip{

        font-size:16px;

    }

    .cta-btn{

        width:180px;

        height:44px;

        font-size:17px;

    }

}


/*======================================
            400px
======================================*/

@media (max-width:400px){

    .line{

        font-size:24px;

    }

    .mpr{

        font-size:16px;

    }

    .pro-btn{

        width:180px;

        height:42px;

        font-size:17px;

    }

    .item-category{

        width:220px;

        height:45px;

    }

    .category{

        font-size:18px;

    }

    .servicename{

        font-size: 18px;
        line-height: 20px;

    }

    .servicedescrip{

        font-size: 14px;
        padding: 0 10px;
    }

    .choose-card{

        padding:15px;

    }

    .chooseimg img{

        height:200px;

    }

    .choosename{

        font-size:18px;

    }

    .faq-card{

        padding:15px;

    }

    .faqname{

        font-size:18px;

    }

    .faqdescrip{

        font-size:14px;

    }

    .ctaname{

        font-size:18px;

    }

    .ctadescrip{

        font-size:15px;

    }

    .cta-btn{

        width:170px;

        height:42px;

        font-size:16px;

    }

}


/*======================================
            340px
======================================*/

@media (max-width:340px){

    .line{

        font-size:20px;

    }

    .mpr{

        font-size:14px;

    }

    .pro-btn{

        width:160px;

        height:40px;

        font-size:15px;

    }

    .item-category{

        width:190px;

        height:42px;

    }

    .category{

        font-size:16px;

    }

    .service-box{

        padding:10px;

        gap:15px;

    }

    .service-cards{

        padding:12px;

    }

    .servicename{

        font-size:18px;

    }

    .servicedescrip{

        font-size:14px;

    }

    .faq-box{

        width:100%;

        padding:8px;

        gap:12px;

    }

    .faq-card{

        padding:12px;

        border-radius:10px;

    }

    .faqname{

        font-size:16px;

        text-align:center;

    }

    .faqdescrip{

        font-size:13px;

        line-height:1.5;

        text-align:center;

    }

    .cta-box{

        width:100%;

        padding:8px;

        gap:12px;

    }

    .cta-card{

        padding:12px;

        border-radius:10px;

    }

    .ctaname{

        font-size:16px;

    }

    .ctadescrip{

        font-size:13px;

        line-height:1.5;

    }

    .cta-btn{

        width:150px;

        height:38px;

        font-size:14px;

        border-radius:20px;

    }

}