@charset "utf-8";
/* CSS Document */

/*---------- Google Fonts ----------*/

body {
    font-family: "GlorySemiBold";
    background-color: var(--lightest-purple);
    color: var(--purple);
    position: relative;
}

figure {
    margin: 0;
}

a,
input,
button,
textarea {
    outline: none !important;
}

a {
    text-decoration: none;
    transition: all ease-in-out 300ms;
    -webkit-transition: all ease-in-out 300ms;
    -ms-transition: all ease-in-out 300ms;
    -o-transition: all ease-in-out 300ms;
    -moz-transition: all ease-in-out 300ms;
}

.container-fluid,
.container {
    padding-left: 15px;
    padding-right: 15px;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

    .row > * {
        padding-left: 15px;
        padding-right: 15px;
    }

p {
    font-family: inherit;
    font-size: 18px;
    line-height: 30px;
    color: inherit;
    margin: 0;
    padding: 0;
}

    p a {
        text-decoration: none;
        color: inherit;
    }

        p a:hover {
            text-decoration: none;
            color: #bbeadd;
        }

ul li,
ol li {
    font-size: 24px;
    line-height: normal;
    color: #fff;
}

    ul li a,
    ol li a {
        text-decoration: none;
        color: inherit;
    }

        ul li a:hover,
        ol li a:hover {
            text-decoration: none;
            color: #fff;
        }

h1 {
    font-size: 40px;
    font-family: "GlorySemiBold";
    line-height: normal;
    font-weight: 600;
}

h2 {
    font-size: 40px;
    font-family: "GlorySemiBold";
    font-weight: 600;
    line-height: normal;
}

h3 {
    font-size: 35px;
    line-height: normal;
    font-weight: 600;
}

h4 {
    font-size: 35px;
    line-height: normal;
    font-weight: 600;
    font-weight: 600;
}

h5 {
    font-size: 30px;
    line-height: normal;
    font-weight: 500;
}

h6 {
    font-size: 16px;
    line-height: normal;
    font-weight: 400;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-control:focus {
    box-shadow: none;
    border-color: transparent;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

textarea {
    resize: none;
}

figure {
    margin: 0;
}

/* ========== Root ========== */
:root {
    --black: #000;
    --white: #fff;
    --transparent: #0000;
    --primary: #3e4461;
    --pink: #c04f7b;
    --purple: #6f3f81;
    --light-purple: #a972c3;
    --lightest-purple: #eadcf2;
}

/* buttons */

.btn {
    color: var(--white);
    background-color: var(--light-purple);
    border: 1px solid transparent;
    text-align: center;
    font-family: "GlorySemiBold";
    font-size: 20px;
    line-height: normal;
    padding: 9px 18px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

    .btn:hover {
        color: var(--light-purple);
        background-color: var(--white);
        border-color: var(--light-purple);
        transition: all ease-in-out 300ms;
        -webkit-transition: all ease-in-out 300ms;
        -ms-transition: all ease-in-out 300ms;
        -o-transition: all ease-in-out 300ms;
        -moz-transition: all ease-in-out 300ms;
    }

/* buttons */

/* ---------------------- */
/* ------- fonts ------- */
.main-title {
    color: var(--purple);
    font-family: "GlorySemiBold";
    font-size: 40px;
    line-height: normal;
}

    .main-title * {
        font-size: inherit;
        line-height: inherit;
        font-family: inherit;
        margin: 0;
        padding: 0;
    }

.card-title {
    color: var(--purple);
    text-align: center;
    font-family: "GlorySemiBold";
    font-size: 35px;
    line-height: normal;
}

    .card-title * {
        font-size: inherit;
        line-height: inherit;
        font-family: inherit;
        margin: 0 0 12px 0;
        padding: 0;
    }

.block-title, p h2 {
    color: var(--purple);
    font-family: "GlorySemiBold";
    font-size: 30px;
    line-height: normal;
}

    .block-title * {
        font-size: inherit;
        line-height: inherit;
        font-family: inherit;
        margin: 0;
        padding: 0;
    }

.reguler-details-glory {
    color: var(--purple);
    font-family: "RobotoRegular";
    font-size: 16px;
    line-height: normal;
}

    .reguler-details-glory * {
        font-size: inherit;
        line-height: inherit;
        font-family: inherit;
        margin: 0;
        padding: 0;
    }

.reguler-details-roboto {
    color: var(--purple);
    font-family: "RobotoRegular";
    font-size: 16px;
    line-height: normal;
}

    .reguler-details-roboto * {
        font-size: inherit;
        line-height: inherit;
        font-family: inherit;
        margin: 0;
        padding: 0;
    }

/* ---------------------- */
/* ------- fonts ------- */

/* -----------------  HEADER CSS  --------------- */
.header {
    background: #a972c3;
}

.header-wrapper {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #eadcf2;
    width: 100%;
    transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    -o-transition: 0.6s;
}

    /* .header-wrapper.sticky {
  animation: moveHeader 0.4s forwards;
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 1000;
  -webkit-animation: moveHeader 0.4s forwards;
}

@keyframes moveHeader {
  0% { top: -100%; }
  100% { top: 0%; }
} */
    .header-wrapper.sticky .h-content {
        padding: 21px 0;
    }

    .header-wrapper.sticky .h-content-main {
        background: #eadcf2;
    }

.h-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 925px;
    margin-left: auto;
    padding: 29px 0;
}

    .h-content ul {
        display: flex;
        align-items: center;
        padding-left: 0;
        margin-bottom: 0;
    }

        .h-content ul li {
            display: inline-flex;
        }

            .h-content ul li a {
                color: #6f3f81;
                font-family: "RobotoMedium";
                font-size: 16px;
                line-height: normal;
                display: inline-flex;
                align-items: center;
            }

    .h-content .socials-list li a {
        height: 26px;
        width: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #6f3f81;
        margin: 0 5px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
    }

        .h-content .socials-list li a:hover {
            background-color: var(--pink);
        }

.header .navbar {
    padding: 0;
    max-width: 1120px;
    margin: 0 auto;
}

.navbar-nav .dropdown .dropdown-menu li .dropdown-item {
    color: #fff;
    font-family: "GloryBold";
    font-size: 16px;
    line-height: 133%;
    padding: 10px 25px;
    word-wrap: break-word;
}

.header .navbar-brand {
    margin: -36px 0 -45px 0;
}

.navbar-expand-md .navbar-nav {
    margin-left: 36px;
}

.header .navbar-nav .nav-item:last-child {
    padding-right: 0;
}

.header .navbar-nav .nav-item .nav-link {
    color: #ffffff;
    font-family: "GloryBold";
    font-size: 16px;
    line-height: normal;
    padding: 30px 0;
    text-transform: uppercase;
}

.h-content .contact-here li {
    margin-right: 19px;
}

    .h-content .contact-here li a .ct-icn {
        background: #6f3f81;
        border-radius: 26px;
        margin-right: 10px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* padding: 3px 6px 3px 6px; */
    }

    .h-content .contact-here li a:hover {
        color: var(--pink);
    }

        .h-content .contact-here li a:hover .ct-icn {
            background-color: var(--pink);
            transition: all ease-in-out 300ms;
            -webkit-transition: all ease-in-out 300ms;
            -ms-transition: all ease-in-out 300ms;
            -o-transition: all ease-in-out 300ms;
            -moz-transition: all ease-in-out 300ms;
        }

    .h-content .contact-here li a .ct-icn img {
        width: 15px;
        height: 12px;
    }

header .navbar-nav .nav-item {
    padding: 0 16px;
}

.navbar-nav .dropdown > .dropdown-toggle:hover,
.navbar-nav .dropdown:hover > .dropdown-toggle,
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item.current-menu-item .nav-link,
.navbar-nav .nav-item.current-menu-parent .nav-link,
.navbar-nav .nav-item.current_page_parent .nav-link,
.navbar-nav .nav-item .nav-link.active,
.navbar-nav .nav-item .nav-link.current-menu-item,
.navbar-nav .nav-item .nav-link.current-menu-parent,
.navbar-nav .nav-item .nav-link.current_page_parent,
.navbar-nav .nav-item .nav-link:hover {
    color: #eadcf2;
}

.navbar-nav .dropdown .dropdown-toggle:after {
    display: none;
}

.navbar-nav .dropdown .dropdown-menu {
    border: none;
    padding: 0;
    margin: 0;
    background: #6f3f81;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    text-align: center;
}

    .navbar-nav .dropdown .dropdown-menu li .dropdown-item {
        font-size: 16px;
        line-height: 133%;
        padding: 10px 25px;
        color: #fff;
        word-wrap: break-word;
    }

        .navbar-nav .dropdown .dropdown-menu li.active > .dropdown-item,
        .navbar-nav .dropdown .dropdown-menu li.current-menu-item > .dropdown-item,
        .navbar-nav .dropdown .dropdown-menu li.current-menu-parent > .dropdown-item,
        .navbar-nav .dropdown .dropdown-menu li.current_page_parent > .dropdown-item,
        .navbar-nav .dropdown .dropdown-menu li .dropdown-item.active,
        .navbar-nav .dropdown .dropdown-menu li .dropdown-item.current-menu-item,
        .navbar-nav .dropdown .dropdown-menu li .dropdown-item.current-menu-parent,
        .navbar-nav .dropdown .dropdown-menu li .dropdown-item.current_page_parent,
        .navbar-nav .dropdown .dropdown-menu li .dropdown-item:hover {
            color: #6f3f81;
            background: #fff;
        }

/* -----------------  HEADER CSS  --------------- */

/* -----------------  HOME PAGE CSS  --------------- */
/* ------- banner css start ------- */
.banner-wrapper {
    position: relative;
    padding: 93px 0 47px 0;
}

    .banner-wrapper .banner-main {
        width: 100%;
        max-width: 1120px;
        margin: 0 auto;
    }

.banner-main .main-title {
    margin: 0 0 43px 0;
}

.banner-box {
    display: flex;
    gap: 60px;
}

    .banner-box .banner-right {
        width: 100%;
        max-width: 419px;
    }

    .banner-box .banner-left {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        max-width: 641px;
    }

        .banner-box .banner-left .detail-box {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

/* ------- banner css end ------- */

/* ------- sortiment css start ------- */
.sortiment-wrapper {
    padding: 47px 0 133px 0;
}

.sortiment-main .main-title {
    padding: 0 0 99px 104px;
}

.sortiment-tag {
    display: flex;
    justify-content: center;
    margin: 0 0 10px 0;
}


    .sortiment-tag.left {
        justify-content: flex-start;
    }

    .sortiment-tag p {
        color: var(--white);
        width: fit-content;
        text-align: center;
        font-family: "GlorySemiBold";
        font-size: 13px;
        line-height: normal;
        padding: 7px 15px;
        background-color: var(--light-purple);
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
    }

.sortiment-card-box {
    display: flex;
    justify-content: space-between;
}

.card-item .reguler-details-roboto {
    text-align: center;
}

    .card-item .reguler-details-roboto span {
        font-family: "RobotoBold";
    }

.card-price {
    color: var(--purple);
    font-family: "GlorySemiBold";
    font-size: 28px;
    line-height: normal;
    margin: 0 0 23px 0;
}

.card-item .sortiment-img {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sortiment-img .main-img {
    position: relative;
    z-index: 2;
    max-width: 80%;
    margin-left: 10%;
}

.sortiment-img .back-img {
    position: absolute;
    width: 100%;
    max-width: 361px;
    height: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    right: 0;
    top: 50%;
    bottom: 0;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.sortiment-card-box .sortiment-item-1 {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: inherit;
}

.sortiment-card-box .sortiment-item-2 {
    width: 100%;
    max-width: 399px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: inherit;
}

.sortiment-card-box .sortiment-item-3 {
    width: 100%;
    max-width: 423px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: inherit;
}

.card-item .btn {
    line-height: 15px;
    margin: 0 0 22px 0;
}

.sortiment-main .big-button {
    display: inline-block;
    margin: 48px auto 0 auto;
}

.big-button .btn {
    font-size: 26px;
    font-family: "GloryMedium";
    padding: 12px 25px;
}

.sortiment-card-box {
    display: flex;
    flex-wrap: wrap; /* Ermöglicht den Umbruch der Karten in die nächste Zeile */
    justify-content: space-between; /* Optionale Verteilung der Karten */
    gap: 30px; /* Abstand zwischen den Karten */
}

.sortiment-item-1 {
    flex: 1 1 calc(25% - 30px); /* Nimmt 1/3 der Breite minus dem Abstand */
    max-width: calc(25% - 30px); /* Maximale Breite auf 1/3 begrenzen */
    box-sizing: border-box; /* Padding wird innerhalb der Breite berücksichtigt */
}




/* ------- sortiment css end ------- */

/* -----------babys css ----------- */
.babys-main .row {
    margin-left: 0;
    margin-right: 0;
}

    .babys-main .row > * {
        padding-left: 0px;
        padding-right: 0px;
    }

.babys-wrapper {
    background-color: var(--pink);
}

.babys-main {
    width: 100%;
    max-width: 944px;
    margin: 0 auto;
    padding: 44px 0px;
}

    .babys-main .row {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.babys-img {
    width: 100%;
    max-width: 100%;
}

.babys-content {
    padding: 0 0 0 49px;
}

    .babys-content .reguler-details-glory,
    .babys-content .reguler-details-roboto,
    .babys-content .main-title {
        color: var(--white);
    }

    .babys-content .main-title {
        margin: 7px 0 0 0;
    }

    .babys-content .reguler-details-glory {
        margin: 27px 0 0 0;
    }

.babys-btn {
    margin: 42px 0 0 0;
}

    .babys-btn .btn {
        border-radius: 25px;
        padding: 9px 34px 9px 32px;
        background-color: var(--white);
        color: var(--pink);
        line-height: 94%;
    }

        .babys-btn .btn:hover {
            background-color: var(--transparent);
            color: var(--white);
            border-color: var(--white);
        }

/* -----------babys page ----------- */

/* -----------------  HOME PAGE CSS  --------------- */

/* -----------------  second PAGE CSS  --------------- */

/* ------- production css start ------- */

/*products banner*/
.products-main {
    padding: 113px 0 73px 0;
}

.product-detail-slider {
    opacity: 0;
}

    .product-detail-slider.slick-initialized {
        opacity: 1;
    }

.products-wrap {
    max-width: 1166px;
    margin: 0 auto;
}

.product-block {
    display: flex;
}

.products-slider {
    opacity: 0;
}

    .products-slider.slick-initialized {
        opacity: 1;
    }

    .products-slider .slick-dots li button {
        display: none;
    }

    .products-slider .slick-dots {
        display: flex;
        justify-content: center;
        padding-left: 0;
        margin: 30px 0 20px 0;
    }

        .products-slider .slick-dots li {
            background: transparent;
            border: 1px solid var(--light-purple);
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            height: 14px;
            width: 14px;
            cursor: pointer;
            list-style-type: none;
            margin: 0 3px;
        }

        .products-slider .slick-dots .slick-active {
            background: var(--light-purple);
            border: 1px solid var(--light-purple);
        }

.product-name .reguler-details-glory {
    font-family: "RobotoMedium";
}

.product-name .main-title {
    margin: 13px 0 18px;
}

.product-name .block-title {
    margin-bottom: 50px;
}

.products-slider-arrows .slick-arrow {
    color: var(--light-purple);
    cursor: pointer;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}

    .products-slider-arrows .slick-arrow:hover {
        opacity: 0.5;
    }

.products-slider-arrows .slick-prev {
    position: absolute;
    top: 53%;
    left: -36px;
}

.products-slider-arrows .slick-next {
    position: absolute;
    top: 53%;
    right: -1px;
}

.products-slider-arrows .slick-arrow svg {
    height: 25px;
    width: 30px;
}

.product-name {
    margin-top: 20px;
}

.products-content {
    position: relative;
}

.product-details {
    border-radius: 14px;
    background: var(--light-purple);
    padding: 22px 22px 26px 25px;
}

.product-detail-slider .block-title {
    font-size: 20px;
}

.product-details .block-title {
    color: var(--white);
    font-family: "RobotoMedium";
}

.product-details .reguler-details-roboto {
    color: var(--white);
    padding: 33px 0 22px;
}

.product-details ul li {
    color: var(--white);
    font-family: "RobotoRegular";
    font-size: 16px;
    /* font-weight: 600; */
    line-height: normal;
    margin-bottom: 3px;
}

.product-details ul li {
    list-style-type: disc;
}

.slick-track {
    display: flex !important;
}

.slick-slide {
    height: inherit !important;
}

/* ------- production css end ------- */

/* ------- section form css end ------- */
.section-form {
    position: relative;
    background-color: var(--pink);
    padding: 73px 0 57px 0;
}



.section-form-main {
    width: 100%;
    max-width: 1145px;
    margin: 0 auto;
}

    .section-form-main .main-title {
        color: var(--white);
        line-height: 102%;
    }

    .section-form-main .section-box {
        display: flex;
        flex-direction: row;
        gap: 106px;
    }

.section-box .section-left {
    width: 100%;
    max-width: 480px;
}

.section-box .section-right {
    width: 100%;
    max-width: 560px;
}

.section-left ol {
    margin: 36px 0 0 0;
    padding-left: 25px;
}

    .section-left ol li {
        color: var(--white);
        font-family: "RobotoRegular";
        font-size: 24px;
        line-height: normal;
        margin: 24px 0 0 0;
    }

.form-main {
    margin: 16px 0 0 0;
}

    .form-main .inquiry-box {
        width: 100%;
        max-width: 400px;
    }

    .form-main .form-group .form-control {
        background-color: var(--white);
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -ms-border-radius: 30px;
        -o-border-radius: 30px;
        border: none;
        padding: 6.5px 12px;
        color: var(--light-purple) !important;
        font-family: "GloryLight";
        font-size: 15px;
        line-height: 100%;
    }

    .form-main .form-label-custom {
        color: var(--white);
        font-family: "GloryLight";
        font-size: 15px;
        line-height: 96%;
    }

    .form-main .form-group .form-control:focus {
        outline: none;
    }

.textarea-lable {
    color: var(--white);
    font-family: "GlorySemiBold";
    font-size: 18px;
    line-height: 100%;
}

.form-main .inquiry-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px;
}

    .form-main .inquiry-box .form-group {
        flex-basis: 188px;
    }

.form-main .form-opctions {
    margin: 32px 0 0 0;
}

.form-main .form-babyname {
    margin: 15px 0 0 0;
    display: flex;
    gap: 39px;
}

.form-main .form-group .form-label-custom {
    margin: 0 0 8px 0;
}

.form-opctions .babyname-specific {
    width: 100%;
    max-width: 188px;
}

.form-main .form-kg {
    margin: 23px 0 0 0;
}

.form-main .form-textarea {
    margin: 30px 0 0 0;
}

    .form-main .form-textarea textarea {
        height: 195px;
        width: 100%;
        border: 0;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        color: var(--purple);
        font-family: "GloryLight";
        font-size: 15px;
        line-height: 96%;
        padding: 8px;
    }

.form-textarea .form-group label a:hover {
    color: var(--lightest-purple) !important;
}

.form-main .btn {
    margin: 22px 0 0 0;
    background-color: var(--white);
    color: var(--light-purple);
    line-height: 80%;
}

    .form-main .btn:hover {
        background-color: var(--light-purple);
        color: var(--white);
    }

.form-check input:focus {
    border-color: #0000;
    box-shadow: none;
}

/* ------- section form css end ------- */

/* ------- bilder css end ------- */
.bilder-wrapper {
    padding: 59px 0 24px 0;
}

.bilder-main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

    .bilder-main .main-title {
        margin: 0 0 21px 0;
    }

.grid-item {
    height: 270px;
    margin: 15px;
}

    .grid-item img {
        width: 100%;
        height: 100%;
        display: block;
    }


.grid-item--width1 {
    width: 100%;
    max-width: 241px;
}

.grid-item--width2 {
    width: 100%;
    max-width: 354px;
}

.grid-item--width3 {
    width: 100%;
    max-width: 195px;
}

.grid-item--width4 {
    width: 100%;
    max-width: 272px;
}

.grid-item--width5 {
    width: 100%;
    max-width: 322px;
}

.grid-item--width6 {
    width: 100%;
    max-width: 224px;
}

.grid-item--width7 {
    width: 100%;
    max-width: 320px;
}

.grid-item--width8 {
    width: 100%;
    max-width: 195px;
}

/* ------- bilder css end ------- */

/* -----------------  second PAGE CSS  --------------- */

/* -----------footer css ----------- */
.footer {
    background-color: var(--purple);
}

.footer-main {
    width: 100%;
    max-width: 1138px;
    margin: 0 auto;
    padding: 33px 0 13px 0;
}

.footer-left {
    display: flex;
    align-items: center;
}

    .footer-left .footer-image {
        height: 121px;
        width: 121px;
        overflow: hidden;
        border-radius: 100%;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -ms-border-radius: 100%;
        -o-border-radius: 100%;
    }

        .footer-left .footer-image img {
            border-radius: 100%;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            -ms-border-radius: 100%;
            -o-border-radius: 100%;
        }

.footer-content {
    margin: 0 0 0 30px;
}

    .footer-content .reguler-details-roboto {
        color: var(--lightest-purple);
    }

.footer-media-icon ul {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 10px 0 0 0;
}

    .footer-media-icon ul li {
        font-size: 26px;
        margin-right: 10px;
        padding: 0;
    }

        .footer-media-icon ul li:last-child {
            margin: 0;
        }

        .footer-media-icon ul li a {
            width: 26px;
            height: 26px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: var(--lightest-purple);
            color: var(--purple);
        }

            .footer-media-icon ul li a img {
                height: 14px;
                width: 14px;
            }

            .footer-media-icon ul li a:hover {
                background-color: var(--pink);
            }

.footer-icon {
    margin: 0 0 0 25px;
}

    .footer-icon a {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .footer-icon ul {
        padding: 0;
        list-style: none;
    }

        .footer-icon ul li {
            display: flex;
            align-items: center;
            color: var(--lightest-purple);
            margin: 10px 0 0 0;
        }

            .footer-icon ul li a {
                margin: 0 0 0 10px;
            }

            .footer-icon ul li:first-child {
                margin: 0;
            }

            .footer-icon ul li a:hover {
                color: var(--pink);
            }

                .footer-icon ul li a:hover .footer-inner-icon {
                    background-color: var(--pink);
                    transition: all ease-in-out 300ms;
                    -webkit-transition: all ease-in-out 300ms;
                    -ms-transition: all ease-in-out 300ms;
                    -o-transition: all ease-in-out 300ms;
                    -moz-transition: all ease-in-out 300ms;
                }

.footer-right {
    width: 100%;
    height: 100%;
}

    .footer-right .reguler-details-roboto {
        color: var(--lightest-purple);
        font-size: 14px;
        margin: auto auto 0 auto;
    }

.footer-right {
    display: flex;
    justify-content: flex-end;
}

.footer-right-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0 0 15px 0;
}

    .footer-right-content a:hover {
        color: var(--pink);
    }

    .footer-right-content .reguler-details-roboto {
        padding: 0 13px 0 12px;
    }

        .footer-right-content .reguler-details-roboto:first-child {
            padding-left: 0;
        }

        .footer-right-content .reguler-details-roboto:last-child {
            padding-right: 0;
        }

.footer-right .add {
    position: relative;
}

    .footer-right .add::after {
        position: absolute;
        content: "";
        top: 1px;
        right: 0;
        background-color: var(--lightest-purple);
        height: 14px;
        width: 2px;
    }

.footer-right-content .add:last-child::after {
    display: none;
}

.footer-inner-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lightest-purple);
    border-radius: 50%;
}

/* -----------footer css ----------- */