* {padding:0; margin:0; box-sizing:border-box;}
ul, ol {list-style: none; margin: 0;}
h1,h2,h3,h4,h5,h6 {font-weight: bold; margin: 0;}
p {margin: 0;}
a {text-decoration: none; color: #000000; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;}
figure {display: block; margin: 0;}
img {max-width: 100%; height: auto; display: block;}
.clear {clear: both; display: block; height: 0;}
.clearfix:after {content: ''; clear: both; display: block; height: 0;}

html {height: 100%; }
body {font-family: 'Poppins', sans-serif; font-size: 16px; color: #000000; height: 100%;}
.container {max-width: 1140px; margin: 0 auto;}
.wrapper {min-height: 100%; width: 100%; height: 100%;}

header.header-appear {position: fixed; left: 0; top: 0; z-index: 99999; box-shadow: 0 0 5px 0 rgb(15 11 84 / 50%);}
header.header-appear .logo {max-width: 90px;}
header.header-appear nav {padding-top: 18px;}

header {width: 100%; background: #ffffff; width: 100%; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;}
.header_in {padding: 0;}
.logo {float: left; display: inline-block; max-width: 130px; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;}
.logo a {display: block;}
nav {float: right; padding-top: 36px; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;}
nav ul {}
nav ul li {margin: 0 0 0 25px; float: left; display: inline-block;}
nav ul li a {font-size: 16px; color: #6a0404; font-weight: 600; line-height: 30px; display: block; position: relative; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;text-transform: uppercase;}
nav ul li a:after {content: ''; display: block; width: 0;height: 2px;background: #f40606;transition: width .3s;}
nav ul li a:hover {color: #0f0b54;}
nav ul li.active a {color: #0f0b54;}
nav ul li a:hover:after { width: 100%;}
nav ul li.active a:after { width: 100%;}

.banner {position: relative; background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);background: url(../images/westco_solution1.jpg)no-repeat;width: 100%;background-size: cover;background-position: center center;}
.banner_sec {padding: 30px 0;}
.banner_left { padding: 100px 0px; }
.banner_right {float: right; width: 35%;}   
.banner_sec h1 {font-size: 65px; color: #fff; line-height: 65px; font-weight: 700; margin: 0 0 15px 0;text-transform: uppercase;}
.banner_sec h1 span {display: block; font-size: 30px; line-height: 35px; margin: 0 0 10px 0;}
.banner_sec p {font-size: 20px; color: #fff; line-height: 28px;}
.banner_sec a {width: 160px; height: 40px; background: #2a5399; border: 2px solid #2a5399; font-size: 16px; color: #ffffff; font-weight: 600; line-height: 36px; display: block; text-align: center; text-transform: uppercase; border-radius: 5px; box-shadow: 5px 5px 5px 0 rgb(15 11 84 / 50%); letter-spacing: 2px; margin: 0 auto;}
.banner_sec a:hover {background: #0f0b54;}

.aboutus_sec {}
.aboutus {padding: 50px 0 25px 0; text-align: center;}
.aboutus h2 {font-size: 45px; color: #8f8f8f; line-height: 45px; text-align: center; margin-bottom: 25px; position: relative; display: inline-block; padding: 0 15px;text-transform: uppercase;}
.aboutus > p {font-size: 18px; color: #666666; line-height: 25px; font-weight: 500; padding: 0 0 15px; text-align: center;}
.aboutus h2:before {content: ''; position: absolute; left: 100%; top: 50%; width: 150px; height: 2px; background: #f40606; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);}
.aboutus h2:after {content: ''; position: absolute; right: 100%; top: 50%; width: 150px; height: 2px; background: #f40606; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);}

.web_development {padding: 0 0 30px 0;} 
.development {text-align: left; vertical-align: top; border-bottom: 1px solid #9c9c9c;padding: 20px 0 20px 0;}
.development.brd_none {border-bottom: none;}
.development figure {}
.development_left {float: left; width: 35%;}    
.development_left figure img {border-radius: 8px;;}
.development_right {padding: 60px 20px 30px 20px;position: relative; width: 55%; float: left;}
.web_digital {position: relative;padding: 90px 20px 0 0;margin: 40px 0 0;}
.web_digital_left {width:35%;}
/*.development:before {content: ''; position: absolute; left: 20px; top: 15px; background: #0f0b54; width: 50px; height: 45px;}*/
.development h3 {font-size: 25px; color: #fff; line-height: 25px; margin-bottom: 25px; position: relative; padding: 15px 15px;background: #172068; margin: 0 0 18px -69px;display: inline-block;border-radius: 8px;}
.web_digital h3 {    position: absolute;top: 10px;right: -45px;margin: 0;}
/*.development h3:before {content: "\f0c2"; position: absolute; left: 0; top: 0; font-family: "Font Awesome 5 Pro"; font-size: 35px; color: #2a5399;}*/
/*.development h3.web:before {content: "\f5fc";} */
.development p {font-size: 15px; color: #666666; line-height: 20px; margin-bottom: 10px;}
.development a {font-size: 15px; color: #2a5399; line-height: 31px; display: inline-block; font-weight: 600; margin: 15px 0 0 0; position: relative; width: 120px; height: 35px; border: 2px solid #2a5399; text-align: center; box-shadow: 5px 5px 5px 0 rgb(15 11 84 / 50%);}
.development a:hover {background: #0f0b54; color: #ffffff;}
.development a:hover:after {opacity: 1; visibility: visible;}
.development.marketing_sec {padding: 25px 30px 25px 0;}

.services_sec {background: #a2a1a1;}
.services {padding: 0px 0 35px 0; text-align: center;position: relative;}
.service_left {float: left;width: 25%;background: #244289;height: 100%;;}
.service_left_in{display: flex;align-items: center;height: 100%;justify-content: center;position: absolute;background: #244289;width: 25%;}
.services h2 {font-size: 45px; color: #ffffff; line-height: 45px; text-align: center; margin-bottom: 30px; position: relative; display: inline-block; padding: 0 15px;}
/* .services h2:before {content: ''; position: absolute; left: 100%; top: 50%; width: 150px; height: 2px; background: #ffffff; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);}
.services h2:after {content: ''; position: absolute; right: 100%; top: 50%; width: 150px; height: 2px; background: #ffffff; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);} */
.services_in {float: right;width: 75%;padding: 50px 0 0 20px; }
.services_in ul {margin: 0 -15px; display: flex; display: -webkit-flex; display: -ms-flexbox; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap;}
.services_in ul li {width: 33.33%; padding: 0 15px; margin-bottom: 30px;}
.marketing {background: #ffffff; padding: 30px 20px 30px; height: 100%; border-radius: 8px; text-align: left; box-shadow: 0 0 5px 0 rgb(15 11 84 / 50%); transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;position: relative;border: 2px solid #244289;cursor: pointer;}
.marketing h5 {font-size: 20px; color: #2a5399; line-height: 20px; margin-bottom: 15px; position: relative; padding: 15 0 0 0px; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;text-align: center;}
.marketing  i {font-size: 25px;display: block;text-align: center;width: 50px;height: 50px;border-radius: 100%;line-height: 50px; box-shadow: 3px 3px 5px 0 rgb(15 11 84 / 50%);margin: 0 auto 0; position: absolute;top: -23px;left: 0;right: 0;z-index: 9999;
    background: #244289;color: #fff;transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;ms-transition: all 0.5s ease-in-out;}
.marketing p {font-size: 13px; color: #666666; line-height: 18px; margin-bottom: 10px; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;text-align: center;}
.marketing:hover {background: #2a5399;border: 2px solid #2c2c2c;
    /* box-shadow: 2px 5px 10px 5px rgb(15 11 84 / 30%); */
}
.marketing:hover h5 {color: #fff;}
.marketing:hover p {color: #fff;}
.marketing:hover i {background: #fff;color: #244289;}
.call_to_action_sec {background: #2c2c2c;padding: 40px 0;}
.call_sec {padding: 30px 20px 30px;max-width: 600px;margin: 0 auto 0;text-align: center;background: #244289;border-radius: 8px;}
.call_sec_left {}
.call_sec_left h2 {font-size: 25px; color: #ffffff; line-height: 30px;}
.call_sec_left p {font-size: 15px; color: #ffffff; line-height: 20px; margin-bottom: 10px;}
.call_sec_right {padding: 20px 0 0;}
.call_sec_right a {width: 150px; height: 40px; border: 2px solid #ffffff; font-size: 15px; color: #ffffff; font-weight: 600; display: block; line-height: 36px; text-align: center; margin-top: 20px; box-shadow: 5px 5px 5px 0 rgb(15 11 84 / 50%);margin: 0 auto}
.call_sec_right a:hover {background: #ffffff; color: #0f0b54; border-color: #0f0b54;;}

footer {background: #ffffff;}
.footer_in {padding: 18px 0 20px;}
/*
.footer_logo {float: left; max-width: 140px; margin: 15px 0 0 0;}
.footer_logo a {display: inline-block;}
*/
.footer_nav {float: left;display: inline-block; padding: 18px 0 0 0;}
.footer_nav ul {}
.footer_nav ul li {margin: 0 25px 0 0; float: left; display: inline-block;}
.footer_nav ul li:last-child {margin-right: 0;}
.footer_nav ul li a {font-size: 16px; color: #2a5399; font-weight: 600; line-height: 30px; display: block; position: relative; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;}
.footer_nav ul li a:after {content: ''; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 0; width: 0; height: 2px; background: #0f0b54; opacity: 0; visibility: hidden; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;}
.footer_nav ul li a:hover {color: #0f0b54;}
.footer_nav ul li a:hover:after {opacity: 1; visibility: visible; width: 100%;}

.contact_us {float: right; padding: 0 0 0 0; text-align: right; max-width: 400px;}
.contact_us h5 {font-size: 20px; color: #2a5399; line-height: 22px; margin: 0 0 7px 0;}
.contact_us p {font-size: 16px; color: #666666; line-height: 22px; margin: 0 0 7px 0;} 
.contact_us p a {color: #666666;}
.social_icons {}
.social_icons ul {font-size: 0;}
.social_icons ul li {display: inline-block; margin-left: 10px; vertical-align: middle;}
.social_icons ul li a { display: block; color: #2a5399;}
.social_icons ul li a i {font-size: 35px !important;}
.social_icons ul li a:hover {color: #0f0b54;}

.copy {padding: 15px 0; text-align: left;}
.copy p {font-size: 14px; color: #666666; font-weight: 500; line-height: 20px;}

.mobi_web {display: none !important;}
.mob_dev {display: none !important;}
.mob_digital {display: none !important;}
.menu_icon {display: none;}
.copy.mobile_view {display: none;}

/* ===================================
   Scroll Top
====================================== */

.scroll-top-arrow, .scroll-top-arrow:focus {
    font-size: 25px;
    line-height: 45px;
    color: #fff;
    background-color: #2a5399;
    display: none;
    height: 45px;
    width: 45px;
    cursor: pointer;
    padding: 0;
    position: fixed;
    bottom: 20px;
    right: 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 100%;
    z-index: 80;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out; }

.scroll-top-arrow:hover {
    background-color: #0f0b54;
}
.scroll-top-arrow i.fas.fa-angle-up {line-height: 45px;}




/* -------Responsive Start Here------ */
@media only screen and (max-width:1160px) {
    .container {padding: 0 15px;} 
}
@media only screen and (max-width:767px) { 
    header {position: relative;}
    .menu_icon {display: block; float: right; background: none; outline: none; border: 0 none; margin: 32px 0 0 0; cursor: pointer;}
    .menu_icon span {width: 30px; height: 3px; background: #2a5399; position: relative; display: block;}
    .menu_icon span + span {margin-top: 5px;}
    .open_menu .menu_icon span:nth-child(1) {transform: rotate(45deg); -webkit-transform: rotate(45deg); top: 8px;}
    .open_menu .menu_icon span:nth-child(2) {opacity: 0;}
    .open_menu .menu_icon span:nth-child(3) {transform: rotate(-45deg); -webkit-transform: rotate(-45deg); top: -8px;}
    .open_menu nav {right: 0;}   
    nav .menu_icon {position: absolute; right: 15px; top: 15px; margin: 0 !important;}
    .logo {width: 110px;}
    nav {display: block; position: fixed; width: 250px; height: 100%; background: #ffffff; top: 0; right: -250px; z-index: 10; text-align: center; padding-top: 50px; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;}
    header.header-appear nav {padding-top: 50px;}
    header.header-appear .menu_icon {margin: 25px 0 0 0;}
    
    nav ul {padding: 0;}
    nav ul li {float: none; display: block; margin: 0;}
    nav ul li a {line-height: 35px;}
    .banner {background-position: right center;}
    .banner_sec {padding: 0;}
    .banner_left { padding: 25px 0px;text-align: center;}
    .banner_sec h1 {font-size: 25px;line-height: 30px;color: #fff;}
    .banner_sec h1 span {font-size: 25px;line-height: 28px;color: #fff}
    .banner_sec p {color: #fff}
    .aboutus {padding: 30px 0 25px 0;}
    .aboutus h2 {font-size: 25px;line-height: 28px;}
    .aboutus h2:before {width: 80px;}
    .aboutus h2:after {width: 80px;}
    .development {padding: 20px 0 0;}
    .web_development {padding: 0 0 0;}
    .development_left {float: none;width: 100%;}
    .development_right{float: none;width: 100%;padding: 15px 0;margin: 0;}
    .development h3 {margin: 0 0 15px;}
    .web_digital h3 {position: static;}
    .services{padding: 15px 0 35px 0;}
    .service_left {float: none;width: 100%;height: auto; border-radius: 8px;}
    .services_in {float: none;width: 100%;padding: 30px 0 0 0; }
    .service_left_in {display: block;position: static;height: auto;width: 100%;border-radius: 8px;}
    .services h2 {padding: 15px 15px;margin: 0;font-size: 25px;line-height: 28px;}
    .services_in ul {display: block;margin: 0;}
    .services_in ul li {width: 100%;padding: 0 0px;}
    .marketing {height: auto;}
    .footer_nav {width: 100%; float: none; margin: 0 0 20px 0; display: block;}
    .footer_nav ul {text-align: center; font-size: 0;}
    .footer_nav ul li {float: none; vertical-align: top; margin: 0 10px;}
    .contact_us {width: 100%; float: none; max-width: 100%; text-align: center;}
    .copy {display: none;}
    .copy.mobile_view {display: block; text-align: center;}
    .development h3 {display: none;}
    .web_digital_left {display: none;}
    .mobi_web {display: block !important;text-align: center;}
    .mob_dev {display: block !important;text-align: center;}
    .mob_digital {display: block !important;padding: 0 0 20px;}
    .development h3 {display: none;}

}