/*
================================
Basic css
================================
*/

@import "fonts.css";
@import "utility-clases.css";

a:focus {
     outline: 0px;
}

a,
a:hover {
     text-decoration: none !important;
}

ul {
     margin-bottom: 0;
     list-style: none;
     padding-left: 0;
}

body {
     line-height: 26px;
     font-style: normal;
     font-weight: 300;
     color: #000;
     font-size: 14px;
     overflow-x: hidden;
     font-family: 'Roboto-Regular';
}

section {
     margin: 30px 0;
}

.pl-5-pr-5
{
     padding-left: 10px;
     padding-right: 10px;
}

/*
======================
BUTTON
======================
*/

.btn-custome {
     border: 2px solid #F38321;
     /*min-width: 140px;*/
     display: inline-block;
     height: 37px;
     line-height: 22px;
     padding: 5px;
}

.btn-custome .fa {
     color: #F38321;
     float: right;
     margin-right: 5px;
     font-size: 1.5em;
}

.btn-custome span {
     color: #fff;
     background-color: #F38321;
     padding: 5px;
     position: relative;
     margin-right: 25px;
}

.btn-custome span:after {
     position: absolute;
     content: '';
     right: -20px;
     top: 0;
     border-left: 10px solid #F38321;
     border-top: 12px solid transparent;
     border-bottom: 15px solid #F38321;
     border-right: 10px solid transparent;
}

.btn-custome:hover {
     border: 2px solid #F38321;
}

.btn-custome:hover .fa {
     color: #F38321;
}

.btn-custome:hover span {
     background-color: #F38321;
}

.btn-custome:hover span:after {
     border-left: 10px solid #F38321;
     border-bottom: 15px solid #F38321;
}


      .navigation .logo
     {
         padding: 5px 0;
     }



/*
======================
Home Page Heading
======================
*/

.home-heading {
     font-family: 'OpenSans-Bold';
     text-transform: uppercase;
     position: relative;
     padding-bottom: 10px;
     margin: 8px 0;
}

.home-heading:before,
.home-heading:after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
}

.home-heading:before {
     width: 50px;
     height: 4px;
     background-color: #F38321;
}

.home-heading:after {
     width: 100%;
     height: 1px;
     background-color: #bababa;
}

.home-heading h4 {
     color: #262323;
     margin: 0;
     display: inline-block;
}

.home-heading h4 .brown {
     color: #F38321;
}

.home-heading .button-video
{
     float: right;
     display: inline-block;
}

/*
===============================
Fade In Bootstrap Carousel
===============================
*/
/*
.carousel-fade .carousel-item {
     opacity: 0;
     transition-duration: .6s;
     transition-property: opacity;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
     opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
     opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
     transform: translateX(0);
     transform: translate3d(0, 0, 0);
}
*/


/*
================================
04 Section banner
================================
*/

section.banner {
    position: relative;
    height: 180px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

section.banner:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(5, 164 ,1 ,.4);
}

section.banner .page-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-family: 'Roboto-Bold';
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 1px 1px #333;
}

/*
================================
top bar
================================
*/

.top {
     padding: 3px 0;
     background-color: #2d2b2b;
}

.top ul.left-ul li {
     float: left;
     margin-right: 10px;
}

.top ul.left-ul li:last-child a {
     border-right: 0px solid transparent;
}

.top ul.left-ul li a {
     color: #fff;
     font-size: 14px;
     border-right: 1px solid #fff;
     padding-right: 8px;
}

.top ul.left-ul li a .fa {
     color: #F38321
}

.top ul.right-ul {
     float: right;
}

.top ul.right-ul li {
     float: left;
     margin-right: 10px;
}

.top ul.right-ul li a span.box {}

.top ul.right-ul li a {
     color: #fff;
     font-size: 16px;
     width: 30px;
     text-align: center;
     height: 30px;
     line-height: 30px;
     display: block;
}

.top ul.right-ul li a.profile {
     background-color:#f38321;
}
.top ul.right-ul li a.facebook {
     background-color: #3A589B;
}

.top ul.right-ul li a.twitter {
     background-color: #00ADEE;
}

.top ul.right-ul li a.instagram {
     background-color: #3A589B;
}

.top ul.right-ul li a.youtube {
     background-color: #D22215;
}

.top ul.right-ul li a.facebook .fa,
.top ul.right-ul li a.twitter .fa,
.top ul.right-ul li a.instagram .fa,
.top ul.right-ul li a.youtube .fa {
     transition: all .5s linear;
}

.top ul.right-ul li:hover a.facebook .fa,
.top ul.right-ul li:hover a.twitter .fa,
.top ul.right-ul li:hover a.instagram .fa,
.top ul.right-ul li:hover a.youtube .fa {
     transform: rotate(360deg);
}


/*
================================
Navigation bar
================================
*/

.navigation .toggle
{
     display: none;
}

.navigation .logo-section {
     position: relative;
     background-color:#f38321; 
}

.navigation .logo-section:before {
     left: 0;
}

.navigation .logo-section:after {
     right: 0;
}

.navigation .logo-section:before,
.navigation .logo-section:after {
     content: '';
     position: absolute;
     width: 15px;
     height: 100%;
     background-color: #F38321;
     top: 0;
}

.navigation {
     background-color: #fff;
     padding: 0px;
}

.navigation .nav-navs > ul {
     float: right;
     margin-right: 30px;
}

.navigation .nav-navs ul li.main-li {
     float: left;
     margin: 0 0px;
     position: relative;
}

