@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');

/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header,
nav,
section,
article,
aside,
footer,
hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
}

::selection {
  background: #03a4ed;
  color: #fff;
}

::-moz-selection {
  background: #03a4ed;
  color: #fff;
}

@media (max-width: 991px) {

  html,
  body {
    overflow-x: hidden;
  }

  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }

  .mobile-bottom-fix {
    margin-bottom: 30px;
  }

  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 60px;
}

.section-heading h6 {
  font-size: 15px;
  font-weight: 700;
  color: #33ccc5;
  text-transform: uppercase;
  margin-bottom: 15px;

}

.section-heading h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 800;
  position: relative;
  z-index: 2;
  line-height: 45px;
}

.section-heading h2 em {
  font-style: normal;
  color: #33ccc5;
}

.section-heading h2 span {
  color: #088ec3;
}

span {
  color: #088ec3;
}

.main-blue-button a {
  display: inline-block;
  background-color: #4771cb;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #fff !important;
  transition: all .3s;
}

.main-blue-button a:hover {
  background-color: #fff !important;
  color: #4771cb !important;
  border-bottom: 2px solid #4771cb !important;
}

.main-green-button a {
  display: inline-block;
  background-color: #33ccc5;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #4771cb !important;
  transition: all .3s;
}

.main-green-button a:hover {
  background-color: #4771cb !important;
  color: #fff !important;
  border-bottom: 2px solid #33ccc5 !important;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: #fff;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #33ccc5;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #33ccc5;
  border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 226px 0px 120px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: '';
  background-image: url(../images/banner-dec-left.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 100px;
  width: 212px;
  height: 653px;
  z-index: -1;
}

.main-banner:before {
  content: '';
  background-image: url(../images/banner-dec-right.png);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 100px;
  width: 1159px;
  height: 797px;
  z-index: -1;
}

.main-banner .left-content {
  margin-right: 45px;
}

.main-banner .left-content h6 {
  text-transform: capitalize;
  font-size: 15px;
  font-weight: 400;
  color: #2a2a2a;
  margin-bottom: 8px;
}

.main-banner .left-content h4 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 20px;
  color: #2a2a2a;
}

