/*!
Theme Name: ict-system
Theme URI: http://underscores.me/
Author: Navik0391
Author URI: http://underscores.me/
Description: ICT SYSTEM TEMPLATE
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ict-system
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ict-system is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@font-face {
	font-family: Play;
	font-style: normal;
	font-weight: 400;
	src: url(assets/css/fonts/Play-Regular.ttf);
	font-display: swap;
}
@font-face {
	font-family: Play-Bold;
	font-style: normal;
	font-weight: 600;
	src: url(assets/css/fonts/Play-Bold.ttf);
	font-display: swap;
}
@font-face {
	font-family: Nunito;
	font-style: normal;
	font-weight: 400;
	src: url(assets/css/fonts/Nunito-Regular.ttf);
	font-display: swap;
}
@font-face {
	font-family: Nunito-Bold;
	font-style: normal;
	font-weight: 600;
	src: url(assets/css/fonts/Nunito-Bold.ttf);
	font-display: swap;
}
@font-face {
	font-family: Nunito-Italic;
	font-style: normal;
	font-weight: 400;
	src: url(assets/css/fonts/Nunito-Italic.ttf);
	font-display: swap;
}
* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
body {
	font-family: Nunito, sans-serif;
	font-size: 1rem;
	background-color: #ffffff;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Play, sans-serif;
}
img {
	max-width: 100%;
	height: auto;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}
.alignright {
	float: right;
}
.alignleft {
	float: left;
}
.post-thumbnail img {
	width: 100%;
	height: auto;
}
.form-control {
	border-color: #00b188;
}
.form-control.wpcf7-not-valid {
	border-color: #dc3545;
}
/*contact form 7*/
.wpcf7-list-item, .wpcf7-response-output {
	margin-left: 0 !important;
}
/*end__contact form 7*/
.section-title {
	position: relative;
	padding-left: 10px;
	margin: 0 0 1rem 0;
	/*margin-top: 3rem;*/
}
.section-title:before {
	content: '';
	position: absolute;
	left: 0;
	display: block;
	width: 4px;
	height: 100%;
	background-color: #00b188;
}
.content-title {
	font-size: 1.6rem;
}
.arrow-down {
	font-size: 3rem;
	display: block;
	margin: 0 auto;
}
/* header */
.header .logo img {
	max-width: 200px;
}
.header .navbar-nav .nav-link{
	color: var(--bs-dark);
	font-size: 1.1rem;
}
.header .navbar-nav .nav-link:hover ul {
	display: block !important;
}
.header .navbar-nav .nav-item:hover .nav-link, .header .navbar-nav .nav-item.active .nav-link {
	color: var(--bs-primary);
}
.header .navbar-nav .nav-item:hover::before, .header .navbar-nav .nav-item.active::before {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	margin: 0 auto;
	background-color: var(--bs-primary);
	animation-name: nav-link-border-top;
	animation-duration: 250ms;
}
@keyframes nav-link-border-top {
	from {width: 0;}
	to {width: 100%;}
}
.header .navbar-text a{
	color: var(--bs-gray-dark);
	font-size: 1rem;
	text-decoration: none;
	transition: color 250ms ease;
}
.header .navbar-text a:hover{
	color: var(--bs-primary);
}
#header-navbar {
	transition: all 500ms ease-in;
}
.header .navbar {
	transition: top 0.3s;
}
.navbar-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.navbar-nav ul:after {
	content: "";
	display: table;
	clear: both;
}
.navbar-nav a {
	text-decoration: none;
	display: block;
	transition: .3s linear;
}

.submenu {
	position: absolute;
	z-index: 5;
	min-width: 200px;
	background: white;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 0.25rem;
	visibility: hidden;
	opacity: 0;
	transform-origin: 0% 0%;
	transform: rotateX(-90deg);
	transition: .3s linear;
}
.submenu li {
	position: relative;
}
.submenu li a {
	font-size: 1rem !important;
	color: var(--bs-dark) !important;
}
.submenu li a:hover {
	background: #f8f9fa;
}
.submenu li a:active {
	background: #e9ecef;
}
.submenu li.active>a {
	background: var(--bs-gray);
}
.submenu .submenu {
	position: absolute;
	left: 100%;
	top: -1px;
	transition: .3s linear;
}
nav li:hover > .submenu {
	transform: rotateX(0deg);
	visibility: visible;
	opacity: 1;
}
/* end__header */
/* main */

