@import url('https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

body {font-family: 'Rubik', sans-serif; font-weight: normal; font-style: normal; font-size: 15px; line-height: 1.5; color:#000;}


/* ------------------------
    Typography
------------------------*/
h1, h2, h3, h4, h5, h6{font-weight:normal; margin-top: 0px; margin-bottom: 0px; text-transform: capitalize;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }
h1 { font-size: 70px; font-style: normal; line-height: 80px; font-weight: 700; text-transform: capitalize; color: #000061;}
h2 { font-size: 36px; font-style: normal; line-height: 46px; font-weight: 500; color: #23244a; text-transform: capitalize; margin-bottom: 10px; position: relative;}
h3 { font-size: 30px; font-style: normal; line-height: 36px; }
h4 { font-size: 24px; font-style: normal; text-transform: none; margin-bottom: 10px; font-weight: 500; line-height: 30px; color: #000;}
h5 {
    font-size: 20px;
    font-style: normal;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 500;
    line-height: 26px;
    color: #000061;
}
h6 { font-size: 18px; font-style: normal; line-height: 24px; }
ul { margin: 0px; padding: 0px; }


/* ------------------------
    Helper class
------------------------*/

.lead{font-weight: normal; font-size: 16px; line-height: 30px;}
.z-index-0{z-index: 0; position: relative;}
.z-index-1{z-index: 1; position: relative;}
section{padding: 20px 0 15px 0;}
.section-title{margin-bottom:30px;}
.section-title p{font-size: 16px;}
.theme-bg .section-title p, .dark-bg .section-title p{color: rgba(255,255,255,0.8)}

.line-h-2{line-height: 1.6;}
.line-h-3{line-height: 1.7;}
.line-h-4{line-height: 1.8;}
.line-h-5{line-height: 1.9;}

.letter-space-1{letter-spacing: 5px;}
.letter-space-2{letter-spacing: 10px;}
.letter-space-3{letter-spacing: 15px;}


/* ------------------------
    Text color
------------------------*/
.text-theme {
    color: #000061;
}
.text-black{color:#000 !important;}
.text-grey{color:#aaaaaa;}
.text-yellow{color:#000061;}
.text-rgba{color: rgba(255,255,255,0.8);}


/* ------------------------
    Background color
------------------------*/
.white-bg{background-color:#ffffff !important;}
.dark-bg{background-color:#121628;}
.grey-bg{background-color:#f8f8f8;}
.theme-bg{background-color:#000061;}
.transparent-bg{background-color: inherit !important;}


/* ------------------------
    Pattern
------------------------*/
.pattern{width: 100%; background-size: inherit !important; background-position: 0px 0px; background-repeat: repeat !important; animation: animatedBackground 20s linear infinite;
-ms-animation: animatedBackground 20s linear infinite; -moz-animation: animatedBackground 20s linear infinite; -webkit-animation: animatedBackground 20s linear infinite;}


/* ------------------------
    Banner
------------------------*/
.fullscreen-banner{position: relative; min-height: 800px;}
[data-bg-img]{background-size: cover; background-position: center center; background-repeat: no-repeat;}
.align-center{position: absolute; top: 50%; width: 100%; z-index: 9;}
.align-end{position: absolute; bottom: 0; width: 100%; z-index: 9;}
.fullscreen-banner .btn{color: #ffffff;}
.banner-1::before {border: 10px solid rgba(255,255,255,0.1); content: ""; height: 120%; left: 50%; position: absolute;
  top: -10%; width: 80%; z-index: -1;}
.fullscreen-banner .owl-carousel, .fullscreen-banner .owl-stage-outer, .fullscreen-banner .owl-stage, .fullscreen-banner .owl-item, .fullscreen-banner .item { height: 100%; }


/* ------------------------
    Countdown
------------------------*/
.countdown{text-align: center; width: 100%}
.countdown > li{margin-bottom: 50px; font-weight: bold; display: block; text-align: center; list-style-type: none;}
.countdown > li:last-child{margin-bottom: 0;}
.countdown > li span{font-size:70px; font-weight:500; line-height:60px; margin-bottom: 20px; display: inline-block;}
.countdown > li p{font-size:20px; text-transform: uppercase; line-height:30px; margin-bottom: 0; color: #000061;}
.dark-bg .countdown > li{border-color:rgba(255,255,255,0.2) }

/* ------------------------
    Terms and Conditions
------------------------*/
.terms-and-conditions .title{margin-bottom:10px;} 
.terms-and-conditions p{margin-bottom:25px;}
.terms-and-conditions ul.list{margin-bottom:20px; display:block;}
.terms-and-conditions ul.list li i{padding-right:12px; font-size:15px;}

/* ------------------------
    Privacy Policy
------------------------*/
.privacy-policy .title{margin-bottom:10px;} 
.privacy-policy p{margin-bottom:25px;}
.privacy-policy ul.list{margin-bottom:20px; display:block;}
.privacy-policy ul.list li i{padding-right:12px; font-size:15px;}

/* ------------------------
    Contact
------------------------*/
.contact-main {/*background: #fff; padding: 30px;*/ border-bottom: 2px solid #000061;}
.contact-info li {padding-left: 50px; position: relative;}
.contact-info li i{position: absolute; left: 0; top: 0; line-height: 24px; font-size: 30px; color: #000061; text-align: center;}
.contact-info li span{font-size: 16px; color: #23244a; font-weight: bold; text-transform: uppercase; display: block; margin-bottom: 8px;}
.contact-info li p{margin-bottom: 0; line-height: 24px;}
.contact-info li a{color: #555;}
.dark-bg .contact-info li a{color: #ffffff;}
.contact-info li a:hover{color: #000061;}
.theme-bg .contact-info span, .dark-bg .contact-info span{color: #ffffff}
.theme-bg .contact-info li i{color: #ffffff;}
.theme-bg .contact-info li a{color: #ffffff;}
.theme-bg .contact-info li a:hover{color: #000;}
.contact-box {position: absolute; top: 50%; z-index: 99; transform: translateY(-50%); width: 100%;}

.form-group{margin-bottom: 20px; position: relative;}
 label{font-size: 14px; color: #333}
.form-control{height: 50px; border-radius: 0; font-size: 13px; background: none; border: none; border-bottom: 2px solid #f5f5f5; box-shadow: none;}
.grey-bg .form-control{background: #ffffff}
textarea.form-control{height: 150px;}
.form-control:focus{box-shadow: none; border-color: #000061;}
select.form-control {/*-moz-appearance: none; -webkit-appearance: none; appearance: none;*/ height: 50px !important;}
iframe{width: 100%; border: none; pointer-events: auto;}
.iframe-h{height: 500px !important;}
.iframe-h-2{height: 900px !important;}
.help-block.with-errors {position: absolute; color: red; right: 0; font-size: 10px; line-height: 14px;}
.form-control::-moz-placeholder{color: #555}
.map iframe {border: 0px; width: 100%; height: 100%; z-index: 1; }


.contact-btn {cursor: pointer; display: inline-block; position: fixed; right: -39px; top: 40%; z-index: 99; 
transform: translateY(-50%) rotate(90deg); -webkit-transform: translateY(-50%) rotate(90deg); -o-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); -moz-transform: translateY(-50%) rotate(90deg);}
.contact-bg { background: #ffffff; color: #000061; text-transform: uppercase; position: relative; display: block; padding: 10px; font-weight: 500; z-index: 10; -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,0.1); box-shadow: 0 0 13px 3px rgba(0,0,0,0.1);}
.contact-btn:hover .contact-bg{background: #000061; color: #ffffff}
.contact-form {background: #ffffff; height: 100%; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); padding: 80px 30px 30px; width: 450px; position: fixed; right:-600px; top: 0; z-index: 2000;}
.close-btn {background: #000061; color: #fff !important; cursor: pointer; font-weight: bold; padding: 7px 15px; position: absolute; right: 20px; top: 10px;}
.header-3 .contact-btn{position: inherit; transform: inherit; top: inherit; right: inherit;}
.header-3 .contact-bg {background: #000061; box-shadow: none; color: #fff; padding: 25px 40px;}

/* ------------------------
    About Us
------------------------*/
.about-img{position: relative;}
.about-img::before {border:5px solid rgba(255, 255, 255, 0.2); bottom: 14px; content: ""; left: 14px; position: absolute; right: 14px; top: 14px;}


/* ------------------------
    Video
------------------------*/
.video-btn {display: inline-block;}
.video-btn-pos {left: 50%; position: absolute; top: 50%; margin-top: -22.5px; margin-left: -50px;}
.video-btn .btn-play {background: #000061; color: #fff; height: 45px; width: 100px; line-height: 45px; -webkit-border-radius: 50px;
 border-radius: 5px; text-align: center; font-size: 26px; cursor: pointer; display: inline-block;}
.video-btn .btn-play i{line-height: inherit;} 
.theme-bg .video-btn .btn-play, .dark-bg .video-btn .btn-play{background: #ffffff; border-color: #ffffff; color: #000061;}
.html5-video {height: 100%; left: 0; opacity: 1; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -2;}
.html5-video video {width: 100%;}


/* ------------------------
    Side Background
------------------------*/
.img-side img{max-width: 100%}
.img-side.img-right {right: 0;}
.img-side.img-left {left: 0;}
.img-side {padding: 0; position: absolute!important; top: 0px; height: 100%; overflow: hidden; z-index: 9;}
.img-side .owl-carousel, .img-side .owl-stage-outer, .img-side .owl-stage, .img-side .owl-stage, .img-side .owl-item, .img-side .owl-item .item{height: 100%}
.mat{
    margin-left:18px;

}
.title1 {
    color: #000061 !important }

.motes {
    margin: 0 50px;
}

.pbox{
    margin: 0 50px 20px;
}

@media(min-width: 320px) and (max-width: 479px){
    .pbox {
        margin: 0 -3px 20px;
    }
}

@media(min-width: 480px) and (max-width: 768px) {
    .pbox {
        margin: 0 0px 0px;
    }
    

    
    
}

@media(min-width: 480px) and (max-width: 639px) {
    .pbox {
        margin: 0 0px 0px;
    }

    .caros {
        padding: 20px 172px !important;
    }
}

@media(min-width: 640px) and (max-width: 719px) {
    .pbox {
        margin: 0 0px 0px;
    }

    .caros {
        padding: 20px 205px !important;
    }
}

@media(min-width: 769px) and (max-width: 1024px) {
    .pbox {
        margin: 0 0px 20px;
    }
}

.log{
    padding: 10px;
}

.pbottom-20{
    padding-bottom: 20px;
}




.primary-footer a {
    color: #000;
}

    .primary-footer a:hover {
        color: #0000c7;
    }

.footer-list li a {
    position: static;
    z-index: 99;
    color: #000;
}

    .footer-list li a:hover {
        position: static !important;
        z-index: 99;
        color: #0000ff;
    }









/*.about-us{

    padding-top: 60px;
}*/




.prod-title {
    margin-bottom: -30px;
    font-size: 30px;
    position: relative;
    color: #000061;
    font-weight: 500;
}



.prod-title-sub {
    margin-bottom: 20px;
    font-size: 30px;
    position: relative;
    color: #000061;
    font-weight: 500;
    text-align: center;
}




.team-member .team-description a:hover {
    color: #000;
}


.reviews{

    background-color:#000!important;
}







.scoial-media-icon a {
    margin-right: 10px;
    border-radius: 15px;
    width: 8%;
    margin-right: 10px;
    display: inline-block;
}






    .scoial-media-icon a:hover {
        filter: brightness(80%);
        background-color: #000;
        border-radius: 15px;
        width: 8%;
        margin-right: 10px;
        display: inline-block;
    }




.social-icons a {
    position: relative;
    z-index: 2;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 28px;
    border-radius: 50%;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background-color: #000061;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}
.social-icons a:hover {
    background-color: #000000!important;
}


.social-media{

    padding-top:20px;
}



@media(max-width:767px) and (min-width:320px){

    .res-about-img {
        padding-top: 0px!important;
    }
    .res-isi{

        padding-bottom: 30px;

    }
    .res-our-prod {
        margin-bottom: -20px;
    }
    .dot {
        height: 11px!important;
        width: 11px!important;
        margin: 0 2px;
        background-color: #000;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
        cursor: pointer;
    }
    .slider-area {
        padding-top: 100px!important;
    }
    .active-dot {
        text-align: center;
        margin-top: -48px!important;
    }
    .welcome-padding {
        padding: 0px 0 20px 0!important;
    }

    .section-title {
        margin-bottom: 30px;
    }
    h5 {
        font-size: 16px!important;
        font-style: normal;
        text-transform: uppercase;
        margin-bottom: 10px;
        font-weight: 500;
        line-height: 26px;
        color: #000061;
    }

}




.isi{

    width: 50%;
}




@media(max-width: 1023px) and (min-width:768px){

    .res-isi {
        padding-bottom: 30px;
    }
    .isi {
        width: 33%;
    }
    .res-about-img {
        padding-top: 0px !important;
    }
    .section-title {
        margin-bottom: 30px;
    }
    .team-member .team-description h5 {
        margin: 0;
        text-transform: capitalize;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.2px;
        color: #fff;
        height: 50px;
    }
    .res-our-prod {
        margin-bottom: -20px;
    }

    .dot {
        height: 13px !important;
        width: 13px !important;
        margin: 0 2px;
        background-color: #000;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
        cursor: pointer;
    }

    .welcome-padding {
        padding: 10px 0 10px 0 !important;
    }
    .active-dot {
        text-align: center;
        margin-top: -55px !important;
    }
    .welcome-1024 {
        width: 70% !important;
        margin: 0 123px;
        margin-bottom: -20px;
    }
    .feuture-bottom .row:nth-child(2) .featured-item.bottom-icon {
        border-left: none;
        height: 333px;
    }

}






.section-padding{

    padding: 35px 0 35px 0;
}




@media(max-width: 1199px) and (min-width:1024px){

    .counter label {
        font-weight: 500;
        color: #23244a;
        text-transform: uppercase;
        font-size: 13px;
        position: relative;
        margin: 15px 0;
        margin-bottom: 0;
        padding-top: 15px;
    }
    .team-member .team-description h5 {
        margin: 0;
        text-transform: capitalize;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.2px;
        color: #fff;
    }
    .active-dot {
        text-align: center;
        margin-top: -53px !important;
    }

    .welcome-padding {
        padding: 10px 0 10px 0 !important;
    }
    .dot {
        height: 13px !important;
        width: 13px !important;
        margin: 0 2px;
        background-color: #000;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
        cursor: pointer;
    }
    .res-about-img {
        padding-top: 0px!important;
    }
    .section-title {
        margin-bottom: 20px;
    }
    .about-1024 {
        width: 60% !important;
        margin: 0 130px;
        padding-bottom:20px;
    }
    .welcome-1024 {
        width: 60% !important;
        margin: 0 190px;
        margin-bottom: -20px;
    }





}



.footer-num {
    display: inline-block;
    margin-left: 20px;
    line-height: 30px;

}

.contact-num{

    color: #000;
}

.contact-pg-num {
    
    line-height: 28px;
}




.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #000;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    cursor: pointer;
}

.active1 {
    background-color: #000061;
}




.welcome-text {
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    color: #000;
    font-size: 22px;
    font-weight: 500;
}




.contact-details{

   /* text-align: left;*/
}



@media(max-width:1674px) and (min-width:1300px){

    .about-1366{

        height:103%;
    }
}



.fa.fa-whatsapp.side:hover {
    background-image: linear-gradient(#25D366, #25D366) !important;
    color: white !important;
    cursor: pointer;
    -moz-box-shadow: inset 0 0 2px #000000;
    -webkit-box-shadow: inset 0 0 2px #000000;
    box-shadow: inset 0 0 2px #000000;
}


.md-title {
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    margin-bottom: 30px;
}

.our-service-title {
    padding-top: 10px!important;
    text-transform: capitalize;
    font-size: 18px!important;
    font-weight: 600!important;
    letter-spacing: 0.2px;
    margin-bottom: 10px!important;
}


.gal-section {
    padding: 0 0 20px 0;
}

.gal-page {
    padding: 0 0 25px 0;
}



.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 20px;
    border-radius: 4px;
}

    .pagination > li {
        display: inline;
    }

        .pagination > li:first-child > a, .pagination > li:first-child > span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }


    .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
        z-index: 2;
        color: #fff;
        cursor: default;
        background-color: #000061;
        border-color: #000061;
    }

    .pagination > li > a, .pagination > li > span {
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #000061;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #4e4b4b;
    }







.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #43baff;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    cursor: pointer;
}

.active1 {
    background-color: #141d38;
}











.team-member img {
    transition: transform 0.3s ease-in-out; /* Smooth transition for scaling */
}

.team-member:hover img {
    transform: scale(1.1); /* Slightly zooms the image on hover */
}



@media(max-width: 768px){

    .gal-page {
        padding: 0 0 10px 0!important;
    }
}



@media(max-width: 767px){

    .whatsapp-icon {
        bottom: 175px!important;
    }
    .scroll-top {
        position: fixed;
        bottom: 80px!important;
        right: 30px;
        z-index: 600;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.8s ease-in-out;
        transition: all 0.8s ease-in-out;
        -webkit-transform: translate3d(0, 200%, 0);
        -ms-transform: translate3d(0, 200%, 0);
        transform: translate3d(0, 200%, 0);
    }
    .res-slide-button {
        padding-top: 10px!important;
    }
    .primary-footer {
        padding: 10px 0;
    }

}



@media(max-width: 768px) and (min-width:320px){

    .service-row {
        padding-bottom: 5px !important;
    }
}



@media (min-width: 1280px) and (max-width: 1299px) and (min-height: 600px) {

    .welcome-image {
        height: 490px!important;
    }
    .counter label {
        font-weight: 500;
        color: #23244a;
        text-transform: uppercase;
        font-size: 15px;
        position: relative;
        margin: 15px 0;
        margin-bottom: 0;
        padding-top: 15px;
    }
    .featured-item {
        padding: 17px 27px;
        position: relative;
    }

}


@media (min-width: 1280px) and (max-width: 1299px) and (min-height: 625px){

    .welcome-image {
        height: 490px !important;
    }
    .counter label {
        font-weight: 500;
        color: #23244a;
        text-transform: uppercase;
        font-size: 15px;
        position: relative;
        margin: 15px 0;
        margin-bottom: 0;
        padding-top: 15px;
    }
    .featured-item {
        padding: 17px 27px;
        position: relative;
    }
}



@media(max-width:639px) and (min-width:600px){

    .counter label {
        font-weight: 500;
        color: #23244a;
        text-transform: uppercase;
        font-size: 14px;
        position: relative;
        margin: 15px 0;
        margin-bottom: 0;
        padding-top: 15px;
    }
    .footer {
        padding-top: 10px!important;
        margin-top: 0;
    }

}

@media(max-width:766px) and (min-width:640px){

    .counter label {
        font-weight: 500;
        color: #23244a;
        text-transform: uppercase;
        font-size: 14px;
        position: relative;
        margin: 15px 0;
        margin-bottom: 0;
        padding-top: 15px;
    }
    .footer {
        padding-top: 10px!important;
        margin-top: 0;
    }

}


@media(max-width: 599px) and (min-width:480px){

    .footer {
        padding-top: 10px !important;
        margin-top: 0;
    }
}