.navigation .nav-navs ul li.main-li:hover {
     /*background-color: #F38321;*/
}

.navigation .nav-navs ul li.main-li:hover>a {
     color:#F38321;
}

.navigation .nav-navs ul li a {
     display: block;
     padding:26px 14px;
     font-size: 14px;
     font-family: 'Roboto-Medium';
     text-transform: uppercase;
     color: #333;
}

.navigation .nav-navs ul li.main-li.dropdown>a {
     position: relative;
}

.navigation .nav-navs ul li.main-li.dropdown>a:before {
     position: absolute;
     content: '\f0d7';
     font-family: FontAwesome;
     right: 5px;
     top: 50%;
     transform: translateY(-50%);
}

.navigation .nav-navs ul li.main-li.active a {
     background-color: #F38321;
     color: #fff;
}

@media screen and (min-width: 1025px)
{
     .navigation .nav-navs ul li.main-li.dropdown ul.submenu
     {
          opacity: 0;
          transform: perspective( 550px) rotateX( -90deg);
          transform-origin: top;
          transition: transform .3s linear, opacity .4s linear;
     }   
     .navigation .nav-navs ul li.main-li.dropdown ul.submenu.show-menu {
          transform: perspective( 550px) rotateX( 0deg) !important;
          opacity: 1 !important;
     }
  
}

.navigation .nav-navs ul li.main-li.dropdown ul.submenu {
     position: absolute;
     background-color: #fff;
     top: 100%;
     min-width: 180px;
     background-color: #f3f3f3;
     margin-right: 0;
     box-shadow: 1px 2px 2px #d8d8d8;
     z-index: 100;
}

.navigation .nav-navs ul li.main-li.dropdown ul.submenu li {
     white-space: nowrap;
     background-color: #F3F3F3;
}

.navigation .nav-navs ul li.main-li.dropdown ul.submenu li:hover {
     background-color: #F38321;
}

.navigation .nav-navs ul li.main-li.dropdown ul.submenu li:hover a {
     color: #fff;
     border-bottom-color: transparent;
}

.navigation .nav-navs ul li.main-li.dropdown ul.submenu li a {
     padding: 5px 15px;
     font-size: 14px;
     border-bottom: 1px dashed #9c9494;
}

.navigation .nav-navs ul li.main-li.dropdown ul.submenu li:last-child a {
     border-bottom: 1px solid transparent
}

.navigation .nav-navs ul li.main-li.dropdown ul.submenu li
{
     position: relative;
}

.navigation .nav-navs ul li.main-li.dropdown ul.submenu li ul.second-submenu
{
     position:absolute;
     left: 100%;
     top: 0px;
     min-width: 150px;
     display: none;
}

.navigation .nav-navs ul li.main-li.dropdown ul.submenu li:hover ul.second-submenu
{
     display: block;
}

.navigation .nav-navs ul li.main-li.dropdown ul.submenu ul.second-submenu li a
{
     padding:5px 15px;
     color: #000;
      border-bottom: 1px dashed #9c9494;
}

/*
================================
About The Company
================================
*/

.home-intro .about-picture {
     position: relative;
     padding: 20px;
     width: 350px;
     float: left;
     margin-top: 10px;
}

.home-intro .about-picture span {
     border: 5px solid #F38321;
     display: block;
     position: absolute;
     z-index: -1;
     top: -5px;
     left: -5px;
}

.home-intro .about-picture img {
     transition: all .5s linear;
     transform: scale(1);
}

.home-intro .about-picture:hover img {
     transform: scale(1.1);
}


/*
================================
Initiative home page
================================
*/

.owl-theme .owl-controls .owl-buttons div.owl-prev,
.owl-theme .owl-controls .owl-buttons div.owl-next {
     background: #F38321;
     border: 1px solid #F38321;
     color: #fff;
     opacity: 1;
     font-family: 'Montserrat-Medium';
     font-size: 14px;
}

.owl-theme .owl-controls .owl-buttons div.owl-prev:hover,
.owl-theme .owl-controls .owl-buttons div.owl-next:hover {
     background-color: #F38321;
     color: #fff;
     border: 1px solid #F38321;
}

#initiative .testimonial .initiative_box .picture,
#latest-event .testimonial .initiative_box .picture {
     width: 100%;
     height: 100%;
     overflow: hidden;
     position: relative;
}

#latest-event .testimonial .initiative_box .picture .overlay,
#initiative .testimonial .initiative_box .picture .overlay {
     position: absolute;
     left: -100%;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, .6);
     z-index: 2;
     transition: all .3s linear;
}

#initiative .testimonial:hover .initiative_box .picture .overlay,
#latest-event .testimonial:hover .initiative_box .picture .overlay {
     left: 0;
}

#initiative .testimonial:hover .initiative_box .picture .overlay .fa,
#latest-event .testimonial:hover .initiative_box .picture .overlay .fa {
     position: absolute;
     top: 50%;
     left: 50%;
     font-size: 2em;
     color: #fff;
     transform: translateX(-50%) translateY(-50%);
     text-shadow: 1px 1px #000;
}

#initiative .testimonial .initiative_box .picture img {
     transform: scale(1);
     transition: all .5s linear;
}

#initiative .testimonial:hover .initiative_box .picture img,
#latest-event .testimonial:hover .initiative_box .picture img {
     transform: scale(1.1);
}

.testimonial .initiative_box .title,
.testimonial .initiative_box .title {
     background-color: #F38321;
     text-align: center;
     font-family: 'Montserrat-Medium';
     font-size: 16px;
     padding: 5px 0;
}

