@font-face {
    font-family: 'Josefin Sans';
    src: url('JosefinSans-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-display: swap
}


@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

:root {
    --ThemeColor-: rgba(237, 179, 99, 1)
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Josefin Sans';
    /* font-family: "Google Sans", sans-serif; */
    /* font-family: "Google Sans Code", monospace; */
    text-decoration: none;
}

a {
    color: white;
}

.grid a{
    pointer-events: none;
}

body {
    overflow-x: hidden;
    background: url(imagemain/halfnewC-Picsart-AiImageEnhancer\ -\ Copy.webp) center center;
    /* background: url(kk.png) center center; */
    background: url(kkk.png) center center;
    
    background-size: 200vh auto;
}

::-webkit-scrollbar {
    display: none
}

@media (max-width: 768px) {
    .Itemss .Box {
        display: none;
    }

    .Title .Text {
        font-size: 7vh !important;
    }

    .Title .ThirdText {
        font-size: 6vh !important;
    }

    .Title .FirstText {
        font-size: 6vh !important;
    }

    .Title .FourthText {
        margin-top: -3.5vh !important;
        font-size: 7vh !important;
    }

    .Title .SixthText {
        margin-top: -4vh !important;
        font-size: 7vh !important;
    }
}










@keyframes HoverMenuAni {
    from {
        background-position: 100% center
    }

    to {
        background-position: 200% center
    }
}

@keyframes HoverMenuAniBack {
    from {
        background-position: 200% center
    }

    to {
        background-position: 300% center
    }
}

.HeaderMain {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    margin-top: 10px;
}

.HeaderMain .phoneMenu {
    width: 70px;
    height: 70px;
    display: none;
    align-items: center;
    justify-content: center;
}

.stable {
    display: none;
    width: 70px;
    height: 70px;
}

.HeaderMain .phoneMenu .PhoneIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-direction: column;
}

.HeaderMain .phoneMenu .PhoneIcon span {
    display: block;
    width: 30px;
    height: 2.3px;
    border-radius: 100px;
    background-color: #fff;
}


.HeaderMain .CenterContainer {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
}


.HeaderMain .CenterContainer .MainManu {
    display: flex;
    align-items: center;

    width: 420px;
}


