:root{
    --primary : #1E4474;
    --secondary :#FED700;
    --light-blue : #5F94D6;
    --grey : #C4C4C4;
    --primary-80 :  rgba(30, 68, 116, 0.8);
    --primary-30 :  rgba(30, 68, 116, 0.4);
    --light-blue-10 : rgba(95, 148, 214, 0.1);
    --linear-blue : linear-gradient(180deg, rgba(30, 68, 116, 0.9) 0%, rgba(30, 68, 116, 0.5) 100%);
    --black : #000000;
    --black-footer : #1e1e1e;
    --white : #ffffff;
    --white-40 :rgba(255,255,255,0.4);

}


@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

html {
    scroll-margin-top:50px ;
}

/* COMPONENT */
h1,
h2,h3,h4,h5,h6,p,a,span{
    font-family: 'Roboto', sans-serif !important;
}


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

.bg-light-10 {
    background: var(--light-blue-10) !important;
}

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

.bg-linear {
    background: var(--linear-blue) !important;
}

.bg-grey {
    background: var(--grey);
}

.bg-transparant {
    background: transparent;
}

.bg-white {
    background: var(--white);
}

.bg-black {
    background: var(--black);
}

.text-white {
    color: var(--white);
}

.text-grey {
    color: var(--grey) ;
}

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

.text-light {
    color: var(--light-blue);
}

.text-black {
    color: var(--black);
}

.icon {
    font-size: 56px;
}

.marker {
    width: 42px;
}

.icon-sm {
    font-size: 21px;
}


.icon-md {
    font-size: 24px;
}

.icon-lg {
    font-size: 50px;
}

.p-100 {
    padding: 100px 0 !important;
}

.pb-100 {
    padding-bottom: 100px !important;
}

.p-30 {
    padding: 30px !important;
}

.b-0 {
    border: 0 !important;
}

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

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

.nav {
    position: relative;
    display: flex;
    justify-content: center;
}

.nav.nav-tabs::before {
    content: "";
    display: block;
    height: 2px;
    width: 50%;
    background: var(--grey);
    position: absolute;
    bottom: -1px;
    left: 25%; 
    z-index: 2;
}

#tabs .nav.nav-tabs::before {
    width: 80%;
    left: 10%;
}

.nav-link {
    padding: 12px 84px;
    border-radius: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
    color: var(--black);
    white-space: nowrap;
}

.nav-link.line::before{
    content: "";
    display: block;
    height: 40px;
    width: 2px;
    background: var(--grey);
    right: -1px;
    top: 5px;
    position: absolute;
    z-index: 3;
}

.nav-link.one{
    border-radius: 5px 0 0 5px;
}

.nav-link.three{
    border-radius: 0 5px 5px 0;
}

.nav-tabs .nav-link {
    background-color: var(--white);
}

.nav-tabs .nav-link.active {
    background: var(--primary);
    color: var(--white);
    border-color: transparent;
}

#tabs .nav-tabs{
    position: absolute;     
    top: -30px;
    left: 20%;
} 

#tabs .content {
    position: relative;
}

.nav-item {
    border-bottom: 2px solid var(--grey);
}

.nav-tabs {
    border-bottom: 0;
}

.centered {
    display: flex;
    justify-content: center;
}

/* tabs with filter */
.tab-group {
    position: relative;
}

.tabs-btn {
    padding: 12px 82px;
    background: var(--white);
    border: 0;
    color: var(--black);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    position: relative;
    margin-left: -5px;
}

.tab-group::before {
    content: "";
    display: block;
    height: 2px;
    width: 94%;
    background: var(--grey);
    position: absolute;
    bottom: -1px;
    left: 3%; 
    z-index: 2;
}

.tabs-btn::before {
    content: "";
    display: block;
    height: 40px;
    width: 2px;
    background: var(--grey);
    right: -1px;
    top: 5px;
    position: absolute;
    z-index: 3;
}

.tabs-btn.end::before{
    content: '';
    display: none   ;
}

.tabs-btn.active {
    background: var(--primary);
    color: var(--white);
}

.tabs-btn.first {
    border-radius: 4px 0  0 4px ;
}

