@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;0,700;0,900;1,300;1,500&display=swap');

* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    scroll-padding-top: 2rem;
    scroll-behavior: smooth;
    /* background-color: black; */
    color: white;
}

body {
    background-color: black;
    color: white;
    cursor: pointer;
}


img {
    width: 100px;
    cursor: pointer;
    transition: transform 0.5s ease;
}



img:hover,
.img1:hover,
.img2:hover,
.img3:hover {
    transform: scale(.9);
    position: relative;
}

.container {
    max-width: 1400px;
    margin-left: 1rem;
    margin-right: 1rem;
    /* margin: auto; */
}

button {
    background: none;
    cursor: pointer;
}

header {
    display: flex;
    justify-content: space-between;
    /* font-size: 0.7rem; */
    padding-top: 20px;
    background-color: black;

}

.contact {
    display: flex;
}

header h1,
nav li,
nav i {

    font-size: 0.9rem;
    font-weight: 200;
    color: #ced4da;

}

nav {
    display: flex;
    align-items: center;
}

.color {
    background: #7b2cbf;
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

nav li {
    padding: 0px 15px;
}

.main1 {
    display: flex;
    justify-content: space-between;
    padding-top: 50px;
}

.main1 img {
    width: 85px;
    height: 85px;
    border-radius: 50%;
}

/* .main1 div {
    padding: 0px 55px;
} */

.main1 h2 {
    font-size: 2.7rem;
    font-weight: 300;
    color: #ced4da;
    line-height: 3.2rem;
}

/* .main-p {
    padding-left: 10rem;

} */

.main-p p {
    font-weight: 200;
    color: #ced4da;
    text-align: end;


}

.main-1 {
    display: flex;
    gap: .5rem;
}

.main32,
.main31 {
    display: flex;
    gap: 1rem;
}

.main-3 {
    justify-content: space-between;
    display: flex;
    padding-left: 6rem;
}

.main-2 {
    color: aliceblue;
    border: 1px solid white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    float: right;
}

.btn {
    padding-bottom: 60px;
}

.year {
    text-align: center;
    border: .5px solid #a9aaab;
    padding: 4px;
    border-radius: 17px;
    transition: .2s ease;
    color: aliceblue;
    cursor: pointer;
}

.year:hover {
    background: white;
    color: black;
}

.year p {
    font-size: .8rem;
    font-weight: 200;
    color: #ced4da;
    padding: 2px;
    transition: .2s ease;
}

.year p:hover {
    color: #121212;
}

.main32 {
    font-size: .8rem;
    font-weight: 200;
    color: #ced4da;
    align-items: center;
}

.image {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    padding-top: 50px;
    gap: 1rem;
    width: 100%;
    position: relative;
}

.img1 {
    background: url(https://images.mockupcloud.com/images/thumbs/images/2021/10/22/large-dropper-17-570x380.jpg);
    position: relative;
    width: 840px;
    min-height: 470px;
    display: flex;
    align-items: flex-end;
    /* background: url(bev.jpeg); */
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position: center; */
    overflow: hidden;
    border-radius: 20px;
    padding: 20px;
    transition: transform 0.5s ease;
}




.img2 {
    background: url(https://i.pinimg.com/736x/b3/76/42/b376427c7f10ce134d8841027da86694.jpg);
    position: relative;
    width: 100%;
    min-height: 470px;
    display: flex;
    align-items: flex-end;
    /* background: url(bev.jpeg); */
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position: center; */
    overflow: hidden;
    border-radius: 20px;
    padding: 20px;
    transition: transform 0.5s ease;
}








.img1 img,
.img2 img {
    width: 100%;
    height: 400px;
    position: relative;

}

.text p {
    float: right;
}

.text {
    position: relative;
    bottom: 0;
}

.img1 button,
.img2 button {

    padding: 5px;
    padding-left: 6px;
    padding-right: 6px;
    background: #7b2cbf;
    border: 1px solid #7b2cbf;
    border-radius: 17px;
    font-weight: 200;
    color: #ced4da;
}

.img1,
.img2 {
    display: flex;
    top: 0;

    justify-content: space-between;


}

.img1 p,
.img2 p {
    font-weight: 200;
    color: #ced4da;
    font-size: 0.9rem;
}

/* .img32 {
    position: absolute;
    align-items: flex-start;
} */

.img3 {
    /* background: url(https://images.unsplash.com/photo-1612188842101-f976582906fc?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MXx8fGVufDB8fHx8fA%3D%3D); */
    background: url(https://images.unsplash.com/photo-1612188842101-f976582906fc?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MXx8fGVufDB8fHx8fA%3D%3D);
    width: 100%;
    height: 470px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    object-fit: cover;
    transition: transform 0.5s ease;


}

.img31 {
    text-align: center;
    align-items: center;
    justify-content: center;
    padding-top: 150px;
    padding-bottom: 160px;
}

.img32 {
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;


}

.img31 h3 {
    font-size: 2.5rem;
    font-weight: 300;
    text-align: center;
    line-height: 2.7rem;
}

.img31 span {

    font-weight: 200;

}

.space {
    padding-top: 20px;
    padding-bottom: 50px;
}

.second h2 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 2.7rem;
    text-align: end;
    float: right;
}

.second {
    padding-bottom: 100px;
}



.value--accordion {
    border-top: .5px solid #a9aaab;
    /* border-bottom: 1px solid #a9aaab; */
}

.type {
    border-bottom: .5px solid #a9aaab;
    padding-bottom: 20px;
}

.value {
    padding-top: 20px;
    padding-bottom: 50px;
}



.value--container {
    row-gap: 3rem;
}

.value--images {
    position: relative;
    display: flex;
    justify-content: center;
}

.value--orbe {
    width: 200px;
    height: 205px;
    background-color: hsl(228, 24%, 97%);
    border-radius: 135px 135px 16px 16px;
}

.value--img {
    position: absolute;
    width: 200px;
    height: 300px;
    overflow: hidden;
    border-radius: 125px 125px 12px 12px;
    box-shadow: hsla(228, 66%, 25%, .25);
}

.value--description {
    font-size: var(--small-font-size);
    margin-bottom: 2rem;
}

/* .value--accordion {
    display: grid;
    row-gap: 1.5rem;

} */

.value--accordion-item {
    background-color: var(--body-color);
    border: 2px solid var(--border-color);
    border-radius: .5rem;
    padding: 1rem .75rem;
}

.value--accordion-header {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.value--accordion-icon {
    background-color: var(--first-color-lighten);
    padding: 5px;
    border-radius: .25rem;
    font-size: 18px;
    color: var(--first-color);
    margin-right: .75rem;
    transition: .3s;
}

.value--accordion-title {
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 1.7rem;
    color: #a9aaab;
}

.value--accordion-arrow {
    display: inline-flex;
    background-color: var(--first-color-lighten);
    padding: .25rem;
    color: var(--first-color);
    border-radius: 2px;
    font-size: 10px;
    margin-left: auto;
    transition: .3s;
}

.value--accordion-arrow i {
    transition: .4s;
}


/* .value--accordion-description {

    padding: 1.25rem 2.5rem 0 2.75rem;
} */

.value--accordion-description {

    padding: 1.25rem 0 0 0;
}

.value--accordion-description {
    font-size: 0.9rem;
    color: #a9aaab;
    font-weight: 200;
}

.img-2 {

    display: flex;
    gap: .5rem;
    padding-top: 1rem;
}

.img-2 p {
    font-size: 0.5rem;
}

.value--accordion-content {
    overflow: hidden;
    height: 0;
    transition: all .25s ease;
}

.accordion-open {
    box-shadow: 0 12px 32px hsla(228, 66%, 45%, .1);
}

.accordion-open .value--accordion-icon {
    box-shadow: 0 4px 4px hsla(228, 66%, 45%, .1);
}

.accordion-open .value--accordion-arrow {
    box-shadow: 0 2px 4px hsla(228, 66%, 45%, .1);
}

.accordion-open .value--accordion-arrow i {
    transform: rotate(-60deg);

    color: #ced4da;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    align-items: center;
    text-align: center;
}

.arrow {

    font-size: 1.5rem;

    transform: rotate(-210deg);
    font-weight: 200;
    color: #a9aaab;
}

.arrow1 {



    transform: rotate(-210deg);
    font-weight: 200;
    color: #a9aaab;
}

.content-hidden1 {
    display: none;
}

.collapsible1.expanded .content-hidden1 {
    display: block;
}

.content-hidden {
    display: none;
}

.collapsible.expanded .content-hidden {
    display: block;
}

.content-hidden2 {
    display: none;
}

.collapsible2.expanded .content-hidden2 {
    display: block;
}

.third {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
    width: 100%;
    height: 100%;
    gap: 2rem;
}

.third-1 img {
    width: auto;
}

.third-1 {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    width: 100%;
    /* background: rgb(30, 30, 30); */
    background: #121212;
    padding: 40px;
    border-radius: 20px;

}

/* .third-2 img {
    width: 70px;

    height: 70px;
    border-radius: 50%;
} */

.third-2 img {
    width: 100%;
    height: 100%;

}

.third-2 .img {
    width: 130px;
    height: 90px;
    object-fit: contain;
}



.third-2 h2 {
    padding-top: 30px;
    font-size: 2rem;
    font-weight: 200;
    color: white;


}

.third-2 p {
    /* padding-top: 10px; */
    font-size: 0.9rem;
    font-weight: 200;
    color: #ced4da;
    /* line-height: 1.7rem; */
    /* padding-bottom: 10px; */

}

.third-4 {

    /* gap: 4rem; */
    grid-template-columns: repeat(2, 2fr);
    /* padding-bottom: 30px; */
    padding-top: 10px;



}

.second span {
    font-size: 0.9rem;
}

.third {
    padding-bottom: 50px;
}

.third-4 .year {
    background: none;



}

.third-4 .year p {
    font-size: 0.7rem;
    padding: 5px;
}

.year2 {
    margin-top: 10px;
}

.third-2 {
    width: 300px;

}





.year2 p {
    display: flex;

}

.content-hidden img,
.content-hidden1 img,
.content-hidden2 img {
    width: 350px;
    height: 360px;
    border-radius: 20px;

}

main {
    padding-bottom: 50px;
}

.footer1,
.footer4 {
    display: flex;
    justify-content: space-between;
}

.footer1 img {
    width: 65px;
    height: 65px;
}

.footer2,
.footer3 {
    display: flex;
}

.footer2 h2 {

    font-size: 2.5rem;
    font-weight: 200;
    color: white;
    line-height: 3.1rem;



}

.fot {
    align-items: center;
}

.footer2 span {
    /* padding-top: 10px; */
    font-size: 0.9rem;
    font-weight: 200;
    color: #ced4da;
    /* line-height: 1.7rem; */
    /* padding-bottom: 10px; */

}

.footer3 {
    gap: 1.5rem;
    align-items: center;

}

.footer3 h1 {
    font-size: 0.9rem;
    font-weight: 200;
    color: #a9aaab;
}

.footer5 {
    display: flex;
    gap: 4rem;
}

.footer6 a {
    color: green;
    font-size: 0.8rem;
}

.footer6 p {
    color: #a9aaab;
    font-size: 0.8rem;
}

.social {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.social .bx {
    padding: 8px;
    background: white;
    color: black;
    border-radius: 5rem;
    font-size: 15px;
}

.social .bx:hover {
    background: var(--green-color);
    color: var(--bg-color);
    transition: 0.2s all linear;
}

.footer8 {
    display: flex;
    gap: 1.5rem;
}

.footer8 p,
.footer7 p {
    font-size: 0.9rem;
    color: #ced4da;
    font-weight: 200;
}

footer {
    max-width: 968px;
    margin-left: auto;
    margin-right: auto;
    display: grid;

    gap: 1.5rem;
    margin-top: 2rem;
    background: #121212;
    border-radius: 20px;
    padding: 30px;
}

.footer4 {
    padding-left: 4rem;
}

body {
    padding-bottom: 30px;
}

.third {
    overflow-y: scroll;
}

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

    .img1,
    .img2 {
        width: 100%;
    }

    .main1 h2 {
        font-size: 2rem;
    }

    .third {
        grid-template-columns: repeat(2, 2fr);
        display: grid;
        width: 100%;
    }

    .content-hidden1 img,
    .content-hidden2 img,
    .content-hidden img {
        width: 200px;
        /* background: rgb(30, 30, 30); */
    }
}

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

    .img1,
    .img2 {
        width: 100%;
    }

    .main1 h2 {
        font-size: 1.5rem;

    }

    .third {
        grid-template-columns: repeat(1, 3fr);
        display: grid;
        width: 100%;
    }

    .content-hidden1 img,
    .content-hidden2 img,
    .content-hidden img {
        width: 100%;
        /* background: rgb(30, 30, 30); */
    }

    .fot h2 {
        font-size: 2rem;
    }

    .footer8,
    .footer5 {
        display: grid;
        text-align: end;
    }

    .footer5 {
        gap: 1rem;
    }
}

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

    .img1,
    .img2 {
        width: 100%;
        min-height: 350px;
    }

    .img3 {

        height: 350px;
    }


    .main1 h2 {
        font-size: 1.5rem;
        line-height: normal;
        align-items: center;

    }

    .btn {
        padding-bottom: 45px;
    }

    .third {
        grid-template-columns: repeat(1, 3fr);
        display: grid;
        width: 100%;
    }

    .content-hidden1 img,
    .content-hidden2 img,
    .content-hidden img {
        width: 100%;
        /* background: rgb(30, 30, 30); */
    }

    .fot h2 {
        font-size: 2rem;
    }

    .footer8,
    .footer5 {
        display: grid;
        text-align: end;
    }

    .footer5 {
        gap: 1rem;
    }

    .img31 {
        text-align: center;
        align-items: center;
        justify-content: center;
        padding-top: 70px;
        padding-bottom: 110px;
    }

    .img31 h3 {
        font-size: 2rem;
        line-height: normal;
    }
}

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



    .img1,
    .img2 {
        width: 100%;
        min-height: 350px;
    }

    .img3 {

        height: 350px;
    }

    .main-1 {
        display: grid;
        gap: 0rem;
    }

    .main-3 {
        padding-left: 0rem;
    }

    .second h2 {
        font-size: 1.5rem;
    }


    .main1 h2 {
        font-size: 1.5rem;
        line-height: normal;
        align-items: center;

    }

    .btn {
        padding-bottom: 45px;
    }

    .third {
        grid-template-columns: repeat(1, 3fr);
        display: grid;
        width: 100%;
    }

    .content-hidden1 img,
    .content-hidden2 img,
    .content-hidden img {
        width: 100%;
        /* background: rgb(30, 30, 30); */
    }

    .fot h2 {
        font-size: 2rem;
    }

    .footer8,
    .footer5 {
        display: grid;
        text-align: end;
    }

    .footer5 {
        gap: 1rem;
    }

    .img31 {
        text-align: center;
        align-items: center;
        justify-content: center;
        padding-top: 70px;
        padding-bottom: 110px;
    }

    .img31 h3 {
        font-size: 2rem;
        line-height: normal;
    }

    .value {
        padding-top: 20px;
        padding-bottom: 50px;
    }

    .footer1 {
        display: grid;
        gap: 1rem;
    }

    .footer3 {
        padding-left: 4rem;
    }

    footer {
        padding: 10px;
    }

    .footer3 h1 {
        font-size: 0.8rem;
    }

    .footer4 {
        display: grid;
    }

    .fot1 {
        display: grid;

    }

    .footer6 a,
    .footer6 p {
        float: left;
    }

    .footer4 {

        gap: .5rem;
    }

    .footer8 {
        gap: .5rem;
    }

    .footer8 p {
        float: left;
    }

}

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

    .img1,
    .img2 {
        width: 100%;
        min-height: 350px;
    }

    .img3 {

        height: 350px;
    }

    .main-1 {
        display: grid;
        gap: 0rem;
    }

    .main-3 {
        padding-left: 0rem;
    }

    .second h2 {
        font-size: 1.3rem;
    }


    .main1 h2 {
        font-size: 1.5rem;
        line-height: normal;
        align-items: center;

    }

    .btn {
        padding-bottom: 45px;
    }

    .third {
        grid-template-columns: repeat(1, 3fr);
        display: grid;
        width: 100%;
    }

    .third-1 {
        grid-template-columns: repeat(1, 2fr);
        display: grid;
        width: 100%;
        gap: 1rem;
    }

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

    .content-hidden1 img,
    .content-hidden2 img,
    .content-hidden img {
        width: 100%;
        /* background: rgb(30, 30, 30); */
    }

    .fot h2 {
        font-size: 2rem;
    }

    .footer8,
    .footer5 {
        display: grid;
        text-align: end;
    }

    .footer5 {
        gap: 1rem;
    }

    .img31 {
        text-align: center;
        align-items: center;
        justify-content: center;
        padding-top: 90px;
        padding-bottom: 110px;
    }

    .img31 h3 {
        font-size: 1.5rem;
        line-height: normal;
    }

    .value {
        padding-top: 40px;
        padding-bottom: 50px;
    }

    .footer1 {
        display: grid;
        gap: 1rem;
    }

    .footer3 {
        padding-left: 4rem;
    }

    footer {
        padding: 10px;
    }

    .footer3 h1 {
        font-size: 0.8rem;
    }

    .footer4 {
        display: grid;
    }

    .fot1 {
        display: grid;

    }

    .footer6 a,
    .footer6 p {
        float: left;
    }

    .footer4 {

        gap: .5rem;
    }

    .footer8 {
        gap: .5rem;
    }

    .footer8 p {
        float: left;
    }

}

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

    .main-p {
        display: none;
    }

    .img1,
    .img2 {
        width: 100%;
        min-height: 350px;
    }

    .img3 {

        height: 350px;
    }

    .main-1 {
        display: grid;
        gap: 0rem;
    }

    .main-3 {
        padding-left: 0rem;
    }

    .second h2 {
        font-size: 1.3rem;
    }


    .main1 h2 {
        font-size: 1.5rem;
        line-height: normal;
        align-items: center;

    }

    .btn {
        padding-bottom: 45px;
    }

    .third {
        grid-template-columns: repeat(1, 3fr);
        display: grid;
        width: 100%;
    }

    .third-1 {
        grid-template-columns: repeat(1, 2fr);
        display: grid;
        width: 100%;
        gap: 1rem;
    }

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

    .content-hidden1 img,
    .content-hidden2 img,
    .content-hidden img {
        width: 100%;
        /* background: rgb(30, 30, 30); */
    }

    .fot h2 {
        font-size: 2rem;
    }

    .footer8,
    .footer5 {
        display: grid;
        text-align: end;
    }

    .footer5 {
        gap: 1rem;
    }

    .img31 {
        text-align: center;
        align-items: center;
        justify-content: center;
        padding-top: 90px;
        padding-bottom: 110px;
    }

    .img31 h3 {
        font-size: 1.5rem;
        line-height: normal;
    }

    .value {
        padding-top: 40px;
        padding-bottom: 50px;
    }

    .footer1 {
        display: grid;
        gap: 1rem;
    }

    .footer3 {
        padding-left: 4rem;
    }

    footer {
        padding: 10px;
    }

    .footer3 h1 {
        font-size: 0.8rem;
    }

    .footer4 {
        display: grid;
    }

    .fot1 {
        display: grid;

    }

    .footer6 a,
    .footer6 p {
        float: left;
    }

    .footer4 {

        gap: .5rem;
    }

    .footer8 {
        gap: .5rem;
    }

    .footer8 p {
        float: left;
    }

}

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

    .main1 {
        padding-top: 20px;
    }

    .main-3 {
        display: grid;
        gap: 1rem;
    }

    .img1,
    .img2 {
        width: 100%;
        min-height: 350px;
    }

    .img3 {

        height: 350px;
    }

    .main-1 {
        display: grid;
        gap: 0rem;
    }

    .main-3 {
        padding-left: 0rem;
    }

    .second h2 {
        font-size: 1.3rem;
    }


    .main1 h2 {
        font-size: 1.5rem;
        line-height: normal;
        align-items: center;

    }

    .btn {
        padding-bottom: 45px;
    }

    .third {
        grid-template-columns: repeat(1, 3fr);
        display: grid;
        width: 100%;
    }

    .third-1 {
        grid-template-columns: repeat(1, 2fr);
        display: grid;
        width: 100%;
        gap: 1rem;
    }

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

    .content-hidden1 img,
    .content-hidden2 img,
    .content-hidden img {
        width: 100%;
        /* background: rgb(30, 30, 30); */
    }

    .fot h2 {
        font-size: 2rem;
    }

    .footer8,
    .footer5 {
        display: grid;
        text-align: end;
    }

    .footer5 {
        gap: 1rem;
    }

    .img31 {
        text-align: center;
        align-items: center;
        justify-content: center;
        padding-top: 90px;
        padding-bottom: 110px;
    }

    .img31 h3 {
        font-size: 1.5rem;
        line-height: normal;
    }

    .value {
        padding-top: 40px;
        padding-bottom: 50px;
    }

    .footer1 {
        display: grid;
        gap: 1rem;
    }

    .footer3 {
        padding-left: 4rem;
    }

    footer {
        padding: 10px;
    }

    .footer3 h1 {
        font-size: 0.8rem;
    }

    .footer4 {
        display: grid;
    }

    .fot1 {
        display: grid;

    }

    .footer6 a,
    .footer6 p {
        float: left;
    }

    .footer4 {

        gap: .5rem;
    }

    .footer8 {
        gap: .5rem;
    }

    .footer8 p {
        float: left;
    }

}

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

    .main1 {
        padding-top: 20px;
    }



    .main-3 {
        display: grid;
        gap: 1rem;
    }

    .img1,
    .img2 {
        width: 100%;
        min-height: 350px;
    }

    .img3 {

        height: 350px;
    }

    .main-1 {
        display: grid;
        gap: 0rem;
    }

    .main-3 {
        padding-left: 0rem;
    }

    .second h2 {
        font-size: 1.3rem;
    }

    .second h2 {
        line-height: 2rem;
    }

    .main1 h2 {
        font-size: 1.5rem;
        line-height: normal;
        align-items: center;

    }

    .btn {
        padding-bottom: 45px;
    }

    .third {
        grid-template-columns: repeat(1, 3fr);
        display: grid;
        width: 100%;
    }

    .third-1 {
        grid-template-columns: repeat(1, 2fr);
        display: grid;
        width: 100%;
        gap: 1rem;
    }

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

    .content-hidden1 img,
    .content-hidden2 img,
    .content-hidden img {
        width: 100%;
        /* background: rgb(30, 30, 30); */
    }

    .fot h2 {
        font-size: 2rem;
    }

    .footer8,
    .footer5 {
        display: grid;
        text-align: end;
    }

    .footer5 {
        gap: 1rem;
    }

    .img31 {
        text-align: center;
        align-items: center;
        justify-content: center;
        padding-top: 90px;
        padding-bottom: 80px;
    }

    .value--accordion-title {
        font-size: 1.3rem;
    }

    header h1,
    .color {
        display: none;
    }

    header .bx {
        font-size: 1.4rem;
    }

    .img31 h3 {
        font-size: 1.5rem;
        line-height: normal;
    }

    .value {
        padding-top: 40px;
        padding-bottom: 50px;
    }

    .footer1 {
        display: grid;
        gap: 1rem;
    }

    .footer3 {
        padding-left: 4rem;
        display: none;
    }

    footer {
        padding: 10px;
    }

    .footer3 h1 {
        font-size: 0.8rem;
    }

    .footer4 {
        display: grid;
    }

    .fot1 {
        display: grid;

    }

    .footer6 a,
    .footer6 p {
        float: left;
    }

    .footer4 {

        gap: .5rem;
    }

    .footer8 {
        gap: .5rem;
    }

    .footer8 p {
        float: left;
    }

}

