@charset "utf-8";

*{box-sizing: border-box;}
body{font-family:Arial, Helvetica, sans-serif;margin:0;padding:0;font-size:15px;color:#333;}
div, form, img, dl, dt, dd,figure{margin:0;padding:0;border:0;}
h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
a{color:#222;text-decoration:none;}
a:hover{opacity: 0.8;transition: all 0.5s}
.red{color:red}
.container{width:1160px;margin:0 auto;position:relative;padding: 0 10px;}

header {border-bottom: 1px solid #eee}
header nav{display: flex;justify-content: space-between}
header nav .logo{margin: 10px 0 5px}
header nav .navCon {position:relative;z-index: 100;height: 50px;margin: 25px 0 0;font-size: 17px}
header nav .navCon ul{display: flex;}
header nav .navCon li{list-style: none}
header nav .navCon li a{margin: 15px;padding: 20px 5px}
header nav .navCon li a.current{border-bottom: 1px solid #00a0e9}

.pics{margin-top:30px;}
.pics ul{display: flex;flex-wrap: wrap;padding: 0;margin: 0}
.pics li{list-style:none;width: 20%;height: 446px;margin-bottom: 15px}
.pics li:nth-child(2){width: 40%;height: 446px;}
.pics li .item{margin-bottom:12px;width: 95%;height: 218px;background: #efefef;margin-left: 2.5%;position: relative}
.pics li .item figure{width: 100%;height: 100%}
.pics li .item img{width: 100%;height: 100%;border: 1px solid #eee}
.pics li:nth-child(2) .item{width:97.3%;height: 448px;background: #efefef;margin-left: 1.35%}
.pics li .item div{position: absolute;bottom: 0;text-align: center;background: rgba(0,0,0,0.5);color: #fff;padding: 5px;width: 100%}

.services.index {margin:50px auto}
.home .heading{display: flex;justify-content: center}
.home .heading h2{font-size: 35px;margin-bottom: 20px; }
.home .heading a{margin-top: 42px;margin-left:10px;display: block;padding: 5px }
.services.index ul{padding: 0;margin: 0;display: flex;flex-wrap: wrap}
.services.index li{list-style: none;width: 50%;border-top:1px solid #eee;padding-top: 20px;padding-bottom: 20px}
.services.index li a{display: flex}
.services.index li figure{width: 35%;margin-left: 1%}
.services.index li figure img{width:100%;height: auto}
.services.index li .right{width:60%;margin-left: 15px;}
.services.index li .right h3{font-size: 25px;margin-top: 15px;margin-bottom: 0}
.services.index p{font-size: 16px;margin-top: 12px}

.blogs.index {margin:0 auto 30px}
.blogs.index ul{padding: 0;margin: 0}
.blogs.index li{list-style: none;width: 100%;border-top:1px solid #eee;padding: 10px}
.blogs.index li h3{font-size:18px;margin-bottom: 0}
.blogs.index li p{font-size:16px;margin-top: 12px}

.links ul{border-top: 1px solid #eee;padding: 20px 0 7px;display: flex;flex-wrap: wrap;line-height: 1.8}
.links ul li{margin-left: 30px;}
.links ul :after{clear: both;content: ' ';display: block}

footer{margin-bottom: 50px!important;}
footer .box{border-top: 1px solid #eee;display: flex;justify-content: space-between;padding-top: 15px;margin-top: 20px}
footer .left{display: flex;}
footer .left .copyright{margin-left: 10px;}
footer .left nav ul{padding: 0;margin: 0;margin-left: 20px;display: flex}
footer .left nav li{list-style: none;}
footer .left nav li a{width: 21px;height: 21px;background-repeat:no-repeat;display: block;margin-left: 10px; }
footer .left nav li a.facebook{background-image: url("../images/facebook.webp")}
footer .left nav li a.pinterest{background-image: url("../images/pinterest.webp")}
footer .left nav li a.hashnode{background-image: url("../images/hashnode.webp")}
footer .left nav li a.mastodon{background-image: url("../images/mastodon.webp")}
footer .right nav ul{display: flex;padding: 0;margin: 0}
footer .right nav li{list-style: none;}
footer .right nav li a{padding: 0 5px;margin: 0 5px}

.subpage .services.index{margin-top: 0}
.subpage .services.index ul li:nth-child(1),.subpage .services ul li:nth-child(2){border: none!important;}
.subpage .blogs.index li:first-child{border: none!important;}
.subpage .heading{background: url("../images/bg.webp");text-align: center;padding: 5px 0 22px}
.subpage .heading h1{font-size: 30px;margin-bottom: 5px}
.subpage .pic{float: right;width: 40%;padding-left: 20px}
.subpage .pic.small{float: right;width: 30%;border: 1px solid #eee;margin-left: 20px;padding-left:0}
.subpage .pic img{width: 100%;height: auto}
.subpage main .container{margin-top: 40px!important;margin-bottom: 40px;}
.subpage main .container:after{clear: both;content: " ";display: block}
.subpage.details main .container a{color: #00a0e9}
.subpage main h1{max-width: 1160px;text-align: center;margin: 20px auto 10px}
.subpage.details main .container {line-height: 1.4;font-size: 16px;}
.subpage.details main .container li{margin: 15px 0}
.subpage.details main .container img{max-width: 100%;}
.subpage.details main .container .pic.small img{float: left;}
.subpage.details main .container .list a{color: #333}
.aMore{border: 1px solid #eee;padding: 5px 15px;border-radius: 5px;margin-top: 5px;color: #fff!important;display: inline-block;text-align: center;background: #00a0e9}

.page404Box{text-align: center;margin: 150px auto 150px}
.margin2030{margin:20px 0 30px}

@media (max-width:1160px){
    .container{width:100%;}
}

@media (min-width:768px){
    header .btn{display: none}
}

@media (max-width:767px){
    .subpage .pic{width: 100%;float: none;padding-left: 0}
    .subpage .pic.small{width: 100%;float: none;padding-left: 0;margin-left: 0}
    header nav .logo img{width: 150px;height: auto}
    header .navCon.active{display: block;transform: scaleY(1);
        max-height: 100vh;}
    header .navCon{position: absolute!important;top:45px;right:10px;box-shadow: 0 0 5px 0px #ccc;
        transition: all 0.3s;
        transform: scaleY(0);
        max-height: 0;
        height: auto!important;
        transform-origin: top;
    }
    header nav .navCon{margin-top: 10px}
    header .navCon ul{display: block!important;margin: 0;padding: 15px 0;background: #fff;}
    header nav .navCon li{padding: 5px}
    header nav .navCon li a{padding: 7px 20px;margin: 0;display: block}
    header nav .navCon li a.current{border: none;}

    header .btn{display: block;width: 30px;margin-top: 16px;}
    header .btn div{height: 4px;margin-top: 6px;transition: 0.3s}
    header .btn .line1{background: #0da6f6}
    header .btn .line2{background: #ed9b00}
    header .btn .line3{background: #18a561}
    header .btn.active .line1{transform-origin: 1px 6px;transform: rotate(45deg)}
    header .btn.active .line3{transform-origin: 3px -1px;transform: rotate(-45deg)}
    header .btn.active .line2{scale: 0}

    .pics li{width:100%;display: flex;height:auto;margin-bottom: 0}
    .pics li .item{width: 46.5%;height: 150px}
    .pics li:nth-child(2) {
        width: 100%;
        height: 320px;
    }
    .pics li:nth-child(2) .item {
        width: 95.8%;
        height: auto;
        background: #efefef;
        margin-left: 2.45%;
    }
    .pics li .item div{font-size: 13px}

    .services.index{margin: 10px auto 0;}
    .services.index li{width: 100%;}
    .services.index li a{align-items: center;}
    .services.index li .right h3{margin-top: 0;font-size: 17px;}
    .services.index p{font-size: 14px;margin-top: 5px}

    .blogs.index li h3{font-size: 16px;}
    .blogs.index li p{    font-size: 14px;}
    .home .heading h2{margin-top: 10px;margin-bottom: 10px;}
    .home .heading a{margin-top: 24px;}
 
    footer .box{display: block}
    footer .left{display: block}
    footer .left nav ul{margin: 20px 0}
    footer .right nav ul{flex-wrap: wrap;}
    footer .right nav ul a{line-height: 1.7;margin:0;padding: 0 7px;}
}