/* nav section  */
.bg-mainclr {
    /* background-color: rgb(193 174 160); */
    /* background-color: rgb(207 189 176); */
    background-color: #F4CAB7;
}

.logo-size {
    width: 211px;
    cursor: pointer;
}

.font-change {
    font-family: "Lato", serif;
    font-size: 13px;
    font-weight: 400;
    color: black;
    padding-top: 30px;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.font-change:hover {
    color: #54514D;
}

.padding-nav {
    padding-top: 74px;
    padding-bottom: 27px;
}

/* nav section  */

/* image section  */

.bg-img-german {
    background-image: url('../images/german.png');
    background-size: cover;
    background-position: 0px -254px;
    background-repeat: no-repeat;
}

.bg-img-english {
    background-image: url('../images/english.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0px -200px
}

.ger-design .overlaytext-box {
    padding-top: 301px;
    padding-left: 227px;
}

.eng-design .overlaytext-box {
    padding-top: 301px;
    text-align: end;
    padding-right: 200px;
}

.ger-design .text-image,
.eng-design .text-image {
    font-family: "Playfair Display", serif;
    margin-bottom: 0;
    color: white;
    font-size: 49px;
    font-weight: 300;
}

.ger-design .overlay-button,
.eng-design .overlay-button {
    border-radius: 4px;
    background-color: white;
    padding: 9.65px 30.6px 7.65px 30.6px;
    text-align: center;
    margin-top: 65px;
    /* margin-bottom: 55px; */
    margin-bottom: 70px;
}

.eng-design .overlay-button {
    margin-right: 30pc;
}

.ger-design .overlay-button {
    margin-left: 30pc;
}


.ger-design .overlay-button .uppertext,
.eng-design .overlay-button .uppertext {
    font-family: "Lato", serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 20px;
}

.ger-design .overlay-button .lowertext,
.eng-design .overlay-button .lowertext {
    font-family: "Lato", serif;
    font-size: 15px;
    font-weight: 700;
    color: #857272;
    /* line-height: 13px; */
}

/* image section  */

/* paragraph section  */

.padding-psection {
    padding: 176px 0px;
}

.ptext-box {
    border-radius: 4px;
    padding: 80px 80px 100px 80px;
}

.ptext-box h2 {
    font-family: "Playfair Display", serif;
    margin-bottom: 0;
    font-size: 2rem;
}

.ptext-box .span-b {
    font-family: "Lato", serif;
    font-size: 19px;
    font-weight: 800;
    margin: 18px 0px;
}

.ptext-box p {
    font-family: "Lato", serif;
    font-size: 19px;
}

.text-btn {
    background: linear-gradient(to bottom, rgb(163 156 156), rgb(134, 129, 125));
    padding: 13px 27px;
    border-radius: 4px;
    color: white;
    font-size: 15px;
    font-weight: 700;
    margin-top: 17px;
    border: none;
    cursor: pointer;
    text-align: center;
}

/* paragraph section  */

/* footer  */

.padding-footer {
    padding: 0px 165px;
}

.img-footer {
    width: 207px;
}

.tech-text {
    font-family: "Lato", serif;
    color: black;
    font-weight: 400;
    font-size: 17px;
    margin-top: 35px;
}

.tech-text a {
    color: black;
    text-underline-offset: 4px;
}

.legal {
    color: black;
    font-size: 20px;
    font-family: "Playfair Display", serif;
}

.legal-box {
    padding-left: 47px;
}

.legal-link {
    font-family: "Playfair Display", serif;
    text-underline-offset: 4px;
    text-decoration-color: #54514D;
    color: #807677;
    font-size: 17px;
}

.social-icons {
    display: flex;
    gap: 20px;
    /* Space between icons */
}

.icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    /* Soft shadow */
}

.icon img {
    width: 20px;
    height: 20px;
}

.instagram {
    /* background: radial-gradient(circle, #feda75, #d62976, #962fbf, #4f5bd5); */
    background-color: #d62976;
}

.tiktok {
    /* background: radial-gradient(circle, #000, #222, #444); */
    background-color: black;
}

/* footer  */

@media (max-width: 992px) {

    .ger-design .overlaytext-box {
        padding-top: 301px;
        padding-left: 73px
    }

    .eng-design .overlaytext-box {
        padding-right: 200px;
    }
}

@media (max-width: 991px) {
.legal-box {
    padding-left: 0px;
}
}


@media (max-width: 768px) {
    .padding-nav {
        padding-top: 44px;
        padding-bottom: 18px;
    }

    .font-change {
        padding-top: 28px;
    }

    .ger-design .overlaytext-box {
        padding-top: 172px;
        padding-left: 124px;
    }

    .eng-design .overlaytext-box {
        padding-top: 172px;
        padding-right: 100px;
    }

    .ger-design .text-image,
    .eng-design .text-image {
        font-size: 30px;
    }

    .ger-design .overlay-button,
    .eng-design .overlay-button {
        margin-top: 1px;
        margin-bottom: 50px;
    }

    .padding-psection {
        padding: 75px 0px;
    }

    .ptext-box {
        border-radius: 4px;
        padding: 31px 25px 31px 25px;
    }

    .padding-footer {
        padding: 0px 0px;
    }

    .legal-box {
        padding-left: 0px;
    }

    .eng-design .overlay-button {
        margin-right: 22pc;
    }

    .ger-design .overlay-button {
        margin-left: 22pc;
    }
}

@media (max-width: 576px) {

    .ger-design .overlaytext-box {
        padding-left: 50px;
    }

    .eng-design .overlay-button {
        margin-right: 14pc;
    }

    .ger-design .overlay-button {
        margin-left: 14pc;
    }
}

@media (max-width: 575px) {

    .bg-img-german {
        background-position: center 0px; /* Center the image */
        background-size: 150%;
    }
    .bg-img-english {
        background-position: center 0px;  /* Center the image */
        background-size: 150%;
    }

    .bg-img-german,
    .bg-img-english {
        height: 553px;
    }

    .ger-design .overlaytext-box {
        padding-left: 30px;
    }

    .eng-design .overlaytext-box {
        padding-right: 30px;
    }

    .ger-design .text-image,
    .eng-design .text-image {
        font-size: 19px;
    }

    .ger-design .overlay-button {
        margin-top: 88px;
        padding: 9.65px 16.6px 7.65px 15.6px;
        margin-left: 110px;
    }

    .eng-design .overlay-button {
        margin-top: 88px;
        padding: 9.65px 16.6px 7.65px 15.6px;
        margin-right: 120px;
    }

    .ger-design .overlay-button .uppertext,
    .eng-design .overlay-button .uppertext {
        font-size: 13px;
    }
}