.HeaderMain .CenterContainer .MainManu .Distributor {
    text-transform: uppercase;
    font-size: 12px;
    color: var(--ThemeColor-);
    font-weight: 700;
    margin-top: 1vh;
    padding: 7.5px 12.5px 7.5px 12.5px;
    border-radius: 10px;
    border: 2.5px solid var(--ThemeColor-);

    transition: 0.3s ease;
    position: relative;
    background-color: transparent;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.HeaderMain .CenterContainer .MainManu .Distributor .becomeOurText{
    font-size: 7px;
    margin-bottom: 2px;
}
.HeaderMain .CenterContainer .MainManu .Distributor .distributorText{
    /* font-size: 7px; */
    /* margin-bottom: 2px; */
}

.HeaderMain .CenterContainer .MainManu .Distributor::after {
    content: '';
    position: absolute;
    background-image: url(right-arrow.png);
    height: 12.5px;
    width: 12.5px;

    top: 50%;
    right: 2px;
    transform: translate(-50%, -50%);

    background-size: cover;
    background-position: center center;
    opacity: 0;
    transition: 0.3s ease;
}

.HeaderMain .CenterContainer .MainManu .Distributor:hover::after {
    opacity: 1;
}

.HeaderMain .CenterContainer .MainManu .Distributor:hover {
    padding: 7.5px 24px 7.5px 7px;
}

.HeaderMain .CenterContainer .MainManu .Distributor:active {
    padding: 1vh 2vh;
}

.HeaderMain .CenterContainer .MainManu .Distributor:active::after {
    opacity: 0;
}

.HeaderMain .CenterContainer .MainManu .Line {
    width: 2px;
    height: 7px;
    background-color: var(--ThemeColor-);

    margin: 0 14px;
    border-radius: 100px;
}

/* Hover affect */
.HeaderMain .CenterContainer .MainManu a {
    background-image: url(imagemain/hoveraffect.webp);
    background-size: 201% 50px;
    background-position: 300% center;
    background-clip: text;
    color: transparent;

    font-size: .8rem;
    font-weight: 700;
    transition: .5s ease-in-out;
    animation: .4s ease-in-out alternate forwards HoverMenuAniBack
}

/* Hover affect */
.HeaderMain .CenterContainer .MainManu a:hover {
    animation: .4s ease-in-out alternate forwards HoverMenuAni
}


.HeaderMain .CenterContainer .MainManu:nth-child(1) {
    justify-content: end
}

.HeaderMain .CenterContainer .MainManu:nth-child(2) {
    justify-content: start
}


.HeaderMain .CenterContainer .MainManu .OurManagmentMenu {
    width: 131px;
    height: 16px;
    position: relative;
}

.HeaderMain .CenterContainer .MainManu .OurRangeMenu {
    width: 80px;
    height: 16px;
    position: relative;
}

.HeaderMain .CenterContainer .MainManu .OurRangeMenu .Control {
    transition: .8s ease-in-out;
    left: -35px;
}

.HeaderMain .CenterContainer .MainManu .OurRangeMenu .Control .DropDown {
    height: 340px;
}


.HeaderMain .CenterContainer .MainManu .Control {
    padding-top: 3px;
    height: 15px;
    position: absolute;
    top: 0;
    left: -10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;

    transition: .4s ease-in-out;
}

.HeaderMain .CenterContainer .MainManu .arrowDown {
    width: 12px;
    height: 12px;
    background-image: url(imagemain/icons/arrowdown.webp);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    top: 22px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    transition: .4s ease-in-out;
}

.HeaderMain .CenterContainer .MainManu .Control .DropDown {
    height: 120px;
    width: 150px;
    border-radius: 12px;
    margin-top: 10px;
    padding-top: 10px;

    opacity: 0;

    background-color: rgba(22, 22, 22, 0.7);
    backdrop-filter: blur(1vh);

    transition: .4s ease-in-out;
}

.HeaderMain .CenterContainer .MainManu .Control .DropDown .DropeItems {
    width: 100%;
    height: 20px;
    padding-left: 30px;
    padding-bottom: 2px;
    padding-top: 2px;
    opacity: 0;

    /* background-color: #fff; */
    transition: .4s ease-in-out 1s;
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(1) {
    transition: .4s ease-in-out .05s
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(2) {
    transition: .4s ease-in-out .1s
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(3) {
    transition: .4s ease-in-out .15s
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(4) {
    transition: .4s ease-in-out .2s
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(5) {
    transition: .4s ease-in-out .25s
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(6) {
    transition: .4s ease-in-out .3s
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(7) {
    transition: .4s ease-in-out .35s
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(8) {
    transition: .4s ease-in-out .4s
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(9) {
    transition: .4s ease-in-out .45s
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(10) {
    transition: .4s ease-in-out .5s
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(11) {
    transition: .4s ease-in-out .55s
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(12) {
    transition: .4s ease-in-out .6s
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(13) {
    transition: .4s ease-in-out .65s
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(14) {
    transition: .4s ease-in-out .7s
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems:nth-child(15) {
    transition: .4s ease-in-out .75s
}

.HeaderMain .CenterContainer .MainManu .OurManagmentMenu .Control:hover {
    height: 130px;
}

.HeaderMain .CenterContainer .MainManu .OurRangeMenu .Control:hover {
    height: 400px;
}

.HeaderMain .CenterContainer .MainManu .Control:hover a.main-link {
    animation: .4s ease-in-out alternate forwards HoverMenuAni !important
}

.HeaderMain .CenterContainer .MainManu .Control:hover .DropDown {
    opacity: 1;
}

.HeaderMain .CenterContainer .MainManu .Control:hover .DropDown .DropeItems {
    padding-left: 15px;
    opacity: 1;
}

.HeaderMain .CenterContainer .MainManu .Control:hover~.arrowDown {
    top: 140px;
    transform: rotate(180deg);
    background-image: url(imagemain/icons/arrowdownyellow.webp);
}

.HeaderMain .CenterContainer .MainManu .OurRangeMenu .Control:hover~.arrowDown {
    top: 385px;
    transform: rotate(180deg);
    background-image: url(imagemain/icons/arrowdownyellow.webp);
}

.HeaderMain .CenterContainer .MainManu .DropDown .DropeItems {
    width: 100%;
    height: 20px;
}



.Logo {
    width: 100px;
    height: 100px;

    /* background-color: #fff; */
    background-image: url(Icons/Logo.svg);
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;

    margin: 0 30px;
}






















.journey .container .a {
    justify-content: flex-start
}

.journey .container .c {
    justify-content: flex-start
}

.journey .container .e {
    justify-content: flex-start
}

.journey .container .g {
    justify-content: flex-start
}

.journey .container .i {
    justify-content: flex-start
}

.journey .container .k {
    justify-content: flex-start
}

.journey .container .m {
    justify-content: flex-start
}

.journey .container .o {
    justify-content: flex-start
}

.journey .container .q {
    justify-content: flex-start
}

.journey .container .s {
    justify-content: flex-start
}

.journey .container .u {
    justify-content: flex-start
}

.journey .container .w {
    justify-content: flex-start
}

.journey .container .y {
    justify-content: flex-start
}







.NavMain {
    position: fixed;
    height: 100vh;
    width: 0vh;
    background-color: rgba(21, 21, 21, 0.8);
    backdrop-filter: blur(2vh);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: 2000;
    transition: .5s ease-in-out;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


.NavMain.open {
    width: 100vw;
    opacity: 1
}

.NavMain .NavContainer {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.NavMain .NavContainer .Box {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column
}

.NavMain .NavContainer .Box a {
    background-image: url(imagemain/hoveraffect.webp);
    background-size: 201% 50px;
    background-position: 300% center;
    background-clip: text;
    color: transparent;

    font-size: .8rem;
    font-weight: 700;
    transition: .5s ease-in-out;
    animation: .4s ease-in-out alternate forwards HoverMenuAniBack
}

/* Hover affect */
.NavMain .NavContainer .Box a:hover {
    animation: .4s ease-in-out alternate forwards HoverMenuAni
}

.NavMain .NavContainer .Box div {
    padding-right: 500px;
    opacity: 0;
    /* background-color: #353535; */
    width: 200px;

    text-align: center;
    /* transition: 2s ease-in-out; */
}

.NavMain .NavContainer .Box div:nth-child(1) {
    transition: 0.6s ease-in-out 0.05s;
}

.NavMain .NavContainer .Box div:nth-child(2) {
    transition: 0.6s ease-in-out 0.1s;
}

.NavMain .NavContainer .Box div:nth-child(3) {
    transition: 0.6s ease-in-out 0.15s;
}

.NavMain .NavContainer .Box div:nth-child(4) {
    transition: 0.6s ease-in-out 0.2s;
}

.NavMain .NavContainer .Box div:nth-child(5) {
    transition: 0.6s ease-in-out 0.25s;
}

.NavMain .NavContainer .Box div:nth-child(6) {
    transition: 0.6s ease-in-out 0.3s;
}

.NavMain .NavContainer .Box div:nth-child(7) {
    transition: 0.6s ease-in-out 0.35s;
}

.NavMain.open .NavContainer .Box div {
    padding-right: 0px;
    opacity: 1;
    width: 200px;

    text-align: center;
}











@media (min-width:1050px) {
    .NavMain {
        width: 0 !important
    }
}

@media (max-width:1050px) {
    .HeaderMain {
        justify-content: space-between
    }

    .phoneMenu {
        display: flex !important;
    }

    .stable {
        display: flex !important;
    }

    .HeaderMain .CenterContainer .MainManu {
        display: none
    }
}






















.Doc {
    color: #fff;
    display: flex
}

.scaling-box {
    color: #fff;
    display: flex
}

.Doc {
    height: 100vh;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 700;
    position: relative;
    margin-top: -2px
}

.scaling-box {
    width: 20vw;
    height: 20vh;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    border-radius: 1vh;
    position: absolute;
    overflow: hidden;
    background-color: #fff
}

.MyVideo {
    height: 401%;
    object-fit: cover;
    background-color: #000;
    cursor: pointer
}

.ContainerForText {
    cursor: pointer;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 100vh;
    color: #f3f3f3;
    font-weight: 800;
    font-size: 1.5rem;
    opacity: 0;
    z-index: 10000
}

.Doc .SecondText {
    color: var(--ThemeColor-)
}

.MAP .mapr .CB .C .T {
    color: var(--ThemeColor-)
}

.colorit {
    color: var(--ThemeColor-)
}

.jMore a {
    color: var(--ThemeColor-)
}

.jTitle span {
    color: var(--ThemeColor-)
}

.jMore {
    display: flex;
    align-items: center;
    justify-content: center;
}

.videoSection {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    padding: 20px;
    border-radius: 12px
}

.videoSection iframe {
    width: 90vw;
    height: 90vh;
    border: none;
    border-radius: 1vh
}

.videoSection .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 3vh;
    height: 3vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ThemeColor-);
    color: #fff;
    font-size: 2.5vh;
    border-radius: .5vh;
    cursor: pointer;
    border-bottom: .2vh solid var(--ThemeColor-);
    border-left: .1vh solid var(--ThemeColor-)
}

.Footer .Part .A .A_ {
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center center;
    text-transform: uppercase;
}

.Footer .Part .B .B_ {
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center center;
    text-transform: uppercase;
}

.Footer .Part .C .C_ {
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center center;
    text-transform: uppercase;
}

.Footer {
    height: auto;
    display: flex
}

.Footer .Part {
    height: auto;
    display: flex
}

.Footer footer {
    height: auto;
    display: flex
}

.Footer {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    background-position: top center;
    background-size: 100vh cover
}

.Footer footer .Center>:first-child>:first-child {
    background-size: 20px;
    background-position: center center;
    background-repeat: no-repeat
}

.Footer footer .Center>:nth-child(2)>:first-child {
    background-size: 20px;
    background-position: center center;
    background-repeat: no-repeat
}

.Footer footer .Center>:nth-child(3)>:first-child {
    background-size: 20px;
    background-position: center center;
    background-repeat: no-repeat
}

.io {
    background-size: 20px;
    background-position: center center;
    background-repeat: no-repeat
}

@keyframes MotionsF {
    to {
        background-position: center -200px
    }
}

.Footer .Part {
    width: 100%;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7vh;

    margin-top: 10vh;
    margin-bottom: 10vh;
}

.Footer .Part .A {
    width: 40vh;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Footer .Part .B {
    width: 40vh;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Footer .Part .C {
    width: 40vh;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Footer .Part .B {
    margin: 0 40px
}

.Footer .Part .A .A_ {
    background-image: url(Image/Icon/puzzle\ \(1\).webp);
    background-size: 90%;
    width: 14vh;
    height: 14vh;
}

.Footer .Part .B .B_ {
    background-image: url(Image/Icon/handshake.webp);
    background-size: 100%;
    width: 14vh;
    height: 14vh;
}

.Footer .Part .C .C_ {
    background-image: url(Image/Icon/newsletter.webp);
    background-size: 80%;
    width: 14vh;
    height: 14vh;
}

.boxof {
    width: 25vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;

    margin-left: 1.7vh;
    ;
}


.boxof .title {
    text-transform: uppercase;
    font-size: 2vh;
    font-weight: 500;
    color: white;
}

.boxof .ct {
    text-transform: uppercase;
    font-size: 1.8vh;
    color: var(--ThemeColor-);
    font-weight: 600;
    margin-top: 1vh;
    padding: 1.2vh 2vh;
    border-radius: 1.4vh;
    border: 0.4vh solid var(--ThemeColor-);

    transition: 0.3s ease;
    position: relative;
    background-color: transparent;
    cursor: pointer;

    /* background-color: #fff; */
}

.boxof .ct::after {
    content: '';
    position: absolute;
    background-image: url(right-arrow.png);
    height: 1.8vh;
    width: 1.8vh;
    right: 1vh;

    top: 50%;
    right: 0.5vh;
    transform: translate(-50%, -50%);

    background-size: cover;
    background-position: center center;
    opacity: 0;
    transition: 0.3s ease;
}

.boxof .ct:hover::after {
    opacity: 1;
}

.boxof .ct:hover {
    padding: 1.2vh 4vh 1.2vh 1vh;
}

.boxof .ct:active {
    padding: 1vh 2vh;
}

.boxof .ct:active::after {
    opacity: 0;
}


.ct {
    text-transform: uppercase;
    font-size: 1.8vh;
    color: var(--ThemeColor-);
    font-weight: 600;
    margin-top: 1vh;
    padding: 1.2vh 2vh 1.2vh 2vh;
    border-radius: 1.4vh;
    border: 0.4vh solid var(--ThemeColor-);

    transition: 0.3s ease;
    position: relative;
    background-color: transparent;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.ct::after {
    content: '';
    position: absolute;
    background-image: url(right-arrow.png);
    height: 1.8vh;
    width: 1.8vh;
    right: 1vh;

    top: 50%;
    right: 0.5vh;
    transform: translate(-50%, -50%);

    background-size: cover;
    background-position: center center;
    opacity: 0;
    transition: 0.3s ease;
}

.ct:hover::after {
    opacity: 1;
}

.ct:hover {
    padding: 1.2vh 4vh 1.2vh 1vh;
}

.ct:active {
    padding: 1vh 2vh;
}

.ct:active::after {
    opacity: 0;
}

.boxof .contactform {
    position: relative;
}

.boxof .contactform input {
    background-color: transparent;
    border: none;
    outline: none;
    color: rgb(145, 145, 145);
    width: 30vh;
    border-bottom: none;
    border-top: none;
    height: 3vh;

    font-size: 1.8vh;
    font-weight: normal;

}


.boxof .contactform input::placeholder {
    color: rgb(145, 145, 145);
    opacity: 1;
}

.boxof .hold {
    padding: .7vh 2vh;
    border-radius: 1.3vh;
    /* box-shadow: 0vh 0.3vh .0vh .1vh rgba(0, 0, 0, 0.418); */
    border: 0.4vh solid var(--ThemeColor-);
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.boxof .hold input {
    background: transparent;
}

.contactform .ct {
    position: absolute;
    top: 30%;
    left: 93%;
    transform: translate(-50%, -50%);

    border: none;
}

.contactform .ct::after {
    opacity: 1;

}


.certificate-slider {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.certificate-slider .Cert {
    font-size: 4vh;
    font-weight: 700;
    color: #fff;
    padding-top: 20vh;
    padding-bottom: 5vh
}

.slide-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

.certificate {
    width: 17vh;
    height: 17vh;
    margin: 1vh;
    background: #f9f9f9;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.MAP .title {
    margin-top: 10vh;
    color: #fff
}

.jTitle {
    margin-top: 10vh;
    color: #fff
}

.Footer .certificate-slider .slide-track .A {
    background-image: url(Image/Icon/Halal-New-Logo-Vector.svg-.webp);
    background-size: 90%;
    background-position: center center;
    background-repeat: no-repeat
}

.Footer .certificate-slider .slide-track .B {
    background-image: url(Image/Icon/haccp-hazard-analysis-critical-control-point-food-safety-certified-vector-badge-icon-logo-231531605.webp);
    background-size: 90%;
    background-position: center center;
    background-repeat: no-repeat
}

.Footer .certificate-slider .slide-track .C {
    background-image: url(Image/Icon/ingredients8.webp);
    background-size: 90%;
    background-position: center center;
    background-repeat: no-repeat
}

.Footer .certificate-slider .slide-track .D {
    background-size: 90%;
    background-position: center center;
    background-repeat: no-repeat
}

.Footer .certificate-slider .slide-track .E {
    background-size: 90%;
    background-position: center center;
    background-repeat: no-repeat
}

.Footer .certificate-slider .slide-track .F {
    background-size: 90%;
    background-position: center center;
    background-repeat: no-repeat
}

.Footer .certificate-slider .slide-track .D {
    background-image: url(Image/Icon/favpng_dd63753f5e777ea82bddc6136cd52a87.webp);
    background-size: 90%;
    background-position: center center;
    background-repeat: no-repeat
}

.Footer .certificate-slider .slide-track .E {
    background-image: url(Image/Icon/images.webp);
    background-size: 90%;
    background-position: center center;
    background-repeat: no-repeat
}

.Footer .certificate-slider .slide-track .F {
    background-image: url(Image/Icon/66a790c3e6b11dd3b3394639_BRC\ Green\ Badge.webp);
    background-size: 90%;
    background-position: center center;
    background-repeat: no-repeat
}

.MAP {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    height: auto;
    width: 100%;
    /* margin-bottom: -40vh; */
}

.MAP .title {
    width: 100%;
    text-align: center;
    font-size: 8.5vh;
    font-weight: bolder
}

.MAP .box .counter-box::after {
    font-size: 1.5vh;
    font-weight: 400;
    text-align: center
}

.MAP .subtitle {
    font-size: 1.5vh;
    font-weight: 400;
    text-align: center
}

.MAP .subtitle {
    width: 100%;
    color: #dcdcdc;
    text-transform: uppercase
}

.MAP .box {
    width: 50vh;
    height: 15vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.MAP .box .counter-box {
    width: 10vh;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5vh;
    position: relative
}

.MAP .box .counter-box::after {
    content: "";
    position: absolute;
    top: 73%;
    width: 5vh;
    height: 3vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-top: .4vh solid var(--ThemeColor-)
}

.MAP .box .C1::after {
    content: "COUNTRIES"
}

.MAP .box .C2::after {
    content: "CONTINENTS"
}

.MAP .mapr {
    height: clamp(70vh, 20vw, 80vh) !important;
    width: 90%;
    background: url(imagemain/icons/Map-01.webp) center bottom no-repeat;
    /* background: url(newmap.png) center bottom no-repeat; */

    background-size: clamp(80vh, 90vw, 200vh) !important;
    background-position: center clamp(-20vh, -10vw,-10vh);
    display: flex;
    align-items: flex-end;
    /* background-color: #fff; */
}

.MAP .CB {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.spaceformap {
    height: clamp(25vh, 20vw, 40vh);
    background-color: black;
}

.MAP .CB .C {
    align-items: center;
    width: 100%;
    display: flex
}

.journey .container {
    align-items: center;
    width: 100%;
    display: flex
}

.MAP .CB .C {
    width: 15vh;
    color: #fff;
    justify-content: center;
    flex-direction: column;
    text-transform: uppercase;
    padding: 2vh 1vh
}

.MAP .CB .C .T {
    font-size: 1.7vh;
    font-weight: 600;
    height: 4.5vh;
    width: 15vh;
    background-color: #1313139c;
    text-align: center;
    border-radius: 1vh;
    margin-bottom: 3vh;

    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ThemeColor-);
}

.MAP .CB .C .I {
    font-size: 1.6vh;
    margin-top: .5vh;
    width: 100%;
    text-align: left;
    position: relative;
}

.MAP .CB .C .I::before {
    content: "";
    position: absolute;
    margin-right: 8px;
    width: .5vh;
    height: .5vh;
    background-color: #fff;
    border-radius: 50%;
    top: .5vh;
    left: -1vh;
}

.jMore {
    font-weight: bolder;
    text-align: center
}

.jTitle {
    font-weight: bolder;
    text-align: center
}

.journey {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column
}

.jTitle {
    font-size: 10.5vh
}

.jMore {
    font-size: 2.5vh;
    margin-top: 3vh;
    cursor: pointer
}

.journey .container {
    height: auto;
    justify-content: center;
    flex-direction: column;
    margin: 15vh 0
}

.journey .container .xx {
    height: 20vh;
    width: 100%;
    display: flex;
    margin: 10px 0;
    align-items: center;
    justify-content: center;
    /* background-color: #ffffff88; */
}

.journey .container .b {}

.journey .container .d {}

.journey .container .f {}

.journey .container .h {}

.journey .container .j {}

.journey .container .l {}

.journey .container .n {}

.journey .container .p {}

.journey .container .r {}

.journey .container .t {}

.journey .container .v {}

.journey .container .x {}

.journey .container .z {}

.journey .container .xx .ccc {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.journey .container .a .ccc {
    margin-left: -50vh;
}

.journey .container .c .ccc {
    margin-left: -50vh;
}

.journey .container .e .ccc {
    margin-left: -50vh;
}

.journey .container .g .ccc {
    margin-left: -50vh;
}

.journey .container .i .ccc {
    margin-left: -50vh;
}

.journey .container .k .ccc {
    margin-left: -50vh;
}

.journey .container .m .ccc {
    margin-left: -50vh;
}

.journey .container .o .ccc {
    margin-left: -50vh;
}

.journey .container .q .ccc {
    margin-left: -50vh;
}

.journey .container .s .ccc {
    margin-left: -50vh;
}

.journey .container .u .ccc {
    margin-left: -50vh;
}

.journey .container .w .ccc {
    margin-left: -50vh;
}

.journey .container .y .ccc {
    margin-left: -50vh;
}

.journey .container .leftJ .ccc {
    margin-right: -50vh;
}

.journey .container .leftJ .ccc {
    margin-left: -50vh;
}


.journey .container .b .ccc {
    margin-right: -50vh;
}

.journey .container .d .ccc {
    margin-right: -50vh;
}

.journey .container .f .ccc {
    margin-right: -50vh;
}

.journey .container .h .ccc {
    margin-right: -50vh;
}

.journey .container .j .ccc {
    margin-right: -50vh;
}

.journey .container .l .ccc {
    margin-right: -50vh;
}

.journey .container .n .ccc {
    margin-right: -50vh;
}

.journey .container .p .ccc {
    margin-right: -50vh;
}

.journey .container .r .ccc {
    margin-right: -50vh;
}

.journey .container .t .ccc {
    margin-right: -50vh;
}

.journey .container .v .ccc {
    margin-right: -50vh;
}

.journey .container .x .ccc {
    margin-right: -50vh;
}

.journey .container .z .ccc {
    margin-right: -50vh;
}




.journey .container .xx .ccc .aa {
    width: 25vh;
    height: 25vh;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: .4vh solid var(--ThemeColor-)
}

.journey .container .xx ._aaa {
    border-radius: 1vh;
    background-color: var(--ThemeColor-)
}

.journey .container .xx .aaa {
    border-radius: 1vh;
    background-color: var(--ThemeColor-)
}

.journey .container .xx .ccc .bb {
    border-radius: 1vh;
    background-color: var(--ThemeColor-)
}

.journey .lineJourney .L {
    border-radius: 1vh;
    background-color: var(--ThemeColor-)
}

.journey .container .xx .ccc .aa .p {
    height: 95%;
    width: 95%;
    border-radius: 50%
}

.journey .container .ccc .aa .p {
    height: 95%;
    width: 95%;
    border-radius: 50%;
    background-size: cover
}

.journey .container .xx .ccc .bb {
    width: 3vh;
    height: .4vh;
    margin: 1.5vh 0
}

.journey .container .xx .ccc .cc {
    width: 20vh;
    height: 5vh;
    text-align: center;
    color: #fff;
    font-size: 2.3vh;
    font-weight: 700
}

.journey .container .xx .ccc .cc span {
    font-size: 2.3vh;
    font-weight: 300
}

.journey .lineJourney {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    z-index: -1
}

.journey .lineJourney .L {
    height: 90%;
    width: .8vh;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.journey .lineJourney .plane {
    width: 10vh;
    height: 10vh;
    background: url(plane.webp) center center/cover no-repeat
}

.journey .container .xx .aaa {
    height: .4vh;
    width: 15vh;
    margin-left: -.5vh;
    position: relative
}

.journey .container .xx ._aaa::after {
    content: '2025';
    display: block;
    color: var(--ThemeColor-);
    font-size: 3vh;
    font-weight: 600;
    position: absolute;
    transform: translate(-50%, -100%);
    top: 50%;
    left: 50%
}

.journey .container .xx .aaa::after {
    content: '2025';
    display: block;
    color: var(--ThemeColor-);
    font-size: 3vh;
    font-weight: 600;
    position: absolute;
    transform: translate(-50%, -100%);
    top: 50%;
    left: 50%
}


.journey .container .xx ._aaa {
    height: .4vh;
    width: 15vh;
    margin-right: -.5vh;
    position: relative
}


.Landing {
    height: 100vh;
    width: 100%
}

.ff {
    height: 100vh;
    width: 100%
}

.Landing .Area .Items {
    left: 50%;
    transform: translate(-50%, -50%)
}

.Landing .Area .Items .Box {
    left: 50%;
    transform: translate(-50%, -50%)
}

.Landing .Title {
    left: 50%;
    transform: translate(-50%, -50%)
}

.Slider {
    left: 50%;
    transform: translate(-50%, -50%)
}

.Landing {
    background-position: center center;
    background-size: 100vw auto;
    justify-content: flex-end;
    flex-direction: column;
    position: relative
}

.Landing .Title {
    position: absolute
}

.Slider {
    position: absolute
}

.ff {
    position: absolute
}

.ff {
    background-color: #1d1d1d;
    z-index: 6000
}

.Slider {
    top: 95%;
    width: auto;
    height: 50px;
    justify-content: center;
    opacity: 0;
    z-index: 1000;
    animation: 1s ease-in-out 1.5s forwards SliderAnimeStart
}

.Slider .Changer {
    width: 30px;
    height: 6px;
    background-color: #000;
    border-radius: 4px;
    margin: 0 5px;
    cursor: pointer;
    transition: .5s ease-in-out
}

@keyframes SliderAnimeStart {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.Landing .Title {
    width: 100vw;
    height: 100px;
    top: 30%;
    display: flex;
    align-items: center;
    justify-content: center
}

.Landing .Title .Text {
    font-size: 8vh;
    font-weight: 900;
    text-align: center;
    display: none;
    margin-bottom: 7vh;
    background-size: 40vh 20vh;
    background-position: top center;
    color: var(--ThemeColor-);
    opacity: 0;
    animation: 1s ease-in-out .5s forwards TextAnimeStart, 4s ease-in-out infinite alternate TextAnime
}

.RangeFirstBackground .Title .FirstText {
    display: flex
}

.RangeSecondBackground .Title .SecondText {
    display: flex
}

.RangeThirdBackground .Title .ThirdText {
    display: flex
}

.RangeFourthBackground .Title .FourthText {
    display: flex
}

.RangeFifthBackground .Title .FifthText {
    display: flex
}

.RangeSixthBackground .Title .SixthText {
    display: flex
}

@keyframes TextAnimeStart {
    from {
        opacity: 0;
        transform: translateY(2vh)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes TextAnime {
    to {
        background-size: 50vh 30vh
    }
}

.Landing .Area {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.Landing .Area .Bottom {
    height: 50vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    z-index: 0
}

.Landing .Area .Items {
    width: 30vh;
    height: 60vh;
    top: 58%;
    background-repeat: no-repeat;
    position: absolute
}

.Landing .Area .Itemss {
    width: 30vh;
    height: 60vh;
    top: 58%;
    background-repeat: no-repeat;
    position: absolute
}

.Landing .Area .Bottom .BottomWithColor {
    height: 100%;
    width: 100%;
    background-image: url(Subtract\ \(1\)\ 1.webp);
    background-repeat: no-repeat;
    background-size: 100vw 35vh;
    background-position: bottom center;
    z-index: 0;
    margin-bottom: 0
}

.Landing .Area .Items {
    z-index: 1000
}

.RangeFirstBackground .Area .Items {
    opacity: 0;
    transform: translate(-50%, -40%);
    animation: 1s ease-in-out alternate forwards ItemsBoxcartani1
}

.RangeSecondBackground .Area .Items {
    opacity: 0;
    transform: translate(-50%, -40%);
    animation: 1s ease-in-out alternate forwards ItemsBoxcartani2
}

.RangeThirdBackground .Area .Items {
    opacity: 0;
    transform: translate(-50%, -40%);
    animation: 1s ease-in-out alternate forwards ItemsBoxcartani3
}

.RangeFourthBackground .Area .Items {
    opacity: 0;
    transform: translate(-50%, -40%);
    animation: 1s ease-in-out alternate forwards ItemsBoxcartani4
}

.RangeFifthBackground .Area .Items {
    opacity: 0;
    transform: translate(-50%, -40%);
    animation: 1s ease-in-out alternate forwards ItemsBoxcartani5
}

.RangeSixthBackground .Area .Items {
    opacity: 0;
    transform: translate(-50%, -40%);
    animation: 1s ease-in-out alternate forwards ItemsBoxcartani5
}

@keyframes ItemsBoxcartani1 {
    to {
        opacity: 1;
        transform: translate(-50%, -50%)
    }
}

@keyframes ItemsBoxcartani2 {
    to {
        opacity: 1;
        transform: translate(-50%, -50%)
    }
}

@keyframes ItemsBoxcartani3 {
    to {
        opacity: 1;
        transform: translate(-50%, -50%)
    }
}

@keyframes ItemsBoxcartani4 {
    to {
        opacity: 1;
        transform: translate(-50%, -50%)
    }
}

@keyframes ItemsBoxcartani5 {
    to {
        opacity: 1;
        transform: translate(-50%, -50%)
    }
}

@keyframes ItemsBoxcartani6 {
    to {
        opacity: 1;
        transform: translate(-50%, -50%)
    }
}

.Landing .Area .Items .Box {
    position: absolute;
    top: 50%;
    background-repeat: no-repeat;
    opacity: 0
}

.RangeFirstBackground .Area .Items .Box:first-child {
    background-image: url(PlainRange/R2.webp);
    left: 10%;
    top: 79%;
    height: 55%;
    width: 90%;
    z-index: 1;
    animation: .7s ease-in-out .2s alternate forwards addin1, 4s ease-in-out infinite alternate-reverse PRF1ANI
}

.RangeFirstBackground .Area .Items .Box:nth-child(2) {
    background-image: url(PlainRange/R1.webp);
    top: 35%;
    height: 135%;
    width: 230%;
    animation: .7s ease-in-out alternate forwards addin1, 4s ease-in-out infinite alternate-reverse PRF2ANI
}

.RangeFirstBackground .Area .Items .Box:nth-child(3) {
    background-image: url(PlainRange/R5.webp);
    left: 100%;
    top: 70%;
    height: 30%;
    width: 90%;
    z-index: 1;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate PRF3ANI
}

.RangeFirstBackground .Area .Items .Box:nth-child(4) {
    background-image: url(PlainRange/R3.webp);
    left: 40%;
    top: 40%;
    height: 50%;
    width: 150%;
    z-index: -1;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate PRF4ANI
}

.RangeFirstBackground .Area .Items .Box:nth-child(5) {
    left: 0;
    top: 10%;
    height: 40%;
    width: 90%;
    z-index: 1;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate PRF5ANI
}

@keyframes PRF1ANI {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-55%, -50%) rotate(3deg)
    }
}

@keyframes PRF2ANI {
    0% {
        transform: translate(-50%, -47%) rotate(-2deg)
    }

    100% {
        transform: translate(-50%, -50%) rotate(0)
    }
}

@keyframes PRF3ANI {
    0% {
        transform: translate(-50%, -50%) rotate(-10deg)
    }

    100% {
        transform: translate(-45%, -50%) rotate(-7deg)
    }
}

@keyframes PRF4ANI {
    0% {
        transform: translate(-50%, -47%) rotate(0)
    }

    100% {
        transform: translate(-50%, -50%) rotate(0)
    }
}

@keyframes PRF5ANI {
    0% {
        transform: translate(-50%, -50%) rotate(-20deg)
    }

    100% {
        transform: translate(-45%, -50%) rotate(-23deg)
    }
}

@keyframes PRF6ANI {
    0% {
        transform: translate(-50%, -20%) rotate(-20deg)
    }

    100% {
        transform: translate(-60%, -30%) rotate(-23deg)
    }
}

.RangeSecondBackground .Area .Items .Box:first-child {
    background-image: url(DessertRange/R1.webp);
    left: 10%;
    top: 85%;
    height: 23%;
    width: 90%;
    z-index: 1;
    animation: .7s ease-in-out .2s alternate forwards addin1, 4s ease-in-out infinite alternate-reverse DRF1ANI
}

.RangeSecondBackground .Area .Items .Box:nth-child(2) {
    background-image: url(DessertRange/R4.webp);
    top: 35%;
    height: 135%;
    width: 230%;
    animation: .7s ease-in-out alternate forwards addin1, 4s ease-in-out infinite alternate-reverse DRF2ANI
}

.RangeSecondBackground .Area .Items .Box:nth-child(3) {
    background-image: url(DessertRange/R5.webp);
    z-index: 1;
    background-size: auto 100%;
    background-position: center center
}

.RangeSecondBackground .Area .Items .Box:nth-child(4) {
    background-image: url(DessertRange/R5.webp);
    z-index: 1;
    background-size: auto 100%;
    background-position: center center
}

.RangeSecondBackground .Area .Items .Box:nth-child(3) {
    left: 85%;
    top: 85%;
    height: 10%;
    width: 90%;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate DRF3ANI
}

.RangeSecondBackground .Area .Items .Box:nth-child(4) {
    left: 120%;
    top: 30%;
    height: 15%;
    width: 90%;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate DRF4ANI
}

.RangeSecondBackground .Area .Items .Box:nth-child(5) {
    background-image: url(DessertRange/R6.webp);
    width: 90%
}

.RangeSecondBackground .Area .Items .Box:nth-child(6) {
    background-image: url(DessertRange/R6.webp);
    width: 90%
}

.RangeSecondBackground .Area .Items .Box:nth-child(5) {
    left: 130%;
    top: 48%;
    height: 10%;
    z-index: 1;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate DRF5ANI
}

.RangeSecondBackground .Area .Items .Box:nth-child(6) {
    left: 0;
    top: 10%;
    height: 15%;
    z-index: -1;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate DRF6ANI
}

@keyframes DRF1ANI {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-55%, -50%) rotate(3deg)
    }
}

@keyframes DRF2ANI {
    0% {
        transform: translate(-50%, -47%) rotate(-2deg)
    }

    100% {
        transform: translate(-50%, -50%) rotate(0)
    }
}

@keyframes DRF3ANI {
    0% {
        transform: translate(-50%, -50%) rotate(-20deg)
    }

    100% {
        transform: translate(-45%, -50%) rotate(-23deg)
    }
}

@keyframes DRF4ANI {
    0% {
        transform: translate(-50%, -47%) rotate(2deg)
    }

    100% {
        transform: translate(-50%, -50%) rotate(0)
    }
}

@keyframes DRF5ANI {
    0% {
        transform: translate(-50%, -50%) rotate(-20deg)
    }

    100% {
        transform: translate(-45%, -50%) rotate(-23deg)
    }
}

@keyframes DRF6ANI {
    0% {
        transform: translate(-50%, -20%) rotate(-20deg)
    }

    100% {
        transform: translate(-60%, -30%) rotate(-23deg)
    }
}

.RangeThirdBackground .Area .Items .Box:first-child {
    background-image: url(teadelightsRange/R3.webp);
    left: 0;
    top: 75%;
    height: 37%;
    width: 90%;
    z-index: 1;
    animation: .7s ease-in-out .2s alternate forwards addin1, 4s ease-in-out infinite alternate-reverse TRF1ANI
}

.RangeThirdBackground .Area .Items .Box:nth-child(2) {
    background-image: url(teadelightsRange/R1.webp);
    top: 45%;
    height: 85%;
    width: 230%;
    animation: .7s ease-in-out alternate forwards addin1, 4s ease-in-out infinite alternate-reverse TRF2ANI
}

.RangeThirdBackground .Area .Items .Box:nth-child(3) {
    background-image: url(teadelightsRange/R2.webp);
    left: 140%;
    top: 70%;
    height: 42%;
    width: 90%;
    z-index: 1;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate TRF3ANI
}

@media (max-width: 700px) {
    .RangeThirdBackground .Area .Items .Box:nth-child(2) {
        background-image: url(teadelightsRange/R1.webp);
        top: 45%;
        height: 70%;
        width: 180%;
        animation: .7s ease-in-out alternate forwards addin1, 4s ease-in-out infinite alternate-reverse TRF2ANI
    }
}

@keyframes TRF1ANI {
    0% {
        transform: translate(100%, 100%) rotate(0)
    }

    100% {
        transform: translate(115%, 0%) rotate(3deg)
    }
}

@keyframes TRF2ANI {
    0% {
        transform: translate(-50%, -47%) rotate(2deg)
    }

    100% {
        transform: translate(-50%, -50%) rotate(0)
    }
}

@keyframes TRF3ANI {
    0% {
        transform: translate(-50%, -50%) rotate(-20deg)
    }

    100% {
        transform: translate(-45%, -50%) rotate(-23deg)
    }
}

.RangeFourthBackground .Area .Items .Box:first-child {
    background-image: url(RiceRange/R1.webp);
    left: 5%;
    top: 80%;
    height: 33%;
    width: 90%;
    z-index: 1;
    animation: .7s ease-in-out .2s alternate forwards addin1, 4s ease-in-out infinite alternate-reverse RRF1ANI
}

.RangeFourthBackground .Area .Items .Box:nth-child(2) {
    background-image: url(RiceRange/R2.webp);
    top: 50%;
    height: 120%;
    width: 130%;
    animation: .7s ease-in-out alternate forwards addin1, 4s ease-in-out infinite alternate-reverse RRF2ANI
}

.RangeFourthBackground .Area .Items .Box:nth-child(3) {
    background-image: url(RiceRange/R3.webp);
    left: 120%;
    top: 60%;
    height: 50%;
    width: 90%;
    z-index: -1;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate RRF3ANI
}

@keyframes RRF1ANI {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-55%, -50%) rotate(3deg)
    }
}

@keyframes RRF2ANI {
    0% {
        transform: translate(-50%, -47%) rotate(2deg)
    }

    100% {
        transform: translate(-50%, -50%) rotate(0)
    }
}

@keyframes RRF3ANI {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-45%, -50%) rotate(-2deg)
    }
}

.RangeFifthBackground .Area .Items .Box:first-child {
    background-image: url(RecipeRange/R2.webp);
    left: 5%;
    top: 80%;
    height: 33%;
    width: 90%;
    z-index: 1;
    animation: 1s ease-in-out .2s alternate forwards addin11, 4s ease-in-out infinite alternate-reverse RRMF1ANI
}

.RangeFifthBackground .Area .Items .Box:nth-child(2) {
    background-image: url(RecipeRange/R1.webp);
    top: 50%;
    height: 84%;
    width: 130%;
    animation: 1s ease-in-out alternate forwards addin11, 4s ease-in-out infinite alternate-reverse RRMF2ANI
}

.RangeFifthBackground .Area .Items .Box:nth-child(3) {
    left: 110%;
    top: 68%;
    height: 25%;
    width: 30%;
    z-index: 1;
    animation: 1s ease-in-out .4s alternate forwards addin11, 4s ease-in-out infinite alternate RRMF3ANI
}

.RangeFifthBackground .Area .Items .Box:nth-child(4) {
    background-image: url(RecipeRange/R4.webp);
    left: 105%;
    top: 35%;
    height: 35%;
    width: 70%;
    z-index: -1;
    animation: 1s ease-in-out .6s alternate forwards addin11, 4s ease-in-out infinite alternate RRMF4ANI
}

.RangeFifthBackground .Area .Items .Box:nth-child(5) {
    background-image: url(RecipeRange/R5.webp);
    left: 50%;
    top: 50%;
    height: 35%;
    width: 70%;
    z-index: -1;
    animation: 1s ease-in-out .8s alternate forwards addin11, 4s ease-in-out infinite alternate RRMF5ANI
}

@keyframes RRMF1ANI {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-55%, -50%) rotate(3deg)
    }
}

@keyframes RRMF2ANI {
    0% {
        transform: translate(-50%, -50%) rotate(-2deg)
    }

    100% {
        transform: translate(-50%, -53%) rotate(0)
    }
}

@keyframes RRMF3ANI {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-45%, -50%) rotate(3deg)
    }
}

@keyframes PRF4ANI {
    0% {
        transform: translate(-50%, -47%) rotate(0)
    }

    100% {
        transform: translate(-50%, -50%) rotate(0)
    }
}

@keyframes PRF5ANI {
    0% {
        transform: translate(-50%, -50%) rotate(-20deg)
    }

    100% {
        transform: translate(-45%, -50%) rotate(-23deg)
    }
}

@keyframes PRF6ANI {
    0% {
        transform: translate(-50%, -20%) rotate(-20deg)
    }

    100% {
        transform: translate(-60%, -30%) rotate(-23deg)
    }
}

.RangeSecondBackground .Area .Items .Box:first-child {
    background-image: url(DessertRange/R1.webp);
    left: 10%;
    top: 85%;
    height: 23%;
    width: 90%;
    z-index: 1;
    animation: .7s ease-in-out .2s alternate forwards addin1, 4s ease-in-out infinite alternate-reverse DRF1ANI
}

.RangeSecondBackground .Area .Items .Box:nth-child(2) {
    background-image: url(DessertRange/R4.webp);
    top: 35%;
    height: 135%;
    width: 230%;
    animation: .7s ease-in-out alternate forwards addin1, 4s ease-in-out infinite alternate-reverse DRF2ANI
}

.RangeSecondBackground .Area .Items .Box:nth-child(3),
.RangeSecondBackground .Area .Items .Box:nth-child(4) {
    background-image: url(DessertRange/R5.webp);
    z-index: 1;
    background-size: auto 100%;
    background-position: center center
}

.RangeSecondBackground .Area .Items .Box:nth-child(3) {
    left: 85%;
    top: 85%;
    height: 10%;
    width: 90%;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate DRF3ANI
}

.RangeSecondBackground .Area .Items .Box:nth-child(4) {
    left: 120%;
    top: 30%;
    height: 15%;
    width: 90%;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate DRF4ANI
}

.RangeSecondBackground .Area .Items .Box:nth-child(5),
.RangeSecondBackground .Area .Items .Box:nth-child(6) {
    background-image: url(DessertRange/R6.webp);
    width: 90%
}

.RangeSecondBackground .Area .Items .Box:nth-child(5) {
    left: 130%;
    top: 48%;
    height: 10%;
    z-index: 1;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate DRF5ANI
}

.RangeSecondBackground .Area .Items .Box:nth-child(6) {
    left: 0;
    top: 10%;
    height: 15%;
    z-index: -1;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate DRF6ANI
}

@keyframes DRF1ANI {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-55%, -50%) rotate(3deg)
    }
}

@keyframes DRF2ANI {
    0% {
        transform: translate(-50%, -47%) rotate(-2deg)
    }

    100% {
        transform: translate(-50%, -50%) rotate(0)
    }
}

@keyframes DRF3ANI {
    0% {
        transform: translate(-50%, -50%) rotate(-20deg)
    }

    100% {
        transform: translate(-45%, -50%) rotate(-23deg)
    }
}

@keyframes DRF4ANI {
    0% {
        transform: translate(-50%, -47%) rotate(2deg)
    }

    100% {
        transform: translate(-50%, -50%) rotate(0)
    }
}

@keyframes DRF5ANI {
    0% {
        transform: translate(-50%, -50%) rotate(-20deg)
    }

    100% {
        transform: translate(-45%, -50%) rotate(-23deg)
    }
}

@keyframes DRF6ANI {
    0% {
        transform: translate(-50%, -20%) rotate(-20deg)
    }

    100% {
        transform: translate(-60%, -30%) rotate(-23deg)
    }
}

.RangeThirdBackground .Area .Items .Box:first-child {
    background-image: url(teadelightsRange/R3.webp);
    left: 0;
    top: 75%;
    height: 37%;
    width: 90%;
    z-index: 1;
    animation: .7s ease-in-out .2s alternate forwards addin1, 4s ease-in-out infinite alternate-reverse TRF1ANI
}

.RangeThirdBackground .Area .Items .Box:nth-child(2) {
    background-image: url(teadelightsRange/R1.webp);
    top: 45%;
    height: 85%;
    width: 230%;
    animation: .7s ease-in-out alternate forwards addin1, 4s ease-in-out infinite alternate-reverse TRF2ANI
}

.RangeThirdBackground .Area .Items .Box:nth-child(3) {
    background-image: url(teadelightsRange/R2.webp);
    left: 140%;
    top: 70%;
    height: 42%;
    width: 90%;
    z-index: 1;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate TRF3ANI
}

@media (max-width: 700px) {
    .RangeThirdBackground .Area .Items .Box:nth-child(2) {
        background-image: url(teadelightsRange/R1.webp);
        top: 45%;
        height: 70%;
        width: 180%;
        animation: .7s ease-in-out alternate forwards addin1, 4s ease-in-out infinite alternate-reverse TRF2ANI
    }
}

@keyframes TRF1ANI {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-55%, -50%) rotate(3deg)
    }
}

@keyframes TRF2ANI {
    0% {
        transform: translate(-50%, -47%) rotate(2deg)
    }

    100% {
        transform: translate(-50%, -50%) rotate(0)
    }
}

@keyframes TRF3ANI {
    0% {
        transform: translate(-50%, -50%) rotate(-20deg)
    }

    100% {
        transform: translate(-45%, -50%) rotate(-23deg)
    }
}

.RangeFourthBackground .Area .Items .Box:first-child {
    background-image: url(RiceRange/R1.webp);
    left: 5%;
    top: 80%;
    height: 33%;
    width: 90%;
    z-index: 1;
    animation: .7s ease-in-out .2s alternate forwards addin1, 4s ease-in-out infinite alternate-reverse RRF1ANI
}

.RangeFourthBackground .Area .Items .Box:nth-child(2) {
    background-image: url(RiceRange/R2.webp);
    top: 50%;
    height: 120%;
    width: 130%;
    animation: .7s ease-in-out alternate forwards addin1, 4s ease-in-out infinite alternate-reverse RRF2ANI
}

.RangeFourthBackground .Area .Items .Box:nth-child(3) {
    background-image: url(RiceRange/R3.webp);
    left: 120%;
    top: 60%;
    height: 50%;
    width: 90%;
    z-index: -1;
    animation: .7s ease-in-out .4s alternate forwards addin1, 4s ease-in-out infinite alternate RRF3ANI
}

@keyframes RRF1ANI {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-55%, -50%) rotate(3deg)
    }
}

@keyframes RRF2ANI {
    0% {
        transform: translate(-50%, -47%) rotate(2deg)
    }

    100% {
        transform: translate(-50%, -50%) rotate(0)
    }
}

@keyframes RRF3ANI {
    0% {
        transform: translate(-60%, -30%) rotate(0)
    }

    100% {
        transform: translate(-65%, -20%) rotate(-2deg)
    }
}

.RangeFifthBackground .Area .Items .Box:first-child {
    background-image: url(RecipeRange/R2.webp);
    left: 5%;
    top: 80%;
    height: 33%;
    width: 90%;
    z-index: 1;
    animation: 1s ease-in-out .2s alternate forwards addin11, 4s ease-in-out infinite alternate-reverse RRMF1ANI
}

.RangeFifthBackground .Area .Items .Box:nth-child(2) {
    background-image: url(RecipeRange/R1.webp);
    top: 50%;
    height: 84%;
    width: 130%;
    animation: 1s ease-in-out alternate forwards addin11, 4s ease-in-out infinite alternate-reverse RRMF2ANI
}

.RangeFifthBackground .Area .Items .Box:nth-child(3) {
    left: 110%;
    top: 68%;
    height: 25%;
    width: 30%;
    z-index: 1;
    animation: 1s ease-in-out .4s alternate forwards addin11, 4s ease-in-out infinite alternate RRMF3ANI
}

.RangeFifthBackground .Area .Items .Box:nth-child(4) {
    background-image: url(RecipeRange/R4.webp);
    left: 105%;
    top: 35%;
    height: 35%;
    width: 70%;
    z-index: -1;
    animation: 1s ease-in-out .6s alternate forwards addin11, 4s ease-in-out infinite alternate RRMF4ANI
}

.RangeFifthBackground .Area .Items .Box:nth-child(5) {
    background-image: url(RecipeRange/R5.webp);
    left: 50%;
    top: 50%;
    height: 35%;
    width: 70%;
    z-index: -1;
    animation: 1s ease-in-out .8s alternate forwards addin11, 4s ease-in-out infinite alternate RRMF5ANI
}

@keyframes RRMF1ANI {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-55%, -50%) rotate(3deg)
    }
}

@keyframes RRMF2ANI {
    0% {
        transform: translate(-50%, -50%) rotate(-2deg)
    }

    100% {
        transform: translate(-50%, -53%) rotate(0)
    }
}

@keyframes RRMF3ANI {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-45%, -50%) rotate(3deg)
    }
}

@keyframes RRMF4ANI {
    0% {
        transform: translate(-50%, -53%) rotate(0)
    }

    100% {
        transform: translate(-45%, -50%) rotate(30deg)
    }
}

@keyframes RRMF5ANI {
    0% {
        transform: translate(-80%, -50%) rotate(-20deg) scale(1.5)
    }

    100% {
        transform: translate(-100%, -50%) rotate(-30deg) scale(2)
    }
}

.RangeSixthBackground .Area .Items .Box:first-child {
    background-image: url(SaltRange/R1.webp);
    left: 65%;
    top: 80%;
    height: 40%;
    width: 140%;
    z-index: 1;
    animation: .7s ease-in-out .2s alternate forwards addin1, 4s ease-in-out infinite alternate-reverse SRF1ANI
}

.RangeSixthBackground .Area .Items .Box:nth-child(2) {
    background-image: url(SaltRange/R4.webp);
    top: 40%;
    height: 130%;
    width: 130%;
    animation: .7s ease-in-out alternate forwards addin1, 4s ease-in-out infinite alternate-reverse SRF2ANI
}

.RangeSixthBackground .Area .Items .Box:nth-child(3) {
    background-image: url(SaltRange/R3.webp);
    left: 90%;
    top: 30%;
    height: 60%;
    width: 90%;
    z-index: 1;
    animation: .7s ease-in-out .4s alternate forwards addin6, 4s ease-in-out infinite alternate SRF3ANI
}

.RangeSixthBackground .Area .Items .Box:nth-child(4) {
    background-image: url(SaltRange/R2.webp);
    left: 10%;
    top: 65%;
    height: 15%;
    width: 90%;
    z-index: 1;
    animation: .7s ease-in-out .5s alternate forwards addin6, 4s ease-in-out infinite alternate SRF4ANI
}

@keyframes SRF1ANI {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-55%, -50%) rotate(3deg)
    }
}

@keyframes SRF2ANI {
    0% {
        transform: translate(-50%, -47%) rotate(2deg)
    }

    100% {
        transform: translate(-50%, -50%) rotate(0)
    }
}

@keyframes SRF3ANI {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-45%, -50%) rotate(-2deg)
    }
}

@keyframes SRF4ANI {
    0% {
        transform: translate(-45%, -50%) rotate(0)
    }

    100% {
        transform: translate(-50%, -50%) rotate(2deg)
    }
}

.Landing .Area .Itemss {
    left: 50%;
    transform: translate(-50%, -65%);
    z-index: 900
}

.Landing .Area .Itemss .Box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%) scale(2);
    width: 50%;
    height: 32%;
    opacity: 0;
    background-color: #fff;
    border-radius: 10px;
    background-size: cover;
    background-position: center center;
    transition: .5s;
    cursor: pointer
}

.RangeFirstBackground .Area .Itemss .Box:first-child {
    background-image: url(PlainSpiceslanding/R4.webp);
    animation: 1s ease-in-out .8s alternate forwards Ani1_1
}

@keyframes Ani1_1 {
    to {
        transform: translate(-520%, -50%) scale(.8);
        opacity: 1
    }
}

.RangeFirstBackground .Area .Itemss .Box:nth-child(2) {
    background-image: url(PlainSpiceslanding/R1.webp);
    animation: 1s ease-in-out .6s alternate forwards Ani1_2
}

@keyframes Ani1_2 {
    to {
        transform: translate(-425%, -50%) scale(.85);
        opacity: 1
    }
}

.RangeFirstBackground .Area .Itemss .Box:nth-child(3) {
    background-image: url(PlainSpiceslanding/R3.webp);
    animation: 1s ease-in-out .4s alternate forwards Ani1_3
}

@keyframes Ani1_3 {
    to {
        transform: translate(-325%, -50%) scale(.9);
        opacity: 1
    }
}

.RangeFirstBackground .Area .Itemss .Box:nth-child(4) {
    background-image: url(PlainSpiceslanding/R2.webp);
    animation: 1s ease-in-out .2s alternate forwards Ani1_4
}

@keyframes Ani1_4 {
    to {
        transform: translate(-220%, -50%) scale(.95);
        opacity: 1
    }
}

.RangeFifthBackground .Area .Itemss .Box:nth-child(5),
.RangeFirstBackground .Area .Itemss .Box:nth-child(5),
.RangeFourthBackground .Area .Itemss .Box:nth-child(5),
.RangeSecondBackground .Area .Itemss .Box:nth-child(5),
.RangeSixthBackground .Area .Itemss .Box:nth-child(5),
.RangeThirdBackground .Area .Itemss .Box:nth-child(5) {
    transform: translate(-50%, -50%);
    opacity: 0
}

.RangeFirstBackground .Area .Itemss .Box:nth-child(6) {
    background-image: url(PlainSpiceslanding/R5.webp);
    z-index: 4;
    animation: 1s ease-in-out .2s alternate forwards Ani1_5
}

@keyframes Ani1_5 {
    to {
        transform: translate(120%, -50%) scale(.95);
        opacity: 1
    }
}

.RangeFirstBackground .Area .Itemss .Box:nth-child(7) {
    background-image: url(PlainSpiceslanding/R6.webp);
    z-index: 3;
    animation: 1s ease-in-out .4s alternate forwards Ani1_6
}

@keyframes Ani1_6 {
    to {
        transform: translate(225%, -50%) scale(.9);
        opacity: 1
    }
}

.RangeFirstBackground .Area .Itemss .Box:nth-child(8) {
    background-image: url(PlainSpiceslanding/R7.webp);
    z-index: 2;
    animation: 1s ease-in-out .6s alternate forwards Ani1_7
}

@keyframes Ani1_7 {
    to {
        transform: translate(325%, -50%) scale(.85);
        opacity: 1
    }
}

.RangeFirstBackground .Area .Itemss .Box:nth-child(9) {
    background-image: url(PlainSpiceslanding/R8.webp);
    z-index: 1;
    animation: 1s ease-in-out .8s alternate forwards Ani1_8
}

@keyframes Ani1_8 {
    to {
        transform: translate(420%, -50%) scale(.8);
        opacity: 1
    }
}

.RangeSecondBackground .Area .Itemss .Box:first-child {
    background-image: url(DessertLanding/R2.webp);
    animation: 1s ease-in-out .8s alternate forwards Ani2_1
}

@keyframes Ani2_1 {
    to {
        transform: translate(-540%, -50%) scale(.8);
        opacity: 1
    }
}

.RangeSecondBackground .Area .Itemss .Box:nth-child(2) {
    background-image: url(DessertLanding/R8.webp);
    animation: 1s ease-in-out .6s alternate forwards Ani2_2
}

@keyframes Ani2_2 {
    to {
        transform: translate(-445%, -50%) scale(.85);
        opacity: 1
    }
}

.RangeSecondBackground .Area .Itemss .Box:nth-child(3) {
    background-image: url(DessertLanding/R4.webp);
    animation: 1s ease-in-out .4s alternate forwards Ani2_3
}

@keyframes Ani2_3 {
    to {
        transform: translate(-345%, -50%) scale(.9);
        opacity: 1
    }
}

.RangeSecondBackground .Area .Itemss .Box:nth-child(4) {
    background-image: url(DessertLanding/R1.webp);
    animation: 1s ease-in-out .2s alternate forwards Ani2_4
}

@keyframes Ani2_4 {
    to {
        transform: translate(-240%, -50%) scale(.95);
        opacity: 1
    }
}

.RangeSecondBackground .Area .Itemss .Box:nth-child(6) {
    background-image: url(DessertLanding/R7.webp);
    z-index: 4;
    animation: 1s ease-in-out .2s alternate forwards Ani2_5
}

@keyframes Ani2_5 {
    to {
        transform: translate(135%, -50%) scale(.95);
        opacity: 1
    }
}

.RangeSecondBackground .Area .Itemss .Box:nth-child(7) {
    background-image: url(DessertLanding/R5.webp);
    z-index: 3;
    animation: 1s ease-in-out .4s alternate forwards Ani2_6
}

@keyframes Ani2_6 {
    to {
        transform: translate(240%, -50%) scale(.9);
        opacity: 1
    }
}

.RangeSecondBackground .Area .Itemss .Box:nth-child(8) {
    background-image: url(DessertLanding/R3.webp);
    z-index: 2;
    animation: 1s ease-in-out .6s alternate forwards Ani2_7
}

@keyframes Ani2_7 {
    to {
        transform: translate(340%, -50%) scale(.85);
        opacity: 1
    }
}

.RangeSecondBackground .Area .Itemss .Box:nth-child(9) {
    background-image: url(DessertLanding/R6.webp);
    z-index: 1;
    animation: 1s ease-in-out .8s alternate forwards Ani2_8
}

@keyframes Ani2_8 {
    to {
        transform: translate(435%, -50%) scale(.8);
        opacity: 1
    }
}

.RangeThirdBackground .Area .Itemss .Box:nth-child(2) {
    background-image: url(TeaDelightsLanding/R5.webp);
    animation: 1s ease-in-out .6s alternate forwards Ani3_2
}

@keyframes Ani3_2 {
    to {
        transform: translate(-535%, -50%) scale(.85);
        opacity: 1
    }
}

.RangeThirdBackground .Area .Itemss .Box:nth-child(3) {
    background-image: url(TeaDelightsLanding/R3.webp);
    animation: 1s ease-in-out .4s alternate forwards Ani3_3
}

@keyframes Ani3_3 {
    to {
        transform: translate(-435%, -50%) scale(.9);
        opacity: 1
    }
}

.RangeThirdBackground .Area .Itemss .Box:nth-child(4) {
    background-image: url(TeaDelightsLanding/R2.webp);
    animation: 1s ease-in-out .2s alternate forwards Ani3_4
}

@keyframes Ani3_4 {
    to {
        transform: translate(-330%, -50%) scale(.95);
        opacity: 1
    }
}

.RangeThirdBackground .Area .Itemss .Box:nth-child(6) {
    background-image: url(TeaDelightsLanding/R6.webp);
    z-index: 4;
    animation: 1s ease-in-out .2s alternate forwards Ani3_5
}

@keyframes Ani3_5 {
    to {
        transform: translate(230%, -50%) scale(.95);
        opacity: 1
    }
}

.RangeThirdBackground .Area .Itemss .Box:nth-child(7) {
    background-image: url(TeaDelightsLanding/R1.webp);
    z-index: 3;
    animation: 1s ease-in-out .4s alternate forwards Ani3_6
}

@keyframes Ani3_6 {
    to {
        transform: translate(335%, -50%) scale(.9);
        opacity: 1
    }
}

.RangeThirdBackground .Area .Itemss .Box:nth-child(8) {
    background-image: url(TeaDelightsLanding/R4.webp);
    z-index: 2;
    animation: 1s ease-in-out .6s alternate forwards Ani3_7
}

@keyframes Ani3_7 {
    to {
        transform: translate(435%, -50%) scale(.85);
        opacity: 1
    }
}

.RangeFourthBackground .Area .Itemss .Box:first-child {
    background-image: url(RiceLanding/R4.webp);
    animation: 1s ease-in-out .8s alternate forwards Ani4_1
}

@keyframes Ani4_1 {
    to {
        transform: translate(-520%, -50%) scale(.8);
        opacity: 1
    }
}

.RangeFourthBackground .Area .Itemss .Box:nth-child(2) {
    background-image: url(RiceLanding/R3.webp);
    animation: 1s ease-in-out .6s alternate forwards Ani4_2
}

@keyframes Ani4_2 {
    to {
        transform: translate(-425%, -50%) scale(.85);
        opacity: 1
    }
}

.RangeFourthBackground .Area .Itemss .Box:nth-child(3) {
    background-image: url(RiceLanding/R2.webp);
    animation: 1s ease-in-out .4s alternate forwards Ani4_3
}

@keyframes Ani4_3 {
    to {
        transform: translate(-325%, -50%) scale(.9);
        opacity: 1
    }
}

.RangeFourthBackground .Area .Itemss .Box:nth-child(4) {
    background-image: url(RiceLanding/R1.webp);
    animation: 1s ease-in-out .2s alternate forwards Ani4_4
}

@keyframes Ani4_4 {
    to {
        transform: translate(-220%, -50%) scale(.95);
        opacity: 1
    }
}

.RangeFourthBackground .Area .Itemss .Box:nth-child(6) {
    background-image: url(RiceLanding/R5.webp);
    z-index: 4;
    animation: 1s ease-in-out .2s alternate forwards Ani4_5
}

@keyframes Ani4_5 {
    to {
        transform: translate(120%, -50%) scale(.95);
        opacity: 1
    }
}

.RangeFourthBackground .Area .Itemss .Box:nth-child(7) {
    background-image: url(RiceLanding/R6.webp);
    z-index: 3;
    animation: 1s ease-in-out .4s alternate forwards Ani4_6
}

@keyframes Ani4_6 {
    to {
        transform: translate(225%, -50%) scale(.9);
        opacity: 1
    }
}

.RangeFourthBackground .Area .Itemss .Box:nth-child(8) {
    background-image: url(RiceLanding/R7.webp);
    z-index: 2;
    animation: 1s ease-in-out .6s alternate forwards Ani4_7
}

@keyframes Ani4_7 {
    to {
        transform: translate(325%, -50%) scale(.85);
        opacity: 1
    }
}

.RangeFourthBackground .Area .Itemss .Box:nth-child(9) {
    background-image: url(RiceLanding/R8.webp);
    z-index: 1;
    animation: 1s ease-in-out .8s alternate forwards Ani4_8
}

@keyframes Ani4_8 {
    to {
        transform: translate(420%, -50%) scale(.8);
        opacity: 1
    }
}

.RangeFifthBackground .Area .Itemss .Box:first-child {
    background-image: url(RecipeMixLanding/R5.webp);
    animation: 1s ease-in-out .8s alternate forwards Ani5_1
}

@keyframes Ani5_1 {
    to {
        transform: translate(-520%, -50%) scale(.8);
        opacity: 1
    }
}

.RangeFifthBackground .Area .Itemss .Box:nth-child(2) {
    background-image: url(RecipeMixLanding/R6.webp);
    animation: 1s ease-in-out .6s alternate forwards Ani5_2
}

@keyframes Ani5_2 {
    to {
        transform: translate(-425%, -50%) scale(.85);
        opacity: 1
    }
}

.RangeFifthBackground .Area .Itemss .Box:nth-child(3) {
    background-image: url(RecipeMixLanding/R7.webp);
    animation: 1s ease-in-out .4s alternate forwards Ani5_3
}

@keyframes Ani5_3 {
    to {
        transform: translate(-325%, -50%) scale(.9);
        opacity: 1
    }
}

.RangeFifthBackground .Area .Itemss .Box:nth-child(4) {
    background-image: url(RecipeMixLanding/R8.webp);
    animation: 1s ease-in-out .2s alternate forwards Ani5_4
}

@keyframes Ani5_4 {
    to {
        transform: translate(-220%, -50%) scale(.95);
        opacity: 1
    }
}

.RangeFifthBackground .Area .Itemss .Box:nth-child(6) {
    background-image: url(RecipeMixLanding/R4.webp);
    z-index: 4;
    animation: 1s ease-in-out .2s alternate forwards Ani5_5
}

@keyframes Ani5_5 {
    to {
        transform: translate(120%, -50%) scale(.95);
        opacity: 1
    }
}

.RangeFifthBackground .Area .Itemss .Box:nth-child(7) {
    background-image: url(RecipeMixLanding/R3.webp);
    z-index: 3;
    animation: 1s ease-in-out .4s alternate forwards Ani5_6
}

@keyframes Ani5_6 {
    to {
        transform: translate(225%, -50%) scale(.9);
        opacity: 1
    }
}

.RangeFifthBackground .Area .Itemss .Box:nth-child(8) {
    background-image: url(RecipeMixLanding/R2.webp);
    z-index: 2;
    animation: 1s ease-in-out .6s alternate forwards Ani5_7
}

@keyframes Ani5_7 {
    to {
        transform: translate(325%, -50%) scale(.85);
        opacity: 1
    }
}

.RangeFifthBackground .Area .Itemss .Box:nth-child(9) {
    background-image: url(RecipeMixLanding/R1.webp);
    z-index: 1;
    animation: 1s ease-in-out .8s alternate forwards Ani5_8
}

@keyframes Ani5_8 {
    to {
        transform: translate(420%, -50%) scale(.8);
        opacity: 1
    }
}

.RangeSixthBackground .Area .Itemss .Box:nth-child(2) {
    background-image: url(SaltLanding/R1.webp);
    animation: 1s ease-in-out .6s alternate forwards Ani6_2
}

@keyframes Ani6_2 {
    to {
        transform: translate(-425%, -50%) scale(.85);
        opacity: 1
    }
}

.RangeSixthBackground .Area .Itemss .Box:nth-child(3) {
    background-image: url(SaltLanding/R7.webp);
    animation: 1s ease-in-out .4s alternate forwards Ani6_3
}

@keyframes Ani6_3 {
    to {
        transform: translate(-325%, -50%) scale(.9);
        opacity: 1
    }
}

.RangeSixthBackground .Area .Itemss .Box:nth-child(4) {
    background-image: url(SaltLanding/R4.webp);
    animation: 1s ease-in-out .2s alternate forwards Ani6_4
}

@keyframes Ani6_4 {
    to {
        transform: translate(-220%, -50%) scale(.95);
        opacity: 1
    }
}

.RangeSixthBackground .Area .Itemss .Box:nth-child(6) {
    background-image: url(SaltLanding/R6.webp);
    z-index: 4;
    animation: 1s ease-in-out .2s alternate forwards Ani6_5
}

@keyframes Ani6_5 {
    to {
        transform: translate(120%, -50%) scale(.95);
        opacity: 1
    }
}

.RangeSixthBackground .Area .Itemss .Box:nth-child(7) {
    background-image: url(SaltLanding/R3.webp);
    z-index: 3;
    animation: 1s ease-in-out .4s alternate forwards Ani6_6
}

@keyframes Ani6_6 {
    to {
        transform: translate(225%, -50%) scale(.9);
        opacity: 1
    }
}

.RangeSixthBackground .Area .Itemss .Box:nth-child(8) {
    background-image: url(SaltLanding/R2.webp);
    z-index: 2;
    animation: 1s ease-in-out .6s alternate forwards Ani6_7
}

@keyframes Ani6_7 {
    to {
        transform: translate(325%, -50%) scale(.85);
        opacity: 1
    }
}

@keyframes addin11 {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes addin1 {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes addin6 {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.About {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    /* background-color: #fff; */
}

.About .ContainerFirst,
.Landing,
.Motions,
.Slider {
    align-items: center;
    display: flex
}

.Motions {
    width: 100%;
    height: 100%;
    justify-content: space-evenly
}

.About .ContainerFirst {
    width: 60%;
    height: 100vh;
    justify-content: flex-start;
    margin-left: 5vw;
    /* background-color: #6d6d6d; */
}

.About .ContainerFirst .BoxFirst {
    width: 40%;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 2vh;
    z-index: 1
}

.About .ContainerFirst .BoxFirst .Picture {
    width: 100%;
    height: 60vh;
    background-image: url(jj.webp);
    background-size: cover;
    background-position: 37% center;
    border-radius: 20px
}

.About .ContainerFirst .BoxSecond {
    width: 40%;
    height: 60vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
    z-index: 1
}

.About .ContainerFirst .BoxSecond .TextFirst {
    font-weight: bolder;
    font-size: 10vh;
    color: var(--ThemeColor-);
    text-transform: uppercase
}

.About .ContainerFirst .BoxSecond .TextSecond {
    width: 50vh;
    color: #fff;
    font-size: 4vh;
    font-weight: bolder;
    margin-bottom: 1vh;
    text-transform: uppercase
}

.About .ContainerFirst .BoxSecond .TextSecond::before {
    content: "";
    width: 1vh;
    height: 2.7vh;
    border-radius: 20px;
    background-color: var(--ThemeColor-);
    display: inline-block
}

.About .ContainerFirst .BoxSecond .TextThird {
    font-weight: 400;
    font-size: 2vh;
    color: #e3e3e3;
    text-align: justify;
    margin-top: 2vh
}

.About .ContainerFirst .BoxSecond .TextFourth {
    font-weight: 700;
    font-size: 2vh;
    color: var(--ThemeColor-);
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 2vh;
    margin-bottom: 3vh;
}

.About .ContainerSecond {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 5vw;
    /* background-color: #6d6d6d; */
}

.About .ContainerSecond .ColumnFirst,
.About .ContainerSecond .ColumnFourth,
.About .ContainerSecond .ColumnSecond,
.About .ContainerSecond .ColumnThird {
    width: 15vh;
    height: 60vh;
    overflow: hidden
}

.About .ContainerSecond .ColumnFirst .Box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    animation: 45s linear infinite ColumnFirstAnime
}

@keyframes ColumnFirstAnime {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-60%)
    }
}

.About .ContainerSecond .ColumnFirst .Box .Items,
.About .ContainerSecond .ColumnFourth .Box .Items,
.About .ContainerSecond .ColumnSecond .Box .Items,
.About .ContainerSecond .ColumnThird .Box .Items {
    width: 90%;
    height: 15vh;
    background-size: 17vh;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 1vh 0;
    border-radius: 1vh;
}

.RangeFifthBackground .Area .Items .Box:first-child,
.RangeFifthBackground .Area .Items .Box:nth-child(2),
.RangeFifthBackground .Area .Items .Box:nth-child(3),
.RangeFifthBackground .Area .Items .Box:nth-child(4),
.RangeFifthBackground .Area .Items .Box:nth-child(5),
.RangeFirstBackground .Area .Items .Box:first-child,
.RangeFirstBackground .Area .Items .Box:nth-child(2),
.RangeFirstBackground .Area .Items .Box:nth-child(3),
.RangeFirstBackground .Area .Items .Box:nth-child(4),
.RangeFirstBackground .Area .Items .Box:nth-child(5),
.RangeFourthBackground .Area .Items .Box:first-child,
.RangeFourthBackground .Area .Items .Box:nth-child(2),
.RangeFourthBackground .Area .Items .Box:nth-child(3),
.RangeSecondBackground .Area .Items .Box:first-child,
.RangeSecondBackground .Area .Items .Box:nth-child(2),
.RangeSecondBackground .Area .Items .Box:nth-child(5),
.RangeSecondBackground .Area .Items .Box:nth-child(6),
.RangeSixthBackground .Area .Items .Box:first-child,
.RangeSixthBackground .Area .Items .Box:nth-child(2),
.RangeSixthBackground .Area .Items .Box:nth-child(3),
.RangeSixthBackground .Area .Items .Box:nth-child(4),
.RangeThirdBackground .Area .Items .Box:first-child,
.RangeThirdBackground .Area .Items .Box:nth-child(2),
.RangeThirdBackground .Area .Items .Box:nth-child(3) {
    background-size: auto 100%;
    background-position: center center
}

.About .ContainerSecond .ColumnFirst .Box .Items1 {
    background-image: url(Image/BlueberryJelly_3000x.webp)
}

.About .ContainerSecond .ColumnFirst .Box .Items2 {
    background-image: url(Image/Coca-Powder_3000x.webp)
}

.About .ContainerSecond .ColumnFirst .Box .Items3 {
    background-image: url(Image/Badam-Kheer_3000x\ \(1\).webp)
}

.About .ContainerSecond .ColumnFirst .Box .Items4 {
    background-image: url(Image//MangoCustard_png_3000x.webp)
}

.About .ContainerSecond .ColumnFirst .Box .Items5 {
    background-image: url(Image/Kifayat_3000x.webp)
}

.About .ContainerSecond .ColumnFirst .Box .Items6 {
    background-image: url(Image/Classic_1_3000x.webp)
}

.About .ContainerSecond .ColumnSecond .Box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    animation: 45s linear infinite reverse ColumnSecondAnime
}

@keyframes ColumnSecondAnime {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-60%)
    }
}

