/* About page's details
1.  TMM section
2.  ABOUT YOU section
3.  ANIMATION section
4.  OUR BRAND section
5.  PHILOSOPHY section
6.  WHAT DO WE DO?
7.  WHY US?
8.  GET IN TOUCH!*/

/* GENERAL */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800&display=swap');
@import url('http://fonts.cdnfonts.com/css/omnes');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
/* :root{
    --why-us: 'Nunito', sans-serif;
} */
/* 
<button class="navbar-toggler pe-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-stream navbar-toggler-icon"></i>
</button>} 
<div class="container-fluid bg-black">
               <a class="navbar-brand" href="#">
                    {% comment %} <img src="{% static 'app/images/TMM_logo.jpg' %}" class="img-fluid" alt="logo"> {% endcomment %}
                </a>
                  </div>

*/

.ul_items {
    display: flex;
    text-align: end;
    list-style-type: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:hover,
:focus {
    outline: 0 !important;
    outline-offset: 0;
}

html {
    scroll-behavior: smooth;
    font-family: 'Omnes', sans-serif;
    overflow-x: hidden;
}

body {
    font-size: 10px;
    font-weight: 400;
    background-color: black;
    color: white;
    font-family: 'Omnes', sans-serif;
    overflow-x: hidden;
    margin-right: 0;
    cursor: url("../images/heart_the memory maker.png"), default;
}

a,
a:hover {
    text-decoration: none;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

p {
    font-size: 12px;
    font-weight: 300;
    font-family: 'Omnes', sans-serif;
    word-spacing: 3px;
    line-height: 1.8;
}


/* 2. navbar */
.header_wrapper .navbar {
    -ms-transition: all .15s ease-in-out 0s;
    -o-transition: all .15s ease-in-out 0s;
    -webkit-transition: all .15s ease-in-out 0s;
    transition: all .15s ease-in-out 0s;
    background: black;
    z-index: 100000;
    padding: 1.5rem 0;
    justify-content: end;
}


.header_wrapper .nav-item {
    margin: 0 10px;
}

.header_wrapper .nav-item .nav-link {
    font-size: 15px;
    font-weight: 500;
    color: white;
    list-style: 1;
    letter-spacing: 1px;
}

.header_wrapper .nav-item .nav-link.active {
    color: #FF577F;
}

.active {
    color: #FF577F;
}

.header-scrolled {
    position: fixed;
    margin-top: 0;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 65px; */
    background: black !important;
    box-shadow: 0 0.125rem 1.75rem 0 rgba(255, 255, 255, 0.09);
    /* transition: all .15s ease-in-out 0s; */
    z-index: 100000;
}

.header-scrolled .nav-item .nav-link {
    color: white;
}

.header-scrolled .nav-item .nav-link:active,
.header-scrolled .nav-item .nav-link.active {
    color: #FF577F;
}

.navbar-toggler-icon {
    color: white !important;
    margin-right: 2rem;
}

.navbar-brand {
    position: relative;
    width: 4rem;
    margin-left: 0rem
}

.navbar-nav {
    margin-right: 1rem;
}


.active {
    color: #FF577F;
}


video {
    width: 100%;
    height: auto;
}

/* about_you section */

.about_you {
    background: white;
    padding: 2rem 0;
    padding-top: 6rem;
}

.box {
    background: white;
    border-radius: 25px;
    text-align: center;
}

.box h1 {
    font-weight: 100;
    font-size: 3.5rem;
    padding: 1rem 0;
    color: #000;
}

.about_container {
    position: relative;
    padding: 0rem;
}

.about_container .span1 {
    position: absolute;
    content: '';
    border: 2px solid transparent;
    border-bottom: solid 2px #FF577F;
    border-right: solid 2px #FF577F;
    animation: border_anim1 2s 0s linear forwards;
    border-bottom-right-radius: 100px;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    /* animation-play-state: paused; */
}

.about_container .span2 {
    position: absolute;
    content: '';
    border: 2px solid transparent;
    border-top: solid 2px #FF577F;
    border-left: solid 2px #FF577F;
    animation: border_anim1 2s 0s linear forwards;
    border-bottom-right-radius: 100px;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    /* animation-play-state: paused; */
}

.heart {
    width: 30px;
    height: 30px;
}

.box h2 {
    color: white;
    font-weight: 500;
    letter-spacing: 2px;
    background: #000;
    padding: 1rem 0;
    margin: 0 7rem;
    border-radius: 20px;
}

h2 span {
    margin-left: 0.3rem;
}

.input_first form,
.input_second form,
.long_input textarea,
.input_third form {
    justify-content: center;
    color: white;
}

.input_first {
    margin-top: 0.5rem;
}

.input_first form,
.input_second form {
    display: flex;
    flex-direction: row;
}

.input_first form,
.input_second form {
    margin: auto 10rem;
}

.input_first form .inputBox,
.input_second form .inputBox {
    margin-left: 0.7rem;
    border: 1px solid transparent;
    border-radius: 8px;

}

.input_second form .inputBox {
    margin-top: 0.5rem;
}

.input_third form .inputBox {
    margin-top: 0.5rem;
    background: #000;
    border-radius: 20px;
    padding: 0.3rem 0;
}

.input_third form .inputBox input {
    font-size: 1.3rem;
}

.input_second form .inputBox {
    margin-bottom: 0.5rem;
}

.inputBox input {
    position: relative;
    width: 100%;
    padding: 10px 10px 10px;
    background: #000;
    text-align: center;
    outline: none;
    box-shadow: none;
    color: white;
    font-size: 1rem;
    letter-spacing: 0.05em;
    transition: 0.5s;
    z-index: 10;
    border: 1px solid transparent;
    border-radius: 8px;
}

.inputBox input::placeholder {
    color: white;
}

.inputBox {
    position: relative;
}

.inputBox img {
    position: absolute;
    left: -12%;
    top: 35%;
}

.long_input textarea {
    position: relative;
    width: 80%;
    padding: 15px 10px 10px;
    outline: none;
    text-align: center;
    padding-left: 7.5rem;
    padding-right: 7rem;
    box-shadow: none;
    border: none;
    color: white;
    font-size: 2rem;
    letter-spacing: 0.05em;
    z-index: 10;
    /* margin: 0rem 9.5%; */
    margin: auto;
    border-radius: 10px;
    background: #000;
}

.long_input textarea::placeholder,
.input_third form .inputBox input::placeholder {
    color: white;
}

.long_input textarea:focus {
    background: #000;
    box-shadow: none;
    outline: none;
    border: none;
    border: none;
}

.input_third form {
    display: flex;
    flex-direction: column !important;
    padding-top: 0.5rem;
    margin: 0 7rem;
}

.input_third form .inputBox {
    display: block;
    width: 100%;
}

.input_third form .inputBox input {
    width: 75%;
    left: 2%;
    padding-top: 12px;
    font-size: 2.2rem;
    letter-spacing: 2px;
    word-spacing: 5px;
}

.input_third form .inputBox {
    position: relative;
}

.input_third form .inputBox .input_heart {
    position: absolute;
    height: 70%;
    top: 0.5rem;
    left: 3%;
}

.hrart_btn {
    width: 30%;
    height: 30%;
    transition: linear 0.5s;
}

.submit_btn,
.submit_btn button {
    cursor: default;
}

.submit_btn img,
.submit_btn span {
    cursor: pointer;
}

.submit_btn .hrart_btn:hover,
.submit_btn span:hover .hrart_btn {
    /* box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; */
    transform: scale(1.2);
}

button.btn {
    position: relative;
}

button.btn span {
    position: absolute;
    top: 40%;
    left: 44%;
    z-index: 2;
}

button.btn:focus {
    border: none;
}

.submit_btn {
    margin-top: 0.3rem;
}

/* OUR BRAND SECTION */
.our_brand {
    margin-top: 5rem;
    padding-top: 3.3rem;
    margin-bottom: 5rem;
}

.our_philosophy::before {
    position: absolute;
    content: '';
    background: black;
    left: -1rem;
    top: 0;
    width: 2rem;
    height: 19rem;
    z-index: 1;

}

.our_text {
    position: absolute;
    top: -4rem;
    left: -0.5rem;
    z-index: 6;
}

.our_text h1 {
    line-height: 0.9;

}

/* .our_text h1, */
.our_text h2 {
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;

}

.our_text h1 {
    font-size: 4.5rem;
    letter-spacing: 5px;
}

.brand_dark {
    background-color: #000;
    padding-right: 0;
    margin-right: 0;
    display: inline;
    z-index: 1;
}

.our {
    background-color: #000;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    color: whitesmoke;
}

.philosophy {
    background: #000;
}

.memory_para {
    padding-right: 5rem;
    font-family: 'Omnes', sans-serif;
    letter-spacing: 0;
    line-height: 1.5;
    font-size: 1.1rem;
    font-weight: 300;
}

.red_border {
    position: relative;
}

.red_border img {
    width: 40px;
    height: 40px;
}

.first_heart {
    position: absolute;
    z-index: 5;
    left: -1.2rem;
    top: 8.5rem;
    z-index: 2;
    opacity: 0;
    animation: hide_heart 2s 1s forwards;
    /* animation-play-state: paused; */
}

.sec_heart {
    position: absolute;
    z-index: 5;
    left: -1.2rem;
    top: 13rem;
    z-index: 2;
    opacity: 0;
    animation: hide_heart 2s 1s forwards;
    /* animation-play-state: paused; */
}

.third_heart {
    position: absolute;
    z-index: 5;
    left: -1.2rem;
    top: 17.5rem;
    z-index: 1;
    opacity: 0;
    animation: hide_heart 2s 1s forwards;
    /* animation-play-state: paused; */
}

@keyframes hide_heart {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* about section */
.about {
    margin: 0rem 50px 0 0;
    width: 100%;
    padding-top: 0rem;
    margin-bottom: 7rem;
    margin-top: 6rem;
}

.pratik_info h3 {
    color: white;
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;

}

.about-info p {
    font-size: 1rem;
}

.founder {
    color: #FF577F;

}

.pratik_info h6 {
    color: #1BB5EC;
    font-weight: 400;
}

.about-info h3 {
    font-size: 15.5px;
    font-weight: 300;
    font-family: 'Omnes', sans-serif;
    letter-spacing: 1px;
    word-spacing: 2px;
    line-height: 1.6;
    padding-left: 2rem;
    max-width: 100%;
}


.about_img img {
    width: 20rem;
    height: 20rem;
    border-radius: 100%;
}


/* why us? section */

.why_padding {
    padding-bottom: 3rem;
}

.why_us {
    height: auto;
    padding-top: 5rem;
    width: 100%;
    padding: auto 0;
    font-family: 'Omnes', sans-serif;
    background-color: white;
    color: black;
}

.margin {
    padding-bottom: 3rem;
}

.why_info {
    padding-left: 1rem;
    padding-bottom: 3rem;
    margin: 0 0;
    margin-left: 3rem;
}

.why_us h1 {
    font-size: 4rem;
    font-weight: 400;
    margin-bottom: 3rem;
    color: #401878;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
}

.why_us h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
}

.why_margin {
    margin-top: 0.1rem;
}



/* get-in-touch section */
.contact {
    padding-top: 7rem;
    padding-bottom: 0.5rem;
}

.get_touch_left {
    text-align: center;
}

.get_touch_left h1 {
    font-size: 5rem;
    letter-spacing: 2px;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
}

.get_touch_left img {
    width: 45%;
    height: 30%;
    border: 3px solid #ef6d9f;
    background-color: white;
}

.get_touch_left p {
    font-size: 1.3rem;
    margin-top: 0.1rem;
}

.available {
    margin-bottom: 2rem;
}

.email_right h5 {
    color: #1BB5EC;
    letter-spacing: 1px;

}

.email_info a {
    font-size: 1rem;
}

.email_info {
    margin-top: 0.5rem;
}

.social_icon a {
    position: relative;
    display: flex;
}

.social_icon p {
    position: absolute;
    left: 5rem;
    top: 1rem;
}

.social_icon img {
    height: 4rem;
    width: 4rem;
    border-radius: 100%;
    border: 2px solid white;
    margin-bottom: 1rem;
}

.social_icon p {
    font-size: 1rem;
    color: white;
    cursor: pointer;
}

.social_icon a {
    cursor: auto;
}

.social_icon img {
    margin-right: 1rem;
    cursor: pointer;
}

.youtube img {
    background-color: white;
}

/* border animation */

.red_border {
    margin-left: 5rem;
    margin-right: 5rem;
    padding: 4rem 2rem;
    padding-bottom: 0;
    padding-top: 2.5rem;
    border-radius: 25px;
    position: relative;
    animation-delay: 6s;
}

.red_border span:nth-child(1) {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: solid 2px #FF577F;
    border-right: solid 2px #FF577F;
    animation: border_anim1 2s 0s linear forwards;
    border-bottom-right-radius: 25px;
    /* animation-play-state: paused; */
}

@keyframes border_anim1 {
    0% {
        width: 0%;
        height: 0%;
    }

    90% {
        width: 100%;
        height: 100%;
    }

    100% {
        width: 100%;
        height: 100%;
        border-radius: 25px;
    }
}

.red_border span:nth-child(2) {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: solid 2px #FF577F;
    border-left: 2px solid #FF577F;
    animation: border_anim2 2s 0s linear forwards;
    border-top-left-radius: 25px;
    /* animation-play-state: paused; */
}

@keyframes border_anim2 {
    0% {
        width: 0%;
        height: 0%;
    }

    90% {
        width: 100%;
        height: 100%;
    }

    100% {
        border-radius: 25px;
        width: 100%;
        height: 100%;
    }
}


/* ANIMATION SECTION */
/* .animation {
    margin-top: 0.5rem;
    padding-bottom: 3rem;
    background: #FAF8F1;
} */
.animation .row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .0);
    margin-top: var(--bs-gutter-y);
}

