﻿@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&family=PT+Sans:wght@400;700&display=swap');
:root{
    --bs-primary:#3498db!important;
}
body {
    background-color:#f3f4f5;
    /*font-family: 'Montserrat', sans-serif;*/
font-family: 'PT Sans', sans-serif;
font-size:14px;
color:#878787;
}
.text-justify{text-align:justify}

a, a:hover, .btn-link{text-decoration:none; transition:all 0.2s ease-in 0s; cursor:pointer}

.ratio img{object-fit:cover}
a,
button {
    color: inherit;
    outline: none;
    border: none;
}

[routerLink] {
    cursor: pointer;
}

button:focus {
    outline: none;
    box-shadow: none!important;
}

ul,
ul li {
    list-style: none;
    padding-left: 0;
}

[class^="bi-"]::before,
[class*=" bi-"]::before {
    vertical-align: middle;
}

.bi {
    line-height: 1
}

.bi-x {
    font-size: 100%
}

.bi-2x {
    font-size: 150%
}

.bi-3x {
    font-size: 200%
}

.bi-4x {
    font-size: 250%
}

.bi-5x {
    font-size: 300%
}

.text-1x {
    font-size: 100%
}

.text-2x {
    font-size: 125%
}

.text-3x {
    font-size: 150%
}

.text-4x {
    font-size: 200%
}

.zi-0,
.zi-1,
.zi-2,
.zi-3,
.zi-4,
.zi-5 {
    
}

.zi-0 {
    z-index: 0!important
}

.zi-1 {
    z-index: 1!important
}

.zi-2 {
    z-index: 25!important
}

.zi-3 {
    z-index: 50!important
}

.zi-4 {
    z-index: 75!important
}

.zi-5 {
    z-index: 99!important
}

.op-1 {
    opacity: 0.1!important
}

.op-2 {
    opacity: 0.2!important
}

.op-3 {
    opacity: 0.3!important
}

.op-4 {
    opacity: 0.4!important
}

.op-5 {
    opacity: 0.5!important
}

.op-6 {
    opacity: 0.6!important
}

.op-7 {
    opacity: 0.7!important
}

.op-8 {
    opacity: 0.8!important
}

.op-9 {
    opacity: 0.9!important
}

.op-x {
    opacity: 1!important
}

.fw-1 {
    font-weight: 100!important
}

.fw-2 {
    font-weight: 200!important
}

.fw-3 {
    font-weight: 300!important
}

.fw-4 {
    font-weight: 400!important
}

.fw-5 {
    font-weight: 500!important
}

.fw-6 {
    font-weight: 600!important
}

.fw-7 {
    font-weight: 700!important
}

.fw-8 {
    font-weight: 800!important
}

.max-line-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.max-line-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.max-line-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.max-line-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.max-line-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.container,
.container-fluid,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    position: relative;
    z-index: 2
}

.wrapper {
    max-width: 1600px;
    margin: 0 auto;
    z-index: 1;
    min-height: 100vh;
    box-shadow: 0 0 36px rgba(43, 27, 58, 0.2);
    outline: solid 1px rgba(255, 255, 255, .4);
}

.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    overflow: hidden;
}

.bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h-30 {
    max-height: 35%;
}

.h-40 {
    max-height: 45%;
}

.h-50 {
    max-height: 55%;
}

.h-60 {
    max-height: 65%;
}

.h-70 {
    max-height: 75%;
}

.h-80 {
    max-height: 85%;
}

.h-90 {
    max-height: 95%;
}

.bg-blur {
    filter: blur(70px);
}
.bg-blur-1{filter: blur(5px);}
.bg-blur-2{filter: blur(15px);}
.bg-blur-3{filter: blur(25px);}
.bg-blur-4{filter: blur(50px);}
.pg-header .bg-img {
    z-index: 0;
}


.img-sm,
.img-md,
.img-lg,
.img-xl,
.img-xxl {
    position: relative;
    object-fit: contain;
}

.img-sm {
    width: 36px;
    height: 36px;
}

.img-md {
    width: 48px;
    height: 48px;
}

.img-lg {
    width: 64px;
    height: 64px;
}

.img-xl {
    width: 96px;
    height: 96px;
}

