@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Raleway", sans-serif;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Raleway", sans-serif;
}

.clear {
    clear: both;
}

.img {
    width: 100%;
    display: block;
}

.v_a_img {
    vertical-align: middle;
}

.top {
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
}

.top2 {
    width: 85%;
    max-width: 1600px;
    margin: 0 auto;
}

.top3 {
    width: 99%;
    max-width: 1600px;
    margin: 0 auto;
}


.col_sm1 {
    width: 100%;
}

.col_sm2 {
    width: 48%;
    margin: 1%;
    float: left;
}

.col_sm3 {
    width: 31%;
    margin: 1%;
    float: left;
}

.col_sm4 {
    width: 23%;
    margin: 1%;
    float: left;
}

.col_sm8 {
    width: 40%;
    margin: 1%;
    float: left;
}

.col_sm88 {
    width: 56%;
    margin: 1%;
    float: left;
}

.col_sm8_2 {
    width: 35.5%;
    margin: 1%;
    float: left;
}

.col_sm9 {
    width: 23%;
    margin: 1%;
    float: left;
}

.col_sm99 {
    width: 70%;
    margin: 1%;
    float: left;
}

.col_sm11 {
    width: 38%;
    margin: 1%;
    float: left;
}

.col_sm12 {
    width: 18%;
    margin: 1%;
    float: left;
}

.navbaar {
   width: 870px;
  float: right;

}

.logo {
    width: 100px;
    float: left;
    margin: 1%;
}

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

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


.book_now {
    width: 300px;
   float: right;
    align-items: center;
    margin-top: 5px;
}

/* Iframe */
.ad-image {
  width: 100%;
  float: none;
  margin: 2% auto;
}


/* ===== Base Desktop Ad (970x90) ===== */
.desktop-ad {
  position: relative;
  width: 970px;
  max-width: 100%;
  padding-bottom: calc(90 / 970 * 100%); /* Maintain aspect ratio */
  height: 0;
  overflow: hidden;
  margin: 0 auto;
}
.desktop-ad iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* ===== Mobile Ad (320x50) ===== */
.mobile-ad {
  display: none;
  text-align: center;
}
.mobile-ad iframe {
  width: 320px;
  height: 50px;
  border: 0;
}

/* ===== Responsive Breakpoints ===== */

/* Large screens (≥1400px) - keep centered */
@media (min-width: 1400px) {
  .desktop-ad {
    width: 970px;
  }
}

/* Between 1250px - 1399px */
@media (max-width: 1399px) and (min-width: 1250px) {
  .desktop-ad {
    width: 970px;
    padding-bottom: calc(90 / 970 * 100%); /* keeps ratio */
  }
}

/* Between 1000px - 1249px */
@media (max-width: 1249px) and (min-width: 1000px) {
  .desktop-ad {
    width: 970px; /* standard leaderboard size */
    padding-bottom: calc(90 / 970 * 100%);
  }
}

/* Between 960px - 999px */
@media (max-width: 999px) and (min-width: 961px) {
  .desktop-ad {
    width: 970px;
    padding-bottom: calc(90 / 970 * 100%);
  }
}

/* Between 600px - 960px */
@media (max-width: 960px) and (min-width: 601px) {
  .desktop-ad {
    width: 468px; /* standard banner */
    padding-bottom: calc(90 / 970 * 100%);
  }
}

/* Switch to Mobile (≤600px) */
@media (max-width: 600px) {
  .desktop-ad {
    display: none;
  }
  .mobile-ad {
    display: block;
  }
    .ad-image {
    width: 98%;
  }
}

/* Extra small screens (≤360px) */
@media (max-width: 360px) {
  .mobile-ad iframe {
    width: 320px; /* smaller ad size */
    height: 50px;
  }
}
/* 970*90px */
/* ===== Desktop Ad (728x90) ===== */
.desktop-ad2 {
  position: relative;
  width: 728px;
  max-width: 100%;
  padding-bottom: calc(90 / 728 * 100%); /* Maintain aspect ratio */
  height: 0;
  overflow: hidden;
  margin: 0 auto;
}
.desktop-ad2 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* ===== Mobile Ad (320x50) ===== */
.mobile-ad2 {
  display: none;
  text-align: center;
}
.mobile-ad2 iframe {
  width: 320px;
  height: 50px;
  border: 0;
}

