/*==================== GOOGLE FONTS ====================*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Poller+One&display=swap');

/*==================== VARIABLES CSS ====================*/
:root {
    --header-height: 3rem;

    /*========== Colors ==========*/
    /* Change favorite color */
    --hue-color: 58; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/

    /* HSL color mode */
    --first-color: hsl(var(--hue-color), 71%, 73%);
    --first-color-second: hsl(var(--hue-color), 69%, 61%);
    --first-color-alt: hsl(var(--hue-color), 57%, 53%);
    --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
    --title-color: #E5E5E5;
    --text-color: hsl(0deg 0% 88.03%);
    --text-color-light: #FFFF;
    --input-color: hsl(var(--hue-color), 70%, 96%);
    --body-color: hsl(0, 0%, 15%);
    --container-color: #fff;
    --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);
    --p-font-color:#B2B2B2;
    --success-color:hsl(var(--hue-color), 11%, 16%);
    --success-background-color:hsl(var(--hue-color), 11%, 39%);
    --error-background-color:#DFCBCB;
    --error-color:#BB1C1C;
    /*========== Font and typography ==========*/
    --body-font: "Montserrat", sans-serif;

    /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
    --big-font-size: 4rem;
    --h1-font-size: 2rem;
    --h2-font-size: 1.30rem;
    --h3-font-size: 3.5rem;
    --h5-font-size:2rem;
    --normal-font-size: 62.5%;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
    --p-font:1.4rem;
    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;

  

    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;
      /*========== LAYOUT==========*/
      /* --body-max-width:700px; */
    /*========== Icone ==========*/
    --icon-reseaux-width:3.5rem;
    --icon-reseaux-height:55px;
}

/* Font size for large devices */
@media screen and (min-width: 1200px) {
    :root {
      --big-font-size: 6.4rem;
        --h1-font-size: 2.5rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 3.5rem;
        --normal-font-size: 62.5%;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
        --body-max-width:120rem;
        --p-font:1.6rem;
        --h5-font-size:2.9rem;
            /*========== Icone ==========*/
    --icon-reseaux-width:5.5rem;
    --icon-reseaux-height:3.9rem;


    }
}

/*========== Variables Dark theme ==========*/


/*========== Button Dark/Light ==========*/


/*==================== BASE ====================*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
p.hidden{
color: #B2B2B2;
font-size: 1.6rem;
}
html {
  scroll-behavior: smooth;
  font-size: var(--normal-font-size);

}

body {
  margin: 0 ;
  font-family: var(--body-font);
  background-color: var(--body-color);
  color: var(--text-color);
}

h1, h2, h3, h4 {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
}
p{
  font-size: var(--p-font);
  }
ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}
section.section_title h1{
font-size: 2.6rem;
margin: 0px;
color: #EBE789;
font-weight: 700;
text-align: center;
padding: 3.5rem 0;

}
section.section_title_left h1{
  font-size: 2.6rem;
  margin: 0px;
  color: #EBE789;
  font-weight: 700;
  padding: 3.5rem 0;
  
  }
#title{

  color: #EBE789;
  font-weight: 700;
  padding: 3.5rem 0;
  
  }

@media screen and (min-width: 700px) {
  section.section_title h1{
    font-size: 3.6rem;
    margin: 0px;
    padding: 6rem 0;

  }
  section.section_title_left h1{
    font-size: 3.6rem;
    margin: 0px;
    padding: 6rem 0;
    text-align: center;
    }

}
/*==================== REUSABLE CSS CLASSES ====================*/
.section {
  padding: 2rem 0 4rem;
}

.section__title {
  font-size: var(--h1-font-size);
  color: var(--title-color);
}

.section__subtitle {
  display: block;
  font-size: var(--small-font-size);
  margin-bottom: var(--mb-3);
}

.section__title, 
.section__subtitle {
  text-align: center;
}

/*==================== LAYOUT ====================*/
.wrapper  {
  max-width: var(--body-max-width);
  margin: 0 auto;
}
@media screen and (max-width: 700px) {
  .wrapper  {

    padding:0 1rem ;
  }
}

.grid {
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: var(--body-color);
}

/*==================== NAV ====================*/
/*==================== NAVBAR HEADER ====================*/
header {
  background-color: none;
  /* padding: 2.5em; */
  margin:  4.5rem 0;
}

/* .Reseaux  a{
  width: var(--icon-reseaux-width);  
  height: var(--icon-reseaux-height);
  } */
  div.reseaux{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem;
  } 

  @media screen and (min-width: 700px) {
 .contact_section_content   div.reseaux{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      gap: .5rem;
    } 
  }
 /* div.reseaux  .item:nth-child(1){display: block;background: url("../asset/facebook-logo.svg"); width:7.9rem ;height:7.9rem;align-self: flex-end;} */
 div.reseaux  .item:nth-child(2){display: block;background: url("../asset/instagram.svg"); width:8rem ;height:8rem;align-self: flex-end;}
 div.reseaux  .item:nth-child(1){display: block;background: url("../asset/youtube-logo.svg"); width:7.9rem ;height:5.4rem;}
 div.reseaux  .item:nth-child(3){display: block;background: url("../asset/telegram-logo.svg"); width:8rem ;height:8rem;}