.tnn_img {
    height: 70vh;
    width: 100vw;
    margin-top: 4rem;
}

/* section .heart_animate{
    position: absolute;
    width: 30px;
    height: 30px;
    bottom:  -6%;
    right: -50px;
    z-index: 1;
    left: 99.5%;
    animation: heart 2s 2s infinite;
    opacity: 0;
} */



/* why_border animation */

.why_border {
    margin-left: 5rem;
    margin-right: 5%;
    border-bottom-left-radius: 25px;
    position: relative;
}

.why_border:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    border-bottom: 2px solid #1BB5EC;
    border-left: 2px solid #1BB5EC;
    animation: border_anim 2s 0s linear forwards;
    border-bottom-left-radius: 25px;
    /* animation-play-state: paused; */
}


/* about border animation */
.about_border {
    margin-left: 5rem;
    margin-right: 5%;
    border-bottom-left-radius: 25px;
    position: relative;
}

.about_border::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    border-bottom: 2px solid #FF577F;
    border-left: 2px solid #FF577F;
    animation: border_anim 2s 0s linear forwards;
    border-bottom-left-radius: 25px;
    /* animation-play-state: paused; */
}



/* left-bottom special border animation */

.special {
    margin-left: 0rem;
    margin-right: 2%;
    border-bottom-left-radius: 25px;
    position: relative;
}