.testimonial .initiative_box .title.mt-minus{
     margin-top: -9px;

}

.testimonial .initiative_box .title a,
.testimonial .initiative_box .title a {
     color: #fff;
     display: block;
}

.video-title{
     background-color: #F38321;
     text-align: center;
     font-family: 'Montserrat-Medium';
     font-size: 16px;
     padding: 5px 0;
}

.video-title a{
          color: #fff;
     display: block;
}

.video-title.mt-minus{
     margin-top: -19px;

}


/*
==========================
Home Page Gallery
==========================
*/

section.gallery-calendar .gallery-pic .mycol {
     width: calc(95%/4);
     float: left;
     position: relative;
     margin: 0 5px;
     margin-bottom: 10px;
}

section.gallery-calendar .gallery-pic .mycol .overlay {
     position: absolute;
     width: 100%;
     height: 100%;
     background-color: rgba(5, 164, 1, .8);
     opacity: 0;
     transform: perspective( 550px) rotateX( -90deg);
     transform-origin: top;
     transition: transform .3s linear, opacity .4s linear;
}

section.gallery-calendar .gallery-pic .mycol:hover .overlay {
     transform: perspective( 550px) rotateX( 0deg);
     opacity: 1;
}

section.gallery-calendar .gallery-pic .mycol .overlay a {
     display: block;
     color: #fff;
}

section.gallery-calendar .gallery-pic .mycol .overlay .fa {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
     text-shadow: 1px 1px #333;
     font-size: 2em;
}

/*
================================
Media 
================================
*/

section.media .media-box
{
     background-color: #f3f3f3;
     box-shadow: 0 0 5px #d4c9c9;
     transition: all .5s linear;
}

section.media .media-box:hover
{
      box-shadow: 0 0 5px #333;    
}

section.media .media-box .img
{
     width: 292px;
     height: 214px;
     overflow: hidden;
     position: relative;
}

section.media .media-box .img .media-overlay
{
     position: absolute;
     left: 0;
     bottom:-100%;
     width: 100%;
     height: 100%;
     background-color:rgba(0,0,0, .7);
     transition: bottom .3s linear;
}

section.media .media-box:hover .img .media-overlay
{
     bottom: 0;
}

section.media .media-box .img .media-overlay .view,
section.media .media-box .img .media-overlay .redict
{
     width: 35px;
     height: 35px;
     border-radius: 50%;
     line-height: 35px;
     background-color: #ccc;
     display: block;
     text-align: center;
     position: absolute;
     top: -200%;
     color: #000;
     transition: top .7s linear;
}

section.media .media-box:hover .img .media-overlay .view,
section.media .media-box:hover .img .media-overlay .redict
{
     top: 50%;
}

section.media .media-box .img .media-overlay .view
{
     left: 40%
}
section.media .media-box .img .media-overlay .redict
{
     left: 55%;
}

section.media .media-box .title{
     background-color: #F38321;
     text-align: center;
     padding: 5px;
     font-family: 'Roboto-Medium';
     font-size: 16px;
}

section.media .media-box .title a
{
     color: #fff;
}

/*
===========================
Footer
===========================
*/

.footer {
     background-color: #1A1A1A;
     padding: 40px 0 10px;
     margin-top: 40px;
}

.footer .footer-logo {
     margin-top: 25px;
}

.footer .footer-logo .text {
     font-family: 'Roboto-Bold';
     font-size: 22px;
     margin-top: 10px;
     color: #fff;
     text-transform: uppercase;
}

.footer h4.ftr_heading {
     color: #fff;
     font-family: 'Roboto-Medium';
     font-size: 20px;
     margin-bottom: 10px;
     padding-bottom: 5px;
     border-bottom: 1px solid #F38321;
}

.footer .Address h4 {
     font-family: 'Roboto-Medium';
     font-size: 18px;
     color: #fff;
}

.footer .Address ul li {
     color: #fff;
}

.footer .Address ul li a {
     color: #fff;
}

.footer .Address ul li a .fa {
     color: #F38321;
     margin-right: 5px;
}

.copyright {
     background-color:#2d2b2b;
     color: #fff;
     text-align: center;
     padding: 5px;
}

.footer .social-media-footer ul li
{
     float: left;
     margin:0 5px;     
}

.footer .social-media-footer ul li a
{
     width: 40px;
     height: 40px;
     display: block;
     text-align: center;
     border-radius: 50%;
     background-color: #414040;
     transition: all .3s linear;
}

.footer .social-media-footer ul li:hover a
{
     border-radius: 5px;
}

.footer .social-media-footer
{
     margin-top: 20px;
}

.footer .social-media-footer ul
{
     justify-content: center;
     overflow: hidden;
     display: table;
     margin-left: auto;
     margin-right: auto;
}

.footer .social-media-footer ul li a .fa
{
     font-size: 1.5em;
     line-height: 42px;
     color: #fff;
}

.footer .social-media-footer ul li:nth-child(1) a
{
      background-color: #3A589B;    
}

.footer .social-media-footer ul li:nth-child(2) a
{
      background-color: #00ADEE;    
}
.footer .social-media-footer ul li:nth-child(3) a
{
      background-color: #3A589B;    
}
.footer .social-media-footer ul li:nth-child(4) a
{
      background-color: #D22215;    
}


/*
======================================
Mobile Responisve
======================================
*/