.hero{
  background: url("images/herobg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

nav {
  position: fixed;
  right: -100%;
  top: 0;
  width: 55%;
  background: rgb(64, 64, 64);
  height: 100vh;
  z-index: 2;
  transition: right .5s ease-in-out;
  padding: 4.6em;
}


.menu-btn {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.open {
  right: 0%;
}
.close {
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-bottom: 6.6em;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
/*   margin:1em; */
}
.fondamental1_section_content p{
  font-size: var(--p-font);
  color: var(--p-font-color);
  font-family: poppins;
  font-style: normal; font-weight: 400;
  max-width: 62.9rem;
}
a.logo {
  color: #0460BC;
  font-size: 2.2rem;
  font-weight: bold;
}
a {
  text-decoration: none;
}
ul {
  list-style-type: none;
  color:var(--p-font-color) ;

}
header ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3.5em;
}

ul li a {
  font-size: 1.8rem;
  color: #DDDD;
}

ul li a.active {
  font-weight: bold;
}

ul li a:hover {
  color: var(--first-color);

}

a.cart {
  background-color: none;
  display: flex;
  gap: 1rem;
  align-items: center;
  color: var(--text-color-light);
  font-size: 1.8rem;
  padding: 1rem;
  border-color:var(--first-color) ;
  border-radius: .4rem;
  border-style: solid;
  font-weight: 700;
}
a.cart:hover p{
  color: black;
}
a.cart p {
  margin: 0;
  font-weight: 700;

}

a.cart:hover {
  background-color: var(--first-color-lighter);

}

.mobile-cart-menu {
  display: flex;
  align-items: center;
  gap: 2em;
}
@media screen and (max-width: 650px) {
.cart{
  display: none;
}
ul li a {
  font-size: 1.8rem;
  color: #ffffffdd;
  font-weight: 600;
}
.nav-item{
  display: none;
  }
  .mobile-cart-menu .hidden ,.cart{
    display: none;
    }
}
@media screen and (min-width: 800px) {
  .menu-btn, .close {
      display: none;
  }
  .nav-itemi{
    display: none;
    }

  nav {
      position: unset;
      height: auto;
      background: none;
      padding: 0;
      width: auto;
  }
  header ul {
      flex-direction: row;
  }
}

.wrapper{
  margin: 0 auto;
  max-width: var();
}

/* show menu */


/* Active link */


/* Change background header */


/*==================== HOME ====================*/
.Reseaux .item svg{
  width: var(--icon-reseaux-width);  
  height: var(--icon-reseaux-height);
  }
.Reseaux  a{
  width: var(--icon-reseaux-width);  
  height: var(--icon-reseaux-height);
  }
section.hero_section h3{
  color:#A586D9 ;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: var(--h3-font-size);
  text-align: center;
  width: 100%;
  color: #A586D9;
  max-width: 350px;

}
@media screen and (min-width: 1200px) {
  .hero_section_content .right_col .item{
    display: none;
  }

}

.hero_section_content .right_col .item{background: url("images/hero-img2-mobile.png"); width:31.1rem ;height:34.3rem }

.hero_section_content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: baseline;

}

.hero_section_content .right_col {
  display: flex;
  flex-direction: column;
  gap: 6.3rem;
}
.hero_section_content .right_col .top {
  display: flex;
  gap:5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 600px) {
  .hero_section_content{
    display: flex;
    flex-direction: column-reverse;
    gap: 6rem;
  }
.hero_section_content .item:nth-child(2){background: url("images/hero-img2-mobile.png"); width:31.1rem ;height:34.3rem ;align-self: flex-end;}
}
@media screen and (min-width: 600px) {
  .hero_section_content .right_col {
    display: flex;
    flex-direction: column;
    gap: 6.3rem;
  }
  .hero_section_content .item:nth-child(1){background: url("images/hero-img.png"); width:62.7rem ;height:68.9rem;}
  .hero_section_content{
    display: flex;
    flex-direction: column-reverse;
    gap: 6rem;
  }
}
@media screen and (min-width: 1200px) {
  section.hero_section .left_col{
    display: flex;
    flex-direction: row;
  }
  section.hero_section{
    max-height: 75.6rem;

  }
  .hero_section_content{
    display: flex;
    flex-direction: row;
    gap: 1rem;

  }
  section.hero_section h3{
    color:#A586D9 ;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: var(--h1-font-size);
    width: 100%;
    color: #A586D9;
    text-align: right;
  }
  .hero_section_content .right_col {
    display: flex;
    align-items: flex-end;
  }
  .hero_section_content .item:nth-child(2){background: url("images/hero-img2-mobile.png"); width:31.1rem ;height:34.3rem ;align-self: flex-end;}

  .hero_section_content .item:nth-child(1){background: url("images/hero-img.png"); width:62.7rem ;height:68.9rem;justify-content: flex-end;}
  .hero_section_content .right_col .top {

    align-items: flex-end;
  }
}


/*==================== ABOUT ====================*/


.about_section_content .left_col .item{
    background: url("images/about-img.jpg"); width:38.5rem ;height:54rem ;
  object-fit: cover;
}
@media screen and (max-width: 600px) {
  .about_section_content .left_col .item{
    background: url("images/about-img-mobile.jpg"); width:34.7rem ;height:36.6rem ;
  object-fit: cover;
}
}
@media screen and (min-width: 600px) {
  .about_section_content .left_col .item{
    background: url("images/about-img-tablet.jpg"); width:52.0rem ;height:54.8rem ;
  object-fit: cover;
}
}
.about_section_content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 6rem 0;
}
.about_section_content .right_col h3 {
  font-size: 3.2rem;  
  font-weight: 200;
  text-transform: uppercase;
  color: var(--text-color-light) ;
  }