.img-xxl {
    width: 128px;
    height: 128px;
}

.img-cover {
    object-fit: cover!important;
    object-position:center
}

.img-contain {
    object-fit: contain!important;
    object-position:center
}

.op-end{object-position:right}
.op-start{object-position:left}
.op-top{object-position:top}
.op-bottom{object-position:bottom}

header,
section {
    position: relative;
}

header>.container-fluid,
section>.container-fluid {
    position: relative;
    z-index: 4;
}

.section {
    padding: 5rem 0;
}

.min-vh-75{min-height:75vh;}
.min-vh-50{min-height:50vh;}
.min-vh-25{min-height:25vh;}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

h1,h2,h3,h4,h5,h6,.navbar{font-family: 'Montserrat', sans-serif;}

.wrapper{max-width:1600px; margin: 0 auto; min-height:100vh; background-color:#fff; box-shadow:0 0 24px rgb(0 0 0 /10%);}

.navbar-brand{padding:12px 0 12px;}
.navbar-brand img{max-width:320px; max-height:72px; }
.navbar-brand img.m-logo{max-width:280px; max-height:52px; margin-bottom:0}

header{overflow:hidden; position:relative}
.navbar-brand{position:relative;}
/*.navbar-brand:before{background-color:#0081c2; width:800px; height:180px; content:""; top:50%; transform:translateY(-50%); right:-80px; position:absolute; }*/
/*.navbar-brand:after{border:solid 1px transparent; border-right: solid 80px #fff; width: 0px; height: 0px; content: ""; top: 50%; transform: translateY(-50%); right: -81px; position: absolute; border-top: solid 180px transparent; }*/
.navbar-brand img{position:relative; z-index:2}

nav.navbar{margin: 0 auto 0; }
nav.navbar .nav-link{ font-weight:500; display: block; padding: 12px 8px!important; font-size:16px;}
nav.navbar .spl-link .nav-link{   background-color:var(--bs-primary);}
.navbar .dropdown:hover > .dropdown-menu > li:not(:last-child){border-bottom:solid 1px #ddd}
nav.navbar .nav-link.active{color:#3498db !important}
.navbar-toggler{border:none}

.top-strip:before{position:absolute; right:0; top :0; height:27px; background-color:rgba(var(--bs-primary-rgb),var(--bs-bg-opacity))!important; content:""; width:27%; border-bottom-left-radius:8px }

@media screen and (max-width:576px){
    nav.navbar{padding-top:0!important}
    .navbar-brand{margin-top:-0px}
    .top-strip:before{display:none}
}

.btn-contact{display:flex; align-items: center!important; color:#3498db; font-weight:600; line-height:16px; font-size:14px; }

.btn{text-transform:uppercase!important}

.carousel-control-next, .carousel-control-prev{max-width:52px;}

.points {
    padding: 0;
    list-style: none;
}

.points.row {
    padding-left: 10px;
}

.points>li {
    position: relative;
    padding: 2px 4px 12px 24px;
}

.points>li:before {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #fecc00;
    left: 4px;
    top: 8px;
    content: "";
    transform: rotate(45deg);
}


.hero{min-height:420px; background-color:#0f1014!important}
.hero2{background-color:#0f1014!important; overflow:visible; padding-top:30px!important; padding-bottom:40px!important; padding-left:20px}
.hero2 .bg-img{right:0; left:auto; width:auto; max-width:100%; height:320px; top:-50px;}
.hero2 + section{padding-top:3rem!important}
.hero .min-vh-75{height:100%}
@media screen and (min-width:992px) {
    /*.hero {
        margin-top: -42px;
    }*/
}

@media screen and (max-width:992px) {
    header{
        position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;}

    .navbar-brand:before, .navbar-brand:after{display:none;}
}
@media screen and (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
            display: block;
            -webkit-animation: slide-up .25s ease-in-out;
            animation: slide-up .25s ease-in-out;
            visibility:visible;
            opacity:1;
            overflow:hidden;
                border-radius:0
        }
}

@-webkit-keyframes slide-up {
        from {
            transform: translateY(0.5rem);
            opacity: 0;
            visibility:visible;
        }
        to {
            transform: translateY(0);
            opacity: 1;
            visibility:visible;
        }
    }
    
    @keyframes slide-up {
        from {
            transform: translateY(0.5rem);
            opacity: 0;
            visibility:visible;
        }
        to {
            transform: translateY(0);
            opacity: 1;
            visibility:visible;
        }
    }

.product-card{position:relative; padding-bottom:72px; overflow:hidden}
.product-card *{transition:all .4s ease-in 0s}
.product-card .card-body{position:absolute; bottom:0px; background:#fff; padding:0; border-top:solid 6px var(--bs-primary); width:100%; left:0; }
.product-card .card-body > *{padding:0 1.4rem}
.product-card .card-body .card-title{font-size: 18px; margin-bottom:0; line-height: 1em !important; height:68px; padding: 12px 18px 12px 84px; font-weight:500; position:relative; display:flex; align-items: center!important;}
.product-card .card-body .card-title h3{font-size: 18px!important; margin-bottom:0 }
.product-card .card-body .card-title:before{transition:all .4s ease-in 0s; content:""; width:68px; height:68px; left:0; top:0; position:absolute; background-color:var(--bs-primary)}
.product-card .card-body .card-title > i{position:absolute; top:20px; left:20px; color:#fff; }
.product-card .card-body .card-text{height:0; transform:translateY(20px); overflow:hidden;}
.product-card:hover .card-body .card-title{padding-left:68px; margin-bottom:0;}
.product-card:hover .card-body .card-title > i{color:var(--bs-primary)}
.product-card:hover .card-body .card-title:before{ left:-72px;}
.product-card:hover .card-body .card-text{height:120px; transform:translateY(0px)}

.footer{background-color:#141a24; padding:3rem 0 1rem; font-size:14px; }
.footer-heading, .heading2{color:#fff; padding:8px 0 12px; margin-bottom:16px; border-bottom:solid 1px rgb(255 255 255 /10%); position:relative;}
.footer-heading:before, .heading2:before{content:""; height:4px; border-radius:2px; background-color:var(--bs-primary); transform:translateY(50%); position:absolute; width:72px; bottom:0; left:0;  }
.footer-heading.text-center:before, .heading2.text-center:before{left:50%; transform:translate(-50% , 50%); }
.heading2{color:#171717!important}
.heading{color:#171717!important; position:relative; text-transform:uppercase}
.heading> span{position:absolute; top:50%; left:50%; font-size:250%; color:rgb(0, 0, 0, 6%);  transform:translate(-50% , -50%);}
.footerlinks a{color:rgb(255 255 255 /50%); padding:8px 0; display:flex; align-items:center}
.footerlinks a:hover{color:var(--bs-primary);}

.info-table .info-table-icon{color:var(--bs-danger); text-align:center; vertical-align:middle; padding-left:1rem; padding-right:0rem;}
.gslide-image{background-color:#fff;}
.glightbox-clean .gdesc-inner{padding:16px 20px; text-align:center;}
.glightbox-clean .gslide-title{margin-bottom:8px!important; font-weight:600}

#loading {
    width: 40px;
    height: 20px;
    object-fit: cover;
}
.swiper-button-next, .swiper-button-prev{height:28px!important; position:relative!important; margin-top:0!important; top:auto!important}
.swiper-button-next:after, .swiper-button-prev:after{font-size:24px!important;}

.hover-up,
.card,
.card img {
    transition: all 0.3s ease-in-out 0s;
}
.hover-up:hover {
    transform: translateY(-4px);
}

.card.hover-up:hover .card-img-top img {
    transform: scale(1.1) rotate(3deg);
}

.card.hover-up:hover {
    box-shadow: 0 10px 16px rgba(25, 18, 56, 0.1)!important;
}

table * p:last-child{margin-bottom:0}

.enqbtn{
    position: fixed;
    right: 0;
    z-index: 9999;
    display: inline-block;
    bottom: 7vh;
}
.card-columns{
        -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1; 
    padding:1rem;
}
.card-columns .card {
    margin-bottom: 1rem;
    display:inline-block;
    width: 100%;
}

@media screen and (min-width:768px) {
    .card-columns {
        column-count: 2;
    }
}
@media screen and (min-width:992px) {
    .card-columns {
        column-count: 3;
    }
}