/***** Load fonts style *****/
@font-face {
    font-family: 'Arial';
    src: url('../fonts/ArialMT.woff2') format('woff2'),
        url('../fonts/ArialMT.woff') format('woff'),
        url('../fonts/ArialMT.ttf') format('truetype'),
        url('../fonts/ArialMT.svg#ArialMT') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial';
    src: url('../fonts/Arial-BoldMT.woff2') format('woff2'),
        url('../fonts/Arial-BoldMT.woff') format('woff'),
        url('../fonts/Arial-BoldMT.ttf') format('truetype'),
        url('../fonts/Arial-BoldMT.svg#Arial-BoldMT') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial';
    src: url('../fonts/Arial-Black.woff2') format('woff2'),
        url('../fonts/Arial-Black.woff') format('woff'),
        url('../fonts/Arial-Black.ttf') format('truetype'),
        url('../fonts/Arial-Black.svg#Arial-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

html{scroll-behavior: smooth;}

/***** Main style *****/
body{font-size: 25px; color:#000; line-height: 38px; font-family: 'Arial', sans-serif; letter-spacing: 1px;}
body::after{content: ""; position: fixed; bottom: 0; top: 0; right: 0; width: 50px; background-color: #C00000;}
html {scroll-behavior: smooth;}

/* no-gutters Class Rules */
.row.no-gutters {margin-right: 0; margin-left: 0; }
.row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"] {padding-right: 0; padding-left: 0; }

/***** h tags *****/
h1{font-size:80px; margin:0;font-family: 'Roboto', sans-serif;}  
h2{font-size:55px; margin:0;font-family: 'Roboto', sans-serif;}  
h3{font-size:46px; margin:0;font-family: 'Roboto', sans-serif;}  
h4{font-size:40px; margin:0;font-family: 'Roboto', sans-serif;}  
h5{font-size:28px; margin:0;font-family: 'Roboto', sans-serif;}  
h6{font-size:18px; margin:0;font-family: 'Roboto', sans-serif;}  


/***** color tags *****/
.red-txt{color:#C00000;}
.grey-txt{color:#707070;}
.black-txt{color:#000000;}
.white-txt{color:#ffffff;}


/***** bgcolor tags *****/
.white-bg{background-color:#fff;}
.grey-bg{background-color:#eae9e8;}
.light-grey-bg{background-color: #f7f7f7;}
.dark-grey-bg{background-color:#535556;}

/***** button *****/
.no-bg-white-btn{color: #fff; font-size: 16px; border: 1px solid #fff; padding: 10px 30px; position: relative; transition: 0.7s ease-in-out; font-weight: 500; display: inline-block; }
.no-bg-white-btn::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: #fff; transition: 0.7s ease-in-out; }
.no-bg-white-btn:hover{color:#0F2030;}
.no-bg-white-btn:hover::before{opacity: 1; height: 100%; z-index: 1; }
.no-bg-white-btn span{z-index: 1; position: relative;}

.no-bg-blue-btn{color: #23A9E2; font-size: 16px; border: 1px solid #23A9E2; padding: 10px 30px; position: relative; transition: 0.7s ease-in-out; font-weight: 500; display: inline-block; }
.no-bg-blue-btn::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: #23A9E2; transition: 0.7s ease-in-out; }
.no-bg-blue-btn:hover{color:#fff;}
.no-bg-blue-btn:hover::before{opacity: 1; height: 100%; z-index: 1; }
.no-bg-blue-btn span{z-index: 1; position: relative;}

/***** Hyper links *****/
a{text-decoration:none; display: inline-block; color:#23A9E2; transition: 0.5s ease-in-out;}
a:hover{text-decoration: none; color:#23A9E2;}

/***** radius *****/
.radius2{border-radius: 2px;}
.radius5{border-radius: 5px;}
.radius10{border-radius: 10px;}
.radius25{border-radius: 25px;}
.lett1{letter-spacing: 1px;}
.lett2{letter-spacing: 2px;}

/***** listing tags *****/
ul{margin:0; padding:0;}
li{list-style: none; display: inline-block;}
ul.type-disc{padding:0;}
ul.type-disc li{display: block; position: relative; padding-left: 25px; margin-bottom: 25px; }
ul.type-disc li::before{content: ''; position: absolute; background-color: #000; height: 10px; width: 10px; border-radius: 50%; left: 0; top: 14px; }

/***** section *****/
section.section{padding:100px 200px;}

/***** font-weights *****/
.fw400{font-weight: 400;}
.fw500{font-weight: 500;}
.fw600{font-weight: 600;}
.fw700{font-weight: 700;}
.fw800{font-weight: 800;}
.fw900{font-weight: 900;}

/***** header *****/
#header{position: fixed; z-index: 1030; width: 100%; padding:50px 150px;}
.main-menu .navbar-nav li.nav-item a.nav-link{color:#C00000; opacity: 1; font-weight: 600; padding:0 25px;font-family: 'Roboto', sans-serif;}
.main-menu .navbar-nav li.nav-item a.nav-link:hover{opacity:1;}
.main-menu .navbar-nav li.nav-item.active a.nav-link{font-family: 'Roboto', sans-serif; font-weight: 900; font-size: large; }
.main-menu .navbar-nav li.nav-item {border-right: 1px solid #C00000;}
.main-menu .navbar-nav li.nav-item:last-child {border-right: 0px solid #C00000;}

#header.fixed-top{
    background: #fff;
    padding: 20px 150px;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
}

#header .navbar-brand{display: none;}
#header.fixed-top .navbar-brand{display: initial;}
.navbar-brand h5{font-family: 'Roboto', sans-serif;margin-left: -26px;}
.navbar-collapse {transition: height 0.8s ease !important;}

/***** home banner *****/
.home-banner{background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100vh; position: relative; padding: 0 200px; display: flex; align-items: center; }
.home-banner::after{content: ''; position: absolute; height: 360px; width: 120px; z-index: 1; background-color: #C00000; top: 136px; left: 0;}
.home-banner .desc{line-height: 49px;}
.home-banner .desc p{margin-bottom:30px;}
.home-banner-inner{padding-top:140px;}
.ux-title{font-size: 70px;}
/***** section title *****/
h3.section-title{font-family: 'Poppins', sans-serif; }
h5.section-sub-title{font-family: 'Poppins', sans-serif; }

/***** services *****/
.ux-design-principle .desc{padding-left:55px;}

/***** case study *****/
section.section.case-study{padding:20px 200px 80px 200px;}
.case-study-item{min-height: 380px; margin-bottom:30px; display: flex; align-items: center; justify-content: center;}
.case-study-item:hover h2{font-weight: 700;cursor: pointer; opacity: 1;}
.case-anchor:hover {font-weight: 900;transform: scale(1.05);box-shadow: 1px 1px 15px rgb(234, 233, 232); cursor: pointer;}
.case-study-item:hover h5{font-weight: 600;cursor: pointer; opacity: 1;}
.case-study-inner h5{position: relative; padding-bottom:10px; opacity: 0.5;}
.case-study-inner h5::after{content: ''; position: absolute; background-color: #C00000; height: 4px; left: 0; right: 0; bottom: 0; width: 150px; margin: 0 auto; }
.line{background-color: #C00000; height: 4px; }

.case-study-page-item .section-top h5{position: relative; padding-bottom:10px;}
.case-study-page-item .section-top h5::after{content: ''; position: absolute; background-color: #C00000; height: 4px; left: 0; right: 0; bottom: 0; width: 150px; margin: 0 auto; }
.case-study-page-item-main{margin-top:120px;}
.case-study-page-item-main .content-item{padding-right: 20px;}
.owl-carousel.owl-case .owl-nav button:hover{background: transparent !important;  color: #C00000; }
.owl-carousel.owl-case{position: relative;}
.owl-carousel.owl-case .owl-nav button{background: transparent; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #707070; transition: 0.5s ease-in-out; border-radius: 0; }
.owl-carousel.owl-case button:focus{outline:none;}
.case-right-item{padding-left:50px;}
.case-carousel-main.white-bg{padding:20px; margin-top:50px; background-color: transparent;}
.case-carousel-main.white-bg.no-mar{padding:20px; margin-top:0;}
.owl-carousel.owl-case .owl-prev{position: absolute; top:45%; left:-45px;}
.owl-carousel.owl-case .owl-next{position: absolute; top:45%; right:-45px;}
.img-desc{padding-left:15px;}
.image.white-bg.last{padding:30px;}
.case-right-item.last{padding-left:0;}

/***** footer *****/
#footer{
    padding: 150px 200px 180px 200px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}
#footer::after{
    content: '';
    position: absolute;
    height: 360px;
    width: 120px;
    z-index: 1;
    background-color: #C00000;
    top: 136px;
    left: 0;
}
.contact-steve span{position: relative; padding-bottom:5px;}
.contact-steve span::after{
    content: '';
    position: absolute;
    background: #C00000;
    height: 2px;
    width: 100%;
    bottom: 0;
    left: 0;
}
.add-tem {
    display: flex;
    align-items: center;
}
.add-tem{margin-bottom:30px;}
.icn-img{width: 65px;}
.add-tem .val{color:#000;}
.add-tem .val a{color:#000;}
.navbar{padding:0;}
.case-anchor{display: block;}


/* Image Shadow */

.image-shadow{box-shadow: 0 6px 20px 0 rgba(204, 204, 204, 0.8);}
.image-shadow-gallery{box-shadow: 0 8px 6px -6px rgba(204, 204, 204, 0.8);}



/***** media query *****/
@media(max-width: 1900px){
    h1{font-size:65px; margin:0;font-family: 'Roboto', sans-serif;}  
    h2{font-size:45px; margin:0;font-family: 'Roboto', sans-serif;} 
    body{font-size: 22px; line-height: 36px;}
    .home-banner{height: auto;}
}
@media(min-width: 1900px)
{
    #header{position: fixed; z-index: 1030; width: 100%; padding:50px 230px;}
    #header.fixed-top{padding: 20px 230px;}
    .navbar-brand h5{margin-left: -30px}
}
@media(max-width: 1440px){
    .home-banner{padding:0 120px; height: auto;}
    #footer::after{height: 310px; width: 80px; }
    .home-banner::after{height: 310px; width: 80px; }
    body{font-size: 20px; line-height: 34px;}
    h1{font-size:60px; margin:0;font-family: 'Roboto', sans-serif;}  
    h2{font-size:40px; margin:0;font-family: 'Roboto', sans-serif;}  
    h3{font-size:32px; margin:0;font-family: 'Roboto', sans-serif;}  
    h4{font-size:28px; margin:0;font-family: 'Roboto', sans-serif;}  
    h5{font-size:22px; margin:0;font-family: 'Roboto', sans-serif;}  
    h6{font-size:18px; margin:0;font-family: 'Roboto', sans-serif;}
    .main-menu .navbar-nav li.nav-item a.nav-link{font-size: 16px;}
    section.section{padding:80px 120px;}
    section.section.case-study {
        padding: 30px 120px 60px 120px; 
    }
    .case-right-item{padding-left:20px;}
    .case-study-page-item-main .content-item{padding-right:0;}
}
@media(max-width: 1199px){
    .navbar{display: flex; justify-content: flex-end;}
    .navbar-toggler-icon i{font-size: 30px;}
    body::after{display: none;}
    .main-menu .navbar-nav li.nav-item{border-right: none;}
    .navbar-toggler:focus{outline:none;}
    .navbar-nav{background-color: transparent; padding:20px 0;margin-top:10px;}
    .main-menu .navbar-nav li.nav-item a.nav-link{ border-bottom: 1px solid rgba(192, 0, 0, 0.2); padding:0; margin:0 25px; margin-bottom: 15px; padding-bottom:10px;}
    .main-menu .navbar-nav li.nav-item:last-child a.nav-link{border-bottom:none; margin-bottom:0;}
    section.section{padding:60px 30px;}
    body{font-size: 17px; line-height: 28px;}
    h1{font-size:45px; margin:0;font-family: 'Roboto', sans-serif;}  
    h2{font-size:35px; margin:0;font-family: 'Roboto', sans-serif;}  
    h3{font-size:30px; margin:0;font-family: 'Roboto', sans-serif;}  
    h4{font-size:26px; margin:0;font-family: 'Roboto', sans-serif;}  
    h5{font-size:22px; margin:0;font-family: 'Roboto', sans-serif;}  
    h6{font-size:18px; margin:0;font-family: 'Roboto', sans-serif;}
    .home-banner{padding:0 100px; height: auto;}
    .home-banner .desc{line-height: 32px;}
    section.section.case-study {padding: 30px 30px 50px 30px; }
    #header{padding:30px 30px;}
    #header.fixed-top{padding:15px 20px;}
    .case-right-item{padding-left:20px;}
    #footer {padding: 50px 100px 70px 100px; }
    #footer::after{height: 300px; width: 70px; }
    .home-banner::after{height: 300px; width: 70px; }
    .navbar-brand h5{margin-left: 0px;}
}
@media(max-width: 992px){
    section.section{padding:50px 0px;}
    #footer{padding: 50px 0 50px 0;}
    .home-banner::after{display: none;}
    .home-banner{padding:0 30px; height: auto;}
    .ux-title{font-size: 40px;}
    body{font-size: 16px; line-height: 25px;}
    h1{font-size:40px; margin:0;font-family: 'Roboto', sans-serif;}  
    h2{font-size:32px; margin:0;font-family: 'Roboto', sans-serif;}  
    h3{font-size:28px; margin:0;font-family: 'Roboto', sans-serif;}  
    h4{font-size:25px; margin:0;font-family: 'Roboto', sans-serif;}  
    h5{font-size:22px; margin:0;font-family: 'Roboto', sans-serif;}  
    h6{font-size:18px; margin:0;font-family: 'Roboto', sans-serif;}
    #header{padding:30px 30px;}
    #header.fixed-top{padding:15px 30px;}
    section.section.case-study{padding:30px;}
    .case-study-page-item-main .content-item{padding-right:0;}
    .case-right-item{padding-left:10px;}
    .owl-case-1 .owl-dots{margin-top:40px !important;}
    .owl-case-1 .owl-dots .owl-dot.active span{background:#C00000; opacity: 1;}
    .owl-case-1 .owl-dots .owl-dot span{background:#C00000; opacity: 0.5;}
    .case-study-page-item-main{margin-top:80px;}
    #footer::after{display: none;}
    #header .navbar-brand{display: initial;}
}
@media(max-width: 767px){
    
    .home-banner{padding:0; height: auto;}
    h1{font-size:35px; margin:0;font-family: 'Roboto', sans-serif;}  
    h2{font-size:30px; margin:0;font-family: 'Roboto', sans-serif;}  
    h3{font-size:25px; margin:0;font-family: 'Roboto', sans-serif;}  
    h4{font-size:22px; margin:0;font-family: 'Roboto', sans-serif;}  
    h5{font-size:20px; margin:0;font-family: 'Roboto', sans-serif;}  
    h6{font-size:16px; margin:0;font-family: 'Roboto', sans-serif;}  
    body{font-size: 16px; line-height: 25px;}
    section.section{padding:30px 0px;}
    #footer{padding: 30px 0 30px 0;}
    #header {padding: 15px 0; }
    #header.fixed-top{
        padding: 15px 0;
    }
    .home-banner .desc{line-height: 34px;}
    .home-banner-inner{padding-top:130px; padding-bottom:50px;}
    .right-content{margin-top:30px;}
    .ux-design-principle .desc{padding-left:0; text-align: center;}
    section.section.case-study{padding:30px 0;}
    .case-right-item{padding-left:0;}
    .case-right-item .image{text-align: center; margin-top:30px;}
    .case-study-page-item-main{margin-top:60px;}
    .case-carousel-main.white-bg.no-mar{margin-top:30px;}
    .image.white-bg.last img{margin-bottom:30px;}
    .add-tem .val a{font-size: 14px;}
    #header .navbar-brand{display: initial;}
}

@media(min-width: 320px) and (max-width: 768px)
{
    .navbar-nav{background-color: #fff; padding:20px 0;margin-top:10px;}
}