.tabs-btn.end {
    border-radius:  0 4px 4px  0 ;
}

/* end tabs with filter */

.tab-pane {
    margin-top: 40px;
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
}

a{
    text-decoration: none;
}


.search-input {
    border-radius: 100px;
    border: 2px solid var(--grey);
    /* border-right: 0; */
}

.search-input:focus {
    box-shadow: 0 0 0 0;
    border-color: var(--primary);
}

.close-btn{
    background: transparent;
    border-top: 2px solid var(--grey);
    border-right: 2px solid var(--grey);
    border-bottom: 2px solid var(--grey);
    padding-right: 20px;
}

.search-btn{
    background: transparent;
    border-top: 2px solid var(--grey);
    border-right: 2px solid var(--grey);
    border-bottom: 2px solid var(--grey);
    border-radius: 0 100px 100px 0;
    padding-left: 30px;
    padding-right: 30px;
}

.breadcrumb a, span {
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    color: var(--black);
}

.breadcrumb span {
    margin: 0 5px ;
}

.breadcrumb a.end {
    color: var(--primary);
}

.line-btn {
    color: var(--primary) !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: underline;
}

.main-btn {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: var(--white);
    background: var(--primary);
    border-radius: 100px;
    padding: 12px 34px;
    transition: 0.4s all ease-in-out;
}

.main-btn:hover {
    box-shadow: 2px  2px  20px var(--primary-30);
    color: var(--white);
}

.white-btn {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: var(--black);
    background: var(--white);
    border-radius: 100px;
    padding: 12px 34px;
    transition: 0.4s all ease-in-out;
}

.white-btn:hover {
    color: var(--black);
    box-shadow: 1px  1px  20px var(--white-40);
}

.card-box {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 56px 31px;
    border-radius: 5px;
    max-width: 580px;
}


.card-box .desc p {
    font-size: 18px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.card-box .desc h4 {
    font-size: 42px;
    font-weight: 700;
    line-height: 63px;
    letter-spacing: 0px;
    margin-bottom: 0;

}

.text-link {
    color: var(--primary);
    text-decoration: none;
    transition: 0.3s ease-in-out all;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
}

.text-link:hover {
    color: var(--primary);
    text-decoration: underline;
    transition: 0.3s ease-in all;
}


.card.news {
    border: 0;
}

.card.history {
    border: 0;
}

.card .card-img-top {
    border-radius: 5px;
    height: 235px;
    vertical-align: bottom;
    object-fit: cover;
}

.card .card-img-top.square {
    height: 370px;
}


.card .card-img-top.rectangle {
    height: 235px;
}
.card.news h5{
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    color: var(--black);
    margin-bottom: 0;
    margin-top: 4px;
}

.card.news small {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.4000000059604645px;
    color: var(--grey);
}

.card.news p {
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    color: var(--black);
    margin-top: 30px;
    margin-bottom: 30px;
}

.card.career {
    padding: 48px 30px;
    border-radius: 5px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    height: 100%;
}

.card.career .bg-blue {
    background: linear-gradient(45deg, rgba(30, 68, 116, 0.9) 0%, rgba(30, 68, 116, 0.8) 100%);
    height: 100%;
    width: 100%;
    padding: 48px 30px;
    transition: 0.4s background ease-in-out;

}

.card.career .bg-blue:hover {
    background: linear-gradient(180deg, rgba(30, 68, 116, 1) 0%, rgba(30, 68, 116, 1) 100%);
}

.card.career h5,.card.career h6,.card.career p,.card.career a {
    color: var(--white) !important;
}

.card.career h6 {
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 0;
}

.card.career h5 {
    font-size: 42px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -0.4000000059604645px;
    margin-bottom: 30px;
}

.card.career p {
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 30px;
}

.card.career .text-link {
    text-decoration: underline;
    font-size: 22px;
}

.subheading {
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0px;
    color: var(--black);
}

#history .subheading {
    font-weight: 600;
    font-size: 18px;
}

#management-executive .subheading {
    font-weight: 600;
}

.heading {
    font-size: 42px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -0.4000000059604645px;
    color: var(--black);
    margin-bottom: 30px;
}

.desc {
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0px;
    color: var(--black);
}

