@import url('libraries/font.css');
@import url('libraries/normalize.css');
@import url('libraries/myreset.css');

/* Custom Selectors --------------------------------------------*/
.flex {display: flex;}
.around {justify-content: space-around;}

.show {display: block; visibility: visible;}
.hide {display: none; visibility: hidden;}

.spacer-tiny {margin: 3px 0;}
.spacer-smaller {margin: 10px 0;}
.spacer-small {margin: 15px 0;}
.spacer {margin: 30px 0;}
.spacer-large {margin: 50px 0;}
.spacer-huge {margin: 70px 0;}

.clear         { clear:both; }
.float-left    { float:left; }
.float-right   { float:right; }

.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }

.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }

.large {font-size: 150%;}
.small {font-size: 80%;}

.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }

.no-padding     { padding:0; }
.no-indent      { margin-left:0;padding-left:0; }
.no-bullet      { list-style:none;list-style-image:none; }

.pt175 {padding-top: 175px;}
.pt100 {padding-top: 100px;}
.pt15 {padding-top: 15px;}

.mb150 {margin-bottom: 150px;}
.mb175 {margin-bottom: 175px;}



.detail-text {font-size: 14px;}

.info {color: #0085f2;}
.warn {color: #FFDC00;}
.error { color: #FF4136;}

.debug-red {border: 1px red solid;}
.debug-yellow {border: 1px yellow solid;}
.debug-green {border: 1px green solid;}
.debug-blue {border: 1px blue solid;}

.bg-black {background: #111111;}
.bg-grey {background: #AAA;}
.bg-darkgrey {background: #888;}
.bg-silver {background: #DDD;}

.large {font-size: 150%;}
.link {color: #0059a6; cursor: pointer;}
.link:hover {opacity: .85;}
.bold {font-weight: 600;}
.m15 {margin: 15px;}
.pointer {cursor: pointer;}

.light-text {color: #7f7f7f;}

/* Alpha containers --------------------------------------------*/
html { height: 100%; }
body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.4em;
    color: #59595b;
    overflow-x: hidden;
}
header {
  position: fixed;
  width: 100%;
  z-index: 20;
}
main {
    margin-top: 30px;
    z-index: 5;
}
section {
    z-index: 10;
}
aside {
    z-index: 5;
}
footer {
    background-color: #222;
    z-index: 15;
}


/* Page Layout & Grid --------------------------------------------*/
.page-wrapper {
    margin: 0 auto;
    max-width: 900px;
}

/*WRAP LOADTEMPLATE/LOADPAGE CONTENT*/
.template-wrapper {
    max-width: 1080px;
    margin: auto;
    top: 137px;
    position: absolute;
}



/* Generic Components --------------------------------------------*/
.page-header {
    font-size:28px;
    color: #023047;
    padding-top: 30px;
    padding-bottom: 25px;
    text-align: center;
}

.generic-header {
    font-weight: 600;
    font-size:38px;
    color: #023047;
    padding-top: 30px;
    padding-bottom: 25px;
    text-align: center;
}

.generic-header-sub {
    font-size:18px;
    color: #023047;
    padding-top: 0;
    padding-bottom: 25px;
    text-align: center;
}


.generic-banner {
    height: 450px;
    background-position: bottom center;
    background-size: cover;
    background: rgba(0, 0, 0, .35) url('./images/newbg.png');
    background-blend-mode: darken;

}
.generic-banner-header {
    padding: 5px;
    margin-bottom: 0;
    color: #fff;
    font-weight: 700;
    font-size: 38px;
    letter-spacing: .5px;
    line-height: 1.5em;
    text-shadow: 0 0.1em 0.1em rgba(0,0,0,0.49);
    text-align: center;
}

.generic-banner-sub {
    font-size: 22px;
    margin-top: 0;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 1.5em;
    text-shadow: 0em 0.1em 0.1em rgba(0,0,0,0.49);
    text-align: center;
}

.generic-banner-inner {
    padding-top: 150px;
    max-width: 800px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
}

.hero-banner-inner {
    padding-top: 175px;
    max-width: 800px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
}






.banner-inner {
    max-width: 800px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
}

.cta-box {
    border: 1px solid #d9e1ed;
    background: #eceef4;
    max-width: 925px;
    margin: auto;
    padding-bottom: 2em;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: .2em;
}
.cta-box-header {
    font-size: 23px;
    color: #023047;
    margin-bottom: 10px;
}

.bullet-list {
    color: #333;
    list-style: disc;
    list-style-position: outside;
    list-style-position: inside;
    font-size: 1.2em;
}

.parallax {
    background-image: url('./images/bg.jpg');
    height: 635px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.line-gradient {
    width: 121px;
    background: linear-gradient(to right, #00b4ff 0%, #2846a8 50%, #b41e91 100%);
    height: 2px;
    margin-right: 24px;
    display: inline-block;
    vertical-align: middle;
    z-index: 15;
}
.line-gradient-full {
    width: 236px;
    background: linear-gradient(to right, #00b4ff 0%, #2846a8 50%, #b41e91 100%);
    height: 2px;
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    z-index: 15;
}



/* Specific --------------------------------------------*/
.h1-custom {text-align: center;font-size: 48px;line-height: 1.25;font-weight: 200;color: #5a5a5a;}
.h2-custom {font-size: 36px;margin: 0; padding-bottom: 14px;line-height: 1.25;font-weight: 200;color: #5a5a5a; text-align: center; padding-bottom: 34px;}
.h3-custom {font-size: 32px;margin: 0; line-height: 1.25;font-weight: 200;color: #5a5a5a; text-align: center;}
.text-custom { font-size: 16px;padding-top: 14px;line-height: 1.25;font-weight: 200;color: #5a5a5a;}
.link {color:#0074D9;cursor: pointer;}
.link:hover {opacity: 0.6;}

.privacy-header {font-size:22px;font-weight:600;color: #023047;padding-top:15px;}
.privacy-item-header {color: #023047;padding-top:15px;font-style: italic;text-decoration: underline;}

.service-box-icon {font-size: 32px;}
.hero-banner-header {padding-top: 100px;}
.price-box-header {
    font-weight: 300;
    font-size: 28px;
    margin: 0 0 15px 0px;
    color: #023047;
}
.mcc-logo {
    width: 185px;
    position: absolute;
    top: 18px;
    cursor: pointer;
}
.mock-up {
    width: 60%;
    margin: auto;
    display:block;
}

.intro {
    padding: 20px;
    max-width: 1200px;
    margin: auto;
}

.info-boxes {
    max-width: 1200px;
    margin: auto;
}

.info-boxes-text {
    max-width: 230px;
}


/* Media Queries --------------------------------------------*/
#hideOnMobile{display: inherit;}
/*dirty hack*/
@media screen and (min-height: 1300px) {
    .contact-info-section {
        padding: 80px 0 379px 0!important;
    }
}

/*phones*/
@media screen and (max-width: 756px) {
    .service-hero h2 {font-size: 32px!important;}
    .network-admin-image {display: none!important;}
    .network-admin-grid {grid-template-columns: 1fr!important;}
    .network-admin-text h3 {font-size: 28px!important;}
    .cta h3 {font-size: 28px!important;}
    .network-design-text h3 {font-size: 28px!important;}
    .voip-features h3 {font-size: 28px!important;}
    .pentest-text h3 {font-size: 28px!important;}
    .pentest-image img {display: none!important;}
    .pentest-grid {grid-template-columns: 1fr!important;}
    .software-dev-text h3 {font-size: 28px!important;}
    .technology-logos {display: unset!important;}
    .mock-up {width: 100%;}
    #hideOnMobile{display: none !important;}
    .generic-banner-header{font-size: 28px !important;}
    .generic-banner-sub{font-size: 18px !important;}
    .generic-banner-inner {padding-top: 120px !important;}
    .mcc-logo {top: 20px!important;width: 200px!important;}
    .emailLink {display: none;}
    .feature-tabs label {margin-top: 10px!important;}

    /*mother of all redundancy*/
    .footer-bottom-content {font-size: 11px !important; justify-content: space-between!important;}
    .footer-top-content {font-size: 12px; justify-content: space-between!important;}
    .page-header {font-size:22px !important;}
    .detail-text {font-size: 14px;}
    .mock-up {width: 100% !important;}
    .top-header-right {font-size: 16px;}
    .top-header-left {font-size: 16px;}

    .hero-banner {top: 117px !important;height: 399px !important;margin-bottom: 150px !important;}
    .hero-banner-inner {padding-top: 0 !important;}
    .hero-banner-header {padding-top: 100px !important; font-size: 28px !important;}
    .hero-header {font-size: 22px !important;}

    .trial-banner {top: 100px !important; height: 200px !important; margin-bottom: 125px !important;}
    .trial-banner-header {font-size: 32px !important; padding-top: 80px !important;}

    .support-banner {top: 120px !important;height: 200px !important;margin-bottom: 125px !important;}
    .support-banner-header {font-size: 32px !important;padding-top: 55px !important;}

    .contact-banner {height: 200px !important;}
    .contact-banner-header {font-size: 32px !important;padding-top: 55px !important;}

    .price-banner {top: 120px !important;height: 200px !important;margin-bottom: 125px !important;}
    .price-banner-header {padding-top: 50px !important;}

    .bottom-banner-inner {padding-top: 105px !important;}

    .join-banner-header {font-size: 24px !important;}

    p {font-size: 16px !important;line-height: 1.2 !important;;}

    .three-column {width: 100%;display: block;margin-bottom: 20px;}

    .cta-box {margin-left: 5px !important;margin-right: 5px !important;}
    .cta-box-header {font-size: 22px!important;}

    .price-box {padding: 10px !important;}
    .price-box-header {font-size: 22px !important;}

    .bullet-list {font-size: 1em !important;}

    .service-box-header {font-size: 20px !important; margin-top: 20px !important;margin-bottom: 10px !important; text-align: center !important;}
    .service-box-icon {position: absolute !important;}

    /*clear desktop styles*/
    .pt175 {padding-top: 0px;}
    .pt100 {padding-top: 0px;}

    .mb150 {margin-bottom: 0px;}
    .mb175 {margin-bottom: 0px;}

    .contact-icon {width: 75px;}
    .card-item {margin-top: 20px;}

    .cta-box-inner {display: block !important;}

    .promo-video {
        width: 335px !important;
        height: 260px !important;
    }
}

/*ipads*/
@media screen and (max-width: 1024px){
    .contact-grid {gap:10px!important;}
    .generic-banner-header{font-size: 32px !important;}
    .generic-banner-sub{font-size: 20px !important;}
    .generic-banner-inner {padding-top: 150px !important;}


    .nav-mob-container{display: block !important; visibility: visible !important;}
    .nav ul {
        display: none !important;
        visibility: hidden !important;
    }
    .hamburger {
        display: block !important;
        visibility: visible !important;
    }
    .info-grid {
        display: block !important;
    }
    .join-banner-container {
        width: unset !important;;
        display: block !important;
    }

    .wrapper {display: block !important;padding: 15px !important;}
    .product-grid {display: block !important;}
    .page-wrapper {padding: 15px;}
    .section-container {padding-left: 15px;padding-right: 15px;}
    .feat-list{display: none;}
    .hero-banner {background-position: right;top: 120px !important;}
    .join-banner-header {margin-bottom: 15px;}
    .info-divider-content {padding: 15px;}
    .price-banner {top: 120px !important;}
    .contact-banner {top: 120px !important;}
    .card-product {margin: 20px 0;}
}






/* IMPORT SECTION --------------------------------------------*/
.nav-mob-menu {
    margin-top: 0;
    padding: 0;
    position: absolute;
    z-index: 20;
    width: 100%;
}
.nav-mob-menu-item {
    background: #023047;
    color: white;
    border-bottom: silver 1px solid;
    padding: 10px;
}


.hero-banner-header {font-size: 34px; padding: 5px;}



.top-header {
  display: flex;
  justify-content: space-between;
  background-color: #023047;
  color: #fff;
  font-size: 12px;
  padding: .7em 1.5em;
  width: 100%;
  z-index: 20;
}

.nav {
    width: 100%;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    padding: 1.5em;
    position: relative;
    z-index: 20;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    background: #fff;
}
.nav ul{list-style: none;}
.nav li{display: inline-block; margin-top: .2rem;}


.nav-mob-container {
    font-size: 2rem;
    display: none;
    visibility: hidden;
}
.nav-mobile {
  width: 0;
  transition: all 0.4s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  height: 100vh;
  background: #333;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  display: flex;
}

.hamburger {
    cursor: pointer;
    display: none;
    visibility: hidden;
    margin-top: .3rem;
}
.bar {
    height: .3rem;
    background-color: black;
    width: 3rem;
    transition: .3s all;
}
.hamburger:hover .bar:nth-child(2){width: 2rem;}
.bar:not(:first-child){margin-top: .4rem;}


.nav-mobile ul{list-style: none;}
.nav-mobile li{margin: 1rem 0; transition: all .4s; cursor: pointer;}
.nav-mobile li:hover{ transform: scale(.95); }


.footer-top {
  background-color: rgba(255, 255, 255, 0.05);
    padding: 15px;
}
    .footer-top-content {
        display: flex;
        justify-content: space-between;
        margin: auto;
    }

.footer-bottom {
    padding: 10px 15px;
    background-color: #1f1f1f;
    background-color: rgba(0, 0, 0, 0.32);
}
    .footer-bottom-content {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        margin: auto;
    }




.divider {
  padding: 0 10px;
  margin: 55px 0;
  height: 400px;
  background-color: white;
  border: red 1px solid;
}


.containerTab {
  padding: 20px;
  color: white;
}












/* Page Components --------------------------------------------*/

.hero-image {
  display: block;
  overflow: hidden;
  top: 0;
  right: 0;
  width: 100%;
  height: 60%;
  z-index: -1;
}

.hero-image::after {
  content: "";
  position: absolute;
  top: 96px;
  left: -50%;
  width: 100%;
  height: 60.7%;
  background-color: rgba(11,71,93,.95);
  -webkit-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  transform: skewX(-20deg);
}


#myBtn {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 20;
  font-size: 30px;
  border: none;
  outline: none;
  /*background-color: goldenrod;*/
    background-color: rgb(255,255,255,0.3);
  color: goldenrod;
  cursor: pointer;
    font-weight: 600;
    border: 2px solid goldenrod;
  border-radius: 4px;
  padding-bottom: 0;
  padding-top: 4px;
}

#myBtn:hover {
    background-color: rgb(255,255,255,0.4);
}

.headline-bg {
  background-color: #1276bb;
  padding: 100px;
}

.login-btn {
  color: #FFF;
  background-color: #2196F3;
}
.signup-btn {
  color:#2196F3;
  background-color: #fff;
  border: 1px solid #2196F3;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}
.closebtn {
  float: right;
  color: white;
  font-size: 35px;
  cursor: pointer;
}














        .hero-banner {
            background-position: bottom center;
            background-image: url(./images/IT-header-1.jpg) !important;
            background-repeat: no-repeat;
            background-size: cover;
            height: 548px;
            border-bottom:12px solid #023047;
            inset 0 0 0 2000px rgb(0 0 0 / 40%);
        }
        .hero-header {
            text-align: center;
            font-weight: 600;
            font-size: 27px;
            margin-bottom: 20px;
            color: #113856
        }
        .page-banner {
            background-color: #023047;
            position: relative;
            padding: 50px 0;
            background-position: center center;
            background-size: cover;
        }
        .page-banner-header {
            color: white;
            font-weight: 600;
            font-size: 27px;
            line-height: 1.5em;
            text-align: center;
        }
        .page-banner-text {
            color: white;
            text-align: center;
        }

        .card-container {
            align-items: start;
            display: grid;
            grid-gap: 16px;
            grid-template-columns: repeat(auto-fit, 300px);
            justify-content: center;
        }
        .section-container {
            max-width: 1080px;
            margin: auto; 
        }
        .card-header {
            text-align: center;
            color: #023047;
            font-size: 20px;
        }




    .step-header {
        color: #023047;
        font-size: 20px;
    }



    .free-trial-banner {
        height: 500px;
        background-position: bottom center;
        background-size: cover;
        background-image: url(./images/bluebanner.jpg) !important;
    }

    .phone-banner {
        height: 500px;
        background-position: bottom center;
        background-size: cover;
        background-image: url(./images/nicebanner.jpg);
    }


    .bottom-banner {
        height: 450px;
        background-position: bottom center;
        background-size: cover;
        background: rgba(0, 0, 0, .35) url('./images/newbg.png');
        background-blend-mode: darken;

    }



    .hero-banner {
      z-index: 1;
      top: 114px;
      position: relative;
      margin-bottom: 185px;
    }





























.login-wrapper {
    display: grid;
    grid-gap: 8px;
    background-color: #fff;
    color: #444;
}

.box {
    text-align: center;
    color: #fff;
    background-color: #023047;
    border: 1px solid rgba(2, 48, 71, 0.59);
    border-radius: 5px;
    padding: 10px;
    font-size: 150%;
}


.btn {
    cursor: pointer;
}
.btn:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

.full-width-column {
    grid-column: 1 / 5;
}


.a {
    grid-column: 1 / 4;
}
.b {
    grid-column: 4 / 5 ;
}

.user-detail {
    text-align: left;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    opacity: .75;
}

.btn-small {
    background: #52648a;
}

.footer-copyright {
    color: #999;
    padding: 2em 2em 2em 2em;
    font-size: 10px;
}


.action-page {
    padding-top: 1em;
    grid-column: 1 / 5;
}

.action-header {
    margin: 0 0 0.5em 0;
    font-size: 24px;
    font-weight: normal;
    text-align: left;
    color: #333;
    padding: 0;
    text-transform: uppercase;
    white-space: nowrap;
}
.confirmation-block {
    padding: 1em;
    margin: 0 0 1em 0;
    color: black;
    background-color: #0F0;
    font-weight: bold;
    border: 1px solid yellow;
    white-space: nowrap;
}

.form-control {
    display: block;
    width: 260px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

}

.checkbox, .radio {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;

}

.btn-login {
    color: #fff;
    background-color: #023047;
    border-color: #204d74;
    padding-left: 4em;
    padding-right: 4em;
    border-radius: 4px;
    border: 1px solid transparent;
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 4em;
    padding-left: 4em;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}


.btn-login:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

.lost-pass {
    display: flex;
    align-items: center;
    font-size: .70em;
    color: #023047;
    outline:0;
    text-decoration: none;
    padding: 5px;
    cursor: pointer;
}

.login-container {
    padding: 2em 2em 0 2em;
    margin-top: 135px;
}


.checkbox, .radio {font-size: .75em;}
input[type=checkbox]
{
    transform: scale(.85);
    padding: 0;
}

.action-sub-header {font-size: .8em; margin-bottom: 10px;color: #666;}


















.debug {
    background-color: #FFDC00;
    border: 1px solid #b29a00;
    position: fixed;
    bottom: 20px;
    left: 30px;
    z-index: 20;
    font-size: 18px;
    padding: 3px;
}
.hero-banner-header {
    color: #fff;
    font-weight: 700;
    font-size: 38px;
    letter-spacing: 0.5px;
    line-height: 1.5em;
    text-shadow: 0em 0.1em 0.1em rgba(0,0,0,0.49);
    text-align: center;
}
.hero-banner-sub-header {
    font-size: 22px;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 1.5em;
    text-shadow: 0em 0.1em 0.1em rgba(0,0,0,0.49);
    text-align: center;
}
.hero-banner-button {
    color: #fff;
    margin-top: 20px;
    border-color: #ffffff;
    font-size: 20px;
    padding: 0.3em 1em;
    border: 2px solid;
    transition: all 0.2s;
    border-radius: 3px;
    font-weight: 500;
    line-height: 1.7em !important;
    text-align: center;
    background: transparent;
}
.hero-banner-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
.join-banner {
    padding-top: 24px;
    padding-bottom: 24px;
}
.join-banner {
    font-size: 38px;
    font-weight: 700;
}
.join-banner-header {
    color: white;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.5em;
    text-align: left;
}
.join-banner-container {
    width: 1080px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.join-banner-button {
    width: 210px;
    white-space: nowrap;
    border: none;
    transition: all 0.2s;
    text-align: center;
    background: #FB8500;
    color: #FFF;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}
.join-banner-button:hover {
    background-color: rgba(251, 133, 0, 0.85);
}
.oj-btn {
    color: #ffffff !important;
    border-color: #d12229 !important;
    letter-spacing: 0.5px;
    margin-top: 20px;
    font-size: 20px;
    padding: 0.3em 1em;
    border: 2px solid;
    transition: all 0.2s;
    border-radius: 3px;
    font-weight: 500;
    line-height: 1.7em !important;
    text-align: center;
    background: rgb(196,78,11);
    cursor: pointer;
}
.oj-btn:hover {
    background-color: rgba(196,78,11, 0.6);
}
.nav-btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 3px solid #023047;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.nav-btn:hover {
    color: #fff;
    background-color: #023047;
    border-color: #023047;
    cursor: pointer;
}
.desktop-menu-item {
    font-size: 1rem;
    margin-right: 15px;
}
.desktop-menu-item:hover {
    text-decoration: underline;
    cursor: pointer;
}
.footer-links {
    padding-right: 22px;
    font-size: 14px;
    font-weight: 600;
    color: #bbb;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
}
.footer-links:hover {
    opacity: 0.7;
}
.emailLink{
    color:unset;
}
.emailLink:hover {
    color:yellow;
}
.phoneLink{
    color:#2ECC40;
}
.clr-green {color:#2ECC40;}
.clr-yellow {color:yellow;}
.clr-orange {color:#ff4500;}
.clr-silver {color:#ddd;}
.nowrap{white-space: nowrap;}


.nav-mob-menu{font-size: .85em;}
.nav-mob-menu li:last-child {border-bottom: 2px solid white;}
.nav-mob-menu li:first-child {border-top: 2px solid ghostwhite;}






#modImg01 {
    width: 100%;
}

#img01 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    cursor: pointer;
}

#img01:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 25; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}


/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    max-width: 1000px;
}

/* Caption of Modal Image */
#modCaption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}


/* Contact Section */


.contact h2 {
    text-align: center;
    font-size: 36px;
    color: #023047;
    margin-bottom: 60px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.contact-info {
    font-size: 16px;
}

.contact-info h3 {
    font-size: 24px;
    color: #023047;
    margin-bottom: 20px;
}

.contact-info p {
    margin-bottom: 15px;
}

.contact-form h3 {
    font-size: 24px;
    color: #023047;
    margin-bottom: 20px;
}

.contact-form form {
    display: grid;
    grid-gap: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    font-size: 16px;
}

.contact-form button {
    padding: 15px;
    background-color: #023047;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    transition: background
}


.industries {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: #fff;
}

.industry-card {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
    max-width: 330px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.industry-card img {
    max-width: 100%;
    border-radius: 8px;
    height:130px;
}

.industry-card h4 {
    margin-top: 15px;
    font-size: 1.4rem;
    color: #023047;
}

.industry-card p {
    color: #777;
    font-size: 1rem;
    margin-top: 10px;
}

.industry-card:hover {
    transform: scale(1.05);
}


/* Dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown button */
.dropbtn {
    cursor: pointer;
    text-decoration: none;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #023047;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    padding: 8px;
    border:1px solid #012233;
    z-index: 1;
}

/* Show the dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Dropdown content links */
.dropdown-content li {
    width: 100%;
    text-align: left;
    background-color: #023047; /* Adjust the background color */
    color: white;
    border-bottom: 1px solid #aaa;
    cursor: pointer;
}

/* Style the dropdown links on hover */
.dropdown-content li:hover {
    background-color: #03486b; /* Adjust hover color */
}


/* Service Hero Section */
.service-hero {
    background-color: #023047;
    color: #fff;
    padding: 80px 0;
    text-align: center;
}

.service-hero h2 {
    font-size: 42px;
    margin-bottom: 10px;
}

.service-hero p {
    color:silver;
    font-size: 18px;
}

/* Service Content Section */
.service-content {
    padding: 30px 0;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    align-items: center;
}

.service-text h3 {
    font-size: 28px;
    color: #023047;
    margin-bottom: 20px;
}

.service-text h4 {
    font-size: 22px;
    color: #03506f;
    margin-top: 30px;
    margin-bottom: 10px;
}

.service-text p {
    margin-bottom: 20px;
}

.service-text ul {
    list-style: none;
    padding: 0;
}

.service-text ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
}

.service-text ul li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #ffb703;
    font-size: 18px;
}

.service-text .btn {
    padding: 12px 25px;
    background-color: #023047;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
    margin-top: 20px;
}

.service-text .btn:hover {
    background-color: #03506f;
}

.service-image img {
    width: 100%;
    border-radius: 8px;
}

/* Call to Action Section */
.cta {
    background-color: #8ecae6;
    padding: 60px 0;
    text-align: center;
}

.cta h3 {
    font-size: 32px;
    color: #023047;
    margin-bottom: 20px;
}

.cta p {
    font-size: 18px;
    margin-bottom: 30px;
}

.cta .btn {
    padding: 15px 30px;
    background-color: #ffb703;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s;
}

.cta .btn:hover {
    background-color: #fb8500;
}


/* Server Administration Styles */


/* Content Section */
.server-admin-content {
    padding: 30px 0;
}

.server-admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.server-admin-image img {
    width: 100%;
    border-radius: 10px;
}

.server-admin-text h3 {
    font-size: 32px;
    color: #023047;
    margin-bottom: 20px;
}

.server-admin-text p {
    font-size: 16px;
    margin-bottom: 20px;
}

/* Feature Tabs */
.feature-tabs {
    position: relative;
    margin-bottom: 30px;
}

.feature-tabs input {
    display: none;
}

.feature-tabs label {
    display: inline-block;
    padding: 10px 20px;
    background-color: #8ecae6;
    color: #023047;
    cursor: pointer;
    margin-right: 5px;
    transition: background 0.3s;
}

.feature-tabs label:hover {
    background-color: #219ebc;
    color: #fff;
}

.feature-tabs .tab-content {
    display: none;
    padding: 20px;
    background-color: #e0e0e0;
    margin-top: 10px;
    border-radius: 5px;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
    display: block;
}

/* Adjust button */
.server-admin-text .btn {
    margin-top: 20px;
}

/* Network Administration Styles */


/* Content Section */
.network-admin-content {
    padding: 30px 0;
}

.network-admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.network-admin-text h3 {
    font-size: 32px;
    color: #023047;
    margin-bottom: 20px;
}

.network-admin-text p {
    font-size: 16px;
    margin-bottom: 20px;
}

.network-admin-text h4 {
    font-size: 24px;
    color: #03506f;
    margin-top: 30px;
    margin-bottom: 10px;
}

/* Accordion */
.accordion .accordion-item {
    margin-bottom: 15px;
}

.accordion .accordion-item label {
    display: block;
    background-color: #8ecae6;
    padding: 15px;
    cursor: pointer;
    font-weight: 700;
    color: #023047;
}

.accordion .accordion-item input {
    display: none;
}

.accordion .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: #e0e0e0;
    padding: 0 15px;
}

.accordion .accordion-item input:checked ~ .accordion-content {
    max-height: 250px;
    padding: 15px;
}

.accordion .accordion-content p {
    margin: 0;
}

.network-admin-image img {
    width: 100%;
    border-radius: 10px;
}

.network-admin-text .btn {
    margin-top: 20px;
}

/* Network Design Styles */

/* Hero Section */
.master-hero {
    background: linear-gradient(to right, #023047, #219ebc);
    color: #fff;
    padding: 100px 0;
    text-align: center;
}

.master-hero h2 {
    font-size: 48px;
    margin-bottom: 10px;
}

.master-hero p {
    font-size: 20px;
}


.network-design-text h3 {
    font-size: 32px;
    color: #023047;
    margin-bottom: 20px;
}

.network-design-text p {
    font-size: 16px;
    margin-bottom: 40px;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
}

.step {
    text-align: center;
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
}

.step-number {
    font-size: 36px;
    color: #ffb703;
    margin-bottom: 10px;
}

.step h4 {
    font-size: 20px;
    color: #023047;
    margin-bottom: 10px;
}

.step p {
    font-size: 14px;
}

.network-design-text .btn {
    margin-top: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* VoIP & Telephony Styles */

/* Content Section */
.voip-content {
    padding:80px 0;
}

.voip-features h3 {
    font-size: 32px;
    color: #023047;
    text-align: center;
    margin-bottom: 20px;
}

.voip-features p {
    font-size: 16px;
    text-align: center;
    margin-bottom: 40px;
}

.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
}

.card {
    text-align: center;
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
}

.card img {
    width: 100px;
    margin-bottom: 15px;
}

.card h4 {
    font-size: 20px;
    color: #023047;
    margin-bottom: 10px;
}

.card p {
    font-size: 14px;
}

.voip-features .btn {
    margin-top: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Penetration Testing Styles */


/* Content Section */
.pentest-content {
    padding: 30px 0;
}

.pentest-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.pentest-text h3 {
    font-size: 32px;
    color: #023047;
    margin-bottom: 20px;
}

.pentest-text p {
    font-size: 16px;
    margin-bottom: 20px;
}

.pentest-text h4 {
    font-size: 24px;
    color: #03506f;
    margin-top: 30px;
    margin-bottom: 10px;
}

.pentest-text ol {
    list-style: none;
    counter-reset: step;
}

.pentest-text ol li {
    counter-increment: step;
    position: relative;
    padding-left: 40px;
    margin-bottom: 15px;
}

.pentest-text ol li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #ffb703;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
}

.pentest-image img {
    width: 100%;
    border-radius: 10px;
}

.pentest-text .btn {
    margin-top: 20px;
}

/* Software Development Styles */


/* Content Section */
.software-dev-content {
    padding: 30px 0;
}

.software-dev-text h3 {
    font-size: 32px;
    color: #023047;
    margin-bottom: 20px;
}

.software-dev-text p {
    font-size: 16px;
    margin-bottom: 20px;
}

.software-dev-text h4 {
    font-size: 24px;
    color: #03506f;
    margin-top: 30px;
    margin-bottom: 20px;
}

.technology-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.technology-logos img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.software-dev-text .btn {
    margin-top: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* About Us Page Styles */


/* Our Story Section */
.our-story {
    padding: 80px 0;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.story-text h3 {
    font-size: 32px;
    color: #023047;
    margin-bottom: 20px;
}

.story-text p {
    font-size: 16px;
    margin-bottom: 20px;
}

.story-image img {
    width: 100%;
    border-radius: 10px;
}

/* Mission and Vision Section */
.mission-vision {
    background-color: #f5f5f5;
    padding: 80px 0;
}

.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.mv-item {
    text-align: center;
}

.mv-item h3 {
    font-size: 28px;
    color: #023047;
    margin-bottom: 15px;
}

.mv-item p {
    font-size: 16px;
}

/* Leadership Team Section */
.leadership {
    padding: 80px 0;
}

.leadership h2 {
    text-align: center;
    font-size: 36px;
    color: #023047;
    margin-bottom: 60px;
}

.leadership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    text-align: center;
}

.leader img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 15px;
}

.leader h4 {
    font-size: 22px;
    color: #023047;
    margin-bottom: 5px;
}

.leader p {
    font-size: 16px;
}

/* Values Section */
.values {
    padding: 80px 0;
}

.values h2 {
    text-align: center;
    font-size: 36px;
    color: #023047;
    margin-bottom: 60px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    text-align: center;
}

.value-item h4 {
    font-size: 24px;
    color: #023047;
    margin-bottom: 10px;
}

.value-item p {
    font-size: 16px;
}


/* Contact Page Styles */

/* Contact Hero Section */
.contact-hero {
    background-color: #023047;
    color: #fff;
    padding: 100px 0;
    text-align: center;
}

.contact-hero h2 {
    font-size: 42px;
    margin-bottom: 10px;
}

.contact-hero p {
    font-size: 18px;
}

/* Contact Information Section */
.contact-info-section {
    padding: 80px 0;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.contact-details h3,
.contact-form h3 {
    font-size: 28px;
    color: #023047;
    margin-bottom: 20px;
}

.contact-details p {
    font-size: 16px;
    margin-bottom: 15px;
}

.contact-form form {
    display: grid;
    gap: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
}

.contact-form button {
    padding: 15px;
    background-color: #023047;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s;
}

.contact-form button:hover {
    background-color: #03506f;
}


/* Responsive Styles */
@media (max-width: 768px) {
    .contact-hero h2 {
        font-size: 32px;
    }

    .contact-details h3,
    .contact-form h3 {
        font-size: 24px;
    }

    .contact-hero p,
    .contact-details p {
        font-size: 16px;
    }

    .contact-form button {
        font-size: 16px;
    }
}


.template-container {
        margin-top: 133px;
}






/* Services Grid Styles */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.service-card {
    background-color: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    border: 1px solid #ddd;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.service-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.service-card h4 {
    font-size: 22px;
    color: #023047;
    margin: 20px 0 10px;
}

.service-card p {
    font-size: 16px;
    padding: 0 20px;
    margin-bottom: 20px;
}

.service-card .btn {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #FB8500;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
    text-decoration: none;
    border-radius: 5px;
}

.service-card .btn:hover {
    background-color: rgba(251, 133, 0, 0.85);
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}




.server-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: start;
}

.pentest-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: start;
}

.feature-tabs .expanded {
    margin-bottom: 2rem;
}

.server-admin-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-box {
    background-color: #f9f9f9;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.feature-box img {
    width: 100px;
    height: auto;
    margin-bottom: 1rem;
    border-radius: 10px;

}

.feature-box h4 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.feature-box p {
    font-size: 1rem;
    line-height: 1.6;
}