/* ---------------------------------------------------------------------
A.	Theme Name: Btec Business HTML5 Responsive Template;
B.	Author: Idrak;
C.	Description: All kind of business service related HTML5 Responsive Template;
D.	Version:1.0;
--------------------------------------------------------------------- */
/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600&display=swap');*/

/* Css Index
---------------------------
1. Theme default css
2. Header Top
3. IT Slider
4. Consultation slider
5. Video slider
6. Single portfolio
7. About section
8. Service section
9. Counter section
10. Circle section
11. Project section
12. Team section
13. App download section
14. News section
15. Contact section
16. Testimonial section
17. Call to action section
18. Footer section
19. Banner section
20. About 2 section
21. About 2 video section
22. Mission vision section
23. Value section
24. Who we are section
25. 404 error section
26. Jobs & career section
27. Faqs section
28. All news section
30. News single section
31. Scroll top
*/

/* 1. Theme default css
----------------------------------------------- */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    line-height: 150%;
    overflow-x: hidden;
}
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
::selection {
    background: #333;
    color: #fff;
    text-shadow: none;
}
::-moz-selection {
    background: #333;
    /* Firefox */
    color: #fff;
    text-shadow: none;
}
::-webkit-selection {
    background: #333;
    /* Safari */
    color: #fff;
    text-shadow: none;
}
:active,
:focus {
    outline: none !important;
}
body {
    line-height: 2;
    color: #777f91;
    font-size: .9rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    background-color: #fff;
    overflow-x: hidden;
}
ul, li{
    list-style: none;
    margin: 0;
    padding: 0;
}
a, .button{
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
a {
    color: #5798fe;
    text-decoration: none;
    font-weight: 600;
    transition: all linear 0.3s;
}
@media screen and (prefers-reduced-motion: reduce) {
    a {
        transition: none;
    }
}
a:hover,
a:focus {
    color: #020e28;
    text-decoration: none;
}
a img {
    border: none;
}

iframe {
    border: none !important;
}

/* ----- Headings ----- */
h1,h2,h3,h4,h5,h6{
    font-weight: 700;
    color: #222222;
    margin-top: 0;
    font-style: normal;
    text-transform: normal;
    font-family: 'Open Sans', sans-serif;
}
h1, .h1 {
    font-size: 3rem;
}
h2, .h2 {
    font-size: 2.5rem;
}
h3, .h3 {
    font-size: 1.8rem;
}
h4, .h4 {
    font-size: 1.2rem;
}
h5, .h5 {
    font-size: 1.25rem;
}
h6, .h6 {
    font-size: 1rem;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
    color: inherit;
}
/* ----- Common css ----- */
html,
html a {
    -webkit-font-smoothing: antialiased;
}

body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}
img {
    height: auto;
    max-width: 100%;
}
iframe,
embed,
object {
    margin-bottom: 1.5em;
    max-width: 100%;
}
iframe {
    display: block;
    margin: 0;
    max-width: 100%;
}
form label {
    color: #555;
    font-weight: 400;
}
pre {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px 10px 20px;
}
.inline-block,
.display-inline-block {
    display: inline-block;
}
.display-inline {
    display: inline;
}
.display-block {
    display: block;
}
.f-left{
    float: left;
}
.f-right{
    float: right;
}
.fix{
    overflow: hidden;
}
.d-flex{
    display: flex;
}
.clear{
    clear: both
}
.section-title span{
    text-transform: uppercase;
    color: #5798fe;
}
/* ----- index page ----- */
#default-home .container{
    max-width: 1300px;
}
/* ----- index-4 page ----- */
#box-home{
    max-width: 1300px;
    margin: 50px auto;
    box-shadow: 0 7px 10px rgba(4, 27, 82, 0.4);
}
#box-home .container{
    max-width: 1300px;
    padding: 0 50px;
}
/* ----- Banner section ----- */
.single-portfolio-section, .banner-section{
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    background-position: center top;
}
.single-portfolio-section:before, .banner-section:before{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;   
}
/* ----- Common button ----- */
.it-slider-section .it-slider-text .it-slider-btn.cmn-btn a, .home-video-section .video-cont .cmn-btn a{
    background-color: #fff;
    position: relative;
    color: #1c3988;
    padding: 20px;
    z-index: 9;
    overflow: hidden;
    display: block;
    width: 250px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    transition: all linear .3s;
    border: none;
    box-shadow: 0 7px 10px rgba(4, 27, 82, 0.4);
}
.it-slider-section .it-slider-text .it-slider-btn.cmn-btn a:hover,
.home-video-section .video-cont .cmn-btn a:hover{
    box-shadow: 0 0 10px #ddd;
}
.it-slider-section .it-slider-text .it-slider-btn.cmn-btn a:before, 
.home-video-section .video-cont .cmn-btn a:before{
    position: absolute;
    content: "";
    left: -100%;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, #5075ef, #fff);
    transition: all linear .3s;
    z-index: -1;
}
.it-slider-section .it-slider-text .it-slider-btn.cmn-btn a:after,
.home-video-section .video-cont .cmn-btn a:after{
    position: absolute;
    content: "";
    right: -100%;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,.1);
    transition: all linear .5s;
    z-index: -1;
}
.it-slider-section .it-slider-text .it-slider-btn.cmn-btn a:hover:before,
.home-video-section .video-cont .cmn-btn a:hover:before{
    left: 0%;
}
.it-slider-section .it-slider-text .it-slider-btn.cmn-btn a:hover:after,
.home-video-section .video-cont .cmn-btn a:hover:after{
    right: 100%;
}

/* --------------------------------------
			 	Main CSS
-------------------------------------- */