.full-img {
    width: 100%;
    object-fit: cover;
    vertical-align: middle;
    max-height: 350px;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

/* END COMPONENT */

/* Navbar */
#header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--white);
}

#header .navbar {
    padding: 0;
}

.nav-item {
    border-bottom: 0;
    position: relative;
}

#header .nav-link {
    padding: 25px 25px !important;
    color: var(--black) !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    transition: 0.3s all ease-in-out;
}

#header .nav-link.active,
#header .nav-link:hover{
    background: #1E4474;
    color: var(--white) !important;
}

#header .nav-link::before {
    content: "";
    display: block;
    height: 40px;
    width: 2px;
    background: var(--grey);
    right: -1px;
    top: 15px;
    position: absolute;
}

#header .search-btn {
    padding-left: 10px;
    padding-right: 10px;
    border-color: var(--black-footer);
}

#header .search-btn i {
    color: var(--black-footer);
}

#header .search-btn i:hover {
    color: var(--black-footer);
}

#header input {
    margin-left: 15px;
}

.bg-light {
    background: transparent !important;
}

.navbar-brand {
    margin-right: 37px;
}

.dropdown-menu {
    border: 0;
    border-radius: 0;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
    background: var(--white);
}

.navbar-expand-lg .navbar-nav .dropdown-menu a:hover{
    background: var(--primary);

}

.navbar-expand-lg .navbar-nav .dropdown-menu a:hover{
    color: var(--white);

}

.dropdown-item {
    color: var(--black);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    padding: 20px 30px ;
}

.dropdown-divider {
    background-color :var(--grey);
    height: 2px !important;
    opacity: 1;
    width: 80%;
    margin: 0 auto;
}

.dropdown-item:focus, .dropdown-item:hover {
    background: var(--primary);
    color: var(--white);
}

/* language */
.navbar .right {
    position: relative;
    display: flex;
    width: 150px;
}

.select-language {
    position: absolute;
    top: -20px;
    left: 10px;
}

.select-language li {
    list-style: none;
    padding: 10px 12px;
}

.select-language li.lang {
    display: block;
    position: absolute;
    top: 0;
}

.select-language li.hidden {
    background: var(--primary);
    display: none;
    position: absolute;
    top: 44px;
}


.select-language li.hidden a span {
    color: var(--white);
}

.select-language:hover .hidden{
    display: block;
}

.select-language li a{
    display: flex;
    text-decoration: none;
    color: var(--black);
}


.select-language li a img{
    margin-right: 4px;
}


.navbar .right i {
    position: absolute;
    top: -5px;
    right: -10px;
}

/* end Navbar */

/* Footer */
footer {
    background: var(--black-footer);
    padding-top: 100px;
}

footer .img-wrap img {
    border-radius: 4px;
    padding: 15px 21px;
    width: 103px;
    background-color: var(--white);
}

footer h4 {
    margin-bottom: 24px;
    font-size: 22px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 2px;
}

footer .social-media {
    margin-bottom: 50px;
}

footer .social-media a{
    margin-right: 30px;
}

footer .right {
    position: relative;
    display: flex;
    width: 150px;
}

.select-language {
    position: absolute;
    top: -20px;
    padding-left: 0;
}

.select-language li {
    list-style: none;
    padding: 10px 15px;
}

.select-language li.lang {
    display: block;
    position: absolute;
    top: 0;
}

.select-language li.hidden {
    background: var(--primary);
    display: none;
    position: absolute;
    top: 44px;
}


.select-language li.hidden a {
    color: var(--white);
}

.select-language:hover .hidden{
    display: block;
}

.select-language li a{
    display: flex;
    text-decoration: none;
    color: var(--black);
}

.select-language li a img{
    margin-right: 4px;
}

footer .right i {
    position: absolute;
    top: -5px;
    right: 10px;
    color: var(--white);
}

footer .top-footer {
    margin-bottom: 50px;
}

footer p{
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0px;
}

footer .contact {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

footer .contact a {
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0px;
}

footer .bottom-footer {
    padding: 30px 0;
    border-top: 1px solid var(--grey);
}

footer .bottom-footer p {
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
}
/* end Footer */

/* Hero */
#hero {
    height: calc(100vh - 65px);
    position: relative;
    overflow: hidden;
}