/* ===== Responsive Breakpoints ===== */

/* Large screens (≥1400px) - keep centered */
@media (min-width: 1400px) {
  .desktop-ad2 {
    width: 728px;
    
  }
}

/* Between 1250px - 1399px */
@media (max-width: 1399px) and (min-width: 1250px) {
  .desktop-ad2 {
    width: 728px;
    padding-bottom: calc(90 / 728 * 100%); /* keeps ratio */
  }
}

/* Between 1000px - 1249px */
@media (max-width: 1249px) and (min-width: 1000px) {
  .desktop-ad2 {
    width: 970px; /* standard leaderboard size */
    padding-bottom: calc(728 / 970 * 100%);
  }
}

/* Between 960px - 999px */
@media (max-width: 999px) and (min-width: 961px) {
  .desktop-ad2 {
    width: 728px;
    padding-bottom: calc(90 / 728 * 100%);
  }
}

/* Between 600px - 960px */
@media (max-width: 960px) and (min-width: 601px) {
  .desktop-ad2 {
    width: 468px; /* standard banner */
    padding-bottom: calc(90 / 728 * 100%);
  }
}

/* Switch to Mobile (≤600px) */
@media (max-width: 600px) {
  .desktop-ad2 {
    display: none;
  }
  .mobile-ad2 {
    display: block;
  }
 .ad-image {
    width: 98%;
  }
}

/* Extra small screens (≤360px) */
@media (max-width: 360px) {
  .mobile-ad2 iframe {
    width: 320px; /* smaller ad size */
    height: 50px;
  }
}

/* Iframe */

.book_now a {
    font-size: 16px;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    text-transform: capitalize;
    font-family: "Raleway", sans-serif;
    position: relative;
    padding: 16px 33px;
    z-index: 1;
    display: inline-block;
    background: #ffc40c;
    border-radius: 10px;
}

.book_now a:hover{
    color: #fff;
}

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



.book_now2 a {
    font-size: 16px;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    text-transform: capitalize;
    font-family: "Raleway", sans-serif;
    position: relative;
    padding: 14px 10px;
    z-index: 1;
    display: inline-block;
    background: #ffc40c;
    border-radius: 10px;
}

.book_now2 a:hover{
    color: #fff;
}

input {
    width: 92.5%;
    margin: 1%;
    float: left;
    padding: 18px 10px;
    font-family: "Raleway", sans-serif;
    border-radius: 6px;
    font-size: 14px !important;
    border-radius: 0px;
    background-color: #f5f5f5;
    border: none;
}

.why-us{
    padding: 10px 15px;
}

.why-us h1{
   color: #ffc40c;
    font-family: "Raleway", sans-serif;
    text-align: left;
    font-size: 25px;
    font-weight: 700;
    line-height: 140%;
    
   
}

.why-us h2 {
    color: #ffc40c;
    font-family: "Raleway", sans-serif;
    text-align: left;
    font-size: 29px;
    font-weight: 700;
    line-height: 140%;
} 

.why-us h3 {
    color: #fff;
    font-family: "Raleway", sans-serif;
    text-align: left;
    font-size: 22px;
    font-weight: 700;
    line-height: 140%;
} 



.why-us p {
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    color: #fff;
    text-align: justify;  
}

.why-us ul {
    list-style-type: numbers;
}

.why-us ul li {
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    color: #fff;
    text-align: justify;  
}




/* fixed social*/

#fixed-social {
    position: fixed;
    top: 190px;
    z-index: 999;
}

#fixed-social a {
    color: #fff;
    display: block;
    height: 40px;
    position: relative;
    text-align: center;
    line-height: 40px;
    width: 40px;
    padding-top: 10px;
    margin-bottom: 1px;
    z-index: 2;
}

#fixed-social a:hover>span {
    visibility: visible;
    left: 41px;
    opacity: 1;
}

