:root {
  --blue: #000e67;
  --gold: #f0b323; 
  /* --gold:#f0b323; */
  /* --gold: #cb9f48; */
  --white: #ffffff;
  --marginSection: 0rem;
}

.salient_features {
  width: 80%;
  margin: auto;
  margin-top: 2.5rem;
}

.salient_features h1 {
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 2%;
  text-align: center;
  background-color: #000e67;
  color: var(--gold);
  border-radius: 38px;
  box-shadow: 0px 3px;
}

.salient_features ul li {
  margin: 0.3% 2%;
}


/* ............ activities ...........  */
.activities {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--marginSection);
  text-align: center;
}

.background img {
  width: 100%;
  position: absolute;
  top: -50%;
  left: 0;
  z-index: -2;
}
.background_gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.activities h2 {
  display: inline-block;
  padding: 4px 10px;
  margin: 2% 0;
  text-align: center;
  background-color: #000e67;
  color: var(--gold);
  border-radius: 38px;
  box-shadow: 0px 3px;
}

.activities p {
  color: var(--white);
  width: 80%;
  margin: auto;
  text-align: justify;
}
.activities ul {
  margin-bottom: 2%;
}
.activities ul li {
  text-align: justify;
  color: var(--white);
  width: 70%;
  margin: auto;
  margin: 0.3% auto;
}
/* ......... games.......  */
.games {
  margin-bottom: var(--marginSection);
}

.games_heading {
  padding: 5% 0;
  background-image: url(../Edited\ Pics\ for\ Website\ of\ Doon\ Valley\ College\ of\ Education/Sports\ Activities/3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: var(--blue);
  margin-bottom: 2%;
  text-align: center;
  
}

.games_heading h2{
  display: inline-block;
  padding: 4px 10px;
  margin: auto;
  text-align: center;
  background-color: #000e67;
  color: var(--gold);
  border-radius: 38px;
  box-shadow: 0px 3px;
}

.games p {
  width: 80%;
  margin: auto;
  margin-bottom: 2%;
  text-align: justify;
}

.games ul {
  width: 70%;
  margin: auto;
  margin-bottom: 2%;
}

/* ........... class room ..............  */
.room {
  margin-bottom: var(--marginSection);
  text-align: center;
}

.room h2 {
  display: inline-block;
  padding: 4px 10px;
  margin: auto;
  margin-bottom: 2%;
  text-align: center;
  background-color: #000e67;
  color: var(--gold);
  border-radius: 38px;
  box-shadow: 0px 3px;
}
.class {
  display: flex;
  align-content: space-around;
}

.class_text {
  margin: auto;
  width: 30%;
}

.class_text ul li {
  margin: 0.3% 2%;
  text-align: justify;
}
.class_image {
  margin: auto;
}

.class_image img {
  width: 100%;
  border-radius: 20px;
}

/* ......... computer lab ..........  */
.computer {
  position: relative;
  margin-bottom: var(--marginSection);
  overflow: hidden;
  height: 300px;
  display: flex;
}

.computer_background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}

.computer_background img {
  width: 140%;
}

.computer_gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000e676b;
  z-index: -1;
}

.computer_text {
  text-align: center;
  margin: auto;
  width: 80%;
  color: white;
}

.computer_text h2 {
  display: inline-block;
    padding: 4px 10px;
    margin: auto;
    margin-bottom: 2%;
    text-align: center;
    background-color: #000e67;
    color: var(--gold);
    border-radius: 38px;
    box-shadow: 0px 3px;
}

/* ......... science lab .........  */
.science{
    margin-bottom: var(--marginSection);
    text-align: center;
    width: 90%;
    margin: auto;
}

.science h2{
  display: inline-block;
  padding: 4px 10px;
  margin: auto;
  margin-bottom: 2%;
  text-align: center;
  background-color: #000e67;
  color: var(--gold);
  border-radius: 38px;
  box-shadow: 0px 3px;
}
.science_text {
    display: flex;
    align-content: center;
}
.science_text p{
    width: 40%;
    text-align: justify;
    margin: auto;
}

.science_text img{
    border-radius: 20px;
    width: 40%;
    margin: auto;
}

/* ........ library .........  */
.library {
  margin-bottom: var(--marginSection);
  
}

.library_text {
  width: 80%;
  margin: 5% auto;
  text-align: center;
  color: rgb(0, 0, 0);
 
}

.library_text h2 {
    display: inline-block;
    padding: 4px 10px;
    margin: auto;
    margin-bottom: 2%;
    text-align: center;
    background-color: #000e67;
    color: var(--gold);
    border-radius: 38px;
    box-shadow: 0px 3px;
}
.library_text p{
  text-align: justify;
}
.library_table{
  width: 90%;
  margin: auto;

    display: flex;
}
.library_table table {
  margin: auto;
  width: 40%;
}
.library_table table,
th {

  padding: 2% 0;
  border: 2px solid rgb(0, 0, 0);
  border-collapse: collapse;
  box-shadow: 0px 2px rgba(0, 0, 0, 0.4);
  color: rgb(0, 0, 0);


}

td{
  text-align: center;
  padding: 1%;
  border: 2px solid rgb(0, 0, 0);
  border-collapse: collapse;
  box-shadow: 0px 2px rgba(0, 0, 0, 0.4);
  color: rgb(0, 0, 0);
}

.library_table img{
    width: 30%;
    margin: auto;
    border-radius: 20px;
}


@media (max-width: 620px) {
    :root{--marginSection: 0rem;}
    h1,
    h2 {
      font-size: 1.3rem;
    }
  
    h3 {
      font-size: 1.1rem;
    }
  
    h4 {
      font-size: 1rem;
    }
  
    p {
      font-size: 0.8rem;
    }
    ul li {
      font-size: 0.8rem;
    }
    .salient_features {
        margin: 5% auto;
        
      }
      .background img {
        width: 100%;
        position: absolute;
        top: 0%;
        left: 0;
        z-index: -2;
      }
      .activities p {
        color: var(--white);
        width: 90%;
        margin: auto;
        text-align: justify;
      }
      .activities ul li {
        color: var(--white);
        width: 90%;
        margin: auto;
        margin: 0.3% auto;
      }
      .class {
          flex-direction: column-reverse;
      }
    
      .class_text {
        margin: auto;
        width: 80%;
      }
      .computer {
        position: relative;
        margin-bottom: var(--marginSection);
        overflow: hidden;
        height: 200px;
        display: flex;
      }
      .science_text {
        flex-direction: column;
    }
    .science_text p{
        width: 80%;
        margin: 2% auto;
    }
    
    .science_text img{
        border-radius: 20px;
        width: 80%;
        margin: auto;
    }
    .library_table{
     flex-direction: column-reverse;
    }
    .library_table img{
        width: 80%;
        margin: auto;
        border-radius: 20px;
    }
    .library_table table {
        margin: auto;
        width: 90%;
        margin-top: 2%;
      }
      
  }