.main-banner .left-content h2 {
  border-top: 1px solid #eee;
  margin-top: 30px;
  padding-top: 20px;
  margin-bottom: 45px;
  font-size: 60px;
  font-weight: 800;
  color: #2a2a2a;
  line-height: 72px;
  background: #FA9D4D;
  background: -webkit-linear-gradient(to right, #FA9D4D 0%, #FF4F6B 100%);
  background: -moz-linear-gradient(to right, #FA9D4D 0%, #FF4F6B 100%);
  background: linear-gradient(to right, #FA9D4D 0%, #FF4F6B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-banner .right-image {
  text-align: right;
  position: relative;
  z-index: 2;
}

.main-banner .right-image img {
  max-width: 593px;
}



/* 
---------------------------------------------
Features Style
--------------------------------------------- 
*/

#features {
  padding-top: 60px;
}

.features .features-content {
  z-index: 2;
  position: relative;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.features-item {
  text-align: center;
  padding: 30px;
  border-radius: 50px;
  background: rgb(255, 255, 255);
  /* background: linear-gradient(105deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%); */
  transition: background-color .5s;
  -webkit-transition: background-color .5s;
  -o-transition: background-color .5s;
  -moz-transition: background-color .5s;
  border: 1px solid rgba(88, 88, 88, 0.452);
}

.features-item:hover {
  background: rgb(51, 204, 197);
  background: linear-gradient(105deg, rgba(51, 204, 197, 1) 0%, rgba(8, 141, 195, 1) 100%);
}

.features-item:hover h4 {
  color: #fff;
}

.features-item:hover p {
  color: #fff;
}

.features-item:hover .line-dec {
  background-color: rgba(255, 255, 255, 0.3);
}


/* .second-feature:hover .icon {
  background-image: url(../images/features-icon-white-02.png);
}
.first-feature:hover .icon {
  background-image: url(../images/features-icon-white-01.png);
} */

.features-item .number h6 {
  background-repeat: no-repeat;
  width: 110px;
  height: 69px;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  line-height: 69px;
  margin-top: -65px;
  margin-bottom: 30px;
}

.features-item .first-number h6 {
  background-image: url(../images/features-number-01.png);
}

.features-item .second-number h6 {
  background-image: url(../images/features-number-02.png);
}

.features-item .third-number h6 {
  background-image: url(../images/features-number-03.png);
}

.features-item .fourth-number h6 {
  background-image: url(../images/features-number-04.png);
}


.second-feature .icon {
  background-image: url(../images/features-icon-black-02.png);
}

/* .first-feature .icon {
  background-image: url(../images/features-icon-black-01.png);
} */

.features-item .icon {
  width: 63px;
  height: 63px;
  margin: 0 auto;
  transition: all 0.5s;
}

.features-item h4 {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 30px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: #2a2a2a;
  position: relative;
  transition: all 0.5s;
}

.features-item .line-dec {
  width: 100px;
  height: 2px;
  background-color: rgba(51, 204, 197, 0.3);
  margin: 30px auto;
  transition: all 0.5s;
}

.features-item p {
  position: relative;
  margin-top: 0px;
  transition: all 0.5s;
}

.skills-content {
  position: relative;
  z-index: 1;
  margin-top: -50px;
  background-color: #f5f5f5;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 110px 0px 50px 0px;
}

.skill-item {
  text-align: center;
}

.progress {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}

.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #ddd;
  position: absolute;
  top: 0;
  left: 0;
}

.progress>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.progress .progress-left {
  left: 0;
}

.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fd6a54;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.progress .progress-right {
  right: 0;
}

.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}

.progress .progress-value {
  text-align: center;
  color: #2a2a2a;
  display: flex;
  width: 100%;
  border-radius: 50%;
  font-size: 32px;
  text-align: center;
  line-height: 20px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}

.progress .progress-value div {
  margin-top: 10px;
}

.progress .progress-value span {
  font-size: 12px;
  text-transform: uppercase;
}

/* This for loop creates the  necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}

.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}

.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}

.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}

.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}

@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}

@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}

@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}

@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}

.progress {
  margin-bottom: 1em;
}


/* 
---------------------------------------------
About Us Style
--------------------------------------------- 
*/

#about {
  padding-top: 130px;
}

.about-us .section-heading {
  margin-bottom: 40px;
}

.about-us .left-image {
  margin-right: 45px;
}

.about-us .about-item h4 {
  font-size: 38px;
  font-weight: 800;
  color: #088ec3;
}

.about-us .about-item h6 {
  font-size: 16px;
  margin-top: 5px;
  font-weight: 400;
  color: #2a2a2a;
  text-transform: capitalize;
}