#hero .container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

#hero .bg-blue{
    padding: 200px 0 35px 0;
    background: linear-gradient(90deg, rgba(30, 68, 116, 0.9) 0%, rgba(30, 68, 116, 0.3) 100%);
    height: 100%;
}

#hero h1 {
    font-size: 64px;
    font-weight: 700;
    line-height: 77px;
    color: var(--white);
    width: 640px;
    margin-bottom: 55px;
}

#myVideo {
    position: absolute;
    right: 0;
    top: -170px;
    bottom: 0;
    min-width:100%; 
    min-height: 130vh;
    z-index: -1;
  }

#hero .buttons button{
    background: transparent;
    border: 0;
    padding: 13px 19px;
    margin-left: 30px;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: var(--white);
}

#hero .buttons button i{
    margin-right: 8px;
}

#hero .bottom {
    width: 100%;
}

#hero .bottom .content {
    display: flex;
    justify-content: space-between;
}

#hero .bottom .content p{ 
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0px;
    color: var(--white);
}

#hero .bottom .content .line{
    width: 70%;
    height: 2px;
    background: var(--grey);
    margin-top: 10px;
    margin: 10px 10px 0 10px;
}

/*  end Hero */

/* about hero */
#about-hero {
    padding: 100px 0;
}

.line-heading {
    height: 2px;
    background: var(--black);
    width: 50%;
    margin-left: auto;
    margin-top: 10px;
}

/* end about hero */

/* partners */
#partners {
    padding: 72px 0;
}

#partners .item {
    height: 100px;
    width: 100px;
    background: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
}

#partners .item img {
    max-width: 140px;
    max-height: 100px;
}
/* end partners */

/* services */
#services-hero {
    padding: 20px 0 100px 0;
}

#services-hero .container {
    padding: 100px;
    background: var(--black);
    border-radius: 5px;
}

#services-hero .bg-grey{
    background: var(--grey) !important;
    transition: 0.3s ease-in-out all;
    /*transform: scale(1.2);*/
}

#services-hero .bg-grey:hover{
    background : var(--primary) !important;
}

#services-hero .bg-grey:hover .text-black{
    transition: 0.3s ease-in-out all;
    color: var(--white);
}

.service-icon {
    height: 48px;
    max-width: 80px;
}
/* end services */

/* projects-hero */
#projects-hero {
    padding: 100px 0;
}
#projects-hero .heading{
    width: 70%;
}

/* end projects-hero */

/* career hreo */
#career-hero {
    padding: 100px 0;
}
/* end career hero */

/* news hero */
#news-hero {
    padding: 100px 0;
}
/* end news hero */

/* cta hero */
#cta-hero {
    padding: 50px 0 0 0 ;
}

#cta-hero .container {
    background: var(--primary);
    border-radius: 5px;
    padding: 60px;
    margin-bottom: -115px;
    z-index: 2;
    position: relative;
}

#cta-hero .container h3 {
    font-size: 42px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -0.4000000059604645px;
    margin-bottom: 60px;
}

#cta-hero .devider {
    background: var(--black-footer);
    height: 115px;
    position: relative;
    z-index: 1;
}
/* end cta hreo */

/* Ineractive maps */
.wrap {
    position: relative;
    width: 100%;
    height: 605px;
}

#map {
    height: 550px;
    /* width: 1100px; */
    filter: hue-rotate(20deg);
    filter: saturate(0.5);
    position: absolute;
    top: 9%;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: unset;
    background: unset;
    overflow: hidden;
}

.leaflet-bottom.leaflet-right {
    display: none;
}

.leaflet-popup-content {
    height: auto;
    width: 100px;
    background: #fff;
}

.leaflet-popup-content svg {
    width: 100px;
}

.filter-btn {
    padding: 10px 80px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 0 0;
    border: 0;
    color: #000;
    cursor: pointer;
    margin: 0;
}

.filter-btn.active {
    background: #1E4474;
    color: #fff;

}

.leaflet-popup-content-wrapper {
    width: 330px;
}