.about_section_content .right_col h2{
  font-size: var(--big-font-size);  
  font-weight: 700;
  text-transform: uppercase;
  color: #fff ;
  }
  .about_section_content .right_col {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 4.5rem;
  }
  .about_section_content .mobile-cart-menu{align-self: center;}



  @media screen and (min-width: 1200px) {
    .about_section_content .right_col{
      display: flex;
      flex-direction: column;
      height: 52rem;
      justify-content: center;
      gap: 2rem;    }
    .about_section_content .left_col .item{
       width:52rem ;height:54rem ;
      
    }
    .about_section_content{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap:20rem;
      text-align: left;

    }

  .about_section_content .right_col .mobile-cart-menu{
  align-self: flex-end;
  }

}

/*==================== OUTILS ====================*/
.outils_section{
  background-color: #1C1C1C;
  height: 27.3rem;
  align-items: center;
  /* justify-content: space-between; */
  display: flex;

}
.outils_section_content .outils{
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: space-between; */
  /* gap:19rem */

}
@media screen and (min-width: 1200px) {
  .outils_section_content .outils{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap:19rem;
  
  }
  .outils .item:nth-child(1){  background: url("images/logo-trading-view.png"); width:18.9rem ;height:9.5rem ;}
  .outils .item:nth-child(4){ background: url("images/logo-mt4.png"); width:11.9rem ;height:11.4rem ;}

}

.outils .item:nth-child(2){background: url("images/logo-mt4.png"); width:11.9rem ;height:11.4rem ;}
.outils .item:nth-child(3){background: url("images/logo-trading-view.png"); width:18.9rem ;height:9.5rem ;}

/*==================== QUALIFICATION ====================*/



/*==================== SERVICES ====================*/
.service_section_section{
  background-color: #3D3D3D;
}

.service_section_content .left_col .item:nth-child(1){  background: url("images/service-img-mobile.png"); width:38.3rem ;height:21rem ; object-fit: cover;background-repeat: no-repeat;}
.service_section_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.9rem 0;
}
.service_section_content .right_col{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap:4.5rem;
}
.service_section_content .mobile-cart-menu{align-self: center;}
.service_section_content .left_col .item:nth-child(1){  background: url("images/service-img-mobile.png"); width:35rem ;height:21.7rem ;}

@media screen and (min-width: 1200px) {
  .service_section_content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:16rem;
    justify-content: space-between;
    text-align: left;
  }
  .service_section_content .mobile-cart-menu{align-self: flex-end;}

  .service_section_content .left_col .mobile-cart-menu{align-self: flex-end;}

  .service_section_content .left_col .item:nth-child(1){  background: url("images/service-img.png"); width:52.5rem ;height:31.9rem }

  .service_section_content .right_col .item:nth-child(1){  background: url("images/GOLD_STREET_SERVICE-logo.png"); width:36.5rem ;height:13.3rem ;}
}

/*==================== financial ====================*/


.financial_section_content .left_col .item:nth-child(1){  background: url("images/financial-img.png"); ; width:81.5rem ;height:31.9rem  ; object-fit: cover;background-repeat: no-repeat;}
.financial_section_content {
  padding: 6rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.financial_section_content .right_col{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap:4.5rem;
  /* max-width:365px ; */
}

.financial_section_content .mobile-cart-menu{align-self: center;}
.financial_section_content .left_col .item:nth-child(1){  background: url("images/financial-img-mobile.png"); width:35rem ;height:21.7rem ;}

@media screen and (min-width: 1200px) {
  .financial_section_content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16rem;
    justify-content: space-between;
    text-align: left;
  }
  .financial_section_content .mobile-cart-menu{align-self: flex-end;}

  .financial_section_content .left_col .mobile-cart-menu{align-self: flex-start;}

  .financial_section_content .left_col .item:nth-child(1){  background: url("images/financial-img.png");  width:52.4rem ;height:34rem  ; object-fit: cover;background-repeat: no-repeat;}

  .financial_section_content .right_col .item:nth-child(1){  background: url("/frontend/asset/financial-logo.svg"); width:36.5rem ;height:13.2rem ; background-repeat: no-repeat;}
}


/*==================== Testimony====================*/

.testimony_section_content{
padding:0  auto;
  display:flex;
  flex-wrap:wrap;
   display:flex;
  justify-content:center;
  gap:10rem;
  align-items: center;
}
.testimony_section_content .item {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items: center;
  padding:1.7rem;
}
.testimony_section_content .item {
  font-size:1.5rem;
  width: 33.2rem; 
  height: 41.8rem; 
  background-color:#3B3B3B;
  border-radius:.8rem;
  
}
.testimony_section_content .top{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  align-items:center;
}
.testimony_section_content .top h2{
  font-size:3.2rem;
  font-family:poppins;
  font-weight:blod;
}
.testimony_section_content .top span{
  font-size:1.8rem;
  font-family:poppins;
  font-weight:regular;
  color:var(--title-color);
}
.testimony_section_content .item p{
  font-size:1.5rem;
  font-family:poppins;
  font-weight:regular;
  color:var(--title-color);
}
.testimony_section_content .item p::before{
content:'"';
  font-size:4rem;
  font-family:"Poller One", serif;
  align-self:start;
}
.testimony_section_content .item p:before {
  content: "“";
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  /* font-size: 64px; */
  /* identical to box height */
  text-align: center;
  color: var(--p-font-color);
}
.testimony_section_content .item::after{
  content: "“";
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 64px;
  /* identical to box height */
  text-align: center;
  color: var(--p-font-color);
  align-self:end;
  
}
.testimony_section_content .item:nth-child(1) .item-img{background: url("images/testimoni-img1.png"); width:7.8rem; height: 7.8rem; object-fit:fill;  background-position: center;
  background-repeat: no-repeat; border-radius:100px}
