/* -------------- Genetal ----------------- */

@font-face {
    src: url(../fonts/century-gothic/Century%20Gothic.ttf);
    font-family: century-gothic;
}

@font-face {
    src: url(../fonts/century-gothic/GOTHICB.TTF);
    font-family: century-gothic-b;
}

* {
    font-family: century-gothic;
    color: #fff;
    box-sizing: border-box;
}

h1 {
    font-size: 55px;
    font-weight: bold;
    font-family: century-gothic-b;
}

h2 {
    font-size: 40px;
    font-weight: bold;
    display: inline-block;
    padding: 15px 40px 15px 15px;
    background-image: url(../image/h2bg.png);
    margin-bottom: 20px;
    font-family: century-gothic-b;
}

h3 {
    font-family: century-gothic;
    font-size: 35px;
}

h6 {
    font-family: century-gothic-b;
}

h4 {
    font-size: 30px;
    margin-bottom: 20px;
    font-family: century-gothic-b;
}

h5 {
    font-size: 28px;
    font-weight: bold;
    font-family: century-gothic-b;
}

p {
    font-size: 14px;
    text-align: left;
}
p span {
    color: #181818;
    font-family: century-gothic-b;
}
a:hover {
    text-decoration: none;
}

.separator {
    width: 100%;
}

img {
    width: 100%;
}

hr {
    margin: 30px 0;
    height: 2px;
}

.px {
    padding: 0 5%;
}

section,
footer,
header {
    overflow: hidden;
}

svg,
svg path {
    width: 100%;
}


/* -------------- Button ----------------- */


.content .button {
    display: flex;
}

.content .button a {
    color: #fff;
    font-weight: bold;
    position: relative;
    height: 42px;
    line-height: 42px;
    border-radius: 30px;
    z-index: 100;
    display: block;
    padding: 0 20px 0 50px;
}

.content .button a i {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    font-size: 20px;
    position: absolute;
    top: 3px;
    left: 3px;
}

.content .button a.blue i {
    color: #fff;
    background: #5d45c5;
}

.content .button a.blue:hover i {
    color: #5d45c5;
}

.content .button a.yellow i {
    background: #fbd96d;
    color: #ba1c6d;
}

.content .button a.yellow:hover i {
    color: #fbd96d;
}

.content .button a.red i {
    color: #fff;
    background: #e81840;
}

.content .button a.red:hover i {
    color: #e81840;
}

.content .button a::before {
    content: '';
    width: 42px;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    border-radius: 30px;
    transition: .5s;
    opacity: 0;
}

.content .button a.red::before {
    background: #e81840;
}

.content .button a.blue::before {
    background: #5d45c5;
}

.content .button a.yellow::before {
    background: #fbd96d;
}

.content .button a:hover {
    transition: .5s;
}

.content .button a:hover i {
    background: #fff;
    transition: .5s
}

.content .button a:hover::before {
    width: 100%;
    display: block;
    opacity: 1;
    transition: .7s;
}



/* -------------- Header ----------------- */


header {
    background-image: url(../image/bannerbg.png), linear-gradient(to top, rgb(118, 44, 255) 0%, rgb(64, 51, 255) 100%);
    background-size: 100% auto, 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}

header .navbar .navbar-brand img {
    height: 70px;
    width: auto;
}

header .navbar .nav-link {
    padding: 5px 20px !important;
    display: block;
    color: #fff !important;
    text-align: right;
}

header .navbar .active .nav-link span {
    color: #FBBE5A !important;
}
header .navbar .drop{
	position: relative;
}
header .navbar .drop ul{
	background: #fff;
	list-style: none;
	padding: 0;
	margin: 0;
	position: absolute;
	left: 0;
	min-width: 190px;
	z-index: 9999;
	display: none;
}
header .navbar .drop ul li a{
	padding: 7px 20px;
	display: block;
}
header .navbar .drop:hover ul{
	display: block;
	animation: drop .7s ;
}
@keyframes drop{
	0%{top: 80px;opacity: 0;}
	100%{top: 32px;opacity: 1;}
}
header .navbar .drop ul li:hover a{
	color: #fff;
	background: #00134b;
	transition: .5s;
}

header .navbar .nav-item:hover .nav-link span {
    color: #FBBE5A !important;
    position: relative;
    transition: .5s;
}

header .navbar .navbar-collapse .nav-item .nav-link span::after {
    content: "";
    width: 0%;
    height: 2px;
    background: #fff;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translate(-50%);
}

header .navbar .navbar-collapse .nav-item:hover .nav-link span::after {
    width: 100%;
    transition: .3s;
}

header .navbar .search .nav-item:hover .nav-link i {
    color: #FBBE5A !important;
}

header .navbar .nav .nav-item:nth-child(1) .nav-link {
    padding-right: 0 !important;
}
header .navbar .nav .nav-item:nth-child(2) .nav-link {
    border-left: 1px solid #e9e9e9;
    display: none;
}

header .navbar .nav .nav-item:last-child {
    display: none;
}

header .navbar .nav .nav-item:last-child i {
    position: relative;
}

header .navbar .nav .nav-item:last-child i span {
    position: absolute;
    right: -7px;
    top: -8px;
    font-size: 10px;
    background: #d95757;
    height: 15px;
    line-height: 15px;
    width: 15px;
    text-align: center;
    border-radius: 50%
}

header .navbar-dark .navbar-toggler {
    color: rgba(255, 255, 255, 1);
    border: none;
    font-size: 28px;
}

header .navbar .nav .nav-item.s-bar {
    position: relative;
}

header .navbar .nav .nav-item.s-bar .click {
    transition: 1s;
    width: 200px;
}

header .navbar .nav .nav-item.s-bar form {
    height: 0;
    width: 0;
    position: absolute;
    right: 0;
    z-index: 9999;
    height: 40px;
    overflow: hidden;
}

header .navbar .nav .nav-item.s-bar form input {
    color: #fff;
    background: #00134b;
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 5px 10px;
}

/* -------------- Search ----------------- */


.search-box {
    position: fixed;
    top: 0%;
    left: 0%;
    background: rgba(27, 1, 43, .8);
    min-height: 100vh;
    z-index: 999999;
    width: 100vw;
    display: none;
     animation-duration: 1.5s;
}

.search-box .times {
    width: 40px;
    height: 40px;
    line-height: 37.1px;
    font-size: 25px;
    text-align: center;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    right: 25px;
    top: 25px;
    cursor: pointer;

}

.search-box form {
    margin-right: 40px;
    position: relative;
}

.search-box form i {
    position: absolute;
    font-size: 30px;
    bottom: 20px;
    left: 2px;
}

.search-box form input {
    background-color: transparent;
    width: 100%;
    font-size: 30px;
    color: #777;
    padding: 20px 20px 10px 60px;
    border: none;
    border-bottom: 1px solid #999;
}

.search-box .row h5 {
    font-size: 16px;
    margin: 30px 10px 20px;

}

.search-box .row ul {
    list-style: none;
    padding: 0;
}

.search-box .row ul li {
    padding: 5px 10px;
    border-radius: 10px;
}

.search-box .row ul li:hover {
    background: #fff;
    transition: 1s;
}

.search-box .row ul li:hover a,
.search-box .row ul li:hover p {
    color: #000;
    transition: 1s;
}