/* .animation .special:before {
    content: '';
    position: absolute;
    left: 1rem;
    bottom: -1rem;
    width: 0;
    border-bottom: 2px solid #109BDC;
    border-left: 2px solid #109BDC;
    animation: border_anim 2s 0s linear forwards;
    border-bottom-left-radius: 25px;
} */

/* border animation */
@keyframes border_anim {
    0% {
        width: 0%;
    }

    50% {
        width: 50%;

    }

    100% {
        width: 100%;

    }

    0% {
        height: 0%;
    }

    50% {
        height: 50%;

    }

    100% {
        height: 100%;

    }
}

.heart_full {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: -0.9rem;
    right: -50px;
    z-index: 1;
    left: 99.5%;
    animation: heart 2s 2s infinite;
    opacity: 0;
    /* animation-play-state: paused; */
}

/* heart animation */
@keyframes heart {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* FOOTER SECTION */

.footer {
    margin-top: 1rem;
    margin-bottom: 0;
}

.footer p {
    /* background-color: rgb(55, 52, 52); */
    background-color: rgb(14, 14, 14);
    padding: 1rem 0;
    color: #FF577F;
    font-size: 1rem;
}


/* ACHIEVMENT SECTION */
.archiev {
    background-color: hsl(0, 0%, 100%);
    margin-top: 2rem;
    font-family: 'Omnes', sans-serif;
    padding-top: 6rem;
    color: rgb(78, 73, 73);
}

.archiev h5,
.archiev p {
    color: rgb(78, 73, 73);
}

.archiev h5 {
    font-size: 1.5rem;
    font-weight: 600;
    position: relative;
    display: inline-block;
    font-family: 'Omnes', sans-serif;
    color: rgb(91, 85, 85);
}

.archiev .head_line h5::after {
    position: absolute;
    width: 100%;
    height: 1px;
    content: '';
    top: 90%;
    left: 0%;
    background-color: rgb(91, 85, 85);

}




.achieve_img h1,
.brand_img h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    font-weight: 500;
    color: rgb(91, 85, 85);
}

