/*
Theme Name: AudioJIN
Theme URI: https://www.audiojin.pk
Author: hammad ahmed
Author URI: https://www.audiojin.pk
Description: basic theme for audiojin.pk an ecommerec site for audio and podcast equipment 
Version: 1.0
Text Domain: audiojin

*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@100&family=Roboto:wght@300&display=swap');
/*
font-family: 'Bebas Neue', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Roboto', sans-serif;*/


:root{

  --color-primary: #7380ec;
  --color-danger: #ff7782;
  --color-success: #41f1b6;
  --color-warning: #ffbb55;
  --color-white: #fff;
  --color-info-dark: #7d8da1;
  --color-info-light: #dce1eb;
  --color-dark: #363949;
  --color-light:rgba(132,139,200,0.18);
  --color-primary-variant: #111e88;
  --color-dark-variant: #677483;
  --color-background: #f6f6f9;

  --color-background-test :red;
  --card-border-radius: 2rem;
  --border-radius-1: 0.4rem;
  --border-radius-2: 0.8rem ;
  --border-radius-3: 1.2rem;

  --card-padding: 1.8rem;
  --padding-1: 1.2rem;

  --box-shadow: 0 2rem 3rem var(--color-light);

}
*,*::after,*::before{

  box-sizing: border-box;
}
*{

  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}


a{
  color: var(--color-dark);
}

img{

      width: 100%;

  }
}

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: poppins , sans-serif;
    font-size: 0.88rem;
    background: var(--color-background);
    overflow-x: hidden;
    color: var(--color-dark);

}

h1{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: #fff;
  padding: 10px;
  font-weight: 300;
}
h3{
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: #fff;
    margine-right: 30px;
}

span.alert{
      
      font-family: 'Poppins', sans-serif;
      display: block;
      font-size: 2rem;
      margin: 0 10px;
}

.logo{

    text-align: center;
    display: block;
    font-size: 10rem;
    color: #C1292E;
    font-weight: 100;
    font-weight: bolder;
}

.logo-start{
  
    font-weight: 100;
    letter-spacing: 0.008rem;
}

.logo-end{
    font-family: 'Poppins', sans-serif;
    color: #C1292E;
    font-weight: 100;
    font-weight: bolder;
    text-transform: uppercase;
}

  .center-content h3{   
      font-family: poppins , sans-serif;
      letter-spacing: 0.2rem;
   }
/*  Flex Box Center  */

.boxes{

    display: flex;
    background-color: var(--color-warning);
    width: 100%;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
}

.box{

    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;

}

.center-content{

    display: flex;
    width: 95%;
    justify-content: center;
    padding: 0;
   
}

@media (max-width:450px){

   .center-content{

      margin: 0;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;


   }

   span.alert{

    font-weight: 900;
   }
.logo{

 
    font-size: 7rem;
  }


}


@media (max-width:768px){

  .box{

    padding: 20px;
  }
     .center-content{

      margin: 0;
   }

   html{

      font-size: 50%;
   }

 }

 @media (max-width:991px){

   html{

      font-size: 60%;
   }
     .center-content{

      margin: 0;
   }
}