.search-box .row ul li a {
    color: #fff;
}

.search-box .row ul li a img {
    height: 40px;
    width: auto;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    box-sizing: content-box;
    margin-right: 10px;
    min-width: 70px;
}

.search-box .row ul li a p {
    font-size: 18px;
}


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

section.banner p {
    font-size: 20px;
}

section.banner .imgGrafic .content {
    position: relative;
}

section.banner .imgGrafic span {
    line-height: 1vw;
    font-size: 0.9vw;
    text-align: center;
    position: absolute;
}

section.banner .imgGrafic span:hover {
    color: red;
    transition: 1s;
}

section.banner .imgGrafic .agriculture {
    top: 31.1%;
    left: 8.1%;
    animation: ani1 1s backwards;
    animation-delay: 1.5s;
}

@keyframes ani1 {
    from {
        opacity: 0;
        left: 0;
        top: 11%;
        font-size: 2vw;
    }
}

section.banner .imgGrafic .education {
    top: 8.1%;
    left: 11.4%;
    animation: ani2 1s backwards;
    animation-delay: 1.5s;
}

@keyframes ani2 {
    from {
        opacity: 0;
        left: 19%;
        top: -12%;
        font-size: 2vw;
    }
}

section.banner .imgGrafic .building {
    top: 17%;
    left: 24.4%;
    animation: ani3 1s backwards;
    animation-delay: 1.5s;
}

@keyframes ani3 {
    from {
        opacity: 0;
        left: 28%;
        top: -5%;
        font-size: 2vw;
    }
}

section.banner .imgGrafic .airport {
    top: 2%;
    left: 36.7%;
    animation: ani4 1s backwards;
    animation-delay: 1.5s;
}

@keyframes ani4 {
    from {
        opacity: 0;
        left: 40%;
        top: -18%;
        font-size: 2vw;
    }
}

section.banner .imgGrafic .industry {
    top: 26.2%;
    left: 41.5%;
    animation: ani5 1s backwards;
    animation-delay: 1.5s;
}

@keyframes ani5 {
    from {
        opacity: 0;
        left: 20%;
        top: 46%;
        font-size: 2vw;
    }
}

section.banner .imgGrafic .goverment {
    top: 17%;
    left: 44.5%;
    animation: ani6 1s backwards;
    animation-delay: 1.5s;
}

@keyframes ani6 {
    from {
        opacity: 0;
        left: 54%;
        top: -3%;
        font-size: 2vw;
    }
}

section.banner .imgGrafic .ports {
    top: 1.1%;
    left: 56.8%;
    animation: ani7 1s backwards;
    animation-delay: 1.5s;
}

@keyframes ani7 {
    from {
        opacity: 0;
        left: 76%;
        top: -19%;
        font-size: 2vw;
    }
}

section.banner .imgGrafic .energy {
    top: 26.1%;
    left: 65%;
    animation: ani8 1s backwards;
    animation-delay: 1.5s;
}

@keyframes ani8 {
    from {
        opacity: 0;
        left: 70%;
        top: 6%;
        font-size: 2vw;
    }
}

section.banner .imgGrafic .warehouse {
    top: 6.7%;
    left: 72.4%;
    animation: ani9 1s backwards;
    animation-delay: 1.5s;
}

@keyframes ani9 {
    from {
        opacity: 0;
        left: 90%;
        top: -14%;
        font-size: 2vw;
    }
}

section.banner .imgGrafic .Transportation {
    top: 26%;
    left: 79.8%;
    animation: ani10 1s backwards;
    animation-delay: 1.5s;
}

@keyframes ani10 {
    from {
        opacity: 0;
        left: 99%;
        top: 46%;
        font-size: 2vw;
    }
}


/* -------------- About ----------------- */


