@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
body { margin: 0; padding: 0; font-family: "Poppins", sans-serif; overflow-x: hidden;}
p, li {color: #090909;font-size: 15px;line-height: 26px;font-weight: 400;text-align: justify;margin: 0 0 12px 0;font-family: "Poppins", sans-serif;}
.main-table li {color: #090909; font-size: 16px; line-height: 25px;margin: 0 0 10px 0; font-family: "Poppins", sans-serif;}
a { text-decoration: none !important; font-family: "Poppins", sans-serif;}
h1, h2, h3, h4, h5, h6 { font-family: "Tinos", serif;}
.dropdown-menu li{line-height:20px!important;}

.view {
   margin: 10px;
   border: 10px solid #3f4fa3;
   overflow: hidden;
   position: relative;
   height: 300px;
   text-align: center;
   width: 100%;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   margin-bottom: 30px;
}
.view .mask,.view .content {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
   height: 100%;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: linear-gradient(to right, #0486A9, #0486A9);
   margin: 20px 0 0 0;
}
.view p {
   font-family: "Poppins", sans-serif;
   font-style: italic;
   font-size: 14px;
   position: relative;
   color: #fff;
   padding: 5px 10px 10px;
   text-align: center;
   line-height:21px;
   margin:0;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #043144;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info:hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
.view-seventh img {
   -webkit-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
   -o-transition: all 0.5s ease-out;
   -ms-transition: all 0.5s ease-out;
   transition: all 0.9s ease-out;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   width: 100%;
   height: 100%;
}
.view-seventh .mask {
   background: linear-gradient(to right, rgb(159 61 110 / 60%), rgb(61 79 164 / 60%));
   -webkit-transform: rotate(0deg) scale(1);
   -moz-transform: rotate(0deg) scale(1);
   -o-transform: rotate(0deg) scale(1);
   -ms-transform: rotate(0deg) scale(1);
   transform: rotate(0deg) scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   -ms-transition: all 0.3s ease-out;
   transition: all 0.9s ease-out;
}
.view-seventh h2 {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-seventh p {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.9s ease-in-out;
}
.view-seventh a.info {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
/* .view-seventh:hover img {
   -webkit-transform: rotate(720deg) scale(0);
   -moz-transform: rotate(720deg) scale(0);
   -o-transform: rotate(720deg) scale(0);
   -ms-transform: rotate(720deg) scale(0);
   transform: rotate(720deg) scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-seventh:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px) rotate(0deg);
   -moz-transform: translateY(0px) rotate(0deg);
   -o-transform: translateY(0px) rotate(0deg);
   -ms-transform: translateY(0px) rotate(0deg);
   transform: translateY(0px) rotate(0deg);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.9s;
}
.view-seventh:hover h2 {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.7s;
   -moz-transition-delay: 0.7s;
   -o-transition-delay: 0.7s;
   -ms-transition-delay: 0.7s;
   transition-delay: 0.7s;
   margin-top: 80px;
}
.view-seventh:hover p {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.6s;
   -moz-transition-delay: 0.6s;
   -o-transition-delay: 0.6s;
   -ms-transition-delay: 0.6s;
   transition-delay: 0.9s;
}
.view-seventh:hover a.info {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
} */

.view-seventh h3{
    text-transform: capitalize;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 16px;
    bottom: 40px;
    padding:5px;
    background: linear-gradient(to right, #BF3858, #0486A9);
    /* margin: 20px 0 0 0; */
    /* margin-top: -75px; */
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
/* .view-seventh:hover h3 {
   -webkit-transform: rotate(720deg) scale(0);
   -moz-transform: rotate(720deg) scale(0);
   -o-transform: rotate(720deg) scale(0);
   -ms-transform: rotate(720deg) scale(0);
   transform: rotate(720deg) scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
} */



.bg{background:url(../Image/roles.jpg);background-size: cover;background-repeat: no-repeat;background-position: center;position: relative;height: 100%;width: 100%;}
.roles h3{
      font-size: 50px;
      font-weight: 600;
      /* color: #FFFFFF; */
      position: relative;
      z-index: 99;
      margin-bottom: 20px;
}
.rght-bg{
  padding: 70px 120px 33px 70px;
  background: linear-gradient(to right, #0486A9, #BF3858);
  height: 100%;
}
.roles ul{
  padding-left: 20px;
  margin-bottom: 0;
}
.roles ul li{
  color: #fff;
  margin-bottom: 0;
  line-height: 42px;
}

.main-table { text-align: left; padding: 4% 0;}

#widgetsControl_C, #widgetsControl{height: 650px !important;}
#Div_body .container-fluid { margin: 0; padding: 0;}

#MenuControl .nav-item { margin: 0}
#MenuControl .nav-item .nav-link {color: #191919;font-size: 13px;text-transform: uppercase;font-weight: 600;}
#MenuControl .nav-fill{ width:100%;}
#MenuControl .bg-light {background: #fff!important;height: 100%; padding: 0 0 0 10%}

#HeaderControl.RadDock_Default .rdMiddle .rdCenter, #HeaderControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}
#MenuControl_C .bg-light { --bs-bg-opacity: 1; background-color: transparent !important; height: 100%;}
#MenuControl.RadDock_Default .rdMiddle .rdCenter, #MenuControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}

#HeaderControl, #MenuControl, #MenuControl_C { height: 75px !important}

#HomepagecontentControl_C { margin: -20px 0 0 0 !important}
@media (min-width: 320px) and (max-width: 768px ){
   .rght-bg{padding:20px;}
   .roles ul li{line-height:30px;}
  .navbar-toggler {background: #fff}
  .navbar .container-fluid{display: flex;justify-content: center;}
  /* #MenuControl, #MenuControl_C {height: 0 !important;} */
  #HeaderControl, #HeaderControl_C {height: 90px !important;background: #eeeced;}
  .navbar-collapse {background: #eeeced;margin-top: -10px}
  #MenuControl .bg-light{padding:0px;}
  #MenuControl .bg-light{background-color: #0486A9!important;}
}

/* innr-pg-c Start */
.otherpagecss #RadDockZone1.container { max-width: 100%;}
.otherpagecss #RadDockZone1.container #HomepagecontentControl_C table { margin-top: 0 !important;}

.heading {font-size: 32px;font-weight: 600;letter-spacing: .5px;text-transform: uppercase;color: #3c4fa5;margin: 0 0 20px 0;} 
.sub-heading {font-size: 24px;font-weight: 600;letter-spacing: .5px;color: #0486A9;margin: 0 0 15px 0;padding-top:20px;}
.custom-btn {display: inline-block;background: #a43c6b;color: #fff;padding: 14px 30px;border-radius: 30px;font-size: 15px;line-height: 1;box-shadow: rgba(0, 0, 0, 0.24) 0px 5px 10px;transition: all .3s ease-in-out;}
.custom-btn:hover { color: #fff; transform: translateY(-4px);}

header img {width: 330px;padding: 3px 0;}

.banner-section { position: relative;}
.banner-section .text {position: absolute;/* width: 40%; *//* left: 0%; *//* z-index: 2; */bottom: 0%;/* transform: translate(0, -50%); */}
.banner-section .text h1 span {color: #fff; text-shadow: 2px 2px 2px #222121de;padding-right: 12px;}
.banner-section .text h1 { color: #fff; background: linear-gradient(to right, #0486A9, #BF3858);left: 51px;bottom: -50px;z-index: 3;padding: 25px;/* margin-bottom: 1rem; */ font-weight: 800;font-size: 62px;letter-spacing: 2px;text-shadow: 2px 2px 2px #222121de;font-family: "Roboto Condensed", sans-serif;margin: 0 0 12px 0;line-height: 1.1;} 
.banner-section .text p { display: inline-block; background: #9b0a00b8; padding: 15px 20px; font-size: 20px; color: #fff; line-height: 1.5} 
.banner-section .text a { display: inline-block; background: #e2680a; color: #f1f1f1; padding: 10px 24px; border-radius: 4px; font-size: 15px; letter-spacing: .7px; text-transform: uppercase}
.banner-section .text a i{ margin: 0 0 0 18px; font-size: 14px}

.banner-bottom { padding: 5% 0;}
.banner-bottom .activities-card .text { background: #002264; padding: 30px 10px; text-align: center;}
.banner-bottom .activities-card .text h4 { color: #fff; margin: 0; font-size: 28px;}
.banner-bottom .activities-card .text.bg-color { background: #9b0a00;}

.about-section { padding:2% 0 6% 0;}
.about-section .pic{position:relative;/* min-height: 100%; */}
.about-section .pic img { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; border-radius: 10px;}  
.about-section .pic .text {position: absolute;width: 85%;background: linear-gradient(to right, #0486A9, #BF3858);left: 51px;bottom: -50px;z-index: 3;padding: 25px;/* margin-bottom: 1rem; */} 
.about-section .pic .text p {margin: 0;font-size: 24px;text-align: center;color: #eeeeee;text-transform: uppercase;font-weight: 500;letter-spacing: .6px;}

.seminar { position: relative;}
.seminar .text { position: absolute; width: 80%; left: 0; right: 0; bottom: 0; margin: 0 auto; background: rgba(0, 0, 0, 0.6); padding: 20px 10px;}
.seminar .text p { text-align: center; color: #fff; font-size: 21px; margin: 0; letter-spacing: .5px;}

footer a i{margin-right:10px;}
footer {background: linear-gradient(to right, #0486A9, #A43C6B);padding: 5% 0 0 0;}
footer .ft-logo {width: 100%;border-radius: 5px;}
footer h4{
   color:#fff;
   margin-bottom: 2px;
}
footer h5{
   color:#fff;
   margin-bottom: 2px;
}

footer p a, footer p {color: #ededed;margin: 0 0 5px 0;font-size: 18px;}
footer a:hover { color: #fff;}
.ft_lk a{
   color: #fff;
   font-size: 16px;
   line-height: 48px;
}

.ft_lk i{
   margin-right:10px;
   margin-right: 15px;
   background: #0486A9;
   width: 30px;
   height: 30px;
   font-size: 14px;
   padding: 9px;
   border-radius: 50%;
}
footer .footer-bottom { margin: 3% 0 0 0; border-top: 1px solid rgba(255, 255, 255, .2);}
footer .footer-bottom p { padding: 8px 0; font-size: 14px;}

.about-page .right-img { position: relative;}
.about-page .right-img img { position: relative; z-index: 2; width: 96%;}
.about-page .right-img .text {position: absolute;width: 85%;background: linear-gradient(to right, #0486A9, #BF3858);left: 0px;bottom: -50px;z-index: 3;padding: 25px;/* margin-bottom: 1rem; */} 
.about-page .right-img .text p {margin: 0; font-size: 24px; color: #eeeeee; text-transform: uppercase; font-weight: 500; letter-spacing: .6px;}

.service-page .ser-card { background: #e8e8e8; padding: 30px; margin: 24px 0 0 0; min-height: 180px;}
.service-page .ser-card .icon{ float: left; width: 40px; height: 40px; margin: 0 6px 0 0;}
.service-page .ser-card h4 { color: #002264; font-size: 21px; font-weight: 500;}
.service-page .ser-card p { margin: 10px 0 0 0;}

.award-card {padding: 10px;overflow: hidden;position: relative;transition: all .3s 
ease-in-out;}
.award-card:hover img{
       transform: scale(1.1);
}
   .qr{margin-top: 10px;border-radius:10px;}
.award-card img {margin: 0 0 30px 0;all .5s animation-timing-function: ease-in-out;transition: all .3s 
ease-in-out;}
.award-card p {font-size: 13px;margin: 0 0 10px 0;line-height: 20px;}
.award-card .Caption { font-weight: 500; margin-bottom: 0;}
.award-card .Caption span { color: #e2680a; font-weight: 600;}

.contact-page .contact-info {background: linear-gradient(to right, #BF3858, #3C4FA5);padding: 25px;min-height: 110px;}
.contact-page .contact-info .icon i {background: #ffffff;width: 40px;height: 40px;text-align: center;display: inline-block;border-radius: 50%;color: #bf3858;font-size: 20px;line-height: 1.9;}
.contact-page .contact-info h5 {color: #ffffff;font-size: 21px;font-weight: 600;}
.contact-page .contact-info p a, .contact-page .contact-info p {color: #e8e8e8;margin: 0;font-size: 15px;letter-spacing: 0;}
.contact-page .contact-info a i{ color: #e8e8e8; font-size: 14px; margin: 0 5px 0 0; }

.contact-page .contact-form { background: #e7e5e4; padding: 50px;}
.contact-page .contact-form h4 {color: #0486A9;font-size: 30px;margin: 0 0 25px 0;font-weight: 700;}
.contact-page .contact-form .form-control {border: 0; padding: 15px; margin: 0 0 20px 0;}
.contact-page .contact-form input[type='button'] {background: #BF3858;padding: 13px 30px;font-size:15px; color: #fff;border: 0;}

.awards-section { padding: 5% 0;}
.awards-section .awards-bx {position: relative;margin: 15px 0;overflow: hidden; transition: all .3s ease-in-out;}
.awards-section .awards-bx img {transition: all .5s ease-in-out; }
.awards-section .awards-bx:hover img { transform: scale(1.15)}
.pic{position:relative;/* overflow:hidden; */}
.awards-section .awards-bx .text {position: relative;width: 95%;left: 0;right: 0;bottom: 0;margin: 0 auto;padding: 15px;min-height: 160px;display: flex;text-align: center;align-items: center;justify-content: center;}
.awards-section .awards-bx .text p {margin: 0;font-size: 16px;color: #0486A9;font-weight: 500;letter-spacing: .6px;text-align: center;}

@media (min-width: 320px) and (max-width: 768px) { 
   .banner-section .text h1 {color: #fff;background: linear-gradient(to right, #0486A9, #BF3858);left: 51px;bottom: -50px;z-index: 3;padding: 25px;/* margin-bottom: 1rem; */font-weight: 800;font-size: 16px;letter-spacing: 2px;text-shadow: 2px 2px 2px #222121de;font-family: "Roboto Condensed", sans-serif;margin: 0 0 0px 0;line-height: 1.1;} 
   #widgetsControl_C, #widgetsControl {
    height: auto !important;}
  p, li {font-size: 13px;line-height: 24px;margin: 0 0 12px 0;}
  .main-table li { font-size: 14px; line-height: 20px;}
  
  .heading { font-size: 24px; margin: 0 0 12px 0; letter-spacing: 0;} 
  .sub-heading { font-size: 20px; margin: 0 0 10px 0;}
  .custom-btn { padding: 11px 24px; font-size: 14px;}

  header img {padding: 7px 0;width:100%;height:90px!important;}
  header{display: flex;justify-content: center;}

  .banner-section img{ min-height: 200px; object-fit: cover;}
  .banner-section .text {left: 4%;}
  .banner-section .text h1 {/* font-size: 9px; *//* text-shadow: 5px 5px 5px #000000de; *//* line-height: 1; */}
  .banner-section .text p { display: none;} 
  .banner-section .text a { padding: 8px 20px; border-radius: 4px; font-size: 12px;}
  .banner-section .text a i{ margin: 0 0 0 10px; font-size: 12px}

  .banner-bottom .activities-card { margin: 0 0 18px 0;}
  .banner-bottom .activities-card .text { padding: 20px 10px;}
  .banner-bottom .activities-card .text h4 { color: #fff; margin: 0; font-size: 21px;}

  .about-section .pic img {margin: 20px 0 0 0;}  

  .seminar img { min-height: 200px; object-fit: cover; object-position: right;}
  .seminar .text { width: 90%; padding: 10px;}
  .seminar .text p { font-size: 15px; margin: 0; letter-spacing: .5px; line-height: 1.4;}

  footer { padding: 7% 0 0 0;}
  footer .ft-logo {width: 100%;margin: 0 0 10px 0;}
  footer .social-links a { width: 25px; height: 25px; font-size: 12px; line-height: 2;}
  footer .social-links { margin: 10px 0 0 0;}
  footer .footer-bottom p { font-size: 13px; font-weight: 300;}

  .about-page .right-img .text { bottom: -40px; padding: 20px;} 
  .about-page .right-img .text p { font-size: 20px;}

  .service-page .ser-card { padding: 20px; margin: 15px 0 0 0;}
  .service-page .ser-card .icon{ width: 35px; height: 35px;}
  .service-page .ser-card h4 { font-size: 20px;}

  .award-card { padding: 20px; border: none !important; border-bottom: 1px solid #ddd !important;}

  .contact-page .contact-info {padding: 15px; min-height: 50px; margin: 0 0 15px 0;}
  .contact-page .contact-info .icon i { width: 35px; height: 35px; font-size: 15px;line-height: 2.4;}
  .contact-page .contact-info h5 { font-size: 18px;font-weight: 500;}

  .contact-page .contact-form {padding: 20px;}
  .contact-page .contact-form h4 {font-size: 21px;margin: 0 0 20px 0;}
  .contact-page .contact-form .form-control { padding: 12px; margin: 0 0 10px 0; font-size: 14px;}
  
  .awards-section .awards-bx { margin: 0 0 15px 0;}
  .awards-section .awards-bx .text {width: 95%; padding: 10px;}
  .awards-section .awards-bx .text p {font-size: 14px; line-height: 1.4; font-weight: 300;}
}

.bnnr .carousel-caption{position: absolute;bottom: 1.25rem;left: 0%;padding-top: 0;padding-bottom: 0;color: #fff;text-align: center;bottom:0%;width:45%;background: linear-gradient(to right, #0486A9, #BF3858);}
.bnnr .carousel-caption h1 { color: #fff; padding: 25px;font-weight: 800;font-size: 52px;letter-spacing: 2px;text-shadow: 2px 2px 2px #222121de;font-family: "Roboto Condensed", sans-serif;line-height: 1.1;} 
.roles .carousel-caption{position: unset;}

/*---------------------------------------
innr-pg-c 
----------------------------------------*/
.otherpagecss #RadDockZone1.container{max-width: 100%;}
.otherpagecss #RadDockZone1.container #HomepagecontentControl_C table{margin-top:0 !important;}
.innr-pg-c{margin-top: 26px;padding: 32px 0;position: relative;background:url(../Image/inner-bg-img.jpg) no-repeat right/cover scroll;}
.innr-pg-c h1{margin-bottom: 0; font-weight: 700;Font-size: 26px;color: #fff;text-align: left;border-left: 3px #fff solid;text-transform: uppercase;position:relative;z-index:1;border-radius: 4px;padding: 5px 0 5px 20px;}
.innr-pg-c:after{content:'';position:absolute;left:0px;right:0px;top:0px;width:100%;height:100%;z-index: 0;background-image: linear-gradient(22deg, #0486A9, #BF3858);}

  /*  */

  .team-pg .sub-heading {font-size: 24px;font-weight: 600;letter-spacing: .5px;color: #0486A9;margin: 0 0 15px 0;padding-top:20px;}
  .team-pg .sub-heading span{font-size:18px!important;}
  /* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(180deg);
}
.dropend .dropdown-menu {
    right: 100% !important; top:0;
    left: auto !important;
}

.about-section h6{    font-size: 20px;
    font-weight: 600;
    color: #000;}