@media screen and (max-width: 767px)
{
      .navigation .logo
     {
          position: relative;
     }
     .navigation .logo .toggle
     {
          display: block;
          position: absolute;
          right: 0;
          top: 55%;
          transform: translateY(-55%);
          z-index: 3;
          color: #fff;
          cursor: pointer;
     }
     .navigation .logo .toggle .fa
     {
          font-size: 1.8em
     }

     .small-navi
     {
          padding-left: 0;
          padding-right: 0;
     }

     .navigation .nav-navs
     {
          height: 100%;
          display: none;
     }
     .navigation .nav-navs ul
     {
          padding:5px 0;
          margin-right: 0;
          width: 100%;
          background-color: #ece7e7;
     }
     .navigation .nav-navs ul li.main-li
     {
          float: none;
          border-bottom: 1px dashed #b1a9a9;
          clear: both;
     }
     .navigation .nav-navs ul li.main-li:last-child
     {
          border-bottom: 1px solid transparent;
     }
     .navigation .nav-navs ul li a
     {
          padding:5px 15px;
          font-size: 13px;
     }
     .navigation .nav-navs ul li.main-li.dropdown ul.submenu
     {
          display: none;
          position: static;
          box-shadow: none;
     }
     .navigation .nav-navs ul li.main-li.dropdown ul.submenu li a
     {
          font-size: 13px;
          border-bottom-color: #504848;
     }

     .navigation .nav-navs ul li.main-li.dropdown ul.submenu li
     {
          background-color: #AEAAAA;
     }
     
     /*============*/
     section.media .media-box .img
     {
          width: 100%;
     }
     
     section.gallery-calendar .gallery-pic .mycol
     {
          margin:0 3px;
          width: calc(95%/2);
          margin-bottom: 5px;
     }

     section.media .media-box
     {
          margin-bottom: 10px;
     }
     
     .top ul.left-ul
     {
          overflow: hidden;
          margin-bottom: 10px;
     }

     .top ul.left-ul li a
     {
          font-size: 13px;
          border-right: 0px solid transparent;
     }

     .top ul.left-ul li
     {
          width:calc(100%/2);
          margin-right: 0;
     }
     .top ul.left-ul li:last-child
     {
          text-align: center;
          width: 100%;
     }
     .top ul.right-ul
     {
          float: none;
          display: table;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 5px;
     }
     .navigation .logo-section:after {
          width: 85px;
     }
     .navigation .logo-section .logo img
     {
          width: 80%;
     }

     .footer .footer-logo
     {
          text-align: center;
          margin-bottom: 15px;
     }

     .footer h4.ftr_heading
     {
          margin-top: 10px;
     }

     section.media .media-box .img .media-overlay .view
     {
          left: 35%;
     }
     section.media .media-box .img .media-overlay .redict
     {
          left: 50%;
     }

}

/*
========================================
Timeline css design
========================================
*/
.main-timeline5 {
    overflow: hidden;
    position: relative
}

.main-timeline5 .timeline {
    position: relative;
    margin-top: -79px
}

.main-timeline5 .timeline:first-child {
    margin-top: 0
}

.main-timeline5 .timeline-icon,
.main-timeline5 .year {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.main-timeline5 .timeline:after,
.main-timeline5 .timeline:before {
    content: "";
    display: block;
    width: 100%;
    clear: both
}

.main-timeline5 .timeline:before {
    content: "";
    width: 100%;
    height: 100%;
    box-shadow: -8px 0 5px -5px rgba(0, 0, 0, .5) inset;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2
}

.main-timeline5 .timeline-icon {
    width: 210px;
    height: 210px;
    border: 25px solid transparent;
    z-index: 1;
    transform: rotate(45deg)
}

.main-timeline5 .year {
    display: block;
width: 110px;
height: 110px;
line-height: 31px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, .4);
font-size: 25px;
font-weight: 700;
color: #05A401;
text-align: center;
transform: rotate(-45deg);
padding-top: 22px;
border: 3px solid #05A401;
}

.main-timeline5 .timeline-content {
    width: 35%;
    float: right;
    background:#05A401;
    padding: 40px 20px;
    margin: 30px 0;
    z-index: 1;
    position: relative
}

.main-timeline5 .timeline-content:before {
          content: "";
          width: 20%;
          height: 10px;
          background: #05A401;
          position: absolute;
          top: 49%;
          left: -20%;
          z-index: -1;
          transform: translateY(-50%);
}

.main-timeline5 .timeline-content:after {
         content: "";
          width: 30px;
          height: 30px;
          background:#05A401;
          position: absolute;
          top: 50%;
          z-index: -1;
          transform: translateY(-50%);
          border-radius: 50%;
}

.main-timeline5 .title {
     font-size: 18px;
     color: #fff;
     margin: 0 0 8px;
     font-family: 'Roboto-Medium';
}

.main-timeline5 .description {
    font-size: 15px;
    text-align: justify;
    color: #fff;
    line-height: 24px;
    margin: 0;
    font-family: 'Roboto-Regular'
}

.main-timeline5 .timeline:nth-child(2n):before {
    box-shadow: 8px 0 5px -5px rgba(0, 0, 0, .5) inset
}


.main-timeline5 .timeline:nth-child(2n+2) .timeline-icon {
    transform: rotate(-135deg);
}

.main-timeline5 .timeline:nth-child(2n+2) .year {
    transform: rotate(135deg);
    color: #e97e2e;
     border: 3px solid #e97e2e;
}

.main-timeline5 .timeline:nth-child(2n+2) .timeline-content {
    float: left
}