@media screen and (max-width: 380px) {
    .third-1 {

        padding: 20px;
        border-radius: 20px;

    }


    .main1 {
        padding-top: 20px;
    }

    .footer2 h2 {
        font-size: 1.5rem;
    }

    .content-hidden1 img,
    .content-hidden2 img,
    .content-hidden img {
        height: 300px;
        width: 100%;
    }

    .third-1 {
        width: 100%;
    }



    .main-3 {
        display: grid;
        gap: 1rem;
    }

    .img1,
    .img2 {
        width: 100%;
        min-height: 350px;
    }

    .img3 {

        height: 350px;
    }

    .main-1 {
        display: grid;
        gap: 0rem;
    }

    .main-3 {
        padding-left: 0rem;
    }

    .second h2 {
        font-size: 1.1rem;
    }

    .second h2 {
        line-height: 2rem;
    }

    .main1 h2 {
        font-size: 1.5rem;
        line-height: normal;
        align-items: center;

    }

    .btn {
        padding-bottom: 45px;
    }

    .third {
        grid-template-columns: repeat(1, 3fr);
        display: grid;
        width: 100%;
        height: 100%;


    }


    .third-1 {
        grid-template-columns: repeat(1, 2fr);
        display: grid;
        width: 100%;
        gap: 1rem;
    }

    .third-1 {
        width: 100%;
    }

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

    .content-hidden1 img,
    .content-hidden2 img,
    .content-hidden img {
        width: 100%;
        /* background: rgb(30, 30, 30); */
    }



    .footer8,
    .footer5 {
        display: grid;
        text-align: end;
    }

    .footer5 {
        gap: 1rem;
    }

    .img31 {
        text-align: center;
        align-items: center;
        justify-content: center;
        padding-top: 90px;
        padding-bottom: 80px;
    }

    .value--accordion-title {
        font-size: 1.3rem;
    }

    header h1,
    .color {
        display: none;
    }

    header .bx {
        font-size: 1.4rem;
    }

    .img31 h3 {
        font-size: 1.5rem;
        line-height: normal;
    }

    .value {
        padding-top: 40px;
        padding-bottom: 50px;
    }

    .footer1 {
        display: grid;
        gap: 1rem;
    }

    .footer3 {
        padding-left: 4rem;
        display: none;
    }

    footer {
        padding: 10px;
    }

    .footer3 h1 {
        font-size: 0.8rem;
    }

    .footer4 {
        display: grid;
    }

    .fot1 {
        display: grid;

    }

    .footer6 a,
    .footer6 p {
        float: left;
    }

    .footer4 {

        gap: .5rem;
    }

    .footer8 {
        gap: .5rem;
    }

    .footer8 p {
        float: left;
    }

    .third-2 {
        width: 100%;

    }



}

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

    .third-1 {

        padding: 12px;
        border-radius: 20px;

    }

    .third-2 h2 {
        padding-top: 5px;
        font-size: 1.7rem;



    }


    .main1 {
        padding-top: 5px;
    }

    .footer2 h2 {
        font-size: 1.2rem;


    }

    .footer2 span {
        line-height: 1rem;
        font-size: 0.7rem;
    }

    .content-hidden1 img,
    .content-hidden2 img,
    .content-hidden img {
        height: 270px;
        width: 100%;
    }

    .third-1 {
        width: 100%;
    }



    .main-3 {
        display: grid;
        gap: 1rem;
    }

    .img1,
    .img2 {
        width: 100%;
        min-height: 300px;
    }

    .img3 {

        height: 300px;
    }

    .main-1 {
        display: grid;
        gap: 0rem;
    }

    .main-3 {
        padding-left: 0rem;
    }

    .second h2 {
        font-size: 1rem;
    }

    .second h2 {
        line-height: 1.7rem;
    }

    .main1 h2 {
        font-size: 1.1rem;
        line-height: normal;
        align-items: center;

    }

    .main32 p {
        font-size: 0.7rem;
    }

    .year p,
    .year1 p {
        font-size: 0.7rem;
    }

    .img1 p,
    .img2 p {
        font-size: 0.7rem;
    }

    .btn {
        padding-bottom: 45px;
    }

    .third {
        grid-template-columns: repeat(1, 3fr);
        display: grid;
        width: 100%;
        height: 100%;


    }


    .third-1 {
        grid-template-columns: repeat(1, 2fr);
        display: grid;
        width: 100%;
        gap: 1rem;
    }

    .third-1 {
        width: 100%;
    }

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

    .content-hidden1 img,
    .content-hidden2 img,
    .content-hidden img {
        width: 100%;
        /* background: rgb(30, 30, 30); */
    }



    .footer8,
    .footer5 {
        display: grid;
        text-align: end;
    }

    .footer5 {
        gap: 1rem;
    }

    .img31 {
        text-align: center;
        align-items: center;
        justify-content: center;
        padding-top: 90px;
        padding-bottom: 45px;
    }

    .value--accordion-title {
        font-size: 1.1rem;
    }



    header h1,
    .color {
        display: none;
    }

    header .bx {
        font-size: 1.4rem;
    }

    .img31 h3 {
        font-size: 1.2rem;
        line-height: normal;
    }

    .value {
        padding-top: 40px;
        padding-bottom: 50px;
    }

    .footer1 {
        display: grid;
        gap: 1rem;
    }

    .footer3 {
        padding-left: 4rem;
        display: none;
    }

    footer {
        padding: 5px;
    }

    .footer3 h1 {
        font-size: 0.8rem;
    }

    .footer4 {
        display: grid;
    }

    .fot1 {
        display: grid;

    }

    .footer7 p {
        font-size: 0.7rem;
    }

    .footer8 p {
        font-size: 0.7rem;
    }

    .footer6 a,
    .footer6 p {
        float: left;

    }

    .footer4 {

        gap: .5rem;
    }

    .footer8 {
        gap: .5rem;
    }

    .footer8 p {
        float: left;
    }

    .third-2 {
        width: 100%;

    }



}