.achieve_img {
    margin-bottom: 2rem;
}


.archiev p {
    font-weight: 600;
    font-size: 1.1rem;
    font-family: 'Omnes', sans-serif;
    line-height: 0.7;
    color: rgb(91, 85, 85);
}

.achieve_img,
.brand_img {
    display: flex;
}

.achieve_img h1,
.brand_img h1 {
    line-height: 2.5;
}

.achieve_img img,
.brand_img img {
    width: 10rem;
    height: 10rem;
}

.not_special {
    margin-left: 4rem;
    margin-right: 5%;
    border-bottom-left-radius: 25px;
    position: relative;
    padding-left: 2rem;
    padding-bottom: 3rem;
}

.archiev .not_special:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2rem;
    width: 0;
    border-bottom: 2px solid #109BDC;
    border-left: 2px solid #109BDC;
    animation: border_anim 2s 0s linear forwards;
    border-bottom-left-radius: 25px;
    /* animation-play-state: paused; */
}

.heart_great {
    width: 30px;
    height: 30px;
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 1rem;
    right: -50px;
    z-index: 1;
    left: 99.5%;
    animation: heart 2s 2s infinite;
    opacity: 0;
    /* animation-play-state: paused; */

}


.head_line small {
    font-weight: 100;
    font-size: 1rem;
    font-family: 'Omnes', sans-serif;
}


