:root{
  --primary1: 8,76,113; /* #084C71 */
  --primary2: 50,137,185; /* #3289B9 */
  --bs-body-color: 44,44,44; /* #2C2C2C */
  --color_black: 0,0,0;
  --color_white: 255,255,255;
  --baseFont: "Montserrat", sans-serif;
  --titleFont: "Phudu", sans-serif;
  --imgBodycolor: invert(12%) sepia(0%) saturate(431%) hue-rotate(252deg) brightness(92%) contrast(85%);
  --imgPrimary1: invert(21%) sepia(63%) saturate(1156%) hue-rotate(169deg) brightness(96%) contrast(96%);
  --imgPrimary2: invert(45%) sepia(21%) saturate(1302%) hue-rotate(157deg) brightness(102%) contrast(99%);
  --imgWhite: invert(100%) sepia(100%) saturate(0%) hue-rotate(13deg) brightness(103%) contrast(102%);
  --imgBlack: invert(0%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(93%) contrast(103%);
  --padding: clamp(1.5625rem, 1.0625rem + 2.5vw, 3.125rem);
  --mb:1.875rem;
  --bs-breadcrumb-divider: '/';
  --radius: clamp(0.875rem, 0.755rem + 0.6vw, 1.25rem);
}

body {font-family: var(--baseFont); color:rgb(var(--bs-body-color)); font-weight: 400; font-variant-ligatures: no-common-ligatures;}
a:hover, a:focus {outline: none; -webkit-box-shadow: none; box-shadow: none; text-decoration: none; color: rgb(var(--primary1));}
button:focus {outline: none;}
a {color: rgb(var(--baseColor));}

.transition {-webkit-transition: all .3s linear; transition: all .3s linear;}

::selection {color: rgb(var(--color_white)); background: rgb(var(--primary2));}
.clr-base {color: rgb(var(--bs-body-color));}
.clr-1 {color: rgb(var(--primary1)) !important;} .bg-clr-1 {background-color: rgb(var(--primary1)) !important;}
.clr-2 {color: rgb(var(--primary2)) !important;} .bg-clr-2 {background-color: rgb(var(--primary2)) !important;}
.clr-3 {color: rgb(var(--primary3)) !important;} .bg-clr-3 {background-color: rgb(var(--primary3)) !important;}

.bg{background-color: #F5F5F5;}

.base-font {font-family: var(--baseFont);}
.title-font{font-family: var(--titleFont);}


/* Preloader */
#preloader{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background:rgb(var(--color_white)); z-index: 2000;}
.pre-container{position: absolute; left: 50%; top: 49%; bottom: auto; right: auto; -webkit-transform: translateX(-49%) translateY(-50%);  -moz-transform: translateX(-49%) translateY(-50%);  transform: translateX(-49%) translateY(-50%); text-align: center;}

/* button custom */
.btn-custom {position: relative; border: none; display: flex; align-items: center; font-size: 0.9375rem; font-weight: 600; margin-top: 1rem;}
.btn-custom .icon{width: 40px; height: 28px; background-color: rgb(var(--bs-body-color)); border-radius: 30px; flex-shrink: 0; position: relative; margin-left: 1rem;}
.btn-custom .icon::before{content: ""; background: url('../images/arrow02.svg') no-repeat 0 0;  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; transition: all .1s linear;}
.btn-custom:hover .icon{background-color: rgb(var(--primary2));}
.btn-custom:hover .icon::before{left: 90%; transform: translate(-90%, -50%);}
.btn-custom:hover,.btn-custom:focus,.btn-custom:active{outline: none; --bs-link-color-rgb:none;}

.btn-custom02{border-radius: 10px; background: linear-gradient(90deg, #195B89 0%, #D08ED0 100%); padding: 8px 30px; border: none; color: rgb(var(--color_white)) !important; text-transform: uppercase;}
.btn-custom02:hover,.btn-custom02:focus,.btn-custom:active{outline: none; --bs-link-color-rgb:none;}

/* owl-carousel */
/* .owl-flex .owl-stage {display: flex;}
.owl-carousel.style01 .owl-dots {text-align: center; margin-top: 1.5rem;}
.owl-carousel.style01 .owl-dots .owl-dot span{width: 14px; height: 14px; border-radius: 50%; background-color: rgb(var(--primary2)); display: block; margin: 0 5px;}
.owl-carousel.style01 .owl-dots .owl-dot.active span{background-color: rgb(var(--primary1));}
.owl-carousel.style01 .owl-nav button{width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;}
.owl-carousel.style01 .owl-nav button:before {content: ''; background: url('../images/nav-arrow.svg') center center no-repeat; width: 36px; height: 28px;}
.owl-carousel.style01 .owl-nav button.owl-prev:before {transform: rotate(180deg);}
.owl-carousel.style01 .owl-nav [class^='owl-'].disabled:before {cursor: default; opacity: 0.3;}
.owl-carousel.style01 .owl-nav.disabled [class^='owl-'] {display: none;} */

.owl-carousel.style01 .owl-prev,.owl-carousel.style01 .owl-next{position: absolute;}
.owl-carousel.style01 .owl-prev{left: -40px; }
.owl-carousel.style01 .owl-next{right: -40px; }
.owl-carousel.style01 .owl-nav{ width: 100%; max-width: 1320px; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.owl-carousel.style01 button .sprite{background: url('../images/arrow.png') no-repeat 0 0; filter: var(--imgPrimary1); width: 31px; height: 31px; display: block; background-size: cover;}
.owl-carousel.style01 button .arrow-right{transform: rotate(180deg);}
.owl-carousel.style01 button.disabled .sprite{opacity: 0.5;}
.trending-slider.owl-flex .owl-stage{align-items: flex-start;}

#wrapper {max-width: 1920px; margin: 0 auto; position: relative; overflow: hidden;}

/* header */
header {width: 100%; left: 0; right: 0; top: 0; margin: 0 auto; z-index: 1021 !important; transition: all 0.3s; --bs-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.05);}
header .navbar { transition: all 0.3s linear; z-index: 10; align-items: flex-start; margin: 1.5rem 0 0;  padding: 0 30px; position: relative;}
header .navbar::before{content: ""; position: absolute; inset: 0; background-color: rgb(var(--color_white)); clip-path: polygon(100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px, 20px 0); }
header .navbar .navbar-toggler{border: none;}
header .navbar .navbar-toggler:focus{outline: none; box-shadow: none;}
header .navbar .navbar-toggler .navbar-toggler-icon{--bs-navbar-toggler-icon-bg1:none;}
header .navbar .navbar-brand img{transition: all .2s linear;}
header .navbar #main-menu { background-color1: rgb(var(--color_white));}
header.fixed {background: rgb(var(--color_white)); box-shadow: 0px 4px 50px rgba(44, 48, 50, 0.1);}
header.fixed .navbar {margin: 0;}

.offcanvas-header .btn-close{box-shadow: none;}

.search-trigger {position: relative; cursor: pointer; margin-left: 15px;}

.search-block { display: flex; align-items: center; width: 0; z-index: 9999;  height: 100%; transition: all .3s linear; top: 0; bottom: 0; right: 0; z-index: -1; position: absolute; padding: 16px; background-color: rgb(var(--color_white)); clip-path: polygon(100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px, 20px 0);}
.search-block.active{right: 0; width: 500px; z-index: 1;}
.search-block .search-form{width: 100%;}
.search-block .search-form .input-group .btn{background-color: rgba(var(--primary2),0.2); border-radius: 0; border-color: rgba(var(--primary2),0.2);}
.search-block .search-form .input-group .btn:focus{outline: none;}
.search-block .search-form .input-group .form-control:focus{box-shadow: none; border-color:rgba(var(--primary2),0.4);}


/* header .navbar .navbar-nav .dropdown-menu{border: none;   border-top: 1px solid #E2E2E2;  border-radius: 0; margin: 0; padding: 0; font-size: 1rem;
  clip-path: polygon(100% 0, 100% 91%, 97% 100%, 0 100%, 0 0); box-shadow: 0px 4px 50px rgba(44, 48, 50, 0.1); left: 0; display: none;
}

header .navbar .navbar-nav .dropdown-menu ul{margin-bottom: 0.5rem;}
header .navbar .navbar-nav .dropdown-menu ul li{margin: 0;}
header .navbar .navbar-nav .dropdown-menu ul li a{padding: 0; color: rgb(var(--bs-body-color)); margin-bottom: 0.5rem; line-height: normal; font-size: 0.9375rem; text-decoration: none;  position: relative; display: block;}
header .navbar .navbar-nav .dropdown-menu a:hover,header .navbar .navbar-nav .dropdown-menu a:focus{color: rgb(var(--primary2)) !important;}
header .navbar .navbar-nav .dropdown-menu .btn-custom:hover{color: rgb(var(--color_white)) !important;}

header .navbar .navbar-nav .dropdown:hover>.dropdown-menu{display: block; }
header .navbar .navbar-nav .dropdown-menu li .nav-link{padding:10px 15px;}
header .dropdown-menu .dropdown-item:focus, header .dropdown-menu .dropdown-item:hover {color: rgb(var(--primary1)); background-color: transparent;} 

header .navbar .navbar-nav .dropdown .dropdown-menu{left: 0; top: 99%; }
.dropdown-submenu {position: relative;}
.dropdown-submenu > .dropdown-menu {top: 0; left: 100%; margin-top: -0.125rem; display: none; position: absolute;} */

header .navbar .navbar-nav li ul{width: 250px;}
header .navbar .navbar-nav li {margin: 0; position: relative;}
header .navbar .navbar-nav li a {transition: 0.5s; font-size1: 0.9375rem; padding: 1.5rem 10px; color: rgb(var(--bs-body-color));  font-weight: 700; position: relative; overflow: hidden; white-space: normal; display: block;}
header .navbar .navbar-nav li a:hover, header .navbar .navbar-nav li:hover>a {background-color: rgb(var(--primary2)); color: rgb(var(--color_white));}

header .navbar .navbar-nav li a{text-decoration: none;}

header .navbar .navbar-nav .dropdown-menu{padding: 0 !important;}
header .navbar .navbar-nav .dropdown-menu li a{padding: 0.7rem 1rem; padding-right: 1.5rem; display: block; line-height: normal; font-weight: 500;}
header .navbar .navbar-nav .dropdown-menu li a:hover,header .navbar .navbar-nav .dropdown-menu li a:focus{background-color: rgb(var(--primary2)); color: rgb(var(--color_white));}
header .navbar .navbar-nav .dropdown-menu li:hover>.dropdown-submenu a{background-color: rgb(var(--primary2)); color: rgb(var(--color_white));}
header .navbar .navbar-nav .dropdown-menu .dropdown-submenu .dropdown-toggle::after{position: absolute; right: 0.5rem; top: 1rem; transform: rotate(-90deg);}
header .navbar .navbar-nav .dropdown>.dropdown-toggle::after  {display: none;}

.dropdown,.dropdown-submenu {position: relative; }
.dropdown-submenu{margin: 0 !important; top: 101%;}
.dropdown >.dropdown-menu,.menu-item-has-children >.dropdown-menu{left: 0; padding: 0; top: 100%; margin-top: -0.125rem; display: none; position: absolute; border-radius: 0; border: none; box-shadow: 0px 4px 50px rgba(44, 48, 50, 0.1);  }
.dropdown-submenu > .dropdown-menu {top: 0; left: 100%; display: none; position: absolute; border-radius: 0; border: none; padding: 0; box-shadow: 0px 4px 50px rgba(44, 48, 50, 0.1);}

/* Show submenu on hover */
.dropdown:hover > .dropdown-menu,.dropdown-submenu:hover > .dropdown-menu { display: block;}
.menu-item-has-children:hover > .dropdown-menu,.dropdown-submenu:hover > .dropdown-menu { display: block;}



/* floating socials */
.floating-socials {display: flex; flex-direction: column; align-items: center; position: fixed; right: 6px; top: 60%; width: 50px; background: rgba(var(--color_black),0.6); border-radius: 84px; z-index: 9; padding: 8px;}
.floating-socials a {margin-bottom: 0.5rem;}
.floating-socials a img{filter: var(--imgWhite); top: 0; position: relative; transition: top .2s linear;}
.floating-socials a:last-child {margin-bottom: 0;}
.floating-socials a:last-child img{filter: none;}

/* .overlay {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); z-index: 1021; transition: 0.4s; opacity: 0; visibility: hidden;}
.has-overlay .overlay {opacity: 1; visibility: visible;} */

/* banner */
.banner {height: 100vh; max-height: 650px; position: relative; background:rgba(var(--primary2),0.2) url('../images/home-banner-bg.webp') no-repeat 0 0; background-size: cover;}
.banner .container {position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: flex-end; flex-direction: column;}
.banner .container .shape {position: absolute; inset: 0; margin: 0 auto;}
.banner .banner-text{font-family: var(--titleFont); font-weight: 300; color: rgb(var(--primary1)); line-height: 1;
  font-size: clamp(1.875rem, 1.035rem + 4.2vw, 4.5rem); 
  font-size: clamp(1.75rem, 1.01rem + 3.7vw, 4.0625rem); 
  font-size: clamp(1.75rem, 1.11rem + 3.2vw, 3.75rem);
}
.banner .banner-text span{font-weight: 700;}

/* banner-slider */
.banner-slider,.banner-slider .item {height: 100vh; max-height: 650px; position: relative;}
.banner-slider .item img{width: auto;}
.banner-slider .item .btn-custom{ font-family: var(--baseFont); }

.banner-slider .point{position: absolute; cursor: pointer; width: 10px; height: 10px; border-radius: 50%; background-color: rgb(var(--color_white)); border: 1px solid transparent; outline: 1px solid rgb(var(--color_white)); outline-offset: 4px;   z-index: 1; transition: all .2s linear; animation: zoom-in-zoom-out 1s ease infinite; }

.banner-slider .owl-item:nth-child(1) .item .d-flex{justify-content: flex-start;}
.banner-slider .owl-item:nth-child(1) .item .banner-text{right: 0; }
.banner-slider .owl-item:nth-child(1) .item .banner-text .pin{right: 70px; position: absolute; top: -70px;}
.banner-slider .owl-item:nth-child(3) .item .d-flex{justify-content: flex-start;}
.banner-slider .owl-item:nth-child(3) .item .banner-text{right: 0; }
.banner-slider .owl-item:nth-child(3) .item .banner-text .pin{right: 120px; position: absolute; top: 80px;}
.banner-slider .owl-item:nth-child(3) .container .shape{left: -50%; width: 44%; top: auto;}
.banner-slider .owl-item:nth-child(1) .container .shape{left: -40%;}

.banner-slider .owl-item:nth-child(2) .item .d-flex{justify-content: flex-end; flex-direction: row-reverse;}
.banner-slider .owl-item:nth-child(2) .item .banner-text{left: 0; }
.banner-slider .owl-item:nth-child(2) .item .shape{ left: 40%;}
.banner-slider .owl-item:nth-child(2) .item .banner-text .pin {position: absolute; left: -40px; top: 60px;}

.banner-slider .owl-item:nth-child(4) .item .d-flex{justify-content: flex-start;}
.banner-slider .owl-item:nth-child(4) .item .banner-text{right: 0; }
.banner-slider .owl-item:nth-child(4) .item .banner-text .pin{right: 20px; position: absolute; top: 0;}
.banner-slider .owl-item:nth-child(4) .container .shape{left: -55%; width: 45%; top: auto;}

.banner-slider .owl-item:nth-child(5) .item .d-flex{justify-content: flex-end; flex-direction: row-reverse;}
.banner-slider .owl-item:nth-child(5) .item .banner-text{left: 0; }
.banner-slider .owl-item:nth-child(5) .item .shape{ left: 40%; width: 40%; top: auto;}
.banner-slider .owl-item:nth-child(5) .item .banner-text .pin {position: absolute; left: 220px; top: 20px;}

.banner-slider .owl-item:nth-child(6) .item .d-flex{justify-content: flex-end; flex-direction: row-reverse;}
.banner-slider .owl-item:nth-child(6) .item .banner-text{left: 0; }
.banner-slider .owl-item:nth-child(6) .item .shape{ left: 40%;}
.banner-slider .owl-item:nth-child(6) .item .banner-text .pin {position: absolute; left: -40px; top: 60px;}


.banner-slider .banner-text{width: 45%;}
.banner-slider .banner-pic{width: 55%;}

.banner .point .name{font-weight: 600; font-size: 0.9375rem;}
.tooltip{--bs-tooltip-opacity:1:}
.tooltip-inner{background-color: rgb(var(--color_white)); opacity: 1; padding: 0; opacity: 1; border-radius: var(--radius); --bs-tooltip-opacity:1;}
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before {border-bottom-color:rgb(var(--color_white)) !important;}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {border-top-color: rgb(var(--color_white));}
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before{border-right-color: rgb(var(--color_white));}
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before{border-left-color: rgb(var(--color_white));}



@keyframes zoom-in-zoom-out {
  0% {
    scale: 100%;
  }
  50% {
    scale: 120%;
  }
  100% {
    scale: 100%;
  }
}

/* .banner .point:hover{
  scale: 120%;
} */



/* Typography */
.padding {padding: var(--padding) 0;}
h2.title {font-size: clamp(1.25rem, 0.85rem + 2vw, 2.5rem); font-weight: 400;}
h2.title span{font-weight: 600;}
h2.titleSm{font-size: clamp(1rem, 0.88rem + 0.6vw, 1.375rem);}

/* shop-block */
.shop-block *{transition: all .3s linear;}
.shop-block .item{border-radius: 50%; aspect-ratio: 1; padding: 1.5rem; background-color: rgb(var(--color_white)); position: relative; overflow: hidden; top: 0;
display: flex !important;
align-items: center;
justify-content: center;
flex-direction: column;
}
.shop-block .outline{ outline: 1px solid rgba(var(--color_black),0.5); border-radius: var(--radius); position: absolute; left: 25px; display: block; width: calc(100% - 10px); height: calc(100% - 15px); top: -15px; }
.shop-block .item .text{display: flex; text-align: center; flex-direction: column; justify-content: center; justify-content: space-between; align-items: center; padding: 1rem 1rem 0;}
.shop-block .item .text .icon{width: 40px; height: 28px; position: relative; top: 10px;}
.shop-block .item .text .icon::before{content: ""; background: url('../images/arrow04.png') no-repeat 0 0; display: block;  background-size: cover; width: 38px; height: 26px; transition: all .1s linear;}
.shop-block .item .text h5{margin-bottom: 0; font-size: clamp(0.875rem, 0.835rem + 0.2vw, 1rem); font-weight: 600;}
.shop-block .item:hover .text .icon{background-color:transparent;}
.shop-block .item:hover + .outline{outline-color: rgb(var(--primary2));}
.shop-block .item:hover .text .icon::before{filter: var(--imgPrimary2);}

.logo-wrap::after{content: ""; width: 4px; height: 160px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; background-color: #AFE3FF;}
.message p{margin-bottom: 0;  font-size: clamp(0.9375rem, 0.8775rem + 0.3vw, 1.125rem);}
.message .btn-custom .icon::before{filter: var(--imgWhite);}


/* pic */
.pic {overflow: hidden;}
.pic img {transition: 0.4s;}
.pic:hover img {transform: scale(1.08);}


/* products */
.products::after,.products::before{content: ""; position: absolute; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent;}
.products::before{left: -100px; top: 0; border-top: 100px solid #F5F5F5;}
.products::after{bottom: 0; right: -100px; border-bottom: 100px solid #F5F5F5;}


/* product-tabs */
#product-tabs {border: none; border-bottom: 1px solid rgba(99, 99, 99, 0.2);}
#product-tabs .nav-item .nav-link{font-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem); color: inherit; text-transform: uppercase; border-radius: 0; border: none; padding: 15px 0; position: relative;}
#product-tabs .nav-item .nav-link.active{font-weight: 600;}
#product-tabs .nav-item .nav-link.active::after{content: ""; width: 100%; height: 4px; position: absolute; left: 0; right: 0; bottom: 0; background-color: #AFE3FF;}
#product-content .pic{border-radius: var(--radius);}
#product-content .large-pic{max-width: 92%;}
#product-content .large-pic::after{ content: ""; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 65.74%, rgba(0, 0, 0, 0.28) 86.42%); position: absolute; inset: 0; width: 100%; height: 100%; display: block;}
#product-content .pic .text{font-size: clamp(1.125rem, 0.845rem + 1.4vw, 2rem); font-weight: 600; position: absolute; bottom: 0; left: 0; right: 0; color: rgb(var(--color_white)); z-index: 1; top: auto; height: auto;}

.product-item{border-radius: var(--radius);}
.product-item .pic{border-radius: var(--radius); margin: 2px; border: 1px solid #ddd;}
.product-item .icon{width: 40px; height: 28px; background-color: rgb(var(--bs-body-color)); border-radius: 30px; position: absolute; display: block; right: 10px; bottom: 10px;}
.product-item .icon::before{content: ""; background: url('../images/arrow02.svg') no-repeat 0 0; left: 50%; top: 50%; transform: translate(-50%, -50%); 
  position: absolute; width: 25px; height: 25px; transition: all .2s linear;}
.product-item:hover .icon{background-color: rgb(var(--primary2));}
.product-item:hover .icon::before{ left: 90%; transform: translate(-90%, -50%);}
.product-item + h5{font-size: clamp(0.9375rem, 0.8775rem + 0.3vw, 1.125rem);}



/* middle-block */
.middle-block .item{ border-radius: var(--radius); color: inherit;}
.middle-block .item *{transition: all .3s linear;}
.middle-block .item h4{padding: 40px; padding-bottom: 0; margin-bottom: 0; font-size: clamp(1.125rem, 0.885rem + 1.2vw, 1.875rem); font-weight: 600;}
.middle-block .item .img {left:-20px; bottom: -24px;}
.middle-block .item:hover .img{left: 0;}
.middle-block .item .content{width: 170px; flex-shrink: 0;}
.middle-block .item .content .info{font-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem); line-height: normal;}
.middle-block .item .block{position: relative; top: -40px; margin-bottom: -40px;}

/* skill-set */
.skill-set{border-radius: var(--radius); background-color: #ECE7C0;}
.skill-content *{transition: all .2s linear;}
.skill-set .skill-pic{display: flex; height: 100%; background-color: #3b7990; align-items: flex-end; border-radius: var(--radius);}
.skill-set .skill-pic img{border-radius: var(--radius);}
.skill-set .title{font-size: clamp(1.125rem, 0.885rem + 1.2vw, 1.875rem); font-weight: 600;}
.skill-content .block .img{position: relative; top: 0;}
.skill-content .block:hover .img{top: -4px;}

/* trending-slider */
.trending-slider .item{display: flex; flex-direction: column; height: 100%; margin: 2px;}
.trending-slider .owl-prev,.trending-slider .owl-next{position: absolute; top: 50%; transform: translateY(-50%);}
.trending-slider .owl-prev{left: -50px; }
.trending-slider .owl-next{right: -50px; }
.trending-slider button .sprite{background: url('../images/arrow.png') no-repeat 0 0; filter: var(--imgBodycolor); width: 31px; height: 31px; display: block; background-size: cover;}
.trending-slider button .arrow-right{transform: rotate(180deg);}
.trending-slider button.disabled .sprite{opacity: 0.5;}

/* testimonials */
.testimonials::before{content: ""; position: absolute; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; left: -100px; top: 0; border-top: 100px solid #F5F5F5;}
.testimonials .item{display: flex; height: 100%;}
.testimonials .item-inner{background-color: #ECE7C0; margin-top: 0; border-radius: var(--radius); padding:clamp(1.25rem, 0.85rem + 2vw, 2.5rem); position: relative;}
.testimonials .item-inner img{width: auto;}
.testimonials .outline{ outline: 1px solid rgba(var(--color_black),0.5); border-radius: var(--radius); position: absolute; left: 45px; display: block; width: calc(100% - 50px); height: calc(100% - 24px); top: 20px; }
.testimonials .item-inner .person-pic{overflow: hidden; max-width: 100px; margin: 0 auto; border-radius: 24px; border: 1px solid rgb(var(--primary1));}
.testimonials .item-inner .person-pic img{border-radius: var(--radius);}
.testimonials .item-inner .text{color: rgb(var(--primary1));}
.testimonials .item-inner .text h5{margin-bottom: 0; font-size: clamp(0.9375rem, 0.8775rem + 0.3vw, 1.125rem);}
.testimonials .item-inner:hover + .outline{outline-color: rgb(var(--primary2));}
.testimonials .owl-prev,.testimonials .owl-next{position: absolute; top: 50%; transform: translateY(-50%);}
.testimonials .owl-prev{left: -50px; }
.testimonials .owl-next{right: -50px; }
.testimonials button .sprite{background: url('../images/arrow.png') no-repeat 0 0; filter: var(--imgBodycolor); width: 31px; height: 31px; display: block; background-size: cover;}
.testimonials button .arrow-right{transform: rotate(180deg);}
.testimonials button.disabled .sprite{opacity: 0.5;}

.owl-flex .owl-stage{display: flex; height: 100%; align-items: center;}
 
/* logo-slider */
.logo-slider::before,.logo-slider::after{content: ""; top: 0; height: 100%; width: 70px; position: absolute; z-index: 1;}
.logo-slider::before{left: 0;  background-image: linear-gradient(to right, rgb(var(--color_white)), transparent);}
.logo-slider::after{right: 0;  background-image: linear-gradient(to left, rgb(var(--color_white)), transparent);}
.logo-slider .item img{max-height: 140px; width: auto;}


/* pattern */
.pattern{width: 100%; margin: 0 auto; max-width: 1920px; position: absolute;}


/* footer */
.home .testimonials {padding-bottom: calc(var(--padding) *2); }
.footer .bottom{background: linear-gradient(270deg, #B3E1FB 1.56%, #F4E2F4 91.67%); position: relative;}
.footer .bottom::after{content: ""; position: absolute; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; top: 0; right: -100px; border-top: 100px solid rgb(var(--color_white));}

.footer .middle-content{position: relative; z-index:1; margin-top: -130px; margin-bottom: 50px; background-color: #195B89; clip-path: polygon(100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px, 40px 0);}
.footer .middle-content::after{content: ""; background-image: url('../images/blur-logo.png'); background-repeat: no-repeat; background-position: right top; position: absolute; right: 0; top: 0; width: 418px; height: 303px; background-size: cover; z-index: -1; display: block;}
.footer .middle-content .title-wrap{padding:clamp(1.25rem, 0.85rem + 2vw, 2.5rem) clamp(1.875rem, 1.275rem + 3vw, 3.75rem); }
.footer .middle-content .title-wrap p{font-size: clamp(0.9375rem, 0.8775rem + 0.3vw, 1.125rem);}
.footer .middle-content .title-wrap .btn-custom .icon{background-color: rgb(var(--color_white));}
.footer .middle-content .title-wrap .btn-custom .icon::before{background-image: url('../images/arrow03.svg'); width: 21px; height: 18px;}
.brochure-pic{position: absolute; right: -30px; top: -30px;}

.footer .contact-info{margin-bottom: 0;}
.footer .contact-info li{margin-bottom: 1rem;}
.footer .contact-info li:last-child{margin-bottom: 0;}
.footer .contact-info li a{text-decoration: none; font-weight: 500; color: rgba(var(--bs-body-color),0.75);}
.footer .contact-info li a .icon{margin-right: 12px;}
.footer .contact-info li a:hover{color: rgb(var(--primary1));}

.footer .right-block h6{font-weight: 600; text-transform: uppercase; margin-bottom: 1.5rem; color: rgb(var(--color_black));}
.footer .right-block .f-links{margin: 0; padding: 0; list-style: none;}
.footer .right-block .f-links li{margin-bottom: 8px;}
.footer .right-block .f-links li a{ font-size: 0.875rem; font-weight: 500; text-decoration: none; position: relative; left: 0; transition: all .3s linear;}
.footer .right-block .f-links li a:hover{left: 5px;}

.footer .copyright{padding: 20px 0; background-color: rgb(var(--bs-body-color));}
.footer .social-media a{margin: 0 0.5rem;}
.footer .social-media a img{filter: var(--imgWhite);}
.footer .designed-by a{text-decoration: none;}
.footer .designed-by a:hover{color: rgb(var(--color_white));}


.totop {bottom: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; position: fixed; right: -60px; z-index: 99; background-color: rgb(var(--primary1)); text-align: center; opacity: 0; border-radius: 50%; box-shadow: 0px 10px 29.7px 3.3px rgba(0, 0, 0, 0.2); transition: 0.4s;}
.totop img{transform: rotate(-90deg); width: 20px;}
.totop:hover {background-color: rgb(var(--primary2));}


/* inner pages styles */
.inner-banner {padding-top: 16%; background-position: center top; background-size: cover; background-repeat: no-repeat; background-position: 0 0;}
.inner-banner .container {position: absolute; left: 50%; top: 40%; transform: translate(-50%, 50%); z-index: 1; transition: all .3s linear; display: flex; align-items: center; flex-direction: column; }
.inner-banner h1 { font-size: clamp(1.5rem, 0.98rem + 2.6vw, 3.125rem); line-height: normal; }


.breadcrumb { font-size: 1.125rem; --bs-breadcrumb-item-padding-x: 1rem;}
.breadcrumb .active {color: rgb(var(--baseColor)); font-weight: 600;}
.breadcrumb a:hover {color: rgb(var(--primary2));}


.about-content h4{font-size: clamp(1rem, 0.76rem + 1.2vw, 1.75rem);}
.about-content .card::before{content: ""; background-color: rgba(var(--color_black),0.3); width: 100%; height: 100%; display: block; position: absolute; inset: 0;}
.video-link img{inset: 0; transition: all .2s;}
.about-content .card:hover .video-link img{transform: scale(1.1);}

/* vision-mission */
.vision-mission .card {padding: clamp(2.5rem, 0.9rem + 8vw, 7.5rem) clamp(1.5rem, 0.78rem + 3.6vw, 3.75rem) clamp(1.5rem, 0.78rem + 3.6vw, 3.75rem); }
.vision-mission .card .icon{position: absolute; right: -10px; top: -85px;}
.vision-mission [class^="col-"] .card{background-color: #FEF6FE;} 
.vision-mission [class^="col-"]:first-child .card{background-color: #EAF8FF;} 

.pb-last{padding-bottom: calc(var(--padding) *4);}

.team-list{transition: all .2s linear;}
.team-list .card-body .card-title{font-size: clamp(1rem, 0.88rem + 0.6vw, 1.375rem);}
.team-list{background-color: rgb(var(--color_white));}
.team-list:hover{background-color: #ECE7C0;}

.easyzoom.is-ready img {cursor: zoom-out;}

/* product-slider */
#product-slider .product-image{background-color: rgba(var(--primary1),0.3); border-radius: var(--radius); border: 1px solid #ddd; display: block;}
#product-slider .product-image img{border-radius: var(--radius);}
.lSSlideOuter .lSPager.lSGallery li{border: 2px solid transparent;}
.lSSlideOuter .lSPager.lSGallery li,.lSSlideOuter .lSPager.lSGallery img{border-radius: var(--radius);}
.lSSlideOuter.vertical{padding-right: 0 !important; padding-left: 112px;}
.lSSlideOuter.vertical .lSGallery{right: auto; left: 0 !important; height: auto !important; margin-left: 0 !important; margin-right: 1.5rem;}
.lSSlideOuter.vertical .lSAction>.lSPrev{background-color: rgb(var(--primary2)); opacity: 1; border-radius: 50%;}
.lSSlideOuter.vertical .lSAction>.lSNext{background-color: rgb(var(--primary2)); opacity: 1; border-radius: 50%;}
.lSSlideOuter .lSPager.lSGallery li a{display: block; background-color: #f2f2f2; padding: 0; border-radius: var(--radius); overflow: hidden; border:1px solid #ddd;}
.lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover{border-radius: 0;}
.lSSlideOuter .lSPager.lSGallery li.active{border-color: rgb(var(--primary1)); border-radius: var(--radius);}
/* .slideControls {position: absolute; width: 88px; top: 0; left: auto; height: 100%; margin: 0 auto; text-align: center; display: flex; align-items: center; justify-content: space-between; flex-direction: column;} */
.slideControls{display: flex; justify-content: space-between;}
.slideControls .slidePrev,.slideControls .slideNext{ top: -70px; position: relative; cursor: pointer; background-color: rgb(var(--bs-body-color)); border-radius: 30px; width: 40px; height: 28px;display: block; z-index: 2;}
.slideControls .slidePrev:hover,.slideControls .slideNext:hover{background-color: rgb(var(--primary2));}
.slideControls .slidePrev img,.slideControls .slideNext img{inset: 0;}
.slideControls .slidePrev img{transform: rotate(-180deg);}
.slideControls .slideNext img{transform: rotate(0deg); }

.product-details p{font-size: clamp(0.9375rem, 0.8375rem + 0.5vw, 1.25rem);}

/* accordion */
.accordion{border-top: 1px solid #000000;}
.accordion .card-header { border-radius: 0; background-color: transparent;}
.accordion .card-header a{text-decoration: none; font-size: clamp(1rem, 0.88rem + 0.6vw, 1.375rem); font-weight: 600; text-transform: uppercase; color: rgb(var(--baseColor)); border-bottom: 1px solid rgb(var(--color_black));}
.accordion .card-header a::after{content: "+"; font-weight: 300; font-size: 2.4rem; position: absolute; right: 1rem; top: 0.2rem;}

.accordion .card-header a:not(.collapsed){border-bottom-color: transparent;}
.accordion .card-header a:not(.collapsed)::after{content: "-";}
.table thead th{background-color: #DAF2FF; border: none; text-align: center; font-size: clamp(0.9375rem, 0.8375rem + 0.5vw, 1.25rem); font-weight: 600;}
.table tbody tr td{text-align: center; border: none; font-size: clamp(0.9375rem, 0.8375rem + 0.5vw, 1.25rem);}
.table tbody tr:nth-child(even) td{background-color: #DAF2FF;}

.similar-product-slider.owl-carousel.style01 .owl-nav{top: 40%;}
.similar-product-slider .product-item .pic{border: 1px solid #ddd;}

/* .owl-carousel {display: block;}
.owl-carousel .item:not(:first-child) {display: none;} */

.contact-section .row>[class^="col-"]{background-color: #FEF6FE; border-radius: 0 var(--radius) var(--radius) 0;} 
.contact-section .row>[class^="col-"]:first-child{background-color: #195B89; border-radius: var(--radius) 0 0 var(--radius);}  
.contact-section .card-sample{background-color: transparent; padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.8125rem);}


/* address-block */
.address-block{border-bottom: 1px solid #AFE3FF;}
.address-block .map{max-width: 140px;}
.address-block .map iframe{border-radius: var(--radius);}

.numbers,.email{padding-left: 35px; position: relative; font-size: clamp(0.9375rem, 0.8775rem + 0.3vw, 1.125rem);}
.numbers a,.email a{text-decoration: none;}
.numbers a:hover,.email a:hover{text-decoration: underline;}
.numbers::before,.email::before{content: ""; background-repeat: no-repeat; background-position: 0 0; position: absolute; left: 0; top: 3px; filter: brightness(0) invert(1);}
.numbers::before{background-image: url('../images/call-icon.svg'); width: 22px; height: 22px;}
.email::before{background-image: url('../images/email-icon.svg'); width: 17px; height: 14px; top: 6px;}


/* contact-form */
.contact-form .form-control{border-radius: 0; color:rgb(var(--bs-body-color)); font-size: clamp(0.9375rem, 0.8775rem + 0.3vw, 1.125rem); border: none; border-bottom: 1px solid rgb(var(--color_black)); background-color: transparent;}
.contact-form .form-control:focus{outline: none; box-shadow: none;}
.contact-form textarea{height: 100px; resize: none;}
.contact-form .btn-custom02{text-transform: none; font-size: clamp(0.9375rem, 0.8775rem + 0.3vw, 1.125rem);}

/* InquiryModel */
#InquiryModel .modal-body{background-color: #FEF6FE;}
.custom-form .form-control{border-radius: 0; color:rgb(var(--bs-body-color)); font-size: clamp(0.9375rem, 0.8775rem + 0.3vw, 1.125rem); border: none; border-bottom: 1px solid rgb(var(--color_black)); background-color: transparent;}
.custom-form .form-control:focus{outline: none; box-shadow: none;}
.custom-form textarea{height: 100px; resize: none;}
.custom-form .btn-custom02{text-transform: none; font-size: clamp(0.9375rem, 0.8775rem + 0.3vw, 1.125rem);}


/* card-item */
.card-item{padding: clamp(1.25rem, 0.85rem + 2vw, 2.5rem); border-radius: var(--radius); position: relative;}
.card-item .person-pic{overflow: hidden; max-width: 100px; margin: 0 auto; border-radius: 15px;}
.card-item .text h5{font-size: clamp(0.9375rem, 0.8775rem + 0.3vw, 1.125rem); color: #195B89;}
.card-item .card-body p:last-child{margin-bottom: 0;}

/* clientele-item */
.clientele-item{display: flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--bs-body-color),.1); transition: all .3s linear;}
.clientele-item img{aspect-ratio: 3 / 2; width: 100%; object-fit: contain; padding: 1.25rem;}
.clientele-item:hover {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}

.other-specification .table tbody tr td{text-align: left;}

.sub-menu-toggle{display: none;}

.skills-section{overflow: hidden;}
.skills-section .card:nth-child(odd){background-color: #EAF8FF;}
.skills-section .card:nth-child(even){background-color: #FEF6FE;}

/* statistics */
.statistics .statistics-item{background: linear-gradient(to bottom,  #d0aad0 0%,#a0d8f7 100%); padding: 5px; border-radius: var(--radius); display: flex; height: 100%; align-items: stretch; justify-content: center;}
.statistics .statistics-item .item-inner{background-color: #F5F5F5; border-radius: var(--radius); padding: 1.5rem; width: 100%;}
.statistics .statistics-item .number-wrap{font-size: clamp(1.25rem, 0.65rem + 3vw, 3.125rem); font-weight: 300;}

.other-specification .table{border: 1px solid #ddd;}
.other-specification .table tbody tr td strong{font-weight: 500;}
.other-specification .table tbody tr td{padding: 1rem; font-size: 1.125rem;}