.About .ContainerSecond .ColumnSecond .Box .Items1 {
    background-image: url(Image/1.5Kg-Brown-Rice-Jar_3000x\ \(1\).webp)
}

.About .ContainerSecond .ColumnSecond .Box .Items2 {
    background-image: url(Image/5Kg-Elite-Basmati-Rice_3476d28f-008a-492c-b08a-ac015644ac55_3000x\ \(1\).webp)
}

.About .ContainerSecond .ColumnSecond .Box .Items3 {
    background-image: url(Image/Bombay-Biryani_3000x.webp)
}

.About .ContainerSecond .ColumnSecond .Box .Items4 {
    background-image: url(Image/RedChilli_1_3000x.webp)
}

.About .ContainerSecond .ColumnSecond .Box .Items5 {
    background-image: url(Image/5KG-Sela-Rice-Gold_3000x\ \(1\).webp)
}

.About .ContainerSecond .ColumnSecond .Box .Items6 {
    background-image: url(Image/Rozmarrah-5kg_3000x.webp)
}

.About .ContainerSecond .ColumnThird .Box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    animation: 45s linear infinite ColumnThirdAnime
}

@keyframes ColumnThirdAnime {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-50%)
    }
}

.About .ContainerSecond .ColumnThird .Box .Items1 {
    background-image: url(Image/Cornflour_3000x.webp)
}