.site-main {
	padding: 2rem 0;
}
.site-main .entry-header .entry-title {
	font-size: 1.8rem;
}
.main {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
.main .container {
	flex: 1 0 auto;
}
.main .entry-header .entry-title {
	padding: 2rem 0 0 0;
}
.main .card .card-body a h2{
	font-size: 1.5rem;
}
.main p {
	word-break: break-word;
}
.main section {
	padding: 2rem 0;
}
.main .banner-section {
	position: relative;
	max-height: 100vh;
	overflow: hidden;
	padding-top: 0;
}

.main .banner-section .banner-wrapper {
	padding-top: 14vh;
	position: absolute;
	left: 0;
	right: 0;
}

#particles-js {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.advantage-section .card a, .service-solution-section .card a{
	color: var(--bs-dark);
	text-decoration: none;
	transition: color 100ms ease-in;
}
.service-solution-section .card a {
	color: white;
}
.advantage-section .card a:hover {
	color: var(--bs-primary);
}
.advantage-section .card img {
	margin-left: 1rem;
	transition: all 100ms ease-out;
}
.service-solution-section .card img{
	display: block;
	margin: 0 auto;
}
.service-solution-section .card a:hover {
	transition: all 250ms ease;
	background-color: #00b188;
}
.service-solution-section .card img,
.post .card img{
	transition: all 100ms ease;
}
.advantage-section .card a:hover img,
.post .card a:hover img{
	transform: scale(1.1,1.1);
}

/*.post .card .post-thumbnail img{
	max-width: 350px;
	height: auto;
}*/
.request-section .wpcf7 label {
	display: block;
}
.request-section .paper-plane-container {
	position: relative;
	display: flex;
	justify-content: center;
	align-content: center;
	height: 80%;
	overflow: hidden;
}
.request-section .paper-plane-container .paper-plane {
	position: absolute;
	animation-name: paper-plane-move;
	animation-duration: 150ms;
	animation-iteration-count: infinite;
}
@keyframes paper-plane-move {
	from {
		top: 91px;
		left: 29.5%;
	}
	to {
		top: 90px;
		left: 30%;
	}
}

.request-section .paper-plane-container .paper-plane-send {
	position: absolute;
	top: 91px;
	left: 29.5%;
	opacity: 0;
	animation-name: paper-plane-send;
	animation-duration: 1000ms;
}
@keyframes paper-plane-send {
	from {
		top: 91px;
		left: 29.5%;
		opacity: 1;
	}
	to {
		top: 0;
		left: 100%;
		opacity: 0;
	}
}
.request-section .paper-plane-container .wind-container {
	position: absolute;
	top: 20%;
	height: 200px;
	width: 400px;
}

.request-section .paper-plane-container .wind-container-send {
	position: absolute;
	top: 20%;
	height: 200px;
	width: 400px;
	opacity: 0;
	animation-duration: 1000ms;
	animation-name: wind-send;
}
@keyframes wind-send {
	from {
		top: 15%;
		left: 15%;
		opacity: 1;
	}
	to {
		top: -10%;
		left: 90%;
		opacity: 0;
	}
}

.request-section .paper-plane-container .wind-container .wind1:before,
.request-section .paper-plane-container .wind-container .wind2:before,
.request-section .paper-plane-container .wind-container .wind3:before,
.request-section .paper-plane-container .wind-container .wind4:before {
	content: '';
	display: block;
	width: 1px;
	height: 50px;
	position: absolute;
	background-color: #00b188;
	transform: rotate(70deg);
	animation-duration: 200ms;
	animation-iteration-count: infinite;
}

