@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:3vw; 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; padding-top: 5px;}
/*****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-75 { height: 75px; width: 100%; clear: both;}
.spacer-50 { height: 50px; width: 100%; clear: both;}
.spacer-40 { height: 40px; width: 100%; clear: both;}
.spacer-30 { height: 30px; width: 100%; clear: both;}
.spacer-20 { height: 20px; 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;}

/*********************start**************************/
/*.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; /** border-radius: 10px; **/ padding: 20px; /**padding: 20px;**/ text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.tile h3 {margin-top: 10px;}
/***************end********************************/

.content-inner {width: 90%; align-items: center;}
.content-inner h2 { min-width: 75%; margin: auto; color: #1E547B;}
.content-inner p { min-width: 75%; margin: auto; padding-top: 10px;}
.content-inner ul {}
.content-inner li {width: 100%; padding-left:5%; padding-top: 10px;}

.v1 {border-left: 2px solid grey; height: 120px;}

.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;}

* {box-sizing: border-box;}
.c-container {display: flex; flex-wrap: wrap; width: 80%; margin: auto;}
.c-item-left {text-align: right; padding: 10px; flex: 20%;}
.c-item-right {flex: 80%;}
.c-item-right h2 {text-align: left;}
.c-item-right p {text-align: left;  text-align: justify-all; font-size: 100%;}

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-size: 80%; /*font-weight: bold;*/ color: #333;}
@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: 100%; text-align: center; margin: 0 auto; width: 80%;}
.flex-item-left {padding: 10px; flex: 50%;}
.flex-item-right { padding: 10px; flex: 50%;}
/******page intro end***********/

/******aus owned start***********/
* {box-sizing: border-box;}
.aus-container {display: flex; flex-direction: row; font-size: 100%; text-align: center; margin: 0 auto; width: 80%;}
.aus-item-left {padding: 10px; flex: 50%;}
.aus-item-right { padding: 10px; flex: 50%;}
/******aus owned end***********/

