@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
*{
    margin: 0;
    padding: 0;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  ;
}

/*===== GOOGLE FONTS =====*/
/*===== VARIABLES CSS =====*/
:root{
    --container-width: 90%;
    --container-bg-height: 80vh;
    --container-height: 70vh;

    /*========== Colors ==========*/
    --first-color: yellow;
    --first-color-alt: #2ECC71;
    --title-color: #393939;
    --text-color: #dde;
    --text-color-light: #ddd;
    --href-color: #fff;
    --body-color: #FBFEFD;
    --container-color: #FFFFFF;
    --first-color-span: yellow; 
   
    /*========== Font and typography ==========*/
    --body-font: 'Poppins', sans-serif;
    --biggest-font-size: 4rem;
    --font-titel: 8rem;
    --h2-font-size: 2.5rem;
    --h3-font-size: 1.5;
    --p-font-size: 1.5rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;


  
    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
  
    /*========== Margenes And padding  ==========*/
    --mb-1: .5rem;
    --mb-2: 1rem;
    --mb-3: 1.5rem;
    --mb-4: 2rem;
    --mb-5: 2.5rem;
    --mb-6: 3rem;

    --container-mr: 5%;

    --pad-1: 2rem;

    --border-radius: 10px;


    /*========== Colmun gap and row-gap  ==========*/
    --cg-1: 4rem;
    --cg-2: 1rem;
    --cg-3: 0.5rem;
    --cg-4: 2rem;
    --cg-5: 2.5rem;
    --cg-6: 3rem;
    
  
    /*========== z index and transition ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-fixed-fixed: 1000;
    --o-transition: 0.5s;
  }

main{
    overflow: hidden;
}
ul{
    display: flex;
    padding: 0;
}

li{
    list-style: none;
    cursor: pointer;
}

i{
    cursor: pointer;
}

a{
    text-decoration: none;
    cursor: pointer;
}

img{
    max-width: 100%;
    height: auto;
    cursor: pointer;
}


h1{
    font-size: 2.25rem;
}

h2{
    font-size: 1.75rem;
}

h3{
    font-size: 1.50;
}

h4{
    font-size: 1.25rem;
}

p{
    font-size: 1rem;
}

button{
    background-color: transparent;
    cursor: pointer;
    border: none;
    outline: none;
}

video{
      width: 100%;
      height: 100%;
      position: absolute;
      object-fit: cover;
}


h1,h2,h3,p,ul{
    margin: 0;
}


.bx{
    height: 30px;
    font-size: 25px;
    color: white;
    transition: 0.25s;
    
    
}

.bx__yellow{
    color: var(--first-color);
}

.href__icon{
    margin-top: 5px;
    height: 30px;
    width: 30px;
    align-items: center;
    overflow: hidden;
    display: grid;
    
    
}

.href__icon:hover i{
     transform: translateY(-30px);
}

.name__designer{
    position: fixed;
    left: 2%;
    bottom: 5%;
    z-index: 11;
    background-color: var(--title-color);
    padding: 5px;
}

.name__designer h1{
    font-size: 0.8rem;
    color: yellow;
}
/*======== STYLE BUTTON =======*/



.btn{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    cursor: pointer;
    height: 40px;
    color: white;
    font-weight: 800;
    letter-spacing: 2px;
    background: transparent;
    border: 1px solid yellow;
    overflow: hidden;
}

.btn::before{
    pointer-events: none;
    position: absolute;
    content: '';
    transition: var(--o-transition);
    
    width: 100%;
    height: 100%;
    background: yellow;
    left: -100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn:hover:before{
    left: 0;
}  


/*======== STYLE BUTTON/ =======*/

/*======== STYLE BACK BUTTON =======*/
.back__button{
    position: fixed;
    bottom: 5%;
    right:5%;
    width: 50px;
    height: 50px;
    background-color: yellow;
    z-index: 10;
    border-radius: 50%;
    display: none;
}

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

}

.back__button button i{
    font-size: 1.2rem;
    color: var(--title-color);
    animation: animate_i 1s infinite;
}

@keyframes animate_i {
    0%{
        transform: translateY(0px);
        transition: 1s;
    }
    25%{
        transform: translateY(3px);
        transition: 0.5s;
    }
    50%{
        transform: translateY(0);
        transition: 0.5s;
    }
    75%{
        transform: translateY(-3px);
        transition: 0.5s;
    }
    100%{
        transform: translateY(0);
    }
}

/*======== STYLE BACK BUTTON/ =======*/

/*========== LAYOUT ==========*/

.container{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
     
}



.section{
    position: relative;
    background-position: center;
    background-size: cover;
}

.menu{
    column-gap: var(--cg-2);
}

/*========== LAYOUT /==========*/

/*=========Titel Section ======*/
.titel{
    color: var(--first-color);
}

#title-section-pages{
    color: var(--first-color);}
/*=========Titel Section /======*/


/*===== HEADER =====*/
header{
    width: 100%;
    transition: var(--o-transition);
    position: fixed;    
    justify-content: space-between;
    align-items: center;
    display: flex;
    padding: 10px 0;
    transition: var(--o-transition);
    z-index: var(--z-fixed-fixed);
}

.logo__web{
    margin-left: 5%;
}

.logo__web h1{
    color: white;
}

.logo__web h1 span{
    color: var(--first-color);
}

.change__style__header{
    background: var(--title-color);
    padding: 20px 0;
    position: fixed;
    
}

.change__style__header ul li a{
    color: white;
    
}

.change__style__header .sublist li a{
    color: var(--title-color);
}
.opacity__header{
    display: none;
}

.Navbar{
    display:flex ;
    column-gap: var(--cg-1);
    margin-right: 5%;
    align-items: center;
}

#show-features:checked

nav{
    transition: var(--o-transition);
}

#nav-web li a{
    padding-bottom: 5px;
}

#item-home{
    position: relative;
}
#item-home a{
    position: relative;
    padding-bottom: 5px;

}

#item-home a::before{
    position: absolute;
    content: '';
    background-color: var(--first-color);
    bottom: 0;
    width: 0%;
    transition: var(--o-transition);
    right: 0;
    height: 1px;
    
}

#item-home a:hover:before{
    width: 100%;
    left: 0;
}

.icon__count{
    display: flex;
    column-gap:var(--cg-3);
    align-items: center;
}

#href-count{
    color: var(--href-color);
    border-bottom: var(--href-color) solid 1px;
}
#href-count:hover{
    color: #B2BABB
    
}

.active__menu{
    transform: translateY(10px);
    z-index: var(--z-tooltip);
}
.icon__menu{
    display: none;
}

#icon-x-menu{
    position: absolute;
    top: 0%;
    right: 0%;
}

.item__for__sublist ul{
    flex-direction: column;
    gap: 1rem;
    width: 150px;
    pointer-events: none;
    background-color: #fff;
    position: absolute;
    box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
    transform: translateX(-20px);
    padding: 10px;
    opacity: 0;
    transition: var(--o-transition);
    margin-top: 5px;
}

.item__for__sublist:hover.item__for__sublist ul{
    opacity: 1;
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;

}


.item__for__sublist button{
     display: none;
}

.item__for__sublist ul li{
    transition: var(--o-transition);
}
.item__for__sublist ul li a{
    color: var(--title-color);
    transition: var(--o-transition);
}

.item__for__sublist ul li:hover{
    transform: translateX(10px);
}

.item__for__sublist ul li a::before{
    display: none;
}

.item__principe{
    display: flex;
    justify-content: space-between;
    display: flex;
    justify-content: space-between;
}
/*===== HEADER/=====*/