.leaflet-left {
    right: 100px;
    left: unset;
}

.leaflet-top {
    bottom: -1px;
    top: unset;
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
    display: flex;
}

.leaflet-touch .leaflet-bar a {
    padding: 10px 57px 35px 53px;
}

.leaflet-touch .leaflet-bar a:first-child {
    background: #1E4474;
    color: #fff;
}

.leaflet-touch .leaflet-bar {
    border: 0;
}

.leaflet-control-zoom-out {
    background: #6F9DD9;
    color: #fff;

}

.leaflet-control-zoom-out .leaflet-disabled {
    background: #555;
}

.buttons-maps {
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 999;
    width: 100%;
    display: flex;
    justify-content: center;
}

.buttons-maps::before {
    content: "";
    display: block;
    height: 2px;
    width: 65%;
    background: var(--grey);
    position: absolute;
    bottom: -1px;
    left: 17%; 
    z-index: 2;
}

.buttons-maps .filter-btn {
    margin-left: -5px;
    border-radius: 0;
    position: relative;
}


.buttons-maps .filter-btn::before {
    content: "";
    display: block;
    height: 35px;
    width: 2px;
    background: var(--grey);
    right: 4px;
    top: 5px;
    position: absolute;
    z-index: 3;
}

.buttons-maps .filter-btn.end::before {
    content: "";
    display: none;
}

.buttons-maps .filter-btn.start {
    border-radius: 5px 0 0 5px;
}

.buttons-maps .filter-btn.end {
    border-radius: 0 5px 5px 0;
}

.maps-wrap {
    position: relative;
}

.leaflet-popup-content-wrapper {
    border-radius: 5px;
}

.leaflet-container a.leaflet-popup-close-button {
    background: var(--primary);
    font-size: 15px;
    width: 25px;
    height: 25px;
    padding: 7px;
    border-radius: 0 5px 0 5px;
}

.legend {
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    bottom: 0;
    right: calc(100px + 212px);
}

.legend .item {
    padding: 10px 80px;
    background: var(--white);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    position: relative;
}

.legend .item::before {
    content: "";
    display: block;
    height: 35px;
    width: 2px;
    background: var(--grey);
    left: -1px;
    top: 7px;
    position: absolute;
    z-index: 3;
}

.legend .item.first {
    border-radius: 5px 0 0 0;
}

.legend .item.first::before {
    content: "";
    display: none;
}

.img-icon {
    height: 24px;
    width: 18px;
    object-fit: cover;
    vertical-align: middle;
}
/* end Ineractive maps */

/* header-page */
#header-page {
    padding: 100px 0 50px 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

#header-page .cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(30, 68, 116, 0.9) 0%, rgba(30, 68, 116, 0.5) 100%);
    z-index: 0;
}

#header-page .container {
    position: relative;
    z-index: 2;
} 
#header-page .top{
    margin-bottom: 100px;
}

#header-page h5 {
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
}

#header-page h2 {
    font-size: 64px;
    font-weight: 700;
    line-height: 82px;
    letter-spacing: -0.4000000059604645px;
}

#header-page .bottom{
    display: flex;
    justify-content: space-between;
}
#header-page .bottom .line-header {
    width: calc(100% - 230px);
    height: 2px;
    background: var(--grey);
    margin-top: 10px;

}

#header-page .bottom p {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}
/* end header-page */

/* about page */

#about-us {
    padding-top: 100px ;
    position: relative;
}

#about-us .row {
    margin-bottom: 60px;
}

#vision-mision {
    padding: 100px 0;
    background: var(--light-blue-10);
}

#about-us .bg-light {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 270px;
    z-index: -1;
    background-color: var(--light-blue-10) !important;
}

/* start tabs */

#tabs {
    padding: 100px 0;
}

#tabs .container {
    background-color: var(--light-blue-10);
    padding: 0 60px 100px 60px;
}

#tabs .tab-content {
    height: 530px;
    overflow-y: auto;
}

#vision-mision p,
#vision-mision li {
    font-family: 'Roboto', sans-serif;
}
#tabs p,
#tabs li{
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px;
}
/* end tabs */

#history {
    padding-bottom: 100px;
}

/* history carousel */

