/*Macan*/
@font-face{
    font-family: "Macan";
    src: url("../Asstes/Font/Macan.ttf");
}

/*Domain-Display*/
@font-face{
    font-family: "DomaineDisplay";
    src: url("../Asstes/Font/DomaineDisplayBold.ttf");
}

/*Helvetica Medium and Light*/
@font-face{
    font-family: "Helvetica-Medium";
    src: url("../Asstes/Font/Helvetica-Neue-Medium.ttf");
}
@font-face{
    font-family: "Helvetica-Light";
    src: url("../Asstes/Font/Helvetica-Neue-UltraLight.ttf");
}


:root{
    --Macan-font: 'Macan';
    --DomaineDisplay-font: 'DomaineDisplay';
    --Helvetica-Medium-font: 'Helvetica-Medium';
    --Helvetica-Light-font: 'Helvetica-Light';
    --main-color: #1dbf73;
    --black-color: black;
    --semi-black-color: #62646a;
    --gray-color: #5c5c5c;
    --white-color: white;
    --pink-color: #ff62ad;
    --yellow-color: #ffbe5b;
    --light-back-color: #f1fdf7;
    --dark-blue-color: #0d084d;
    --blue-color: #584aff;
    --light-blue-color: #4a73e8;
    --marun-color: #45091b;
}

ul{
    padding: 0 !important;
    margin: 0 !important;
}
li{
    list-style: none;
}
a{
    text-decoration: none !important;
}



/*Pop Over*/
.main1{
    position: fixed;
    background-color: #000000d2;
    width: 100%;
    display: flex;
    height: 100vh;
    align-items: center;
    align-content: center;
    justify-content: center;
    z-index: 10000;
}
.main1.cancle{
    display: none;
}
.main1 .data{
    width: 100%;
}
.main1 .data .row>div{
    display: flex;
    justify-content: center;
}
.main1 .data .box{
    background-color: var(--white-color);
    padding: 5vh 5vh 10vh 5vh;
    text-align: center;
    border-radius: 5px;
}
.main1 .data .box .text h3{
    color: var(--main-color);
}
.main1 .data .box .cancle-btn{
    text-align: right;
}
.main1 .data .box .cancle-btn .cancle img{
    width: 6vh;
    filter: invert(0.4) sepia(1) saturate(20) hue-rotate(319deg) brightness(1.2);
    margin-bottom: 15px;
    cursor: pointer;
}


/*side-menu*/
.side-menu{
    width: 90%;
    position: fixed;
    left: 0;
    z-index: 5000;
    padding: 5vh;
    height: 100vh;
    background-color: var(--white-color);
    transform: translateX(-100%);
    transition: .3s all ease-in-out;
}
.offcanvas-menu.side-menu{
    box-shadow: 0px 0 20px 10px #0000001a;
    transform: translateX(0%);
}
.side-menu .close-btn{
    text-align: right;
    font-size: 4vh;
    margin: 2vh;
}
.side-menu .side-menu-content{
    overflow: auto;
    height: 80vh;
}
.side-menu .side-menu-content ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.side-menu .side-menu-content li{
    margin: 2vh 0;
}
.side-menu .side-menu-content li a{
    font-size: 2.15vh;
    font-weight: 700;
    color: #474747;
    transition: .2s ease-in-out;
}
.side-menu .side-menu-content li a:hover{
    color: var(--main-color);
}
.side-menu .side-menu-content li a:hover{
    color: var(--main-color);
    cursor: pointer !important;
}

/*Scroll Bar*/
.side-menu .side-menu-content::-webkit-scrollbar {
    width: 5px;
    height: 1px !important;
    background-color: var(--light-back-color);
}
.side-menu .side-menu-content::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    border-radius: 15px;
}

/* header1 start*/
.header1{
    z-index: 1000;
    min-height: 9vh;
    display: grid;
    position: absolute;
    width: 100%;
    align-items: center;
    width: 100%;
    transition: .3s all ease-in-out;
}
.header1.color-header{
    background-color: var(--white-color);
    position: fixed;
}

/*header1 stage-1 start*/
.header1 .stage-1{
    height: 12vh;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}
