@charset "utf-8";

@media screen and (max-width : 1800px) {
    .inner {
        max-width: 80%;
    }
    .gallerybanner .inner {
        max-width: 90%;
    }
    .project .linetext {
        width: 8px;
    }
}

@media screen and (max-width : 1600px) {
    .project .linetext {
        border-width: 2px;
        width: 7px;
    }
    .project .inner>* {
        padding: 2rem 0 0;
    }
    .project .leftside>* {
        padding-left: 7rem;
    }
    .project .rightside>* {
        padding-right: 7rem;
    }
    .gallerybanner .gallery {
        width: 80%;
        margin: 3rem auto;
    }
    footer {
        font-size: 0.9rem;
    }
    footer .footerbottom .info {
        flex-direction: column;
        align-items: flex-end;
    }
    footer .footerbottom .copy {
        text-align: right;
    }
}

@media screen and (max-width : 1200px) {
    .project .inner>*{
        padding: 1.2rem 0 0;
    }
    .project .projecttext {
        padding: 1rem 0;
    }
    .project .button {
        width: 170px;
    }
    .rightline::before {
        margin: 1rem 0 2rem;
    }
}
@media screen and (max-width : 1024px) {
    .project .leftside>* {
        padding-left: 4.5rem;
        padding-right: 1.5rem;
    }
    .project .rightside>* {
        padding-right: 4.5rem;
        padding-left: 1.5rem;
    }
    .project .linetext {
        width: 5px;
        border-width: 2px;
    }
    .beforeline::before, .rightline::before, .leftline::before {
        height: 1px;   
        border-width: 2px;
    }
    .rightline::before {
        margin: 1rem 0 1.5rem;
    }
    .leftline {
        padding-top: 1.5rem;
    }
    .gallerybanner .gallery {
        width: 70%;
        margin: 2rem auto;
    }
    .project .button {
        width: 150px;
        font-size: 0.8rem;
        margin: 2rem auto 0;
        padding: 0.8rem 1rem;
    }
}
@media screen and (max-width : 768px) {
    .about h4 {
        font-size: 1.6rem;
    }
    .about p {
        padding: 1rem 0;
    }
     .project .leftside>* {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .project .rightside>* {
        padding-right: 1rem;
        padding-left: 1rem;
    }
    .project p {
        font-size: 1rem;
    }
    .rightline::before {
        margin: 1rem 0;
    }
    .project .projecttext {
        margin: 1rem 0;
    }
    .project .linetext {
        border-width: 1px;
        width: 3.5px;
    }
    .gallerybanner .gallery {
        width: 80%;
    }
}
@media screen and (max-width : 622px) {
    html {
        font-size: 14px;
    }
    .mainbanner .banner h3 br {
        display: none;
    }
    footer .footertop ul {
        margin: 0 auto;
    }
    footer .footerbottom {
        flex-direction: column;
        text-align: center;
    }
    footer .footerbottom .info {
        align-items: center;
        line-height: 1.7;
        margin-top: 1rem;
    }
    footer .footerbottom .copy {
        text-align: center;
    }
}
@media screen and (max-width : 590px) {
     html {
        font-size: 13px;
    }
    .project .linetext {
        display: none;
    }
    .project .inner > * {
        flex-direction: column;
    }
    .project .inner>*>* {
        width: 90%;
        margin: 0 auto;
    }
    .project .wedding .projecttext {
        margin: 0 auto;
    }
    .project .button::after {
        width: 10px;
        height: 10px;
    }
    .project  .profile .leftside {
        order: 2;
    }
    .project  .profile .rightside {
        order: 1;
    }
    .hoopbg {
        padding-top: 50%;
    }
    .hoopbg svg {
        display: none;
    }
    .gallerybanner .gallery {
        width: 70%;
    }
    .rightline::before {
        margin: 1rem auto;
    }
}
@media screen and (max-width : 425px) {
    header{
       width: 50px;
       height: 50px;
       line-height: 50px;
       font-size: 0.6rem;
    }
    .mainbanner .banner h3 {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
        bottom: 10px;
    }
}
@media screen and (max-width : 425px) {
    html {
        font-size: 10px;
    }
    .swiper-button-next:after, .swiper-button-prev:after {
        font-size: 30px;
    }

}