.request-section .paper-plane-container .wind-container .wind1:before {
	top: 30%;
	left: 10%;
	animation-name: wind1-move;
}
@keyframes wind1-move {
	from {
		top: 30%;
		left: 10%;
		height: 50px;
	}
	to {
		top: 60%;
		left: -10%;
		height: 1px;
	}
}
.request-section .paper-plane-container .wind-container .wind2:before {
	top: 40%;
	left: 20%;
	transform: rotate(68deg);
	animation-name: wind2-move;
}
@keyframes wind2-move {
	from {
		top: 40%;
		left: 20%;
		height: 50px;
	}
	to {
		top: 90%;
		left: -20%;
		height: 1px;
	}
}
.request-section .paper-plane-container .wind-container .wind3:before {
	top: 60%;
	left: 20%;
	height: 100px;
	transform: rotate(68deg);
	animation-name: wind3-move;
}
@keyframes wind3-move {
	from {
		top: 50%;
		left: 30%;
		height: 50px;
	}
	to {
		top: 80%;
		left: 10%;
		height: 1px;
	}
}
.request-section .paper-plane-container .wind-container .wind4:before {
	top: 80%;
	left: 20%;
	height: 100px;
	transform: rotate(65deg);
	animation-name: wind4-move;
}
@keyframes wind4-move {
	from {
		top: 65%;
		left: 35%;
		height: 100px;
	}
	to {
		top: 105%;
		left: 20%;
		height: 1px;
	}
}
#send-done{
	font-size: 14rem;
	color: #00b188;
	transition: all 200ms ease;
}
.contact-form label {
	display: block;
}
/* end__main */
/* sidebar */
.side_navigation {
	position: fixed;
	bottom: 50%; left: 10px;
	display: inline-table;
	margin: auto;
}
.side_navigation .nav {
	display: block;
}
.side_navigation .nav li {
	position: relative;
}
.side_navigation .nav li:before {
	content: "";
	position: absolute;
	top: 5px;
	background: #00b188;
	border-radius: 50%;
	display: block;
	width: 16px;
	height: 16px;
}
.side_navigation .nav li:after {
	content: "";
	position: absolute;
	top: 20px;
	left: 7px;
	background: #00b188;
	border: 1px solid transparent;
	display: block;
	height: 10px;
}
.side_navigation .nav li:last-child::after{border: 0; background: transparent;}
.side_navigation .nav li a {
	opacity: 0;
	padding: 0 1rem 0 0;
	margin-left: 1.7rem;
	transition: all 200ms ease;
}
.side_navigation .nav li.active:before {
	background: transparent;
	border: 1px solid #00b188;
}
.side_navigation .nav li:hover a {
	border:1px solid #00b188;
	border-radius: 10px;
	opacity: 1;
}
.side_navigation .nav li:hover::before {
	background: transparent;
	border: 1px solid #00b188;
}
/* end__sidebar */
/* footer */
.footer {
	flex: 0 0 auto;
	color: var(--bs-gray);
}
.footer .dropdown-toggle::after {
	content: '';
	border: 0;
}
/* end__footer */

/* media queries */
@media only screen and (max-width: 1024px) {
	.main .banner-section .banner-wrapper { padding-top: 0; }
	.main .banner-section .banner-wrapper .banner-title { font-size: 1.3rem }
}
@media only screen and (max-width: 823px) {
	.main .banner-section .banner-wrapper { padding-top: 5rem; }
	.main .banner-section .banner-wrapper .banner-description { display: none !important; }
}
@media only screen and (max-width: 812px) {
	.main .banner-section .banner-wrapper { padding-top: 0; }
	.main .banner-section .banner-wrapper .banner-description { display: block !important;}
	.main .banner-section .banner-wrapper .banner-description p { font-size: .8rem; margin-bottom: 0 }
}
@media only screen and (max-width: 768px) {
	/*body {padding-top: 2rem;}*/
	.main .banner-section .banner-wrapper { padding-top: 0 }
	.main .banner-section .banner-wrapper .banner-title { font-size: 1.3rem }
	.main .banner-section .banner-wrapper .banner-description { font-size: .8rem }
	.main .banner-section .banner-wrapper .banner-btn a {
		padding: 0 5px;
	}
	.request-section .paper-plane-container .paper-plane{ padding-right: 20px; }
}
@media only screen and (max-width: 736px) {
	.main .banner-section .banner-wrapper .banner-description { display: block !important; margin-bottom: 0 }

}
@media only screen and (max-width: 731px) {
	.main .banner-section .banner-wrapper { padding-top: 1rem }
	.main .banner-section .banner-wrapper .banner-description { display: block !important; font-size: .8rem }
}
@media only screen and (max-width: 640px) {
	.main .banner-section .banner-wrapper { padding-top: 0 }
	.wpcf7 label{ display: block; }
}
@media only screen and (max-width: 568px) {
	.main .banner-section .banner-wrapper .banner-description p{ margin-bottom: 0 }
}
@media only screen and (max-width: 540px) {
	.main .banner-section .banner-wrapper { padding-top: 5rem }
}
@media all and (max-width: 414px) {
	/*body {padding-top: 3rem;}*/
	.main .banner-section .banner-wrapper { padding-top: 2.5rem; }
	.main .banner-section .banner-wrapper .banner-description { display: none !important; }
	.main section { padding: 0; }
	.main .arrow-down { display: none; }
	.section-title { margin-top: 1rem; }
}
@media all and (max-width: 411px) {
	/*body {padding-top: 5rem;}*/
	.main .banner-section .banner-wrapper { padding-top: 2rem; }
	.main .banner-section .banner-wrapper .banner-description { display: none !important; }
}
@media all and (max-width: 375px) {
	.main .banner-section .banner-wrapper { padding-top: 1rem; }
}
@media all and (max-width: 360px) {
	.main .entry-header .entry-title {padding-top: 0;}
	.main .banner-section .banner-wrapper {padding-top: 0}
	.footer .nav li {width: 50%;}
	.footer .nav li a{padding:0;}
}
@media all and (max-width: 320px) {
	.main .banner-section .banner-wrapper .banner-btn a { padding: 0 2px; }
}