/* Global Vars */
:root{
    --biege-color:#fbf7ed;
    --dark-green-color:#002e25;
    --semi-dark-green-color:#004c3f;
    --light-green-color:#008060;
    --black-color:#212326;
    --main-white-color:#ffffff;
    --gray-color:#6b7177;
    --second-white-color:#b6babf;
    --main-padding:95px;
    --error-color:#c43256;
}
/* Global Vars */
/* input style */
.landing-email-input-container,
.landing-password-input-container,
.landing-store-name-input-container{
    width: 290px;
    position: relative;
    outline: 1px solid var(--gray-color);
    border: 3px solid var(--main-white-color);
    border-radius: 6px;
    height: 54px;
    background-color: var(--main-white-color);
    display: flex;
    align-items: center;
    z-index: 1;
}
input{
    padding: 12px 15px 12px 15px;
    outline: none;
    width: 100%;
    border: none;
}
input::placeholder{
    font-size: 18px;
}
.error-msg-email,
.error-msg-pass,
.error-msg-store-name{
    background-color: var(--error-color);
    padding: 10px 15px 8px;
    border-radius: 4px;
    position: relative;
    bottom: 52px;
    color: var(--main-white-color);
    transition: 0.3s;
    font-weight: 600;
    display: none;
    width: 100%;
    margin: 0 0 -20px;
}
.landing-input-key-press-placeholder{
    position: absolute;
    font-size: 12px;
    color: var(--gray-color);
    top: 6px;
    left: 15px;
    opacity: 0;
}
#question-cercle-store-name{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    color: var(--black-color);
    border: 1px solid var(--black-color);
    border-radius: 50%;
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#question-cercle-store-name .help-text-store-name{
    font-size: 12px;
    position: absolute;
    left: calc(100% - 10px);
    bottom: calc(100% - 3px);
    color: var(--black-color);
    width: 200px;
    background-color: var(--main-white-color);
    font-family: 'Cairo', sans-serif;
    padding: 10px;
    border-radius: 4px;
    font-weight: 400;
    line-height: 1.2;
    box-shadow: 0 0 2px rgb(130 138 145 / 20%), 0 2px 10px rgb(130 138 145 / 10%);
    display: none;
}
@media (max-width:1080px) {
    #question-cercle-store-name .help-text-store-name{
        left: calc(100% - 170px);
        bottom: calc(100% - -4px);
    }
}
/* input Style */
/* title-with-angle */
.title-with-angle{
    display: block;
    font-weight: bold;
    position: relative;
    font-size: 20px;
    width: fit-content;
}
.title-with-angle::before{
    content: "\f30b";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-40%);
    font-size: 20px;
    transition: 0.3s;
}
.title-with-angle:hover::before{
    right: -30px;
}
/* title-with-angle */
/* Start Free Trial Btn */
.start-free-btn,
.create-store-btn{
    display: block;
    padding: 13px 20px;
    background-color: var(--light-green-color);
    border-radius: 4px;
    color: var(--main-white-color);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.5px;
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 12%);
    transition: 0.3s;
    width: fit-content;
    border: none;
    cursor: pointer;
}
.start-free-btn:hover,
.create-store-btn:hover{
    background-color: var(--semi-dark-green-color);
}
/* End Free Trial Btn */
/* Start Global Rules */
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: visible;
}
body{
    font-family: 'Cairo', sans-serif;
    overflow-x: hidden;
    overflow-y: visible;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
    padding: 0;
    margin: 0;
}
.container {
    padding-left: 5%;
    padding-right: 5%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}