.testimony_section_content .item:nth-child(2) .item-img{background: url("images/testimoni-img3.png"); width: 7.8rem; height: 7.6rem ; object-fit:fill;  background-position: center;
  background-repeat: no-repeat; border-radius:100px}
  .testimony_section_content .item:nth-child(3) .item-img{background: url("images/testimoni-img2.png"); width: 7.8rem; height: 7.6rem ; object-fit:fill;  background-position: center;
    background-repeat: no-repeat; border-radius:100px}
/*==================== REVIEWS ====================*/
/* .reviews_section_content .item-img:nth-child(1){background: url("images/testimoni-img1.png"); width: 7.8rem; height: 7.6rem ; object-fit:fill;  background-position: center;
  background-repeat: no-repeat; border-radius:100px} */
  .reviews_section_content{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: center; 
    text-align: center;
    margin:  16rem 0;
  }

  .reviews_section_content .left_col .item:nth-child(1){  background: url("images/ecrans-reviews-mobile.png"); width:29.8rem ;height:13.8rem ;}
  .reviews_section_content .right_col{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center
  }
  .reviews_section_content .right_col .mobile-cart-menu{
    align-self: center;
  }
  @media screen and (min-width: 1200px) {
    .reviews_section_content {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap:20rem;
      justify-content: center;
      text-align: left;
    }
    .reviews_section_content .left_col .item:nth-child(1){  background: url("images/ecran-reviews.png"); width:47.5rem ;height:22.2rem ;}
    .reviews_section_content .right_col .mobile-cart-menu{
      align-self: flex-end;;
    }
  }
  .reviews_section_content .right_col h2{
    font-weight: 600;
    font-size: var(--h2-font-size);
    color: var(--first-color);
  }

/*==================== MEDIA QUERIES ====================*/
/* For small devices */


/* For medium devices */


/* For large devices */

/*========================================== SERVICE PAGE ==========================================*/

/*==================== TELEGRAM SECTION ====================*/

/* LAYOUT */
section.telegram_section .telegram_section_content{
  margin: 0 auto;
  margin-bottom: 12rem;

}
section.telegram_section .telegram_section_content .left_col{
  display: flex;
}

section.telegram_section .telegram_section_content h2{
font-size: var(--h3-font-size);
margin-bottom: 2.3rem;
font-weight: 700;
}

@media screen and (min-width: 1100px) {

  section.telegram_section .telegram_section_content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 3rem;
  }
  section.telegram_section .telegram_section_content .left_col{
    display: flex;
    flex-direction: column;
    justify-content: baseline;
    align-items: center;
    width: 59rem;
    gap: 6.7rem;
  }
  .telegram_section_content .right_col {
    background: url("images/telegram-img.png"); width:59rem ;height:44.6rem ;
  }
}

@media screen and (max-width: 1100px) {
  .telegram_section_content .right_col {
    margin: 0 auto;
    background: url("images/telegram-img-mobile.png"); width:34rem ;height:26rem ;
  }
  section.telegram_section .telegram_section_content {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 6.7rem;
  }
    section.telegram_section .telegram_section_content{

        max-width: 65rem;

    }
}

/*==================== Rapport Fondamental 2 ====================*/
.fondamental2_section_content{
  padding:0  auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
  align-items: center;
  margin: 6rem 0;
}
.fondamental2_section_content .item{
  width:380px;
  height:35.6rem;
  border-radius: 8px;
  object-fit:fill;
  color: #3B3B3B;
}
.fondamental2_section_content .item h4{
  color: #000000;
  font-size: 1.7rem;
  font-weight: 700;

}
.fondamental2_section_content .item  p{
  color: #3B3B3B;
  font-size: 1.7rem;
  font-weight: 500;
}

.fondamental2_section_content .item:nth-child(1){
  background: url("images/tweedeck.png");
  
}
.fondamental2_section_content .item:nth-child(2){
  background: url("images/volatilites.png");
}
.fondamental2_section_content .item:nth-child(3){
  background: url("images/cot.png");
}
@media screen and (max-width: 600px) {
  .fondamental2_section_content .item:nth-child(3){
    display: none;
  }
}

article.item {
  display:flex;
  justify-content:center;
  align-items:center;
}
article.item .text{
  display:flex;
  text-align:center;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background: rgba(238, 238, 238, 0.84);
  padding: 2rem ;

}
/*==================== Rapport Fondamental 1 ====================*/
.fondamental1_section_content{
  display: flex;
  flex-direction: column;
  gap:1rem;

}  
.fondamental1_section_content article{
  display:flex ;
  text-align:left;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background-color: #3B3B3B;
}
.fondamental1_section_content article .text{
  padding:2.8rem ;

}
.fondamental1_section_content article p{
  font-family: "poppins";
  font-size:var(--p-font) ;
}
.fondamental1_section_content article h4{
  font-family: "Montserrat";
  font-size:var(--h2-font-size) ;

}