/* 2. Header Top
-------------------------------------- */
.header-top{
    background: linear-gradient(to bottom, #5075ef, #1c3988);
    padding: 15px;
}
.header-top-left ul li{
    float: left;
    padding-right: 30px;
    color: #fff;
}
.header-top-social i{
    padding: 0 10px 0 5px;
    color: #fff;
    transition: all linear 0.3s;
}
.header-top-social i:hover{
    color: #1d213e;
}
.header-top-right-btn a{
    font-size: 15px;
    letter-spacing: 1px;
    padding: 12px 25px;
    background-color: #020e28;
    color: #fff;
    box-shadow: 0 7px 10px rgba(4, 27, 82, 0.4);
}

 /* The side navigation menu */
.header-right-sidebar .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    background-color: #fff;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
}
.header-right-sidebar .sidenav .sidebar-cont {
    padding: 0 30px 0 50px;
}
.header-right-sidebar .sidenav a:hover {
    color: #f1f1f1;
}
.header-right-sidebar .sidenav .closebtn {
    position: absolute;
    top: 20px;
    right: 30px;
    margin-left: 0;
}
.header-right-sidebar .hambarger{
    margin-top: 12px;
    width: 40px;
    cursor: pointer;
}
.header-right-sidebar .sidebar-logo img{
    width: 150px;
}
.header-right-sidebar .sidebar-address ul li{
    padding: 10px 0;
}
.header-right-sidebar .sidebar-address ul li i{
    margin-right: 10px;
    font-size: 20px;
}
.header-right-sidebar .sidebar-social i{
    height: 50px;
    width: 50px;
    line-height: 50px;
    border-radius: 5px;
    margin-right: 10px;
    text-align: center;
    background-color: rgba(4, 27, 82, 0.4);
    color: #fff;
    box-shadow: 0 7px 10px rgba(4, 27, 82, 0.4);
    transition: all linear .3s;
}
.header-right-sidebar .sidebar-social i:hover{
    background-color: rgba(4, 27, 82, 1);    
}
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
/*sticky header menu*/
.sticky-menu {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 7px 10px rgba(4, 27, 82, 0.2);
    width: 100%;
    padding: 10px 0;
    transition: all linear .5s;
}
.sticky-menu ul li:hover > ul.submenu {
    top: 128%;
    visibility: visible;
    opacity: 1;
}

/* 3. IT Slider
-------------------------------------- */
.it-slider-item, .consult-slider-item{
    position: relative;
}
.it-slider-item:before, .consult-slider-item:before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(42,59,216,.9), rgba(42,59,216,.6), rgba(80,117,239,.1));
    z-index: 9;
}
.it-slider-img, .consult-slider-img{
    height: 700px;
}
.it-slider-text{
    padding: 20px 20px 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 850px;
    transform: translate(-50%, -50%);
    z-index: 999;
}
.it-slider-text h1, .consult-slider-text h1{
    padding: 20px 0 15px;
    text-transform: uppercase;
    font-size: 4vw;
    font-weight: 900;
}
.it-slider-text h1, .it-slider-text p, .consult-slider-text h1, .consult-slider-text p{
    color: #fff;
}
.it-slider-text p, .consult-slider-text p{
    font-size: 18px;
}
.it-slider-section .it-slider-text .it-slider-btn.cmn-btn a{
    margin: auto;
}
/* IT owl carousel */
.it-slider-section .owl-carousel .owl-dots{
    text-align: center;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}
.it-slider-section .owl-carousel .owl-dots.disabled{
    display: block;
} 
.it-slider-section .owl-carousel button.owl-dot {
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
    margin: 30px 2px 0 2px;
}
.it-slider-section .owl-carousel span {
    height: 10px;
    width: 30px;
    background-color: #fff !important;
    margin: 0 1px;
    display:block;
    -webkit-backface-visibility:visible;
    -webkit-transition:opacity 200ms ease;
    -moz-transition:opacity 200ms ease;
    -ms-transition:opacity 200ms ease;
    -o-transition:opacity 200ms ease;
    transition:opacity 200ms ease;
}
.it-slider-section .owl-carousel .active span {
    background: linear-gradient(90deg, rgba(42,59,216,.9), rgba(42,59,216,.6));
}
.owl-carousel .owl-nav{
}
.owl-carousel .owl-nav button.owl-prev {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 5px solid #fff;
}
.owl-carousel .owl-nav button.owl-next{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    border-right: 5px solid #fff;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev{
    background: linear-gradient(90deg, rgba(42,59,216,.9), rgba(42,59,216,.6));
    color: #fff !important;
    color: inherit;
    border-radius: 50%;
    padding: 0 !important;
    font: inherit;
    height: 80px;
    width: 80px;
    font-size: 24px;
    margin: 0 2px;
    transition: .5s;
}
.owl-carousel .owl-nav button.owl-prev:hover{
    border-left: 5px solid #1c3988;
}
.owl-carousel .owl-nav button.owl-next:hover{
    border-right: 5px solid #1c3988;
}
.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover{
    background: rgba(255,255,255,.9);
    color: #1c3988 !important;
    border-radius: 10px;
    height: 80px;
    width: 80px;
}