#history .history-content {
    position: relative;
}

#history .owl-stage {
	padding-bottom: 1rem;
	padding-top: 1rem;
}

#history .owl-carousel .item {
	height: 400px;
	background: #fff;
}

#history .owl-carousel .owl-item img {
	height: 60%;
	width: 100%;
	object-fit: cover;
	vertical-align: middle;
}

#history .owl-carousel .owl-item.active.center {
	transform: scale(1);
	transition: all 0.7s;
	box-shadow: 0px 1.6143995523452759px 7.2132744789123535px 0px #00000012;
    box-shadow: 0px 4.082937717437744px 18.24291229248047px 0px #0000000C;
    box-shadow: 0px 8.32880973815918px 37.213829040527344px 0px #0000000A;
    box-shadow: 0px 17.155773162841797px 76.65345764160156px 0px #00000008;
	border-radius: 3px;
	overflow: hidden;
    opacity: 1 !important;
}

#history .owl-carousel .owl-item.active,
#history .owl-carousel .owl-item.cloned,
#history .owl-carousel .owl-item {
	transform: scale(0.8);
	transition: all 0.7s;
    opacity: 0.7;
}

#history .owl-nav {
    position: absolute;
    top: 48%;
    display: flex;
    justify-content: space-between;
    width: 120%;
    left: -10%;
}

#history .owl-carousel .owl-nav button {
	font-size: 4rem;
	background: var(--primary);
	text-shadow: 2px 2px 5px #555;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 1.6143995523452759px 7.2132744789123535px 0px #00000012;
    box-shadow: 0px 4.082937717437744px 18.24291229248047px 0px #0000000C;
    box-shadow: 0px 8.32880973815918px 37.213829040527344px 0px #0000000A;
    box-shadow: 0px 17.155773162841797px 76.65345764160156px 0px #00000008;
}

#history .owl-carousel .owl-nav button span {
    color: var(--white);
    font-size: 30px;
}

 #history .owl-carousel .owl-nav .owl-prev.disabled,
 #history .owl-carousel .owl-nav .owl-next.disabled {
	color: #c1c1c1;
}

#product-content .card-box:hover{
    box-shadow: 0px 17.1558px 76.6535px rgb(0 0 0 / 15%), 0px 8.32881px 37.2138px rgb(0 0 0 / 16%), 0px 4.08294px 18.2429px rgb(0 0 0 / 17%), 0px 1.6144px 7.21327px rgb(0 0 0 / 19%);
    transition : 0.3s ease-in all;
}

.product-content p {
    margin-bottom: 30px;
    line-height: 32px;
}

.product-content {
    line-height: 32px;
    font-family: 'Roboto', sans-serif;
}

.product-content .full-img {
    margin-bottom: 30px;
}

.product-content img {
    max-width: 100% !important;
    height: auto !important;
}

/* projects*/
#projects{
    padding: 100px 0;
}
#projects.heading{
    width: 70%;
}

#projects-list .row {
    flex-direction: row;
    justify-content: center;
}

#projects-list .filter {
    width: 230px;
} 

#projects-list .form-select {
    background-image: url(../img-custom/icon/dropdown.svg);
}

#projects-list .filter select {
    padding: 10px 20px;
    background: var(--primary);
    color: var(--white);
}

#projects-list .filter select .item {
    background: var(--white);
    padding: 10px 20px;
    color: var(--black);
    margin-bottom: 20px;
}

#projects-list .filter select:focus {
    box-shadow: 0 0 0 0;
}

#projects-list .tab-filter {
    position: relative;
    display: inline;
    width: auto;
}

#projects-list .tab-filter .centered {
    justify-content: start;
}

/* end projects*/

/* Career */
#career .accordion-button{
    font-size: 42px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -0.4000000059604645px;
    color: var(--black);
    padding: 60px;
}

#career .accordion-item {
    margin-bottom: 30px;
    box-shadow: 0px 17.1558px 76.6535px rgba(0, 0, 0, 0.0310596), 0px 8.32881px 37.2138px rgba(0, 0, 0, 0.0389404), 0px 4.08294px 18.2429px rgba(0, 0, 0, 0.0482987), 0px 1.6144px 7.21327px rgba(0, 0, 0, 0.07);
    border-radius: 5px;
}