.main-timeline5 .timeline:nth-child(1) .timeline-content:after,
.main-timeline5 .timeline:nth-child(2n+1) .timeline-content:after {
     left: -23%;
}

.main-timeline5 .timeline:nth-child(2n+2) .timeline-content:after {
    right:-23%;
    background-color: #E97E2E;
}

.main-timeline5 .timeline:nth-child(2n+2) .timeline-content:before {
    left: auto;
    right: -20%
}

.main-timeline5 .timeline:nth-child(2n+2) .timeline-content,
.main-timeline5 .timeline:nth-child(2n+2) .timeline-content:before {
    background: #e97e2e
}


@media only screen and (max-width:1199px) {
    .main-timeline5 .timeline {
        margin-top: -103px
    }
    .main-timeline5 .timeline-content:before {
        left: -18%
    }
    .main-timeline5 .timeline:nth-child(2n) .timeline-content:before {
        right: -18%
    }
}

@media only screen and (max-width:990px) {
    .main-timeline5 .timeline {
        margin-top: -127px
    }
    .main-timeline5 .timeline-content:before {
        left: -14%
    }
    .main-timeline5 .timeline:nth-child(2n) .timeline-content:before {
        right: -14%
    }
    .main-timeline5 .timeline-content::after {
         content: "";
         width: 20px;
         height: 20px;
         top: 49%;
     }
     .main-timeline5 .timeline:nth-child(1) .timeline-content::after,
     .main-timeline5 .timeline:nth-child(2n+1) .timeline-content::after 
          {
               left: -20%;
          }
     .main-timeline5 .timeline:nth-child(2n+2) .timeline-content::after {
         right: -19%;
         background-color: #E97E2E;
     }

}

@media only screen and (max-width:767px) {
    .main-timeline5 .timeline {
        margin-top: 0;
        overflow: hidden
    }
    .main-timeline5 .timeline:before,
    .main-timeline5 .timeline:nth-child(2n):before {
        box-shadow: none
    }
    .main-timeline5 .timeline-icon,
    .main-timeline5 .timeline:nth-child(2n) .timeline-icon {
        margin-top: -30px;
        margin-bottom: 20px;
        position: relative;
        transform: rotate(135deg)
    }
    .main-timeline5 .timeline:nth-child(2n) .year,
    .main-timeline5 .year {
        transform: rotate(-135deg)
    }
    .main-timeline5 .timeline-content,
    .main-timeline5 .timeline:nth-child(2n) .timeline-content {
        width: 100%;
        float: none;
        border-radius: 0 0 20px 20px;
        text-align: center;
        padding: 25px 20px;
        margin: 0 auto
    }
    .main-timeline5 .timeline-content:before,
    .main-timeline5 .timeline:nth-child(2n) .timeline-content:before {
        width: 15px;
        height: 25px;
        position: absolute;
        top: -22px;
        left: 50%;
        z-index: -1;
        transform: translate(-50%, 0)
    }
}

/*
=====================================
Page Content styling
=====================================
*/

.page-content p
{
     font-size: 14px;
}

.page-content .about-picture
{
     width: 350px;
     position: relative;
}

.page-content .about-picture.left
{
     float: left;
     margin-right: 20px;
     margin-bottom: 10px;
}

.page-content .about-picture.right
{
     float: right;
     margin-left: 20px;
     margin-bottom: 10px;
}


.page-content .about-picture span {
     border: 5px solid #F38321;
     display: block;
     position: absolute;
     z-index: -1;
     top:0px;
     left:0px;
}

.page-content .about-picture img {
     margin:0px;
     padding:8px;
}

.page-content .content-box ul
{
     display: inline-block;
     width: 65%;
}

.find-unorder-list ul li
{
     position: relative;
     padding-left: 25px;
     font-size:14px; 
     margin-bottom: 2px;
}

.find-unorder-list ul li:before
{
     content: '\f046';
     font-family: FontAwesome;
     position: absolute;
     left: 3px;
     color: #F38321;
     top: 2px;
     font-size: 1.1em;
}



.page-content .topic-box
{
    width: 100%;
    clear: both;
    margin-bottom: 15px;
    box-shadow: 0 0 5px #d8d7d7;
    padding:10px;
}

.page-content .topic-box .title
{
     font-family: 'Roboto-Bold';
     font-size: 20px;
     color: #F38321;
     margin-bottom: 5px;
}


.topic-box a.readmorebutton
{
     text-align: right;
     display: block;
     margin-top:5px;
     color: #F38321;
}

/*
=====================================
Sidebar
=====================================
*/

.main_category_left.is_stuck
{
     margin-top: 20px;
}

.sidebar .sidebar-heading
{
     font-family: 'Roboto-Medium';
     font-size: 20px;
     text-transform: capitalize;
     background-color: #F38321;
     color: #fff;
     padding:8px 15px;
     border-radius: 5px 5px 0 0;
     margin-bottom: 0;

}

.sidebar > ul
{
     height: 376px;
     overflow-y: auto;
     box-shadow: 0 0 5px #d8d7d7;
}

.sidebar > ul.sub
{
     height: auto;
     box-shadow:none;
     padding:0 !important;
}

.sidebar ul
{
     background-color: #fff;
     padding: 8px;

}

.sidebar ul li
{
     line-height: 25px;
     padding:5px 5px 0;
     padding-left: 25px;
     position: relative;
}

.sidebar ul li:before
{
     content: '\f046';
     position: absolute;
     font-size: 1em;
     left: 5px;
     top: 3px;
     font-family: FontAwesome;
     color: #F38321;
}