/*======================Style Section1 Pages=================*/
.section__1__pages{
    background-image: url('./images/anastase-maragos-7kEpUPB8vNk-unsplash.jpg');
}
.container__pages{
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}



/*======================Style section1 Pages1=================*/




#container-home{
    height: var(--container-bg-height);
    
}
#home{
    height: auto;
    background-image: url("./images/images.home/bg-home.jpg");
    background-attachment: fixed;
    position: relative;
}

#home::before{
    background: linear-gradient(black, transparent);
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    content: '';
}



/*===== SEARSH=====*/

.searsh{
    position: fixed;
    height: 100%;
    width: 100%;
    top: -100%;
    z-index: var(--z-fixed);
    background: linear-gradient(black,transparent);
    background-blend-mode: screen;
    left: 0;
    transition: var(--o-transition);
}

.close__searsh{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 30px 0;
}

.input__searsh{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

}

.input__searsh input{
    width: 200px;
    padding: 15px;
    background: transparent;
    border: none;
    outline: none;
    
}

.input__searsh{
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,3);
}


.active-searsh{
    top: 0;
}


/*===== SEARSH/=====*/

/*===== CONTAINER HOME CENTER =====*/
.home__center{
    column-gap: 15rem;
    z-index: var(--z-tooltip);
    display: flex;
    top: 50%;
    transform: translate(0, -50%);
    position: relative;
    width: 100%;
    
    
    transition: var(--o-transition);
    flex-wrap: wrap;
    
}
.welcome{
    margin-top: 5rem;
}
.welcome .title__vertebrae{
    font-size: var(--biggest-font-size);
    margin-bottom: 10px;
    
}
.welcome .title__vertebrae span{ 
    color: yellow;
   
    
}

.welcom #para-welcom{
    color: var(--title-color);
    margin-bottom: 10px;
    
    
}



.part__animation{

    height: 45px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    margin: 10px auto;
    
}

.vertebrae__animation{
    
    animation:  animat 6s infinite;
    position: absolute;
}
.vertebrae__animation h2{
    font-size:var(--h2-font-size);
   font-weight: 700;
   color: yellow;
   position: relative;
}
  @keyframes animat{
     0%{
        top: 0;
     }
      20%{
        top: -45px;
     }
       40%{
        top: -90px;
     }
       60%{
        top: -45;
     }
      80%{
         top: 0;
      }
  }

  .remove__home__center{
      opacity: 0;
  }

  .home__center .btn::before{
      content: 'Get Started';
  }
/*===== image__home__man =====*/



.image__man{
    width: 400px;
    height: 400px;
    position: relative;
}

.image__man img{
    position: absolute;
    width: 100%;
    height: 100%;
} 


/*===== image__home__man/ =====*/




/*===== CONTAINER HOME CENTER/ =====*/

/*============== SOCIAL ===========*/

.sociel{
    position: absolute;
    right: 0;
    bottom: 0;
    height: 93vh;
    width: 60;
    display: grid;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-left:.1rem solid rgba(255,255,255,.3) ;   

}

.sociel ul{
    display: grid;
    row-gap: 1rem;
    
}

.sociel ul li{
    overflow: hidden;
    padding: 4px ;
    height: 30px;
    display: grid;
    
}



.sociel ul li a .sociel-yellow{
    color: yellow;
}

.sociel ul li:hover i{
    transform: translateY(-30px);
}

/*=============== SOCIAL/ =========*/

/*=== MENU SERVICER HOME BOTTOM ===*/


#container-product{
    margin-left: 0%;
    margin-right: 0%;
    width: 100%;
    overflow: hidden;
}
.products__home__bottom{
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    
}
.product__home{
    height: 200px;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    position: relative;
    width: 25%;
    
}

.product__home img{
    position: absolute;
    width: 100%;
    top: 0;
    height: 100%;
    z-index: 0;
    transition: var(--o-transition);
}

.product__home:hover .img__product{
    transform: scale(1.5);
}

.product__home h4{
    font-size: var(--h3-font-size);
    color: var(--first-color);

}

.ver__product{
    z-index: 2;
    width: 100%;
    padding: 10px 0px 10px 10px;
    position: absolute;
    background: linear-gradient(to right, var(--first-color-alt), transparent);
}


.product__home p{
    font-size: var(--normal-font-size);
    color:  var(--text-color);
}

/*==== MENU SERVICER HOME BOTTOM/ ====*/

/*======== STYLE TITLE SECTION =======*/


.title__section{
    width: 100%;
    text-align: center;
    margin: 25px 0;
    letter-spacing: 10px;
    z-index: var(--z-fixed);

    
    
    
}

.title{
    /*border: 5px solid var(--title-color);*/
    font-weight: bold;
    z-index: var(--z-fixed);
    font-size: var(--font-titel);
    text-transform: uppercase;
    color: var(--first-color);
    
}

.titel__page{
    width: 100%;
    text-align:left;
    overflow: hidden;
}

#section-bg-coursses{
    background-image: url('./images/anastase-maragos-7kEpUPB8vNk-unsplash.jpg');
}

.titel__page h1{
    margin:  0 auto;
    font-size: 5rem;
    padding: 10px;
    text-align: left;
    position: relative;
    border-left: 4px solid var(--first-color) ;
    animation: title 0.5s ease-in-out;
    

}
.titel__page h1 p{
    color: var(--first-color);
    font-size: 7rem;
    animation: span 0.5s ease-in-out;

}