/* End Global Rules */
/* Start header */
.header{
    position: relative;
}
.fixed-container{
    position: fixed;
    z-index: 1000;
    width: 100%;
}
.header .container{
    background-color: var(--biege-color);
    transition: 0.3s;
}
.header .big-screen-header{
    display: flex;
    justify-content: space-between;
    min-height: 60px;
    z-index: 100;
}
@media (max-width:1100px) {
    .header .big-screen-header{
        flex-direction: column;
    }
    
}
.header .container .big-screen-header .left,
.header .container .big-screen-header .right{
    display: flex;
    gap: 30px;
    align-items: center;
}
.header .container .header-logo{
    display: block;
}
.header .container .header-logo img{
    width: 120px;
}
.header .container .big-screen-header .links{
    display: flex;
    gap: 50px;
}
.header .container .big-screen-header .main-title{
    display: block;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    position: relative;
    height: 80px;
    display: flex;
    align-items: center;
    color: var(--black-color);
}
.header .container .big-screen-header .main-title.with-angle::before{
    content: attr(data-before);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--gray-color);

}
.header .container .big-screen-header .main-title.with-angle:hover::before{
    color: var(--black-color);
}
.header .container .big-screen-header .show-all-links{
    position: relative;
}
.header .container .big-screen-header .show-all-links .links-box{
    position: absolute;
    background-color: var(--main-white-color);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 1px solid #d2d5d9;
    box-shadow: 0 5px 30px 5px rgb(66 71 76 / 10%);
    width: 250px;
    padding: 10px 0;
    left: 0;
    top: 100%;
    z-index: 1000;
}
.header .container .big-screen-header .links-box li a{
    display: block;
    padding: 10px 0 10px 20px;
    color: var(--black-color);
    font-weight: 600;
    position: relative;
    z-index: 1;
    border: 1px solid var(--main-white-color);
}
.header .container .big-screen-header .links-box li a::before{
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: var(--light-green-color);
    transition: 0.3s;
    border-radius: 4px;
    opacity: 0;
}
.header .container .big-screen-header .links-box li a::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #21232615;
    display: none;
}
.header .container .big-screen-header .links-box li a:hover::before{
    opacity: 1;
}
.header .container .big-screen-header .links-box li a:hover::after{
    display: block;
}
.header .container .big-screen-header .links-box .links-box-small{
    position: absolute;
    top: -1px;
    left: 100%;
    background-color: var(--main-white-color);
    padding: 10px 0;
    border-right: 1px solid #d2d5d9;
    border-top: 1px solid #d2d5d9;
    border-bottom: 1px solid #d2d5d9;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: hidden;
    transition: width 0.3s 0.5s;
    height: calc(100% + 2px);
    width: 0px;
}
.header .container .big-screen-header .links-box .links-box-small .links-box-small-info{
    width: 250px;
}
.header .container .big-screen-header .links-box .links-box-small .paragraf{
    padding: 17.7px;
    color: var(--gray-color);
}
.header .container .big-screen-header .show-all-links .links-box .links-box-title{
    position: relative;
    padding: 0 0 10px 0;
}
.header .container .big-screen-header .show-all-links .links-box .links-box-title::before{
    content: "";
    position: absolute;
    left: 20px;
    bottom: 4px;
    width: calc(100% - 40px);
    height: 1px;
    background-color: #d2d5d9;
}
.header .container .big-screen-header .show-all-links .links-box .with-angle{
    position: relative;
}
.header .container .big-screen-header .show-all-links .links-box .with-angle i{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    color: var(--gray-color);
}
.header .container .big-screen-header .show-all-links .links-box li:hover i{
    color: var(--black-color);
}
.header .container .big-screen-header .about-links-mobile-nav-bar,
#big-screen-header-close-btn{
    display: none;
}
@media (max-width:1080px) {
    .header .big-screen-header{
        background-color: var(--main-white-color);
        position: fixed;
        height: 100vh;
        width: 100%;
        justify-content: flex-start;
        left: 100%;
        top: 0;
        padding: 15px 40px;
        transition: 0.3s linear;
    }
    .header .container .big-screen-header .left,
    .header .container .big-screen-header .right{
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
}
    .header .container .big-screen-header .right{
        border-top:  1px solid #d2d5d9;
        border-bottom:  1px solid #d2d5d9;
        padding-bottom: 15px;
    }
    .header .container .big-screen-header .links{
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 15px 0;
    }
    .header .container .big-screen-header .left .links{
        border-top:  1px solid #d2d5d9;
    }
    
    .header .container .big-screen-header .main-title{
        height: 50px;
        font-weight: 700;
    }
    .header .container .big-screen-header .main-title.with-angle::before{
        right: 0;
    }
    .header .container .big-screen-header .header-logo{
        padding: 10px 0;
    }
    .header .container .big-screen-header .main-title.main-title-width-100{
        width: 100%;
        border: 2px solid var(--light-green-color);
        display: flex;
        justify-content: center;
        border-radius: 4px;
        transition: 0.3s;
        margin-top: 20px;
    }
    .header .container .big-screen-header .main-title.main-title-width-100:hover{
        background-color: var(--light-green-color);
    }
    .header .container .big-screen-header .right .start-free-btn{
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 18px;
        font-weight: 700;
    }
    .header .container .big-screen-header .about-links-mobile-nav-bar{
        display: block;
        padding: 15px 0;
    }
    .header .container .big-screen-header .about-links-mobile-nav-bar .main-title{
        height: 40px;
    }
    .header .container .big-screen-header #big-screen-header-close-btn{
        display: block;
        position: absolute;
        top: 30px;
        right: 40px;
        font-size: 30px;
        cursor: pointer;
    }
    .header .container .big-screen-header .show-all-links .links-box{
        width: 100%;
        position: relative;
        left: 0;
        top: 0;
        border: none;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border-left: 1px solid #d2d5d9 ;
        box-shadow: none;
    }
    .header .container .big-screen-header .show-all-links .links-box .links-box-title::before,
    .header .container .big-screen-header .links-box li a::before,
    .header .container .big-screen-header .links-box li a:hover::after{
        display: none;
    }
    .header .container .big-screen-header .links-box li a{
        font-weight: 700;
        border: none;
    }
    .header .container .big-screen-header .links-box li a:hover{
        border: none;
    }
    .header .container .big-screen-header .links-box .links-box-small{
        position: relative;
        left: 0;
        top: 0;
        padding: 0;
        border: none;
    }
    .header .container .big-screen-header .links-box .links-box-small .links-box-small-info{
        width: 100%;
    }
    .header .container .big-screen-header .links-box .links-box-small .links-box-small-info a{
        padding: 10px 0 10px 40px;
    }
    
}
/* Start header mobile */
.header .container .mobile-header{
    display: none;
    align-items: center;
    min-height: 60px;
}
@media (max-width:1080px){
    .header .container .mobile-header{
        display: flex;
    }
}
.header .container .mobile-header .mobile-right,
.header .container .mobile-header .mobile-left{
    flex: 1;
}
.header .container .mobile-header .mobile-right{
    display: flex;
    justify-content: flex-end;
    gap: 30px;
    align-items: center;
}
.header .container .mobile-header .mobile-right .login-header-link{
    display: block;
    color: var(--black-color);
    font-weight: 600;
    font-size: 18px;

}
.header .container .mobile-header .mobile-right i{
    font-size: 22px;
    cursor: pointer;
}
/* End heder mobile */
/* End header */
/* Start Landing */
.landing{
    position: relative;
    margin-top: 80px;
}
@media (max-width:1100px){
    .landing{
        margin-top: 160px;
    }
}
@media (max-width:1080px) {
    .landing{
        margin-top: 60px;
    }
}
.landing .container{
    background-color: var(--biege-color);
}
.landing .container .contents{
    display: flex;
    align-items: center;
    padding: 40px 0;
}
@media (max-width:1080px) {
    .landing .container .contents{
        flex-direction: column;
    }
}
.landing .container .contents .info{
    flex-basis: 35%;
}
.landing .container .contents .info .title{
    margin: 0;
    font-size: 52px;
    color: var(--dark-green-color);
    line-height: 1.4;
    font-weight: bold;
}
@media (max-width:1080px) {
    .landing .container .contents .info .title{
        font-size: 40px;
    }
}
.landing .container .contents .info .main-parag{
    color: var(--gray-color);
    font-size: 23px;
    padding: 30px 0;
}
.landing .container .contents .info .last-parag{
    color: var(--gray-color);
    font-size: 14px;
    padding: 25px 0 50px;
}
.landing .container .contents .info form{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.landing .container .contents .info form .start-free-btn{
    padding: 18px 30px;
    margin-right: 20px;
}

@media (max-width:1570px) {
    .landing .container .contents .info form{
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .landing .container .contents .info form .landing-email-input-container,
    .landing .container .contents .info form .start-free-btn{
        width: 100%;
    }
    .landing .container .contents .info form .start-free-btn{
        text-align: center;
    }
}
@media (max-width:1080px){
    .landing .container .contents .info form{
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .landing .container .contents .info form .start-free-btn{
        min-width: 180px;
        max-width: 180px;
    }
    .landing .container .contents .info form .landing-email-input-container{
        max-width: 600px;
    }
}
@media (max-width:500px){
    .landing .container .contents .info form{
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .landing .container .contents .info form input,
    .landing .container .contents .info form .start-free-btn{
        width: 100%;
        max-width: 100%;
    }
    .landing .container .contents .info form .start-free-btn{
        text-align: center;
    }
}
.landing .container .contents .image{
    flex-basis: 65%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.landing .container .contents .image img.one,
.landing .container .contents .image img.two{
    max-width: 100%;
    width: 85%;
    display: none;
}

@media (max-width:1280px) {
    .landing .container .contents .image img.two{
        display: block;
    }
}

@media (max-width:1080px) {
    .landing .container .contents .image img.one{
        display: block;
        width: 100%;
    }
    .landing .container .contents .image img.two{
        display: none;
    }
}
@media (max-width:750px) {
    .landing .container .contents .image img.one{
        display: none;
    }
    .landing .container .contents .image img.two{
        display: block;
        width: 100%;
    }
}
@media (min-width:1280px) {
    .landing .container .contents .image img.one{
        display: block;
    }
}

/* End Landing */
/* Start Bring your business */
.bring-business{
    position: relative;
    color: var(--main-white-color);
}
.bring-business .container{
    background-color: var(--semi-dark-green-color);
    padding-top: var(--main-padding);
    padding-bottom: var(--main-padding);
}
.bring-business .container h2,
.bring-business .container h3{
    font-weight: normal;
    margin:  0 0 20px;
}
.bring-business .container h2{
    font-size: 42px;
}
.bring-business .container h3{
    font-size: 32px;
}
@media (max-width:1080px) {
    .bring-business .container h2{
        font-size: 35px;
    }
}
.bring-business .container .parag-with-titleangle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 80px;
}
@media (max-width:1440px) {
    .bring-business .container .parag-with-titleangle{
        flex-direction: column;
        align-items: flex-start;
    }
}
.bring-business .container .parag-with-titleangle p{
    font-size: 18px;
}
.bring-business .container .parag-with-titleangle .title-with-angle{
    color: var(--main-white-color);
    right: 25px;
}
@media (max-width:1440px) {
    .bring-business .container .parag-with-titleangle{
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .bring-business .container .parag-with-titleangle .title-with-angle{
        right:0px
    }
}
.bring-business .container .contents{
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
    margin-bottom: 80px;
}
@media (max-width:1080px){
    .bring-business .container .contents .box:last-child{
        display: none;
    }
}
@media (max-width:850px){
    .bring-business .container .contents .box:nth-child(4){
        display: none;
    }
}
@media (max-width:750px){
    .bring-business .container .contents{
        flex-wrap: wrap;
    }
    .bring-business .container .contents .box{
        flex-basis: calc(50% - 15px);
    }
    .bring-business .container .contents .box:nth-child(4){
        display: block;
    }
}
.bring-business .container .contents .box .image img{
    max-width: 100%;
    width: 100%;
}
.bring-business .container .contents .box .info{
    cursor: pointer;
}
.bring-business .container .contents .box .info .box-title{
    display: block;
    position: relative;
    margin: 10px 0;
    color: var(--main-white-color);
    font-weight: bold;
    width: fit-content;
}
.bring-business .container .contents .box .info .box-title::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 100%;
    height: 1px;
    background-color: var(--main-white-color);
    display: none;
}
.bring-business .container .contents .box .info:hover .box-title::before{
    display: block;
}
.bring-business .container .contents .box .info span{
    font-size: 18px;
}
.bring-business .container .paths-contents{
    padding: 40px 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 60px;
}

.bring-business .container .paths-contents .path .logo{
    display: flex;
    justify-content: flex-start;
}
.bring-business .container .paths-contents h4{
    padding: 30px 0 20px;
    font-size: 20px;
    font-weight: 600;
}
.bring-business .container .paths-contents p{
    line-height: 1.5;
    font-size: 18px;
}
.bring-business .container .paths-contents .path .logo img{
    width: 40px;
    max-width: 100%;
    filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);
}

/* End Bring your business */
/* Start signup form */
.sign-up-form{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--black-color);
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: 0.3s;
}
.sign-up-form .container{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.sign-up-form form{
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 500px;
    padding-top: 120px;
    position: relative;
}
@media (max-width:1080px) {
    .sign-up-form form{
        width: 100%;
    }
}
.sign-up-form form #sign-up-form-close-btn{
    position: absolute;
    right: 0;
    top: 20px;
    color: var(--main-white-color);
    font-size: 30px;
    cursor: pointer;
    opacity: 0.7;
    transition: 0.3s;
}
.sign-up-form form #sign-up-form-close-btn:hover{
    opacity: 1;
}
.sign-up-form form h2{
    font-size: 32px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--main-white-color);
}
@media (max-width:1080px) {
    .sign-up-form form{
        width: 100%;
    }
    .sign-up-form form h2{
        font-size: 25px;
    }
}
.sign-up-form form .landing-email-input-container,
.landing-password-input-container,
.landing-store-name-input-container{
    width: 100%;
}
.sign-up-form form .create-store-btn{
    padding: 15px 30px ;
    align-self: flex-end;
}
/* End signup form */
/* Start All Site Contents */
.all-site-contents{
    position: relative;
    padding: var(--main-padding) 0;
    text-align: center;
    
}
.all-site-contents .header-title{
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 25px;
}
@media (max-width:1080px){
    .all-site-contents .header-title{
        font-size: 35px;
    }
}
@media (max-width:750px){
    .all-site-contents .header-title{
        font-size: 30px;
    }
}
.all-site-contents .header-parag{
    font-size: 22px;
    width: 600px;
    margin: 0 auto;
    color: var(--gray-color);
}
@media (max-width:750px){
    .all-site-contents .header-parag{
        width: 100%;
    }
}
.all-site-contents .min-contents-container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 90px;
}
.all-site-contents .min-contents-container .video,
.all-site-contents .min-contents-container .image,
.all-site-contents .min-contents-container .info,
.all-site-contents .min-contents-container .image-real{
    width: 50%;
}
@media (max-width:1080px) {
    .all-site-contents .min-contents-container{
        gap: 40px;
    }
    .all-site-contents .min-contents-container.sell-every-where,
    .all-site-contents .min-contents-container.manage-everything{
        flex-direction: column-reverse;
    }
    .all-site-contents .min-contents-container.market-your-business{
        flex-direction: column;
    }
    .all-site-contents .min-contents-container .video,
    .all-site-contents .min-contents-container .image,
    .all-site-contents .min-contents-container .info,
    .all-site-contents .min-contents-container .image-real{
        width: 100%;
    }
}
.all-site-contents .min-contents-container .video,
.all-site-contents .min-contents-container .image{
    display: flex;
    justify-content: flex-start;
    position: relative;
}
.all-site-contents .min-contents-container .video video,
.all-site-contents .min-contents-container .image img{
    max-width: 100%;
}
.all-site-contents .min-contents-container .video i{
    position: absolute;
    right: 10px;
    bottom: 80px;
    font-size: 20px;
    cursor: pointer;
}
@media (max-width:750px) {
    .all-site-contents .min-contents-container .video i{
        right: calc(100% - 20px);
        bottom: 20px;
    }
}
.all-site-contents .min-contents-container .info{
    text-align: start;
}
.all-site-contents .min-contents-container.sell-every-where .info .text,
.all-site-contents .min-contents-container.manage-everything .info .text{
    width: 70%;
}
.all-site-contents .min-contents-container.sell-every-where .info .text{
    margin: 0 0 0 30px;
}
.all-site-contents .min-contents-container.manage-everything .info .text{
    margin: 0 0 0 60px;
}
.all-site-contents .min-contents-container.market-your-business .info .text{
    margin: 0 0 0 80px;
    padding: 0 60px 0 0;
}
@media (max-width:1200px) {
    .all-site-contents .min-contents-container.sell-every-where .info .text,
    .all-site-contents .min-contents-container.manage-everything .info .text{
        width: 90%;
    }
}
@media (max-width:1080px) {
    .all-site-contents .min-contents-container .info{
        width: 80%;
    }
    .all-site-contents .min-contents-container.market-your-business .info .text{
        margin: 0 0 0 30px;
    }
}
@media (max-width:750px) {
    .all-site-contents .min-contents-container .info .text{
        width: 100%;
    }
    .all-site-contents .min-contents-container .info{
        width: 100%;
    }
}
.all-site-contents .min-contents-container .info .text .info-title{
    font-size: 30px;
    font-weight: 600;
}
@media (max-width:1080px){
    .all-site-contents .min-contents-container .info .text .info-title{
        font-size: 25px;
    }
}
.all-site-contents .min-contents-container .info .text .info-parag{
    padding: 20px 0;
    line-height: 1.4;
    color: var(--gray-color);
    font-size: 18px;
}
.all-site-contents .min-contents-container .info .text .title-with-angle{
    color: var(--light-green-color);
}
.all-site-contents .min-contents-container .image-real{
    position: relative;
    padding: 40px;
    box-shadow: 0 4px 50px 0 #e8e9eb;
}
@media (max-width:1200px) {
    .all-site-contents .min-contents-container .image-real{
        padding: 20px;
    }
}
@media (max-width:1080px) {
    .all-site-contents .min-contents-container .image-real{
        padding: 40px;
    }
}
.all-site-contents .min-contents-container .image-real .image-real-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}
.all-site-contents .min-contents-container .image-real .image-real-header .logo,
.all-site-contents .min-contents-container .image-real .image-real-header .search-area,
.all-site-contents .min-contents-container .image-real .image-real-header .profile-info{
    flex: 1;
}
.all-site-contents .min-contents-container .image-real .image-real-header .logo{
    display: flex;
    justify-content: flex-start;
}
.all-site-contents .min-contents-container .image-real .image-real-header .logo img{
    width: 30px;
}
.all-site-contents .min-contents-container .image-real .image-real-header .search-area{
    display: flex;
    justify-content: flex-start;
    padding: 8px 0 8px 30px;
    border-radius: 4px;
    background-color: #f9f9f9;
    font-size: 13px;
    position: relative;
}
.all-site-contents .min-contents-container .image-real .image-real-header .search-area::before{
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 900;
    font-size: 15px;
    color: var(--second-white-color);
}
.all-site-contents .min-contents-container .image-real .image-real-header .profile-info{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.all-site-contents .min-contents-container .image-real .image-real-header .profile-info .profile-image img{
    max-width: 100%;
    width: 40px;
    border-radius: 50%;
}
.all-site-contents .min-contents-container .image-real .image-real-header .profile-info .profile-text{
    text-align: start;
}
.all-site-contents .min-contents-container .image-real .image-real-header .profile-info .profile-text span{
    display: block;
    font-weight: 600;
    font-size: 15px;
}
@media (max-width:1340px) {
    .all-site-contents .min-contents-container .image-real .image-real-header .profile-info .profile-text span{
        font-size: 10px;
    }
}
@media (max-width:1080px) {
    .all-site-contents .min-contents-container .image-real .image-real-header .profile-info .profile-text span{
        font-size: 15px;
    }
}
@media (max-width:680px) {
    .all-site-contents .min-contents-container .image-real .image-real-header .profile-info .profile-text span{
        font-size: 10px;
    }
}
.all-site-contents .min-contents-container .image-real .image-real-header .profile-info .profile-text .position{
    color: var(--second-white-color);
}
.all-site-contents .min-contents-container .image-real .image-real-contents{
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) minmax(0,1fr);
    gap: 20px;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-total-sales,
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-shipped-orders,
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-shipped-transactions{
    border: 1px solid var(--second-white-color);
    border-radius: 6px;
    padding: 15px;
    height: fit-content;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-total-sales .image-real-totle-sales-title,
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-shipped-transactions .image-real-shipped-transactions-title{
    font-size: 15px;
    font-weight: 700;
    display: block;
    text-align: start;
    margin-bottom: 15px;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-total-sales .image-real-totale-sales-statique{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 1px solid var(--second-white-color);
    padding-bottom: 8px;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-total-sales .image-real-totale-sales-statique .image-real-totle-sales-statique-number,
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-total-sales .image-real-totale-sales-statique .image-real-totle-sales-statique-image{
    flex: 1;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-total-sales .image-real-totale-sales-statique .image-real-totle-sales-statique-number{
    display: block;
    font-size: 30px;
    font-weight: bold;
    text-align: start;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-total-sales .image-real-totale-sales-statique .image-real-totle-sales-statique-image{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-total-sales .image-real-totale-sales-statique .image-real-totle-sales-statique-image img{
    max-width: 100%;
    width: 70px;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-total-sales .image-real-total-sales-reports{
    display: flex;
    padding: 8px 0;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--gray-color);
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-total-sales .image-real-total-sales-reports .image-real-total-sales-reports-view-report{
    position: relative;
    right: 8px;
    cursor: pointer;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-total-sales .image-real-total-sales-reports .image-real-total-sales-reports-view-report::before{
    position: absolute;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-size: 12px;
    font-weight: 900;
    right: -11px;
    top: 50%;
    transform: translateY(-40%);
    transition: 0.3s;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-total-sales .image-real-total-sales-reports:hover .image-real-total-sales-reports-view-report::before{
    right: -13px;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-shipped-orders .image-real-shipped-orders-title{
    display: block;
    font-size: 13px;
    text-align: start;
    position: relative;
    left: 12px;
    margin-bottom: 20px;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-shipped-orders .image-real-shipped-orders-title::before{
    content: "";
    position: absolute;
    left: -14px;;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid #90dfd6;
    border-bottom-width: 6px;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-shipped-orders .image-real-shipped-orders-order-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-shipped-orders .image-real-shipped-orders-order-box .image-real-shipped-orders-order-box-left-side{
    display: flex;
    align-items: center;
    gap: 10px;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-shipped-transactions{
    grid-row: 1 / 3;
    grid-column: 2 / 3;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-shipped-transactions .image-real-shipped-transactions-box{
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--gray-color);
    border-top: 1px solid var(--second-white-color);
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-shipped-transactions .image-real-shipped-transactions-box .image-real-shipped-transactions-box-id{
    display: flex;
    align-items: center;
    gap: 10px;
}
.all-site-contents .min-contents-container .image-real .image-real-contents .image-real-shipped-transactions .image-real-shipped-transactions-box .image-real-shipped-transactions-box-id .image-real-shipped-transactions-box-id-icon img{
    max-width: 100%;
    width: 25px;
}
.all-site-contents .learn-more-about-shopify{
    text-align: start;
    margin-top: 180px;
    font-weight: 600;
}
.all-site-contents .learn-more-about-shopify .first{
    font-size: 32px;
    margin-bottom: 40px;
    max-width: 500px;
    line-height: 1.4;
}
.all-site-contents .learn-more-about-shopify .last{
    font-size: 25px;
    margin-bottom: 40px;
    line-height: 1.3;
    max-width: 700px;
}
@media (max-width:1080px) {
    .all-site-contents .learn-more-about-shopify .first{
        font-size: 28px;
        max-width: 100%;
        margin-bottom: 30px;
    }
    .all-site-contents .learn-more-about-shopify .last{
        font-size: 22px;
        font-weight: 400;
        margin-bottom: 30px;
    }
}
@media (max-width:750px) {
    .all-site-contents .learn-more-about-shopify .first{
        font-size: 25px;
        margin-bottom: 25px;
    }
    .all-site-contents .learn-more-about-shopify .last{
        font-size: 20px;
        font-weight: 400;
        max-width: 100%;
        margin-bottom: 25px;
    }
}
.all-site-contents .learn-more-about-shopify .last span{
    font-weight: bold;
}
.all-site-contents .learn-more-about-shopify .title-with-angle{
    color: var(--light-green-color);
    font-size: 18px;
}
/* End All Site Contents */
/* Start Chioma */
.chioma{
    position: relative;
    margin-top: 180px;
}
.chioma .container {
    display: flex;
 
}
@media (max-width:980px) {
    .chioma .container{
        flex-direction: column;
    }
}
.chioma .container .image,
.chioma .container .info{
    flex : 1;
}
.chioma .container .image{
    overflow: hidden;
}
.chioma .container .image img{
    height: 100%;
    max-width: 100%;
    transform: scale(105%);
}
.chioma .container .info{
    background-color: #002e25;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}
@media (max-width:1080px) {
    .chioma .container .info{
        padding: 40px 0;
    }
}
.chioma .container .info .text{
    text-align: center;
    width: 70%;
}
@media (max-width:1080px) {
    .chioma .container .info .text {
        width: 80%;
    }
}
.chioma .container .info .text p{
    font-size: 33px;
    color: var(--main-white-color);
    line-height: 1.5;
    font-weight: bold;
    margin-bottom: 50px;
}
@media (max-width:1200px) {
    .chioma .container .info .text p{
        font-size : 25px;
    }
}
.chioma .container .info .text span{
    display: block;
    margin: 30px 0;
    color: var(--main-white-color);
    font-size: 22px;
    font-weight: 600;
}
@media (max-width:1200px) {
    .chioma .container .info .text span{
        font-size : 18px;
    }
}
.chioma .container .info .text button{
    position: relative;
    padding: 15px 30px 15px 60px;
    border: 1px solid var(--main-white-color);
    background: none;
    border-radius: 4px;
    color: var(--main-white-color);
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
@media (max-width:1200px) {
    .chioma .container .info .text button{
        font-size: 14px;
    }
}
.chioma .container .info .text button::before{
    content: "\f04b";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 30px;
    font-size: 22px;
}
.chioma .container .info .text button:hover{
    color: var(--black-color);
    background-color: var(--main-white-color);
}
.brands-logo{
    padding: 80px 0;
}
.brands-logo .container{
    display: flex;
    row-gap: 40px;
    flex-wrap: wrap;
}
.brands-logo .container .image{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width:1080px) {
    .brands-logo .container .image:not(:nth-child(8),:nth-child(7),:nth-child(6)){
        flex-basis: calc(100% / 5);
    }
    .brands-logo .container .image:nth-child(8),
    .brands-logo .container .image:nth-child(7),
    .brands-logo .container .image:nth-child(6){
        flex-basis: calc(100% / 3);
    }
}
@media (max-width:790px){
    .brands-logo .container .image{
        flex-basis: calc(100% / 3) !important;
    }
}
@media (max-width:480px){
    .brands-logo .container .image{
        flex-basis: 50% !important;
    }
}
@media (max-width:325px){
    .brands-logo .container .image{
        flex-basis: 100% !important;
    }
}
/* End Chioma */
/* Start Help */
.help .container{
    display: flex;
    background-color: var(--biege-color);
    padding-right: 0;
}
@media (max-width:750px){
    .help .container{
        flex-direction: column;
        padding-left: 0;
    } 
}
.help .container > *{
    flex: 1;
}
.help .container .info{
    padding: calc(var(--main-padding) / 2 ) calc(var(--main-padding) / 2 ) calc(var(--main-padding) / 2 ) 0;
    display: flex;
    align-items: center;
}
.help .container .info .contents{
    height: fit-content;
}
@media (max-width:1080px) {
    .help .container .info{
        flex-basis: 60%;
    }
    .help .container .image{
        flex-basis: 40%;
    }
}
@media (max-width:750px){
    .help .container .info{
        padding: calc(var(--main-padding) / 2 );
    }
}
.help .container .info .help-title{
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 80px;
}
@media (max-width:1080px){
    .help .container .info .help-title{
        font-size: 30px;
    }
}
.help .container .info .info-boxes{
    display: flex;
    flex-wrap: wrap;
    row-gap: 50px;
}
.help .container .info .info-boxes .box:first-child{
    margin-right: 50px;
}
.help .container .info .info-boxes .box{
    flex: 1;
    flex-basis: calc(50% - 50px);
}
@media (max-width:750px) {
    .help .container .info .info-boxes .box{
        flex-basis: 100%;
}
}
.help .container .info .info-boxes .box h4{
    font-size: 20px;
    font-weight: 600;
}
.help .container .info .info-boxes .box p{
    color: var(--gray-color);
    padding: 16px 0;
    max-width: 300px;
}
@media (max-width:1080px){
    .help .container .info .info-boxes .box p{
        font-size: 16px;
        max-width: 300px;
    }
}
@media (max-width:750px) {
    .help .container .info .info-boxes .box p{
        max-width: 100%;
}
}
.help .container .info .info-boxes .box a{
    color: var(--light-green-color);
    font-size: 18px;
}
.help .container .image{
    overflow: hidden;
}
.help .container .image .help-image-src{
    content: url(../images/expertScreenOne.jpg);
    max-width: 100%;
    height: 100%;
}
@media (max-width:750px) {
    .help .container .image .help-image-src{
        content: url(../images/expertScreenThree.jpg);
}
}
/* End Help */
/* Start Journy */
.journey{
    text-align: center;
    padding: var(--main-padding) 0 0;
}
.journey h3{
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 25px;
}

.journey p{
    font-size: 22px;
    max-width: 800px;
    margin: 0 auto;
    color: var(--gray-color);
}
@media (max-width:1080px) {
    .journey h3{
        font-size: 25px;
    }
    .journey p{
        font-size: 18px;
        width: 100%;
    }
}
.journey .start-free-btn{
    margin: 40px auto 0;
    padding: 18px 30px;
}
.journey .back-to-top-btn{
    margin-top: 100px;
    padding-bottom: 40px;
    display: flex;
    justify-content: flex-end;
}
@media (max-width:750px) {
    .journey .back-to-top-btn{
        justify-content: center;
        margin-top: 80px;
    }
}
.journey .back-to-top-btn button{
    position: relative;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--light-green-color);
    font-weight: bold;
    font-size: 20px;
    right: 20px;
}
@media (max-width:750px) {
    .journey .back-to-top-btn button{
        right: 0px;
    }
}
.journey .back-to-top-btn button::before{
    content: "\f062";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.3s;
}
.journey .back-to-top-btn button:hover::before{
    transform: translateY(-70%);
}
/* End Journy */
/* Start Fooer */
footer{
    position: relative;
}
footer .container{
    background-color: var(--dark-green-color);
}
footer .container .footer-head{
    border-bottom: 1px solid rgba(210,213,217,0.1);
}
footer .container .footer-head .footer-head-links{
    flex-wrap: wrap;
    display: flex;
    column-gap: 20px;
}
@media (max-width:750px) {
    footer .container .footer-head .footer-head-links{
        justify-content: center;
    }
}
footer .container .footer-head .footer-head-links li a{
    position: relative;
    display: block;
    padding: 30px 0;
    font-weight: bold;
    color: var(--main-white-color);
    font-size: 18px;
    text-align: center;
}
@media (max-width:546px) {
    footer .container .footer-head .footer-head-links li a{
        padding: 15px 0;
    }
}
footer .container .footer-head .footer-head-links li a::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--main-white-color);
    transition: 0.3s;
    opacity: 0;
}
@media (min-width:750px) {
    footer .container .footer-head .footer-head-links li a:hover::before{
        opacity: 1;
    }
}
footer .container .footer-contents{
    position: relative;
    padding: 20px 0;
    display: flex;
    row-gap: 30px;
}
footer .container .footer-contents::before{
    content: "";
    position: absolute;
    left: -95px;
    bottom: 0;
    width: calc(100% + 190px);
    height: 1px;
    background-color: rgba(210,213,217,0.1);
}
@media (max-width:750px) {
    footer .container .footer-contents{
        flex-wrap: wrap;
    }
}
footer .container .footer-contents .footer-contents-links{
    flex: 1;
}
footer .container .footer-contents .footer-contents-links.wraper{
    flex: 3;
}
footer .container .footer-contents .footer-contents-links li a{
    display: block;
    padding: 5px 100px 5px 0;
    color:#b6babf;
    transition: 0.3s ease-in-out;
    width: 100%;
}
@media (max-width:1200px) {
    footer .container .footer-contents .footer-contents-links li a{
        padding: 5px 50px 5px 0;
    }
}
@media (max-width:890px) {
    footer .container .footer-contents .footer-contents-links li a{
        padding: 5px 30px 5px 0;
    }
}
footer .container .footer-contents .footer-contents-links li a:hover{
    color: var(--main-white-color);
}
footer .container .footer-contents .footer-contents-links .title{
    font-weight: bold;
    color: var(--main-white-color);
    padding-bottom: 5px;
}
footer .container .footer-contents .footer-contents-links .groupes{
    display: flex;
}
@media (max-width:750px) {
    footer .container .footer-contents .footer-contents-links.wraper{
        flex: 1;
    }
    footer .container .footer-contents .footer-contents-links .groupes{
        flex-direction: column;
    }
}
footer .container .footer-footer{
    display: flex;
    padding: 40px 0;
}
@media (max-width:750px) {
    footer .container .footer-footer{
        flex-direction: column;
    }
}
footer .container .footer-footer .social-media{
    display: flex;
    gap: 30px;
    flex: 1;
}
footer .container .footer-footer .social-media i{
    color: var(--dark-green-color);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--main-white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
footer .container .footer-footer .privacy-policy{
    position: relative;
    display: flex;
    flex: 1;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}
@media (max-width:750px) {
    footer .container .footer-footer{
        row-gap: 20px;
    }
    footer .container .footer-footer .social-media,
    footer .container .footer-footer .privacy-policy{
        justify-content: center;
        flex-wrap: wrap;
        width: fit-content;
        margin: 0 auto;
    }
}
footer .container .footer-footer .privacy-policy li .privacy-policy-links{
    color:#b6babf;
    font-size: 18px;
    transition: 0.3s ease-in-out;
}
footer .container .footer-footer .privacy-policy li .privacy-policy-links:hover{
    color: var(--main-white-color);
}
footer .container .footer-footer .privacy-policy .lang{
    position: relative;
    color: var(--main-white-color);
    padding: 0 15px 0 30px;
    cursor: pointer;
}
footer .container .footer-footer .privacy-policy .lang #lan-angle-down{
    font-size: 15px;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
}
footer .container .footer-footer .privacy-policy .lang::before{
    content: "\f0ac";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 15px;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
}
.country-list{
    background-color: var(--main-white-color);
    padding: 15px 10px 10px;
    border-radius: 4px;
    position: absolute;
    bottom: calc(100% + 20px);
    right: -5px;
    box-shadow: 0 5px 30px 5px rgb(66 71 76 / 10%);
    display: none;
}
.country-list .country-list-title{
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: normal;
    padding-left: 20px;
}
@media (max-width:750px) {
    .country-list .country-list-title{
        font-size: 23px;
    }
}
.country-list .countries{
    display: flex;
}
.country-list .countries a{
    position: relative;
    display: block;
    color: var(--black-color);
    padding: 8px 40px 8px 20px;
    font-size: 18px;
    font-weight: 600;
}
@media (max-width:750px) {
    .country-list .countries a{
        font-size: 15px;
    }
}
.country-list .countries a::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background-color: var(--light-green-color);
    display: none;
}
.country-list .countries a:hover::before{
    display: block;
}
.country-list .countries a.active::before{
    display: block;
}
/* End Footer */