html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}
.row{max-width:unset;}
p{margin-bottom:15px;}
body {
  margin-bottom: 60px;
}
.footer{background:var(--dark-blue);padding-top:60px;padding-bottom:40px;}
.footer .row{max-width:unset;}
.footer a, .footer p, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .footer span, .footer label {color:#fff;}
.footer .footer-logo .flogo {height: 67px;margin-bottom: 4px;}
.footer img.social-icon{width:40px;height:auto;}
.footer .subscribe {display:flex;margin-top:15px;max-width:600px;}
.footer .subscribe input{margin:0;padding:3px 10px;height:52px; font-size:16px;}
.footer .subscribe button{margin:0;}
.footer .footer-logo h5{max-width:500px;}


.main-content{padding-top:69px;}
.centered {text-align:center;}

.home .homeslider{background:url(/images/home/Floating-City-08.jpg) no-repeat top;width:100%;aspect-ratio:16/6;position:relative;background-size:cover;}
.home .homeslider .maintext{padding:40px;background:#ffffff99;text-align:center;margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.home .homeslider .maintext h2{font-size:4rem;}
.home .homeslider .maintext h4{font-size:2rem;}
.home .maindesc{text-align:justify;}
.home .area-develop {background:var(--dark-blue);text-align:center;}
.home .adv{background:var(--dark-blue);text-align:center;}
.home .adv h2{font-size:48px;color:#fff;}
.home .area-develop h2,
.home .area-develop h3,
.home .area-develop h4,
.home .area-develop p,
.home .area-develop hr{color:#fff;}
.home .develop h2{text-align:center;margin-bottom:2rem;}
.home .area-develop .col-md-4{padding:10px 30px;}

.about .develop-model h2, .about .develop-model p.subtitle{padding-left:10px;}
.about .develop-model-detail{background:var(--dark-blue);text-align:center;padding:2rem;height:100%;position:relative;}
.about .develop-model-detail h3,.about .develop-model-detail p{color:#fff;}
.about .operation{background:var(--dark-blue);}
.about .operation h2, .about .operation p{color:#fff;margin-bottom:15px;}
.quote {text-align:center;}
.quote img{width:100%;max-width:642px;}

.banner.oceanx-banner{height: calc(100vw * 0.35); background-image: url('/images/projects/oceanx/oceanx1-min.jpg');background-size:cover;background-position-y:center;}
.imgfull img{width:100%;margin-bottom:30px;}
.mission{background:var(--dark-blue);padding:4rem 3rem;margin:2.5rem auto;}
.mission *{color:#fff;text-align:center;}
.mission h1{font-size:3rem;font-weight:bold;}
.mission p{font-size:1.35rem;}

.openx .slider{background:url('/images/projects/openx/AI shipping-04.jpg') no-repeat bottom;background-size:cover; width:100%;aspect-ratio:16/7.5;position:relative;}
.openx .slider .maintext{padding:120px 50px;border-radius:55%; background:#ffffff99;text-align:center;margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width:560px;}
.openx .slider .maintext h2{font-size:4rem;}    
.openx .slider .maintext h4{font-size:2rem;}
.openx .whyopenx p:last-child{margin-bottom:0;}
.openx .whyopenx h1,.openx .whyopenx h3,.openx .whyopenx p{color:#fff;}
.openx .whyopenx h3{margin-bottom:20px;}
.openx .whyopenx .woxblock{position:relative;height:100%;}
.openx .whyopenx .woxct{text-align:center;margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.openx .techno{background:var(--dark-blue);}
.openx .block-content {text-align:center;max-width:46rem;margin:0 auto;}
.openx .techno .block-content h2, .openx .techno .block-content h4{color:#fff;}
.openx .techno .block-content h2{margin-bottom:20px;}
.openx .techno .btn.btn-contact{background:#fff; color:var(--dark-blue);font-size:24px;}
.openx.fund .block-content{max-width:unset;}
.block-content a {margin-top: 4rem;font-size: 30px;color: #fff;}


.sandbox .benefits {background-color: var(--dark-blue);color: #fff;}
.sandbox .benefits h2{color:#fff;}
.sandbox .benefits .objitem {
    width: 100%;
    display: flex;
    background: #fff;
    color: #444444;
    margin-bottom: 20px;
    -moz-box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
    box-shadow: 0 0 3px #ccc;
    border-radius: 5px;
    overflow: hidden;
}
.sandbox .benefits .objitem .objnumber {
    padding: 3rem;
    font-size: 2.5rem;
    font-weight: bolder;
    width: 200px;
    text-align: center;
    color: red;
}
.sandbox .benefits .objitem .objcontent {
    width: 100%;
    padding: 3rem;
    background: #ddd;
    position: relative;
}
.sandbox .benefits .objitem .objcontent .jct {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 2rem;
    font-size:1.35rem;
}
.sandbox .vehicles .vhimg {
    padding:5px;
    aspect-ratio: 16 / 9;
    background-color: red;
    margin-bottom: 20px;
    border-radius: 5px;
}
.sandbox .vehicles .col-xs-6 {
    width: 50%;
}
.sandbox .vehicles .vh1 {
    background: url('/images/projects/oceanx/Pyka Pelican Cargo-01-min.jpg') no-repeat center;
    background-size: cover;
}
.vehicles .vh2 {
    background: url('/images/projects/oceanx/ATLIS-min.jpg') no-repeat center;
    background-size: cover;
}
.vehicles .vh3 {
    background: url('/images/projects/oceanx/Regent Viceroy-min.jpg') no-repeat center;
    background-size: cover;
}
.vehicles .vh4 {
    background: url('/images/projects/oceanx/Port-Liner-electric-barge.webp') no-repeat center;
    background-size: cover;
}

.blog-posts--row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.blog-posts--row a {
    text-decoration: none;
}
.blog-card {
    position: relative;
    border: solid 1px #dcdcdc;
    transition: none;
}
.four-news .blog-posts--row .blog-card {
    width: calc((100% / 4) - 10px);
    margin: 0 5px;
}
.blog-card .image {
    position: relative;
    margin: 0;
    width: 100%;
}

.blog-card .content {
    position: relative;
    padding: 2rem 2rem 5rem;
}
.four-news .blog-card .content {
    position: relative;
    padding: 2rem 1rem 5rem;
}
.blog-card .image::before {
    content: '';
    display: block;
    height: 0;
    padding-top: 62%;
}
.blog-card .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: unset;
}
.blog-card .read-more {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    font-size: 14px;
    width: 100%;
    max-width: calc(100% - 4rem);
}
.four-news .blog-card .read-more {
    left: 1rem;
    max-width: calc(100% - 2rem);
}
.blog-card .content .copy .title {
    color: #000;
    font-size: 1.25rem;
    font-weight: 700;
    margin: .75rem 0 1.25rem;
    line-height: 1.3em;
    text-transform: capitalize;
}
.blog-card .content .copy span {
    display: block;
    line-height: 1em;
    font-size: 10px;
    font-weight: 600;
    color: #555e61;
    text-transform: uppercase;
}


@media (max-width: 1024px) {
    .home .homeslider{aspect-ratio:1.5;}
    .about .develop-model-detail{padding:1rem;}
    .four-news .blog-posts--row .blog-card {
        width: calc((100% / 3) - 10px);
        margin: 0 5px;
    }
}

@media (max-width: 960px) {
    .openx .slider .maintext{padding: 20px 80px;}
    .four-news .blog-posts--row .blog-card {
        width: calc((100% / 2) - 10px);
        margin: 0 5px;
    }
}

@media (max-width: 767px) {
    .home .homeslider .maintext h4{font-size:24px;}
    .home .adv h2{font-size:35px;}
    .home .maindesc h3{font-size:25px;}
    .home .sp .middle-thing, .home .sp .middle-thing h4 {text-align:center;}
    .home .develop.pb-70{padding-bottom:0;}

    .openx .slider {aspect-ratio:1.5;}
    .openx .slider .maintext{padding: 8px 82px;}
    .openx .whyopenx .woxct{position:relative; top:unset;left:unset;transform:unset;}
    .openx.fund .slider .maintext{padding: 50px 70px;min-width:370px;}
    .openx.fund .slider .maintext h2{font-size:2.3rem;}
    .openx.fund .slider .maintext h4{font-size:20px;}
    .sandbox .benefits .objitem {display:table;}
    .sandbox .benefits .objitem .objnumber {padding:1.5rem;width:100%;}
    .sandbox .benefits .objitem .objcontent .jct {position:relative;top:unset; left:unset;transform:none;padding:0;}
    .pt-120{padding-top:60px;}
    .pb-120{padding-bottom:60px;}
    .about .spcontain .pt-70{padding-top:0;}
    .openx .whyopenx h3{text-align:center;}
    .blog-posts--row a {
        margin-bottom: 30px;
    }
    .four-news .blog-posts--row .blog-card{width:100%;margin-bottom:30px;}
}