@keyframes span{
    0%{
        transform: translateX(-100%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes title{
  
    0%{
        transform: translateY(-100%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}





/*======== STYLE TITLE SECTION/ =======*/

@media  (max-width: 1366px) {
    .home__center{
        column-gap: 8rem;
    }
}
@media   (max-width: 1300px) {
    .welcome {
        margin-top: 5rem;
        width: 500px;
    }


    
    .Navbar{
        display: flex;
        gap: 1rem;
      
    }
    .icon__count{
       justify-content: center;
    }
    .logo__web{
        width: 300px;
    }
    :root{
        --biggest-font-size: 3.5rem;
        --h2-font-size: 2.5rem;
        --h3-font-size: 1rem;
        --normal-font-size: .938rem;
        --small-font-size: .813rem;
        --smaller-font-size: .75rem;
    }
    .home__center{
        gap: 6rem;
        
    }
     
    
  }

  @media(max-width: 1200px){
    .Navbar{
        flex-direction: column;
        gap: 1rem;
        margin-right: 0;
    }

    .logo__web{
        text-align: center;
    }
    .header{
        justify-content: center;
        flex-direction: column;
        gap: 1rem;
    }
    .image__man {
        width: 400px;
        height: 350px;
        margin-top: 50px;
        position: relative;
    }
    .home__center{
        gap: 4rem;
        
    }
  
  }

  @media (max-width: 1100px){
    #container-home{
        height: 120vh;
    }
    
      .home__center{
          gap: 2rem;
      }
      .image__man{
          width: 350px;
          height: 300px;
      }
  }
  @media  (max-width: 970px) {
    
      
     
    .home__center{
        justify-content: center;
        
    }

  }


  @media   (max-width: 800px){
    

    :root{
        --biggest-font-size: 4rem;
        --h2-font-size: 2.5rem;
        --h3-font-size: 1rem;
        --normal-font-size: .938rem;
        --small-font-size: .813rem;
        --smaller-font-size: .75rem;
    }
    .welcome{
        margin-bottom: 20px;
    }

 
      .logo__web{
          text-align: center;
      }
    
    
    
    nav li::before{
        background-color: transparent;

    }
    nav {
        display: flex;
        position: absolute;
        transition: var(--o-transition);
        transform: translateY(-150%);
        z-index: var(--z-tooltip);
        max-height: 300px;
        overflow: auto;
        width: 85%;
        margin: 0 auto;
        top: 100%;
        background-color: var(--title-color);
        padding: 30px 0;
        z-index: 1;
        border-radius: 10px;
    }
    #menu-home{
        flex-direction: column;
        margin-left: 10%;
        margin-right: 10%;
        width: 80%;
    }
    .item{
        border-bottom: solid 1px #ddd;
    }

    .item__for__sublist ul {
        gap: 0;
        height: 0;
        overflow: hidden;
        margin: 0;
    }
    
    
    .item__for__sublist .item__principe {
        border-bottom: 1px solid;
    }

    .item__principe .fa-angle-down{
        display: block;
   }
    .item__sublist li{
        width: 100%;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #F0F2E7;

    }

    .item__for__sublist ul li a{
        color: white;
    }

    .item__for__sublist{
        border-bottom: 1px solid white;
    }


    .item__principe{
        display: flex;
        justify-content: space-between;
        display: flex;
        padding: 10px 0;
        justify-content: space-between;
        margin-top: -20px;
    }
    .item__sublist li .fa-angle-down{
        display: block;
        margin-right: 5%;        
    }
    .item__sulist{
        border-bottom: none;
    }

    .item__for__sublist ul{
        background-color: transparent;
        width: 100%;
        box-shadow: 0 0 0 ;
        transform: translateX(0);
        /*padding: 0;
        height: 0;*/
        transition:  0.5s;
        position: initial;
        opacity: 1;
        padding: 0 ;
        gap: 1rem;
    }

    .item__for__sublist .active__sublist__couche{
        width: 100%;
        box-shadow: 0 0 0 ;
        transform: translateX(0);
        transition:  0.5s;
        opacity: 1;
        gap: 1rem;
        height: max-content;
        margin-top: 10px;
        transition: var(--o-transition);
    }

    .item__for__sublist .active__sublist__course{
        width: 100%;
        box-shadow: 0 0 0 ;
        transform: translateX(0);
        transition:  0.5s;
        opacity: 1;
        gap: 1rem;
        height: max-content;
        margin-top: 10px;
        transition: var(--o-transition);
    }

    .item__for__sublist .active__sublist__shop{
        width: 100%;
        box-shadow: 0 0 0 ;
        transform: translateX(0);
        transition:  0.5s;
        opacity: 1;
        gap: 1rem;
        height: max-content;
        margin-top: 10px;
        transition: var(--o-transition);
    }

    .item__for__sublist .active__sublist li:hover.item__for__sublist .active__sublist li a {
        transform: translateX(10px);
 
    }

    .item__for__sublist button{
        position: absolute;
        content: "\f107";
        right: 5%;
        height: 100%;
        display: flex;
        align-items: center;
        transform: translateY(-50%);
        padding:  0 3px;
        top: 20px;
    }

    /*.fa-angle-down:before {
        position: absolute;
        content: "\f107";
        right: 0;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
    }*/
    

    #item-home{
        width: 100%;
        text-align: left;
        padding: 10px 0;
    }

    #item-home a::before{
        display: none;
    }
    #item-home a:hover{
        transform: translateX(10px);
    }

    .item__subslide{
        padding: 0px;
    }

    .item__subslide a{
        margin-left: 20px;
    }
    

    #item-hom a{
        color: white;
    }

    

    .sublist li a{
        color: white;
    }
    

    .icon__menu{display: block;}
    

    .icon__menu a .bx{
        font-size: 30px;
    }
    .icon__menu a{
        margin-top: 0;
    }

    .icon__count{
        margin-left: 20px;
    }

    

  }

  @media   (max-width: 640px){
    #container-home{
         height: var(--container-bg-height);
    }
    :root{
        --biggest-font-size: 3.4rem;
        --h2-font-size: 2.5rem;
        --h3-font-size: 1rem;
        --p-font-size: 1.5rem; 
        --normal-font-size: .938rem;
        --small-font-size: .813rem;
        --smaller-font-size: .75rem;
    }
    .home__center{
        transform: translateY(-80%);
    }
    .image__man{
        display: none;
    }

    .welcome {
        transform: translateY(50%);
    }

    .title__section{
        width: 100%;
        text-align: center;
        margin-bottom: 25px;
        letter-spacing: 5px;
    
        
        
    }
    
    .title{
        
        font-size: 5rem;
    }
    
  }
@media (max-width: 500px){
  .title{
    /*border: 5px solid var(--title-color);*/
    font-weight: bold;
    padding: 10px;
    z-index: var(--z-fixed);
    color: transparent;
    font-size: 4rem;
    text-transform: uppercase;
   }
   .titel__page h1{
       font-size: 4rem;
   }
   .titel__page h1 p{
       font-size: 5rem;
   }

}
  @media   (max-width: 350px){
    .title{
        /*border: 5px solid var(--title-color);*/
        font-weight: bold;
        padding: 10px;
        z-index: var(--z-fixed);
        color: transparent;
        font-size: 3rem;
        text-transform: uppercase;
    }
    .titel__page h1{
        font-size: 4rem;
    }
    .titel__page h1 p{
        font-size: 5rem;
    }
    
  :root{
      --biggest-font-size: 2.5rem;
      --h2-font-size: 1.5rem;
      --h3-font-size: 1rem;
      --normal-font-size: .938rem;
      --small-font-size: .813rem;
      --smaller-font-size: .75rem;
  }
 
  

  .header{
      padding: 0;
      gap: 0;
  }
  .welcome{
      margin-top: -30px;
  }

 .change__style__header{
     padding: 10px 0;
     gap: 1rem;
 }


  
}

@media  (max-width: 250px){
  .container{
        width: 98%;
       
   }
  :root{
      --biggest-font-size: 1.5rem;
      --h2-font-size: 1rem;
      --h3-font-size: 1rem;
      --normal-font-size: .938rem;
      --small-font-size: .813rem;
      --smaller-font-size: .75rem;
  }

  .btn{
      width: 100px;

  }
 
  .welcome{
      width: 150px;
  }
  .home__center{
      justify-content: left;
  }
  
}

/*===== HEADER MEDIA HOME/ =====*/


/*================= ABOUT ==============*/
#section-about::before{
    position: absolute;
    content:'';
    width: 50%;
    height:100%;
    left: 0;
    background-color: yellow;
}

#section-about::after{
    position: absolute;
    bottom: 30%;
    right: -10%;
    content: 'AGE : 15 YEARS';
    transform: rotate(-90deg);
    font-size: 4rem;
    color: var(--title-color);
    opacity: 0.2;
    
}

#title-about{
    color: var(--title-color);
}

.div__1__section__about {
    position: absolute;
    bottom: 40%;
    left: -10%;
    transform: rotate(90deg);
    font-size: 8rem;
    color: var(--title-color);
    
}

.div__1__section__about h1{
    
    font-size: 8rem;
    color: var(--title-color);
    opacity: 0.5;
    
}



#container-about{
    position: relative;
    padding: 25px 0px 50px 0px;
}

.veretebrea__image__about{
     width: 100%;
     display: flex;
     flex: wrap;
     margin-top:20px ;
     justify-content: center;
     gap: 10rem;
     
     
}

.image__about__page__home{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.images__about{
    text-align: center;
    z-index: var(--z-fixed);
}

#image-about-big{
    padding: 10px;
    width: 350px;
    height: 500px;
    
}

.veretebrea__about{
    width: 60%;
    align-items: center;
    
}

.veretebrea__about button{
    color: var(--title-color);
    border: solid 1px var(--title-color);
}