.header1 .stage-1 .left-side {
    width: 15%;
    /* border: 1px solid; */
}
.header1 .stage-1 .left-side ul{
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: row;
    justify-content: space-between;
}
.header1 .stage-1 .left-side ul li{
    display: flex;
    align-items: center;
    align-content: center;
    width: 100%;
    justify-content: space-around;
}
.header1 .stage-1 .left-side ul li a{
    font-size: 5vh;
    font-weight: 700;
    color: var(--white-color);
}
.header1.color-header .stage-1 .left-side ul li a{
    color: var(--black-color);
}
.header1 .stage-1 .left-side ul li a.menu-bars-btn{
    font-size: 3vh !important;
    padding: 5px 2vh;
    display: none;
}
.header1 .stage-1 .left-side ul li a.menu-bars-sign{
    color: var(--white-color) !important;
    font-size: 2.15vh !important;
    border: 1px solid var(--white-color);
    padding: 0.7vh 2vh !important;
    transition: 0.2s ease-in-out;
    border-radius: 3px;
}
.header1 .stage-1 .left-side ul li a.menu-bars-sign:hover{
    background-color: var(--white-color) !important;
    color: var(--main-color) !important;
    border: 1px solid var(--white-color);
}
.header1.color-header .stage-1 .left-side ul li a.menu-bars-sign {
    color: var(--main-color) !important;
    border: 1px solid var(--main-color);
    transition: 0.2s ease-in-out;
}
.header1.color-header .stage-1 .left-side ul li a.menu-bars-sign:hover {
    background-color: var(--main-color) !important;
    color: var(--white-color) !important;
}
.header1 .stage-1 .left-side ul li a.logo{
    padding: 5px 2.5vh;
}
.header1 .stage-1 .left-side ul li a.logo span{
    color: var(--main-color);
}


.header1 .stage-1 .right-side{
    width: 85%;
}
.header1 .stage-1 .right-side ul{
    display: flex;
    justify-content: right;
    width: 100%;
    flex-wrap: wrap;
}
.header1 .stage-1 .right-side ul li{
    padding: 5px 15px;
}
.header1 .stage-1 .right-side ul li a{
    font-size: 2.65vh;
    font-weight: 500;
    transition: 0.2s ease-in-out;
    color: var(--white-color);
}
.header1.color-header .stage-1 .right-side ul li a{
    color: var(--semi-black-color);
}
.header1 .stage-1 .right-side ul li a:hover{
    color: var(--main-color);
}
.header1 .stage-1 .right-side ul li a.join{
    color: var(--white-color);
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 2.55vh;
    transition: 0.2s ease-in-out;
    border: 1px solid var(--white-color);
}
.header1.color-header .stage-1 .right-side ul li a.join{
    border: 1px solid var(--main-color);
    color: var(--main-color);
}
.header1.color-header .stage-1 .right-side ul li a.join:hover{
    background-color: var(--main-color);
    color: var(--white-color);
}
.header1 .stage-1 .right-side ul li a.join:hover{
    background-color: var(--main-color);
    border-color: var(--main-color);
}

/*header1 stage-2 start*/
.header1 .stage-2{
    border-block: 0.01em solid lightgray;
    display: none;
}
.header1 .stage-2.show{
    transition: 5s ease-in-out;
    display: initial;
}
.header1 .stage-2 ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    line-height: 6vh;
}
.header1 .stage-2 ul li{
    transition: 0.1s ease-in-out;
    border-bottom: 4px solid transparent;
}
.header1 .stage-2 ul li:hover{
    border-bottom: 4px solid var(--main-color);
}
.header1 .stage-2 ul li a{
    font-size: 2.45vh;
    color: var(--semi-black-color);
    font-weight: 500;
}
.header1 .stage-2 ul li a span.new{
    color: var(--pink-color);
    font-size: 1.75vh;
    padding: 1px 7px;
    font-weight: 700;
    border-radius: 50px;
    border: 1px solid var(--pink-color);
}

/* section1 start*/
.section1 {
    position: relative;
}
.section1 .background {
    position: relative;
}
.section1 .background .mobile-swiper,
.section1 .background .swiper {
    width: 100%;
    position: relative;
    height: 100vh;
}
.section1 .background .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section1 .background .swiper .swiper-wrapper .swiper-slide.mobile{
    display: none;
}
.section1 .background .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section1 .data{
    width: 100%;
    position: absolute;
    z-index: 100;
    display: flex;
    height: 100vh;
    align-items: center;
    padding: 5%;
}
.section1 .data .box .title1{
    font-size: 7vh;
    color: white;
    font-weight: 700;
}
.section1 .data .box .title1 span{
    font-style: italic;
    font-family: serif;
    font-weight: 500;
}