.sidebar ul li a
{
border-bottom: 1px solid #ccc;
display: block;
color: #000;
padding-bottom: 5px;
}

.sidebar ul li:hover > a{
     color: #266524;
}

/*
=====================================
Gallerys
=====================================
*/

.page-content .gallery-area
{
     /*column-count: 4;*/
     /*-webkit-column-count: 4;*/
     /*-moz-column-count: 4;*/
     /*-webkit-column-gap:10px;*/
      /* Chrome, Safari, Opera */
     /*-moz-column-gap:10px; /* Firefox */*/
     /*column-gap:10px;*/
}

.page-content .gallery-area .gallery-box
{
     margin-bottom: 10px;
}

.page-content .gallery-area .gallery-box a
{
     display: block;
     width: 100%;
     height: 100%;
}

.page-content .gallery-area .gallery-box a img
{
     box-shadow: 2px 2px 2px #e1dada;
     border-radius: 3px;
     transition: box-shadow .4s linear;
}

.page-content .gallery-area .gallery-box:hover a img
{
     box-shadow: 2px 2px 5px #aba8a8;
}

.video-box
{
     position: relative;
     margin-bottom: 10px;
}

.video-box a
{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,0);
}

.gallerybox-with-heading{
     box-shadow: 0 0 15px #ccc;
     padding: 5px;
     transition:box-shadow .4s linear;
}

.gallerybox-with-heading:hover
{
     box-shadow:0 0 15px #7d7979;
}

.gallerybox-with-heading .title
{
     font-size: 16px;
     font-family: 'Montserrat-SemiBold';
     text-align: center;
     color: #F38321;
     padding:5px 0;
}

.gallerybox-with-heading .title a
{
     color: #F38321;
     display: block;     
}

.gallerybox-with-heading .image-area
{
     height: 200px;
     overflow:hidden;
}

.gallerybox-with-heading .image-area img
{
     object-fit: cover;
     object-position:50%;
}

/*
========================================
Topic , aritcles and form diary
========================================
*/


/*
=============================
ENQUIRY
=============================
*/

form.enquiry .form-group .form-control
{
  border-radius: 0;
  /*border-color: #787878;*/
  border-color: transparent;
  padding-left: 10px;
  width: calc(100% - 35px);
  font-family: 'Roboto-Regular';
  color: #333;
  font-size: 14px;
}

form.enquiry .form-group .form-control:focus
{
  box-shadow: none;
}

form.enquiry .form-group label
{
  font-family: 'Roboto-Medium';
  font-size: 16px;
  margin-bottom: 5px;
}

form.enquiry .form-group .myinput
{
  border:1px solid #b1b1b1;
}

form.enquiry .form-group .myinput span.form-icon
{
    background-color: #d7d7d7;
    display: inline-block;
    width: 35px;
    height: 35px;
    border-right: 1px solid #b1b1b1;
    float: left;
}

form.enquiry .form-group .myinput .form-control::placeholder
{
  font-family: 'Roboto-Regular';
  color: #333;
  font-size: 14px;
}
form.enquiry .form-group .myinput .form-control::-webkit-placeholder
{
  font-family: 'Roboto-Regular';
  color: #333;
  font-size: 14px;
}
form.enquiry .form-group .myinput .form-control::-moz-placeholder
{
  font-family: 'Roboto-Regular';
  color: #333;
  font-size: 14px;
}

form.enquiry .form-group .myinput span.form-icon
{
    background-repeat: no-repeat;
    background-size: 20px;
    background-position:7px 9px;
}

form.enquiry .form-group.myinput span.form-icon.user,
form.enquiry .form-group .myinput span.form-icon.user
{
    background-image: url(../img/enquiry-icon/user.png);
}
form.enquiry .form-group .myinput span.form-icon.company
{
    background-image: url(../img/enquiry-icon/company.html);
}

form.enquiry .form-group .myinput span.form-icon.email
{
    background-image: url(../img/enquiry-icon/envelope.png);
}
form.enquiry .form-group .myinput span.form-icon.mobile
{
    background-image: url(../img/enquiry-icon/mobile.png);
}
form.enquiry .form-group: .myinput span.form-icon.map
{
    background-image: url(../img/enquiry-icon/map.html);
}
form.enquiry .form-group .myinput span.form-icon.subject
{
    background-image: url(../img/enquiry-icon/open-book.png);
}
form.enquiry .form-group .myinput span.form-icon.comment
{
    background-image: url(../img/enquiry-icon/comment.png);
}

form.enquiry .form-group:last-child .myinput span.form-icon
{
  border-bottom:1px solid #b1b1b1;
}

.enquiry .btn.submit
{
  border-radius: 2px;
  padding:8px 20px;
  transition: all .5s linear;
  background-color: #F38321;
  border-color: #F38321;
}

.enquiry .btn.submit:hover
{
  box-shadow: inset 200px 0px #125110;
  border-color: #125110;
}

/*
==============================================
Follow us
==============================================
*/

.widget_heading
{
     background-color: #333;
     width: 100%;
     padding:8px 15px;
     color: #fff;
     border-radius: 10px 10px 0 0;
     font-size: 18px;
}

.widget_heading.facebook
{
     background-color: #3A589B;
}

.widget_heading.youtube
{
     background-color: #D22215;
}

.widget_heading.twitter
{
     background-color:#00ADEE;
}
.widget_heading.insta
{
     background-color:#F38321;
}