.About .ContainerSecond .ColumnThird .Box .Items2 {
    background-image: url(Image/Friedonion_3000x\ \(1\).webp)
}

.About .ContainerSecond .ColumnThird .Box .Items3 {
    background-image: url(Image/Ispaghol_3000x.webp)
}

.About .ContainerSecond .ColumnThird .Box .Items4 {
    background-image: url(Image/MeatTend_3000x.webp)
}

.About .ContainerSecond .ColumnThird .Box .Items5 {
    background-image: url(Image/Pheni_3000x.webp)
}

.About .ContainerSecond .ColumnThird .Box .Items6 {
    background-image: url(Image/Jazaa_Dates_3000x.webp)
}

.About .ContainerSecond .ColumnFourth .Box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    animation: 45s linear infinite reverse ColumnFourthAnime
}

@keyframes ColumnFourthAnime {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-50%)
    }
}

.About .ContainerSecond .ColumnFourth .Box .Items1 {
    background-image: url(Image/5KG-Economy-Rice_3000x.webp)
}

.About .ContainerSecond .ColumnFourth .Box .Items2 {
    background-image: url(Image/Pink-Salt-800g-Coarse_3000x.webp)
}

.About .ContainerSecond .ColumnFourth .Box .Items3 {
    background-image: url(Image/Pink-Salt-200-G-GLass-Grinder_3000x.webp)
}

