@import url(global.css); 
@import url(root.css); 
/* Home page css start */
header{display: block;}
.logo {margin: 0;line-height:70px;}
.logo img{max-height: 55px;}
.navbar{margin: 0; padding: 0; background:var(--text-white);} 
.nav-link{font-size:var(--font-size-18);}
.nav-item + .nav-item{margin-left: 28px;}
.banner{ display: block; overflow: hidden;background: var(--light-blue-color);margin-top:70px; color:var(--text-white);}
.banner figure {display: block;position: relative;margin: 0;}
.banner .bannercontent{text-align:left;position:absolute;left:0;top:5%;right:0;}
.banner .bannertext{display:block;padding-top: 20px;}
.banner .bannertext span{display:block;}
.banner .bannertext h1{color:var(--orange-text);margin-bottom: 20px;}
.banner .bannertext h1 span{display: block;}
.banner .bannertext p{font-size:var(--font-size-30);}
.banner .bannertext a{display: inline-block;background:var(--box-blue);border-radius:5px;padding: 5px 22px;font-size:var(--font-size-25);}
 
#about, #key, #solution{display: flex; flex-direction: column; padding:70px 0 0;}
#about .abt-box{background:var(--box-light-blue);border-radius:var( --border-radius-key);box-shadow:var(--shadow-white);}
#about .abt-box img{mix-blend-mode: multiply;}
#about .abt-box p{font-size:var(--font-size-21);}
#about .city, #key .key-box {display: flex; flex-direction: column;}
#about .city h2, #solution h3{color:var(--text-white);}
#about .city .crawsal, #key .key-box .crawsal{ display:block;margin:10px -10px;} 
#about .city .crawsal .item { margin: 0 10px;padding:30px;background:var(--text-white); text-align: center;border-radius:15px;} 
#about .city .crawsal{ display:block;margin:10px -10px;} 
#about .city .crawsal .item img{max-height: 78px;}
#about .city .crawsal .item h4{margin:15px 0;font-weight: 600;}
#about .city .crawsal .item a{display: inline-flex;background:var(--box-blue);color:var(--text-white);border-radius:5px;padding: 5px 22px;}
#key .key-box .item { margin: 0 10px;padding:20px 10px;} 
#key .key-box .item .box-wraper{ box-shadow: var(--shadow-white); border-radius:15px;padding: 15px;}
#key .key-box .item .box-wraper p{font-size: var(--font-size-16);}
#key .key-box .item .box-wraper h4{margin: 15px 0; font-weight: 600;}
#solution .solution-box{display: block;margin-top: 30px;}
#solution .solution-box .solution-box-item{display: flex; flex-direction: row;background: var(--text-white);border-radius: 18px;padding: 10px 10px 10px 110px;position: relative;}
#solution .solution-box .solution-box-item i{background: var(--orange-text);position: absolute;left: 15px;width: 80px;height: 80px;border-radius: 22px;text-align: center;line-height: 80px;top: 15px;}
#solution .solution-box .solution-box-item i img{max-height: 48px;}
#solution .solution-box .solution-box-item p{font-size: var(--font-size-27);}
footer{display:flex; flex-direction:row;justify-content: center; padding: 10px 0; background: var(--box-light-blue);font-size: var(--font-size-18); text-align: center; color: var( --text-dark-blue);}
#attend {
    display: flex;
    flex-direction: column;
    padding: 70px 0 0;
}
    #attend h3{var(--font-size-48);}
    #attend p {
        font-size: var(--font-size-22);
    }