/*
===============================
Table daily updates
===============================
*/

#no-more-tables .table thead
{
     background-color:#F38321;
     color: #fff;
}

#no-more-tables .table-striped tbody tr:nth-of-type(2n+1) {
    background-color: rgba(29, 27, 27, 0.1);
    }

/*
======================================
Tablet Responisve
======================================
*/
@media screen and (min-width: 768px) and (max-width: 1024px)
{
     .logo
     {
          text-align: center;
     }
     .logo img
     {
          width: 200px;
          margin:auto;
     }
     .navigation .logo-section::before,
     .navigation .logo-section::after 
     {
          width: 37%;
     }
     .navigation .nav-navs > ul
     {
          margin-right: 0;
          float: none;
     }
     
     .navigation .nav-navs ul li a
     {
          padding:15px 18px;
     }
     .navigation .nav-navs ul li.main-li
     {
          margin:0;
     }
     .hide-sm
     {
          display: none;
     }
     .navigation .nav-navs ul li.main-li.dropdown ul.submenu
     {
          display: none;
     }
     .navigation .nav-navs ul li.main-li.dropdown ul.submenu.show-menu
     {
          display: block;
     }
     section.media .media-box
     {
          margin-bottom: 15px;
     }
     section.media .media-box .img
     {
          width: 100%;
     }
     .footer .footer-logo .text
     {
          font-size: 18px;
     }

     .gallerybox-with-heading
     {
          margin-bottom: 15px;
     }
     .gallerybox-with-heading .image-area
     {
          height: 100%;
     }

     .page-content .about-picture.left {
         float: none;
         margin-right: 0;
         margin-bottom: 10px;
         width: 100%;
     }
     .home-intro .about-picture {
          padding: 11px;
          width: 250px;
          float: left;
     }

     .page-content .gallery-area {
        /* column-count: 2;
         -webkit-column-count: 2;
         -moz-column-count: 2;
         -webkit-column-gap: 10px;
         -moz-column-gap: 10px;
         column-gap: 10px;*/
     }

     .home-heading h4
     {
          display: block;
     }
     .home-heading .button-video {
         float: none;
         display: block;
         text-align: right;
         margin-top: 10px;
     }

}

@media screen and (max-width: 767px)
{
     .navigation .logo
     {
          position: relative;
     }
     .navigation .logo .toggle
     {
          display: block;
          position: absolute;
          right: 0;
          top: 55%;
          transform: translateY(-55%);
          z-index: 3;
          color: #fff;
          cursor: pointer;
     }
     .navigation .logo .toggle .fa
     {
          font-size: 1.8em
     }

     .small-navi
     {
          padding-left: 0;
          padding-right: 0;
     }

     .navigation .nav-navs
     {
          height: 100%;
          /*display: none;*/
     }
     .navigation .nav-navs ul
     {
          padding:5px 0;
          margin-right: 0;
          width: 100%;
          background-color: #ece7e7;
     }
     .navigation .nav-navs ul li.main-li
     {
          float: none;
          border-bottom: 1px dashed #b1a9a9;
          clear: both;
     }
     .navigation .nav-navs ul li.main-li:last-child
     {
          border-bottom: 1px solid transparent;
     }
     .navigation .nav-navs ul li a
     {
          padding:5px 15px;
          font-size: 13px;
     }
     .navigation .nav-navs ul li.main-li.dropdown ul.submenu
     {
          display: none;
          position: static;
          box-shadow: none;
     }
     .navigation .nav-navs ul li.main-li.dropdown ul.submenu li a
     {
          font-size: 13px;
          border-bottom-color: #504848;
     }

     .navigation .nav-navs ul li.main-li.dropdown ul.submenu li
     {
          background-color: #AEAAAA;
     }

     .navigation .nav-navs ul li.main-li.dropdown ul.submenu li ul.second-submenu 
     {
         position: static;
         left: 0;
         top: 0px;
         padding:0;
         display: none;
     }
     .navigation .nav-navs ul li.main-li.dropdown ul.submenu li:hover ul.second-submenu{
         display: block;
     }
     .navigation .nav-navs ul li.main-li.dropdown ul.submenu li ul.second-submenu li{
          background-color:#8C8888;
     }
     .navigation .nav-navs ul li.main-li.dropdown ul.submenu li ul.second-submenu li a{
          color:#fff;
     }
     /*============*/
     section.media .media-box .img
     {
          width: 100%;
     }
     
     section.gallery-calendar .gallery-pic .mycol
     {
          margin:0 3px;
          width: calc(95%/2);
          margin-bottom: 5px;
     }

     section.media .media-box
     {
          margin-bottom: 10px;
     }

     .page-content .about-picture{
         width: 100%;
         position: relative;
     }
     .section.banner .page-heading
     {
          white-space: nowrap;
     }

    section.banner .page-heading
    {
     white-space: nowrap;
    }
    .home-heading h4
    {
          font-size: 1.5em;
    }
    .page-content .content-box ul
    {
          width: 100%;
    }
    .page-content .content-box ul li
    {
       margin-bottom: 8px;
    }
    .home-heading h4
    {
     display: block;
    }
    .home-heading .button-video {
    float: none;
    display: block;
    margin-top: 10px;
     }

     .page-content .gallery-area {
         /*column-count: 2;
         -webkit-column-count: 2;
         -moz-column-count: 2;
         -webkit-column-gap: 5px;
         -moz-column-gap: 5px;
         column-gap: 5px;*/
     }

    .page-content .about-picture.left {
         float: none;
         margin-right: 0;
         margin-bottom: 10px;
     }

     .topic-box .content-box
     {
          height: 155px;
     }

    section.banner
    {
          height: 120px;
    }
    
    section.banner .page-heading
    {
          font-size: 25px;
    }
}