.veretebrea__about button a{
    color: var(--title-color);
}

.veretebrea__about button::before{
    content: 'Get Started';
}

#veretebrea-about{
    color: var(--title-color);
    line-height: 2rem;
    font-size: var(--p-font-size);
    margin-bottom: 2rem;
    
}

.veretebrea__about h2{
    margin-bottom: 15px;
    color: var(--title-color);
}

.veretebrea__about h2 i{
    margin-right: 10px;
    color: var(--first-color);
}



#title-about-wvertebrae{
    color: var(--first-color);
    font-size: var(--biggest-font-size);
    display: inline-block;
    margin: 8px;
}


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

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

#after-section-about{
    background-image: url('./images/anastase-maragos-4dlhin0ghOk-unsplash.jpg');
    background-attachment: fixed;


    
    
}

#after-section-about .container{
  height: auto;
  padding: 100px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center ;
  align-items: center;
}


.services__seconde__sportcity{
  justify-content: space-between;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}


.sercvice__sportcity{
  perspective: 500;
  transform-style: preserve-3d;
  margin: 15px 0;
  border: 2px solid yellow;
  text-align: center;
  display: flex;
  flex-direction: column;
  border-top: none;
  border-bottom: none;
  padding: 10px 5px;
  align-items: center;
  justify-content: center;
  width: 300px;
  position: relative;
  height: 250px;
  transition: var(--o-transition);
  

}

.sercvice__sportcity:hover .icon__ser{
    transform: scale(1.2);
}



.sercvice__sportcity div p{
  color: white;
 
}

.sercvice__sportcity .icon__ser {
  position: absolute;
  width: 100%;
  cursor: pointer;
  perspective: 500px;
  transform-style: preserve-3d;
  justify-content: center;
  height: 100%;
  z-index: 5;
  transition: var(--o-transition);
  align-items: center;
}





.sercvice__sportcity .icon__ser i{
  color: var(--first-color);
  font-size: 4rem;
  margin-bottom: 20px;
  align-self: center;
}

.sercvice__sportcity .icon__ser:hover.sercvice__sportcity .icon__ser i{
    color: var(--title-color);
}

.sercvice__sportcity .icon__ser div p{
  
  color: white;
  z-index: 3;
  font-size:0;
  opacity: 0;
  transition: var(--o-transition);
}


.sercvice__sportcity .icon__ser h3{
    transition: var(--o-transition);
    font-size: 3rem;
    color: white;
}


.sercvice__sportcity .icon__ser:hover.icon__ser div p{
      opacity: 1;
      display: block;
      color: var(--first-color);
      font-size: 1rem;
  }

  .sercvice__sportcity .icon__ser:hover.icon__ser h3{
      margin-bottom: 10px;
  }


  @media(max-width: 650px){
    .services__seconde__sportcity {
        justify-content: center;
        position: relative;
        display: flex;
        flex-wrap: wrap;
    }
  }








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


/*================= MEDIA ABOUT ==============*/
@media (max-width: 1350px){
    .div__1__section__about{
        left: -15%;
    }
    #section-about::after {
        font-size: 3rem;
    }
    .div__1__section__about h1 {
        font-size: 6rem;
        color: var(--title-color);
        opacity: 0.5;
    }
}
@media (max-width: 1050px){
    .product__home {
        width: 50%;
    }
}
@media (max-width: 930px){
    #image-about-small{
        width: 200px;
        height: 200px;
    }
    #title-about-wvertebrae {
        font-size: 3rem;
   }
   #veretebrea-about {
        font-size: 1.2rem;
   }

   }

@media (max-width: 800px){
.veretebrea__image__about {
    column-gap: var(--cg-4);
}
.title{
    font-size: 4rem;
}
}

@media (max-width: 750px){
    .veretebrea__image__about {
        flex-direction: column;
        align-items: center;
        gap: var(--cg-4);
    }
    #section-about::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 50%;
        left: 0;
        background-color: yellow;
    }
    .div__1__section__about {
        left: -80%;
        top: 0;
    }
    }
@media (max-width: 600px){
    .veretebrea__about {
        width: 450px;
        align-items: center;
    }
    .div__1__section__about h1 {
        font-size: 4rem;
        color: var(--title-color);
        opacity: 0.5;
        transform: translateY(50%);
    }
}

@media (max-width: 500px){
    .veretebrea__about {
        width: 300px;
    }
    .product__home {
        width: 100%;
    }

    :root{
        --p-font-size: 1.2rem; 
}}

@media (max-width: 400px){
    .veretebrea__about {
        width: 300px;
    }

.veretebrea__about h2 {
    font-size: 1.2rem;
}

    .title{
        font-size: 2rem;
    }

    :root{
        --p-font-size:1rem; 
    }
    .sercvice__sportcity {
        width: 250px;
        padding:  10px 0;
        margin: 15px 0;
    }
    .image__about__page__home {
        width: 100%;
        
    }
}       


@media (max-width: 300px){
    .veretebrea__about {
        width: 250px;
    }

    #section-about::before {
        
        height: 30%;
        
    }

    :root{
        --p-font-size:1rem; 
        --font-tittl: 2rem
    }
    .title{
        
        font-size: 2rem;
        
    }

    #image-about-big{
        width: 200px;
        height: 300px;
    }
    
    #image-about-small{
        width: 130px;
        height: 150px;
        
        
    }
    


        
}

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


/*================== SECTION - HOME - 4==============*/

#section-home-sportes{
    overflow: hidden;
    background-color: var(--title-color);
}

#container-home-sportes{
 margin: 0;
 width: 100%;
}

#container-home-sportes .images__sportes {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

}

#container-home-sportes .images__sportes .image__sporte{ 
 height: 400px;
 overflow: hidden;
 cursor: pointer;
 position: relative;
}

#container-home-sportes .images__sportes .image__sporte img{ 
 width: 100%;
 height: 100%;
 position: absolute;
}

#container-home-sportes .images__sportes .image__sporte img{
 height: 100%;
}

#container-home-sportes .images__sportes .image__sporte .sporte{ 
 position: absolute;
 width: 100%;
 height: 100%;
 top: 400px;
 background-color: yellow;
 transition: var(--o-transition);
}

.image__sporte{ 
    background-position: center;
    background-size: cover;
}
.image__sporte:nth-child(1){
    background-image: url('./images/bodi build.jpg');
    
}
.image__sporte:nth-child(2){
    background-image: url('./images/anastase-maragos-7kEpUPB8vNk-unsplash.jpg');
    
}
.image__sporte:nth-child(3){
    background-image: url('./images/strength training.jpg');
    
}
.image__sporte:nth-child(4){
    background-image: url('./images/graham-mansfield-y7ywDXWJ-JU-unsplash.jpg');
    
}
.image__sporte:nth-child(5){
    background-image: url('./images/victor-freitas-vjkM-0m34KU-unsplash.jpg');
   
}
.image__sporte:nth-child(6){
    background-image: url('./images/prateek-katyal-FNMztJegsSA-unsplash.jpg');
    
}

#container-home-sportes .images__sportes .image__sporte:hover .sporte{
 top: 0px;
}

.sporte .title__sport{
 color: var(--first-color);
 padding: 0 0 0 30px;
 margin-top: 30px;
 font-size: var(--font-titel);
 height: 100px;
 width: 200px
}

.sporte .title__sport h2{
 color: var(--title-color); 
}

.title__sport img{
   height: 100px;

}

.sporte div{
 display: flex;
 align-items: center;
 
}

.sporte div p{
 color: var(--title-color);
 line-height: 25px;
 font-size: var(--normal-font-size);
 
}