/* REEL SECTION */
.our_reels {
    margin: 0rem 0;
    margin-top: 5rem;
    margin-bottom: 2rem;
}

.reel_img {
    width: 35px;
    height: 35px;
    background-color: white;
    border-radius: 100%;
}

.our-text {
    z-index: 2;
    position: absolute;
    left: -2%;
    top: -1.5%;

}

.our-text h3 {
    background-color: #000;
    display: inline;
}

.reel_h3 {
    font-size: 2.5rem;
    font-weight: 100;
    line-height: 0;
}

.reel_h1 {
    font-weight: 500;
    font-size: 4rem;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    background-color: #000;

}

.reel_container {
    position: relative;
    margin: 0 auto;
    padding: 5rem;
    padding-top: 7rem;

}

.reel_container .span1 {
    position: absolute;
    content: '';
    border: 2px solid transparent;
    border-bottom: solid 2px #FF577F;
    border-right: solid 2px #FF577F;
    animation: border_anim1 2s 0s linear forwards;
    border-bottom-right-radius: 100px;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    /* animation-play-state: paused; */
}

.reel_container .span2 {
    position: absolute;
    content: '';
    border: 2px solid transparent;
    border-top: solid 2px #FF577F;
    border-left: solid 2px #FF577F;
    animation: border_anim1 2s 0s linear forwards;
    border-bottom-right-radius: 100px;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    /* animation-play-state: paused; */
}

/* costomer_section slick slider */
.costomer_section {
    background: #Ffffff;
    color: rgb(91, 85, 85);
    padding: 3rem 2rem;
    margin-top: 0.2rem;
}