.about-us p {
  margin: 10px 0px;
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.our-services {
  padding-top: 120px;
}

.our-services .section-heading {
  text-align: center;
  margin-left: 75px;
  margin-right: 75px;
}

.our-services .container-fluid {
  padding: 0px 80px;
}

.service-item {
  padding: 60px 30px;
  border: 2px solid #f7f7f7;
  border-radius: 5px;
  transition: all .3s;
  margin-bottom: 30px;
}

.service-item:hover {
  background-color: #fff;
  border: 2px solid transparent;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.service-item .icon {
  margin-top: 10px;
  width: 80px;
  height: 80px;
  display: inline-block;
  text-align: center;
  line-height: 80px;
  background-color: #f7f7f7;
  border-radius: 50%;
}

.service-item .icon img {
  width: 38px;
  height: 38px;
}

.service-item h4 {
  font-size: 22px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 15px;
}


/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio {
  padding-top: 100px;
  overflow: hidden;
}

.our-portfolio .container-fluid {
  padding-right: 0px;
  padding-left: 0px;
}

.portfolio-item {
  margin-bottom: 30px;
  border-radius: 50px;
}

.portfolio-item:hover .thumb .hover-content {
  opacity: 1;
  visibility: visible;
}

.portfolio-item .thumb {
  position: relative;
  border-radius: 50px;
}

.portfolio-item .thumb img {
  border-radius: 50px;
  overflow: hidden;
}

.portfolio-item .thumb .hover-content {
  border-radius: 50px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  background: rgb(51, 204, 197);
  background: linear-gradient(105deg, rgba(51, 204, 197, 1) 0%, rgba(8, 141, 195, 1) 100%);
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all .5s;
}

.portfolio-item .thumb .hover-content .inner-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.portfolio-item .thumb .hover-content .inner-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.portfolio-item .thumb .hover-content .inner-content span {
  font-size: 15px;
  color: #fff;
}

.our-portfolio .owl-nav {
  display: inline-block !important;
  position: absolute;
  top: -117px;
  right: 15%;
  max-width: 1320px;
}

.our-portfolio .owl-nav .owl-next {
  margin-left: 10px;
}

.our-portfolio .owl-nav span {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 35px;
  font-size: 30px;
  border: 2px solid #eee;
  border-radius: 50%;
  color: #ddd;
  transition: all 0.5s;
}

.our-portfolio .owl-nav span:hover {
  color: #33ccc5;
  border-color: #33ccc5;
}



/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.news {
  margin-top: 90px;
  /* padding: 120px 0px; */
  background-image: url(../images/banner-dec-right.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.student-corner {
  /* margin-top: 90px; */
  padding: 30px 0px;
  /* background-image: url(../images/banner-dec-right.png); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

}

.principal-president {
  /* margin-top: 30px; */
  padding: 20px 0px;
  /* background-image: url(../../j); */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.trainning-placement {
  margin-top: 60px;
  padding: 70px 0px;
  /* background-image: url(../../j); */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.staff {
  margin-top: 30px;
  padding: 70px 0px;
  /* background-image: url(../../j); */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.result{
     /* margin-top: 70px; */
    padding: 70px 0px;
    background-image: url(../../slider/img1.jpg);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
 
}
.event {
  margin-top: 30px;
  padding: 70px 0px;
  /* background-image: url(../../j); */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.bg-image {
  margin-top: 30px;
  padding: 70px 0px;
  background-image: url(../../download_8526775.png);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.contact-us {
  margin-top: 90px;
  padding: 120px 0px;
  background-image: url(../images/contact-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.trainning-placement {
  margin-top: 90px;
  padding: 120px 0px;
  background-image: url(../images/contact-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.contact-us .section-heading {
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
}

.contact-us .contact-info {
  padding: 40px 30px;
  border: 2px solid #919191;
}

.contact-us .contact-info ul li {
  text-align: center;
  display: block;
  margin-bottom: 30px;
}

.contact-us .contact-info ul li a {
  font-size: 15px;
  color: #afafaf;
  transition: all .5s;
}

.contact-us .contact-info ul li:hover a {
  color: #2a2a2a;
}

.contact-us .contact-info ul li:last-child {
  margin-bottom: 0px;
}

.contact-us .contact-info ul li .icon {
  margin-bottom: 10px;
}

.contact-us .contact-info ul li .icon img {
  max-width: 32px;
}

form#contact {
  position: relative;
  background-color: #fff;
  padding: 60px 80px;
  border-radius: 50px;
  text-align: center;
}

form#contact input {
  width: 100%;
  height: 46px;
  border-radius: 5px;
  background-color: transparent;
  border: 2px solid #919191;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  margin-bottom: 20px;
}

form#contact input::placeholder {
  color: #aaa;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 180px;
  min-height: 140px;
  height: 140px;
  border-radius: 5px;
  background-color: transparent;
  border: 2px solid #919191;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-bottom: 20px;
}

form#contact textarea::placeholder {
  color: #aaa;
}

form#contact button {
  display: inline-block;
  background-color: #33ccc5;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  margin-top: 20px;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #4771cb !important;
  transition: all .3s;
  outline: none;
  border: none;
}

form#contact button:hover {
  background-color: #4771cb !important;
  color: #fff !important;
  border-bottom: 2px solid #33ccc5 !important;
}



@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }

  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }

  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }

  .main-banner .left-content {
    margin-right: 0px;
  }

  .main-banner {
    text-align: center;
  }

  .main-banner:before {
    display: none;
  }

  .main-banner .right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }

  .features-item {
    margin-bottom: 45px;
  }

  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }

  .skill-item {
    margin-bottom: 30px;
  }

  .service-item {
    text-align: center;
  }

  .service-item .icon {
    margin-top: 0px;
    margin-bottom: 30px;
  }

  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }

  .our-portfolio .owl-nav {
    display: none !important;
  }

  .contact-info {
    margin-top: 60px;
  }

  form#contact {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }

  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }

  .main-banner .info-stat {
    margin-bottom: 15px;
  }

  .service-item {
    text-align: center;
    padding: 30px;
  }

  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }

  .service-item .right-content {
    display: inline-block;
  }

  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }

  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }

  .about-us .about-item {
    margin-top: 15px;
  }

  form#contact {
    padding: 30px;
  }
}