.ver__sporte{
    margin-top: 30px;
    padding: 0 30px 0 30px;
}

@media (max-width: 400px){
    .ver__sporte {
        margin-top: 30px;
        padding: 0 40px 0 10px;
    }
    .sporte .title__sport {
        padding:  0 0 0 10px;
    }}
@media (max-width: 300px){
    .ver__sporte {
      margin-top: 30px;
      width: 250px;}}


/*================== SECTION - HOME - 4 / ==============*/



/*================== SECTION - courses ==============*/

#section-home-courses {
    /*background-image: url('./images/graham-mansfield-y7ywDXWJ-JU-unsplash.jpg');*/
}

#section-home-courses::before{
    position: absolute;
    bottom: 30%;
    right: -5%;
    content: '12 COURSES';
    transform: rotate(-90deg);
    font-size: 4rem;
    color: var(--first-color);
    opacity: 0.5;
    z-index: 2;
    
}


#section-home-courses .background__color{
    position: absolute;
    content: '';
    height: 70%;
    width: 100%;
    background-color: var(--title-color);
    top: 0;
    z-index: 2;
    mix-blend-mode: color;
    
}

#container-home-courses{
    padding: 25px 0px 25px 0px;
    z-index: 2;
}

#title-courses{
     color: var(--first-color);
}

.courses{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.courses .image-courses{
    overflow: hidden;
    
    cursor: pointer;
    width: 300px;
    position: relative;
    height: 400px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    
}

#container-home-courses{
    position: relative;


}



.icon__cours{
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 200px;
    text-align: center;
    backdrop-filter: blur(5px);
    display: flex;
    align-items:center;
    justify-content: center;
    transition: var(--o-transition);
    
}

.icon__cours h3{
    
    color: var(--first-color);
    letter-spacing: 4px;
    font-size: var(--first-color-span);
}



.image-courses:hover .icon__cours{
    transform: translateY(200px);

}


.image-courses:hover .veretebrea__course{
    bottom: 0;

}



.veretebrea__course p{
     padding: 0 30px;
}

.image-KettlebellCourse{
    position: absolute;
    padding: 0 20px;
    width: 100%;
    bottom: 0;
    height: 200px;
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.images-icon-cours{
     width: 100px;
     height: 100px;
     position: relative;
}

.images-icon-cours .image__course{
    position: absolute;
    width: 100%;
    height: 100%;
}

.veretebrea__course{
    position: absolute;
    width: 100%;
    bottom: -100%;
    height: 200px;
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--o-transition);
}


.icon__course{
    text-align: center;
}

.icon__course img{
    width: 60px;
    height: 60px;
}

.button__see__courses{
     margin: 20px 0;
     text-align: center;
     padding: 20px 0;
     width: 100%;
}

.button__see__courses button{
    background-color:var(--title-color);
    border: none;
    left: 50%;
    transform: translateX(-50%);
    
}

.button__see__courses button::before{
    content: 'See More';
    
}

/*================== SECTION - courses /==============*/

/*================== SECTION - couches ==============*/
section#section-home-couches {
    background: var(--title-color) 
}

section#section-home-couches::before{
    position: absolute;
    bottom: 30%;
    right: -5%;
    content: '6 COUCHES';
    transform: rotate(-90deg);
    font-size: 6rem;
    color: var(--first-color);
    opacity: 0.5;
    z-index: 2;
    
}

#container-home-couches{
    padding: 25px 0px 50px 0px;
    overflow:hidden;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
}
.images__couches{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    transition: var(--o-transition);
}





.image__couche{
    min-width: 350px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    height: 400px;
}

.image__couche::before{
    content: '';
    position: absolute;
    width:100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    transition: var(--o-transition);
   
}


.image__couche img{
    position: absolute;
    width: 100%;
    height: 100%;
    transition: var(--o-transition);
    
}

.image__couche:hover:before{
    mix-blend-mode: color;
    transition: var(--o-transition);
    
}

.info__couche{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-fixed);
    transition:  var(--o-transition);

}

.image__couche .info__couche h2{
    color: transparent;
    transition: var(--o-transition);
}

.image__couche:hover.image__couche .info__couche h2{
     color: white;
     margin-bottom: 20px;
     font-size: 2.5rem;
}

.image__couche:hover.image__couche .img__couche{
     opacity: 0.5;
     transform: scaleY(0.45px);
     transition: var(--o-transition);

}



#menu-sociel-couches{
    display: flex;
    column-gap: 1rem;
    justify-content: center;
    z-index: var(--z-fixed);
}

#menu-sociel-couches li {
    border-radius: 50%;
    
}

#menu-sociel-couches li a i{
    font-size: 1.5rem;
}



.info{
    text-align: center;
}

.info p{
    font-size: 1.5rem;
    color: var(--first-color);
    margin-bottom: 10px;
}

.page__couches{
    position: absolute;
    bottom: -120px;
    z-index: var(--z-fixed);
    width: 100%;
    transition: var(--o-transition);
    text-align: center;
    height: 80px;
}

.image__couche:hover .page__couches{
    bottom: 0;
}

.image__couche .page__couches button{
    width: 250px;
    margin: 0 auto;
}

.image__couche .page__couches button::before{
    content: 'See the Page';
}



/*================== SECTION - couches/ ==============*/
/*====================Media Couches===================*/
@media (max-width: 600px){
.image__couche .page__couches button {
    width: 200px;
    margin: 0 auto;
}}



/*================== SECTION - Classes ==============*/
#section-home-classes{
    background-color: var(--title-color);
}

#container-home-classes {padding: 25px 0px 50px 0px; }

.classes{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.animation__one{
    /*background-color: var(--title-color);*/
    /*animation: animation__one ease 1s infinite;*/

}

@keyframes animation__one{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-20px);
    }
    100%{
        transform: translateY(0);
    }
}

.animation__two{
    /*background-color: var(--title-color);*/
    /*animation: animation__two ease 1s infinite;*/

}

@keyframes animation__two{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(20px);
    }
    100%{
        transform: translateY(0);
    }
}

.classe > div{
    padding: 5px 20px;
}

.classe .day{
    text-align: center;
    /*background-color: var(--first-color-alt);*/
    
}

.classe > div > h1 {
    color: white;
}


.ver__class{
    margin: 15px 0px;
    text-align: center;
    background-color: var(--title-color);
}

.classe > div > h2{
    margin-bottom: 10px;
    color: var(--first-color-alt)
}

.classe div{
    transition: var(--o-transition);
    cursor: pointer;
}

.classe > div > span{
    color: var(--title-color);
}

.classe div:hover{
    transform: scale(1.2);
}

.classe .youga{
    background-color: var(--first-color);
}

.classe .body__building{
    background-color:#C6D3C8;

}

.classe .Runing{
    background-color:#6F8373;
}

.classe .Boxing{
    background-color:#525452;

}

.classe .Carrosfit{
    background-color: #50935D;
}

.classe .fitness{
    background-color: rgb(175, 201, 183);
}
.classe .youga span{
    color: var(--title-color);
}

.classe .doctor, .strength{
    background-color:#ACBD6B ;
}



/*================== SECTION - Classes/ ==============*/

/*================== SECTION - card ==============*/
#section-home-card{
    background-color: var(--title-color);

}
#container-home-card{
    padding: 50px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 6vh;
}

