.alegreya-sans-sc-medium {
       font-family: "Alegreya Sans SC", sans-serif;
       font-weight: 500;
       font-style: normal;
     }
     .alegreya-sans {
       font-family: "Alegreya Sans SC";
       font-weight: 900;
       font-size: 28px;
       font-style: normal;
     }
     .list-2 {
         display: flex;
         position: relative;
         background-color: #0C2A2A;
         border-width: 8px 0px 0px 0px;
         border-style: solid solid solid solid;
         border-color: #ff496c #ff496c #ff496c #ff496c;
         color: #964b00;
         width: auto;
         height: 900px;
    }
    .all-cards {
          height: 100px;
          display: flex;
          row-gap: 1em;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          margin: auto;
          width: 1400px;
          height: 1300px;
          background-color: #0C2A2A;
          background-image: url(./static/background-image/hex-background-networking.jpg);
          background-repeat: no-repeat;
    }

    .first-row {
          display: flex;
          position: relative;
          text-align: justify;
          align-items: center;
          justify-content: center;
          flex-direction: row;
          flex-wrap: wrap;
          width: auto;
          height: 400px;
          margin: 30px;
          background-color: #0C2A2A;
    }

    .two-row {
          display: flex;
          margin-top: 10px;
          flex-direction: row;
          position: relative;
          text-align: justify;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          width: auto;
          height: 400px;
          margin: 30px;
          background-color: #0C2A2A;
    }
    .container-left {
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
         position: relative;
         background-color: white;
         float: left;
         padding: 20px;
         width: auto;
         margin-top: 20px;
         margin-left: auto;
         margin-right: auto;
         height: 300px;
    }

    .title-container {
         position: relative;
         text-align: center;
         justify-content: center;
         align-items: center;
         max-width: 100;
         margin-left: 120px;
         margin-right: 120px;
         margin: auto;
         height: 100px;
    }
    @media screen and (max-width: 1250px)  {
        .first-row {
            width: 800px;
            height: 600px;
        }
        .two-row {
            width: 800px;
            height: 600px;
        }
    }
    @media screen and (max-width: 950px)  {
        .first-row {
            width: 700px;
            height: 600px;
        }
        .two-row {
            width: 700px;
            height: 600px;
        }
    }
    @media screen and (max-width: 850px)  {
        .first-row {
            width: 600px;
            height: 600px;
        }
        .two-row {
            width: 600px;
            height: 600px;
        }
    }
    @media screen and (max-width: 750px)  {
        .first-row {
            width: 500px;
            height: 800px;
        }
        .two-row {
            margin-top: 100px;
            width: 500px;
            height: 800px;
        }
        .container-left {
            margin-top: 200px;
            height: 700px;
        }
    }
    @media screen and (max-width: 650px)  {
        .first-row {
            width: 500px;
            height: 800px;
        }
        .two-row {
            margin-top: 100px;
            width: 500px;
            height: 800px;
        }
        .container-left {
            margin-top: 200px;
            height: 700px;
        }
    }
    @media screen and (max-width: 550px)  {
        .first-row {
            width: 400px;
            height: 800px;
        }
        .two-row {
            margin-top: 100px;
            width: 400px;
            height: 800px;
        }
        .container-left {
            margin-top: 200px;
            height: 700px;
        }
    }
    @media screen and (max-width: 450px)  {
        .first-row {
            width: 350px;
            height: 800px;
        }
        .two-row {
            margin-top: 100px;
            width: 350px;
            height: 800px;
        }
        .container-left {
            margin-top: 200px;
            height: 700px;
        }
    }