#fixed-social a span {
    line-height: 40px;
    left: 60px;
    position: absolute;
    text-align: center;
    width: 120px;
    visibility: hidden;
    transition-duration: 0.5s;
    z-index: 1;
    opacity: 0;
}

.fixed-facebook {
    background-color: #1877f2;
}

.fixed-facebook span {
    background-color: #1877f2;
    font-family: Arial, Helvetica, sans-serif;
}
  
.fixed-linkedin {
    background-color: #1877f2;
}

.fixed-linkedin span {
    background-color: #1877f2;
    font-family: Arial, Helvetica, sans-serif;
}

/*end fixed social*/
.link {
    color: #fff;
    text-decoration: underline;
}

a.link:hover {
    text-decoration: none;
    color: #1d60ff;
}

a.link2:link {
    color: #fff;
    text-decoration: none;
}

a.link2:hover {
    text-decoration: underline;
}

.why-us2{
    padding: 10px 15px;
}

.why-us2 h1{
   color: #ffc40c;
    font-family: "Raleway", sans-serif;
    text-align: left;
    font-size: 44px;
    font-weight: 700;
    line-height: 140%;
   
}


.why-us2 h2 {
    color: #fff;
    font-family: "Raleway", sans-serif;
    text-align: left;
    font-size: 29px;
    font-weight: 700;
    line-height: 140%;
} 



.why-us2 p {
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    color: #fff;
    text-align: justify;  
}

.why-us2 ul {
    list-style-type: numbers;
}

.why-us2 ul li {
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    color: #fff;
    text-align: justify;  
}


/*--------------------------------------------------------------
top_arrow
--------------------------------------------------------------*/
.top_arrow {
    width: 45px;
    height: 45px;
    position: fixed;
    display: flex;
    right: 1%;
    bottom: 2.5%;
    transition-duration: 1s;
    font-size: 20px;
    cursor: pointer;
    color: #fff;
    z-index: 9999;
    background-color: #ffc40c;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.top_arrow:hover {
    background-color: #fff;
    color: #ffc40c;
    border: 1px solid #ffc40c;
}

/* bg clr start */