.brand_h1 h1 {
    padding-top: 2rem;
}

.brand_img,
.brand_h1 {
    margin-bottom: 2rem;
}

/* Slider */
.slick-slide {
    margin: 0px 10px;
    text-align: center;
    vertical-align: middle;
}

.slick-slide img {
    width: 60%;
}

/* third slider */
.costomer_third_wrapper h2 {
    padding: 0 0 2rem;
    margin-top: 4rem;
    text-align: left;
    font-size: 1.8rem;
    position: relative;
    margin-bottom: 0rem;
    display: inline;
}

.costomer_third_wrapper h2::after {
    position: absolute;
    content: '';
    background: rgb(91, 85, 85);
    ;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0%;
    display: inline;
}


/* slider img resize  */
.customer-logos .tiktok img {
    width: 30%;
    height: 30%;
}

.customer-logos .agm img {
    width: 40%;
    height: 40%;
}

.customer-logos .amul img {
    width: 40%;
    height: 40%;
    margin-top: 5%;
}

.customer-logos .artium img {
    width: 40%;
    height: auto;
    margin-top: 10%;
}

.customer-logos .google img {
    width: 40%;
    height: 40%;
}

.customer-logos .nanhi_kali img {
    margin-top: 15%;
}

.customer-logos .Tata_Sky img {
    margin-top: 17%;
}

.customer-logos .tiktok img {
    margin-top: 15%;
}

.customer-logos .youtube_logo img {
    margin-top: 5%;
    scale: 1.5;
}

.customer-logos .sage_films img {
    width: 30%;
    height: 30%;
}

.customer-logos .oml img {
    width: 40%;
    height: 40%;
}

.customer-logos .carpediem img {
    margin-top: 5%;
}


.customer-logos .slide img {
    border-radius: 4px;
    transition: 0.7s;
}

.customer-logos .slide img:hover {
    transform: scale(1.2);
    position: relative;
    z-index: 2;
}

.customer-logos {
    margin-bottom: 2rem;
}

.customer-logos .slide {
    padding: 3rem 0;
}

.costomer_section .special {
    margin-left: 4rem;
    margin-right: -0%;
    border-bottom-left-radius: 25px;
    position: relative;
}

.costomer_section .special:before {
    content: '';
    position: absolute;
    left: -2rem;
    bottom: -1rem;
    width: 0;
    border-bottom: 2px solid #109BDC;
    border-left: 2px solid #109BDC;
    animation: border_anim 2s 0s linear forwards;
    border-bottom-left-radius: 25px;
    /* animation-play-state: paused; */
}


.costomer_section .special .heart_full {
    left: 96%;
    bottom: -2.6%;
    z-index: 10;
}



/* section:hover .about_border::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    border-bottom: 2px solid #FF577F;
    border-left: 2px solid #FF577F;
    animation: border_anim 2s 0s linear forwards;
    border-bottom-left-radius: 25px;
    animation-play-state: running;
} */
/* section:hover .why_border:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    border-bottom: 2px solid #1BB5EC;
    border-left: 2px solid #1BB5EC;
    animation: border_anim 2s 0s linear forwards;
    border-bottom-left-radius: 25px;
    animation-play-state: running;
} */
/* section:hover .heart_animate {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: -6%;
    right: -50px;
    z-index: 1;
    left: 99.5%;
    animation: heart 2s 2s infinite;
    opacity: 0;
    animation-play-state: running;
} */


/* section:hover .red_border span:nth-child(2) {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: solid 2px #FF577F;
    border-left: 2px solid #FF577F;
    animation: border_anim2 2s 0s linear forwards;
    border-top-left-radius: 25px;
    animation-play-state: running;
} */

/* section:hover .red_border span:nth-child(1) {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: solid 2px #FF577F;
    border-right: solid 2px #FF577F;
    animation: border_anim1 2s 0s linear forwards;
    border-bottom-right-radius: 25px;
    animation-play-state: running;
} */