#career .accordion-body {
    padding: 30px 60px 60px 60px;
}

#career .accordion-body {
    line-height: 32px;
    font-family: 'Roboto', sans-serif;
}

#career .accordion-body .date {
    color: var(--grey);
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 30px;
}
/* end Career */

/* news */
#news-detail .category {
    display: flex;
    flex-direction: column;
}

#news-detail .category a {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: var(--black);
}

#news-detail .category a:hover {
    color: var(--primary);
}

#news-detail .date {
    color: var(--grey);
    font-size: 18px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -0.4000000059604645px;
}

#news-detail .news-item {
    border-bottom: 1.5px solid var(--grey);
} 


#news-detail .date-item {
    color: var(--grey);
    font-size: 16px;
    line-height: 32px;
}

#news-detail .sidebar {
    position: sticky;
    top: 100px;
}

#news-detail h5 {
    color: var(--black);
}
/* emd news */

/* contact */
#contact-form {
    padding: 60px 0;
    background: var(--light-blue-10);
}

#contact-form form label {
    font-size: 12px;
    font-weight: 400;
    line-height: 26px;
    color: var(--grey);
}

#contact-form form input {
    border: 0;
    border-bottom: 2px solid var(--grey);
    border-radius: 0;
    color: var(--black);
}

#contact-form form input:focus {
    box-shadow: 0 0 0 0;
}

#contact-form form textarea {
    border: 2px solid var(--grey);
    border-radius: 5px;
}

#contact-form span {
    font-size: 12px;
    line-height: 26px;
}


/* end contact */

/* search */
.product-section {
    /* border-bottom: 2px solid var(--grey); */
    margin-bottom: 40px;
}
#searching-result .top {
    display: flex;
    justify-content: center;
}
/* search */

/* cookies */
#cookies {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999999999999999;
    background: var(--primary-80);
    /* display: flex; */
    flex-direction: column;
    justify-content: end;
    display: none;
    transition: 0.2s display ease-in-out;
}

#cookies .container-fluid{
    position:relative;
    height: 100vh;
}

#cookies.show { 
    display: flex;
}

#cookies .wrapper {
    position: relative;
}

#cookies .cookies {
    background: var(--white);
    position: absolute;
    bottom: 0;
    left: 0;
    right:0;
    padding: 40px 100px;
}

#cookies .d-block {
    width: 180px;
}

#cookies .white-btn {
    border: 1px solid var(--primary);
}

#cookies p.desc{
    width: calc(100% - 440px);
    margin-right: 70px;
}
/* end cookies */

/* error 404 */
#error-404 {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#error-404 .content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#error-404 h3 {
    font-size: 72px;
    font-weight: 700;
    line-height: 86px;
    margin-left: 60px;
}

#error-404 h6 {
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
}

#error-404 .line-btn {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: var(--primary);
    text-decoration: underline;
}

#error-404 .images {
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
}


/* end error 404 */

.productCategories-icon {
    width: auto;
    height: 50px;
    object-fit: cover;
}


#about-navbar::after {
    transition: 0.3s ease-in-out all;
    transform: rotate(-90deg);
}

#about-navbar.show::after {
    transform: rotate(0);
}

#header .search-btn-one {
    border: 0px !important;
    background:transparent;
    padding-left: 20px;
    padding-right: 20px;
    transition: 0.3s ease-in-out all;
    color: var(--black);
}

#header .search-btn-one.hide i{
    color: var(--grey);
}

#search-nav {
    position: absolute;
    top: 30px;
    right: 10px;
    width: 250px;
    border-radius: 100px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#search-nav input{
    margin-left: 0;
    border: 0px solid var(--black-footer) !important;
}

#search-nav button{
    border: 0px solid var(--black-footer) !important;
    background: #fff;
}

#projects-list .filter{
    position: relative;
}

#projects-list .filter img{
    transform: rotate(0);
    transition: 0.3s ease-in-out all;
    position: absolute;
    right: 20px;
    top: 10px;
}

#proect-list .filter:hover img{
    transform: rotate(90deg);
}