@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root{
    --font:"Inter", sans-serif;

    --color-primary: rgb(237, 230, 9);
    --color-secondary: rgb(245, 76, 72);
    --color-background: rgb(0, 0, 0);

    --fs-btn: 21px;
}

/**
* ! removing default styles of the browser 
**/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  a{
    text-decoration: none;
  }


/**
* ! Style rules for text colors
**/

  .text-yellow {
    color: var(--color-primary);
  } 
  
  .text-red {
    color: var(--color-secondary);
  }
  

  /**
  * ! Style rules for buttons
  **/
  
  .primary-btn{
    width: 320px;
    max-width: 100%;
    background-color: var(--color-background);
    font-family: var(--font);
    font-size: var(--fs-btn);
    font-weight: 500;
    padding: 20px 70px;
    border-radius: 0 40px 0 40px;
    border: 5px solid var(--color-primary);
    cursor: pointer;
    -webkit-box-shadow: 10px 12px 24px -5px rgba(237,230,9,.4);
    -moz-box-shadow: 10px 12px 24px -5px rgba(237,230,9,.4);
    box-shadow: 10px 12px 24px -5px rgba(237,230,9,.4);
    margin-top: 30px;
  }

  .primary-btn a{
    color: var(--color-primary);
  }

  .secondary-btn-icon{
    color: var(--color-background);
    background-color: var(--color-primary);
    padding: 8px 16px;
    border: none;
    border-radius: 0 32px 0 32px;
    align-items: center;
    cursor: pointer;
  }
  
  
  /**
  * ! Style rules for responsive images
  **/
  
  img{
    max-width: 100%;
    height: auto;
  }
  
  /**
  * ! Common style rules
  **/
  
  .container {
    max-width: 1140px;
    width: 90%;
    margin: auto;
  }
  
  .text-center {
    text-align: center;
  }

  /**
  * ! style rules for body area
  **/

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

  /**
  * ! style rules for body HEADER area
  **/

  .header{
    padding: 60px 0 30px 0;
  }

  .navbar__logo{
    display: flex;
    justify-content: center;
  }

   /**
  * ! style rules for body BUTTON area
  **/

  .button_area{
    min-height: 45vh;
    display: flex;
    align-items: center;
  }

  .all-btns{
    display: flex;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    row-gap: -18px;
    column-gap: 20px;
    margin-top: 0;
  }

  /**
  * ! style rules for body FOOTER area
  **/
  
  .footer{
    padding: 60px 0 30px 0;
  }

  .footer_content{
    display: flex;
    column-gap: 20px;
    justify-content: center;
  }

  .footer_right{
    display: flex;
    flex-direction: column;
    row-gap: 12px;
  }

  .footer_right .top{
    font-size: 28px;
    font-weight: 500;
  }

  .footer_right .bottom{
    font-size: 38px;
    font-weight: 800;
  }


/**
* ! Media query rules are here
**/

  @media (max-width: 1200px) {
    .container {
      max-width: 970px;
      width: 90%;
    }
  }

  @media (max-width: 1024px) {
    .container {
      max-width: 740px;
      width: 90%;
    }
    .secondary-btn-icon{
      padding: 6px 12px;
      border-radius: 0 30px 0 30px;
    }
    .footer_right .top{
      font-size: 20px;
    }
    .footer_right .bottom{
      font-size: 30px;
    }
  }

  @media (max-width: 768px) {
    .container {
      max-width: 500px;
      width: 90%;
    }
    .primary-btn{
      font-size: 18px;
    }
    .secondary-btn-icon{
      padding: 5px 10px;
      border-radius: 0 26px 0 26px;
    }
    .footer_right .top{
      font-size: 21px;
    }
    .footer_right .bottom{
      font-size: 28px;
    }
  }
  
  @media (max-width: 568px) {
    .container {
      max-width: 90%;
    }
    .secondary-btn-icon{
      padding: 4px 8px;
      border-radius: 0 24px 0 24px;
    }
    .footer_right .top{
      font-size: 19px;
    }
    .footer_right .bottom{
      font-size: 26px;
    }
  }