style.css

:root {
  --background-color:#181b21;
  /* Variable for box Starts */
  --box-font:system-ui,Arial, Helvetica, sans-serif;
  --box-ptext:white;
  --box-background:#22262e;
   /* Variable for box Ends */
  background-color:var(--background-color);
}

body {
  
  margin-left:4em;
  margin-right:4em;
  
}
/*HTML code for Heading Starts*/

.heading-x {
  background-color:var(--box-background);
  border: 0px solid black;
  border-radius:.25em;
  margin-bottom:40px;
  margin-left:100px;
  margin-right:140px;
  padding:0px 35px 5px 35px;
  letter-spacing:0.8px;
  height:auto;
}

.heading-x h1 {
  font-family:var(--box-font);
  color:#8c9595;
  font-size:50px;
  margin-bottom:-10px;
  letter-spacing:1.2px;
  text-align:left;
  font-weight: 600;
}
.heading-x p {
  font-family:var(--box-font);
  color:white;
  text-align: justify;
  text-justify: inter-word;
  font-size: 1.25rem;
  font-weight: 300;
}

/*HTML code for Heading Ends*/

/*CSS for Items starts*/
.items-x {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-self:left;
}
.box {
   margin:0 40px 25px 0;
   border:0px solid transparent;
   border-radius:.25em;
   text-align:center;
   width:300px;
   height:200px;
   background-color:var(--box-background);
   color:white;
   font-family:var(--box-font);
}
.box h2 {
  padding:10px 0 10px 0;
  border-radius:.10em;
  margin-top:0;
  background-color:#2c7f40;
  font-family:helvetica,Arial;
  font-size:20px;
  font-weight:300;
  letter-spacing:0.8px;
}
.des-box {
margin-top:30px;
  text-align:left;
  margin-left: 1.5em;
  color:var(--box-ptext);
}
.open-button {
  background-color:#2c7f40;
  color:#e9e9e9;
  font-family:var(--box-font);
  display:block; 
  border:0px solid transparent;
  border-radius:.25em;
  text-decoration:none;
  margin-top:20px;
  padding:8px 0px;
  width:45%;
  
}
.open-button:hover {
  background-color:seagreen;
  color:white;
}
.open-button:active {
  box-shadow: 1px 1px 10px #607d67;
}

/*CSS for Items Ends*/

/*Footer Starts*/

.footer-x {
  background-color:var(--box-background);
  padding: 30px 10px;
  width:100%;
  border-top:2px solid #343a40;
  display:flex;
  flex-wrap:wrap;
  
}


.foot-items {
  font-family:var(--box-font);
  color:white;
  min-width: 25%;
  padding: 10px 20px;
  box-sizing: border-box;
  border:0px solid transparent;
}
.foot-main {
  max-width: 25%;
}

.foot-items a{
  color:white;
  text-decoration:none;
  font-size:21px;
  font-weight:400;
}
.foot-items a:hover {
  font-weight:500;
}
.foot-items p{
  color:#d8d8d8;
  font-weight:300;
}
.foot-items li {
  list-style-type: none;
  margin-top:-13px;
  margin-bottom:13px;
}
.links {
  text-align:center;
  align-self:left;
}
.links a{
  color:#d8d8d8;
  font-weight:300;
}
.links a:hover{
  color:white;
  font-weight:420;
  text-decoration: underline; 
}
.links h4 {
  margin-top:-10px;
  font-size:20px;
  font-weight:400;
  color:white;
}

/*Footer Ends*/

/*Media for responsiveness starts*/
@media screen and (max-width: 1200px) {
  .heading-x {
    margin-left:150px;
  margin-right:190px;
  }  
  
    .items-x {
      justify-content:none;
      align-self:left;
  }
  .box {
    width:350px;
  }
  body {
  margin-left:3em;
  margin-right:3em;
  }
}
@media screen and (max-width: 1100px) {
  .heading-x {
    margin-left:100px;
  margin-right:140px;
  } 
}


@media screen and (max-width: 1000px) {
  .heading-x {
    margin-left:80px;
  margin-right:120px;
  }  
  
  .items-x {
      
      justify-content:center;
  }
  
  body {
  margin-left:1em;
  margin-right:1em;
  }
}

@media screen and (max-width: 900px) {
  .heading-x {
    margin-left:0px;
  margin-right:0px;
  } 
  .heading-x h1 {
    font-size:35px;
    margin-bottom:-15px;
  }
  .heading-x p {
    font-size: 1.10rem;
    
  }
  
  .items-x {
      justify-content:center;
  }
  .box {
    width:100%;
    margin:0 0px 25px 0;
  }
  body {
  margin-left:3em;
  margin-right:3em;
  }
  .foot-main {
  min-width: 100%;
}
  .links {
    width:50%;
    text-align:center;
  }
}

@media screen and (max-width: 500px) {
  .heading-x h1 {
    font-size:25px;
    margin-bottom:-15px;
  }
}
/*Media for responsiveness Ends*/