body{font-family: "Poppins", sans-serif; color:#777777; font-weight: 400; font-size: 16px;}

.container{max-width: 1554px;}

h1, h2, h3, h4, h5, h6{font-family: "Poppins", sans-serif; margin: 0; font-weight: 600; color:#000;}

h1{font-size: 80px;}
h2{font-size: 64px;}
h3{font-size: 32px;}
h4{font-size: 24px;}
h5{font-size: 18px;}
h6{font-size: 16px;}

a{color:#141456; text-decoration: none;}
a:hover{color:#050523;}
figure{margin-bottom: 0;}

main p{font-size: 20px;}

.form-control::placeholder{color: #777777;}
::placeholder {
  color: #777777;
  opacity: 1; /* Firefox */
}
::-ms-input-placeholder { /* Edge 12 -18 */
  color: #777777;
}

.rounded{border-radius: 20px!important;}
.ptb-100{padding-top: 100px; padding-bottom: 100px;}
.bg-light-blue{background-color: #EEF5FF;}

.form-control{border-radius: 10px; padding: 18px 1rem; background-color: #fff; border-color:transparent;}
.form-control:focus{box-shadow: none; border-color: #ced4da; background-color: #f2f2f2;}

.btn{ font-size: 18px; text-transform: uppercase; border-radius: 10px; font-weight: 400; font-family: "Poppins", sans-serif; padding: 17px 25px; outline: none; box-shadow: none; min-width: 185px;}
.btn-primary:active:focus{box-shadow: none;}
.btn:hover, .btn:focus, .btn:active{background-color: #000; border-color:#000; box-shadow: none;}
.btn-primary{background-color: #A90000; border-color: #A90000;}
.btn-primary.disabled, .btn-primary:disabled{background-color: #A90000; border-color: #A90000; opacity: 0.7;}

.btn-outline-primary{color:#fff; border-color: #fff;}

.navbar-brand{padding: 0; margin: 0;}

.text-primary{color:#141456!important;}

.bg-primary{background-color: #141456!important;}

.border-radius{border-radius: 20px;}

header{background-color: #002054; padding: 15px 0;}

.home-banner{background-color: #002868; position: relative; min-height: 778px; display: flex; align-items: center;}
.home-banner .container{position: relative;}
.home-banner .left-icon{position: absolute; left:-44px; bottom:90px;}
.home-banner .right-icon{position: absolute; right:-44px; top:-80px}
.home-banner h1{color: #fff; line-height: 90px;}
.home-banner p{color:#d9d9d9; font-size: 24px; line-height: 40px; margin: 0;}
.home-banner p b{font-size: 32px;}
.home-banner .content{padding: 0 8%; margin: auto; position: relative; z-index: 1;}
.home-banner .content .form-group{display: flex; align-items: center; max-width: 760px; margin:28px auto 0; gap:24px;}
.home-banner:before{position: absolute; content: "";  bottom: 0; left:0;  right:0; margin: auto; height: 717px;  max-width: 1448px; border-radius: 1270px 1270px 0 0; background-color: #2F80ED; opacity: 10%;}

.about{position: relative;}
.about:before{position: absolute; content:""; left: -20%; bottom: -80%; background: url('../images/dotted.svg'); background-position: center; background-repeat: repeat; height: 100%; width: 28%; z-index: -1; background-size: 100%;}
.about:after{position: absolute; content:""; right:0; top:0; background: url('../images/dotted.svg'); background-position: top center; background-repeat: repeat; height: 100%; width: 28%; z-index: -1; background-size: 100%;}

.instructors ul{list-style: none; margin: 0; padding: 0; display: flex; gap: 35px; justify-content: center; margin-top: 90px; flex-wrap: wrap;}
.instructors ul li{width: 303px; position: relative;}
.instructors ul li h5{position: absolute; bottom:0; padding:0 20px; font-weight: bold; color:#fff; margin-bottom: 20px; line-height: 27px; text-align: center; width: 100%;}
.instructors ul li figure{position: relative; transition: all 0.3s ease; overflow: hidden;}
.instructors ul li figure img{max-width: 100%;}
.instructors ul li figure:hover{transform: scale(1.03);}

.instructors ul li figure:before{background:linear-gradient(360deg, rgba(0,40,104,0.7) 0%, rgba(0,40,104,0.5) 36%, rgba(255,255,255,0.2) 100%); content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

footer{background-color: #232323; color:#D9D9D9; text-align: center; padding-top: 38px;}
footer .ftr-logo{margin-bottom: 28px;}
footer  p{margin-bottom: 28px;}
footer .social-icon{display: flex; justify-content: center; gap:32px; margin-bottom: 28px;}
footer .social-icon a{color:#fff; font-size: 40px; transition: all 0.3s ease;}
footer .social-icon a:hover{transform: scale(1.2);}
footer .copyright{position: relative;}
footer .copyright:before{content: ""; top:0; width: 100%; position: absolute; height: 1px; background:linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(169,0,0,1) 50%, rgba(255,255,255,0.04) 100%); left:0; right:0;}
footer .copyright p{margin-bottom: 0; padding: 20px 0;}

@media only screen and (max-width: 1601px)
{
  .home-banner .left-icon{left:12px;}
  .home-banner .right-icon{right:12px;}
  
}
@media only screen and (max-width: 1300px)
{
  h1{font-size: 60px;}
  h2{font-size: 44px;}
  .home-banner h1{line-height: 70px;}
}


@media only screen and (max-width: 1023px)
{
  h1{font-size: 34px;}
  h2{font-size: 30px;}
  .ptb-100{padding-top: 30px; padding-bottom: 30px;}
  .home-banner h1{line-height:44px;}
  .home-banner .content{padding: 30px 0;}
  .home-banner p, main p{font-size: 16px;}
  .home-banner p b{font-size: 22px;}
  .home-banner p{line-height: 32px;}
  .instructors ul{gap:12px;}
  .about::after{width:40%; }
  .home-banner .left-icon, .home-banner .right-icon{display: none;}
}

@media only screen and (max-width: 767px)
{
  .home-banner .content .form-group{flex-wrap: wrap;}
  header{text-align: center;}
  .navbar-brand img{max-width: 80%;}
  
}