.bg_img1{
    background-image: url('../images/e-commerce-accueil.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 106vh;
}

.bg_img2{
    background-image: url('../images/boutique-en-ligne-yellowmarkets.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

.bg_img3{
    background-image: url('../images/marche-local-en-ligne.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 106vh;
}

.bg_img4{
    background-image: url('../images/partenaires-numeriques.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

.bg_img5{
    background-image: url('../images/pourquoi-les-marches-jaunes.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

.bg_img7{
    background-image: url('../images/e-commerce-accueil.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg_clr1 {
        background-color: #000000e3;
        border: 4px solid #ffc40c;
        padding: 19px 23px;
        border-radius: 20px ;
}

.bg_clr2 {
    background-color: #000000a8;
}

.bg_clr3 {
     background-color: #000000a8;
     border-radius: 20px;
}

.bg_clr5 {
    background-color: #000;
}



/* bg clr start end */

.form {
    width: 100%;
    margin: 1% auto;
}

.pdg{
padding: 40px 0;
}
/*--------------------------------------------------------------
Radio button
--------------------------------------------------------------*/

.switch9 {
    width: 260px;
    height: 34px;
    float: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    color: #fff;
    margin-top: 1% !important;
    margin-left: 3%;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    float: left;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.g_cap {
    display: none;
}


/* <!-----radio button End------> */


/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/

.ftr_col_sm2 {
    width: 48%;
    margin: 1%;
    float: left;
}

.ftr_txt1 {
    color: #fff;
    font-size: 14px;
    text-align: center;
    font-weight: 400;
    font-family: "Raleway", sans-serif;
    padding: 1.5% 0%;
    margin: 0;
}

.ftr_txt2 {
    text-align: right;
}

/* Min Height */
.m-height1{
    min-height: 586px;
}

.m-height2{
    min-height: 570px;
}

.m-height3{
    min-height: 586px;
}

.m-height4{
    min-height: 620px;
}

/* Min Height */

/* Around 1507×693 — e.g., wide but short viewports */
@media (min-width: 1440px) and (max-width: 1560px) and (max-height: 720px) {
    .bg_img2 {
        height: 115vh;
    }
}

@media only screen and (max-width:1600px) {
    .m-height1 {
    min-height: 0px !important;
}

.m-height2 {
    min-height: 0px !important;
}

.m-height3{
    min-height: 0px !important;
}

.m-height4{
    min-height: 0px !important;
}

.m-height5{
    min-height: 0px !important;
}
}
/* Min Height */

@media only screen and (max-width:1500px) {
    .bg_img1{
    background-image: url('../images/e-commerce-accueil.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: min-content;
}

    .bg_img2{
    background-image: url('../images/boutique-en-ligne-yellowmarkets.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: min-content;
}

.bg_img3{
    background-image: url('../images/marche-local-en-ligne.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: min-content;
}

.bg_img4{
    background-image: url('../images/partenaires-numeriques.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: min-content;
}

.bg_img5{
    background-image: url('../images/pourquoi-les-marches-jaunes.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   height: min-content;
}
.m-height1{
    min-height: 0px;
}

.m-height2{
    min-height: 0px;
}

.m-height3{
    min-height: 0px;
}

.m-height4{
    min-height:0px;
}

}

@media only screen and (max-width:1260px) {
    .top {
        width: 94%;
    }
    .top2 {
        width: 94%;
    }

    .top3 {
        width: 94%;
    }
    
    .col_em {
        float: right;
        margin: 3%;
    }
  
}

@media only screen and (max-width:1200px) {
    .book_now a {
        padding: 16px 29px;
    }
}

@media only screen and (max-width:1140px) {
    
    .call_em {
        float: none;
        margin: 0% auto;
    }
}

@media only screen and (max-width:1000px) {

    .book_now {
        display: none;
    }
    .navbaar {
        width: 100%;
        background-color: transparent;
    }
    .top {
        width: 98%;
    }
    .navflex{
        flex-direction: column;
    }

    #cssmenu>ul>li :before {
        display: none;
    }
}

@media only screen and (max-width:900px) {
    .ftrflex{
        display: block;
    }
        #fixed-social {
        right: 0;
    }
}


@media only screen and (max-width:860px) {
   #cssmenu #menu-button {
    background-color: #000000a8;
   }
    .logo {
        float: none;
        margin: 0% auto;
        padding: 1% 0%;
    }
    .navbaar {
        width: 100%;
        background-color: #ffff;
        margin: 0;
    }
    .ftr_col_sm2 {
        width: 98%;
    }
    .ftr_txt2 {
        text-align: left;
    }
    .ftr_txt1 {
        padding: 0.5% 0%;
    }
    .col_sm2 {
        width: 98%;
    }
    .col_sm3 {
        width: 98%;
    }
    .col_sm4 {
        width: 98%;
        padding: 2%;
    }
    .col_sm8 {
        width: 96%;
    }
    .col_sm8_2{
        width: 96%;
    }
    .col_sm88 {
        width: 96%;
    }
    .col_sm9 {
        width: 100%;
    }
    .col_sm99 {
        width: 100%;
        
    }
    
    .ftr_lt_txt {
        padding: 5px 0px;
    }
    .txt_right {
        text-align: left;
    }
    .top2 {
        width: 98%;
    }

    .top3 {
        width: 98%;
    }
    
}

@media only screen and (max-width:760px) {
    .logo .img {
        width: 100%;
    }
}

@media only screen and (max-width:600px) {
    
    .logo {
        padding: 1%;
    }
    .col_sm88 {
        width: 100%;
    }
    .col_sm8_2{
        width: 100%;
    }
    .our_team {
        width: 100%;
    }
    .col_sm99 {
        width: 100%;
    }
    
    .col_sm11 {
        display: none;
    }
    .col_sm12 {
        width: 38%;
        margin: 1% auto;
        float: none;
    }

    .responsive-accordion-default.responsive-accordion li .responsive-accordion-head i {
    position: absolute;
    top: 8px;
    left: 4px;
    color: #fff;
}
}

@media only screen and (max-width:360px) {
 .responsive-accordion-default.responsive-accordion li .responsive-accordion-head i {
    position: absolute;
    top: 8px;
    left: 0px;
}
}