/* section2 start */
.section2{
    padding: 4vh;
    background-color: var(--light-back-color);
}
.section2 ul{
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    align-content: center;
}
.section2 ul li {
    font-family: var(--DomaineDisplay-font);
    font-size: 3vh;
    letter-spacing: 1px;
    font-weight: 500;
    color: var(--semi-black-color);
}
.section2 ul li img{
    width: 15vh;
    filter: saturate(0%) brightness(1);
    opacity: 0.6;
    transition: 0.25s ease-in-out;
}
.section2 ul li img:hover{
    filter: saturate(100%) brightness(1);
    opacity: 1;
}


/*section3 start*/
.section3{
    padding: 15vh 0;
}
.section3 .title{
    font-size: 5vh;
    margin-bottom: 8vh;
    padding: 5px 0;
    font-family: var(--Helvetica-Medium-font);
}
.section3 .swiper {
    width: 100%;
    /* height: 7; */
    /* background-color: #45091b; */
}

.section3 .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-button-next,
.swiper-button-prev{
    border-radius: 2px;
    color: var(--white-color);
    background-color: var(--main-color);
    border-radius: 50%;
    width: calc(var(--swiper-navigation-size)/ 44 * 43);
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 18px;
    font-weight: 700;
}
.section3 .swiper-slide img {
    display: block;
    width: 100%;
    object-fit: cover;
}
.section3 .box{
    position: relative;
}
.section3 .box .data{
    position: absolute;
    z-index: 100;
    color: rgb(0, 0, 0);
}
.section3 .box .data .text1{
    color: rgb(0, 0, 0);
}
/*section4 start*/



/*section5 start*/
.section5{
    padding: 15vh 0;
    background-color: var(--light-back-color);
}
.section5 .img {
    height: 100%;
    display: grid;
    align-items: center;
    justify-items: center;
}
.section5 .img img{
    width: 95%;
}
.section5 .box{
    padding: 0 5%;
}
.section5 .box .title{
    font-size: 5vh;
    padding: 5px 0;
    font-family: var(--Helvetica-Medium-font);
}
.section5 .box p{
    margin: 5px 0;
    color: var(--gray-color);
    font-size: 2.95vh;
}

/*section6 start*/
.section6{
    padding: 15vh 0;
}
.section6 .title{
    font-size: 5vh;
    padding: 5px 0;
    margin-bottom: 7vh;
    font-family: var(--Helvetica-Medium-font);
}
.section6 .box{
    margin: 15px auto;
    padding: 15px;
    /* border: 1px solid; */
}
.section6 .box .img img{
    width: 100px;
    text-align: center;
    margin: 0 auto;
    display: block;
}
.section6 .box .hr hr{
    width: 70px;
    transition: 0.2s ease-in-out;
    margin: 1rem auto;
    background-color: var(--gray-color);
    min-height: 2px;
    opacity: 0.7;
}
.section6 .box:hover .hr hr{
    opacity: 1;
    background-color: var(--main-color);
    width: 100px;
}
.section6 .box .text{
    font-size: 2.65vh;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    color: #414141;
}

/*section7 start*/
.section7{
    background-color: var(--dark-blue-color);
    padding: 12vh 1vh;
    color: var(--white-color);
}
.section7 .img img{
    width: 100%;
}
.section7 .content-box{
    padding: 0 10px;
    margin: 15px 0;
    width: 80%;
}
.section7 .content-box .content1{
    display: flex;
    align-items: center;
}
.section7 .content-box .content1>div{
    font-size: 4.5vh;
    margin: 0 5px;
    font-weight: 700;
}
.section7 .content-box .content1>div span{
    font-weight: 400;
}
.section7 .content-box .content1>div.new{
    background-color: var(--light-blue-color);
    font-size: 1.75vh;
    padding: 2px 10px;
    margin-top: 4px;
    border-radius: 50px;
    text-transform: uppercase;
}

.section7 .content-box .content2{
    margin: 3.5vh 0;
    font-size: 5vh;
    font-family: var(--Helvetica-Medium-font);
}
.section7 .content-box .content2 span{
    font-family: serif;
    font-weight: 600;
    font-size: 6vh;
    font-style: italic;
}

.section7 .content-box .content3{
    font-size: 3vh;
}

.section7 .content-box .content4{
    margin: 3.5vh 0;
    font-size: 2.8vh;
}
.section7 .content-box .content4 p{
    display: flex;
}
.section7 .content-box .content4 p i{
    padding: 6px 10px;
    color: #b8babe;
}

.section7 .content-box .content5{
    margin: 2.5vh 0;
    padding: 0 5px;
}
.section7 .content-box .content5 a{
    padding: 1.8vh 4.2vh;
    background-color: var(--main-color);
    color: var(--white-color);
    font-weight: 500;
    font-size: 2.67vh;
    border-radius: 3px;
}

