:root {
    --social-media-link1-content: 'Instagram';
    --social-media-link2-content: 'Whatsapp';
    --social-media-link3-content: 'Youtube';
    --social-media-link4-content: 'Pinterest';
    --social-media-link1-bgcolor: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
    --social-media-link2-bgcolor: linear-gradient(#25d366, #25d366) 14% 84%/16% 16% no-repeat, radial-gradient(#25d366 60%, transparent 0);
    --social-media-link3-bgcolor: red;
    --social-media-link4-bgcolor: #E60023;
    --social-media-desktop-handler-bg-color: #A98C66;
    --social-media-desktop-handler-bg-color-hover: #D0DDD7;
    --social-media-desktop-handler-text-color: #682D63;
}


/* SocialMedia Links */
.social-link-for-desktop-link1:before {
    content: var(--social-media-link1-content);
}

.social-link-for-desktop-link2:before {
    content: var(--social-media-link2-content);
}

.social-link-for-desktop-link3:before {
    content: var(--social-media-link3-content);
}

.social-link-for-desktop-link4:before {
    content: var(--social-media-link4-content);
}

.social-link-for-desktop-link1 {
    font-size: 20px;
}

.social {
    position: fixed;
    top: 60%;
    z-index: 1;
}

.social ul {
    padding: 0px;
    -webkit-transform: translate(-270px, 0);
    -moz-transform: translate(-270px, 0);
    -ms-transform: translate(-270px, 0);
    -o-transform: translate(-270px, 0);
    transform: translate(-270px, 0);
}

.social ul li {
    display: block;
    margin: 5px;
    background: rgba(0, 0, 0, 0.36);
    width: 320px;
    text-align: right;
    padding: 10px;
    -webkit-border-radius: 0 30px 30px 0;
    -moz-border-radius: 0 30px 30px 0;
    border-radius: 0 30px 30px 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.social ul li:hover {
    -webkit-transform: translate(110px, 0);
    -moz-transform: translate(110px, 0);
    -ms-transform: translate(110px, 0);
    -o-transform: translate(110px, 0);
    transform: translate(110px, 0);
    background: rgba(255, 255, 255, 0.4);
}

.social ul li:hover a {
    color: #F1C40F;
    text-decoration: none;
}

.social ul li:hover i {
    color: #fff;
    background: red;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.social ul li i {
    margin-left: 10px;
    color: #000;
    padding: 11px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    background: #ffffff;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}


.social-link-for-desktop {
    position: fixed;
    top: 60%;
    z-index: 3;
    width: 0;
}

.social-link-for-desktop ul {
    padding: 0px;
    -webkit-transform: translate(-270px, 0);
    -moz-transform: translate(-270px, 0);
    -ms-transform: translate(-270px, 0);
    -o-transform: translate(-270px, 0);
    transform: translate(-270px, 0);
}

.social-link-for-desktop ul li {
    display: block;
    margin: 5px;
    background: var(--social-media-desktop-handler-bg-color);
    width: 320px;
    height: 50px;
    text-align: right;
    padding: 5px;
    -webkit-border-radius: 0 30px 30px 0;
    -moz-border-radius: 0 30px 30px 0;
    border-radius: 0 30px 30px 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.social-link-for-desktop ul li:hover {
    -webkit-transform: translate(110px, 0);
    -moz-transform: translate(110px, 0);
    -ms-transform: translate(110px, 0);
    -o-transform: translate(110px, 0);
    transform: translate(110px, 0);
    background-color: var(--social-media-desktop-handler-bg-color-hover);
}

.social-link-for-desktop ul li:hover a {
    color: var(--social-media-desktop-handler-text-color);
    text-decoration: none;
    font-weight: bolder;
}

.social-link-for-desktop ul li:hover i {
    color: #fff;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.social-li-link1:hover i {
    background: var(--social-media-link1-bgcolor);
    transition: all 1s;
}

.social-li-link2:hover i {
    background: var(--social-media-link2-bgcolor);
    transition: all 1s;
}

.social-li-link3:hover i {
    background-color: var(--social-media-link3-bgcolor);
    transition: all 1s;
}

.social-li-link4:hover i {
    background-color: var(--social-media-link4-bgcolor);
    transition: all 1s;
}

.social-link-for-desktop ul li i {
    margin-left: 10px;
    color: #000;
    background: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 25px;
    background: #ffffff;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    text-align: center;
    padding: 7px;
}

.social-link-for-mobile-tab {
    display: none;
}

.social-link-for-mobile-tab-shareicon {
    position: fixed;
    width: 50px;
    height: 50px;
    background: linear-gradient(to bottom right, #ffffff 39%, #626567 124%);
    top: 91%;
    margin-left: 40px;
    z-index: 21;
    text-align: center;
    overflow: hidden;
    line-height: 50px;
    font-size: 1.2em;
    color: #000;
    -moz-box-shadow: 0px 3px 9px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0px 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0px 3px 9px rgba(0, 0, 0, .5);
    border-radius: 50px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all 0.4s ease 0s;

}

.social-link-for-mobile-tab-shareicon:hover {
    cursor: pointer;
    color: #154360;

}

.social-link-for-mobile-tab-shareicon i {
    transition: all 0.4s ease 0s;
}

.social-link-for-mobile-tab-shareicon i:hover {
    transform: rotate(360deg);

}

.social-link-for-mobile-tab-link {
    position: fixed;
    width: 50px;
    height: 50px;
    color: #000;
    border-radius: 50px;
    text-align: center;
    font-size: 1.5em;
    top: 91%;
    margin-left: 40px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-box-shadow: 0px 3px 9px rgba(0, 0, 0, .2);
    -webkit-transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    z-index: 20;
    border: 4px solid white;
    box-shadow: 1px 1px 10px 2px #fff;
    transition: all 0.4s ease 0s;
    line-height: 40px;
    vertical-align: middle;
}

.social-link-for-mobile-tab-link:hover {
    cursor: pointer;
}
.social-link-for-mobile-tab-link a
{
    text-decoration: none;
    color: #000;
}

.social-link-for-mobile-tab-link i {
    display: none;
}


.social-link-for-mobile-tab-link1 {
    background: var(--social-media-link1-bgcolor);
}
.social-link-for-mobile-tab-link2 {
    background: var(--social-media-link2-bgcolor);
}
.social-link-for-mobile-tab-link3 {
    background: var(--social-media-link3-bgcolor);
}
.social-link-for-mobile-tab-link4 {
    background: var(--social-media-link4-bgcolor);
}

/* OrderNow button in hero section */
.slice_button {
    font-family: var(--third-font-theme);
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 50px;
}

.btn-slice {
    padding: 1.2rem 2.5rem;
    border: 2.5px solid #000000;
    border-radius: 0rem;
    color: #000000;
    font-size: 0.6875rem;
    font-weight: bolder;
    letter-spacing: 0.3rem;
    position: relative;

    -webkit-transition: all 1000ms cubic-bezier(0.890, 0, 0.140, 1);
    /* older webkit */
    -webkit-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
    -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
    -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
    transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
    /* custom */

    -webkit-transition-timing-function: cubic-bezier(0.890, 0, 0.140, 1);
    /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
    -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
    -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
    transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
    /* custom */
}

.btn-slice .top {
    position: relative;
    height: 6px;
    overflow: hidden;
    top: 0;
    -webkit-transition: all 300ms cubic-bezier(1.000, 0, 0.025, 1);
    /* older webkit */
    -webkit-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
    -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
    -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
    transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
    /* custom */

    -webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.025, 1);
    /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
    -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
    -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
    transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
    /* custom */

    -webkit-transition-delay: 0.35s;
    -moz-transition-delay: 0.35s;
    -ms-transition-delay: 0.35s;
    -o-transition-delay: 0.35s;
    transition-delay: 0.35s;
}

.btn-slice .bottom {
    position: relative;
    height: 6px;
    overflow: hidden;
    bottom: 0;
    -webkit-transition: all 300ms cubic-bezier(1.000, 0, 0.025, 1);
    /* older webkit */
    -webkit-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
    -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
    -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
    transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
    /* custom */

    -webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.025, 1);
    /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
    -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
    -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
    transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
    /* custom */

    -webkit-transition-delay: 0.35s;
    -moz-transition-delay: 0.35s;
    -ms-transition-delay: 0.35s;
    -o-transition-delay: 0.35s;
    transition-delay: 0.35s;
}

.btn-slice .bottom span {
    top: -6px;
    position: absolute;
    left: 0;
}

.btn-slice:hover .top {
    top: -5px;
    -webkit-transition-delay: 0.35s;
    -moz-transition-delay: 0.35s;
    -ms-transition-delay: 0.35s;
    -o-transition-delay: 0.35s;
    transition-delay: 0.35s;
}

.btn-slice:hover .bottom {
    bottom: -5px;
    -webkit-transition-delay: 0.35s;
    -moz-transition-delay: 0.35s;
    -ms-transition-delay: 0.35s;
    -o-transition-delay: 0.35s;
    transition-delay: 0.35s;
}

.btn-slice:hover,
.btn-slice:focus,
.btn-slice:active {
    margin-left: 10px;
}

.btn-slice:hover:before {
    width: 130%;
}

.btn-slice:before {
    content: '';
    height: 2px;
    width: 60px;
    background-color: #000000;
    position: absolute;
    margin-top: 6px;
    right: -35px;

    -webkit-transition: all 1000ms cubic-bezier(0.890, 0, 0.140, 1);
    /* older webkit */
    -webkit-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
    -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
    -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
    transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
    /* custom */

    -webkit-transition-timing-function: cubic-bezier(0.890, 0, 0.140, 1);
    /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
    -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
    -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
    transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
    /* custom */
}


/* Moving Scrolling down icon*/
.moving-scroll-down-icon {
    position: absolute;
    bottom: 20px;
    margin: 0 auto;
    width: 24px;
    height: 24px;
}

.chevron {
    position: absolute;
    width: 28px;
    height: 8px;
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
    animation: moveDown 3s ease-out infinite;
}

.chevron:first-child {
    animation: moveDown 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
    animation: moveDown 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
    content: ' ';
    position: absolute;
    top: -50px;

    height: 100%;
    width: 51%;
    background: #7E846B;

}

.chevron:before {
    left: 0;
    transform: skew(0deg, 30deg);
}

.chevron:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -30deg);
}

@media (max-width: 800px) {

.social-link-for-desktop
{
    display: none;
}
.social-link-for-mobile-tab
{
    display: block;
}
    
}