@media screen and (max-width: 1200px) {
  .fondamental1_section_content #A .item  {background: url("images/graph2 4.png");width:34.8rem ;height: 14.9rem;

  }
  .fondamental1_section_content #B .item  {background: url("images/graph2 4 (1).png");width:34.8rem ;height: 14.9rem;
  }
.fondamental1_section_content article{
  max-width:34.8rem ;
  gap: 2rem;
}
.fondamental1_section_content{
  display: flex;
  flex-direction: column;
  gap:1rem;
  justify-content: space-between;
  align-items: center;
} 

}


@media screen and (min-width: 650px) {
  /* article{
    width:34.8rem ;
    height: 41.7rem;
  } */

  .fondamental1_section_content  article .item {
    display: block;
    width:204.6rem ;
    height: 30.2rem;
  }

  .fondamental1_section_content {
    display:flex ;
    text-align:left;
    flex-direction:row;
    justify-content:center;
  }
}
@media screen and (min-width: 1200px) {
  article {
    width:100%;
    height: 30.5rem;
  }
  .fondamental1_section_content {
    display:flex ;
    text-align:left;
    flex-direction:column;
    justify-content:space-around;
  }
  .fondamental1_section_content article{
    display:flex ;
    text-align:left;
    flex-direction:row;
    justify-content:space-between;
    gap: 10rem;
  }
  .fondamental1_section_content article .text{
    display:flex ;
    text-align:left;
    flex-direction:column;
    justify-content:space-between;
  }
  .fondamental1_section_content article .text h4{
    font-size:var(--h1-font-size);
    font-weight: bold;
  }

  .fondamental1_section_content #A .item {
    display: block;
    background: url("images/tweedeck 1 (8).png");
    width:56.9rem;
    height: 30.2rem;
  }
  .fondamental1_section_content #B .item {
    display: block;
    background: url("images/tweedeck 2.png");
    width:44.9rem;
    height: 30.2rem;
  }

}
/*==================== Rapport  ====================*/


.rapport_section_content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-height: 100%;
}
.rapport_section_cart{
  display: flex;
  flex-direction: column;
  gap:1.7rem;
}
.rapport_section_content .left{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  max-width: 59rem;
}
.rapport_section_content .left h2{
  font-size: var(--h1-font-size);
  font-weight: 700;
}
.rapport_section_content .left p{
  font-size: var(--p-font);
  font-weight: 400;
}

.rapport_section_content p.cta{
  color:#EBE789 ;
  font-weight:700;
}


/* TABLET */
@media screen and (max-width: 600px) {
  .rapport_section h1{
    text-align: left;
    font-size: 2rem;
  }
  .rapport_section_content #B   {
    width: 35.8rem;
    height: 25rem;
  }
  .rapport_section_content  {
    max-width: 36rem;
    display: flex;
    margin: 0 auto; 
    padding: 0 ;  
    gap: 3rem;
  }
  .rapport_section_content .left {
    gap: 3rem;
  }
}
@media screen and (min-width: 650px) {
  .rapport_section_content{
    flex-direction: column-reverse;

  }
  .rapport_section_content   {
    gap: 2rem;
    text-align: left;
  }
  .rapport_section_content .left  {
    gap: 1rem;
    max-width:66.8rem ;
  }
  .rapport_section_content #B {
    display: flex;
    width: 63.2rem;
    height: 44rem;
    padding: 0;
  }
}

@media screen and (min-width: 1200px) {
.rapport_section_content #A.item  {
  display: none;
}
.rapport_section_content{
  display: flex;
  gap:14px;
  flex-direction: row;
  text-align: left;

  }

.rapport_section_content #B {
  /* background-image: url("images/video.png"); */
  display: flex;
  width: 63.2rem;
  height: 44rem;
  object-fit: fill;
  align-self: center;
  background-position: center;
  padding: 0;
}
}


/*==================== PLANS  ====================*/
.plan_section_content{
  display: flex;
  flex-direction: column;  
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 12.1rem;
    } 



.plan_section_content .item .body{
  display: flex;
  flex-direction: column;
  margin:0 auto;
  justify-content: space-around;
  text-align: center;
  gap:2rem;
  padding: 5rem;
}
.MoyenDePayement{
  padding:3rem 0;
}

.plan_section_content .item .title{
  color:#E5E5E5;
  text-align: center;
  font-family: Poppins;
  font-size: var(--h5-font-size);
  font-style: normal;
  font-weight: 700;
}

.plan_section_content .prix {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
  padding: 0 2rem;
} 

.plan_section_content .prix h5{
  color:#E5E5E5;
  font-family: Poppins;
  font-size: var(--p-font);
  font-weight: 700;
} 
/* BUTTON */
.plan_section_content a,.plan_section_content a {
  color:  #EBE789;
  text-decoration:none;
  font-family: poppins;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 15px */
}
.plan_section_content a:hover,.plan_section_content a:hover {
  color:  #CFC829;
  text-decoration:none;
  font-family: poppins;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 15px */
}
.plan_section_content .item:nth-child(2) {
  background-color: #1C1C1C;
  box-shadow: 18px 13px 4px #242424
} 

