<style>
        * {
            box-sizing: border-box;
        }

        html {
            margin: 0;
            padding: 0;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 1em;
            color: #ffffff;
        }

        body {
            background: #4a76af;
            overflow-x: hidden;
            margin: 0;
        }

        .img-wrapper {
            width: 100vw;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: 20px;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            margin: 4vw auto;
            cursor: default;
        }

        .img-container {
            height: 400px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
            -webkit-box-pack: start;
                -ms-flex-pack: start;
                    justify-content: flex-start;
            width: 80%;
            gap: 25px;
            cursor: default;

        }

        .img-card {
            width: 20vw;
            border-radius: .5rem;
            background-size: cover;
            background-position: center center ;
            cursor: pointer;
            overflow: hidden;
            border-radius: 1rem;
            margin: 0 10px;
            display: flex;
            align-items: flex-end;
            transition: .6s cubic-bezier(.28, -0.03, 0, .99);
            box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.8);
            cursor: default;
        }

        .img-card .img-row {
            color: #FFFFFF;
            display: flex;
            flex-wrap: nowrap;
            cursor: default;

        }

        .img-card > .img-row > .img-icon {
            background: #223;
            color: #FFFFFF;
            border-radius: 50%;
            width: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 15px;
            cursor: pointer;
        }

        .img-card > .img-row > .img-description {
            display: flex;
            justify-content: center;
            flex-direction: column;
            overflow: hidden;
            height: 90px;
            width: 520px;
            opacity: 0;
            transform: translateY(30px);
            transition-delay: .3s;
            transition: all .3s ease;
            margin-bottom: 20px;
            cursor: default;
            
        }

        .img-description p {
            color: #b0b0ba;
            font-size: 1em;
            cursor: default;
        }

        .img-description h4 {
            text-transform: uppercase;
            margin-bottom: 10px;
            cursor: default;
        }

        input {
            display: none;
        }

        

        input:checked + label {
            width: 600px;
            cursor: default;
        }

        input:checked + label .img-description {
            opacity: 1 !important;
            transform: translateY(0) !important;
            cursor: default;
        }

        .img-card[for='c1'] {
            background-image: url("../images/conference-room-sm.jpg");
            background-size: cover;
        }
        .img-card[for='c2'] {
            background-image: url("../images/electrical-breaker-panel-sm.jpg");
        }
        .img-card[for='c3'] {
            background-image: url("../images/electrical-terminal-block-sm.jpg");
        }
        .img-card[for='c4'] {
            background-image: url("../images/electrician-tools-cart-sm.jpg");
        }

        .img-card[for='c5'] {
            background-image: url("../images/electrical-current-metering-sm.jpg");
            background-size: cover;
        }
        .img-card[for='c6'] {
            background-image: url("../images/open-ceiling-office-sm.jpg");
        }
        .img-card[for='c7'] {
            background-image: url("../images/PV-disconnect-interface-panel-sm.jpg");
        }
        .img-card[for='c8'] {
            background-image: url("../images/phone-termination-block-sm.jpg");
        }
        .img-card[for='c9'] {
            background-image: url("../images/office-lighting-control-sm.jpg");
            background-size: cover;
        }
        .img-card[for='c10'] {
            background-image: url("../images/main-electrical-fuse-block-sm.jpg");
        }
        .img-card[for='c11'] {
            background-image: url("../images/audio-video-telecom-integrartion-sm.jpg");
        }
        .img-card[for='c12'] {
            background-image: url("../images/office-plan-remodel-sm.jpg");
        }

        .img-wrapper > h1 {
            text-align: center;
        }

        h4 a {
            text-decoration: none;
            color: #ff0000;
            background-color: #eeeeee;
            border-radius: 5px;
            padding: 4px;
            
        }

        .headintro {

            display: -ms-grid;
            display: grid;
            width: 100vw;
            -ms-grid-columns: (1fr)[5];
            grid-template-columns: repeat(5, 1fr);
            -ms-grid-rows: 20vw 10vw 5vw;
            grid-template-rows: 20vw 10vw 5vw;
            height: 30vw;
            margin: auto;
            text-align: center;
            background: -webkit-gradient(linear, left bottom, left top, from(#223), to(rgba(9, 0, 9, 0.6)));
            background: -o-linear-gradient(bottom, #223, rgba(9, 0, 9, 0.6));
            background: linear-gradient(to top, #223, rgba(9, 0, 9, 0.6));
            margin-top: 4vw;
            padding-left: 0px;
            position: relative;
            
           
        }

        /* .headintro::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(9,0,0.0.6);
            z-index: -1;

        } */

        .headintro video {
            position: absolute;
            width: 100%;
            height: 100%;
            top:0;
            left: 0;
            -o-object-fit: cover;
            object-fit: cover;
            z-index: -3;
        }

        .headintro :nth-child(1) {
            -ms-grid-column: 1 / 2;
            grid-column: 1 / 2;
            -ms-grid-row: 1 / 3;
            grid-row: 1 / 3;
            justify-self: right;
            
        }

        .headintro :nth-child(2) {
            -ms-grid-column: 2 / 6;
            grid-column: 2 / 6;
            -ms-grid-row: 1 / 3;
            grid-row: 1 / 3;
            align-self: center;
            
        }

        .headintro :nth-child(2) img {
            -webkit-transform: scale(.9);
            -ms-transform: scale(.9);
            transform: scale(.9);
            
        }



        

        .headintro :nth-child(3) {
            -ms-grid-column: 1;
            -ms-grid-column-span: 5;
            grid-column: 1 / 6;
            -ms-grid-row: 3;
            -ms-grid-row-span: 1;
            grid-row: 3 / 4;
            font-size: 1.5em;
            
        }

        .headintro :nth-child(2) span {
            text-transform: uppercase;
            -webkit-text-stroke: 2px #fff;
            color: #457aed;
            -webkit-text-fill-color: #4a76af;
            position: relative;
            font-size: 5em;
        }

        

        	

        #top-intro .top-span {
            color:#ff0000;
            font-size: 2em;
            margin-left: 5vw;
            text-decoration: underline;
        }

        .nav {
            margin-top: 3vw;
        }

        .nav img {
            margin-right: 30vw;
            object-position: center;
        }

        .nav a {
            color: #ffffff;
            text-decoration: none;
        }

        .nav a:hover {
            color:rgb(236, 226, 19);
            font-size: 4em;
            margin-top: -55px;
            margin-left: -180px;
            position: absolute;
        }

        .nav ul {
            text-decoration: none;
            list-style: none;
            display: flex;
            gap: 5vw;
            align-items: flex-end;
            justify-content: flex-end;
            
        }

        .nav ul:last-child {
            margin-right: 12vw;
        }

        .three-column-card {
            display: grid;
            width: 60vw;
            margin: 4vw auto;
            grid-template-columns: repeat(3, 20vw);
            gap: 4vw;
            align-items: center;
            justify-content: center;
			font-size: 1em;
            
        }

        .three-column-card > h2 {
            grid-column: 1 / 4;
            text-align: center;
        }

        .three-column-card p {
            text-align: justify;
            text-justify: inter-word;

        }

        .three-card {
            display: grid;
            grid-template-columns: auto;
            grid-template-rows: 8vw 5vw 12vw;
            align-items: center;
            justify-content: center;
            justify-items: center;
            text-align: center;
            border: 1px solid #FFFFFF;
            padding: 2vw;
            border-radius: 10px;
        } 

        

        .three-column-card img {
            border-radius: 10px;
            scale: 80%;
            
        }

        .three-card {
            height: 30vw;
        }

        #card1 {
            grid-column: 1 / 2;
            text-align: center;
            
        }
        #card2 {
            grid-column: 2 / 3;
            text-align: center;
            
        }
        #card3 {
            grid-column: 3 / 4;
            text-align: center;
            

        }

        .move-container {
            position: relative;
            width: 100vw;
            height: 30vw;
            z-index: -5;
            margin-top: 10vw;
        }

        .move {
            width: 100vw;
            min-height: 40vw;
            margin-left: -10px;
            margin-top: -8vw;
            background-color: #4a76af;
            position: absolute;
            transition-duration: 7s;
            -webkit-transition-duration: 7s;
                 -o-transition-duration: 7s;
            color: #4a76af;
            text-align: center;
            font-size: 5em;
            z-index: -1;
        }

        .move.show {
            transform: translate(100vw);
            -webkit-transform: translate(100vw);
            -ms-transform: translate(100vw);
        }

        .text-stroke {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 6em;
            text-align: center;
            -webkit-text-stroke: 2px #fff;
            color: #457aed;
            -webkit-text-fill-color: #4a76af;
            margin-top: -30vw;
        }
        .text-stroke span {
            position: absolute;
            font-size: 5em;
            z-index: -6;
            text-align: center;
            margin-left: 3vw;
        }
        
        .jump-in {
            width: 100vw;
            margin-top: 10vw;
            text-align: center;
            font-size: 2em;
            opacity: 0;
            transition-timing-function: ease-in;
            transition-duration: 4s;
        }

        .jump-in.jumpback {
            opacity: 1;
        }
        

        .slider-band {
            display: grid;
            grid-template-columns: 50% 50%;
            align-items: center;
            height: 40vw;
            width: 200vw;
            justify-content: space-between;
            background-color: #ff0000;
        }

        .slider-left {
            grid-column: 1 / 2;
             display: flex;
            align-items: center;
            justify-content: center;
            
            background-color: #223;
            
        }

        .slider-left h1 {
            font-size: 10em;
            margin-right: 0;
            
        }

        .slider-right {
            grid-column: 2 / 3;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .slider-band ul {
            list-style: none;
            font-size: 3em;
        }

        .slider-band #firstul {

        }

        main {
            margin-top: 4vw;        
            overflow-x: hidden;
            display: flex;
            position: sticky;
            top:0;
            background-image: linear-gradient(150deg, rgb(74, 118, 175)80%, rgb(43, 115, 209)40%);
        }
        section {
            min-width: 50vw;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 4ch;
        }

        

        section#sec1 {
            min-width: 100vw;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15em;
        }

        .below-content {
            min-height: 30vw;
            width: 100vw;

        }

        .below-content h1 {
            font-size: 10em;
            text-align: center;
        }

        .marketing-content {
            display: flex;
            flex-direction: column;
            margin: 0 auto;
            width: 90%;
            margin-top: 4vw;

        }

        @media screen and (max-width: 1600px) 
        {
            .headintro {
                font-size: .9em;
            }
            
        }

        @media screen and (max-width: 1420px)
        {
        

		.headintro {

            display: grid;
            width: 100vw;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: 20vw 10vw 5vw;
            min-height: 30vw;
            margin: auto;
            text-align: center;
            background: linear-gradient(to top, #223, rgb(88, 88, 131));
            margin-top: 4vw;
            padding-left: 0px;
            
           
        }
		 
		.headintro :nth-child(2) {
            grid-column: 2 / 6;
            grid-row: 1 / 3;
            font-size: 1em;
        }
		
		.headintro :nth-child(2) span {
            text-transform: uppercase;
            -webkit-text-stroke: 2px #fff;
            color: #457aed;
            -webkit-text-fill-color: #4a76af;
            position: relative;
            font-size: 3.2em;
        }

        .headintro :nth-child(2) img {
            transform: scale(.6);
            
        }
		
		.headintro :nth-child(3) {
            
            grid-column: 1 / 6;
            grid-row: 3 / 4;
            font-size: 1.3em;
            
        }
		
		#top-intro .top-span {
            color:#ff0000;
            font-size: 1.5em;
            margin-left: 10vw;
            text-decoration: underline;
        }
		 
		.img-wrapper > h1 {
            font-size: 1.5em;
        } 
        .img-container {
            height: 400px;
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            width: 90%;
            gap: 25px;

        }    
            
        .text-stroke {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4em;
            text-align: center;
            -webkit-text-stroke: 2px #fff;
            color: #457aed;
            -webkit-text-fill-color: #4a76af;
            margin-top: -30vw;
        }
        .text-stroke span {
            position: absolute;
            font-size: 5em;
            z-index: -6;
            text-align: center;
            margin-left: 1vw;
        } 

        .jump-in {
            width: 100vw;
            margin-top: 16vw;
            text-align: center;
            font-size: 1.6em;
            opacity: 0;
            transition-timing-function: ease-in;
            transition-duration: 4s;
        }

        section {
            min-width: 50vw;
            min-height: 50vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 4em;
        }
		
		.three-column-card {
            display: grid;
            width: 80vw;
            margin: 4vw auto;
            grid-template-columns: repeat(3, 1fr);
            gap: 4vw;
            align-items: start;
            justify-content: center;
			font-size: .8em;
        }


        }
		
		@media screen and (max-width: 1080px)
		
		{

            .three-column-card {
                display: grid;
                width: 90vw;
                margin: 4vw auto;
                grid-template-columns: repeat(3, 1fr);
                gap: 3vw;
                align-items: start;
                justify-content: center;
                font-size: .8em;
            }

            .three-card {
               
                display: grid;
                grid-template-columns: auto;
                grid-template-rows: 8vw 5vw 20vw;
                align-items: center;
                justify-content: center;
                justify-items: center;
                text-align: center;
                border: 1px solid #FFFFFF;
                padding: 3vw;
                border-radius: 10px;
                height: 32vw;
            }
            
            

		.headintro :nth-child(2) {
            grid-column: 2 / 6;
            grid-row: 1 / 3;
            font-size: 1em;
            display: flex;
            flex-direction: column;
        }  
            
		
		.headintro :nth-child(3) {
            
            grid-column: 1 / 6;
            grid-row: 3 / 4;
            font-size: .9em;
            
        }
        
        .headintro :nth-child(2) span {
            text-transform: uppercase;
            -webkit-text-stroke: 2px #fff;
            color: #457aed;
            -webkit-text-fill-color: #4a76af;
            position: relative;
            font-size: 2.5em;
        }

        .jump-in {
            width: 100vw;
            margin-top: 16vw;
            text-align: center;
            font-size: 1.2em;
            opacity: 0;
            transition-timing-function: ease-in;
            transition-duration: 4s;
        }

        section#sec1 {
            min-width: 100vw;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10em;
        }
    }
		
        @media screen and (max-width: 834px)
        {
           .headintro :nth-child(1) {
            font-size: 1em;
        }

        .headintro :nth-child(3) {
            grid-column: 1 / 6;
            grid-row: 3 / 4;
            font-size: .8em;
        }

        .headintro :nth-child(2) {
            grid-column: 2 / 6;
            grid-row: 1 / 3;
            font-size: 1.3em;
            display: flex;
            flex-direction: column;
            
        }  

        .three-card {
               
            display: grid;
            grid-template-columns: auto;
            grid-template-rows: 10vw 20vw 25vw;
            align-items: center;
            justify-content: center;
            justify-items: center;
            text-align: center;
            border: 1px solid #FFFFFF;
            padding: 2vw;
            border-radius: 10px;
            height: 60vw;
        } 

        

        .text-stroke {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3em;
            text-align: center;
            -webkit-text-stroke: 2px #fff;
            color: #457aed;
            -webkit-text-fill-color: #4a76af;
            margin-top: -30vw;
        }
		
        .text-stroke span {
            position: absolute;
            font-size: 5em;
            z-index: -6;
            text-align: center;
            margin-left: 3vw;
        }

        .jump-in {
            width: 100vw;
            margin-top: 16vw;
            text-align: center;
            font-size: 1.1em;
            opacity: 0;
            transition-timing-function: ease-in;
            transition-duration: 4s;
        }

        section#sec1 {
            min-width: 100vw;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8em;
        }

		}

        @media screen and ( max-width: 640px) 
        
        {   
            .nav img {
                margin-right: 10vw;
                object-position: center;
            }

            .three-column-card {
                display: flex;
                flex-direction: column;
                width: 90vw;
                gap: 5vw;
                align-items: center;
                justify-content: center;
                font-size: 1em;
            }

            .three-column-card img {
                border-radius: 10px;
                scale: 60%;
                
            }
            
            
        }

        @media screen and ( max-width: 480px) {
         
            .nav img {
                margin-right: 5vw;
                object-position: center;
            }

            .img-wrapper {
                width: 100vw;
                display: flex;
                flex-direction: column;
                gap: 20px;
                align-items: center;
                justify-content: space-between;
                margin: 4vw auto;
                cursor: default;
            }
    
            .img-container {
                height: 600px;
                display: flex;
                flex-wrap: nowrap;
                justify-content: flex-start;
                width: 90%;
                gap: 10px;
                cursor: default;
    
            }
            
            
            .headintro :nth-child(2) {
                grid-column: 2 / 6;
                grid-row: 1 / 3;
                font-size: 1.1em;
                display: flex;
                flex-direction: column;
            }

            .headintro :nth-child(1) {
                font-size: .6em;
            }
            .headintro :nth-child(2) span {
                text-transform: uppercase;
                -webkit-text-stroke: 2px #fff;
                color: #457aed;
                -webkit-text-fill-color: #4a76af;
                position: relative;
                font-size: 4em;
            }
            .headintro :nth-child(2) img {
                transform: scale(.8);
                
            }

            .headintro {

                display: grid;
                width: 100vw;
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: 30vw 10vw 10vw;
                min-height: 30vw;
                align-items: center;
                justify-content: center;
                margin: auto;
                text-align: center;
                background: linear-gradient(to top, #223, rgb(88, 88, 131));
                margin-top: 4vw;
                padding-left: 0px;
                
               
            }

            .headintro :nth-child(3) {
                grid-column: 1 / 6;
                grid-row: 3 / 4;
                font-size: .8em;
                padding: 3vw;
            }

            .headintro :nth-child(3) p {
                margin-bottom: 5vw;
            }

            .text-stroke {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 2em;
                text-align: center;
                -webkit-text-stroke: 1px #fff;
                color: #457aed;
                -webkit-text-fill-color: #4a76af;
                margin-top: 50vw;
            }

            .three-column-card img {
                border-radius: 10px;
                scale: 50%;
                
            }

            .three-column-card {
                display: flex;
                flex-direction: column;
                width: 90vw;
                gap: 4vw;
                align-items: center;
                justify-content: center;
                font-size: 1em;
            }

            .text-stroke span {
                position: absolute;
                font-size: 5em;
                z-index: -6;
                text-align: center;
                margin-left: 3vw;
            }
            
            .jump-in {
                width: 100vw;
                margin-top: 20vw;
                text-align: center;
                font-size: 1em;
                opacity: 0;
                transition-timing-function: ease-in;
                transition-duration: 4s;
            }
    
            .jump-in.jumpback {
                opacity: 1;
            }
    
            .three-column-card > h2 {
               
                text-align: center;
                
            }
    
            #card1 {
                grid-row: 1 / 2; 
                
            }
            #card2 {
                grid-row: 2 / 3; 
                
            }
            #card3 {
                grid-row: 3 / 4;
                
            }
    
            .sticky-container {
                display: none;
            }

            .below-content h1 {
                font-size: 3em;
            }
                
            .img-description h4 {
                text-transform: uppercase;
                margin-bottom: 10px;
                cursor: default;
                font-size: .7em;
            }       
        
        }

        @media screen and (max-width: 414px) 
        {
            .headintro :nth-child(1) {
                font-size: .5em;
            }

            .headintro :nth-child(2) span {
                text-transform: uppercase;
                -webkit-text-stroke: 2px #fff;
                color: #457aed;
                -webkit-text-fill-color: #4a76af;
                position: relative;
                font-size: 3em;
            }

            .headintro :nth-child(3) {
                grid-column: 1 / 6;
                grid-row: 3 / 4;
                font-size: .7em;
                padding: 2vw;
            }

            .nav {
                font-size: .6em;
            }

            .img-wrapper > h1 {
               font-size: 1.2em;
            }

        }

    </style>