*,
*::before,
*::after{
    box-sizing: border-box;
}

body {
    background-color:  rgb(28, 34, 48);
    background-image: url("images/bg-curvy-desktop.svg");
    background-repeat: no-repeat;
    background-size: 2000px;
    background-position: center;
    margin: 0;
    overflow-x: hidden;
    
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400, 700;
    color: white;
  }
  h1, 
  h2,
  h3,
  h4,
  h5,
  h6
  {
font-family: 'Raleway', sans-serif;
  }

  .logo {
    display: flex;
    flex-flow: row wrap;
    justify-self: start;
    float: left;
    margin-top: -50px;
    
  }

  .illus{
      display: block;
      margin: auto;
    text-align: center;
      justify-items: center;
  }
  .mc {
    color: white;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    font-size: 10px;
    
  }
  .item {
    margin: 1em;
    padding-right: 1em;
    color:rgb(192, 189, 189);
    text-decoration: none;

    }

    .item:hover{
        color:#fff;
        text-decoration: underline;
    }

    .gs {
      color: white;
      text-align: center;
      
      padding: 20px;
      margin: 0.5px ;
      background-color:rgb(140, 218, 228);
      border-radius:30px;
      width:300px;
    
      margin:auto;
    }
    .types {
      padding: 12vh 0;
      text-align: center;
      display: flex;
      margin: 2 4vw;
      
      flex-direction: column;
      flex-basis: 40%;
      height: 100vh;
      display: grid;
      grid-template-columns: auto-fit, 200px;
      grid-template-rows:  200px;
      grid-template-areas: 
      "type1 type2"
      "type3 type4";
      text-align:center;
    }

    .content{
        margin-left:100px;
        margin-right: 100px;
    }


    .tp{
        padding: 12vh 0;
      text-align: center;
      display: flex;
      margin: 2 4vw;
      flex-direction: row;
      flex-basis: 40%;
      height: 100vh;
      display: grid;
      grid-template-columns: repeat (auto-fit, minmax(300px, 1fr));
      grid-template-rows:  50px;
      grid-template-areas: "tp-col tp-col tp-col";
      grid-column-gap: 30px; 
      text-align:center;

    }

    .tp-col{
        padding:20px;
        background-color: rgb(33, 41, 60);
        border-radius:8px;
        height:200px;
    }

    .isp {
        padding: 12vh 0;
        text-align: center;
        display: flex;
        margin: 2 4vw;
        
        flex-direction: column;
        flex-basis: 30%;
        height: 100vh;
        display: grid;
        grid-template-columns: auto-fit, 200px;
        grid-template-rows: auto-fit, 200px;
        grid-template-areas: 
        "im sp"
      }

      .footer {
      
        text-align: center;
        display: flex;
        margin: 2 4vw;
        flex-direction: column;
        flex-basis: 30%;
        height: 100vh;
        display: grid;
        grid-template-columns: auto-fit, 200px;
        grid-template-rows: auto-fit, 200px;
        grid-template-areas: "footer-col footer-col footer-col footer-col footer-col"
      }

  
      .list > ul, li{
        list-style-type: none; 
        text-align:left; 
        margin-bottom:10px;
      }
    
     
      .sp {
        padding: 10vh 0;
        color: white;
        display: flex;
    text-align:left;
        flex-basis: 50%;
      
    }
    .sp1:hover{
        color: cyan;
        text-decoration: underline;
    }
    .subscribe{
        background-color: rgb(28, 34, 48);
        max-width: 600px;
        padding: 30px;
        text-align: center;
        position: absolute;
        margin: auto;
        margin-top:-100px;
       left: 300px
    }
    .subscribe-btn {
        color: white;
        text-align: center;
        
        padding: 10px;
        background-color:rgb(140, 218, 228);
        border-radius:30px;
        max-width:200px;
        margin-top: 10px;

     
      }

      .form-input{
          border:none;
          padding:10px;
          border-radius: 20px;
          max-width:350px
      }
      .form-input:hover, .form-input:focus, .form-input:active{
          border:none;

      }

      .action{
          background-color: rgb(12, 21, 36);
          padding-top: 200px;
      }

    @media (min-width: 40rem) {
    .types {
      flex-direction: row;
    }
}

    @media(max-width: 600px){
        .content{
             margin: 0;
        }

        .types{
            display:block;
        
        }

        .tp{
            display: block;
            margin-bottom: 200px;
        
        }

        .tp-col{
            margin-top:30px;
        }
        .isp{
            display: block;
            margin-bottom: 200px;
        
        }
    
        .footer{
            display: block;
            margin-bottom: 100px;
        
        }

        .footer-col{
            margin-top:30px;
        }

        .subscribe{
            left:0;
        }
        
    }

    .container{
        padding:20px;
    }

    .logo2 {
        position: absolute;
        margin-top: -100px; 
      }

      @media (min-width: 40rem) {
        .isp {
          flex-direction: row;
        }
        }