.border {
  border: 1px solid black;
}




/* news and event section */

.news-section {
  background-color: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  height: 481px;
  width: 100%;
  padding: 20px;
  position: relative;
}

.news-content {
  height: 100%;
  overflow-y: hidden;
  padding: 20px;
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
  position: absolute;
  width: 100%;
}

.news-item {
  margin-bottom: 15px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Blink Animation for News Text */
.news-item span {
  font-weight: bold;
  color: #e74c3c;
  animation: blink 1s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.event-section {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
  padding: 20px;
  font-family: 'Raleway', sans-serif;
  width: 100%;
}

.event-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #20638f;
  margin-bottom: 20px;
}

.event-item {
  padding: 15px;
  background: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 15px;
  color: #007bff;
  font-weight: 700;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.event-date {
  font-weight: 700;
  color: #e74c3c;
  margin-bottom: 5px;
}

section.news-event {
  padding: 30px 0;
}

.heading {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.6rem;
  color: #0056b3;
  font-weight: bold;
}

.quote {
  font-style: italic;
  font-weight: bold;
  color: #6c757d;
  padding: 15px;
  background-color: #e9ecef;
  border-radius: 5px;
}

.principal-president img {
  max-width: 90%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tab-content {
  margin-top: 30px;
  background-color: #e5e5e5;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.nav-tabs .nav-link {
  color: #0056b3;
  font-weight: bold;
}

.nav-tabs .nav-link.active {
  color: #000000;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  text-align: center;
  animation: text-zoom 1.5s ease-in-out infinite; /* Text zoom animation */
}

.nav-tabs .nav-link.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%; /* Wide for smooth animation */
  height: 100%;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"%3E%3Cpath fill="%230099ff" fill-opacity="1" d="M0,256L40,234.7C80,213,160,171,240,149.3C320,128,400,128,480,138.7C560,149,640,171,720,192C800,213,880,235,960,213.3C1040,192,1120,128,1200,101.3C1280,75,1360,85,1400,90.7L1440,96L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"%3E%3C/path%3E%3C/svg%3E') no-repeat;
  background-size: cover;
  animation: wave-move 3s linear infinite; /* Wave animation */
  z-index: -1; /* Behind the text */
}

.nav-tabs .nav-link.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #0099ff;
  border-radius: 5px;
  animation: border-animate 2s linear infinite; /* Border animation */
  pointer-events: none;
  z-index: 1; /* Ensures it's above the wave */
}

@keyframes wave-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes border-animate {
  0% {
    box-shadow: 0 0 5px #0099ff, 0 0 10px #0099ff;
  }
  50% {
    box-shadow: 0 0 15px #0099ff, 0 0 30px #0099ff;
  }
  100% {
    box-shadow: 0 0 5px #0099ff, 0 0 10px #0099ff;
  }
}

@keyframes text-zoom {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2); /* Slight zoom */
  }
}




.tab-pane p {
  line-height: 1.8;
  font-size: 1rem;
  color: #495057;
}

H2.t-e {
  font-size: 20PX;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 800;
}

.table {
  text-align: center;

}

.table img {
  border: 1px solid #bebebe;
  border-radius: 4px;
}

.table tr,
td,
th {
  border: 1px solid rgb(133, 133, 133);
}

h2.heading-inner {
  margin: 30px 0px;
  font-size: 1.3rem;
  color: #0056b3;
  font-weight: bold;
}



.card {
  width: 100%;
  /* max-width: 350px; */
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 10px;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 2px solid #ddd;
}

.card-body {
  padding: 15px;
}

.card-title {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: #333;
}

.card-description {
  font-size: 1em;
  color: #666;
  margin-bottom: 15px;
}

.card-button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
}

.card-button:hover {
  background-color: #0056b3;
}

