@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300&family=Inter+Tight:wght@300&family=Quicksand&family=Rubik&family=Tajawal:wght@300&display=swap');


#background-img{
     background: linear-gradient(rgba(0, 0, 0, 0.438),rgba(0, 0, 0, 0.487),rgba(0, 0, 0, 0.34)), url(../images/slides/comptabilite-casablanca.webp);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     height: 520px;
}
#back-con-img{
       margin-top: 80px;
       margin-left: 560px;
}
#background-img h2{
       color:whitesmoke;
       font-weight: 700;
       font-size: 60px;    
       line-height: 1.3;
       text-align: center;
}
.buttons-back-con{    
   width: 500px;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
margin: 33px 0 0 10px;
}
.price-detele-1{
       color: #f31270;
        font-size: 44px; 
        font-family: 'Quicksand', sans-serif;
}
#background-img h3{
     color: #e9ebef;
     font-weight: 900;
     margin:30px 0px 30px 0px;
      font-size: 36px;
      font-family: 'Quicksand', sans-serif;
}
#button-back-1{
       background-color: #EE277A;
       color: white;
       font-family: 'Quicksand', sans-serif;
       font-size: 15px;
       font-weight: 900;
       border: 0px;
       border-radius: 32px;
       padding: 10px 45px 10px 45px;
       margin-right: 10px;
       height: 50px;
}
#button-back-1:hover{
       background-color: #e81f73d2;
       color: #1c4671;
       box-shadow: 1px 3px 10px  rgba(245, 245, 245, 0.465);
}

#button-back-2{
       background-color:white;
       font-family: 'Quicksand', sans-serif;
       color: #EE277A;
       font-size: 15px;
       font-weight: bold;
       border: 0px;
       border-radius: 32px;
       padding: 10px 50px 10px 50px;
       height: 50px;
}
#button-back-2:hover{
       color: #1c4671;
       box-shadow: 1px 3px 10px  rgba(245, 245, 245, 0.465);
}

@media only screen and (max-width:998px){
       #background-img h2{
              color:whitesmoke;
              font-weight: 800;
              font-size: 39px;                   
       }
      
       
}

@media only screen and (max-width:700px){
       #packs{
              background-color: whitesmoke;     
              border-radius: 32px;
              margin: 20px 20px 40px 20px;
              font-family: 'Tajawal', sans-serif;
              box-shadow: 0px 5px 10px 1px rgba(128, 128, 128, 0.104);
              
       }
       #justify-packs{
              margin: 10px 10px 10px 10px;
       }
       #back-con-img{
              display: grid;
              align-items: center;
              justify-content: space-around;
              margin: 0 0 0 10px;
       }
       #background-img{
              background: linear-gradient(rgba(0, 0, 0, 0.438),rgba(0, 0, 0, 0.487),rgba(0, 0, 0, 0.34)), url(../images/slides/comptabilite-casablanca.webp);
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              height: 300px;
         }

       #background-img h2{
              color:whitesmoke;
              font-weight: 800;
              font-size: 24px;
              line-height: 1.5;               
       }

       #background-img h3{
              color: #e9ebef;
              font-weight: 700;
               font-size: 20px;
               font-family: 'Quicksand', sans-serif;
       }
       
       .price-detele-1{
              
              color: #f31270;
               font-size: 29px; 
       }
       .buttons-back-con{    
              width: 300px;
              display: grid;
              justify-content: center;
              padding-right:20px ;
              margin-top: 20px;
        }
        #button-back-1{
              margin-bottom: 10px;
              
        }
        
        .recommander{
              font-size: 1px;
              color: white;
              text-shadow: 1px 2px 60px whitesmoke;
              background-color: #f31672fd;
              padding: 20px 40px 20px 40px;
              box-shadow: 1px 1px 40px #f31672fd ;
              border-radius: 52px;
       }
}