/*
===============================================
Home Page Boxes
===============================================
*/

.effect-box
{
     position:relative;
     box-shadow: 0 0 5px #aba7a7;
}

.effect-box .overlay-effect
{
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     background-color: rgba(0,0,0,.6);
     transform: scale(1);
     transition: transform .1s linear;
}

.effect-box:hover .overlay-effect
{
   transform: scale(0);  
}

.effect-box .overlay-effect .title
{
     color: #fff;
     font-size: 20px;
     position: absolute;
     top: 90%;
     left: 50%;
     white-space: nowrap;
     text-shadow: 1px 1px #000;
     transform: translateX(-50%) translateY(-90%);
}


.effect-box .overlay-button
{
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     background-color: rgba(5, 164, 0,.8);
     transform: scale(0);
     transition: transform .3s linear;
}

.effect-box:hover .overlay-button
{
     transform: scale(1);
}

.effect-box .overlay-button .title
{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
}


.effect-box .overlay-button .title h3
{
     font-size: 20px;
     color: #fff;
     text-shadow: 1px 1px #000;
     white-space: nowrap;
     font-family: 'Roboto-Medium';
}

.effect-box .overlay-button .title  .readmore-button
{
     width: 100px;
     margin:auto;
     height: 35px;
     border:2px solid #fff;
     text-align: center;
     line-height: 35px;     
     position: relative;
}


.effect-box .overlay-button .title  .readmore-button:hover
{
     background-color: #fff;
}


.effect-box .overlay-button .title  .readmore-button a
{
     display: block;
     color: #fff;
}

.effect-box .overlay-button .title  .readmore-button:hover a
{
     color:rgb(5, 164, 0);
}

/*
========================================
Home Recent Interview
========================================
*/

.interview-area
{
     background-color: #fff;
     box-shadow: 0 0 15px rgba(26,26,26,.2);
     padding:10px;
     transition: box-shadow .4s linear;
     border-radius: 5px;
     margin-bottom: 20px;
}

.interview-area:hover
{
     box-shadow: 0 0 15px rgba(26,26,26,.8);
}


.interview-area .image
{
     height: 278px;
     overflow: hidden;
}

.interview-area .detail-area
{
     position: relative;
}

.interview-area .detail-area:before
{
     content: '';
     position: absolute;
     width: 0%;
     height: 3px;
     top: -3px;
     left: 0;
     background-color: #F38321;
     transition: width .5s linear;
}

.interview-area:hover .detail-area:before
{
     width: 100%;
}

.interview-area .detail-area .date
{
     display: inline-block;
     padding:3px;
     margin-top: 5px;
}

.interview-area .detail-area .date .fa{
     color:#E97E2E;
}

.interview-area .detail-area .title
{
     font-size: 16px;
     font-family: 'Roboto-Medium';
     color: #000;
}

.interview-area .detail-area  a.readmore
{
     display: block;
     text-align: right;
     color: #E97E2E;
     font-family: 'Roboto-Medium';
}

/*
=========================================
Quotes
=========================================
*/

#Quotes .testimonial .quotes-wrapper
{
     position: relative;
     margin:10px;
     padding:10px;
     background-color: #eaeaea;
     box-shadow:  0 0 15px rgba(26,26,26,.2);
     transition: box-shadow .3s linear;
     overflow: hidden;
}

#Quotes .testimonial .quotes-wrapper:hover
{
     box-shadow:  0 0 15px rgba(26,26,26,.6)
}


#Quotes .testimonial .quotes-wrapper:before
{
     position: absolute;
     content: '';
     width: 20%;
     height: 100%;
     left: -100%;
     top: 0;
     background-color: rgba(255,255,255,.3);
     transition: left .5s linear;
}

#Quotes .testimonial:hover .quotes-wrapper:before
{
     left: 100%;
}

.center
{
     display: -webkit-box; 
     display: -moz-box;
     display: -ms-flexbox;
     display: -webkit-flex; 
     display: flex;
     justify-content: center;
}

@media screen and (max-width: 767px)
{
     .effect-box
     {
          margin-bottom: 15px;
     }
}


@media screen and (min-width: 768px) and (max-width: 1024px)
{
     .navigation .nav-navs ul li a
     {
          font-size: 13px;
          padding:15px 13px;
     }
}


/*
     ********************************
     Modal
     ********************************
     */

     #myModal .modal-dialog.modal-lg
     {
          max-width: 500px;
     }

     #myModal .modal-body
     {
       padding: .7rem;
       position: relative;
     }

     #myModal .modal-body button[data-dismiss="modal"]
     {
         position: absolute;
       right: 15px;
       top:10px;
       color: #fff;
       opacity: 1;
     }

     #myModal .modal-body .image
     {
          max-width: 500px;
     }

     #myModal .modal-body .popupText
     {
       position: static;
       bottom: 12px;
       left: 0;
       width:auto;
       text-align: justify;
       padding: 7px 0;
     }

     #myModal .modal-body .popupText span{
       color: #000;
       font-family: var(--poppins2);
       font-size: 14px;
       padding-left: 0%;
       padding-right: 0%;
     }
     #myModal .modal-body .popupText span a
     {
       color: var(--color1);
       text-shadow: none;
       font-size: 15px;
     }