#container-home-card .pris__month{
    position: relative;
    min-width: 320px;
    height:440px;
    box-shadow: inset 5px 5px 5px rgba(0,0,0,0.2),
                inset -5px -5px 15px rgba(255,255,255,0.1),
                5px 5px 15px rgba(0,0,0,0.3),
                -5px -5px 15px rgba(255,255,255,0.1);
    border-radius: 15px;
    margin: 30px;
    cursor: pointer;
 }

 #container-home-card .pris__month .box{
   position: absolute;
   width: 90%;
   height: 90%;
   margin: 5%;
   background-color: #2a2b2f;
   border:  2px solid #1e1f23;
   box-shadow: 0 20px 50px rgba(0,0,0,0.5);
   transition: var(--o-transition);
   border-radius: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

#container-home-card .pris__month:hover .box{
    transform: translateY(-50px);
    box-shadow: 0 40px 70px rgba(0,0,0,0.5);
  }

#container-home-card .pris__month .box .content{
    padding: 20px;
    text-align: center;
    
  }
  #container-home-card .pris__month .box .content h2{ 
    position: absolute;
    top: -10px;
    right: 30px;
    font-size: 8em;
    z-index: 1;
    color: rgba(255,255,255,0.05);
    color: var(--first-color);
    opacity: 0.5;
    
  }

#container-home-card .pris__month .box .content h3{ 
    font-size: 2.5em;
    margin-bottom: 20px;
    color: rgb(0, 255, 115);
    z-index: 2;
    
  }

#container-home-card .pris__month .box .content h3 span{ 
    font-size: 20px;
    color: var(--body-color);
    
  }

#container-home-card .pris__month .box .content p{ 
    font-size: 1em;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    line-height: 20px;
    
  }
#container-home-card .pris__month .box .content a{ 
    position: relative;
    display: inline-block;
    padding:8px 20px;
    background-color: #000;
    margin-top: 15px;
    transition: var(--o-transition);
    border-radius: 5px;
  }

#container-home-card .pris__month .box .content a:hover{ 
    letter-spacing: 3px;
  }

#container-home-card .pris__month:nth-child(1) .box .content a{
     background-color: var(--first-color-alt);
  }

#container-home-card .pris__month:nth-child(2) .box .content a{
      background-color: var(--first-color);
}

#container-home-card .pris__month:nth-child(3) .box .content a{
        background-color: rgb(255, 153, 0);
}





/*================== SECTION - card/ ==============*/

/*==================  Media Card ==================*/

@media (max-width: 400px){
    #container-home-card .card {
        position: relative;
        min-width: 100%;
        height: 400px;}
    .card .box .content h2{
        font-size: 6rem;
    }
}


/*================== SECTION - shop ==============*/


#section-home-shop{
    /*background-image:url('./images/bekky-bekks-ZiG6GmNlfeI-unsplash.jpg') ;*/
    min-height: 60vh;
    background-color: var(--title-color);
}

#container-home-shop{
    padding: 50px 0px 50px 0px;
    /*grid-template-columns: repeat(auto-fit, minmax(25rem,1fr));*/
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 7rem;
    overflow: hidden;
    position: relative;

}

.ver__images__shop {
    padding: 50px 0px 50px 0px;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(25rem,1fr));
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    column-gap: 7rem;
    overflow: hidden;
    position: relative;
}


.ver__shop{
    z-index: var(--z-fixed);
    
}

.ver__shop h1{
    font-size: 10rem;
    color: var(--first-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.ver__shop h1 i{
    font-size: 10rem;
    color: var(--first-color);
    transition: var(--o-transition);
    animation: animate ease 1s infinite;
    
}

@keyframes animate{
    0%{
        transform: translateX(0);
    }

    50%{
        transform: translateX(30px);
    }

    100%{
        transform: translateX(0);
    }
}

.ver__shop p{
    font-size: 1.6rem;
    margin-bottom: 40px;
}

.ver__shop p span{
    font-size: 3rem;
    color: var(--first-color);
}


.shop__home{
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    perspective: 500px;
    justify-content: center;
    
}

.shop__home .shop{ 
    width: 200px;
    height: 250px;
    cursor: pointer;
    position: relative;
    perspective: 500px;
    margin: 0 20px 0 0 ;
    box-shadow: rgb(15, 16, 17) 0px 20px 30px -10px;
    border-radius: 5px;
    transition: var(--o-transition);
    transform-style:preserve-3d ;

}


.shop__home .shop .image__nam {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    transform-style: preserve-3d;
    perspective: 500px;
    transition: var(--o-transition);


}

.image__shop{
    z-index: 2;
    transition: var(--o-transition);
    backface-visibility: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 5px;


    
}

.image__shop img{
    height: 100%;
    border-radius: 5px;
    position: absolute;
    width: 100%;
    backface-visibility: hidden;

}

.nam__shop{
    border-radius: 5px;

    transform: rotateY(180deg);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    width: 100%;
    left: 0;
    backface-visibility: hidden;
    top: 0;
    height: 100%;
    border-radius: 5px;
}

.nam__shop h2{
    color: var(--first-color);
    transform: translateZ(20px);

}
.shop__home .shop:hover .image__nam {
    transform: rotateY(180deg);
}

.shop__home .shop:nth-child(2){
    margin-top: 20px;
}

.shop__home .shop:nth-child(4){
    margin-top: 20px;
}

#btn-shop{
    color: var(--first-color-alt);
    border: var(--first-color-alt);
    width: 400px;
    padding: 20px 0;
}

#btn-shop{
    color: var(--first-color);
    border: 1px solid var(--first-color);
    font-size: 1.5rem;
}


#btn-shop::before{
    content: 'The Store';
    background-color: var(--first-color);
    color: var(--title-color);
}

/*================media paege shop======================*/

@media (max-width: 1150px){
    
    .container__page__shop {
        width: 95%;
    }
    .box img {
       width: 150px;
       height: 150px;
   }
    .box img {
       width: 150px;
       height: 150px;
   }
   .h1__products {
       font-size: 2rem;
   
}
.new__product h4 {
    font-size: 1.3rem;
}}



    

@media (max-width: 1030px){
    .ver__images__shop {
        column-gap: 1rem;
        margin-top: 100px;
    }

    .ver__shop h1 {
        font-size: 7rem;
    }

    .shop__home .shop {
        width: 180px;
        height: 199px;
    }
    

    .shop__home {
       width: 400px;

    }
    #container-1-shop {
        margin-left: 2.5%;
        margin-right: 2.5%;
        width: 95%

}
}
@media (max-width: 960px){
    
    .box-container{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .menu__slider {
        width: 100%;
        margin-top: var(--mb-1);
    }
    .new__product {
        width: 23.5%;
        
    }
    }
    @media (max-width: 630px){
    #btn-shop{
        width: 200px;
        margin-top: 10px;
    }
    .box {
        width: 45%;
        margin-bottom: 10px;
    }
    .box-container{
        gap: 0;
    }
    .menu__lordre__products li:hover{
        transform: scale(1.04);
    }

    }
    @media (max-width: 550px){
    
        .box {
           width: 100%;
        }
        .new__product h4 {
            font-size: 1.1rem;
        }
        .new__product {
            width: 48%;
        }
        
    
        }
        @media (max-width: 300px){
            .new__product {
                width: 100%;
            }
            }

@media (max-width: 870px){
    .sociel{
    width: 100%;
    border-top: 0.1rem solid rgba(255,255,255,0.3);
    bottom: 0;
    height: 50px;

   }
   .sociel ul {
    display: flex;
    gap: 1rem;
    
   }
   .shop__home {
    
    width: 100%;
   }
   .shop__home .shop{
       margin-right: 5px;
   }
   }
