@font-face{font-family: 'Cinzel';src: url('fonts/Cinzel-Bold.eot');
  src: local('Cinzel Bold'), local('fonts/Cinzel-Bold'),
      url('fonts/Cinzel-Bold.eot?#iefix') format('embedded-opentype'),
      url('fonts/Cinzel-Bold.woff2') format('woff2'),
      url('fonts/Cinzel-Bold.woff') format('woff'),
      url('fonts/Cinzel-Bold.ttf') format('truetype');font-weight: bold;font-style: normal;}
@font-face{font-family: 'Clear Sans';src: url('fonts/ClearSans.eot');
  src: local('Clear Sans'), local('fonts/ClearSans'),
      url('fonts/ClearSans.eot?#iefix') format('embedded-opentype'),
      url('fonts/ClearSans.woff2') format('woff2'),
      url('fonts/ClearSans.woff') format('woff'),
      url('fonts/ClearSans.ttf') format('truetype');font-weight: normal;font-style: normal;}
@font-face{font-family: 'Playfair Display';src: url('fonts/PlayfairDisplay-Regular.eot');
    src: local('Playfair Display Regular'), local('fonts/PlayfairDisplay-Regular'),
        url('fonts/PlayfairDisplay-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/PlayfairDisplay-Regular.woff2') format('woff2'),
        url('fonts/PlayfairDisplay-Regular.woff') format('woff'),
        url('fonts/PlayfairDisplay-Regular.ttf') format('truetype');font-weight: normal;font-style: normal;}

@font-face{font-family: 'Roboto-Bold';src: url('fonts/Roboto-Bold.eot');
  src: local('Roboto Bold'), local('Roboto-Bold'),
        url('fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Bold.woff2') format('woff2'),
        url('fonts/Roboto-Bold.woff') format('woff'),
        url('fonts/Roboto-Bold.ttf') format('truetype');font-weight: bold;font-style: normal;}

@font-face{font-family: 'Roboto';src: url('fonts/Roboto-Regular.eot');
  src: local('Roboto'), local('Roboto-Regular'),
        url('fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Regular.woff2') format('woff2'),
        url('fonts/Roboto-Regular.woff') format('woff'),
        url('fonts/Roboto-Regular.ttf') format('truetype');font-weight: normal;font-style: normal;}


.container1{max-width: 68%;width: 68%;margin: 0 auto;}
.container2{max-width: 65%;width: 65%;margin: 0 auto;}
.font1{font-family: 'Cinzel';font-size: 43px;line-height: 36px;margin-bottom: 8px;color: #fff;}
.font2{font-family: 'Clear Sans';font-size: 20px;line-height: 30px;margin-bottom: 10px;color: #000;}
.font3{font-family: 'Playfair Display';font-size: 25px;line-height: 35px;margin-bottom: 10px;color: #000;}
.font4{font-family: 'Roboto';font-size: 16px;line-height: 25px;margin-bottom: 15px;color: #000;}
.font5{font-family: 'Roboto-Bold';font-size: 16px;line-height: 20px;margin-bottom: 0px;color: #000;}
.txt-wht{ color: #fff;}
.vr_line1{width: 100px;height: 1px;background: #fff;display: inline-block;vertical-align: middle;margin: 0px 2px;}
.hr_line1{width: 1px;height: 100%;background: rgb(153 153 153 / 45%);display: block;}
.bg_banner{background: url(images/graduation-banner.webp) top center no-repeat;background-size: cover;padding: 300px 0px 100px;}
.banner_text{text-align: center;margin: 0 auto;}
.section_2{padding: 100px 0px 68px;}
.section_3{padding: 0px 0px 137px;}
.img1{margin-bottom: 35px;width: 100%;}
.mrg-btm1{ margin-bottom: 30px;}
.wdt1{width: 486px;line-height: 30px;}
.br_line{display: block;}
.show-mob{display: none;}

@media (max-width: 1600px) {
.bg_banner{padding: 300px 0px 80px;}
}
@media (max-width: 1440px) {
.container1{max-width: 78%;width: 78%;margin: 0 auto;}
.container2{max-width: 75%;width: 75%;margin: 0 auto;}
.bg_banner{padding: 190px 0px 127px;}
}

@media (max-width: 1368px) {
  .bg_banner{padding: 170px 0px 122px;}
}


@media (max-width: 1285px) {
.container2{max-width: 90%;width: 90%;margin: 0 auto;}
.bg_banner{padding: 150px 0px 115px;}
.section_2{padding: 80px 0px 50px;}
}

@media (max-width: 1025px) {
.font1{font-size: 33px;line-height: 28px;}
.font2{font-size: 18px;line-height: 25px;}

.font4{margin-bottom: 25px;}
.bg_banner{padding: 150px 0px 50px;}
.section_2{padding: 50px 0px 20px;}
.section_3{padding-bottom: 65px;}
.vr_line1{width: 77px;}
}

@media (max-width: 991px) {
.br_line{display: inline;}
.container1, .container2{max-width: 95%;width: 95%;}
.wdt1{width: auto;}
}

@media (max-width: 640px) {
.container1, .container2{max-width: 100%;width: 100%;}
.hr_line1{display: none;}
.bg_banner{display: none;padding: 0px;}
.banner_text{float: none;}
.br_line{display: inline;}
.show-mob{display: block;}
}

@media (max-width: 480px) {
.font4{margin-bottom: 18px;}
}