/* .animation:hover .special:before {
    content: '';
    position: absolute;
    left: 1rem;
    bottom: -1rem;
    width: 0;
    border-bottom: 2px solid #109BDC;
    border-left: 2px solid #109BDC;
    animation: border_anim 2s 0s linear forwards;
    border-bottom-left-radius: 25px;
    animation-play-state: running;
} */


/* section:hover .heart_full {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: -0.9rem;
    right: -50px;
    z-index: 1;
    left: 99.5%;
    animation: heart 2s 2s infinite;
    opacity: 0;
    animation-play-state: running;
} */

/* .archiev:hover .not_special:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2rem;
    width: 0;
    border-bottom: 2px solid #109BDC;
    border-left: 2px solid #109BDC;
    animation: border_anim 2s 0s linear forwards;
    border-bottom-left-radius: 25px;
    animation-play-state: running;
} */

/* section:hover .heart_great {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 1rem;
    right: -50px;
    z-index: 1;
    left: 99.5%;
    animation: heart 2s 2s infinite;
    opacity: 0;
    animation-play-state: running;
} */
/* 
section:hover .span1 {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    animation: border_anim1 2s 0s linear forwards;
    border-bottom-right-radius: 100px;
    animation-play-state: running;
} */


/* section:hover .span2 {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    animation: border_anim1 2s 0s linear forwards;
    border-bottom-right-radius: 100px;
    animation-play-state: running;
} */


/* 
.costomer_section:hover .special:before {
    content: '';
    position: absolute;
    left: -2rem;
    bottom: -1rem;
    width: 0;
    border-bottom: 2px solid #109BDC;
    border-left: 2px solid #109BDC;
    animation: border_anim 2s 0s linear forwards;
    border-bottom-left-radius: 25px;
    animation-play-state: running;
} */
/* .costomer_section:hover .special .heart_full{
    left: 95%;
    bottom: -2.5%;
    z-index: 2;
} */

/* 
section:hover .third_heart {
    position: absolute;
    z-index: 5;
    left: -1.2rem;
    top: 14rem;
    z-index: 1;
    opacity: 0;
    animation: hide_heart 2s 1s forwards;
    animation-play-state: running;
} */
/* section:hover .sec_heart {
    position: absolute;
    z-index: 5;
    left: -1.2rem;
    top: 9.5rem;
    z-index: 1;
    opacity: 0;
    animation: hide_heart 2s 1s forwards;
    animation-play-state: running;
} */
/* section:hover .first_heart {
    position: absolute;
    z-index: 5;
    left: -1.2rem;
    top: 5rem;
    z-index: 2;
    opacity: 0;
    animation: hide_heart 2s 1s forwards;
    animation-play-state: running;
} */

/* 
.box::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -50%;
    width: 1050px;
    height: 720px;
    transform-origin: bottom right;
    background: linear-gradient(0deg, transparent, #109BDC, #109BDC);
    animation: animate 6s linear infinite;
} */

/* .box::after {
    content: '';
    position: absolute;
    top: -40%;
    left: -50%;
    width: 1050px;
    height: 750px;
    transform-origin: bottom right;
    background: linear-gradient(0deg, transparent, #FF577F, #FF577F);
    animation: animate 6s linear infinite;
    animation-delay: -3s;
} */
/* #our_reels_show_btn, #about_tmm_show_btn, #philosophy_show_btn{
    display: none;
}  */

/* .button_show{
    display: block;
    width: 800px;
} */
/* .button_show button{
    padding: 15px 60px;
    font-size: 1.5rem;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
    margin: 0px auto;
    margin-top: 10px;
    color: #fff;
    background-color: #FF577F;
    transition: linear 0.5s;
    border: none;
    outline: none;
}
.button_show button:focus{
    padding: 15px 60px;
    font-size: 1.5rem;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
    margin: 0px auto;
    margin-top: 10px;
    color: #fff;
    background-color:  #FF577F;
    border: none;
    outline: none;
}
.button_show #our_reels_show_btn,
.button_show #our_reels_show_btn:focus{
    margin-top: 3rem;
}
.button_show #philosophy_show_btn,
.button_show button:focus#philosophy_show_btn{
    margin-bottom: 2rem;
} */