@media (max-width: 760px){
    .ver__shop h1 {
        margin-bottom: 0;
    }
    .ver__shop p {
        margin-bottom: 0;
    }
    .shop__home {
        width: 400px;
        margin: 0 auto;
    }
    
   }
   @media (max-width: 450px){
    .ver__shop h1 {
        font-size: 5rem;
    }
    .ver__shop p {
        font-size: 1.3rem;
    }
    .ver__images__shop{
        display: flex;
    }
   
    .shop__home {
        
        flex-direction: column;
    }
    .shop__home .shop {
        width: 70%;
        height: 300px;
        margin: 10px 0;
    }
    .shop__home {
        
        flex-direction: column;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .ver__shop {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;
    }
    .ver__shop p {
        font-size: 1rem;
        text-align: center;
        width: 280px;
        
    }
   }

   @media (max-width: 400px){
  

    #container-for-you{
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
    }
   }

   @media (max-width: 350px){
  

  

    .shop__home .shop {
        height: 230px;
    }

    .ver__shop p span {
        font-size: 2rem;
        color: var(--first-color);
        flex-wrap: wrap;
    }
   }

 /*==========================Flickity======================*/

 #section-flickity{
    margin: 50px 0;
    background-color: var(--title-color);
  
}

#section-flickity h1{
    margin-left: 1%;
    padding: 20px 0;
    color: var(--first-color);

}
#container-flickity{
    padding:25px 0 25px 0;
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
}
.grid-slider-wrap{
     gap: 1rem;
}
.grid-slide{
    margin: 0 10px;
    width: 300px;
    height: 300px;
    position: relative;
}

#section-home-cuisine .food__helth{
      height: 400px;
      width: 300px;
      position: absolute;
      top: 0;
      z-index: 1;
      background-color: var(--title-color);
      left: 0;
      box-shadow: 0 2px 15px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;

}

 #section-home-cuisine .food__helth p{
    font-size:1.5rem;
    text-transform: uppercase;
    text-align: center;
    color: white;
}
#section-home-cuisine .food__helth p span{
    font-size: 2.5rem;
    color: var(--first-color);
}
.grid-slide img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.information__product{
    position: absolute;
    bottom: 0;
    padding: 10px;
    left: 0;
    background-color: var(--first-color);
    
}

.information__product h5{
    color: var(--title-color);
    font-size: 1.5rem;
}
.information__product p{
    color: rgb(150, 150, 150);
}


/*==========================Flickity======================*/

/*=======================MEdia Section Shop===================*/

@media (max-width: 1150px){
    
    .container__page__shop {
        
        width: 95%;
    }
.box img {
    width: 150px;
    height: 150px;
}
.box img {
    width: 150px;
    height: 150px;
}
.h1__products {
    font-size: 2rem;
   
}
.new__product h4 {
    font-size: 1.3rem;
}
#btn-shop{
    margin-bottom: 20px;
}
}


    

@media (max-width: 1030px){
    .ver__images__shop {
        column-gap: 1rem;

    }

    .ver__shop h1 {
        font-size: 7rem;
    }

    .shop__home .shop {
        width: 180px;
        height: 199px;
    }
    

    .shop__home {
       width: 400px;

    }
    #container-1-shop {
        margin-left: 2.5%;
        margin-right: 2.5%;
        
        width: 95%

}
}
@media (max-width: 960px){
    
    .box-container{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .menu__slider {
        width: 100%;
        margin-top: var(--mb-1);
    }
    .new__product {
        width: 23.5%;
        
    }

    
    }
    @media (max-width: 630px){
    
    .box {
        width: 45%;
        margin-bottom: 10px;
    }
    .box-container{
        gap: 0;
    }
    .menu__lordre__products li:hover{
        transform: scale(1.04);
    }

    }
    @media (max-width: 550px){
    
        .box {
           width: 100%;
        }
        .new__product h4 {
            font-size: 1.1rem;
        }
        .new__product {
            width: 48%;
        }
        
    
        }
        @media (max-width: 300px){
    
            
            
            .new__product {
                width: 100%;
            }
            
        
            }

@media (max-width: 870px){
    .sociel{
    width: 100%;
    border-top: 0.1rem solid rgba(255,255,255,0.3);
    bottom: 0;
    height: 50px;

   }
   .sociel ul {
    display: flex;
    gap: 1rem;
    
   }
   .shop__home {
    
    width: 100%;
   }
   .shop__home .shop{
       margin-right: 5px;
   }
   }
@media (max-width: 760px){
    .ver__shop h1 {
        margin-bottom: 0;
    }
    .ver__shop p {
        margin-bottom: 0;
    }
    .shop__home {
        width: 400px;
        margin: 0 auto;
    }
    
   }
   @media (max-width: 450px){
    .ver__shop h1 {
        font-size: 5rem;
    }
    .ver__shop p {
        font-size: 1.3rem;
    }
    .ver__images__shop{
        display: flex;
    }
   
    .shop__home {
        
        flex-direction: column;
    }
    .shop__home .shop {
        width: 70%;
        height: 300px;
        margin: 10px 0;
    }
    .shop__home {
        
        flex-direction: column;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .ver__shop {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;
    }
    .ver__shop p {
        font-size: 1rem;
        text-align: center;
        width: 280px;
        
    }
   }

   @media (max-width: 400px){
  

    #container-for-you{
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
    }
   }

   @media (max-width: 350px){
  

  

    .shop__home .shop {
        height: 230px;
    }

    .ver__shop p span {
        font-size: 2rem;
        color: var(--first-color);
        flex-wrap: wrap;
    }
   }






/*================== SECTION - shop/ ==============*/
#section-home-cuisine{
    background-color: var(--title-color);
}
#container-home-cuisine{
    display: flex;
    padding-bottom:30px ;

}

.welcom__cuisine{
    width: 400px;
    padding: 50px 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 15px rgba(0,0,0,0.2);
}

.welcom__cuisine h1{
    text-align: center;
    padding: 0 10px;
    color: var(--first-color);
}

.welcom__cuisine p{
    padding: 0 30px;
    text-align: center;
    margin: 20px 0;
}
.main-carousel{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 30px 20px;
    width: 70%;
    box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
}

.images__food .carousel-cell{
    width: 200px;
    height: 300px;
    background-image: url('./images/eiliv-sonas-aceron-ZuIDLSz3XLg-unsplash.jpg');
}


/*================= client  ======================*/

#section-home-client{
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: var(--title-color);
}

#container-home-client{
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    
}
.clients{
    width: 45%;
    position: relative;
    height: max-content;
    width: 45%;
    position: relative;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-self: baseline;
}

.clients .grid-slide{
    background-color: var(--first-color);
    
}

.grid-slider-wrap .grid-slide{
    padding: 0 20px 50px;
    height: 300px;
    text-align: center;
    border-radius: 10px;
    position: relative;
    transform: translateX(-200px);
}

.grid-slide .queto{
    width: 100%;
    height: auto;
    opacity: 0.2;
    position: absolute;
    top: 10%;
    
}

.clients .title__section{
    width: 100%;
    text-align: center;
}

.clients .title__section h1{
    color: var(--first-color);
}

.details{
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 40px;
}

.image__client{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative; 
}

.image__client img{
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    object-fit: cover;
}

.content p{
    color: var(--title-color);
    font-weight: bold;
    line-height: 1.5rem;

}

.details h3{
    color:var(--title-color);
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;

}

