@import url(/public/template-8/src/general.css);

/* Section Greeting & Couple */


.greetings-couple {
    position: relative;
    background-color: var(--pink-color);
    width: 562px;
    height: auto;
    padding: 112px 0;
    box-sizing: border-box;
    overflow: hidden;
}

.greetings-couple .content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.greetings-couple .quran-verse {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.greetings-couple .quran-verse .orn-line-1 {
    position: relative;
    width: 100%;
    height: 250px;
    padding: 20px;
    box-sizing: border-box;
}

.greetings-couple .quran-verse .orn-line-1 .line-outside-1 {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: var(--primary-color);
    clip-path: polygon(12% 0, 85% 0, 100% 29%, 100% 79%, 89% 100%, 11% 100%, 0 75%, 0 21%);
}

.greetings-couple .quran-verse .orn-line-1 .line-inside-1 {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: var(--pink-color);
    clip-path: polygon(12% 0, 85% 0, 100% 29%, 100% 79%, 89% 100%, 11% 100%, 0 75%, 0 21%);
}


.greetings-couple .quran-verse .orn-line-2 {
    position: absolute;
    padding: 32px;
    width: 100%;
    height: 100%;
    top: 0;
    box-sizing: border-box;
    left: 0;
}

.greetings-couple .quran-verse .orn-line-2 .line-outside-2 {
    border: 2px solid var(--primary-color);
    width: 100%;
    box-sizing: border-box;
    height: 100%;
}

.greetings-couple .quran-verse .quran-wrapper {
    position: absolute;
    top: 0;
    padding: 0 56px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: inherit;
    box-sizing: border-box;
}

.greetings-couple .quran-verse .quran-wrapper p,
.greetings-couple .pray {
    font-family: 'Alegreya';
    color: var(--primary-color);
}

.greetings-couple .quran-verse .quran-wrapper p:nth-child(1) {
    font-size: 14px;
    text-align: center;
}

.greetings-couple .quran-verse .quran-wrapper p:nth-child(2) {
    font-size: 24px;
}

.greetings-couple .pray {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin-top: 54px;
    font-size: 20px;
    padding: 0 42px;
    text-align: center;
}

/* Couple Wrapper */

.greetings-couple .couple-wrapper {
    margin-top: 38px;
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.greetings-couple .couple-wrapper .couple {
    position: relative;
    border: .8px solid var(--primary-color);
    display: flex;
    flex-direction: column;
    padding: 8px;
    width: auto;
    margin: auto;
}

.greetings-couple .couple-wrapper .flowers-1 {
    position: absolute;
    top: 0;
    right: 0;
    transform: scaleX(-1);
    width: 30%;
}

.greetings-couple .couple-wrapper .flowers-2 {
    position: absolute;
    bottom: -4px;
    left: 0;
    transform: scaleX(-1);
    width: 30%;
}

/* Couple-Name */
.greetings-couple .couple-wrapper .couple-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Alegreya';
    color: var(--primary-color);
}

.greetings-couple .couple-wrapper .couple-name p:nth-child(1) {
    font-size: 34px;
    font-weight: 700;
    text-align: center;
}

.greetings-couple .couple-wrapper .couple-name p:nth-child(2) {
    margin-top: 6px;
    font-size: 22px;
    text-align: center;
}

.couple-wrapper .spacer {
    display: flex;
    gap: 14px;
    margin: 32px 0;
    width: 100%;
    align-items: center;
}

.couple-wrapper .spacer p {
    font-family: 'Alegreya';
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
}

.couple-wrapper .spacer .line {
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
}

/* Ornament BG (Flowers) */

.greetings-couple .orn-bg {
    position: absolute;
    top: 100px;
}

.greetings-couple .orn-bg .flowers-2 {
    position: relative;
    top: 340px;
    left: -48%;
    transform: scaleX(1) scale(0.7) rotate(20deg);
    opacity: .4;
}

.greetings-couple .orn-bg .flowers-1 {
    position: relative;
    top: 30px;
    right: -48%;
    transform: scaleX(1) scale(0.8) rotate(325deg);
    opacity: .4;
}




@media (max-width: 562px) {
    .greetings-couple {
        width: 100%;
    }

    .greetings-couple .quran-verse .quran-wrapper p:nth-child(1) {
        font-size: 2.5vw;
    }

    .greetings-couple .quran-verse .quran-wrapper p:nth-child(2) {
        font-size: 4.5vw;
    }

    .greetings-couple .couple-wrapper .couple-name p:nth-child(1) {
        font-size: 5vw;
    }

    .greetings-couple .couple-wrapper .couple-name p:nth-child(2) {
        font-size: 3.5vw;
    }

    .greetings-couple .pray {
        font-size: 3vw;
    }
}


/* End Section Greeting & Couple */