/* 4. Consultation slider
-------------------------------------- */
.consult-slider-text{
    padding: 20px 20px 30px;
    position: absolute;
    top: 40%;
    left: 7%;
    width: 600px;
    transform: translateY(-40%);
    z-index: 999;
}
.consult-slider-text h5{
    color: #fff;
    box-shadow: 0 0 10px #5075ef;
    font-size: 14px;
    letter-spacing: 13px;
    max-width: 455px;
    text-align: center;
    padding: 10px 0 10px 5px;
}
.consult-slider-text h1{
    font-size: 3vw;
    padding-top: 0px;
}
.consult-slider-btn a{
    text-transform: uppercase;
    margin: 0 2px;
    border-radius: 5px;
}
.consult-slider-btn a:hover{
    box-shadow: 0 20px 30px -10px  rgba(255, 255, 255, 0.4);
}
.consult-slider-btn .btn-1{
    padding: 20px 30px;
    background-color: #fff;
    color: #333;
}
.consult-slider-btn .btn-1:hover{
    padding: 20px 30px;
    background: linear-gradient(90deg, rgba(42,59,216,.9), rgba(42,59,216,.6));
    color: #fff;
}
.consult-slider-btn .btn-2{
    padding: 20px 30px;
    background-color: #333;
    color: #fff;
}
.consult-slider-btn .btn-2:hover{
    padding: 20px 30px;
    background-color: #fff;
    color: #333;
}
/*owl carousel*/
.consult-slider-section .owl-carousel.consult-slider-active .owl-dots{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.consult-slider-section .owl-carousel.consult-slider-active .owl-dot{
    display: block;
}
.consult-slider-section .owl-carousel span {
    width: 50px;
    height: 10px;
    margin: 5px 1px;
    background: #5075ef !important;
    display:block;
    -webkit-backface-visibility:visible;
    -webkit-transition:opacity 200ms ease;
    -moz-transition:opacity 200ms ease;
    -ms-transition:opacity 200ms ease;
    -o-transition:opacity 200ms ease;
    transition:opacity 200ms ease;
    border-radius: 25px;
}
.consult-slider-section .owl-carousel .active span {
    background: #fff !important;
    width: 40px;
}

/* 5. Video slider
-------------------------------------- */
.home-video-section{
    position: relative;
}
.home-video-section video{
    width: 100%;
    height: 600px;
    object-fit: cover;
}
.home-video-section .video-cont{
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    background: linear-gradient(90deg, rgba(42,59,216,.5), rgba(42,59,216,.3));
    width: 100%;
    height: 98.5%;

}
.home-video-section .video-cont h5,
.home-video-section .video-cont h1, 
.home-video-section .video-cont p{
    color: #fff;
}
.home-video-section .video-cont .inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.home-video-section .video-cont h5{
    font-size: 14px;
    letter-spacing: 3px;
}
.home-video-section .video-cont .inner h1{
    text-transform: uppercase;
    font-size: 58px;
}
.home-video-section .video-cont .inner p{
    font-size: 20px;
    margin: 20px 0;
}
.home-video-section .video-cont .cmn-btn a{
    margin: auto;
}

/* 6. Single portfolio
-------------------------------------- */
.single-portfolio-section{
    background-image: url(images/bg/single-portfolio/image-01.jpg);
    padding: 100px 0;
    height: 700px;
}
.single-portfolio-section:before{
    background: linear-gradient(90deg, rgba(42,59,216,.9), rgba(42,59,216,.6));    
}
.single-portfolio-cont{
    padding: 120px 0 100px;
}
.single-portfolio-cont h1, .single-portfolio-cont h3, .single-portfolio-cont h5{
    color: #fff;
}
.single-portfolio-cont h3{
    font-size: 28px;
    letter-spacing: 5px;
    text-transform: uppercase;
}
.single-portfolio-cont h1{
    font-size: 78px;
    text-transform: uppercase;
    font-weight: 900;
    padding: 0px 0 15px;
}
.single-portfolio-cont h5{
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* 7. About section
-------------------------------------- */
.about-section .about-cont span, .company-status-section .company-stat-cont span{
    text-transform: uppercase;
    color: #5798fe;
}
.about-section .about-cont h2, .company-status-section .company-stat-cont h2{
    padding: 10px 0 15px;
}
.about-section .about-detl .about-detl-num{
    border-right: 1px solid #ddd;
}
.about-section .about-detl .about-detl-num h3{
    font-size: 4rem;
    color: #1c3988;
}
.about-section .about-detl .about-detl-num h4{
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 19px;
}

/* 8. Service section
-------------------------------------- */
.service-section{
    background-color: #f9fbfe;
    padding: 100px 0;
}
.service-section .service-item{
    box-shadow: 0px 0px 45px -22px rgb(0 0 0 / 22%);
    padding: 20px 25px 20px;
    background-image: linear-gradient(180deg, #ffffff 0%, #f2f4fc 100%);
}
.service-section .service-item .service-icon i{
    font-size: 60px;
    color: #1d213e;
    font-weight: 300;
}
.service-section .service-item .service-cont h4{
    margin-bottom: 15px;
    font-size: 17px;
}

/* 9. Counter section
-------------------------------------- */
.counter-section{
    background: linear-gradient(to bottom, #5075ef, #1c3988);
    padding: 50px 0;
}
.counter-section .counter-cont i{
    font-size: 50px;
    display: block;
    color: #fff;
    line-height: 60px;
    font-weight: 300;
}
.counter-section .counter-cont .counter {
    font-size: 42px;
    vertical-align: middle;
    color: #fff;
    font-weight: 700;
}
.counter-section .counter-cont h4{
    color: #ddd;
    font-size: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 10. Circle section
-------------------------------------- */
.company-status-section .circles {
  margin-bottom: -10px;
}
.company-status-section .circle {
  width: 200px;
  margin: 6px 6px 20px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.2;
}
.company-status-section .circle canvas {
  vertical-align: top;
  height: 150px !important;
  width: 150px !important;
}
.company-status-section .circle strong {
  position: absolute;
  top: 55px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 40px;
  font-size: 30px;
  color: #1c3988;
}
.company-status-section .circle strong i {
  font-style: normal;
  font-size: 0.6em;
  font-weight: normal;
}
.company-status-section .circle p {
    margin-top: 20px;
}
.company-status-section .circle h4 {
    font-size: 18px;
}

/* 11. Project section
-------------------------------------- */
.section-title-left h2{
    text-transform: uppercase;
}
.project-menu h2::first-letter{
    text-transform: uppercase;
}
.project-menu ul {
    text-align: center;
    padding: 10px;
    margin: 0 auto 20px;
}
.project-menu ul li{
    display: inline-block;
}
.project-menu ul li.active a, .project-menu ul li a:hover{
    background: linear-gradient(to bottom, #5075ef, #1c3988);
    color: #fff !important;
}
.project-menu ul li a {
    padding: 10px 12px;
    display: block;
    background: #f4f4f4;
    color: #222;
    margin: 0 2px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    cursor: pointer;
}
.project-thumb{
    width: 33.33%;
}
.proj-img {
    position: relative;
    overflow: hidden;
    text-align: center;
}
.proj-img-overlay{
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    top: 0;
    background: rgba(0,0,0,.5);
    transition: all linear .3s;
    cursor: pointer;
}
.proj-img img{
    width: 100%;
    height: 100%
    transform: scale(1);
    transition: all linear 1s;
}
.proj-img:hover img{
    transform: scale(1.1);
}
.project-thumb-cont:hover .proj-img-overlay{
    opacity: 1;
    visibility: visible;
    width: 85%;
    height: 80%;
    background: rgba(255,255,255,.5);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid #1c3988;
}
.proj-img-overlay h5{
    color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.project-thumb-cont:hover .proj-img-overlay h5{
    color: #1c3988;
}
/* -----Project 2 ----- */
.project-2 .proj-img img{
    transition: all linear .5s;
}
.project-2 .proj-img-overlay{
    background: transparent;
}
.project-2 .project-thumb-cont:hover .proj-img-overlay{
    width: 90%;
    height: 85%;
    background: rgba(0,0,0,.5);
    border: none;
}
.project-2 .project-thumb-cont:hover .proj-img-overlay h5{
    color: #fff;
}

/* 12. Team section
-------------------------------------- */
.team-navigation ul li a{
    padding: 0 25px;
    margin-left: -25px;
    text-transform: uppercase;
    font-size: 14px;
    color: #777f91;
    display: block;
}
.nav-tabs a.active {
    color: #1c3988;
}
.team-navigation .nav-tabs {
    border-bottom: none;
}
.team-section .team-cont{
    position: relative;
}
.team-section .team-cont:hover{
    box-shadow: 0 10px 20px #ddd;
}
.team-section .team-img{
    position: relative;
    overflow: hidden;
}
.team-section .team-img:before{
    position: absolute;
    content: "";
    left: -100%;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,.1);
    transition: all linear .6s;
}
.team-section .team-cont:hover .team-img:before{
    left: 100%;
}
.team-section .team-img:after{
    position: absolute;
    content: "";
    left: 0;
    top: -100%;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,.1);
    transition: all linear .6s;
}
.team-section .team-cont:hover .team-img:after{
    top: 100%;
}

.team-section .team-text{
    position: absolute;
    bottom: -100px;
    padding: 20px 10px 10px;
    margin: 20px;
    background-color: #f9fbfe;
    transition: all linear .4s;
    box-shadow: 0 10px 20px #ddd;
    z-index: 1;
}
.team-section .team-cont:hover .team-text{
    margin: 10px;
    bottom: -140px;
    background: linear-gradient(to bottom, #5075ef, #1c3988);
}
.team-section .team-cont:hover .team-text h4,
.team-section .team-cont:hover .team-text p,
.team-section .team-cont:hover .team-text ul li a{
    color: #fff;
}
.team-section .team-text h4{
    margin-bottom: 20px;
}
.team-section .team-text h4{
    color: #1c3988;
    line-height: 24px;
}
.team-section .team-text ul{
    margin-bottom: 5px;
}
.team-section .team-text ul li{
    display: inline-block;
}
.team-section .team-text ul li a{
    color: #1c3988;
    display: block;
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
}
.team-section .team-text ul li a:hover{
    background-color: rgba(255,255,255,.3);
}

/* 13. App download section
-------------------------------------- */
.app-download{
    position: relative;
    background-image: url(images/bg/app-download-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    background-attachment: fixed;
}
.app-download:before{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(45deg, rgba(80,117,239,.9), rgba(42,59,216,.8));
}
.app-download .section-title-2 h2, .app-download .section-title-2 p{
    color: #fff;
    font-size: 34px;
}
.app-download .section-title-2 p{
    width: 800px;
    font-size: 20px;
    margin: 20px auto 30px;
}
.app-download .app-btn ul{
    display: inline-block;
    margin: 20px 0;
}

.app-download .app-btn ul li{
    display: inline-block;
}
.app-download .app-btn ul li i{
    font-size: 48px;
    margin-right: 20px;
    border-right: 1px solid #fff;
    padding-right: 30px;
}
.app-download .app-btn a:hover ul li i{
    border-right: 1px solid #1c3988;
}
.app-download .app-btn a, .app-btn h5{
    color: #fff;
}
.app-download .app-btn a{
    border: 1px solid #ddd;
    width: 31%;
    margin: 20px 10px;
    display: block;
    display: inline-block;
}
.app-download .app-btn a:hover{
    background-color: #fff;
}
.app-download .app-btn a:hover ul li i, .app-download .app-btn a:hover ul li span, .app-download .app-btn a:hover ul li h5{
    color: #1c3988;
}

/* 14. News section
-------------------------------------- */
.news-section{
    background-color: #f9fbfe;
}
.testimonial-section .section-title-2 h2, .testimonial-section .section-title-2 p,
.news-section .section-title-2 h2, .news-section .section-title-2 p{
    font-size: 34px;
}
.news-thumb-cont{
    margin: 15px 0;
}
.news-text h4:hover{
    color: #1c3988;
}
.testimonial-section .section-title-2 p,
.news-section .section-title-2 p{
    width: 800px;
    font-size: 20px;
    margin: 20px auto 30px;
}
.news-section .news-author-details{
    padding: 20px;
    background-image: linear-gradient(180deg, #ffffff 0%, #f2f4fc 100%);
    box-shadow: 0 10px 30px -20px rgba(4, 27, 82, 0.4);
}
.news-section .news-author-details .author-name img{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-right: 10px;
    border: 1px solid #1c3988;
    padding: 3px;
}
.news-section .news-author-details ul li{
    display: inline-block;
}

/* 15. Contact section
-------------------------------------- */
.contact-section .contact-cmn{
    float: left;
    width: 50%;
}
.contact-section.home-contact iframe{
    width: 100%;
    height: 672px;
}
.contact-section .contact-form{
    background-color: #f2f4fc;
    padding: 100px;
}
.contact-section .contact-form input, .contact-section .contact-form textarea{
    padding: 15px;
    width: 100%;
    border: none;
    background-color: rgba(255,255,255,1);
    margin-bottom: 30px;
    box-shadow: 0 3px 10px rgba(4, 27, 82, 0.1);
}
.contact-section .contact-btn.cmn-btn button{
    background: linear-gradient(to bottom, #5075ef, #1c3988);
    position: relative;
    color: #fff;
    padding: 20px;
    z-index: 9;
    overflow: hidden;
    display: block;
    min-width: 250px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    transition: all linear .3s;
    border: none;
    box-shadow: 0 7px 10px rgba(4, 27, 82, 0.4);
}
.contact-section .contact-btn.cmn-btn button:hover{
    box-shadow: 0 0 10px #ddd;
}
.contact-section .contact-btn.cmn-btn button:before{
    position: absolute;
    content: "";
    left: -100%;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #1c3988;
    transition: all linear .3s;
    z-index: -1;
}
.contact-section .contact-btn.cmn-btn button:after{
    position: absolute;
    content: "";
    right: -100%;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,.1);
    transition: all linear .5s;
    z-index: -1;
}
.contact-section .contact-btn.cmn-btn button:hover:before{
    left: 0%;
}
.contact-section .contact-btn.cmn-btn button:hover:after{
    right: 100%;
}

/* ----- contact section 2 ----- */
.contact-section.contact-section-2 iframe{
    width: 100%;
    height: 350px;
}
.contact-2-address h3{
    color: #fff;
    margin-bottom: 54px;
}
.contact-section-2 .contact-cmn{
    display: inline-block;
}
.contact-section-2 .contact-2-form{
    width: 60%;
    padding: 50px;
}
.contact-section-2 .contact-2-address{
    width: 40%;
}
.contact-section-2 .contact-2-address{
    position: relative;
    background-image: url(images/bg/contac-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 85px 80px;
}
.contact-2-address h6{
    color: #fff;
    margin-top: 30px;
}
.contact-2-address span{
    color: #ddd;    
}
.contact-2-address span i{
    color: #fff
}
.contact-2-address span.telephone{
    margin-left: 30px;
}
.contact-2-address span i, .contact-3-address span i, .contact-4-address-cont span i{
    margin-right: 5px;
}
/* ----- contact section 3 ----- */
.contact-section-3 .contact-3-form{
    width: 100%;
}
.contact-3-address h3{
    margin-bottom: 30px;
}
.contact-3-address h6{
    margin-top: 20px;
    color: #1c3988;
}
.contact-3-google-map iframe{
    width: 100%;
    height: 350px;
}
/* ----- contact section 4 ----- */
.contact-4-google-map iframe{
    width: 100%;
    height: 670px;
}
.contact-3-address-cont, .contact-4-address-cont{
    box-shadow: 0 0 10px #ddd;
    padding: 10px 30px 25px;
}
.contact-4-address-cont{
    padding: 25px 40px 35px;
}
.contact-4-address-cont span{
    display: block;
}

/* 16. Testimonial section
-------------------------------------- */
.testimonial-section .testimonial-img{
    padding: 0 20px;
}
.testimonial-section .testimonial-text{
    position: relative;
    margin: 50px 20px; 
    padding: 70px 40px;
    background-image: linear-gradient(180deg, #ffffff 0%, #f2f4fc 100%);
    box-shadow: 0 5px 20px rgba(221,221,221,.5);
}
.testimonial-section .testimonial-item .testimonial-text i{
    font-size: 36px;
    line-height: 30px;
    color: #1c3988;
}
.testimonial-section .testimonial-item .testimonial-text h4{
    margin: 25px 0 15px;
    color: #1d213e;
}
.testimonial-section .testimonial-item .testimonial-text ul li{
    display: inline-block;
}
.testimonial-section .testimonial-item .testimonial-text ul li i{
    font-size: 22px;
    line-height: 20px;
    padding: 5px;
    color: #ecc026;
}
.testimonial-section .testimonial-item .testimonial-img{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
}
.testimonial-section .testimonial-item .testimonial-img img{
    height: 80px;
    width: 80px;
    border-radius: 50%;
    margin: 30px auto 0;
    border: 2px solid #1c3988;
    padding: 5px;
}
.testimonial-section .owl-carousel .owl-dots{
    text-align: center;
}
.testimonial-section .owl-carousel .owl-dots.disabled{
    display: block;
} 
.testimonial-section .owl-carousel button.owl-dot {
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
    height: 5px;
    width: 20px;
    background-color: #1c3988;
    margin: 30px 2px 0 2px;
}

/* 17. Call to action section
-------------------------------------- */
.call-to-section{
    background: linear-gradient(to bottom, #5075ef, #1c3988);
    padding: 30px 0; 
}
.call-to-section .call-to-text h3{
    color: #fff;
    margin: 0;
}
.call-to-section .call-to-btn.cmn-btn a{
    background-color: #fff;
    position: relative;
    color: #1c3988;
    padding: 20px;
    z-index: 9;
    overflow: hidden;
    display: block;
    width: 250px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    transition: all linear .3s;
    border: none;
    box-shadow: 0 7px 10px rgba(4, 27, 82, 0.4);
}
.call-to-section .contact-btn.cmn-btn a:hover{
    box-shadow: 0 0 10px #ddd;
}
.call-to-section .call-to-btn.cmn-btn a:before{
    position: absolute;
    content: "";
    left: -100%;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, #5075ef, #fff);
    transition: all linear .3s;
    z-index: -1;
}
.call-to-section .call-to-btn.cmn-btn a:after{
    position: absolute;
    content: "";
    right: -100%;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,.1);
    transition: all linear .5s;
    z-index: -1;
}
.call-to-section .call-to-btn.cmn-btn a:hover:before{
    left: 0%;
}
.call-to-section .call-to-btn.cmn-btn a:hover:after{
    right: 100%;
}

/* 18. Footer section
-------------------------------------- */
.footer-section{
    background-color: #020e28;
    padding: 100px 0;
    border-top: 5px solid #5075ef;
}
.footer-section .footer-address .footer-logo img{
    width: 200px;
}
.footer-section .footer-address h6{
    color: #5075ef;
}
.footer-address i, .footer-cmn h5{
    color: #fff;
}
.footer-address ul li, .footer-address p{
    color: #ddd;
}
.footer-section .footer-address p{
    margin-bottom: 5px;
}
.footer-section .footer-address ul li{
    display: inline-block;
}
.footer-section .footer-address ul li.footer-contact-devider{
    padding: 0 10px;
}
.footer-section .footer-address h6{
    margin-top: 30px;
}
.footer-social ul li{
    display: inline-block;
}
.footer-social ul li a i{
    color: #fff;
    height: 35px;
    width: 35px;
    line-height: 35px;
    border-radius: 50%;
    margin-right: 5px;
    text-align: center;
    background-color: rgba(4,19,50,1);
}
.footer-social ul li a i:hover{
    background-color: #fff;
    color: #020e28;
}
.footer-section .footer-cmn h5{
    position: relative;
}
.footer-section .footer-cmn h5:before{
    position: absolute;
    content: "";
    left: 0;
    bottom: -20px;
    width: 50px;
    color: #fff;
    border: 1px solid #5075ef;
}
.footer-section .footer-menu-link ul li a{
    color: #ddd;
    padding: 5px 0;
    display: block;
}
.footer-section .footer-materials ul{
    margin: 0;
    padding: 0;
}
.footer-section .footer-materials ul li {
    display: inline-block;
}
.footer-section .footer-materials ul li i{
    font-size: 50px;
    color: #999;
    margin-right: 20px;
    line-height: 80px;
}
.footer-section .footer-materials ul li a{
    color: #ddd;
    font-size: 16px;
    display: block;
    margin-top: 5px;
}
.footer-section .footer-menu-link ul li a:hover, .footer-section .footer-materials ul li a:hover{
    color: #5075ef;
}
/* ----- footer bottom ----- */
/* --- newsletter --- */
.newsletter-cmn{
    display: inline-block;
}
.newsletter-cmn p{
    margin-top: 5px;
    color: #fff;
    font-size: 28px;
}
.newsletter{
    position: relative;
}
.newsletter input{
    width: 400px;
    padding: 10px;
    color: #fff;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #5075ef;
}
.newsletter button {
    position: absolute;
    bottom: 8px;
    right: 0px;
    background-color: transparent;
    color: #5075ef;
    border: none;
    height: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    border-radius: 50%;
}
/* --- copy right --- */
.copyright-text{
    border-top: 1px solid #333;
    margin-top: 10px;
    padding-top: 30px;
}
.footer-bottom{
    background-color: #041332;
    padding: 30px 0;
}
.copyright-text p{
    margin: 0;
    color: #fff;
}

/* -----------------------------*-----*-----*-----------------------------------
--------------------------------------------------------------------------------                        
                                OTEHR PAGES
--------------------------------------------------------------------------------
--------------------------------*-----*-----*-------------------------------- */
/* 19. Banner section
-------------------------------------- */
.banner-section{
    background-image: url(images/banner/banner.jpg);
    padding: 100px 0;
    background-position: center center;
}
.about-default-banner{
    background-image: url(images/banner/about-one.jpg);    
}
.banner-about-2{
    background-image: url(images/banner/about-two.jpg);    
}
.banner-who-we-are{
    background-image: url(images/banner/who-we-are.jpg);    
}
.banner-mission-vision{
    background-image: url(images/banner/banner.jpg);    
}
.banner-service{
    background-image: url(images/banner/service.jpg);    
}
.banner-contact-one{
    background-image: url(images/banner/contact.jpg);    
}
.banner-contact-two{
    background-image: url(images/banner/contact-02.jpg);    
}
.banner-contact-three{
    background-image: url(images/banner/contact-03.jpg);    
}
.banner-contact-four{
    background-image: url(images/banner/contact-04.jpg);    
}
.banner-faqs{
    background-image: url(images/banner/faqs.jpg);    
}
.team-banner{
    background-image: url(images/banner/team.jpg);    
}
.banner-career{
    background-image: url(images/banner/job-and-career.jpg);    
}
.banner-project-one{
    background-image: url(images/banner/project-01.jpg);    
}
.banner-project-two{
    background-image: url(images/banner/project-02.jpg);    
}
.banner-project-three{
    background-image: url(images/banner/project-03.jpg);    
}
.banner-project-four{
    background-image: url(images/banner/project-04.jpg);    
}
.banner-news-one{
    background-image: url(images/banner/news-01.jpg);
}
.banner-news-two{
    background-image: url(images/banner/news-02.jpg);
}
.banner-news-three{
    background-image: url(images/banner/news-03.jpg);
}
.banner-news-four{
    background-image: url(images/banner/news-04.jpg);
}
.banner-news-five{
    background-image: url(images/banner/service.jpg);
}
.banner-section:before{
    background: linear-gradient(90deg, rgba(42,59,216,.8), rgba(42,59,216,.5));   
}
.banner-section .banner-cont h3{
    color: #fff;
    text-transform: uppercase;
}
.banner-section .banner-cont ul li{
    display: inline-block;
}
.banner-section .banner-cont ul li a{
    padding: 10px 5px;
    display: block;
    color: #ddd;
    font-size: 16px;
}
.banner-section .banner-cont ul li a:hover{
    color: #fff;
}

/* 20. About 2 section
-------------------------------------- */
.about-2-cont{
    padding-right: 50px;
}
.about-2-cont h2{
    margin-bottom: 30px;
}
.about-2-cont-work{
    background-color: #444;
    border-radius: 5px;
    padding: 20px;
}
.about-2-cont-work h5, .about-2-cont-work p{
    color: #fff;
    margin-bottom: 0
}
.about-2-cont-work p{
    margin-top: 15px;
    font-size: 12px;
}
.about-2-cont-work-btn a{
    background-color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    margin-top: 10px;
    display: block;
}
.about-2-mission-vision ul{
    margin: 15px 0;
}
.about-2-mission-vision ul li{
    float: left;
}
.about-2-mis-vis-num{
    width: 10%;
}
.about-2-mis-vis-num span{
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    display: block;
    background-color: #ddd;
    border-radius: 50%;
}
.about-2-mis-vis-text{
    width: 85%;
}

/* 21. About 2 video section
-------------------------------------- */
.about-2-video-desc h2{
    margin-bottom: 40px;
}
.about-2-video-desc ul li{
    float: left;
}
.about-2-video-desc-icon {
    width: 20%;
}
.about-2-video-desc-icon span{
    position: relative;
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
    display: block;
    border: 3px solid #5075ef;
    border-radius: 50%;
}
.about-2-video-desc-icon span:before{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 85px;
    width: 85px;
    border-radius: 50%;
    border: 3px solid #041332;
}
.about-2-video-desc-icon span img{
    padding: 15px;
}
.about-2-video-desc-text {
    width: 75%;
}
.about-2-video-img{
    position: relative;
    width: 100%;
}
.about-2-video-img .about-2-video-overlay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(42,59,216,.8), rgba(42,59,216,.5));
}
.about-2-video-img .about-2-video-overlay a{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #fff;
    height: 80px;
    width: 80px;
    line-height: 77px;
    text-align: center;
    border-radius: 50%;
    animation: animate 3s linear infinite;
}
.about-2-video-img .about-2-video-overlay a i{
    font-size: 60px;
    color: #fff;
}
@keyframes animate{
    0%{
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 7), 0 0 0 0 rgba(255, 255, 255, 7), 0 0 0 0 rgba(255, 255, 255, 7)
    }
    40%{
        box-shadow: 0 0 0 50px rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 7), 0 0 0 0 rgba(255, 255, 255, 7)
    }
    80%{
        box-shadow: 0 0 0 50px rgba(255, 255, 255, 0), 0 0 0 40px rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 7)
    }
    100%{
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 40px rgba(255, 255, 255, 0), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

.videopopupjs__content {
    margin-top: 7%;
}

/* 22. Mission vision section
-------------------------------------- */
.mission-vision-page{
    padding: 140px 0 0;
}
.mis-vis-page-cmn{
    float: left;
    width: 50%;
}
.mis-vis-page-text h2{
    margin-bottom: 20px;
}
.mis-page .mis-vis-page-img{
    position: relative;
    box-shadow: -10px 7px 20px -5px rgba(4, 27, 82, 0.4);
}
.mis-page .mis-vis-page-img:before{
    position: absolute;
    content: "";
    left: -30px;
    top: -30px;
    height: 100%;
    width: 100%;
    border: 15px solid rgba(42,59,216,.5);
    z-index: -1;
}
.vis-page .mis-vis-page-img{
    position: relative;
    box-shadow: 10px 7px 20px -10px rgba(4, 27, 82, 0.4);
}
.vis-page .mis-vis-page-img:before{
    position: absolute;
    content: "";
    right: -30px;
    bottom: -30px;
    height: 100%;
    width: 100%;
    border: 15px solid rgba(42,59,216,.5);
    z-index: -1;
}
.mis-page .mis-vis-page-text{
    padding-left: 50px;
}

.vis-page .mis-vis-page-text{
    padding-right: 50px;
}

/* 23. Value section
-------------------------------------- */
.value-text{
    padding: 0 50px 0 0;
}
.value-text span{
    font-size: 20px;
    font-style: italic;
    line-height: 1.5;
    margin: 20px 0;
    display: block;
    font-weight: 300;
}
.value-icon i{
    font-size: 52px;
    line-height: 1.5;
}

/* 24. Who we are section
-------------------------------------- */
.who-we-are-cont span{
    font-size: 24px;
    display: block;
    font-weight: 300;
    line-height: 1.5;
    margin: 20px 0;
}
.who-we-are-cont ul li i{
    color: #041332;
    margin-right: 10px;
}
.who-we-are-cont ul li{
    padding: 2px 0;
}

/* 25. 404 error section
-------------------------------------- */
.error-404-text h3, .error-404-text h6, .error-404-text-2 h1{
    color: #777f91;
}
.error-404-text a{
    margin-left: 10px;
    color: #1c3988;
    text-decoration: underline;
}
.error-404-text-2{
    padding-right: 250px;
}
.error-404-text-2 h1{
    font-weight: 400;
    font-size: 70px;
}

/* 26. Jobs & career section
-------------------------------------- */
.career-office-address{
    padding-left: 50px;
}
.career-office-address h5{
    font-weight: 500;
}
.career-office-address ul{
    margin-top: 20px;
}
.career-office-address ul li{
    float: left;
}
.career-office-address ul li i{
    margin-right: 40px;
    font-size: 30px;
    line-height: 1.2;
    color: #1c3988;
}
.career-office-address ul li span{
    color: #1c3988;    
}
.career-office-address ul .social i{
    font-size: 14px;
    padding: 10px;
    color: #777f91;
    margin-right: 0;
    transition: all linear .5s;
}
.career-office-address ul .social i:hover{
    color: #1c3988;
}
.vacancy-list .panel-default:hover .panel-heading h6, .vacancy-list .panel-default .panel-heading h6:hover{
    color: #1c3988;
}
.vacancy-list .panel-default{
    border-top: 1px solid #ddd;
    padding: 30px 0 28px;
}
.vacancy-list .panel-default .panel-heading h6 span{
    margin-right: 10px;
}
.vacancy-list .panel-default .panel-heading i{
    margin-left: 10px;
    font-size: 10px;
    color: #1c3988;
    font-weight: 700;
}
.vacancy-list .panel-default .apply-btn{
    background: linear-gradient(90deg, rgba(42,59,216,.9), rgba(42,59,216,.7));
    padding: 10px;
    font-size: 13px !important;
    color: #fff;
    border-radius: 5px;
    margin-top: -5px;
    cursor: pointer;
    transition: all linear .5s;
}
.vacancy-list .panel-default .apply-btn:hover{
    background: linear-gradient(90deg, rgba(0,0,0,.9), rgba(255,255,255,.7));
    color: #1c3988;
}
.w3-green, .w3-hover-green:hover {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(42,59,216,.9), rgba(42,59,216,.7));
}

/* 27. Faqs section
-------------------------------------- */
.faqs-list .panel-default{
    border-top: 1px solid #ddd;
}
.faqs-list .panel-default:last-child{
    border-bottom: 1px solid #ddd;
}
.faqs-title p{
    margin-top: 20px;
}
.faqs-list .panel-default .panel-title a{
    display: block;
    padding: 20px 0;
}

/* 28. All news section
-------------------------------------- */
.news-left-sidebar-section aside, .news-one-col-left-section aside{
    margin-right: 30px;
}
.news-right-sidebar-section aside, .news-one-col-right-section aside, .news-single-right-section aside{
    margin-left: 30px;
}
.news-one-col-left-section, .news-one-col-right-section{
    background-color: #fff;
}
.news-img img{
    width: 100%;
}
/* ----- news Left Sidebar ----- */
.sidebar-search input{
    position: relative;
    width: 100%;
    padding: 15px;
    border: 1px solid rgba(42,59,216,.9);
    border-radius: 50px;
    background-color: transparent;
}
.sidebar-search button {
    position: absolute;
    right: 20px;
    top: 5px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(90deg, rgba(42,59,216,.9), rgba(42,59,216,.5));
    color: #fff;
}
.sidebar-search button i{
    font-weight: 700;
}
/* ----- sidebar categories ----- */
.sidebar-categories h4{
    margin-bottom: 15px;
}
.sidebar-categories ul li a{
    color: #777f91;
    padding: 4px 0;
    display: block;
}
.sidebar-categories ul li a:hover{
    color: #1c3988;
}
.sidebar-categories ul li a i{
    margin-right: 5px;
    color: #1c3988;
}
/* ----- sidebar realated news ----- */
.sidebar-related-news h4{
    margin-bottom: 30px;
}
.sidebar-related-news ul li{
    float: left;
}
.sidebar-related-news ul{
    margin-top: 10px;
}
.sidebar-related-news .related-news-img {
    width: 35%;
}
.sidebar-related-news .related-news-text {
    width: 60%;
    padding-left: 20px;
}
.sidebar-related-news ul li h6:hover{
    color: #1c3988;
}
/* ----- sidebar news social ----- */
.sidebar-news-social h4{
    margin-bottom: 30px;
}
.sidebar-news-social ul li{
    float: left;
    width: 50%;
    text-align: center;
}
.sidebar-news-social ul li a {
    border: 2px solid transparent;
    display: block;
    padding: 15px 15px 10px;
    margin: 5px;
    background-color: #fff;
    box-shadow: 0 10px 19px -10px #ddd;
}
.sidebar-news-social ul li a:hover{
    box-shadow: inherit;
    border-top: 2px solid #1c3988; 
}
.sidebar-news-social ul li a i{
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    margin: auto;
    color: #fff;
}
.sidebar-news-social ul li a span{
    padding: 5px;
    color: #666;
}
.sidebar-news-social ul li a i.flaticon-facebook{
    background-color: #3b5999;
}
.sidebar-news-social ul li a i.flaticon-twitter{
    background-color: #55acee;
}
.sidebar-news-social ul li a i.flaticon-linkedin{
    background-color: #0077B5;
}
.sidebar-news-social ul li a i.flaticon-instagram{
    background-color: #e4405f;
}
.sidebar-news-social ul li a i.flaticon-dribbble-logo{
    background-color: #ea4c89;
}
.sidebar-news-social ul li a i.flaticon-reddit{
    background-color: #ff5700;
}
.sidebar-news-social ul li a i.flaticon-pinterest{
    background-color: #bd081c;
}
.sidebar-news-social ul li a i.flaticon-google-plus-logo{
    background-color: #dd4b39;
}
/* ----- sidebar news trending ----- */
.sidebar-news-trending .news-img img{
    width: 100%;
}

/* 30. News single section
-------------------------------------- */
.news-single-text-img img{
    float: left;
    width: 40%;
    padding: 10px 30px 20px 0;
}
.news-single-text-quote{
    background-color: #1c3988;
    color: #fff;
    padding: 50px;
}
.news-single-text-quote p{
    font-size: 28px;
    line-height: 1.5;
}
.news-single-text-quote p i{
    font-size: 36px;
}
.news-single-text-tags{
    background-color: #f0f0f0;
    padding: 50px;
}
.news-single-text-tags ul li{
    display: inline-block;
    padding: 10px;
}
.news-single-text-tags ul li a{
    margin: 5px;
    padding: 10px 20px;
    background-color: #1c3988;
    color: #fff;
    border-radius: 25px;
    font-size: 13px;
}
.news-single-text-tags .news-single-text-tags-social ul li a{
    margin: 2px;
    padding: 0px;
    background-color: inherit;
    border-radius: none;
    font-size: 16px;
}
.news-single-text-tags .news-single-text-tags-social ul li a i{
    color: #222;    
}
.news-single-comment-form{
    background-color: #f0f0f0;
    padding: 50px;
}
.news-single-comment-form .single-comment-input input, .news-single-comment-form .single-comment-input textarea{
    padding: 15px;
    width: 100%;
    border: 1px solid #ddd;
}
.single-comment-btn button{
    position: relative;
    border: none;
    padding: 10px;
    width: 150px;
    height: 50px;
    text-align: center;
    background-color: #1c3988;
    color: #fff;
    text-transform: uppercase;
}
.single-comment-btn button:before{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 50px;
    width: 150px;
    border: 2px solid #1c3988;
    transition: all linear .2s;
}
.single-comment-btn button:hover:before{
    left: -5px;
    top: -5px;
    height: 60px;
    width: 160px;
}

/* ----- pagination ---- */
.news-pagination ul li{
    display: inline-block;
}
.news-pagination ul li a{
    font-size: 17px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    display: block;
    text-align: center;
    border-radius: 50%;
    color: #868686;
    margin: 0 2px;
    box-shadow: 0 5px 15px -5px rgba(4, 27, 82, 0.4);
}
.news-pagination ul li a:hover, .news-pagination ul li.active a{
    background: linear-gradient(90deg, rgba(42,59,216,.9), rgba(42,59,216,.5));
    color: #fff;
}

/* 31. Scroll top
---------------------- */
.scrollToTop{
    position: fixed;
    right: 20px;
    bottom: 20px;
    border: none;
    background: linear-gradient(90deg, rgba(42,59,216,.9), rgba(42,59,216,.5));
    color: #fff;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50px;
    font-weight: 700;
    display: none;
    z-index: 999;
}
.scrollToTop:hover,.scrollToTop:focus{
    background: #1c3988;
    color: #fff;
}