.About .ContainerSecond .ColumnFourth .Box .Items4 {
    background-image: url(Image/Mix-Nimco_3000x.webp)
}

.About .ContainerSecond .ColumnFourth .Box .Items5 {
    background-image: url(Image/Refined-Salt-800g_3000x.webp)
}

.About .ContainerSecond .ColumnFourth .Box .Items6 {
    background-image: url(Image/Pink-Salt-500g_3000x.webp)
}

.Talks {
    height: 100vh;
    width: 100%;
    transition: 1s;
    transform: rotate(20deg)
}

@media (max-width:1000px) {

    .About .ContainerFirst,
    .About .ContainerSecond {
        transform: scale(1);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .About {
        height: 120vh
    }

    .Motions {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 3vh
    }

    .About .ContainerSecond {
        height: 60vh;
        margin-right: 0vw
    }

    .About .ContainerFirst {
        height: 60vh;
        margin-left: 0vw
    }

    .MAP .box {
        width: 35vh;
    }

    .MAP .box .counter-box {
        font-size: 9vh;
    }

}

@media (max-width:700px) {


    .RangeFirstBackground .Title .FirstText {
        font-size: 900vh;
    }

    .jTitle {
        font-size: 5vh;
        margin-bottom: 2vh;
    }

    .MAP .title {
        font-size: 7.5vh;
    }

    .Doc {
        display: none;
    }

    .About .ContainerFirst {
        flex-direction: column;
    }

    .About .ContainerFirst .BoxSecond {
        width: 90%;
        height: 60vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1
    }

    .About {
        height: 160vh
    }

    .About .ContainerFirst .BoxFirst {
        width: 90%;
        /* background-color: #fff; */
    }

    .About .ContainerFirst .BoxSecond .TextSecond::before {
        display: none;
    }


    .About .ContainerFirst .BoxSecond .TextFirst {
        width: 100%;
        font-size: 7vh;
        text-align: center;
    }

    .About .ContainerFirst .BoxSecond .TextSecond {
        width: 100%;
        font-size: 3vh;
        text-align: center;
    }

    .About .ContainerFirst {
        margin-left: 0;
        height: 90vh;
    }

    .About .ContainerFirst .BoxFirst {
        padding-right: 0;
        padding-bottom: 3vh;
    }

    .MAP {
        margin-bottom: 0vh;
    }
}

@media (max-width:600px) {
    .Part article {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        /* background-color: #ffffff52; */
    }


    .boxof {
        width: 25vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        margin-left: 0vh;
    }

    .journey .container .xx {
        transform: scale(0.65);
        height: 15vh;
    }

    .journey .container .a .ccc,
    .journey .container .c .ccc,
    .journey .container .e .ccc,
    .journey .container .g .ccc,
    .journey .container .i .ccc,
    .journey .container .k .ccc,
    .journey .container .m .ccc,
    .journey .container .o .ccc,
    .journey .container .q .ccc,
    .journey .container .s .ccc,
    .journey .container .u .ccc,
    .journey .container .w .ccc,
    .journey .container .y .ccc {
        margin-left: -40vh;
    }

    .journey .container .b .ccc,
    .journey .container .d .ccc,
    .journey .container .f .ccc,
    .journey .container .h .ccc,
    .journey .container .j .ccc,
    .journey .container .l .ccc,
    .journey .container .n .ccc,
    .journey .container .p .ccc,
    .journey .container .r .ccc,
    .journey .container .t .ccc,
    .journey .container .v .ccc,
    .journey .container .x .ccc,
    .journey .container .z .ccc {
        margin-right: -40vh;
    }

    .journey .lineJourney .L {
        width: .4vh;
    }

    .journey .lineJourney .plane {
        width: 6vh;
        height: 6vh;
        background: url(plane.webp) center center/cover no-repeat
    }

    .journey .container .xx ._aaa,
    .journey .container .xx .aaa {
        display: none;
    }

    @media (max-width:450px) {
        .MAP {
            /* height: 150vh; */
        }
    }

}













footer {
    width: 100%;
}

footer .footLine {
    height: 2vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .footLine div {
    height: 0.38vh;
    width: 100%;
    margin: 0vh 3vh;
    background-color: var(--ThemeColor-);
}


footer .row_2 {
    height: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 3vh 7vh;
    color: white;
    /* background-color: #53ffaf41; */
}


footer .row_2 .footerLogo {
    height: 90%;
    width: 30vh;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


footer .row_2 .footerLogo .logo {
    height: 14vh;
    width: 17.5vh;

    /* background-color: #fff; */
    background-image: url(jazaa-png-logo-1\ 1.png);
    background-size: 17vh;
    background-position: center center;
    background-repeat: no-repeat;
}

footer .row_2 .footerLogo .subtitle {
    font-size: 1.5vh;
    color: var(--ThemeColor-);
    font-weight: bold;
    margin-top: 3vh;
}

footer .row_2 .footerLogo .media {
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .row_2 .footerLogo .mediam {
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .row_2 .footerLogo .media .io {
    display: block;
    width: 5vh;
    height: 5vh;

    background-size: 2.7vh;
}

footer .row_2 .footerLogo .mediam .io {
    display: block;
    width: 5vh;
    height: 5vh;

    background-size: 2.7vh;
}

footer .row_2 .footerLogo .media .io:hover {
    background-size: 3vh;
}

footer .row_2 .footerLogo .mediam .io:hover {
    background-size: 3vh;
}

.icon1 {
    background-image: url(Image/Icon/facebook.webp)
}

.icon2 {
    background-image: url(Image/Icon/twitter\ \(1\).webp)
}

.icon3 {
    background-image: url(Image/Icon/instagram.webp)
}

.icon4 {
    background-image: url(Image/Icon/youtube.webp);
    margin-top: 0.8vh;
}

.icon5 {
    background-image: url(Image/Icon/linkedin\ \(1\).webp)
}


footer .row_2 .links {
    height: 90%;
    width: 50vh;
    /* background-color: #666666; */


    display: flex;
    align-items: flex-start;
    justify-content: center;
}

footer .row_2 .links .box {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 14vh;
    padding: 0 0vh;
    padding-top: 1.3vh;
    /* background-color: #ffffff0e; */
}

footer .row_2 .links .box:nth-child(1){
    margin-right: 1.5vh;
    width: 16vh;
}

footer .row_2 .links .box a {
    background-image: url(imagemain/hoveraffect.webp);
    background-size: 201% 50px;
    background-position: 300% center;
    background-clip: text;
    color: transparent;
    margin: 0.4vh 0;
}

footer .row_2 .links .box a:hover {
    animation: .4s ease-in-out alternate forwards HoverMenuAni
}


footer .row_2 .links .box a {
    font-size: 1.6vh;
    font-weight: 800;
    transition: .5s ease-in-out;
    animation: .4s ease-in-out alternate forwards HoverMenuAniBack
}

footer .row_2 .links .box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.h1 {
    font-size: 2vh;
    margin-bottom: 4vh;
    font-weight: 800;
    color: var(--ThemeColor-);
    height: 2vh;
}


footer .row_2 .footerContact {
    width: 73vh;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


footer .row_2 .footerContact .contactlist {}

footer .row_2 .footerContact .contactlist .h1 {
    font-size: 2vh;
}

footer .row_2 .footerContact .contactlist .containContact {
    height: 21.2vh;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
}

footer .row_2 .footerContact .contactlist .containContact .footAddress {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* height: 5vh; */

}

footer .row_2 .footerContact .contactlist .containContact .footAddress .address {
    font-size: 1.7vh;
    line-height: 2.2vh;
}
footer .row_2 .footerContact .contactlist .containContact .footAddress .address span{
    font-size: 1.8vh;
}


footer .row_2 .footerContact .contactlist .containContact .footAddress .img {
    height: 3vh;
    width: 3vh;
    margin-right: 1vh;
    background-image: url(maps-and-flags.png);
    background-size: cover;
}

footer .row_2 .footerContact .contactlist .containContact .footnumber {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* height: 5vh; */
}

footer .row_2 .footerContact .contactlist .containContact .footnumber .phone {
    font-size: 2.1vh;
    line-height: 2.5vh;
}

footer .row_2 .footerContact .contactlist .containContact .footnumber .img {
    height: 3vh;
    width: 3vh;
    margin-right: 0.5vh;
    background-image: url(phone-call.png);
    background-size: cover;
}

footer .row_2 .footerContact .contactlist .containContact .footnumberWhatsapp {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* height: 5vh; */
}

footer .row_2 .footerContact .contactlist .containContact .footnumberWhatsapp .phone {
    font-size: 2.1vh;
}

footer .row_2 .footerContact .contactlist .containContact .footnumberWhatsapp .img {
    height: 3vh;
    width: 3vh;
    margin-right: 1vh;
    background-image: url(whatsapp.png);
    background-size: cover;
}

footer .row_2 .footerContact .contactlist .containContact .footemail {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* height: 5vh; */
}

footer .row_2 .footerContact .contactlist .containContact .footemail .email {
    font-size: 1.7vh;
}

footer .row_2 .footerContact .contactlist .containContact .footemail .img {
    height: 3vh;
    width: 3vh;
    margin-right: 1vh;
    background-image: url(email.png);
    background-size: cover;
}




footer .row_2 .footerContact .map {
    width: 35vh;
    height: 28vh;
}


footer .row_2 .footerContact .map iframe {
    width: 100%;
    height: 100%;
    border-radius: 3vh;
}











footer .row_3 {
    width: 100%;
    height: 6vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    font-size: 1.7vh;
    color: white;
}

footer .row_3 .copyright {
    margin-left: 3vh;
    text-align: left;
}

footer .row_3 .powered {
    margin-right: 3vh;
    text-align: right;
    font-size: 1.7vh;
    font-weight: 400;
    border: 0.2vh solid rgb(68, 68, 68);
    color: rgb(68, 68, 68);
    border-radius: 1vh;
    padding: 0.4vh 0.7vh;
    text-transform: capitalize;
    cursor: pointer;
    text-decoration: none;
}

footer .row_3 .copyright a {
    color: var(--ThemeColor-);

}

@media (max-width: 1150px) {

    .row_2 .footerLogo,
    .row_2 .links,
    .row_2 .footerContact {
        transform: scale(0.8);
    }
}

@media (max-width: 930px) {

    .row_2 .footerLogo,
    .row_2 .links,
    .row_2 .footerContact {
        transform: scale(1);
    }

    .row_2 {
        flex-direction: column;
        row-gap: 3vh;
    }
}

@media (max-width: 730px) {

    .row_2 {
        width: 100%;
        /* background-color: #fff; */
        margin: 0;
        padding: 0;
    }
    footer{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    footer .row_3 {
        width: 100%;
        height: auto;
        padding: 2vh 0vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-transform: uppercase;
        row-gap: 1vh;
        font-size: 1.7vh;
        color: white;
    }

    footer .row_3 .copyright {
        margin-left: 0;
        text-align: center;
        line-height: 2.5vh;
    }

    footer .row_3 .powered {
        margin-right: 0;
        text-align: center;
    }

    footer .row_3 .copyright a {
        color: var(--ThemeColor-);
    }

    footer .row_3 .powered a {}
}

@media (max-width: 470px) {

     footer .row_2{
        padding: 2vh 0vh;
     }
    
    footer .row_2 .footerContact {
        flex-direction: column;
        row-gap: 2vh;
        width: 100%;
    }

    footer .row_2 .links {
        width: 100%;
    }

}