section.about,
.g-yellow {
    background: linear-gradient(90deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
    background-image: -moz-linear-gradient(90deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
    background-image: -webkit-linear-gradient(90deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
    background-image: -ms-linear-gradient(90deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
}

section.about .content h2 {
    margin-top: 30px;
}

section.about .content p {
    text-align: justify;
}

section.about .content .button {
    margin-top: 35px;
}



/* -------------- Solution ----------------- */


section.solution,
section.smart-energy,
section.smart-warehouse,
section.contact,
.g-violet {
    background-image: linear-gradient(90deg, rgb(246, 23, 49) 0%, rgb(140, 32, 156) 100%);
    background-image: -moz-linear-gradient(90deg, rgb(246, 23, 49) 0%, rgb(140, 32, 156) 100%);
    background-image: -webkit-linear-gradient(90deg, rgb(246, 23, 49) 0%, rgb(140, 32, 156) 100%);
    background-image: -ms-linear-gradient(90deg, rgb(246, 23, 49) 0%, rgb(140, 32, 156) 100%);
}

section.solution {
    overflow: hidden;
}

section.solution img {
    width: 100%;
    position: relative;
    z-index: 1;
}

section.solution .content {
    float: right;
    width: 40%;
    margin-top: 50px;
    padding-right: 5%;
    position: relative;
    z-index: 111;
}

section.solution .content h2 {
    position: absolute;
    right: 0;
    padding-right: 100px;
    top: -60px
}

section.solution .content h4 {
    margin-top: 30px;
}

section.solution .left-image img {
    margin-top: -130px;
}


/* -------------- Building ----------------- */


.white h4,
.white p,
.white a {
    color: #000 !important;
}

.white a:hover {
    color: #fff !important;
}


/* -------------- Agriculture ----------------- */


section.smart-agriculture,
section.smart-airport,
.g-blue {
    background-image: -moz-linear-gradient(90deg, rgb(118, 44, 255) 0%, rgb(64, 51, 255) 100%);
    background-image: -webkit-linear-gradient(90deg, rgb(118, 44, 255) 0%, rgb(64, 51, 255) 100%);
    background-image: -ms-linear-gradient(90deg, rgb(118, 44, 255) 0%, rgb(64, 51, 255) 100%);


}


/* -------------- Gocrnment ----------------- */


section.smart-government {
    background: linear-gradient(-63deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
    background-image: -moz-linear-gradient(-63deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
    background-image: -webkit-linear-gradient(-63deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
    background-image: -ms-linear-gradient(-63deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
}


/* -------------- School ----------------- */


section.smart-school,
section.product,
.g-yellow-50 {
    background-image: linear-gradient(-50deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
    background-image: -moz-linear-gradient(-50deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
    background-image: -webkit-linear-gradient(-50deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
    background-image: -ms-linear-gradient(-50deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
}


/* -------------- Energy ----------------- */


section.smart-energy .content {
    position: relative;
    z-index: 111;
}

section.smart-energy .content {
    float: right;
    width: 50%;
}

section.smart-energy .left-image img {
    margin-top: -100px;
    width: 80%;
}


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


section.services {
    background-image: linear-gradient(90deg, rgb(7, 16, 33) 0%, rgb(15, 52, 61) 100%);
    background-image: -moz-linear-gradient(90deg, rgb(7, 16, 33) 0%, rgb(15, 52, 61) 100%);
    background-image: -webkit-linear-gradient(90deg, rgb(7, 16, 33) 0%, rgb(15, 52, 61) 100%);
    background-image: -ms-linear-gradient(90deg, rgb(7, 16, 33) 0%, rgb(15, 52, 61) 100%);
}

.title {
    padding-top: 15px;
    display: flex;
    justify-content: center;
}

.title h2 {
    display: inline-block;
    padding: 15px 30px;
    text-align: center;
}

section.services .services-slide .item {
    overflow: hidden;
    padding: 0 10px;
    border-radius: 10px;
}

section.services .services-slide .item:hover {
    background: #fff;
    box-shadow: 0 0 10px #fff;
    transition: 1.5s;
}

section.services .services-slide .item:hover h6,
section.services .services-slide .item:hover p {
    color: #0e313b;
    transition: 1s;
}

section.services .services-slide img {
    width: 120px;
    margin: 20px auto;
    display: block;
}

section.services .services-slide p {
    max-width: 250px;
    margin: auto;
    padding-bottom: 20px;
}

section.services h6 {
    text-align: center;
}

section.services p {
    text-align: center;
    color: #c7d0d5;
}


section.services .btn {
    margin-top: 20px;
    padding: 8px 40px;
    border-radius: 70px;
    border: 2px solid #112536;
    color: #c7d0d5;
    transition: 1s;
}

.survices-button {
    display: flex;
    justify-content: center;
    margin-bottom: 20px
}

.survices-button .btn:hover {
    background: #fff;
    color: #00134b;
    font-weight: bold;
}


/* -------------- Product ----------------- */


section.product .content {
    padding: 20px;
    z-index: 2;
    position: relative;
    transition: 2s;
}

section.product .content:hover {
    background-color: #fff;
}

section.product .content img {
    width: 100px;
    display: block;
    margin: auto;
    max-height: 109px;
min-height: 110px;
}

section.product .content h6 {
    text-align: center;
    color: #000;
    margin-top: 10px;
    font-weight: bold;
}

section.product .content p {
    text-align: center;
    min-height: 130px;
}

section.product .content .survices-button {}

section.product .content .survices-button .btn {
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 5px 25px;
    color: #fff;
}

section.product .content:hover p {
    color: #000;
}

section.product .content:hover .survices-button .btn {
    color: #000;
    border-color: #000;
}

section.product .content:hover::after {
    content: '';
    width: 92%;
    height: 108%;
    background: rgba(255, 255, 255, .3);
    position: absolute;
    top: -4%;
    left: 4%;
    border-radius: 5px;
    z-index: -1;
    animation: pro .8s;
}

section.product .content:hover::before {
    content: '';
    width: 84%;
    height: 116%;
    background: rgba(255, 255, 255, .3);
    position: absolute;
    top: -8%;
    left: 8%;
    border-radius: 5px;
    z-index: -1;
    animation: pro .9s;
}

section.product .btn {
    transition: 1s;
}

section.product .btn:hover {
    background: #00134b;
    color: #fff !important;
    font-weight: bold;
}

@keyframes pro {
    0% {
        transform: scale(.8)
    }

    100% {
        transform: scale(1)
    }
}



/* -------------- Contact ----------------- */


section.contact .wrapper {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

section.contact h2 {
    text-align: center;
    margin: 0;
}

.contact h6 {
    font-size: 22px;
    margin-top: 20px;
    font-family: century-gothic;
}

section.contact form {
    padding: 20px
}

section.contact form input,
section.contact form select,
section.contact form textarea {
    padding: 15px 30px;
    background-color: transparent;
    border: 2px solid #941367;
    border-radius: 100px;
    width: 100%;
}

section.contact form textarea {
    padding: 15px 30px;
    resize: none;
}

section.contact form input::placeholder,
section.contact form textarea::placeholder {
    color: #fff;
}

section.contact form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.icon {
    position: relative;
    z-index: 2
}

.icon:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0d7";
    position: absolute;
    z-index: -1;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}



section.contact form input:hover,
section.contact form select:hover,
section.contact form textarea:hover,
section.contact form input:focus,
section.contact form select:focus,
section.contact form textarea:focus {
    box-shadow: 0 2px 20px rgba(255, 255, 255, 0.2);
    background: rgba(1, 19, 75, 0.6);
    transition: 1s;
}

section.contact form select option {
    color: #000;
}


section.contact .btn {
    font-weight: bold;
    color: #fff;
    background: #00134b;
    padding: 7px 40px;
    border-radius: 30px;
    margin: 10px;
    transition: 1s;
}

section.contact .btn:hover {
    background: #fff;
    color: #00134b;
}

/*
section.contact .content{
    padding: 40px;
}
*/
section.contact .content {
    background-image: url(../image/shado.png);
    background-size: 100% 100%
}

section.contact .content .row {
    max-width: 500px;
    margin: auto;
}

section.contact .content .row img {
    width: 35px;
    display: block;
    margin: auto;
}

section.contact .content .row p {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 0;
}

section.contact .content .row .col-4:first-child img {
    margin-bottom: 10px;
}

section.contact .content span {
    margin: 30px 0;
    padding: 20px;
    border-radius: 20px;
}

section.contact .content span:hover {
    box-shadow: 0 0 10px #fff;
    transition: .5s;

}


/* -------------- Footer ----------------- */


footer h5 {
    color: #000;
    text-align: center;
    position: relative;
}

footer h6 {
    color: #535353;
    text-align: center;
}

footer .col-12 h6 {
    font-family: century-gothic;
}

footer form {
    width: 100%;
}

footer form input {
    padding: 20px !important;
    border-color: #818181;
}

footer form input:hover {
    box-shadow: 0 0 10px #999;
}

footer form .btn {
    width: 25%;
    padding: 8px;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    background: #00134b;
    color: #fff;
    font-weight: bold;
    transition: 1s;
}

footer form .btn:hover {
    background: #EC183B;
    color: #fff;
}

.social a i {
    color: #909090 !important;
    font-size: 35px;
    transition: 1s;
}

.social a:hover i {
    color: #EC183B !important;
}

footer .subscrib {
    border-bottom: 1px solid #d6d6d6;
}

footer p {
    color: #535353;
    text-align: left;
}

footer .logo2 {
    height: 80px;
    width: auto;
}

footer .content-link a {
    color: #000;
    font-size: 14px;
    padding: 3px 0;
    display: block;
}

footer .content-link a:hover {
    color: #EC183B;
}

footer .contactus .d-flex i {
    color: #000;
    margin-top: 4px
}

footer .contactus .d-flex p {
    margin-left: 20px;
}

footer .contactus .conSocial {
    padding: 0;
}

footer .contactus .conSocial a i {
    font-size: 22px !important;
    color: #000;
    margin-right: 15px
}

footer .contactus .conSocial a i:hover {
    color: #EC183B;
}

.footer-bottom {
    border-top: 1px solid #d6d6d6;
    color: #000;
    margin: 0;
    padding: 15px;
    margin-top: 20px;
}
.footer-bottom p {
	max-width: 700px;
	margin: auto;
	text-align: center;
}









/* -------------- About Page ----------------- */


/* -------------- About Header ----------------- */

header.about,
header.blog {
    background-image: url(../image/about-us-banner.png), linear-gradient(to top, rgb(118, 44, 255) 0%, rgb(64, 51, 255) 100%);
    background-size: 100% auto, 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}


/* -------------- Who we are ----------------- */


.about-who p {
    text-align: center;
    margin-bottom: 30px;
    font-weight: 600;
}



/* -------------- About Team ----------------- */

.about-team .content .row {
    overflow: hidden;
}

.about-team .content {
    margin-top: 30%;
    text-align: center;
    background: #fff;
    padding: 0px 20px 20px;
    margin-bottom: 30px;
}

.about-team .content:hover {
    background: rgb(15, 52, 61);
    transition: 1s;
}

.about-team .content img {
    width: 40%;
    margin-top: -20%;
    border-radius: 50%;
    border: 4px solid #eaf2f5;
    background: #eaf2f5;
    max-height: 163px;
}
.about-team .content span {
color: #007bff;}
.about-team .content h6 {
    text-align: center;
    color: #000;
    font-family: century-gothic;
    margin: 15px 0 5px;
}

.about-team .content h6 a {
    color: #00adf1;
}

.about-team .content p {
    text-align: center;
    color: #000;
    margin: 0;
}

.about-team .content:hover h6,
.about-team .content:hover p {
    color: #fff;
}









/* -------------- Blog Page ----------------- */


/* -------------- Blog blog ----------------- */

.gray {
    background-color: #f6f6f6;
}
section.blog .content .post h5 {
    color: #000;
    margin-bottom: 20px;
}

section.blog .content .post .text {
    padding: 30px 0;
}

section.blog .content .post p {
    color: #676767;
    margin-bottom: 20px;
}

section.blog .content .post p i {
    color: #676767;
    margin-right: 10px;
    font-size: 18px
}

section.blog .content .post a {
    background: #004c71;
    padding-left: 40px;
    padding-right: 40px;
    display: block;
    border-bottom: 4px solid #003a56;
    box-sizing: content-box;
    transition: 1s;
}

section.blog .content .post a:hover {
    background: #00adf1;
    border-bottom: 4px solid #00638a;
}


section.blog .content form {
    position: relative;
}

section.blog .content form input {
    width: 100%;
    padding: 12px 10px;
    border: 2px solid #e9e9e9;
    color: #858585;
}

section.blog .content form i {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: #858585;
    pointer-events: none;
}

section.blog .content .category {
    padding: 30px 0 10px;
}

section.blog .content .category h6 {
    color: #000;
}

section.blog .content .category ul {
    list-style: none;
    padding: 0;
}

section.blog .content .category ul li {
    border-bottom: 1px solid #d1d1d1;
}

section.blog .content .category ul li:last-child {
    border-bottom: 0px;
}

section.blog .content .category ul li a {
    display: block;
    padding: 10px 5px;
    color: #606060;
    font-family: century-gothic-b;
    font-size: 15px;
}

section.blog .content .category ul li a i {
    color: #606060;
    margin-right: 10px;
}




/* -------------- Contact Us Page ----------------- */


/* -------------- Contact Header ----------------- */
header.contact-us {
    background-image: url(../image/about-us-banner.png), linear-gradient(58deg, rgb(7, 16, 33) 0%, rgb(15, 52, 61) 100%);
}





/* -------------- Products Page ----------------- */


/* -------------- Products Content ----------------- */


section.classifications h5 {
    color: #000;
    margin-bottom: 30px;
}

section.classifications p {
    color: #4b4b4b;
    font-size: 16px;
}






/* -------------- Smart Education Page ----------------- */


/* -------------- Smart Education Header ----------------- */


header.education {
    background-image: url(../image/about-us-banner.png), linear-gradient(0deg, rgb(246, 23, 49) 0%, rgb(140, 32, 156) 100%);
}


/* -------------- Smart Education contents ----------------- */


section.smart-education .container p {
    color: #4b4b4b;
    font-size: 16px;
}

section.smart-education .container .row .content {
    padding: 20px;
    border-radius: 10px;
    margin: 30px auto;
}

section.smart-education .container .row .content:hover {
    background: rgb(15, 52, 61);
    transition: 1s;
}

section.smart-education .container .row .content img {
    width: 20%;
    display: block;
    margin: auto;
}

section.smart-education .container .row .content h6 {
    color: #000;
    margin: 20px 0 10px;
    text-align: center;
}

section.smart-education .container .row .content p {
    text-align: center;
}

section.smart-education .container .row .content:hover p,
section.smart-education .container .row .content:hover h6 {
    color: #fff;
    transition: 1s;
}


/* -------------- Education Contents Now ----------------- */


section.contact-now {
    background-image: linear-gradient(58deg, rgb(7, 16, 33) 0%, rgb(15, 52, 61) 100%);
    background-image: -moz-linear-gradient(58deg, rgb(7, 16, 33) 0%, rgb(15, 52, 61) 100%);
    background-image: -webkit-linear-gradient(58deg, rgb(7, 16, 33) 0%, rgb(15, 52, 61) 100%);
    background-image: -ms-linear-gradient(58deg, rgb(7, 16, 33) 0%, rgb(15, 52, 61) 100%);
    margin-top: -2px
}

section.contact-now p {
    max-width: 600px;
    text-align: center;
    margin: 0px auto 20px;
}

section.contact-now .button {
    justify-content: center;
}

section.contact-now .button a {
    border: 1px solid #fff;
    padding-right: 40px;
    padding-left: 40px;
    line-height: 38px;
    transition: 1s;
}

section.contact-now .button a:hover {
    color: rgb(15, 52, 61);
    background-color: #fff;
}



/* -------------- Services Page ----------------- */


/* -------------- Services Header ----------------- */



header.services {
    background-image: url(../image/about-us-banner.png), linear-gradient(-230deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
}


/* -------------- Services page Content ----------------- */


section.services-content {
    background-color: #f6f6f6;
}

section.services-content .content h4 {
    color: #000;
    margin-bottom: 15px;
}

section.services-content .content h6 {
    color: #000;
}

section.services-content .content p {
    color: #515151;
}

section.services-content .content p span {
    line-height: 40px;
}

section.services-content .content ul {
    padding-left: 20px
}

section.services-content .content ul li {
    color: #515151;
    font-size: 14px;
}




/* -------------- Smart Warehouse Page ----------------- */


/* -------------- Warehouse Header ----------------- */



header.warehouse {
    background-image: url(../image/about-us-banner.png), linear-gradient(-230deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
}


/* -------------- Warehouse Content ----------------- */


section.warehouse-content h6 {
    color: #000;
    margin-bottom: 15px;
}

section.warehouse-content p {
    color: #4b4b4b;
    font-size: 16px;
}

section.warehouse-content p span {
    font-family: century-gothic-b;
    color: #000;
}

section.warehouse-content img {
    padding: 30px 0
}

section.warehouse-content a {
    color: #00adf1;
    transition: 1s;
}

section.warehouse-content a:hover {
    color: rgb(15, 52, 61);
}
section.warehouse-content .button a {
    background: #2eb2ff;
    padding: 10px 30px;
    border-radius: 30px;
    color: #fff;
}

section.warehouse-content .button a:hover {
    background: rgb(15, 52, 61);
    transition: 1s;
}

.contact-now p span{
	color: #fff;
}

/* -------------- Warehouse feature ----------------- */


section.feature .content {
    padding: 25px;
    position: relative;
    transition: 1s;
    border-radius: 5px;
    z-index: 999;
    transition: 2s;
}

section.feature .content:hover {
    background: #fff;
}

section.feature .content:hover::after {
    content: '';
    width: 92%;
    height: 108%;
    background: rgba(255, 255, 255, .2);
    position: absolute;
    top: -4%;
    left: 4%;
    border-radius: 5px;
    z-index: -1;
    animation: pro .8s;
}

section.feature .content:hover::before {
    content: '';
    width: 84%;
    height: 116%;
    background: rgba(255, 255, 255, .3);
    position: absolute;
    top: -8%;
    left: 8%;
    border-radius: 5px;
    z-index: -1;
    animation: pro .9s;
}

section.feature .content img {
    height: 70px;
    width: auto;
    display: block;
    margin: auto;
    margin-bottom: 20px;
}

section.feature .content img.black {
    display: none;
    display: none;
}

section.feature .content:hover img.black {
    display: block;
}

section.feature .content:hover img.white {
    display: none;
}

section.feature .content p,
section.feature .content h5 {
    text-align: center;
    margin: 10px 0;
}

section.feature .content .button {
    justify-content: center;
}

section.feature .content .button a {
    padding-left: 30px;
    padding-right: 30px;
    border: 1px solid #fff;
}

section.feature .content:hover p,
section.feature .content:hover h5 {
    color: #000;
    transition: 1s;
}

section.feature .content:hover .button a {
    border-color: #000;
    color: #000;
    transition: 1s;
}

section.feature .content:hover .button a:hover {
    background: rgb(15, 52, 61);
    color: #fff;
    transition: 1s;
}



/* -------------- Smart Road Page ----------------- */


/* -------------- Road Header ----------------- */



header.smart-road {
    background-image: url(../image/about-us-banner.png), linear-gradient(-230deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
}


/* -------------- Road Content ----------------- */


section.smart-road-content h6 {
    color: #000;
    margin-bottom: 15px;
}

section.smart-road-content p {
    color: #4b4b4b;
    font-size: 16px;
}


/* -------------- Road feature ----------------- */


section.smart-road.feature .container {
    max-width: 990px;
}

section.smart-road.feature .container h5 {
    font-size: 25px;
}




/* -------------- Smart Building Page ----------------- */


/* -------------- Building Header ----------------- */




header.building {
    background-image: url(../image/about-us-banner.png), linear-gradient(-230deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
}


/* -------------- Building Content ----------------- */


section.building-content h5 {
    color: #000;
    margin-bottom: 15px;
    font-family: century-gothic;
}

section.building-content p {
    color: #4b4b4b;
    font-size: 16px;
}


section.building-content ul {
    padding-left: 15px;
}

section.building-content ul li {
    color: #000;
}

section.building-content .button a {
    background: #2eb2ff;
    padding: 10px 30px;
    border-radius: 30px;
    color: #fff;
    margin-top: 0px;
}

section.building-content .button a:hover {
    background: rgb(15, 52, 61);
    transition: 1s;
}


/* -------------- Building Feature ----------------- */


section.building.feature h5 {
    min-height: 100px;
    font-size: 20px;
}



/* -------------- Smart Government Page ----------------- */


/* -------------- Government Header ----------------- */



header.government {
    background-image: url(../image/about-us-banner.png), linear-gradient(0deg, rgb(246, 23, 49) 0%, rgb(140, 32, 156) 100%);
}


/* -------------- Government Contents ----------------- */


section.government-contents img {
    float: right;
    width: 50%;
    margin: 20px;
    shape-outside: url(/assets/image/SmartGovernment.png);
    shape-margin: 20px;
}

section.government-contents h6 {
    color: #000;
    margin-top: 30px;
    margin-bottom: 20px;
}

section.government-contents p {
    color: #4b4b4b;
    font-size: 16px;
}



section.government-contents ul {
    padding-left: 15px;
    margin-bottom: 30px;
}

section.government-contents ul li {
    color: #4b4b4b;
}

section.government-contents a {
    font-family: century-gothic-b;
    color: #00adf1;
}



/* -------------- Smart Ports Page ----------------- */


/* -------------- Ports Header ----------------- */



header.ports {
    background-image: url(../image/about-us-banner.png), linear-gradient(to top, rgb(118, 44, 255) 0%, rgb(64, 51, 255) 100%);
}


/* -------------- Ports Contents ----------------- */


section.ports-contents {
    background-color: #f6f6f6;
}

section.ports-contents {}

section.ports-contents h6 {
    color: #000;
    margin-top: 30px;
    margin-bottom: 20px;
}

section.ports-contents p {
    color: #4b4b4b;
    font-size: 16px;
}



section.ports-contents a {
    border: 2px solid #2eb2ff;
    color: #2eb2ff;
    padding: 10px 30px;
    border-radius: 30px;
    transition: 1s;
}

section.ports-contents .button {
    margin-top: 30px
}

section.ports-contents a:hover {
    background: #2eb2ff;
    color: #fff;
}


/* -------------- Ports Table ----------------- */\


section.ports-contents table{

}
section.ports-contents table thead {
    border: 3px solid #fff;
}

section.ports-contents table thead th {
    padding: 15px 20px;
    position: relative;
    vertical-align: middle
}

section.ports-contents table thead th:nth-child(1) {
    background: #ff9740;
}

section.ports-contents table thead th:nth-child(2) {
    background: #fe706f;
}

section.ports-contents table thead th:nth-child(3) {
    background: #924980;
}

section.ports-contents table thead th:nth-child(4) {
    background: #4d4052;
}

section.ports-contents table td {
    border: 1px solid #999;
    padding: 20px 10px;
}

section.ports-contents table thead th::after {
    content: '';
    height: 100%;
    position: absolute;
    border-left: 20px solid transparent;
    right: 0;
    top: 0
}

section.ports-contents table thead th::before {
    content: '';
    height: 100%;
    position: absolute;
    border-bottom: 25px solid #fff;
    border-right: 5px solid #fff;
    border-top: 27px solid #fff;
    border-left: 20px solid transparent;
    right: 0;
    top: 0
}

section.ports-contents table thead th:nth-child(1)::after {
    border-bottom: 25px solid #fe706f;
    border-right: 2px solid #fe706f;
    border-top: 27px solid #fe706f;
}

section.ports-contents table thead th:nth-child(2)::after {
    border-bottom: 25px solid #924980;
    border-right: 2px solid #924980;
    border-top: 27px solid #924980;
}

section.ports-contents table thead th:nth-child(3)::after {
    border-bottom: 25px solid #4d4052;
    border-right: 2px solid #4d4052;
    border-top: 27px solid #4d4052;
}

section.ports-contents table thead th:nth-child(4)::before,
section.ports-contents table thead th:nth-child(4)::after {
    border: none;
}



/* -------------- Product Details Page ----------------- */


/* -------------- Product Details Header ----------------- */


header.product-details{
    background: linear-gradient(0deg, rgb(246, 23, 49) 0%, rgb(140, 32, 156) 100%);
}

/* -------------- Product Contents ----------------- */

section.product-details-contents .view{
    margin-bottom: 40px;
    height: 326px;
    width: 477px;
    display: block;
    text-align: center;
}
section.product-details-contents .view img{
    width: auto;
    height: auto;
    margin: 20px;
    max-height: 290px;
}
section.product-details-contents .thumbnail li{
    height: 82px;width: 87px;display: block;background: #fff;border: 1px solid #999;text-align: center;margin: 0px 3px 14px 3px;
    border-radius: 5px;
}

section.product-details-contents .thumbnail img{
width: auto;
padding: 15px 0px;
margin: 0 5px;
max-height: 84px;
}
section.product-details-contents .content{
    margin: 20px 0;
}
section.product-details-contents .content h5{
    color: #000;
}
section.product-details-contents .content h6{
    color: #f41734;
}
section.product-details-contents .content p{
    color: #7e7e7e;
}
section.product-details-contents .content hr{
    margin: 10px 0;
}
section.product-details-contents .form-group h6{
    color: #7e7e7e;
}
section.product-details-contents .inputs input[type='radio']{
    display: none;
}
section.product-details-contents .inputs .color{
    width: 18px;height: 18px;
    border-radius: 50%;
    margin: 0 4px;
    position: relative;
    z-index: 9999;
}
section.product-details-contents .inputs .color.select::after{
    content: '';
    width: 24px;height: 24px;
    position: absolute;
    z-index: -111;
    border-radius: 50%;
    border: 1px solid #3d4d6b;
    left: -3px;
    top: -3px;
}
section.product-details-contents .inputs .color1{background-color: #3d4d6b;}
section.product-details-contents .inputs .color2{background-color: #343434;}
section.product-details-contents .inputs .color3{background-color: #5e82af;}
section.product-details-contents .inputs .color4{background-color: #417591;}
section.product-details-contents .inputs .color5{background-color: #6c7478;}
section.product-details-contents form .box{
    position: relative;
}
section.product-details-contents form select{
    padding: 4px 6px;background-color: transparent;
    color: #7e7e7e;
}
section.product-details-contents form .box i{
    position: absolute;
    right: 0px;
}
section.product-details-contents form .stock p{
    text-align: right;
    font-size: 20px;
    color: #0dbd8d;
}
section.product-details-contents form .stock i{
    width: 20px;
    height: 20px;
    background: #0dbd8d;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    margin-right: 10px;
}
section.product-details-contents .content .button a{
    color: #fff;background: #004c71;
    padding: 0px 60px;
    margin-bottom: 20px
}
section.product-details-contents .content ul{
    padding: 0;
}
section.product-details-contents .content ul li{
    list-style: none;
    color: #2f2f2f;
    line-height: 35px;
}
section.product-details-contents .content ul li i{
    color: #2f2f2f;
    margin-right: 20px;
}

section.product-details-contents p{
    color: #7e7e7e;
}



/* -------------- Relatate Products ----------------- */



section.product-details-contents .slider h6{
    color: #000;
    margin-bottom: 20px;
}

section.product-details-contents .slider .item{
    padding: 30px 20px;
    text-align: center;
    background: #fff;
    border: 1px solid #e9e9e9;
    transition: 1s;
}
section.product-details-contents .slider .item img{
    width: 100px;
    margin: auto;
}
section.product-details-contents .slider .item p span{
    font-size: 18px;
    color: #474747;
    display: block;
    margin-top: 10px;
}
section.product-details-contents .slider .item p{
    color: #474747;
    text-align: center;
    margin: 10px;
}
section.product-details-contents .slider .item h6{
    color: #f41734;
    margin-bottom: 10px;
}
section.product-details-contents .slider .item .bottom{
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
}
section.product-details-contents .slider .item .bottom form{
    width: 50%;
    padding: 5px 10px;
}
section.product-details-contents .slider .item .bottom .button{
    width: 50%;
    padding: 5px 10px;
}
section.product-details-contents .slider .item .bottom .button a {
    border: 1px solid #004c71;
    border-radius: 30px;
    background: #fff;
    padding: 2.5px;
    color: #004c71;
    display: block;
    transition: 1s;
}

section.product-details-contents .slider .item .bottom .button a:hover {
    background: #004c71;
    color: #fff;
}

section.product-details-contents .slider .item .bottom input {
    width: 100%;
    border-radius: 30px;
    border: 1px solid #474747;
    color: #474747;
}

section.product-details-contents .slider .product-slide {
    background-color: transparent;
}


section.product-details-contents .slider .product-slide .owl-dots {
    display: none;
}

section.product-details-contents .slider .product-slide {
    position: relative;
}

section.product-details-contents .slider .product-slide .owl-next,
section.product-details-contents .slider .product-slide .owl-prev {
    position: absolute;
    top: 50%;
    color: #474747;
    background-color: transparent;
    transform: translateY(-50%);
}

section.product-details-contents .slider .product-slide .owl-prev {
    left: -35px;
}

section.product-details-contents .slider .product-slide .owl-next {
    right: -35px;

}

section.product-details-contents .slider .product-slide .owl-prev i,
section.product-details-contents .slider .product-slide .owl-next i {
    color: #474747;
    font-size: 40px;
}

section.product-details-contents .slider .product-slide .item:hover {
    background-color: #00adf1;
}

section.product-details-contents .slider .product-slide .item:hover p,
section.product-details-contents .slider .product-slide .item:hover p span {
    color: #fff;
    transition: 1s;
}



/* -------------- Product Listing Page ----------------- */


/* -------------- Product Listing Header ----------------- */



header.product-listing{
    background-image: url(../image/about-us-banner.png), linear-gradient(to top, rgb(118, 44, 255) 0%, rgb(64, 51, 255) 100%);
}


/* -------------- Product Listing Contents ----------------- */


section.product-listing-contents input {
    color: #000;
    margin: 0;

}


/* -------------- Number Input Design ----------------- */

.number-wrapper input {
    width: 100%;
    border: 1px solid #999;
    padding: 2px 2px 2px 15px;
    border-radius: 30px;
}

.number-wrapper {
    position: relative;
    border-radius: 40px;
}

.number-wrapper:after,
.number-wrapper:before {
    position: absolute;
    right: 1px;
    width: 25px;
    background: #fff;
    color: #000;
    height: 13px;
    pointer-events: none;
    font-size: 14px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 19px;

}
.number-wrapper:after {
    top: -3.5px;
    content: "\f0d8";
    border-top-right-radius: 100%;
}

.number-wrapper:before {
    line-height: 3px;
    top: 10px;
    content: "\f0dd";
    border-bottom-right-radius: 100%
}


/* -------------- Product Listing Col-3 ----------------- */


section.product-listing-contents .categories{
    border: 1px solid #e9e9e9;
}
section.product-listing-contents .categories h5,
section.product-listing-contents .brands h5{
    color: #00adf1;
    font-size: 20px;
    padding: 10px;
    margin: 0;
    border-bottom: 1px solid #e9e9e9;
    background: #fff;
}
section.product-listing-contents .categories ul{
    list-style: none;padding: 0;
    margin-bottom: 0;
}
section.product-listing-contents .categories ul li{
    margin: 0;padding: 0;
    border-bottom: 1px solid #e9e9e9;
}
section.product-listing-contents .categories ul li a{
    color: #7f7f7f;
    font-size: 14px;
    padding: 10px;
    display: flex;
    background: #fff;
    width: 100%;
    align-items: center;
}

section.product-listing-contents .categories ul li.active a{
    color: #004c71;
}
section.product-listing-contents .categories ul li a i{
    color: #7f7f7f;
    margin-left: auto;

}
section.product-listing-contents .col-md-3 h6{
    color: #000;
    padding: 20px 0;
    margin: 0;
}
section.product-listing-contents .brands{
    border: 1px solid #e9e9e9;
}
section.product-listing-contents .brands ul{
    padding: 0;margin: 0;
}
section.product-listing-contents .brands ul li {
    padding: 10px;
    border-bottom: 1px solid #e9e9e9;
    background: #fff;
    width: 100%;display: block
}
section.product-listing-contents .custom-control.custom-checkbox input{
}
section.product-listing-contents .custom-control.custom-checkbox label{
    margin-left: 25px;
    color: #7f7f7f;
    font-size: 14px;
    cursor: pointer;
}
section.product-listing-contents .categories ul li a:hover,
section.product-listing-contents .brands ul li label:hover{
    color: #004c71;
    transition: .5s;
}



/* -------------- Product Listing Items ----------------- */


section.product-listing-contents .item{
    padding: 15px 10px 10px;
    text-align: center;
    background: #fff;
    transition: 1s;
    border: 1px solid #e9e9e9;
}
section.product-listing-contents .item img{
    width: 100px;
    margin: auto;
    min-height: 100px;
max-height: 100px;
}
li{color: #7e7e7e;}
section.product-listing-contents .item p span{
    font-size: 18px;
    color: #7f7f7f;
    display: block;
    margin-top: 10px;
}
section.product-listing-contents .item p{
    color: #7f7f7f;
    text-align: center;
    margin: 10px;
}
section.product-listing-contents .item h6{
    color: #f41734;
    margin-bottom: 10px;
}
section.product-listing-contents .item .bottom{
    display: none;
    justify-content: space-around;
    margin-top: 15px;
}
section.product-listing-contents .item .bottom form{
    width: 50%;
    padding: 5px 10px;
}
section.product-listing-contents .item .bottom .button{
    width: 50%;
    padding: 5px 10px;
}
section.product-listing-contents .item .bottom .button a {
    border: 1px solid #004c71;
    border-radius: 30px;
    background: #fff;
    padding: 2.5px;
    color: #004c71;
    display: block;
    transition: 1s;
}

section.product-listing-contents .item .bottom .button a:hover {
    background: #004c71;
    color: #fff;
}

section.product-listing-contents .item .bottom input {
    width: 100%;
    border-radius: 30px;
    border: 1px solid #999;
    color: #7f7f7f;
}


section.product-listing-contents .item:hover{
    background: #00adf1;
}


section.product-listing-contents .item:hover p,
section.product-listing-contents .item:hover p span {
    color: #fff;
    transition: 1s;
}

section.product-listing-contents .filter-style{
    margin-bottom: 10px;
}
section.product-listing-contents .filter-style p{
    color: #7f7f7f;
}
section.product-listing-contents .filter-style .box{
    position: relative;
    margin-right: 15px;
}
section.product-listing-contents .filter-style .box select{
    padding: 3px 25px 5px 15px;
    border: 1px solid #e9e9e9;
    border-radius: 30px;
    color: #7f7f7f;
    font-size: 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
section.product-listing-contents .filter-style .box select option{
    color: #7f7f7f;
}
section.product-listing-contents .filter-style .box::after{
    content: "\f107";
    position: absolute;
    right: 12px;
    color: #7f7f7f;
    pointer-events: none;
    font-size: 14px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    top: 6px;
}
section.product-listing-contents .filter-style .button{
 justify-content: flex-start;
    display: flex;
}
section.product-listing-contents .filter-style .button  i{
    padding: 7px 12px;
    display: block;
    background: #fff;
    color: #7f7f7f;
    border: 1px solid #e9e9e9;
}
section.product-listing-contents .filter-style .button .grid i{
    padding-left: 15px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
section.product-listing-contents .filter-style .button .list i{
    padding-right: 15px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}





/* -------------- Smart Agriculture Page ----------------- */


/* -------------- Agriculture Header ----------------- */





header.agriculture{
    background-image: url(../image/about-us-banner.png), linear-gradient(58deg, rgb(7, 16, 33) 0%, rgb(15, 52, 61) 100%);
}



/* -------------- Agriculture Contents ----------------- */



section.agriculture-content p{
    color: #4b4b4b;
    margin-bottom: 25px;
}
section.agriculture-content h6{
    color: #1c1c1c;
    margin-bottom: 20px;
}
section.agriculture-content ul{
    padding: 0;margin: 0;
    list-style: none;
}
section.agriculture-content ul li{
    color: #4b4b4b;
    font-size: 14px;
    margin: 5px 0;
}
section.agriculture-content ul li i{
    color: #4b4b4b;
    margin-right: 10px;
}


/* -------------- Agriculture feature ----------------- */


section.feature h5{
    font-size: 20px;
}



/* -------------- Smart Energy Page ----------------- */


/* -------------- Energy Header ----------------- */



header.energy{
    background-image: url(../image/about-us-banner.png), linear-gradient(to top, rgb(118, 44, 255) 0%, rgb(64, 51, 255) 100%);
}


/* -------------- Energy Contents ----------------- */


section.energy-content p{
    color: #4b4b4b;
}
section.energy-content .sections{
    margin: 0;padding: 0;
}
section.energy-content .sections row{
    margin: 0;padding: 0;
    width: 100%;
}
section.energy-content .sections row .col-md-4{
    margin: 0;padding: 0;
    height: 100%;
}
section.energy-content .sections .col-md-4:nth-child(2){
    padding: 0 3px !important;
}
section.energy-content .sections .col-md-4:nth-child(1) .content{
    background: #ff7170;
}
section.energy-content .sections .col-md-4:nth-child(2) .content{
    background: #23bfb2;
    margin-top: 0px;
}
section.energy-content .sections .col-md-4:nth-child(3) .content{
    background: #a56d9c;
    margin-top: 0px;
}
section.energy-content .sections .content{
    padding:  20px;
    height: 100%;
}
section.energy-content .sections ul{
    padding: 0 16px;
    margin: 0;
}
section.energy-content .sections li,
section.energy-content .sections p{
    color: #fff;
    font-size: 14px;
}
section.energy-content .bottom{
    margin-top: 60px;
}
section.energy-content .bottom h6{
    color: #474747;
}
section.energy-content .bottom img{
    max-width: 500px;
    margin: 30px auto;
    display: block;
}
section.energy-content .bottom .bttn{
    margin: 30px 0px;
}
section.energy-content .bottom .bttn a{
    background: #00adf1;
    padding: 10px 40px;
    border-radius: 30px;
    color: #fff;
    transition: 1s;
    margin: 0;
}
section.energy-content .bottom .bttn a:hover{
    background: #004c71;
}



/* -------------- Energy Image Text Position ----------------- */


.image-content.ani{
    position: relative;
    max-width: 890px;
    margin: auto;
}
.image-content.ani span{
    position: absolute;
    color: #474747;
    font-size: 1.6vw;
    text-align: center;
    line-height: 2.1vw;
}
.image-content.ani .e1{
    top: 15.1%;
    right: 77.1%;
}
.image-content.ani .e2{
    top: 36.9%;
    right: 84.4%;
}

.image-content.ani .e3{
    top: 56.9%;
    right: 83.1%;
}

.image-content.ani .e4{
    top: 80.1%;
    left: 39.2%;
}

.image-content.ani .e5{
    top: 58.9%;
    left: 72.5%;
}

.image-content.ani .e6{
    top: 36.5%;
    left: 72.5%;
}

.image-content.ani .e7{
    top: 36.9%;
    left: 8.6%;
}

.image-content.ani .e8{
    top: 9.7%;
    left: 76%;
}

.image-content.ani .e9{
    top: 44.4%;
    left: 41.4%;
    font-size: 2.7vw;
    line-height: 3.7vw;
    font-family: century-gothic-b;
    color: #00adf1;
}



/* -------------- Smart Industry Page ----------------- */


/* -------------- Industry Header ----------------- */


header.industry{
    background-image: url(../image/about-us-banner.png), linear-gradient(0deg, rgb(246, 23, 49) 0%, rgb(140, 32, 156) 100%);
}



/* -------------- Industry Header ----------------- */



section.industry-contents p{
    color: #4b4b4b;
    font-size: 14px;
}
section.industry-contents h5{
    text-align: center;
    color: #000;
    padding-top: 20px;
}
section.industry-contents h6{
    color: #00adf1;
    text-align: center;
    font-size: 30px;
    margin-top: 30px;
    margin-bottom: 0;
}

section.industry-contents .s-solution p{
   line-height: 30px;
font-size: 16px;
}


/* -------------- Industry Image Text Position ----------------- */


.industry-one{
    position: relative;
}
.industry-one span{
    position: absolute;
    color: #181818;
    font-size: 1.4vw;
}
.industry-one .i1{
    top: 19.5%;
    left: 4.8%;
}
.industry-one .i2{
    top: 45.8%;
    left: 12.1%;
}
.industry-one .i3{
    top: 65.6%;
    left: 16.1%;
}
.industry-one .i4{
    top: 90.8%;
    left: 43.5%;
}
.industry-one .i5{
    right: 23.7%;
    top: 65.6%;
}
.industry-one .i6{
    top: 45.7%;
    right: 7.4%;
}
.industry-one .i7{
    top: 19.4%;
    right: 9.6%;
}
.industry-one .i8 {
    top: 14.2%;
    right: 40.6%;
    width: 19.2%
}


.industry-two{
    position: relative;
}
.industry-two strong{
    position: absolute;
    color: #181818;
    text-align: center;
    font-size: 1.5vw;
}
.industry-two span{
    position: absolute;
    color: #fff;
    font-size: 1.3vw;
}

.industry-two .in1{
    top: 18.7%;
    left: 16.8%;
}
.industry-two .in2{
    top: 40.7%;
    left: 13.9%;
}
.industry-two .in3{
    top: 61.9%;
    left: 16.5%;
}
.industry-two .in4{
    top: 18.9%;
    right: 17.1%;
}
.industry-two .in5{
    top: 40.7%;
    right: 13.9%;
}
.industry-two .in6{
    top: 62.3%;
    right: 18.3%;
}
.industry-two .inb1{
    top: 3%;
    left: 8.4%;
}
.industry-two .inb2{
    top: 3%;
    right: 8%;
}
.industry-two .inb3{
    bottom: 16%;
    left: 8.2%;
}
.industry-two .inb4{
    bottom: 16%;
    right: 8.2%;
}
.industry-two .inb5{
    bottom: 2.6%;
    left: 44.6%;
}
.industry-two .inb6{
    top: 30.8%;
    left: 47.9%;
}
.industry-two .inb7{
    top: 49.1%;
    left: 44.3%;
}




.industry-three{
    position: relative;
    max-width: 992px;
    margin: auto;
}
.industry-three span{
    color: #fff;
    position: absolute;
    font-size: 1.9vw;
    text-align: center
}
.industry-three .s1{
    top: 26%;
    left: 44.3%;
}
.industry-three .s2{
    top: 36.2%;
    left: 44.8%;
}
.industry-three .s3{
    top: 47%;
    left: 38.1%;
}
.industry-three .s4{
    top: 58.5%;
    left: 43.8%;
}
.industry-three .s5{
    top: 69.1%;
    left: 45.1%;
}
.industry-three .s6{
    top: 17.4%;
    left: 70.5%;
    font-size: 1.6vw;
    color: #474747;
}
.industry-three .s7{
    font-size: 1.6vw;
    top: 47.2%;
    left: 76%;
    color: #474747;
}



/* -------------- Smart Airport Page ----------------- */


/* -------------- Airport Header ----------------- */




header.airport{
     background-image: url(../image/about-us-banner.png), linear-gradient(58deg, rgb(7, 16, 33) 0%, rgb(15, 52, 61) 100%);
}



/* -------------- Airport Contents ----------------- */



section.airport-contents p{
    color: #4b4b4b;
    font-size: 16px;
}



/* -------------- Airport feature ----------------- */


section.airport-contents .airport-feature .top p{
    text-align: center
}
section.airport-contents .airport-feature .top h5{
    text-align: center;
    color: #000;
    padding: 20px;
    margin: 0;
}
section.airport-contents .airport-feature .content{
    padding: 20px;
    margin-bottom: 20px;
    max-width: 330px;
    transition: 1s;
}
section.airport-contents .airport-feature .content img{
    width: 100px;
    margin: auto;
    display: block;
}


section.airport-contents .airport-feature .col-md-4{
    display: flex;
    justify-content: center;
}
section.airport-contents .airport-feature .content h6{
    color: #1d1d1d;
    text-align: center;
    margin: 15px 0;
}
section.airport-contents .airport-feature .content p{
    font-size: 14px;
    text-align: center;
}
section.airport-contents .airport-feature .content:hover{
    background: rgb(15, 52, 61);
}
section.airport-contents .airport-feature .content:hover p,
section.airport-contents .airport-feature .content:hover h6{
    color: #fff;
    transition: 1s;
}
section.airport-contents .airport-feature  .bottom h5{
    color: #1d1d1d;
    text-align: center;
}



/* -------------- Airport Contact Now ----------------- */



section.contact-now.airport{
    background-image: linear-gradient(-50deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
    background-image: -moz-linear-gradient(-50deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
    background-image: -webkit-linear-gradient(-50deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
    background-image: -ms-linear-gradient(-50deg, rgb(237, 94, 78) 1%, rgb(253, 202, 91) 100%);
}



/* -------------- Airport Image Text Position ----------------- */



.analytics .middle{
    position:relative;
}

.analytics .middle strong{
    position: absolute;
    color: #202020;
    z-index: 1111;
    font-size: 1.5vw;
}
.analytics .middle span{
    position: absolute;
    color: #fff;
    z-index: 99999;
    text-align: center;
    font-size: 0.95vw;
    line-height: 1.64vw;
}
.analytics .middle .mobility{
    top: 2.8%;
    left: 44%;
}
.analytics .middle .data{
    top: 46.8%;
    right: 84.1%;
}
.analytics .middle .infrastructure{
    left: 81%;
    top: 47%;
}
.analytics .middle .technology{
    bottom: 4%;
    left: 40.1%;
}
.analytics .middle .r-text{
    top: 14.5%;
    left: 43.7%;

}
.analytics .middle .b-text{
    top:43.7%;
    left: 25.3%
}
.analytics .middle .db-text{
    top:42.8%;
    right: 28%
}
.analytics .middle .a-text{
    bottom: 19.8%;
    left: 42.9%;
}