@font-face {
    font-family: 'GothamBook';
    src: url('../fonts/GothamBook.eot');
    src: url('../fonts/GothamBook.eot') format('embedded-opentype'),
        url('../fonts/GothamBook.woff2') format('woff2'),
        url('../fonts/GothamBook.woff') format('woff'),
        url('../fonts/GothamBook.ttf') format('truetype'),
        url('../fonts/GothamBook.svg#GothamBook') format('svg');
}
@font-face {
    font-family: 'GothamMedium';
    src: url('../fonts/GothamMedium.eot');
    src: url('../fonts/GothamMedium.eot') format('embedded-opentype'),
        url('../fonts/GothamMedium.woff2') format('woff2'),
        url('../fonts/GothamMedium.woff') format('woff'),
        url('../fonts/GothamMedium.ttf') format('truetype'),
        url('../fonts/GothamMedium.svg#GothamMedium') format('svg');
}
@font-face {
    font-family: 'GothamBold';
    src: url('../fonts/GothamBold.eot');
    src: url('../fonts/GothamBold.eot') format('embedded-opentype'),
        url('../fonts/GothamBold.woff2') format('woff2'),
        url('../fonts/GothamBold.woff') format('woff'),
        url('../fonts/GothamBold.ttf') format('truetype'),
        url('../fonts/GothamBold.svg#GothamBold') format('svg');
}