@media (max-width: 600px) {
  .card {
    width: 100%;
    margin: 10px 0;
  }

  .card-image {
    height: 150px;
  }

  .card-title {
    font-size: 1.2em;
  }

  .card-description {
    font-size: 0.9em;
  }

  .card-button {
    font-size: 0.9em;
  }
}





/* contact us form */


.contact-info {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.contact-info-icon {
  margin-bottom: 15px;
}

.contact-info-item {
  background: #071c34;
  padding: 30px 0px;
  height: 180px;
}

.contact-page-sec .contact-page-form h2 {
  color: #071c34;
  text-transform: capitalize;
  font-size: 22px;
  font-weight: 700;

}

.contact-page-form .col-md-6.col-sm-6.col-xs-12 {
  padding-left: 0;
}

.contact-page-form.contact-form input {
  margin-bottom: 5px;
}

.contact-page-form.contact-form textarea {
  height: 110px;
}

.contact-page-form.contact-form input[type="submit"] {
  background: #4771cb!important;
  width: 150px;
  /* border-color: #071c34; */
}

.contact-info-icon i {
  font-size: 48px;
  color: #fda40b;
}

.contact-info-text p {
  margin-bottom: 0px;
}

.contact-info-text h2 {
  color: #fff;
  font-size: 22px;
  text-transform: capitalize;
  font-weight: 600;
  margin-bottom: 10px;
}

.contact-info-text span a {
  color: #999999;
  font-size: 16px;
  font-weight:600 ;
  display: inline-block;
  width: 100%;
}

.contact-page-form input {
  background: #f9f9f9 none repeat scroll 0 0;
  border: 1px solid #f9f9f9;
  margin-bottom: 20px;
  padding: 12px 16px;
  width: 100%;
  border-radius: 4px;
}

.contact-page-form .message-input {
  display: inline-block;
  width: 100%;
  padding-left: 0;
}

.single-input-field textarea {
  background: #f9f9f9 none repeat scroll 0 0;
  border: 1px solid #f9f9f9;
  width: 100%;
  height: 120px;
  padding: 12px 16px;
  border-radius: 4px;
}

.single-input-fieldsbtn input[type="submit"] {
  background: #33ccc5;
  color: #fff;
  display: inline-block;
  font-weight: 600;
  padding: 10px 0;
  text-transform: capitalize;
  width: 150px;
  margin-top: 20px;
  font-size: 16px;
}

.single-input-fieldsbtn input[type="submit"]:hover {
  background: #071c34;
  transition: all 0.4s ease-in-out 0s;
  border-color: #071c34
}

.single-input-field h4 {
  color: #464646;
  text-transform: capitalize;
  font-size: 14px;
}

.contact-page-form {
  display: inline-block;
  width: 100%;
  margin-top: 30px;
}

.contact-page-map {
  margin-top: 36px;
}

.contact-page-form form {
  padding: 20px 15px 0;
}


.contact-page-sec {

  /* margin-top: 50px; */
  padding: 30px 0px;
  /* background-image: url(../../j); */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

}
.comittie {
  /* margin-top: 70px; */
  padding: 70px 0px;
  /* background-image: url(../../j); */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}


.carousel-item {
  height: 80vh; /* Default height for large screens */
  background-size: cover;
  background-position: center;
}

/* Adjust height for smaller screens */
@media (max-width: 992px) { /* Tablets and below */
  .carousel-item {
    height: 60vh;
  }
}

@media (max-width: 768px) { /* Mobile devices */
  .carousel-item {
    height: 50vh;
  }
}

@media (max-width: 576px) { /* Small mobile devices */
  .carousel-item {
    height: 40vh;
  }
}


.carousel-caption {
  bottom: 30%;
  animation: fadeIn 2s ease-in-out;
}

.carousel-caption h1 {
  font-size: 3rem;
  font-weight: bold;
}

.carousel-caption p {
  font-size: 1.2rem;
  animation: fadeIn 1.5s ease-out;
}

.animated-word {
  display: inline-block;
  animation: wordBounce 2s infinite;
}

@keyframes wordBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .carousel-caption h1 {
    font-size: 2rem;
  }

  .carousel-caption p {
    font-size: 1rem;
  }
}

.slider-image{
  /* margin: 100px 0px 30px 0px; */
}
.featuresesese{
  /* margin-top: 200px; */
}