.title-packs{
       display: flex;
       justify-content: center;
       text-align: center;
       font-size: 40px;
       color: #1c4671;
       margin: 50px 0px 20px 0px;
       font-family: 'Rubik', sans-serif;
       
}
.line-packs{
       width: 800px;
       display: flex;
        justify-content: center; 
        margin-top: 30px;
        margin-bottom: 60px;
        
}
.recommander{
       font-family:'Rubik', sans-serif;
       font-size: 26px;
       text-transform: uppercase;
       letter-spacing: 2px;
       color: white;
       text-shadow: 1px 2px 60px whitesmoke;
       background-color: #f31672fd;
       padding: 20px 40px 20px 40px;
       box-shadow: 1px 1px 40px #f31672fd ;
       border-radius: 52px;
}
#packs{
       background-color: whitesmoke;     
       border-radius: 32px;
       margin: 20px 0px 40px 0px;
       font-family: 'Tajawal', sans-serif;
       box-shadow: 0px 5px 10px 1px rgba(128, 128, 128, 0.104);
       
}

#packs:hover{      
       box-shadow: 0px 5px 10px 1px rgba(128,128,128,0.375);
}
#backendPacks{
       padding: 40px 40px 40px 40px;

}
#packs h2{
       font-family: 'Rubik', sans-serif;
       color: #1c4671;
       font-size: 42px;
       margin: 50px 0px 20px 0px ;
       font-weight: 700;
}
#packs h3{
       font-size: 30px;
       font-weight: 600;
       color: #EE277A;
       margin: 20px 0px 20px 0px ;
}
.price-delete{
       font-size: 24px;
       color: #1c4671;
}
#packs ul li{
       line-height: 45px;
       font-size: 18px;
       font-weight: 800;
}
#button-packs{
     
       width: 290px;
       background-color: #EE277A;
       color: whitesmoke;
       font-size: 18px;
       font-weight: 900;
       border: 0px; 
       border-radius: 32px;
       margin-top: 50px;
}
#button-packs:hover{
       
       transition-duration: 0.5s;
       box-shadow: 0px 5px 10px 1px #ee277a8a;
}
@media only screen and (max-width: 971px) {
       .recommander{
              font-size: 20px;
              color: white;
              text-shadow: 1px 2px 60px whitesmoke;
              background-color: #f31672fd;
              padding: 20px 30px 20px 30px;
              box-shadow: 1px 1px 40px #f31672fd ;
              border-radius: 52px;
       }
}
@media only screen and (max-width: 1291px) {
       #packs h2{
              font-family: 'Rubik', sans-serif;
              color: #1c4671;
              font-size: 28px;
              margin: 0px 0px 20px 0px ;
              padding-top: 50px;
              justify-content: center;
              text-align: center;
              font-weight: 800;
       }
       #backendPacks{
              padding: 8px 20px 20px 20px;
       }
       #packs h3{
              font-size: 20px;
              color: #EE277A;
              margin: 20px 0px 20px 0px ;
       }
      
}
@media only screen and (max-width: 1700px) and (min-width: 1533px) {
       #background-img h3{
              color: #e9ebef;
              font-weight: 900;
              margin:26px 0px 30px 0px;
              font-size: 32px;
              font-family: 'Quicksand', sans-serif;
         }
         #background-img{
              height: 530px;
         }
         #background-img h2{
              color:whitesmoke;
              font-weight: 700;
              font-size: 62px;   
       }
}


/* style : line :185 */


/*colors : #2e3192  | #EE277A*/

/* fonts : 
font-family: 'Barlow', sans-serif;
font-family: 'Inter Tight', sans-serif;
font-family: 'Quicksand', sans-serif;
font-family: 'Rubik', sans-serif;
font-family: 'Tajawal', sans-serif;
 */
/* ---------------------------------this is style in packs out---------------------------------------------------------------*/
.title-pro{
       font-size:42px;
       color: #f31270; 
       font-family: 'Tajawal', sans-serif;
       text-transform: uppercase;
       margin-top: 100px;
}
#card-services{
       border-radius: 32px;
}