@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Source+Serif+Pro:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
:root {
    --color-primary:#0d6a8e ;
    --color-primary-light: #9cddf7;
    --color-primary-trans: rgba(12, 106, 142, 0.25);
    --color-secondary: hsl(0, 0%, 10%);
    --color-black: hsl(0, 0%, 10%);
    --color-white: hsl(0, 0%, 100%);
    --color-darken: hsl(0, 0%, 20%);
    --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --fontMain: "Inter", sans-serif;
    --fontHeading: "Marcellus", sans-serif;
    --fontIcons: "bootstrap-icons";
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    list-style: none;
    list-style-type: none;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html {
    font-size: 100%;
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    scroll-behavior: smooth;
}

body {
    font-family: var(--fontMain);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    overflow-x: hidden;
    color: var(--color-black);
    background: var(--color-white);
}

a {
    text-decoration: none;
}
h1,h2,h3,h4,h5,h6{
    font-family: var(--fontHeading);
    font-weight: 700;
}
.btn {
    border-radius: 50px !important;
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.lead {
    font-size: 18px;
}

.text-justify {
    text-align: justify;
}
ul {
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
}
.arrow{
    width: 40px;
}
/*-----------------------------------
        Preloader
-----------------------------------*/
.preloader {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: default;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999999;
    flex-direction: column;
}

.preloader .loader-content {
    z-index: 1001;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.preloader .loader-content img {
    margin-bottom: 25px;
}
.preloader .loader-content .loader {
    width:250px;
    height: 250px;
    background-color: skyblue;
    border-radius: 50%;
    position: relative;
    box-shadow: inset 0 0 30px 0 rgba(0,0,0,.5), 0 4px 10px 0 rgba(0,0,0,.5);
    overflow: hidden;
    background-image: url("../images/preloader.svg");
    background-position: center; 
    background-repeat: no-repeat;
    background-size: 200px;
}
.preloader .loader-content .loader:before, .preloader .loader-content .loader:after{
    content:'';
    position: absolute;
    width:250px;
    height: 250px;
    top:-100px;
    background-color: #fff;
}
.preloader .loader-content .loader:before {
    border-radius: 45%;
    background:rgba(255,255,255,.7);
    animation:wave 5s linear infinite;
}

.preloader .loader-content .loader:after {
    border-radius: 35%;
    background:rgba(255,255,255,.3);
    animation:wave 5s linear infinite;
}
@-webkit-keyframes wave {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes wave{
    0%{
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.preloader .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    background: #f9f9f9;
    z-index: 1000;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.preloader .loader-section.section-left {
    left: 0;
}

.preloader .loader-section.section-right {
    right: 0;
}

.loaded.preloader .loader-section.section-left {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded.preloader .loader-section.section-right {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded .loader-content {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.loaded.preloader {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all 0.3s 1s ease-out;
    transition: all 0.3s 1s ease-out;
}
/*-----------------------------------
Header
-----------------------------------*/
header {background: #ffffff; z-index: 999; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); padding: 5px 0; border-top: 4px solid var(--color-primary); }
header .logo img{max-height: 80px; }

/*-----------------------------------
Menu
-----------------------------------*/
.main-menu {background-color: var(--color-primary); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); } 
.main-menu .menu{display: flex; justify-content: space-between; }
.main-menu .menu > li {text-align: center; width: 100%; }
.main-menu .menu > li.dropdown {position: relative; }
.main-menu .menu > li > a {font-family: var(--fontHeading); font-size: 22px; font-weight: 700; color: #FFF; padding: 10px 0; display: block; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; margin: 8px 5px; }
.main-menu .menu > li > a::after {content: "\F282"; font-family: var(--fontIcons); margin-left: 5px; font-size: 18px; display: inline-block; vertical-align: middle; }
.main-menu .menu > li > a:only-child::after {display: none; }
.main-menu .menu > li.active > a, .main-menu .menu > li:hover > a, .main-menu .menu > li.active > a::after, .main-menu .menu > li:hover > a::after {background-color: var(--color-primary-light); color: var(--color-primary); border-radius: 50px; webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; }

.main-menu .menu .dropdown > ul {position: absolute; top: 100%; white-space: nowrap; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; opacity: 0; visibility: hidden; -webkit-transition: 500ms ease; transition: 500ms ease; z-index: 99; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); background: #FFF; border: 1px solid var(--color-primary-trans); min-width: 250px;}
.main-menu .menu .dropdown:hover > ul {opacity: 1; visibility: visible;}
/* .main-menu .menu .dropdown > ul {
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg); 
}
.main-menu .menu .dropdown:hover > ul {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg); 
} */
.main-menu .menu .dropdown ul li a::before {
    content: "";
    width: 5px;
    height: 5px;
    background-color: var(--color-primary);
    margin-right: 10px;
    border-radius: 10px;
    -webkit-transition: width 0.4s ease-in-out;
    -moz-transition: width 0.4s ease-in-out;
    -o-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.main-menu .menu .dropdown ul li:hover a::before {
    width: 20px;
    -webkit-transition: width 0.4s ease-in-out;
    -moz-transition: width 0.4s ease-in-out;
    -o-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.main-menu{display: block}
.mob-menu{display: none}
.mob-menu-btn {display: none; }
.main-menu .menu .dropdown ul li + li {border-top: 1px solid var(--color-primary-trans); }
.main-menu .menu .dropdown ul li a {font-size: 16px; color: var(--color-secondary); display: -webkit-box; display: -ms-flexbox; display: flex; padding: 10px 20px; -webkit-transition: 500ms; transition: 500ms; align-items: center;}
.main-menu .menu .dropdown ul li:last-child > a {border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.main-menu .menu .dropdown ul li:hover > a {background-color: var(--color-primary-light); }
.main-menu .menu .dropdown ul li:hover > a {color: var(--color-primary); }

.mob-menu-btn i, .mob-menu-close i{padding: 10px; font-size: 20px; cursor: pointer; -webkit-transition: 500ms; transition: 500ms; background: var(--color-primary-light); border: 1px solid var(--color-primary); color: var(--color-primary); }
.mob-menu-btn i:hover, .mob-menu-close i:hover {background: var(--color-primary); border: 1px solid var(--color-primary-light); color: var(--color-primary-light); }
.mob-menu-close { text-align: end; }

.mob-menu {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform 250ms ease; transition: -webkit-transform 250ms ease; transition: transform 250ms ease; transition: transform 250ms ease, -webkit-transform 250ms ease; z-index: 911; background-color: var(--color-primary-light); overflow-y: auto; padding: 30px 15px;}
.mob-menu.expanded {-webkit-transform: scale(1, 1); transform: scale(1, 1); }
.mob-menu .menu li {border-bottom: 1px solid var(--color-primary-trans); }
.mob-menu .menu li a {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; color: var(--color-secondary); height: 46px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: 500ms; transition: 500ms; }
.mob-menu .menu li:hover > a, .mob-menu .menu li.active > a, .mob-menu .menu li a.expanded {color: var(--color-primary); }
.mob-menu .menu li a.expanded {color: var(--color-primary); }
.mob-menu .menu li a button {width: 30px; height: 30px; background-color: var(--color-primary); border: none; outline: none; color: #fff; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: -webkit-transform 500ms ease; transition: -webkit-transform 500ms ease; transition: transform 500ms ease; transition: transform 500ms ease, -webkit-transform 500ms ease; }
.mob-menu .menu li a button.expanded {-webkit-transform: rotate(0deg); transform: rotate(0deg); background-color: #fff; color: #242323; }
.mob-menu .menu ul {display: none; border-top: 1px solid var(--color-primary-trans); }
.mob-menu .menu ul li{padding: 0 10px; }
.mob-menu .menu ul li a {font-size: 14px; }
.mob-menu .footer .list {margin: 0; padding: 0; list-style-type: none; margin: 50px 0; }
.mob-menu .footer .list li {padding: 10px 0; }
.mob-menu .footer .list li:not(:last-child) {border-bottom: 1px solid var(--color-primary-trans); }
.mob-menu .footer .list li a {color: var(--color-primary); padding: 15px 0px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: 500ms; transition: 500ms; }
.mob-menu .footer .list li a:hover {color: var(--color-secondary); }

nav.sticky, header.sticky{position: fixed; top: 0; width: 100%; z-index: 9; }


/*-----------------------------------
        Page Heading
-----------------------------------*/
.heading {
    background-color: var(--color-primary-light);
    position: relative;
    line-height: 1;
    padding: 30px 0;
    text-align: center;
}

.heading::before {
    position: absolute;
    bottom: -30px;
    left: 50%;
    margin-left: -22px;
    width: 40px;
    height: 30px;
    display: inline-block;
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
    content: "\F282";
    font-family: var(--fontIcons);
    font-size: 20px;
    font-weight: 900;
    background-color: var(--color-primary);
    color: var(--color-primary-light);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}

.heading .main-heading {
    margin: 0;
    padding: 0;
    font-size: 35px;
    font-weight: 900;
    line-height: 1.5;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    color: var(--color-primary);
}

.heading .sub-heading {
    text-transform: uppercase;
    letter-spacing: 8px;
    margin: 0;
    padding: 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}

.social {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 9;
    transform: translateY(-50%);
    opacity: 0;
}

.social ul {
    padding: 0px;
    transform: translate(150px,0);
}

.social ul li {
    display: block;
    margin: 5px;
    background: var(--color-primary-light);
    width: 200px;
    text-align: left;
    padding: 10px;
    border-radius: 30px 0 0 30px;
    transition: all 1.5s;
}

.social ul li:hover {
    transform: translate(-125px,0);
    background: var(--color-primary);
    transition: all 1.5s;
}

.social ul li a {
    color: white;
}
.social ul li i {
    margin-right: 10px;
    color: white;
    background: var(--color-primary);
    padding: 5px 10px;
    border-radius: 50%;
    transform: rotate(0deg);
    font-size: 20px;
    display: inline-block;
}
.social ul li:hover i{
    background: white;
    color: var(--color-primary);
    transform: rotate(-360deg);
    transition: all 1.5s;

}
.social.active {
    opacity: 1;
    pointer-events: all;
}




/*-----------------------------------
    Banner    Section
-----------------------------------*/
.banner-section {
    position: relative;
}

.banner-section .banner-carousel {
    position: relative;
}

.banner-section .slide-item {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.banner-section .owl-nav{
    text-align: center;
    padding: 10px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.banner-section .owl-nav button{
    margin: 0px 10px;
}

/*-----------------------------------
        Section
-----------------------------------*/
.section-default {
    padding: 50px 0;
}
/*-----------------------------------
        About Section
-----------------------------------*/
.section-about {
    padding: 50px 0;
}

.section-about-image {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    display: flex;
    align-items: center !important;
}

.section-about-contents {
    position: relative;
    background-color: #f7f7f7;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.section-about-title h2{
    text-align:center; 
    font-size:50px; 
    color:var(--color-primary); 
    letter-spacing:1px;
}

.section-about-title span{
    margin-top: 5px;
    font-size:15px; 
    color:#444; 
    word-spacing:1px; 
    letter-spacing:2px;
    text-transform: uppercase; 
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 20px 0;
    grid-gap: 20px;
    align-items: center;
}
.section-about-title span:after,.section-about-title span:before {
    content: " ";
    display: block;
    border-bottom: 1px solid var(--color-primary); 
    border-top: 1px solid var(--color-primary); 
    height: 5px;
    background-color:transparent; 
}
.section-about-action {
    margin-top: 25px;
    text-align: right;
}
.section-about-details ul{
    margin: 0;
    padding: 0;
}
.section-about-details ul li{
    position: relative;
    margin-bottom: 10px;
    margin-left: 25px;
    font-size: 18px;
    font-weight: 300;
}
.section-about-details ul li:before{
    content: "\f285";
    font-family: var(--fontIcons);
    position: absolute;
    left: -25px;
}
/*-----------------------------------
        Vision Section
-----------------------------------*/
.section-vision {
    padding: 50px 0;
    background-color: #f7f7f7;
}
.section-vision .nav-tabs{
    border-bottom: none;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}
.section-vision .nav-tabs .nav-item{
    flex-grow: 1;
}
.section-vision .nav-tabs .nav-item .nav-link{
    display: block;
    padding: 10px 20px;
    text-transform: uppercase;
    border: none;
    color: #999;
    border-bottom: 2px solid #999;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.section-vision .nav-tabs .nav-item .nav-link.active,
.section-vision .nav-tabs .nav-item .nav-link:hover{
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    border-bottom: 2px solid var(--color-primary);
}
.section-vision .nav-tabs .nav-item .nav-link img{
    display: block;
    width: 60px;
    height: 60px;
    background: #FFF;
    margin: auto;
    border-radius: 50%;
    padding: 10px;
    margin-bottom: 20px;
}
.section-vision .tab-content{
    background: #444;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 25px;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 10px 10px var(--color-primary);
    color: white;
}
.section-vision .tab-content .tab-content-image{
    background: white;
    border-radius: 50%;
    padding: 40px;
}
.section-vision .tab-content .tab-content-detail h2{
    color: white;
}
.section-vision .tab-content .tab-content-detail h2 span{
    color: var(--color-primary-light)
}
.section-vision .tab-content .tab-content-detail ul{
    margin: 0;
    padding: 0;
}
.section-vision .tab-content .tab-content-detail ul li{
    position: relative;
    margin-bottom: 10px;
    margin-left: 25px;
    font-size: 16px;
    font-weight: 300;
}
.section-vision .tab-content .tab-content-detail ul li:before{
    content: "\f285";
    font-family: var(--fontIcons);
    position: absolute;
    left: -25px;
}


/*-----------------------------------
        Core Section
-----------------------------------*/
.section-core {
    padding: 50px 0;
    background-color: #f7f7f7;
}
.section-core .core-content{
    background: #444;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 25px;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 10px 10px var(--color-primary);
    color: white;
    height: 100%;
    display: flex;
    justify-content: center;
}
.section-core .core-content .core-content-image{
    background: white;
    border-radius: 50%;
    padding: 10px;
}
.section-core .core-content .core-content-detail h2{
    color: white;
}
.section-core .core-content .core-content-detail h2 span{
    color: var(--color-primary-light)
}
.section-core .core-content .core-content-detail ul{
    margin: 0;
    padding: 0;
}
.section-core .core-content .core-content-detail ul li{
    position: relative;
    margin-bottom: 10px;
    margin-left: 25px;
    font-size: 16px;
    font-weight: 300;
}
.section-core .core-content .core-content-detail ul li:before{
    content: "\f285";
    font-family: var(--fontIcons);
    position: absolute;
    left: -25px;
}
.section-core .core-content .core-content-detail p{
    font-size: 16px;
    font-weight: 300;
}
/*-----------------------------------
        Certificates Section
-----------------------------------*/

.section-certificates {
    padding: 50px 0;
}
.certificates-title{
    margin: 40px 0;
}
.certificates-title h1 {
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 5px;
    position: relative;
    color: var(--color-secondary);
}
.certificates-title h1 span {
    color: var(--color-primary);
}
.certificates-title h1:before {
    width: 100px;
    height: 5px;
    display: block;
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    margin-left: -50px;
    background-color: var(--color-primary);
}
.certificates-title h1:after {
    width: 250px;
    height: 1px;
    display: block;
    content: "";
    position: relative;
    margin-top: 10px;
    left: 50%;
    margin-left: -125px;
    background-color: var(--color-primary);
}
.certificates-slider .item{
    opacity:0.4;
    transition:.4s ease all;
    transform:scale(.8);
    border: 2px solid var(--color-primary-light);
}

.certificates-slider .active.center .item{
    opacity:1;
    transform:scale(1);
    border: 2px solid var(--color-primary);
} 

.certificates-slider .owl-nav {
    opacity: 1;
    text-align: center;
    width: 100%;
}

.certificates-slider .owl-prev,
.certificates-slider .owl-next {
    margin: 10px;
    color: var(--color-primary) !important;
    font-size: 30px !important;
}

.certificates-slider .owl-prev:hover,
.certificates-slider .owl-next:hover {
    color: var(--color-secondary) !important;
}

/*-----------------------------------
        Certificates Section
-----------------------------------*/

.section-journey {
    padding: 50px 0;
}
.journey-title{
    margin: 40px 0;
}
.journey-title h1 {
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 5px;
    position: relative;
    color: var(--color-secondary);
}
.journey-title h1 span {
    color: var(--color-primary);
}
.journey-title h1:before {
    width: 100px;
    height: 5px;
    display: block;
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    margin-left: -50px;
    background-color: var(--color-primary);
}
.journey-title h1:after {
    width: 250px;
    height: 1px;
    display: block;
    content: "";
    position: relative;
    margin-top: 10px;
    left: 50%;
    margin-left: -125px;
    background-color: var(--color-primary);
}
.journey-timeline .timeline{
    width: calc(50% - 1px);
    padding: 3px 0;
    margin: 0 2px 0 0;
    float: left;
}
.journey-timeline .timeline-content{
    color: #777;
    background-color: #fff;
    text-align: center;
    padding: 20px 30px;
    display: block;
    position: relative;
}
.journey-timeline .timeline-content:before{
    content: '';
    background: var(--color-primary);
    width: 40px;
    transform: skewY(-20deg);
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
}
.journey-timeline .timeline-year{
    color: #555;
    background-color: var(--color-primary);
    font-size: 25px;
    font-weight: 600;
    line-height: 100px;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: -50px;
    z-index: 1;
}
.journey-timeline .timeline-year:before{
    content: '';
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 5px 5px 7px rgba(0,0,0,0.4);
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    z-index: -1;
}

.journey-timeline .timeline-description{
    border: 2px solid var(--color-secondary);
    background-color: #f7f7f7;
    padding: 30px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    min-height: 75px;
}
.journey-timeline .timeline-description h3{
    color: var(--color-primary);
    font-family: var(--fontMain);
    font-size: 25px;
}

.journey-timeline .timeline:nth-child(even){ 
    float: right; 
}
.journey-timeline .timeline:nth-child(even) .timeline-description{ 
    border: 2px solid var(--color-primary);
}
.journey-timeline .timeline:nth-child(even) .timeline-content:before{
    right: auto;
    left: -20px;
}
.journey-timeline .timeline:nth-child(even) .timeline-year{
    right: auto;
    left: -50px;
}
.journey-timeline .timeline:nth-child(odd) .timeline-content:before,
.journey-timeline .timeline:nth-child(odd) .timeline-year{
    background: var(--color-secondary);
}
@media screen and (max-width:767px){
    .journey-timeline .timeline,
    .journey-timeline .timeline:nth-child(even){
        width: 100%;
        margin: 0 0 2px;
    }
    .journey-timeline .timeline-content,
    .journey-timeline .timeline:nth-child(even) .timeline-content{
        padding: 20px 0 20px 75px;
    }
    .journey-timeline .timeline-content:before,
    .journey-timeline .timeline:nth-child(even) .timeline-content:before{
        left: 30px;
    }
    .journey-timeline .timeline-year,
    .journey-timeline .timeline:nth-child(even) .timeline-year{
        left: 0;
        right: auto;
    }
}
/*-----------------------------------
        Footer Section
-----------------------------------*/

.section-footer {
    background-color: #E7E7E7;
    padding: 50px 0 0;
    border-top: 1px solid #d7d7d7;
}
.footer-logo img{
    width: 100%;
}
.footer-heading {
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary);
    margin: 0 0 16px;
}

.footer-heading h6 {
    font-size: 25px;
    background: rgb(13,106,142);
    background: linear-gradient(90deg, rgba(13,106,142,1) 0%, rgba(0,74,109,1) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.footer-details {
    margin: 20px 0;
}

.footer-details i {
    background-color: var(--color-primary);
    border-radius: 4px;
    color: var(--color-white);
    font-size: 18px;
    position: relative;
    text-align: center;
    padding: 6px 8px;
}

.footer-details .icon {
    padding: 0 12px 0 0;
    font-size: 18px;
}

.footer-details p {
    margin: 0;
}

.footer-details a {
    color: #010101;
    text-decoration: underline;
}

.footer-details a:hover {
    color: var(--color-primary);
}

.footer-details h5 {
    color: var(--color-primary);
    margin: 0;
    font-size: 22px;
    margin-bottom: 5px;
}
.footer-details .contact-list {padding: 0; margin: 0; }
.footer-details .contact-list li {margin-bottom: 10px; position: relative; margin-left: 10px; padding-left: 10px; }
.footer-details .contact-list li::before {font-family: var(--fontIcons); content: '\F285'; position: absolute; left: -10px; }
.footer-details .contact-list li a {display: block; -webkit-transition: all .4s ease; transition: all .4s ease; }
.footer-details .contact-list li:hover::before{color: var(--color-primary); }

.footer-link {
    padding: 0;
}

.footer-link li {
    margin-bottom: 15px;
}

.footer-link li a {
    display: block;
    color: #313131;
    text-transform: capitalize;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

.footer-link li a:hover {
    color: var(--color-primary);
}

.indiamart-link {
    background: #FFF;
    height: auto;
    display: block;
    border: 1px solid var(--color-primary);
    border-radius: 5px;
}

.indiamart-link:hover {
    border: 1px solid var(--color-black);

}

/*-----------------------------------
        Back to top
-----------------------------------*/
#back-to-top.active {
    opacity: 1;
    pointer-events: all;
}

#back-to-top {
    right: 40px;
    bottom: 40px;
    display: block;
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 99;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    pointer-events: none;
    font-size: 50px;
    line-height: 50px;
    border-radius: 50px;
    background: white;
    padding: 4px;
    color: var(--color-primary);
}

#back-to-top:hover {
    color: var(--color-secondary);
}


/*-----------------------------------
        Home Page Slider
-----------------------------------*/
/* .section-slider,
.owl-stage-outer,
.owl-stage,
.owl-item-bg,
.owl-item {
    height: 500px;
    min-height: 500px;
} */
.section-slider{
    box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.section-slider .owl-nav {
    opacity: 0;
    transition: all .3s;
}

.section-slider:hover .owl-nav {
    opacity: 1;
}

.section-slider .owl-prev,
.section-slider .owl-next {
    position: absolute;
    top: 50%;
    overflow: hidden;
    transition: all 1s ease;
    color: var(--color-primary) !important;
    font-size: 30px !important;
}

.section-slider .owl-prev {
    left: 5%;

}

.section-slider .owl-next {
    right: 5%;
}

.section-slider .owl-prev:hover,
.section-slider .owl-next:hover {
    color: var(--color-primary-light) !important;
}

.slide-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    /* height: 500px; */
    text-align: center;
    display: flex !important;
    align-items: start;
    justify-content: center !important;
    
    /* background-color: rgba(13,106,142, 0.2); */
}

.slide-content {
    padding: 25px;
    background-color: rgba(255, 255, 255, .6);
    border-radius: 10px;
    color: #000;
    margin-bottom: 25px;
}

.slide-content,
.slide-content h3,
.slide-content h2,
.slide-content p {
    transition: all 2s ease;
}

.section-slider .owl-item.active .slide-content {
    transform: translate(0%, 10%) rotate3d(1, 0, 0, 0);
    transition-delay: .5s
}

.section-slider .owl-item.active h3,
.section-slider .owl-item.active h2,
.section-slider .owl-item.active p {
    transform: translate3d(0, 0, 1px);
    transition-delay: 1s
}

/*-----------------------------------
        Product Detail
-----------------------------------*/
.detail-box{
    margin-bottom: 30px;
}
.detail-box-image{
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    display: flex;
    align-items: center !important;
    margin-bottom: 30px;
}
.detail-box-heading{
    margin: 0 16px;
    background: var(--color-primary);
    border-radius: 5px;
    margin-bottom: -25px;
}
.detail-box-heading h4{
    padding:10px 16px;
    color: white;
    margin: 0;
}
.detail-box-info{
    padding:40px 20px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 5px;
    border:1px solid var(--color-primary)
}
.detail-box-info p{
    margin: 0;
    padding: 0;
}
.detail-box-info table td, .detail-box-info table th{
    text-align: center;
}
.detail-box-row{
    margin: 0;
    border-bottom: 1px solid #cfcfcf
}
.detail-box-cell{
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
}
.odd .detail-box-cell{
    background-color: #f2f2f2
}
.even .detail-box-cell{
    background-color: #FFFFFF;
}
.detail-box-list{
    margin: 0;
    padding: 0;
}
.detail-box-list li{
    margin-bottom: 10px;
    position: relative;
    margin-left: 10px;
    padding-left: 10px;
}
.detail-box-list li:before{
    font-family: 'bootstrap-icons';
    content: '\F231';
    color: var(--color-primary);
    position: absolute;
    left: -10px;
}

.detail-box-slider .owl-item{
    padding: 20px !important;
}
.detail-box-slider .product{
    margin: 0;
}
.detail-box-slider .owl-nav {
    opacity: 1;
    text-align: center;
}

.detail-box-slider .owl-prev,
.detail-box-slider .owl-next {
    margin: 10px;
    color: var(--color-primary) !important;
    font-size: 30px !important;
}

.detail-box-slider .owl-prev:hover,
.detail-box-slider .owl-next:hover {
    color: var(--color-secondary) !important;
}
/*-----------------------------------
        Contact Page
-----------------------------------*/
.contact-box{
    margin-bottom: 30px;
    min-height: 525px;
}
.contact-heading{
    margin: 0 16px;
    background: var(--color-primary);
    border-radius: 5px;
    margin-bottom: -25px;
    text-align: center;
}
.contact-heading h4{
    padding:10px 16px;
    color: white;
    margin: 0;
    text-transform: uppercase;
}
.quote-form{
    padding:40px 20px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 5px;
    border:1px solid var(--color-primary)
}
.quote-form input, .quote-form select, .quote-form textarea {
    width: 100%;
    height: 50px;
    font-size: 15px;
    margin-bottom: 20px;
    padding: 0 20px;
    border-radius: 0;
}











/*-----------------------------------
        Services Section
-----------------------------------*/
.section-services {
    padding: 50px 0;
    background-color: #444;
}
.service-tab-wrapper .products-tabs-wrap .nav-tabs{
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.service-tab-wrapper .products-tabs-wrap .nav-tabs .nav-item{
    width: 100%;
}
.service-tab-wrapper .products-tabs-wrap .nav-tabs .nav-item .nav-link {
    color: #FFF;
    background:var(--color-primary);
    transition: all 0.3s ease 0s;
    width: 100%;
    height: 100%;
    text-align: left;
    border: none;
    border-radius: 0;
}
.service-tab-wrapper .products-tabs-wrap .nav-tabs .nav-item .nav-link i {
    font-size: 45px;
    font-weight: 700;
    width:75px;
    height: 75px;
    border-radius: 50%;
    color: var(--color-primary);
    background: var(--color-primary-light);
    display: inline-block;
    text-align: center;
}
.service-tab-wrapper .products-tabs-wrap .nav-tabs .nav-item .nav-link h1 {
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-left: 10px;
}
.service-tab-wrapper .products-tabs-wrap .nav-tabs .nav-item .nav-link.active {
    color: var(--color-primary);
    background: var(--color-primary-light);
}
.service-tab-wrapper .products-tabs-wrap .nav-tabs .nav-item .nav-link.active i {
    color: #FFF;
    background:var(--color-primary);
}
.service-tab-wrapper .products-tabs-wrap .tab-content .card {
    border:none;
    background-color:transparent
}
.service-tab-wrapper .products-tabs-wrap .tab-content .card .card-header {
    display:none
}
.service-tab-wrapper .products-tabs-wrap .tab-content .card .card-body {
    padding:0
}
.service-tab-wrapper .products-tabs-wrap .tab-content .card .card-body .service-content {
    position:relative
}
.service-tab-wrapper .products-tabs-wrap .tab-content .card .card-body .service-content .contents-wrap .tab-img {
    width:100%;
    height:100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.service-tab-wrapper .products-tabs-wrap .tab-content .card .card-body .service-content .contents-wrap .contents-bottom {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction:row;
    flex-direction:row;
    padding:12px 18px;
    -ms-flex-pack:justify;
    justify-content:space-between;
    background-color:#fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.service-tab-wrapper .products-tabs-wrap .tab-content .card .card-body .service-content .contents-wrap .contents-bottom P{
    margin: 0;
    padding: 0;
}
.collapse:not(.show) {
    display: block;
}

.section-about-services {
    padding: 50px 0;
    background-color: var(--color-primary-light);
}
.section-about-services .icon{
    margin: 10px 0;
}
.section-about-services .icon i{
    color: #FFF;
    font-size: 100px;
    font-weight: 700;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    background: var(--color-primary);
}
.section-about-services .title h1{
    color: var(--color-primary);
}
.section-about-services .title{
    margin-top: 10px;
}
.section-about-services .detail{
    margin-bottom: 10px;
}


.section-default {
    padding: 50px 0;
}
.product{
    margin: 10px 0;
    text-align: center;
    position: relative;
}

.product .product-img img{
    box-shadow: var(--shadow-large);
}
.product .product-title {
    padding: 10px 5px;
    background: var(--color-white);
    border-radius: 5px;
    font-size: 16px;
    color: #666;
    line-height: 30px;
    margin-bottom: 0;
    border: 2px solid var(--color-primary);
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.product .product-title .title {
    font-size: 20px;
    margin: 5px 0;
    font-weight: bold;
    color: var(--color-primary);
}

.item-box{
    display: block;
    position: relative;
    text-align: center;
    margin: 10px 0;
}
.item-box figure {
    background: var(--color-primary);
    margin: 0;
}
.item-box figure.no-bg {
    background: transparent;
    margin: 0;
}
.item-box i{
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 9px;
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
    transform: translate(-50%, -50%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.item-box img{
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    box-shadow: 0 10px 20px rgba(0,0,0,0.25) !important;
}
.item-box h3 {
    padding: 10px 5px;
    background: var(--color-white);
    border-radius: 5px;
    font-size: 20px;
    font-weight: 500;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.item-box:hover h3{
    color: var(--color-white);
    background: var(--color-primary);
}
.item-box:hover img{
    opacity: 0.75;
}
.item-box:hover i{
    opacity: 1;
}


/*-----------------------------------
        Contact Page
-----------------------------------*/
.section-contact .contact-wraper{margin-bottom: 50px; border: 2px solid var(--color-primary-light); background-color: var(--color-white); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); position: relative; }
.section-contact .contact-form{padding: 40px; height: auto; position: relative; }
.section-contact .contact-form-heading {position: relative; }
.section-contact .contact-form-heading::before {position: absolute; content: ""; bottom: 0; left: 0; width: 70px; height: 2px; background-color: var(--color-primary-light); }
.section-contact .contact-form-heading h2 {margin: 0 0 25px; font-size: 25px; font-weight: 600; text-transform: capitalize; color: var(--color-primary); padding-bottom: 10px; }
.section-contact .form-control:focus{border: 1px solid var(--color-primary); box-shadow: 0 0 0 0.25rem var(--color-primary-trans); }
.section-contact .contact-form textarea{height: 100px; }
.section-contact .contact-details {padding: 40px; height: auto; position: relative; background-color: var(--color-primary) !important; color: var(--color-white); }
.section-contact .contact-details-heading {position: relative; }
.section-contact .contact-details-heading::before {position: absolute; content: ""; bottom: 0; left: 0; width: 70px; height: 2px; background-color: var(--color-white); }
.section-contact .contact-details-heading h2 {margin: 0 0 25px; font-size: 25px; font-weight: 600; text-transform: capitalize; color: var(--color-white); padding-bottom: 10px; }
.section-contact .contact-details-content {margin: 20px 0; }
.section-contact .contact-details-content .icon {display: table-cell; padding: 0 12px 0 0; font-size: 18px; }
.section-contact .contact-details-content .icon i {background-color: var(--color-white); border-radius: 4px; color: var(--color-primary); font-size: 18px; position: relative; text-align: center; padding: 6px 8px; }
.section-contact .contact-details-content .text {display: table-cell; }
.section-contact .contact-details-content .text h5 {color: var(--color-white); font-size: 25px; }
.section-contact .contact-details-content .text a {color: var(--color-white); }
.section-contact .contact-details-content .text a:hover {color: var(--color-primary-light); }
.section-contact .contact-details-content .contact-list {padding: 0; margin: 0; }
.section-contact .contact-details-content .contact-list li {margin-bottom: 10px; position: relative; margin-left: 10px; padding-left: 10px; }
.section-contact .contact-details-content .contact-list li::before {font-family: var(--fontIcons); content: '\F285'; color: var(--color-primary-light); position: absolute; left: -10px; }
.section-contact .contact-details-content .contact-list li a {display: block; -webkit-transition: all .4s ease; transition: all .4s ease; }
.section-contact .contact-details .social-list{text-align: left; }
.section-contact .contact-details .social-list li i {color: #fff; background-color: rgba(255,255,255,0.2); border: 1px solid #fff; }
.section-contact .contact-form span.red{ color: red; }
.section-contact .contact-form #form-loading { display: none; }

.section-enquiry .enquiry-wraper{margin-bottom: 50px; border: 2px solid var(--color-primary-light); background-color: var(--color-white); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); position: relative; }
.section-enquiry .enquiry-form{padding: 40px; height: auto; position: relative; }
.section-enquiry .enquiry-form-heading {position: relative; }
.section-enquiry .enquiry-form-heading::before {position: absolute; content: ""; bottom: 0; left: 0; width: 70px; height: 2px; background-color: var(--color-primary-light); }
.section-enquiry .enquiry-form-heading h2 {margin: 0 0 25px; font-size: 25px; font-weight: 600; text-transform: capitalize; color: var(--color-primary); padding-bottom: 10px; }
.section-enquiry .form-control:focus{border: 1px solid var(--color-primary); box-shadow: 0 0 0 0.25rem var(--color-primary-trans); }
.section-enquiry .enquiry-form textarea{height: 100px; }
.section-enquiry .enquiry-form span.red{ color: red; }
.section-enquiry .enquiry-form #form-loading { display: none; }

#pricelist-form #form-loading { display: none; }