.details h3 span{
    color: #999;
    font-size: 12px;

}


  

  /*================= client / ======================*/

  /*=====================Sckils========================*/
  .cards__sckils{
      /*padding-top: 100px;*/
      width: 45%;
      height: 800px;
  }

  
  .cards__sckils h1{
       color: var(--first-color);
  }
  .cards{
      width: 100%;
    background-color: var(--title-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.cards::before{
    position: absolute;
    width: 100%;
    content: 'SKILLS';
    display: flex;
    top: 30%;
    transform: rotate(90deg);
    justify-content: center;
    font-size: 10rem;
    opacity: 0.2;
}
svg{
    position: relative;
    width: 150px;
    height: 150px;
    z-index: 1000;
}

svg circle{
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--title-color);
    stroke-width: 10;
    stroke-linecap:round ;
    transform: translate(5px, 5px);
}

svg circle:nth-child(2){
    stroke-dasharray: 300;
    stroke-dashoffset: 120;
}

.card{
    position:relative;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    border-radius: var(--border-radius);
    text-align: center;
    overflow: hidden;
    transition: var(--o-transition);
   /* box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);*/
    z-index: 1;
    background-position: center;
    background-size: cover;

}
.card img{
    width: 100%;
    height: 100%;
    position: absolute;
}

.card:hover{
}
.card::before{
    content: '';
   /* background-color: var(--title-color);*/
    mix-blend-mode: color;
    position: absolute;
    background-size: cover;
    background-position: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    transition: 0.5s;
}
.card:hover:before{
    background: none;
}
.parcent{
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto;
    margin-bottom: 20px;


}

.parcent .number{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.parcent .number h2{
    color: white;
    font-size: 3rem;
    opacity: 0.7;
    transition: var(--o-transition);
    
}
.parcent .number h2 span{
    font-size: 2rem;
    color: var(--first-color);
}

.text{
    color: var(--first-color);
}

svg circle:nth-child(2){
    stroke-dasharray: 440 ;
    stroke-dashoffset: 440 ;
}

.card svg circle:nth-child(2){
    stroke: var(--first-color) ;
}

.card:nth-child(1) svg circle:nth-child(2){
    stroke-dashoffset: calc(440 - (440 * 90) / 100) ;

}

.card:nth-child(2) svg circle:nth-child(2){
    stroke-dashoffset: calc(440 - (440 * 80) / 100) ;

}
.card:nth-child(3) svg circle:nth-child(2){
    stroke-dashoffset: calc(440 - (440 * 65) / 100) ;

}
.card:nth-child(4) svg circle:nth-child(2){
    stroke-dashoffset: calc(440 - (440 * 50) / 100) ;

}


.card p{
    color: white;
    padding: 0 10px;
    height: 0;
    overflow: hidden;
    transition: var(--o-transition);
}

.card:hover.card p{
    height: 55px;
}

.card:hover.card .parcent .number h2{
    font-size: 4rem;
    opacity: 1;
}
/*=====================Sckils=============================*/

/*=====================Media Clients And Skills=============*/
@media (max-width: 930px){
    .cards__sckils {
        width: 100%;
    }
    .clients{
        width: 100%;
    }
}

@media (max-width: 450px){
    .card{
        width: 100%;
    }
}

/*=====================Media Clients And Skills/=============*/




  /*================= location__contacte ======================*/
  #section-home-contact{
      background-image: linear-gradient( to bottom, var(--title-color), transparent);
  }
  #container-home-contact{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    padding: 50px 0;
  }
.location__contacte__info{
    display: flex;
    width: 100%;
    border-radius: var(--border-radius);
    flex-wrap: wrap;
    justify-content: space-between;

}

.contact__maps{
    width: 30%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.contacte{
    text-align: center;
    padding: 20px 0;
    background-color: var(--title-color);
    width:30%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.contacte .title__section .title{
    font-size: 0.8rem;
}

.contacte__info{
    background-image: url('./images/samuel-girven-fqMu99l8sqo-unsplash (1).jpg');
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 30%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}

.contacte__info .info{
    display: flex;
    gap: 2rem;
    align-items: center;
    margin: 2rem 0;
    margin-left: 20px ;

}

.contacte__info .info h3{
    color: var(--first-color);
    text-align: left;
}
.href__phone{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--title-color);
    /* display: grid; */
    display: flex;
    align-items: center;
    justify-content: center;
}

#titel-contacte{
    font-size: 2rem;
    margin: 1rem 0;
    color: var(--first-color);
}

.contacte form{
    display: grid;
    gap: 1rem;
}
.inputfield{
    width: 60%;
    margin: 0 auto;
    margin-bottom: 15px;
    position: relative;
    
  }

  .inputfield span{ 
    color: var(--title-color);
    font-size: 1rem;
    transition: all 0.3s ease;
    position: absolute;
    top: 0;
    padding: 10px;
    pointer-events: none;
    left: 0;
    color: white;
 }

 .inputfield input,
 .inputfield textarea{
   width: 100%;
   outline: none;
   font-size: 1rem;
   padding: 10px 10px;
   transition: all 0.3s ease;
   background-color: transparent;
   resize: none;
   color:white;
   outline: none;
   border: 1px solid var(--title-color);
   border-bottom: 1px solid var(--first-color);

   

 }

 
.inputfield input:focus~ span,
.inputfield input:valid~ span{
transform: translateY(-15px);
font-size: 0.9rem;
padding: 0;
}

.inputfield textarea:focus~ span,
.inputfield textarea:valid~ span{
transform: translateY(-25px);
font-size:0.9rem ;
}




#submit{
    padding: 10px;
    color: var(--first-color);
    background-color: var(--title-color);
    border: none;
    cursor: pointer;
}



.sport__city h2{
     font-size: 2rem;
     color: white;
     transform: translate(20px, -10px);
     
    
}

.sport__city h2 span{
    color: var(--first-color);
    
}
    /*================= location__contacte / ======================*/


    /*================  Media Conatate ===================*/
@media (max-width: 1050px){
    .location__contacte__info{
        grid-template-columns:auto ;
    }
}

    /*================  Media Conatate ===================*/


    /*================= Foother / ======================*/

#section-foother{
    /*background-image: url("./images/images.home/bg-home.jpg");*/
    background-color: rgb(150, 150, 150);
    position: relative;
}

#container-fother{
    padding: 0;
}


footer{
    padding: 100px 0 50px 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden;
}

footer h1{
    color: var(--first-color);
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

footer h1::before{
     content: '';
     bottom: 0;
     left: 0;
     position: absolute;
     width: 30%;
     height: 2px;
     background-color: var(--first-color);
}

.about__foother p{
    width: 300px;
    margin-bottom: 20px;
}

.about__foother ul{
    gap: 1rem;
}

.about__foother #sociel-foother{
    margin-bottom: 10px;
}

footer .menu__foother{
    flex-direction: column;
    gap: 0.5rem;
}


footer ul li{
    cursor: pointer;
    position: relative;
    padding: 5px ;
    transition: var(--o-transition);
    
}

footer ul li a{
    font-size: 1.2rem;
}



footer ul li::before{
    position: absolute;
    content: '';
    background-color: var(--first-color);
    bottom: 0;
    width: 0%;
    transition: var(--o-transition);
    right: 0;
    height: 1px;
    
}


footer ul li:hover:before{
    width: 100%;
    left: 0;
}

.Working__Hours h2{
    color: var(--first-color);
    margin-bottom: 10px;
}

.Working__Hours h3{
    margin: 10px 0;
    padding: 5px;
    color: var(--title-color);
    border: 1px solid yellow;
    text-align: center;
    background-color: var(--first-color);
}

.Working__Hours .sunday{
    color: green;
}

    /*================= Foother / ======================*/

    @media (max-width:1000px){
        .contacte__info,.contact__maps, .contacte{
            width: 100%;
        }

        
        
    }

    @media (max-width: 300px){
        .about__foother p {
            width: 100%;
        }
    }