@charset "utf-8";
/* CSS Document */

body {font-family: 'Sigvar Serial', Arial, sans-serif; margin: 0; padding: 0; background-color: #fdfdfd;}

		
#header-outer { width: 100%; padding: 10px /* 25px distance between top and logo */ 0 5px /*distance between logo and menu 25px*/ 0;}
#header-inner {min-width: 685px; max-width: 1280px; margin: 0 auto; width: 75%;}
#header-logo { display: inline; margin-left: 20px;}
#header-logo-no-text { display: none; margin-left: 10px;}
	
.topnav {overflow: hidden; background-color: #1E547B;}
.topnav a {float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 15px;}
.active {background-color: #1E547B; color: white;}
.topnav .icon {display: none;}
.dropdown {float: left; overflow: hidden;}
.dropdown .dropbtn {font-size: 15px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0;}
.dropdown-content {display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a {float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;}
.topnav a:hover, .dropdown:hover .dropbtn {background-color: #72a5c7; color: white;}
.dropdown-content a:hover {background-color: #ddd; color: black;}
.dropdown:hover .dropdown-content {display: block;}

/*****page title start**********/
.strip {background-color: #fff; /* #1E547B padding: 30px 20px;*/ padding-top:5vw; text-align: center;}
.strip  h1 {color:#1E547B; /*or #fff*/ font-size:280%;}
.strip  h2 {color:#1E547B; /*or #fff*/ font-size:250%;}
.strip  h3 {color:#1E547B; /*or #fff*/ font-size:220%;}
.strip  p {color: #000;}
/*****page title end-**********/

.responsive-column-34 { width: 75%; float: left;}
.responsive-column-4 { width: 25%; float: left;}
.responsive-column-3 { width: 33%; float: left;}
.responsive-column-2 { width: 49%; float: left; margin-left: 0px;}


.spacer-100 { height: 100px; width: 100%; clear: both;}
.spacer-50 { height: 50px; width: 100%; clear: both;}
.spacer-25 { height: 25px; width: 100%; clear: both;}
.spacer-15 { height: 15px; width: 100%; clear: both;}
.spacer-10 { height: 10px; width: 100%; clear: both;}
.spacer-5 { height: 5px; width: 100%; clear: both;}

.demo {background-color:  #f15a24; border: none; color: white; padding: 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 4px 2px; cursor: pointer; z-index:-10;}
.demo1 {border-radius: 15px;}

.hero {text-align: center; padding: 40px;}
		
.tiles {display: grid; grid-template-columns: 25% 25% 25% 25%; width: 60%; margin:auto;  gap: 20px; /*gap between each column */padding-top:1vw; /*padding: 20px;*/}
.tile {background-color: white; border: 1px solid #ddd; border-radius: 10px; padding: 20px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.tile h3 {margin-top: 10px;}

.content-inner { min-width: 685px; /*max-width: 1280px;*/ margin: 0 auto;/* width: 90%;*/}
.content-inner h2 {margin: 0 auto; color: #1E547B;}
.content-inner p {margin: 0 auto; padding-bottom: 2vw;}
		
.demo {background-color:  #f15a24; border: none; color: white; padding: 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 4px 2px; cursor: pointer; z-index:-10;}
.demo1 {border-radius: 15px;}



h1, h2, h3, h4, h5, h6 { /*margin: 0 20px 0 20px; padding-left: 20px; padding-top: 20px; padding-right: 20px;*/ padding: 0 20px 0 20px; margin-bottom: -10px; color:#1E547B;}
/*p {/* padding: 20px 20px 0 20px; margin-bottom: 10px; color: #000;}*/

/***wave starts****/
.thewave {position: relative;} 
.text-block {position: absolute; bottom: 30%; left: 15%; width:40%; color: white; padding-left: 20px; padding-right: 20px;}	
/***wave ends****/

/*testimonials start*/

.testimonial-wrapper {overflow: hidden; background: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); padding: 20px 0; position: relative; width: 100%; max-width: 1200px; margin: 0 auto;}
.testimonial-track {display: flex; width: max-content; animation: scroll 40s linear infinite; }
.testimonial-wrapper:hover .testimonial-track {animation-play-state: paused;}
.testimonial {flex: 0 0 auto; width: 300px; margin: 0 20px; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 15px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);}
.testimonial p {font-size: 14px; color: #333;}
.testimonial strong {display: block; margin-top: 10px; font-weight: bold; color: #d83a3a;}
@keyframes scroll {0% { transform: translateX(0); } 100% { transform: translateX(-50%); }}
/*testimonials end*/

/******page Intro start***********/
* {box-sizing: border-box;}
.flex-container {display: flex; flex-direction: row; font-size: 30px; text-align: center; margin: 0 auto; width: 75%;}
.flex-item-left {/*background-color: #f1f1f1;*/ padding: 10px; flex: 50%;}
.flex-item-right { padding: 20px; flex: 50%;}
/******page intro end***********/

/****start admin solutions*****/	  
.solutions-container {padding: 3rem 1rem; max-width: 1600px; margin: auto;}
.solutions-tile-row {display: flex; flex-wrap: wrap; gap: 2rem; }
.solutions-tile {background: white; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.05); flex: 1 1 48%; display: flex; overflow: hidden; transition: transform 0.3s ease;}
.solutions-tile:hover {transform: translateY(-5px);}
.solutions-tile:nth-child(even) {flex-direction: row-reverse;}
.solutions-tile-content {flex: 1; padding: 2rem; }
.solutions-tile h3 {margin-top: 8%;  color: #1E547B; font-size: 225%;}
.solutions-tile p {font-size: 1rem; line-height: 1.6; color: #555;}
.solutions-tile-hero {width: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #777;   font-style: italic; padding: 10vw;}
/****end admin solutions*****/	

/******Managed Services start***********/
.section {padding: 40px 60px;}
.section h2 {color: #1E547B; margin-bottom: 20px;}
.service-row {display: flex; align-items: flex-start; margin-bottom: 30px; gap: 30px;}
.service-card {flex: 1; background: white; border: 1px solid #ddd; border-left: 5px solid #1E547B; padding: 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);}
.service-card h3 {color: #1E547B; font-size:225%; margin-top: 0; display: flex; align-items: center;}
.service-card h3 i {margin-right: 10px;}
.product-image {flex: 0 0 40%;}
.product-image img {width: 100%; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
/******Managed Services end***********/

/*****about page start***********/
.team-member {}
.team-member h3 {color: #1E547B; padding-bottom:1vw;}
.team-member p {color: #000; padding-bottom:1vw;}
.team-member small {color: #1E547B; padding-bottom:5vw;}
/******about page end***********/

/*****Support page start***********/
.support-section {background-color: white; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);}
.support-section h2 {color: #1E547B;}
.support-section p {line-height: 1.6;}
.support-section a {display: inline-block; margin-top: 10px; color: #1E547B; text-decoration: none; font-weight: bold;}
/*****Support page end***********/

/*****News page***********/
.featured {background-color: white; padding: 30px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 40px;}
.featured h2 {color: #1E547B;}
.featured h2 {color: #1E547B;}
.grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;}
.news-item {background-color: white; padding: 20px; border-left: 5px solid #1E547B; box-shadow: 0 1px 3px rgba(0,0,0,0.08);}
.news-item h3 {margin-top: 0; color: #1E547B;}
.tips {}
.article ul li h3{}
.careers-section {background-color: white; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);}	
/*****News page ends***********/

/*****contact start***********/
form {display: flex; flex-direction: column; width:70%; margin: auto;}
form h2 {padding-bottom: 2vw; margin-left:13vw;}
label {margin-top: 1rem; font-weight: bold; color:#1E547B;}
input, textarea {padding: 0.75rem; border-radius: 5px;  border: 1px solid #ccc;  margin-top: 0.5rem;}
button {margin-top: 1.5rem; padding: 0.75rem; background-color: #1E547B; color: white; border: none; border-radius: 5px; font-size: 1rem; cursor: pointer;}
button:hover {background-color: #21618c;}
/*****contact ends***********/

/*** responsive container start**/	
.res-container-top {flex: 80%; flex-wrap: wrap; text-align: center; padding-top: 7vw;}
.res-container {flex: 80%; flex-wrap: wrap; text-align: center;}
.res-container h1 {color:#1E547B; /*or #fff*/ font-size:280%;}
.res-container h3 {color:#1E547B; /*or #fff*/ font-size:220%;}
.res-container a {padding: 7vw;}
.res-container p {width: 80%; margin: auto; padding-top: 3vW;}
/*** responsive container end**/	

/*********footer starts **********/
* {box-sizing: border-box;}
.footer-row {clear:both; background-color:#1E547B; padding-top: 3vw; color: #fff;}
/* three equal columns that floats next to each other */
.footer-column {float: left; width: 33%; padding-left: 10vw; padding-bottom:3vw; }
/* Clear floats after the columns */
.footer-row:after {content: ""; display: table;  place-items: center; clear: both;}
/* Responsive layout - makes a two column-layout instead of four columns */
/*********footer ends **********/

@media (max-width: 850px/*768px*/) {
.tiles-container {grid-template-columns: repeat(2, 1fr);} /* 2 columns on tablets and small screens */
.topnav.responsive {position: relative;}
.topnav.responsive .icon {position: absolute; right: 0; top: 0;}
.topnav.responsive a {float: none; display: block; text-align: left;}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {display: block; width: 100%; text-align: left;}	
.footer-column  {width: 50%;}
.solutions-tiles-container {grid-template-columns: repeat(2, 1fr);} /* 2 columns on tablets and small screens */	
.solutions-tile {flex-direction: column !important;}
.solutions-tile-hero {width: 100%; height: 200px;}
.flex-container {flex-direction: column;}
.strip {padding-top: 10vw;/*background-color: #fff;*/ /* #1E547B padding: 30px 20px;*/ text-align: center;}
.thewave {position: relative; display: none;} 
}

@media (max-width: 480px) {
.strip {padding-top: 15vw;/*background-color: #fff;*/ /* #1E547B padding: 30px 20px;*/ text-align: center;}
.tiles-container {.grid-template-columns: 1fr; /* 1 column on mobile */}
.solutions-tiles-container {.grid-template-columns: 1fr; /* 1 column on mobile */}
.footer-column  {width: 100%;}
.image-row {padding-bottom:5vw }
.flex-container {flex-direction: column;}
.flex-wrapped {padding-top: 20vw; }
}