/****start admin solutions*****/	  
.solutions-container {padding: 3rem 1rem; width: 100%; 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; text-align: center; font-size: 225%;}
.solutions-tile p {text-align: center; font-size: 1rem; line-height: 1.6; color: #555;}
.solutions-tile-hero {width: 100%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #777; font-style: italic; padding: 5%;}
/****end admin solutions*****/	

/******5 row barley start***********/
.itsa-container {display: flex; flex-direction: row; font-size: 100%; text-align: center; margin: 0 auto; width: 90%;}
.itsa-item-1 {padding: 10px; flex: 19%;}
.itsa-item-2 {padding: 10px; flex: 19%;}
.itsa-item-3 {padding: 10px; flex: 19%;}
.itsa-item-4 {padding: 10px; flex: 19%;}
.itsa-item-5 {padding: 10px; flex: 19%;}
/******5 row barley end***********/

/******4 row barley start***********/
.4row-container {display: flex; flex-direction: row; font-size: 100%; text-align: center; margin: 0 auto; width: 90%;}
.4row-item-1 {padding: 10px; flex: 23.3%;}
.4row-item-2 {padding: 10px; flex: 23.3%;}
.4row-item-3 {padding: 10px; flex: 23.3%;}
.4row-item-4 {padding: 10px; flex: 23.3%;}
/******4 row barley end***********/

/******3 row barley start***********/
.3row-container {display: flex; flex-direction: row; font-size: 100%; text-align: center; margin: 0 auto; width: 90%;}
.3row-item-1 {padding: 10px; flex: 32%;}
.3row-item-2 {padding: 10px; flex: 32%;}
.3row-item-3 {padding: 10px; flex: 32%;}
/******3 row barley end***********/

/******Articles 2 row barley start***********/
* {box-sizing: border-box;}
.tworow-container {display: flex; flex-direction: row; width: 80%;text-align: center; margin: 0 auto;}
.tworow-item-left {padding: 10px; flex: 80%;}
.tworow-item-right {padding: 10px; flex: 20%; padding-top: 15%;}
.tworow-item-right p {text-align: center;}
ul.c {/*list-style-type: square;*/ list-style-image: url('../image/star-s-fill.svg');  text-align: left;  padding: 5%;}
/******2 row barley end***********/

/******Managed Services start***********/
.managed-container {display: flex; flex-direction: row; font-size: 100%; text-align: center; margin: 0 auto; width: 90%;}
.managed-item-1 {padding: 10px; flex: 23.3%;}
.managed-item-2 {padding: 10px; flex: 23.3%;}
.managed-item-3 {padding: 10px; flex: 23.3%;}
.managed-item-4 {padding: 10px; flex: 23.3%;}

.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:20px; text-align: left;}
.team-member p {color: #000; width: 90%; padding-top:10px;}
.team-member small {color: #1E547B; padding-bottom:5vw;}
.tp-image-row {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1vw; /* Optional: Adds space between images */ margin:auto;}
.tp-image-row img {max-width: 100%; /* Adjust size as needed */ flex-wrap: wrap;}
/******about 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;}

article ul {}
article li {padding-top:10px; padding-left: 5%; width: 100%;}
article h3 {}
article p {width:100%; }

.tips {}
.tips li {padding-left: 5%; padding-top:10px;}
.tips {}
.tips p { }


* {box-sizing: border-box;}
.flex-container {display: flex; flex-direction: row; }
.flex-item-left {  padding: 10px; flex: 80%;}
.flex-item-right {padding: 10px; flex: 20%; padding-top: 15%;}
ul.c {list-style-type: square; text-align: left;  padding: 5%;}

/*****News page ends***********/
.careers-section {background-color: white; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);}	

/******SUPPORT START***********/
* {box-sizing: border-box;}
.support-container {display: flex; flex-direction: row; text-align: center; margin: 0 auto; width: 90%; padding-left: 5%;}
.support-item-left {padding: 10px; flex: 50%;}
.support-item-right {padding: 10px; flex:50%; padding-top: 15%;}
.support-item-right p {text-align: center;}
ul.c {list-style-type: square; text-align: left;  padding: 5%;}
.v1 {border-left: 2px solid grey; height: 120px;}
/******SUPPORT END***********/


/*****contact start***********/
.contactus { border-radius: 5px; padding: 20px;}
form {display: flex; flex-direction: column; width:90%; margin: 0 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:230%;}
.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**/

/*****CALL TO ACTION starts***********/
.call2action-container {flex: 80%; flex-wrap: wrap; text-align: center;}
/*****CALL TO ACTION ends***********/	

/*********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;}
.support-container {flex-direction: column;}
.support-item-1, .support-item-2, .support-item-3 {flex: 100%;}
.managed-container {flex-direction: column;}
.managed-item-1, .managed-item-2, .managed-item-3, .managed-item-4 {flex: 100%;}
.itsa-container {flex-direction: column;}
.itsa-item-1, .itsa-item-2, .itsa-item-3, .itsa-item-4 .itsa-item-5 {flex: 100%;}
.2row-container {flex-direction: column;}
.2row-item-1, .2row-item-2 {flex: 100%;}
.strip {padding-top: 10vw;/*background-color: #fff;*/ /* #1E547B padding: 30px 20px;*/ text-align: center;}
.thewave {position: relative; display: none;} 
.v1 {border-left: 0; height: 0;}
.c-item-right, .c-item-left {flex: 100%;}	
.c-item-left img{align:center;}
.flex-container {flex-direction: column;}
}

@media (max-width: 480px) {
.strip {padding-top: 10vw;/*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; }
.support-container {flex-direction: column;}
.support-item-1, .support-item-2, .support-item-3 {flex: 100%;}

.managed-container {flex-direction: column;}
.managed-item-1, .managed-item-2, .managed-item-3, .managed-item-4 {flex: 100%;}
.v1 {border-left: 0; height: 0;}
}