/* ----------------- */
*, *::before, *::after{margin:0;padding:0; -webkit-box-sizing:border-box; box-sizing:border-box;}
body{scroll-behavior: smooth; overflow-x: hidden;  font-family: "Poppins", sans-serif;}
li{list-style: none;}
html{scroll-behavior: smooth;}
a{text-decoration: none; color: unset;}
a,img,input,label,button{display: block;}
button{border:none; outline:none; background: transparent;}
input{border:none; outline:none;}

:root {
    /* ---- web-color ------- */
    --color1:#1A2D4E;
    --color2:#F62459;
    --color3:#27AAE2;
    --color4:#818181;
    --color5:#fff;
    --color6:#000;
    --color7:linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);

    /* ----- web-fontsize -------- */
    --fontStyle1: 4rem/110% "Poppins", sans-serif;
    --fontStyle2: 3.5rem/110% "Poppins", sans-serif;
    --fontStyle3: 3rem/120% "Poppins", sans-serif;
    --fontStyle4: 2.5rem / 120% "Poppins", sans-serif;
    --fontStyle5: 1.7rem / 130% "Poppins", sans-serif;
    --fontStyle6: 1.3rem / 120% "Poppins", sans-serif;
    --fontStyle7: 1.2rem / 120% "Poppins", sans-serif;
    --fontStyle8:0.95rem / 130% "Poppins", sans-serif;
    --fontStyle9: 0.9rem / 130% "Poppins", sans-serif;
    --fontStyle10: 0.8rem / 130% "Poppins", sans-serif;
}

/* ----- web-fontsize ---------- */
.fontStyle1 {font: var(--fontStyle1);}
.fontStyle2 {font: var(--fontStyle2);}
.fontStyle3 {font: var(--fontStyle3);}
.fontStyle4 {font: var(--fontStyle4);}
.fontStyle5 {font: var(--fontStyle5);}
.fontStyle6 {font: var(--fontStyle6);}
.fontStyle7 {font: var(--fontStyle7);}
.fontStyle8 {font: var(--fontStyle8);}
.fontStyle9 {font: var(--fontStyle9);}
.fontStyle10 {font: var(--fontStyle10);}

@media (max-width:600px) {
.fontStyle2 {font-size: 2rem;}
.fontStyle4 {font: var(--fontStyle5);}
.fontStyle5 {font-size: 1.4rem;}
}

/* ------- w-width class ---------- */
.w-width{width:90%; margin: 0 auto;}
.top_title{position: relative; }
.top_title::before{content: ''; position: absolute; bottom:-30%; left:50%; transform: translate(-50%); 
width:5%; height:2px; background: var(--color2);}

/* =========== header section style ================ */
.header .header_overlayer{position: fixed; top:0; left:0; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.2);
z-index:999; visibility: hidden; opacity:0; pointer-events: none; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;}
.header .header_overlayer.active_overlayer{visibility: visible; opacity:1; pointer-events: all;}
@media (max-width:1024px) {
.header .bottom_header .nav{position: fixed; top:0; right:-100%; width:60%; height:100vh; 
background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
-webkit-box-shadow: -12px 12px 64px 0 rgba(0, 0, 0, 0.12);
box-shadow: -12px 12px 64px 0 rgba(0, 0, 0, 0.12); z-index:9999; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.header .bottom_header .nav.active_sidebar{right: 0;} 
.header .bottom_header{padding:1rem 0;}
.header .bottom_header .nav .nav_list{display:block;}
.header .bottom_header .nav .nav_list .nav_item a{padding:1rem 0; margin: 0 1.5rem;}
}
@media (max-width:600px) {
.header .bottom_header .nav{width:100%;}
.open_side_bar{font-size:1.7rem;}
/* ======= respon_inp ======== */
 .respon_inp{font-size:11px!important;}
}

/* ========= welcome section style ============ */
.welcome .slick-dotted.slick-slider{margin-bottom: 0;}
.welcome .welcome_text{background: linear-gradient(90deg,hsl(218, 50%, 20%,0.8),hsl(218, 50%, 20%,0));}
.welcome .slick-prev{left:10%; z-index: 1;}
.slick-prev:before,
.slick-next:before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; color:var(--color5);  font-size: 25px;opacity: 0.5;
    transition: color 0.3s ease;}
.slick-prev:before {content: "\f104"; }
.slick-next:before {content: "\f105"; }
.welcome .slick-next{right:10%;}
.welcome .slick-dots{bottom:5%;} 
.welcome .slick-dots li button:before{ background:var(--color1); color:var(--color1); border-radius: 50%;}
.welcome .slick-dots li button:before{width:15px; height:15px;}

@media (max-width:1024px) {
    .welcome .welcome_text{padding:0 1rem;}
    .welcome .welcome_img img{height:500px; }
}

@media (max-width:600px) {
    .welcome .slick-next{right:40%; top:90%;}
    .welcome .slick-prev{left:40%;top:90%; z-index: 1;}
    .slick-prev:before,
    .slick-next:before{font-size:20px;}
}

/* ========= breadcrumb section style =========== */
.breadcrumb ul li + li::before {content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 110%; 
margin:0 0.9rem; font-size:0.9rem;}
.breadcrumb .breadcrumb-list{background: rgba(255, 255, 255, 0.72); z-index:1;
backdrop-filter: blur(12px); position: relative;
-webkit-backdrop-filter: blur(12px);
-webkit-box-shadow: -12px 12px 64px 0 rgba(0, 0, 0, 0.12);
box-shadow: -12px 12px 64px 0 rgba(0, 0, 0, 0.12);}

@media (max-width:600px) {
  .breadcrumb{height:200px !important;}  
}
  
/* ========= gallery section style ============= */
.gallery .gallery_text{visibility: hidden; opacity:0; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;}
.gallery .gallery_item:hover .gallery_text{visibility: visible; opacity:1;}

/* ======== services section style ============= */
.services{background-image:-webkit-gradient(linear,left top, right top,from(hsl(218, 50%, 20%,0.5)),to(hsl(218, 50%, 20%,0))), 
url('../assets/images/img_10.jpg');background-image:-o-linear-gradient(left,hsl(218, 50%, 20%,0.5),hsl(218, 50%, 20%,0)), 
url('../assets/images/img_10.jpg');background-image:linear-gradient(90deg,hsl(218, 50%, 20%,0),hsl(218, 50%, 20%,0)), 
url('../assets/images/img_10.jpg'); background-repeat: no-repeat;
background-size: cover; width:100%; height: auto; background-attachment: fixed;}
.services .services_list .service_item{background: rgba(255, 255, 255, 0.72); height:100%; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 1rem; }
/* ========= testimonials section style ========== */
.testimonials .testimonial_list .testimonials_item{background: var(--color7); border-radius: 1rem; }  
.testimonials  .slick-slide {margin: 0 10px;}
/* .testimonials .slick-dotted.slick-slider{margin-bottom: 0;} */
.testimonials .slick-prev{left:10%; z-index: -1;}
.testimonials .slick-next{right:10%; z-index:-1;}
.testimonials .slick-dots{bottom:-12%;} 
.testimonials .slick-dots li button:before{ background:var(--color1); color:var(--color1); border-radius: 50%;}
.testimonials .slick-dots li button:before{width:12px; height:12px;} 

/* ======== ========== */
.footer,.client{background: var(--color7); }