/*section8 start*/


/*section9 start*/
.section9{
    padding: 10vh 0;
}
.section9 .data{
    margin: 0 1.5%;
    padding: 15px;
    min-height: 50vh;
    background-size: cover !important;
    background-position: bottom right;
    background: url(../Asstes/Images/logo-maker-banner-wide-desktop-1352-2x.png) no-repeat;
    background-color: var(--light-blue-color);
}
.section9 .data .img img{
    width: 100%;
}
.section9 .content-box{
    padding: 10px 8%;
    color: var(--white-color);
}
.section9 .content-box .content1{
    font-size: 4.5vh;
    margin: 0 5px;
    font-weight: 700;
}
.section9 .content-box .content1 span{
    font-weight: 400;
}
.section9 .content-box .content2{
    margin: 2.5vh 0;
    line-height: 6vh;
    font-size: 5vh;
    font-family: var(--Helvetica-Medium-font);
}
.section9 .content-box .content2 span{
    font-style: italic;
    font-family: serif;
    font-size: 5.7vh;
}
.section9 .content-box .content3{
    font-size: 3vh;
}
.section9 .content-box .content4{
    margin: 5vh 0;
}
.section9 .content-box .content4 a{
    padding: 1.8vh 4.2vh;
    background-color: var(--white-color);
    color: var(--blue-color);
    font-weight: 500;
    font-size: 2.67vh;
    border-radius: 3px;
}


/*section10 start*/



/*section11 start*/
.section11{
    padding: 5vh 2%;
}
.section11 .heading{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.section11 .heading .heading1{
    margin: 2.5vh 0;
    line-height: 6vh;
    font-size: 5vh;
    font-family: var(--Helvetica-Medium-font);
}
.section11 .heading .heading2 a{
    font-family: 2.75vh;
    font-weight: 500;
    color: var(--blue-color);
    transition: 0.24s ease-in-out;
}
.section11 .heading .heading2 a:hover{
    color: var(--main-color);
}
.section11 .box{
    margin: 5px 0;
}
.section11 .box a .img img{
    width: 98%;
    display: block;
    margin: 0 auto;
    transition: 0.24s ease-in-out;
}
.section11 .box:hover a .img img{
    opacity: 0.9;
}
.section11 .box a .content{
    padding: 15px 0;
}
.section11 .box a .content .text1{
    font-size: 2.90vh;
    color: #3d3d3d;
    font-weight: 650;
    margin: 4px 0;
}
.section11 .box a .content .text2{
    font-size: 2.78vh;
    color: var(--semi-black-color);
    opacity: 0.9;
}


/*section12 start*/
.section12{
    padding: 10vh 0;
    color: var(--white-color);
}
.section12 .data{
    margin: 0 1.5%;
    padding: 7%;
    min-height: 68vh;
    border-radius: 5px;
    background-size: cover !important;
    background-position: bottom right;
    background: url(../Asstes/Images/poster7.png) no-repeat;
    background-color: var(--light-blue-color);
}
.section12 .data .content .data1{
    margin: 2.5vh 0;
    line-height: 8vh;
    font-size: 6.75vh;
    font-family: var(--Helvetica-Medium-font);
}
.section12 .data .content .data1 span{
    font-family: serif;
    font-style: italic;
    font-weight: 700;
}
.section12 .data .content .data2{
    margin: 9vh 0;
}
.section12 .data .content .data2 a{
    font-size: 2.7vh;
    font-weight: 500;
    color: var(--white-color);
    padding: 1.5vh 5vh;
    border-radius: 2px;
    background-color: var(--main-color);
}



@media (max-width : 800px) {
    .header1{
        justify-items: start;
    }
    .header1 .stage-1{
        justify-content: left;
        width: 100%;
    }
    .header1 .stage-1 .left-side{
        width: 100%;
    }
    .header1 .stage-1 .left-side ul li a.menu-bars-btn{
        display: initial;
    }
    .header1 .stage-1 .right-side{
        display: none;
    }
    .section1 .background .swiper .swiper-wrapper .swiper-slide.hide{
        display: none;
    }
    .section1 .background .swiper .swiper-wrapper .swiper-slide.mobile{
        display: initial;
    }
    /*section7 start*/
    .section7 .content-box{
        width: 100%;
    }

    .section12 .data{
        width: 98%!important;
    }
}

@media (max-width : 980px) {
    .header1 .stage-2{
        display: none !important;
    }
}