.plan_section_content .item:nth-child(2) .title{
    color: #EBE789;
} 
.plan_section_content .item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color:#424242;
  max-width: 33rem;
  border-radius: 8px;
  height: 100%;

}
@media screen and (min-width: 1100px) {
  .plan_section_content{
    display: flex;
    flex-direction: row;  
    gap: 1rem;
    justify-content: center;
    align-items: center;
      } 

.plan_section_content .item:nth-child(2) {
  height: 50rem;
  max-width: 43.6rem;

  justify-self: flex-start;
} 

}


/*==================== AVANTAGE  ====================*/
.avantage_section_content{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* flex-direction: column; */
  align-items: center;
  gap:3rem;
} 
.avantage_section_content .item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  text-align: center;
  background-color:#2E2E2E;
  max-width: 36rem;
  height:60.6rem ;
  padding: 1.5rem;
} 
.avantage_section_content .item .svg{
  width: 15.6rem;
  height:15.3rem ;
}
.avantage_section_content .item:nth-child(1) .svg{
  background: url("/frontend/asset/avantagebank.svg");
  background-repeat: no-repeat;

} 
.avantage_section_content .item:nth-child(2) .svg{background: url("/frontend/asset/avantagehead.svg"); 

  background-repeat: no-repeat;
} 
.avantage_section_content .item:nth-child(3) .svg{background: url("/frontend/asset/avantagebook.svg"); 

background-repeat: no-repeat;
} 
.item-footer a {
  color:  #EBE789;
  text-decoration:none;
  font-family: poppins;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 15px */
}
.item-footer a:hover {
  color:  #CFC829;
  text-decoration:none;
  font-family: poppins;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 15px */
}
@media screen and (min-width: 1100px) {
  .avantage_section_content{
    display: flex;
    flex-direction: row;  
    gap: 1rem;
    justify-content: center;
    align-items: center;
      } 
  .avantage_section_content p{
    font-size: 1.4rem;
    color: #F1F0EC;
      } 
}
/*==================== Hero DATANALYSE ====================*/
  section.datanalyse_hero_section, section.hero_section{
    position: relative; 
    max-height: 100%;
    object-fit: fill;
    background-position: center;
    background-repeat: no-repeat;
    padding: 5rem 0;
  }
  
  section.datanalyse_hero_section::before ,section.hero_section::before{
      content: ""; /* Obligatoire pour les pseudo-éléments */
      position: absolute; /* Le pseudo-élément sera positionné par rapport à la section parente */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* max-height: 594px; */
      background: url("https://images.unsplash.com/photo-1698847626251-efac0f7517cc?q=80&w=2160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
      opacity: 1;
      object-fit: fill;
      filter: blur(3rem);
      background-position: center;
      z-index: -1; /* Placez-le en dessous du contenu de la section */
  }
  .datanalyse_hero_section_content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  .datanalyse_hero_section p {
    font-weight: 600;  
    max-width: 50rem;
    text-align: center;
    }
  .datanalyse_hero_section p span{
  color:#EBE789 ;

  }

  .datanalyse_hero_section .svg{
    background: url("/frontend/asset/datanalyse-logo.svg");
    width:70rem ;
    height: 23.7rem;

  }
  @media screen and (min-width: 600px) {
    .datanalyse_hero_section_content{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5rem;
    }
    .datanalyse_hero_section_content .top{
      display: flex;
    }
    .datanalyse_hero_section_content .etoile{
      background: url("/frontend/css/images/etoile.png");
      width: 22.8rem;
      height: 4.4rem;
    }
  .datanalyse_hero_section_content .svg2{
    background: url("/frontend/asset/logo-before.svg");
    width: 8.6rem;
    height: 5.9rem;
  }
}
  section.datanalyse_hero_section h3{
    color:#A586D9 ;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: var(--h3-font-size);
    text-align: center;
    width: 100%;
    color: #A586D9;
    max-width: 350px;
  
  }
  @media screen and (max-width: 600px) {
    .datanalyse_hero_section .svg{
      background: url("/frontend/asset/datanalyse-logo-mobile.svg");
      width:9.3rem ;
      height: 10.9rem;
  
    }
    .datanalyse_hero_section .item{
      background: url("images/datanalyse-img-mobile.png");
      width:35.1rem ;
      height: 24.5rem;
  
    }
  }


  /* CONTACT */
.contact_section_content {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  text-align: center;
  margin-bottom: 2rem;
}
@media screen and (min-width: 1200px) {
  .contact_section_content  {
    display: flex;
    flex-direction: column;
    text-align: left;

    gap: 8rem;
    margin-bottom: 2rem;
  }
}
.contact_section_content h4{
    color: #FFF;
    font-family: "Poppins";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0px;
}
.contact_section_content p{
  color: #B2B2B2;
  font-family: "poppins";
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0px;

}
.contact_section_content .right_col{
  background-color: #3E3D33;
  color:#FFF ;
  font-family: "poppins";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0px;
  padding:4rem;
  text-align: left;
}
.contact_section_content .right_col form{
  display: flex;
  flex-direction: column;
  gap:1rem ;
align-items: center;
justify-content: center;}
form .element{
  display: flex;
  flex-direction: column;
  gap:1rem ;
  padding: 2rem;
}
form .element input{
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 50px;
  border-radius: .6rem;
  border: none;
  background-color:#D9D9D9 ;
}
form .element textarea{
  display: flex;
  flex-direction: column;
  border-radius: .6rem;
  border: none;
  background-color:#D9D9D9 ;
  height: 16.6rem;
  width: 300px;
}
.contact_section_content .left_col h3 {
  font-size: var(--h3-font-size);
  font-weight: 700;
  color: #FFF;
}

@media screen and (max-width: 1100px) {
  .contact_section_content .left_col .footer{
    max-width:31.6rem ;
    margin: 0 auto;
    padding: 4.8rem 0;
  }
.left_col .logo{
  background: url("images/moyen-de-payement-logo-mobile.png");
  width:31.6rem ;
  height: 4.2rem;

  }
.left_col .body{
  display: none;
}

}

@media screen and (min-width: 1100px) {
  .contact_section_content {
    display: flex;
    flex-direction: row;
  justify-content: space-between;
  margin: 12rem 0;
  }
  .contact_section_content .left_col {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    
  }
  .contact_section_content .right_col {
width: 585px;
  }
  .left_col .logo{
    background: url("images/moyen-de-payement-logo.png");
    width:49.4rem ;
    height: 6.8rem;
    }
}
form a{
  color: #EBE789;
}
/*==================== Hero FINANCIAL SOON ====================*/
section.financialSonn_hero_section, section.hero_section{
  position: relative; 
  max-height: 100%;
  object-fit: fill;
  background-position: center;
  background-repeat: no-repeat;
  padding: 5rem 0;
}

section.financialSonn_hero_section::before ,section.hero_section::before{
    content: ""; /* Obligatoire pour les pseudo-éléments */
    position: absolute; /* Le pseudo-élément sera positionné par rapport à la section parente */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* max-height: 594px; */
    background: url("https://images.unsplash.com/photo-1698847626251-efac0f7517cc?q=80&w=2160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    opacity: 1;
    object-fit: fill;
    filter: blur(3rem);
    background-position: center;
    z-index: -1; /* Placez-le en dessous du contenu de la section */
}
.financialSonn_hero_section_content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding:9rem 0;
}
.financialSonn_hero_section p {
  font-weight: 600;  
  max-width: 50rem;
  text-align: center;
  }
.financialSonn_hero_section p span{
color:#EBE789 ;

}

.financialSonn_hero_section .svg{
  background: url("/frontend/asset/financialSoon.svg");
  width:42.7rem ;
  height: 2.3rem;

}
@media screen and (min-width: 600px) {
  .financialSonn_hero_section_content .top{
    display: flex;
  }
  .financialSonn_hero_section_content .etoile{
    background: url("/frontend/css/images/etoile.png");
    width: 22.8rem;
    height: 4.4rem;
  }
.financialSonn_hero_section_content .svg2{
  background: url("/frontend/asset/logo-before.svg");
  width: 8.6rem;
  height: 5.9rem;
}
}
section.financialSonn_hero_section h3{
  color:#A586D9 ;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: var(--h3-font-size);
  text-align: center;
  width: 100%;
  color: #A586D9;
  max-width: 350px;

}
@media screen and (max-width: 600px) {
  .financialSonn_hero_section .svg{
    background: url("/frontend/asset/financialSoon-mobile.svg");
    width:22.9rem ;
    height: 5.6rem;

  }
  .financialSonn_hero_section .item{
    background: url("images/datanalyse-img-mobile.png");
    width:35.1rem ;
    height: 24.5rem;

  }
}
.financialSonn_hero_section .box{
  border-radius: 8px;
  border: 1px solid #B2B2B2;
  color: #D9D9D9;
  font-family: 'poppins', sans-serif;
  padding: 33px;
  margin: 0 auto;
  width: 350px;
}
.financialSonn_hero_section .box{
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width:60.3rem ;
}
@media screen and (max-width: 600px) {
  .financialSonn_hero_section .box{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width:35.3rem ;
  }
}

.financialSonn_hero_section .box h4{
font-family:"poppins";
font-weight: 700;
font-size: var(--p-font);
color: var(--first-color);
}
input.form-control,textarea.form-control{
  background: #ebebeb; border: 1px solid #e4e4e4; 
  border-radius: 8px;
  width: 100%;
  height: 4rem;
  padding: 1rem;
} 
input.form-control:hover,textarea.form-control:hover{
  background: #FFF;
  border: 1px solid #000000; 
  border-radius: 8px;
}

.btn-outline-warning{
  background: none;
  border: 1px solid rgba(235, 231, 137, 0.82); 
  border-radius: .8rem;
  width: 50%;
  padding: 1rem;
  /* height: 6rem; */
  color: #B2B2B2;
  font-weight: 700;
}
.btn-outline-warning:hover {
  background: rgba(235, 231, 137, 0.82);
  border: 1px solid rgba(235, 231, 137, 0.82); 
  color: #000000;

}
.btn-outline-warning p {
  font-weight: 700;

}
.btn-outline-warning:hover p {
  color: #000000;
  font-weight: 700;

}
.alert-danger{
  background-color:var(--error-background-color) ;
  color:var(--error-color) ;
  padding:2rem ;
  max-width: 50.6rem;
  border-radius: 1rem;
}
.alert-danger ul{
  color:var(--error-color) ;
}
.alert-success ul{
  color:var(--success-color) ;
}
.alert-success{
  background-color:var(--success-background-color) ;
  color:var(--success-color) ;
  padding:2rem ;
  max-width: 50.6rem;
  border-radius: 1rem;
}
form .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}
@media screen and (min-width: 600px) {
  form .content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
  }
}
form .element {
padding: 0;
}
.programme_section_content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 9rem;
}
.module1 ,.module2,.module3{
  display: flex;
  gap: 5rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.module1 .left_col .item {
  background: url("/frontend/css/images/module1-mobile.png");
  width:39rem ;
  height: 24.9rem;
}
.module2 .left_col .item {
  background: url("/frontend/css/images/module2-mobile.png");
  width:39rem ;
  height: 24.9rem;
}
.module3 .left_col .item {
  background: url("/frontend/css/images/module3-mobile.png");
  width:39rem ;
  height: 24.9rem;
}
@media screen and (min-width: 800px){
 
  .module1 .left_col .item {
    background: url("/frontend/css/images/module1.png");
    width:47.6rem ;
    height: 30.2rem;
  }
  .module2 .left_col .item {
    background: url("/frontend/css/images/module2.png");
    width:47.6rem ;
    height: 30.2rem;
  }
  .module3 .left_col .item {
    background: url("/frontend/css/images/module3.png");
    width:47.6rem ;
    height: 30.2rem;
  }
  .module1 ,.module2,.module3{
    display: flex;
    gap: 5rem;
    flex-direction: row;
    text-align:left;
  }
  .module1 .right_col ul,.module2 .right_col ul, .module3 .right_col ul{

    list-style-type: decimal;
    padding: 2rem;
    }
}


.module1 .right_col ,.module2 .right_col,.module3 .right_col {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.module1 .right_col h3, .module2 .right_col h3,.module3 .right_col h3{
font-size: 2rem;
font-weight: 700;
}
.module1 .right_col ul,.module2 .right_col ul, .module3 .right_col ul{
  font-size: var(--p-font);
  font-weight: 600;

  }

/*==================== FOOTER ====================*/
.grid-footer{
  display: grid;
  /* gap: 1.5rem; */
}
.footer{
  padding-top: 2rem;
}

.footer__container{
  /* row-gap: 3.5rem; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;

}

.footer__bg{
  background-color: #131313;
  padding: 2rem 0 3rem;
  justify-content: center;
  align-items: center;
}

.footer__title{
 background: url("/frontend/asset/G.svg");
 width: 20.5rem;
 height: 3.6rem;
}

.footer__subtitle{
  font-size: var(--small-font-size);
}

.footer__links{
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}
.footer__links ul {
 
list-style-type: none;
    
}

.footer__link:hover{
  color: var(--first-color-lighter);
}

.footer__social{
  font-size: 1.25rem;
  margin-right: var(--mb-1-5);
}

.footer__social:hover{
  color: var(--first-color-lighter);
}

.footer__copy{
  font-size: var(--p-font-size);
  text-align: center;
  color: var(--text-color-light);
  margin-top: var(--mb-3);
}

.footer__title,
.footer__subtitle,
.footer__link,
.footer__social{
  color: #FFF;
}
@media screen and (min-width: 568px){
 
  .footer__container {
    /*display: grid;*/
    grid-template-columns: repeat(2, 1fr);
  }

}

@media screen and (min-width: 768px){


  .footer__container{
    grid-template-columns: repeat(3, 1fr);
    padding: 0 1rem;
  }
  .footer__bg{
    padding: 3rem 0 3.5rem;
  }
  .footer__links{
    flex-direction: row;
    column-gap: 2rem;
  }
  .footer__socials{
    justify-self: flex-end;
  }

  .footer__copy{
    margin-top: 4.5rem;
  }
}
@media screen and (min-width: 1024px){
  .header,
  .main,
  .footer__container{
    padding: 0;
  }

}
.product_content{
  display: flex;
  justify-content: center;
  align-items: center;
}
.wraper {
  max-width: 1200px;
  width: 100%;
  /* padding: 60px 0; */
}
.slide-container {
  /* margin: 0 30px; */
  overflow: hidden;
}
.card {
  /* background: #fff; */
  border-radius: 8px;
}
.card .graph1_avant {
  border-radius: 8px;
  height: 300px;
  background:url("../css/images/graph1_avant.png");
  background-position: center;
  background-repeat: no-repeat;
}
.card .graph1_apres {
  border-radius: 8px;
  height: 300px;
  background:url("../css/images/graph1_apres.png");
  background-position: center;
  background-repeat: no-repeat;
}
.card .graph2_avant {
  border-radius: 8px;
  height: 300px;
  background:url("../css/images/graph2_avant.png");
  background-position: center;
  background-repeat: no-repeat;
}
.card .graph2_apres {
  border-radius: 8px;
  height: 300px;
  background:url("../css/images/graph2_apres.png");
  background-position: center;
  background-repeat: no-repeat;
}
.card .image-box img {
  width: 100%;
  height: 100%;
  border-radius: 48px ;
  object-fit: fill;
}
.card .profile-details {
  display: flex;
  align-items: center;
  column-gap: 12px;
  padding: 15px;
}
.card .profile-details img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.profile-details .name {
  font-size: 15px;
  font-weight: 500;
}
.profile-details .job {
  font-size: 12px;
  font-weight: 500;
  color: #4d4d4d;
}

.swiper-navBtn {
  color: #000;
  height: 50px;
  width: 50px;
  transform: translateY(-40%);
  background: #fff;
  border-radius: 50%;
}
.swiper-navBtn::before,
.swiper-navBtn::after {
  font-size: 24px;
}

.swiper-pagination-bullet {
  background-color: #333;
}

@media screen and (max-width: 768px) {
  .swiper-navBtn {
    display: none;
  }
}
.slide-container{
margin: 40px;
}