.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin: 0 auto;
  max-width: 1200px;
}

.gallery-item {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

/* Modal Styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  display: block;
  margin: auto;
  max-width: 80%;
  max-height: 80%;
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from {
      transform: scale(0.5);
  }
  to {
      transform: scale(1);
  }
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #bbb;
}

#caption {
  color: white;
  text-align: center;
  padding: 10px 20px;
  font-size: 18px;
}




   /* Base styling */
   .header-top {
    background-color: #f4f4f4;
    padding: 10px 0;
    font-family: Arial, sans-serif;
  }

  .headertopleft {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
  }
  .headertopleft i {
    margin-right: 5px;
  }
  .headertopright ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
  }
  .headertopright ul li {
    margin: 0 10px;
  }
  .headertopright ul li a {
    text-decoration: none;
    font-size: 14px;
    color: #333;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  .headertopright ul li a:hover {
    background-color: #ddd;
  }

  /* Subheader Styling */
  .subheader {
    background-color: #333;
    padding: 10px 0;
    font-family: Arial, sans-serif;
  }
  .subheader .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .subheader-buttons {
    display: flex;
    gap: 15px;
  }
  .subheader-buttons button {
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;
    background-color: #555;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .subheader-buttons button:hover {
    background-color: #777;
  }
  .subheader-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 0;
    margin: 0;
  }
  .subheader-links li {
    margin: 0;
  }
  .subheader-links li a {
    text-decoration: none;
    font-size: 14px;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  .subheader-links li a:hover {
    background-color: #555;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .headertopleft {
      font-size: 12px;
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
    }
    .headertopright {
      width: 100%;
      margin-top: 10px;
    }
    .headertopright ul {
      flex-direction: column;
      align-items: center;
    }
    .headertopright ul li {
      margin: 5px 0;
    }
    .subheader .container {
      flex-direction: column;
      align-items: center;
    }
    .subheader-buttons {
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }
    .subheader-links {
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }
  }

  @media (max-width: 480px) {
    .headertopleft {
      font-size: 10px;
    }
    .headertopright ul li a {
      font-size: 12px;
    }
    .subheader-buttons button {
      font-size: 12px;
      padding: 8px 15px;
    }
    .subheader-links li a {
      font-size: 10px;
    }
  }
  /* Hover effect for navigation links */
.nav-link {
    color: #000; /* Default color */
    transition: color 0.3s ease; /* Smooth color transition */
    font-size: 13px;
}

.nav-link:hover {
    color: #007bff; /* Change to Bootstrap's primary blue on hover */
}

.nav-link.active {
    color: #141a22; /* Active state color */
    font-weight: bold; /* Bold active link */
}
.sub-header{
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  font-size: 13px;
}
.navbar{
  background: url(../../04.jpg);
  
    position: relative;
    top: 0px;
    color: #000000;
    left: 0px;
    right: 0px;
    z-index: 100;
    /* height: 100px; */
    background-size: cover;
    -webkit-transition: all .5s ease 0s;
    -moz-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    transition: all .5s ease 0s;
}
#navbarNav ul li a{
  font-size: 15px;
  padding: 10px 20px;
  font-weight: 600;
  color: black;
}
a.nav-link:hover {
  text-shadow: 1px 1px 2px rgb(136, 163, 165), 0 0 1em rgba(66, 133, 189, 0.384), 0 0 0.2em rgb(27, 94, 156);
  color:#332f2f !important;
}
@media (max-width: 768px) {
  .sub-header .nav {
    overflow-x: auto;
    white-space: nowrap; /* Prevents wrapping of menu items */
  }
  .sub-header .nav-item {
    display: inline-block; /* Ensures menu items stay in a single line */
  }
}



@media (max-width: 992px) {
    .sub-header {
      display: none;
    }
    .mobile-sub-header {
      display: block;
      padding: 15px;
      background-color: #f8f9fa;
      border-top: 1px solid #ddd;
    }
  }

  @media (min-width: 993px) {
    .mobile-sub-header {
      display: none;
    }
  }

  .mobile-sub-header a {
    display: block;
    padding: 8px 0;
    color: #333;
    text-decoration: none;
    font-size: 14px;
  }

  .mobile-sub-header a:hover {
    color: #e53935;
  }