.svg-container,
.svg-container0,
.svg-container1,
.svg-container1B,
.svg-container2,
.svg-container3,
.svg-container4,
.svg-container5 {
    display: none;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
@media only screen and (max-width: 296px){
.khwaish-fest h1{
  font-size: 1em;
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #42014cba;
  font-weight: 600;
  margin-bottom: 1.1em;
  border-bottom: 5px solid rgba(119, 58, 167, 0.219);
  }
    .college-name{
      font-size: 0.08em;
      background-color: transparent;
    }
    .brand-name {
      font-size: 0.08em;
      background-color: transparent;
    }
  .video-subtitle{
    font-size: 8px;
  }
  }
@media only screen and (max-width: 386px){

.khwaish-fest h1{
font-size: 1em;
font-family: "Josefin Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: #42014cba;
font-weight: 700;
margin-bottom: 1.5em;
border-bottom: 5px solid rgba(119, 58, 167, 0.219);
}
  .college-name,
  .brand-name {
    font-size: 2em;
    background-color: transparent;
  }
.video-subtitle{
  font-size: 10px;
}

}
@media only screen and (max-width: 412px) {
    .svg-container0 {
        display: block;
    }
	.khwaish-fest h1{
		font-size: 1.5em;
		font-family: "Josefin Sans", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		color: #42014cba;
		font-weight: 700;
		margin-bottom: 1.5em;
		border-bottom: 5px solid rgba(119, 58, 167, 0.219);
	  }
      .college-name,
      .brand-name {
        font-size: 2em;
        background-color: transparent;
      }

    .video-subtitle{
      font-size: 10px;
    }
}

@media only screen and (min-width: 413px) and (max-width: 500px) {
    .svg-container1 {
        display: block;
      
    }

	.khwaish-fest h1{
		font-size: 1.5em;
		font-family: "Josefin Sans", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		color: #42014cba;
		font-weight: 700;
		margin-bottom: 1.5em;
		border-bottom: 5px solid rgba(119, 58, 167, 0.219);
		
	  }
      .college-name,
      .brand-name {
        font-size: 2.1em;
        background-color: transparent;
      }
    .video-subtitle{
      font-size: 20px;
    }
}

@media only screen and (min-width: 501px) and (max-width: 600px) {
    .svg-container1B {
        display: block;
    }

	.khwaish-fest h1{
		font-size: 1.8em;
		font-family: "Josefin Sans", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		color: #42014cba;
		font-weight: 700;
		margin-bottom: 1.5em;
		border-bottom: 5px solid rgba(119, 58, 167, 0.219);
	  }
      .college-name,
      .brand-name {
        font-size: 2.3em;
        background-color: transparent;
      }

    .video-subtitle{
      font-size: 20px;
    }
}
@media only screen and (min-width: 601px) and (max-width: 768px) {
    .svg-container2 {
        display: block;
    }
	.khwaish-fest h1{
		font-size: 1.8em;
		font-family: "Josefin Sans", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		color: #42014cba;
		font-weight: 700;
		margin-bottom: 1.5em;
		border-bottom: 5px solid rgba(119, 58, 167, 0.219);
	  }
      .college-name,
      .brand-name {
        font-size: 2.5em;
        background-color: transparent;
      }
    .video-subtitle{
      font-size: 20px;
    }

}
@media only screen and (min-width: 769px) and (max-width: 820px) {
    .svg-container3 {
        display: block;
    }
    .khwaish-fest h1{
		font-size: 1.8em;
		font-family: "Josefin Sans", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		color: #42014cba;
		font-weight: 700;
		margin-bottom: 1.5em;
		border-bottom: 5px solid rgba(119, 58, 167, 0.219);
	  }
    .college-name,
    .brand-name {
      font-size: 2em;
      background-color: transparent;
    } 
}

/* Large Devices (small laptops, 821px to 1108px) */
@media only screen and (min-width: 821px) and (max-width: 1108px) {
    .svg-container4 {
        display: block;
    }
    .college-name,
    .brand-name {
      font-size: 3em;
      background-color: transparent;
    }
}
@media only screen and (min-width: 1109px) and (max-width: 1200px) {
    .svg-container5 {
        display: block;
    }
    .college-name,
    .brand-name {
      font-size: 3.5em;
      background-color: transparent;
    }
}
@media only screen and (min-width: 1201px) {
    .svg-container {
        display: block;
    }
	.khwaish-fest h1{
		font-size: 2.8em;
		font-family: "Josefin Sans", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		color: #42014cba;
		font-weight: 700;
		margin-bottom: 1.5em;
		border-bottom: 5px solid rgba(119, 58, 167, 0.219);
	  }
      .college-name,
      .brand-name {
        font-size: 15em;
        background-color: transparent;
      }
}
@media only screen and (min-width: 1540px) {
    .svg-container {
        display: block;
        /* Visible on very large desktops */
    }

	.khwaish-fest h1{
		font-size: 2.8em;
		font-family: "Josefin Sans", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		color: #42014cba;
		font-weight: 700;
		margin-bottom: 1.5em;
		border-bottom: 5px solid rgba(119, 58, 167, 0.219);
	  }
      .college-name,
      .brand-name {
        font-size: 20vw;
        background-color: transparent;
      }

}