/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  
  
  body {
    /* 3. Add accessible line-height */
    line-height:1.5;
    
  }
  
  /* 5. Improve media defaults */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  
  /* 6. Inherit fonts for form controls */
  input, button, textarea, select {
    font: inherit;
  }
  
  
  
  :root{
      --clr-White: hsl(0, 0%, 100%);
      --clr-transparent_white: hsla(0, 0%, 100%, 0.75);/*(main paragraph) */
      --clr-Very_dark_blue : hsl(233, 47%, 7%);/*(main background)*/
      --clr-Dark_desaturated_blue: hsl(244, 38%, 16%);/*(card background)*/
      --clr-Soft_violet: hsl(277, 64%, 49%);/*(accent)*/
      --ff-regular: "Inter", sans-serif;
      --ff-stye:"Lexend Deca", sans-serif;
  }
  
  *{
      margin:0;
      padding:0;
      box-sizing: border-box;
  }
  
  body{
      background-color:var(--clr-Very_dark_blue);
      color:var(--clr-transparent_white);
      font-family:var(--ff-regular);
      display: grid;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  
  .wrapper{
      background-color: var(--clr-Dark_desaturated_blue);
      margin:1.5rem;
      
      border-radius:10px;
      
      
  }
  
  .image_box{
      max-width:100%;
      
      position: relative;
      isolation: isolate;
  }

  .image_box::after{
    content:'';
    position: absolute;
    z-index: -1;
    inset: 0;
    background-color: var(--clr-Soft_violet);
  }
  
  img{
      opacity:0.5;
      
  }
  
  .business_content{
      padding:2rem 1rem 0rem 1rem;
  }
  
  .business__txt{
      text-align: center;
  }
  
  .business_content__quote{
      color:var(--clr-White);
      font-size:2.2rem;
      line-height: 1.2;  
  }
  
  .insight{
      color: var(--clr-Soft_violet);
  }
  
  .txt-padding-bottom{
      padding-bottom: 2rem;
  }
  
  .business_content__services{
      font-size: 0.938rem;
  }
  
  .business_content__network{
      padding-top:2rem;
  }
  
  
  .business_content__network li{
      list-style:none;
      padding-bottom:1.8rem;
  }
  
  
  .business_content__network__numbers--white{
      font-size:1.500rem;
      color: var(--clr-White);
      font-weight: 600;
  }
  
  .business_content__network__catagory--ff-size{
      font-size: 0.875rem;
      letter-spacing:0.063rem;
  }





@media screen and  (min-width:45rem){
    .wrapper{
        display: grid;
        grid-template-columns:1fr 1fr;
        /*reverse the column*/
        direction: rtl;
        max-width:70rem;
        place-content:center; 
    }

    .image_box{
        height: 100%;   
    }

    img{
        min-width:100%;
        min-height: 100%;
    }

    .business__txt{
        text-align:left;
    }
  

    .business_content{
        padding: 4.5rem 4.5rem 2.5rem 4.5rem;
        
    }

    .business_content__services{
        
        text-align: left;
    }

    .business_content__network{
        display: flex;
        
        /* justify-items:space-around;
        align-items:space-arround; */
    }

    .business_content__network li{
        display: flex;
        flex-direction: column;
        align-items: space-evenly;
    }

    li{
        flex-grow: 2;
    }    
}