h1{font-family: 'GothamBold';font-size: 30px}
h5 {font-family: 'GothamBold';font-size: 22px;}
h6{font-family: 'GothamMedium'; font-size: 15px;}
body{font-family: 'GothamBook'; font-size: 15px;color: #000;scroll-behavior: smooth;overflow-x: hidden;}
a{text-decoration: none;}
/*header section*/
.navbar {padding: 5px 0; transition: all .2s ease-in-out;}
.navbar-brand{width: 200px; transition: all .2s ease-in-out;z-index: 999;}
.header .nav-link{font-family: 'GothamMedium'; font-size: 15px; color: #000 !important;}
.header .nav-link:hover, .header .nav-link.active{color: #449cd6 !important;}
.navbar.fixheader{-webkit-box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.5);box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.5);transition: 0.2s all linear; padding: 10px 0px;}
.navbar.fixheader .navbar-brand {width: 180px;}
.navbar-toggler {border:none;border-radius: 0;z-index: 999; width: 35px;display:-ms-flexbox; display: flex;-ms-flex-wrap:wrap; flex-wrap: wrap;padding: 3px;}
.navbar-toggler:hover, .navbar-toggler:focus {outline: none;}
.header .line {height: 2px; width: 30px;transition: all 0.5s ease 0s; background-color: #449cd6; border-radius: 5px; display: inline-block;}
.header .line + .line {margin-top: 6px;}
.header .navbar-toggler[aria-expanded="true"] .line:nth-child(1){transition: all 0.5s ease 0s;  transform: rotate(45deg) translate(6px, 6px);}
.header .navbar-toggler[aria-expanded="true"] .line:nth-child(2) {opacity: 0;transition: all 0.5s ease 0s;}
.header .navbar-toggler[aria-expanded="true"] .line:nth-child(3)   {transition: all 0.5s ease 0s; transform: rotate(-45deg) translate(6px, -6px); }


/*hero section*/
.hero-section {padding: 35px 0;}
.hero-section .container{height: 100%;}
.hero-section .row {height: 100%;}
.hero-section .category-box {-ms-flex-align: center; align-items: center;padding: 10px; border-radius: 10px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); max-width: 360px; margin-left: auto;}
.hero-section .icon{margin-right: 15px;max-width: 60px;}
.hero-section .icon img{display: block;width: 100%;}
.banner-description {margin: 0 0 40px;}
.banner-description h1 {text-decoration: underline;margin-bottom: 30px;}
.banner-description p {line-height: 25px;}
.category-listing {max-width: 400px; width: 100%; margin-left: auto;margin-right: auto;}
.category-listing li + li{ margin-top: 25px; }
.category-listing li:nth-child(odd) .category-box{ margin-right: 30px; }


/*about section*/
.about-us {position: relative; padding: 45px 0;overflow: hidden;}
.about-us::before {position: absolute;content: "";left: 0;right: 0;top: 0;bottom: 0;background-color: #1447BC;}
.about-detail {color: #fff;}
.about-detail h5 {margin-bottom: 25px;}
.about-detail p {line-height: 25px;}
.about-slider {margin-top: 30px;}
.about-slider .owl-nav span {display: none;}
.about-slider .owl-nav {margin-top: 30px;text-align: center;}
.about-slider .owl-nav button {outline: none; background-repeat: no-repeat !important;background-position: center !important;background-size: cover !important; width: 30px;height: 15px;}
.about-slider .owl-nav button:hover, .about-slider .owl-nav button:focus {opacity: 0.7;}
.about-slider .owl-nav .owl-prev {background-image: url(../images/white-right-arrow.svg) !important; transform: rotate(180deg);margin-right: 15px;}
.about-slider .owl-nav .owl-next {background-image: url(../images/white-right-arrow.svg) !important;}
.common-box .card-img-top {max-width: 55px;margin-bottom: 20px;}
.common-box .card {padding: 25px 30px 40px; height: 100%;border:none; border-radius: 10px;}
.common-box .card-title {font-size: 18px;}
.common-box .card-body {padding: 0;}
.about-slider .owl-stage {display: flex;display: -ms-flexbox;padding-left: 0 !important}
.about-slider .item , .common-box {height: 100%;}

/*technology section*/
.technology {padding-top: 50px;}
.tech-list .common-box {margin-bottom: 35px;  height:calc(100% - 35px);}
.tech-list .card {border-radius: 0;padding: 5px;background-color: transparent;}
.tech-list p {margin-bottom: 20px;}
.tech-lang {color: #999999;margin-bottom: 0 !important;}
.common-heading p{max-width: 1100px;letter-spacing: -0.7px;margin-left: auto;margin-right: auto;margin-bottom: 35px;}
.common-heading h5 {margin-bottom: 25px;}
/*our portfolio section*/
.gallery-wrap li {margin-bottom: 35px;}
.gallery-wrap a{display: block;position: relative;webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out; -webkit-box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.5);height: 100%;}
.gallery-wrap a::before {position: absolute;content: "";left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(20,71,188,0.7);opacity: 0;visibility: hidden;webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;}
.gallery-wrap a::after {opacity: 0;visibility: hidden; position: absolute;content: attr(data-prtitle);top: 0;bottom: 0;left: 0;right: 0;display: -ms-flexbox;
    display: flex; -ms-flex-wrap: wrap;flex-wrap: wrap;-ms-flex-align: center;align-items: center;-ms-flex-pack: center;
    justify-content: center; font-size: 25px;color: #fff; font-family: 'GothamBold';}
.gallery-wrap a:hover::before, .gallery-wrap a:hover::after{opacity: 1;visibility: visible;}
.gallery-wrap img{width: 100%;height: 100%;object-fit: cover;}
.our-portfolio {padding: 30px 0;}

/*footer section*/
.footer {padding-top: 40px; padding-bottom: 8px; background-color: #1447BC;color: #fff;}
.surge-info a {display: inline-block;color: #fff;}
.surge-info a:hover, .surge-info a:focus{color: #F4941D;}
.social-icons li + li {margin-left: 20px;}
.social-icons a img {width: 100%;}
.social-icons .twitter {width: 19px;}
.social-icons .facebook {width: 8px}
.social-icons .linkedin {width: 16px;}
.social-icons .google-plus {width: 17px;}
.social-icons a {display: block;transition: .2s linear;-webkit-transition: .2s linear;-moz-transition: .2s linear;}
.social-icons a:hover{transform: scale(1.1);-ms-transform: scale(1.1);-moz-transform: scale(1.1);-webkit-transform: scale(1.1);}
.mail {text-decoration: underline !important;}
.contact {margin-bottom: 25px;}
.contact span + span, .footer-menu li + li {margin-top: 10px !important;}
.contact span {display: block;}
.contact a {margin-bottom: 0 !important;}
.footer-menu a{margin-bottom: 0 !important;}
.footer h5 {margin-bottom: 25px;}
.footer-form {margin-top: 30px;}
.footer-form input, .footer-form textarea {color: #fff !important; width: 100%; position: relative;z-index: 9; height: 40px; line-height: 1; background-color: transparent !important;border:none;border-radius: 0;padding: 0;}
.footer-form input:hover, .footer-form textarea:hover, .footer-form input:focus, .footer-form textarea:focus {outline: none;box-shadow: none;} 
.footer-form .form-group {margin-bottom: 30px;}
.footer-form .btn-primary {font-size: 15px; min-width: 100px;padding: 12px 5px;background-color: #fff;color: #000;border:none;border-radius: 5px; line-height: 1.1;}
.footer-form .btn-primary:hover , .footer-form .btn-primary:focus {color: #fff !important; background-color: #f4931d !important;outline: none !important;box-shadow: none !important;}
.copyright {margin-top: 30px; display: flex;justify-content: space-between;}
.surge-info p, .surge-info a  {line-height: 1.3;margin-bottom: 15px;text-decoration: none;}
.footer-form .input-box{position: relative;transition: all 0.3s ease-in-out;border-bottom: 1px solid #fff;} 
.footer-form .form-group.focus {border-color: #24C4F7;}
.footer-form .label {position: absolute; left: 0px; top: 5px; color: #fff; font-size: 18px; margin-bottom: 0; transition: all 0.3s ease-in-out;}
.footer-form .form-group.focus .label {font-size: 12px; top: -15px; color: #fff; left: 0;}
.footer-form .form-control:-webkit-autofill, .footer-form .form-control:-webkit-autofill:hover, .footer-form .form-control:-webkit-autofill:focus,
.footer-form select:-webkit-autofill, .footer-form select:-webkit-autofill:hover, .footer-form select:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;transition:  5000s ease-in-out 0s;}
.footer-form .error {color: #f00;display: block;font-size: 1rem; line-height: 1;margin-bottom: 5px;}
.captcha {margin-bottom: 15px;}
/*portfolio popup*/
.mfp-zoom-out-cur, .mfp-wrap {transition: all 0.5s ease-in-out;}
.mfp-zoom-out-cur .mfp-arrow {opacity: 1;}
.mfp-zoom-out-cur .mfp-arrow:before {display: none;}
.mfp-zoom-out-cur .mfp-arrow:after {border:none;background-repeat: no-repeat;background-size: cover;background-position: center;width: 35px;height: 35px;}
.mfp-zoom-out-cur .mfp-arrow-left:after {background-image: url("../images/popup-arrow.svg");transform: rotate(180deg);}
.mfp-zoom-out-cur .mfp-arrow-right:after{border:none;background-image: url("../images/popup-arrow.svg");background-repeat: no-repeat;background-size: cover;background-position: center;width: 35px;height: 35px;}
.mfp-zoom-out-cur .mfp-arrow-right:hover:after, .mfp-zoom-out-cur .mfp-arrow-right:focus:after {background-image: url("../images/popup-arrow-hover.svg");}
.mfp-zoom-out-cur .mfp-arrow-left:hover:after, .mfp-zoom-out-cur .mfp-arrow-left:focus:after {background-image: url("../images/popup-arrow-hover.svg");transform: rotate(180deg);}

.mfp-zoom-out-cur .mfp-image-holder .mfp-close {cursor: -moz-pointer; cursor: -webkit-pointer; cursor: pointer;width: auto;}
.mfp-zoom-out-cur {cursor: -moz-initial; cursor: -webkit-initial; cursor: initial; }

@media(min-width: 768px){
    h1 {font-size: 50px;}
    h5 {font-size: 25px;}
    .container-fluid {padding-left: 30px;padding-right: 30px;}
    .about-slider {margin-top: 40px;}
    .category-listing li:nth-child(odd) .category-box{ margin-right: 45px; }
    .technology {padding-top: 60px;}
    .tech-list .common-box {margin-bottom: 45px;  height:calc(100% - 45px);}
    .copyright {margin-top: 50px;}


}



@media(min-width: 992px){
    h1 {font-size: 55px;}
    h5 {font-size: 30px;}
    .container-fluid {padding-left: 50px;padding-right: 50px;}
    .navbar {padding-left: 0; padding-right: 0;}
    .header .nav-item + .nav-item{margin-left: 10px;}
    .hero-section {padding: 50px 0;}
    .banner-description {margin: 0; padding-right: 30px;}
    .banner-description h1 {margin-bottom: 40px;}
    .banner-description p {font-size: 18px;line-height: 39px;}
    .category-listing {max-width: 100%;}
    .about-us {height: 570px; padding: 0;}
    .about-slider {position: absolute;top: 50%;transform: translateY(-50%);margin-top: 0; margin-bottom: 0; padding-left: 15px;width: calc(100% + 60px);}
    .about-slider  .card-title {font-size: 20px;}
    .about-slider .owl-nav {position: absolute;top: -40px;right: 60px;margin-top: 0;}
    .about-slider .owl-nav button {width: 42px;}
    .contact-info {padding-right: 20px;}
    /*.footer-form .btn-primary {margin-bottom: 0;}*/
    .hero-section .category-box {max-width: 320px;}

}



@media(min-width: 1200px){
    h1 {font-size: 65px;}
    .container-fluid {padding-left: 80px;padding-right: 80px;}
    .hero-section{height: calc(100vh - 75px)}
    .about-us { height: 600px;}
    .technology {padding-top: 75px;}
    .tech-list .common-box {margin-bottom: 60px;  height:calc(100% - 60px);}
    .gallery-wrap li {margin-bottom: 40px;}
    .technolog {padding: 40px 0 50px;}
    .footer {padding-top: 60px;}
    .footer h5 {margin-bottom: 30px;}
    .footer-form {margin-top: 35px;}
    .footer-form .form-group {margin-bottom: 35px;}
    .contact-info {padding-right: 50px;}
    .hero-section .category-box {max-width: 360px;}


}
@media (min-width: 1300px) {
    h1 {font-size: 70px;}
    .contact-info {padding-right: 75px;}
    .hero-section .category-box {max-width: 400px;}
}
@media(min-width: 1650px){
    body {font-size: 22px;}
    h1 {font-size: 80px}
    h5 {font-size: 36px;}
    h6 {font-size: 22px;}
    .navbar-brand {width: 350px;}
    .navbar.fixheader .navbar-brand {width: 330px;}
    .header .nav-link {font-size: 22px;}
    .header .nav-item + .nav-item {margin-left: 50px;}
    .common-heading h5 {margin-bottom: 35px;}
    .common-heading p {margin-bottom: 50px;}
    .banner-description p {font-size: 22px;}
    .hero-section .category-box {max-width: 550px;}
    .about-slider .owl-nav {top: -50px;}
    .about-detail p {line-height: 1.5;}
    .technology {padding: 100px 0;}
    .category-listing li + li {margin-top: 35px;}
    .common-box .card-title {font-size: 26px;margin-bottom: 20px;}
    .common-box .card-img-top {max-width: 85px;margin-bottom: 35px;}
    .hero-section .icon {max-width: 80px;}
    .social-icons li + li {margin-left: 35px;}
    .social-icons .twitter {width: 30px;}
    .social-icons .facebook {width: 18px}
    .social-icons .linkedin {width: 26px;}
    .social-icons .google-plus {width: 28px;}
    .about-us {height: 800px;}
    .tech-list {margin-left: -30px;margin-right: -30px;}
    .common-box {padding: 10px 15px;}
    .our-portfolio {padding: 50px 0;}
    .footer-form .btn-primary {padding: 22px 10px;font-size: 24px; min-width: 160px;}
    .surge-info p, .surge-info a {margin-bottom: 25px;}
    .contact span + span, .footer-menu li + li {margin-top: 15px;}
    .category-listing li:nth-child(odd) .category-box{ margin-right: 75px; }
        .copyright {margin-top: 70px;}
}


@media(min-width: 1900px) {
    body {font-size: 24px;}
    h1 {font-size: 95px;}
    h5 {font-size: 40px;}
    h6 {font-size: 28px;}
    .banner-description p {font-size: 26px;}
    .hero-section .category-box {max-width: 650px;}
    .common-box .card-title {font-size: 30px;margin-bottom: 25px;}
    .common-box .card-img-top {max-width: 110px;margin-bottom: 45px;}
    .hero-section .icon {max-width: 100px;}
    .about-us {height: 900px;}
}


@media (max-width: 991px) {
    .navbar-expand-lg>.container-fluid {padding-left: 15px;padding-right: 15px;}
    .header .collapsing { -webkit-transition: height 0s ease;transition: height 0s ease; }
    .header .navbar-collapse{padding-top: 78px; height: 100%; width: 100%; position: fixed; z-index: 99; top: 0; right: 0; background-color: #fff; transition: all 0.5s ease-in-out !important; overflow-x: hidden; left: 100%;}
    .header .navbar-collapse.show {left: 0;}
    .header .navbar-nav {padding: 15px;}
    
}

@media (max-width: 480px) {
    .hero-section .category-box {margin-left: 30px;}
    .category-listing li:nth-child(odd) .category-box {margin-right: 25px;margin-left: 0;}
}


@media(max-width: 768px){
.copyright {flex-direction: column;}
}