* { box-sizing: border-box; margin: 0; padding: 0; }

html,body { font-size: 17px; font-family: "Roboto", sans-serif; background: #fff; color: #000; }

body { max-width: 1920px; margin: auto; }

a { text-decoration: none; color: unset; }
ul { list-style: none; }
img { vertical-align: middle; }
p { line-height: 1.6; text-align: justify; }

h1,h2,h3,h4,h5,h6 { font-family: Exo;  }
section { overflow: hidden; }
button { border: 0; outline: 0; font-weight: 500; font-family: unset; font-size: unset; }

input::placeholder,
select::placeholder,
textarea::placeholder { color: unset; font-family: var(--ff1); }
 
.widget_section { display: block; padding: 60px 16px; position: relative; }
.container { max-width: 1140px; margin: auto; }
.visible { overflow: visible; }


:root {
	--c1 : #ff0c0c;
	--c2 : #e31a22;

	--bg1 : #f6f6f6;
	--bg2 : #fef0de;

	--bs  : 0px 0px 35px 0px #00000026;

	--bs1 : 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
	--tY  : translateY(-6px);

	--ts  : all 0.5s ease-in-out;
	--fa  : "Font Awesome 7 Pro";
	--ff1 : "Roboto", sans-serif;
	--ff2 : "Staatliches", sans-serif;
	--ff3 : "Exo";
	--ff4 : "Playfair Display", serif;
	--ff5 : "Crimson Text", serif;

	--bgG1 : linear-gradient(90deg, #ff0c0c, #990000);
	--bgG2 : linear-gradient(90deg, #0023be, #d03823);
}


/*  ---------- ----- HEADER ----- ---------- */
.header { display: block; position: sticky; top: 0; width: 100%; background: #fff; transition: var(--ts); z-index: 1000; border-bottom: 1px solid #ddd; }

.mobile_view { width: 100%; display: none; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding: 8px 16px; }
.mobile_view .btnOnOff { font-size: 36px!important; }

.btnOnOff { display: none; width: 38px; height: 38px; line-height: 38px; text-align: center; font-size: 30px;  background: #fff0; color: var(--c1); border-radius: 4px; }

/*  */
.navbar { max-width: 1140px; margin: auto; display: flex; justify-content: space-around; align-items: center; padding: 8px 16px;  }

.navLogo { display: block; width: 260px; }
.navLogo img { width: 100%; height: auto; }

.navLinks { display: flex; }
.navLinks li { position: relative; }
.navLinks li a,
.navLinks li label { display: block; padding: 8px 16px; font-size: 15px; font-weight: 700; transition: var(--ts); text-transform: uppercase; }
.navLinks li a:hover,
.navLinks li label:hover { color: var(--c2); }

/* Submenu */
.submenu input { display: none; }
.dropdown { opacity: 0; visibility: hidden; width: 260px; position: absolute; top: 100%; left: 0; right: 0;
	background: #fff; color: #000; box-shadow: 0 0 10px #00000033; border-top: 3px solid var(--c2); transform: translateY(10px); transition: all 0.5s ease; z-index: 9; }
.submenu:hover > ul { opacity: 1; visibility: visible; transform: translateY(0px); }
.submenu .dropdown li a { display: block; padding: 9px 16px; font-weight: 700; font-size: 13px; }
.dropdown li a:hover { background: var(--bg2); }

.navBtn button { display: inline-block; padding: 10px 32px; font-size: 14px; background: var(--bgG1); color: #fff; transition: var(--ts); border-radius: 50px; }
.navBtn button:hover { background: var(--bgG2); }

.NavOn { color: var(--c2)!important; }

@media all and (max-width: 992px) {
	.header { border-bottom: unset; }

	.navLogo { display: block; width: 240px; }

	.mobile_view { display: flex; }
	.btnOnOff { display: block; }

	.navArea { width: 100%; height: 100%; position: fixed; top: 0; left: -100%; background: #00000080; transition: var(--ts); font-family: var(--ff2); z-index: 9999; }
	.navbar { width: 100%; height: 100%; display: block; background: #fff; padding: 0px; }
	.logo_area { width: 100%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding: 8px 16px; }
	.navLinks { width: 100%; flex-direction: column; padding: 16px 0px; }
	.navLinks li a,
	.navLinks li label { font-size: 17px; font-weight: 600; color: #000; padding: 12px 16px; }
	.navBtn { width: 100%; display: block; padding: 0px 16px; }

	.dropdown { width: 100%; transform: translateY(0px); border-top: 0; box-shadow: 0 0 10px #fff0; }
	.submenu .dropdown li a { padding: 9px 16px 9px 24px; font-size: 17px; }
	.submenu:hover > ul { opacity: 0; visibility: hidden; transform: translateY(0px); }
	.toggle:checked ~ .dropdown { opacity: 1; visibility: visible; position: relative; }
}



/* ---------- ----- Side Nav ----- ---------- */
.side_nav { width: 450px; height: 100vh; background: #fff; position: fixed; top: 0; right: -100%;
	padding: 40px; font-family: var(--ff2)!important; box-shadow: var(--bs); z-index: 9990; transition: var(--ts); }

.sideNav_area { width: 100%; height: 80%; display: flex; justify-content: space-between; flex-direction: column; }

.sideNav_quote { margin: 32px 0px; }

.sideNav_info { display: block; }
.sideNav_link { display: flex; gap: 12px; align-items: center; }
.sideNav_link+.sideNav_link { margin-top: 16px; }
.sideNav_icon { display: block; font-size: 18px; color: var(--c1); line-height: 0; }
.sideNav_text { display: block; }
.sideNav_text p { transition: var(--ts); }
.sideNav_text a { display: block; transition: var(--ts); }
.sideNav_text a+a { margin-top: 9px; }
.sideNav_text a:hover { color: var(--c1); }
.sideNav_text:hover .sideNav_text p { color: var(--c1); }

.sideNav_contact { margin-top: 32px; }

.btn5 { display: inline-block; padding: 16px 48px 16px 32px; background: var(--c1); border-radius: 6px; position: relative; transition: var(--ts); color: #000; overflow: hidden; }
.btn5:after { content: '\f061'; display: flex; justify-content: flex-start; align-items: center;
	position: absolute; top: 0; right: 0; width: 20px; height: 100%; background: #000; color: #fff; font-family: var(--fa); font-size: 12px;  }
.btn5:hover { color: #fff; }

.sideNav_bottom { display: flex; gap: 6px; }
.sideNav_bottom a { display: block; width: 38px; height: 38px; line-height: 38px; margin-top: 6px;
	text-align: center; border-radius: 4px; background: #fff; color: var(--c1); box-shadow: 0px 0px 4px 0px #00000026; transition: var(--ts); }
.sideNav_bottom a:hover { background: var(--c1); color: #fff; margin-top: 0; }

.sideNav_btn { width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 32px; background: #fff0; }

.sideNav_btns { width: 100%; display: flex; justify-content: flex-end; }

@media all and (max-width: 992px) {
	.side_nav { display: none; }
	.sideNav_ { display: none; }
}














/* ---------- SECTION TITLE ---------- */
.section_title { display: block; text-align: center; margin-bottom: 42px; }
.section_title span { display: block; color: var(--c1); font-weight: 800; }
.section_title h2 { font-size: 52px; }

@media all and (max-width: 480px) {
	.section_title h2 { font-size: 24px; }
}

@media (min-width: 500px) and (max-width: 992px) {
	
}




.bg { background: url("assets/images/Untitled-2f.jpg")no-repeat center / cover; background-attachment: fixed; z-index: 1; }
.bg:before { content: ""; display: block; width: 100%; height: 100%; background: #00000090; position: absolute; top: 0; left: 0; z-index: -1; }


/* Buttons */
.ctc1 { display: block; padding: 12px 52px 12px 32px; border-radius: 8px; background: var(--bgG1); color: #fff; position: relative; margin-top: 24px; }
.ctc1:after { content: "\e09f"; position: absolute; top: 14px; right: 32px; font-family: var(--fa); font-size: 16px; font-weight: 600; transition: var(--ts); }
.ctc1:hover:after { right: 24px; }


/* ---------- ----- Title ----- ---------- */
.title_left { display: block; margin-bottom: 28px; }
.title_left span { color: var(--c1); margin-bottom: 6px; font-weight: 900; text-transform: uppercase; }
.title_left h2 { font-size: 28px; }
.title_left p { margin-top: 12px; }




.wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.wrapper .circle {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background-color: #fff;
  margin: auto;
  transform: scale(1, 1);
}
.wrapper .circle.pulse {
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation: pulse 2s infinite;
          animation: pulse 2s infinite;
  background-color: #ffffff33;
}
.wrapper svg {
  fill: var(--c1);
  stroke: var(--c1);
  stroke-linejoin: round;
  stroke-width: 5;
  transition: all 0.3s;
}
.wrapper svg:hover {
  cursor: pointer;
  fill: var(--c1);
  stroke: var(--c1);
  transform: scale(1.2, 1.2);
}

@-webkit-keyframes pulse {
  0% { transform: scale(1, 1); }
  25% { transform: scale(1, 1); }
  50% { transform: scale(1.5, 1.5); }
  100% { transform: scale(1, 1); }
}

@keyframes pulse {
  0% { transform: scale(1, 1); }
  25% { transform: scale(1, 1); }
  50% { transform: scale(1.5, 1.5); }
  100% { transform: scale(1, 1); }
}



/* ---------- ----- Accordion ----- ---------- */
.accordion { width: 100%; display: flex; flex-direction: column; gap: 24px; }

.accordion_box { border-radius: 8px; background: var(--bgG1); overflow: hidden; }
.accordion_box .accordion_btn { display: block; padding: 20px; width: 100%;
	text-align: left; background: var(--bg1); color: #000; border: 0; cursor: pointer; font-family: unset; font-weight: 500; font-size: 18px; position: relative; }
.accordion_box .accordion_btn:after { content: '+'; color: #000; font-size: 20px; line-height: 0; position: absolute; top: 48%; right: 24px; }

.accordion_box .accordion_txt { display: none; margin: 0; padding: 16px; transition: var(--ts); }
.accordion_box.on .accordion_btn { background: #fff0; color: #fff; }
.accordion_box.on .accordion_btn:after { content: '-'; color: #fff; }
.accordion_box.on .accordion_txt { display: block; color: #fff; transition: var(--ts); }

@media all and (max-width: 480px) {
	.accordion { gap: 16px; }
	.accordion_box .accordion_btn { font-size: 16px; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.accordion { gap: 16px; }
}



/* ========== ========== ========== ========== ========== ========== ========== ========== ========== ==========
												HOME PAGE CSS
========== ========== ========== ========== ========== ========== ========== ========== ========== ========== */

/* ---------- Banner ---------- */
.banner-section { width: 100%; display: block; position: relative; background: url('assets/images/background-01.jpg'); overflow: hidden; z-index: 9; }
.banner-section:afte { content: url('assets/images/shape-1.png');  position: absolute; display: block;
    width: 100%; bottom: -8px; left: 0; opacity: 0.2; z-index: -1;  }

.banner-row { display: flex; align-items: center; max-width: 1140px; margin: auto; z-index: 3; padding-bottom: 120px; }
.banner-col { width: 100%; display: block; }

.banner-text { padding: 32px; color: #fff }
.banner-text span { font-weight: 600; display: block; margin-bottom: 8px; color: var(--c3); }
.banner-text h2 { font-size: 45px; font-weight: 700; line-height: 1.2; text-transform: capitalize; }
.banner-text p { font-size: 16px; margin-top: 12px; }
.banner-text ul { display: block; margin-top: 12px; }
.banner-text ul li+li { margin-top: 6px; }
.banner-btn { display: inline-block; padding: 12px 40px; font-weight: 700;
	background: var(--c1); color: #fff; border-radius: 50px; margin-top: 36px; transition: var(--ts); }
.banner-btn:hover { background: var(--c2); box-shadow: var(--bs); }

.banner-img { display: block; }
.banner-img img { width: 100%; height: auto; }

.banner-carousel { display: block; width: 100%; position: relative; overflow: hidden;  }
.banner-carousel .banner { width: 100%; display: inline-block; overflow: hidden; }

@media all and (max-width: 480px) {
	.banner-row { flex-direction: column; padding-top: 0; padding-bottom: 0px; }
	.banner-text { padding: 32px 16px 0 16px; }
	.banner-col h1 { font-size: 24px; }
	.banner-col p { font-size: 14px; }
	.banner-btn { margin-top: 16px; padding: 8px 32px; font-weight: 500; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.banner-row { flex-direction: column; padding-bottom: 30px; }
	.banner-col h1 { font-size: 24px; margin-bottom: 20px; }
	.banner-col img { width: 60%; height: auto; display: block; margin: auto; }
}


/* ---------- ----- Design Section ----- ---------- */
.design_section { width: 100%; display: block; position: absolute; margin-top: -136px; z-index: 999; }
.design_area { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 9; }
.design_area:before { content: ""; display: block; width:200%; height: 90%; background: #fff; position: absolute; left: 60px; bottom: 0; z-index: -1; }
.design_ { display: flex; gap: 32px; align-items: center; }

.polygon_area { filter: drop-shadow(-5.905px 6.792px 23px rgba(0, 0, 0, 0.3)); }
.polygon { display: inline-flex; width: 137px; min-width: 137px; height: 158px; position: relative; background: #fff; padding: 10px; box-shadow: var(--bs);
    clip-path: polygon(50% 0, 50% 0, 100% 30%, 100% 70%, 50% 100%, 50% 100%, 0 70%, 0 29%);  }
.polygon_img { width: 100%; display: block; clip-path: polygon(50% 0, 50% 0, 100% 30%, 100% 70%, 50% 100%, 50% 100%, 0 70%, 0 29%); }
.polygon_img:before { content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #00000080; }
.polygon_img  img { width: 100%; height: auto; }
.playicon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 24px; }

.experience_ { display: flex; gap: 24px; }
.experience_no { font-size: 70px; font-weight: 600; font-family: var(--ff3); }
.experience_no span:nth-child(1) {  } 
.experience_no span:nth-child(2) { font-size: 24px; }
.experience_txt {  }
.experience_txt p { font-weight: 600; }
.experience_txt h3 { font-size: 50px; line-height: 1; }

.location_ { width: 40%; display: flex; gap: 12px; align-items: center; background: #fff; }
.location_icon { display: block; font-size: 18px; color: var(--c1); line-height: 0; }
.location_text { display: block; }
.location_text { font-family: var(--ff1); }
.location_text h3 { font-family: var(--ff1); }
.location_text a { display: block; transition: var(--ts); margin-top: 9px; font-size: 15px }
.location_text a:hover { color: var(--c1); }


@media all and (max-width: 480px) {
	.design_section { position: relative; margin-top: 0px; padding: 60px 16px; }
	.design_area { flex-direction: column; gap: 24px; }
	.design_area:before { display: none; }

	.design_ { flex-direction: column; gap: 16px; }

	.experience_ { flex-direction: column; align-items: center; gap: 0px; }
	.experience_txt { text-align: center!important; }
	.experience_txt p { text-align: center!important; }
	.location_  { width: 100%; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.design_ { gap: 16px; }
	.experience_ { gap: 6px; }
	
}


/* ----- Counter ----- */
.section_counter { width: 100%; display: block; padding: 0px 16px 100px 16px; position: relative; }
.counter_row { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 24px; }
.counter_col { display: block; width: 100%; text-align: center; }
.count_info { display: flex; align-items: flex-end; gap: 9px; }

.counter_col span { display: block; font-size: 60px; font-family: var(--ff3); font-weight: 900; white-space: nowrap; color: transparent; text-transform: uppercase;
    -webkit-text-stroke: 2px #000; }
.counter_col span:after { content: "+" }
.counter_col h3 { font-size: 28px; margin-bottom: 8px; font-family: var(--ff2); }
.counter_col p { font-size: 16px; font-weight: 500; margin-top: 8px; }

.counter_col:hover span { color: var(--c1); -webkit-text-stroke: 2px var(--c1); }


@media all and (max-width: 480px) {
	.counter_row { grid-template-columns: repeat(1, 1fr); }
	.counter_col span { font-size: 40px; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.counter_col span { font-size: 40px; }
}


/* ---------- ----- SERVICES ----- ---------- */
.services_row { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 24px; }
.services_col { display: block; width: 100%; position: relative; padding-top: 65px; }

.services_icon { width: 100px; height: 100px; line-height: 100px; text-align: center; position: relative;
	background: #fff; border-radius: 50%; border: 6px solid var(--c1); font-size: 42px; transition: var(--ts); margin: auto; margin-bottom: -50px; z-index: 1; }
.services_col:hover .services_icon { background: var(--c1); color: #fff; }

.s1 { position: relative; transition: all 0.3s; }
.s1:before,
.s1:after  { content: ''; position: absolute; top: 0; left: 0; width: 100%; }
.s1:before { height: 100%; background-color: var(--c1); clip-path: polygon(0 0, 100% 0, 100% 89%, 0% 98%); }
.s1:after { height: 50%; background: var(--c1); clip-path: polygon(0 0, 100% 22%, 100% 100%, 0 100%);
	transform-style: preserve-3d; transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.52); z-index: 0; opacity: 0; }
.services_col:hover .s1:after{ top: -21px; opacity: 1; }

.s2 { display: block; background: #f6f6f6; padding: 104px 40px 80px 47px; clip-path: polygon(0 0, 100% 0, 100% 81%, 0% 100%); transition: all 0.3s; position: relative; z-index: 1; }
.s2:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0;
	background: #000; clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 100%); transform-style: preserve-3d; transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.52); }

.services_col:hover .s2:before { clip-path: polygon(0 0, 100% 0, 100% 81%, 0% 100%); opacity: 1; }

.s3 { display: block; position: relative; z-index: 3; }
.s3 h3 { font-size: 25px; }
.s3 p  { margin-top: 9px; }
.services_col:hover .s3 { color: #fff; }


.pxl-item--icon { position: absolute; top: 0; left: 50%; text-align: center;
	transform: translate(-50%, 0); line-height: 1; filter: drop-shadow(0px 18px 14.5px rgba(0, 0, 0, 0.11)); transition: all 0.3s; z-index: 3; }

.pxl-inner-icon { display: inline-flex; clip-path: polygon(50% 0, 50% 0, 100% 25%, 110% 70%, 50% 100%, 50% 100%, 0 75%, 0 25%);
    width: 115px; min-width: 115px; height: 133px; position: relative; background: var(--c1); text-align: center; transition: all 0.3s; }

.pxl-icon-clip { display: flex; align-items: center; justify-content: center; background: #fff; color: var(--c1); font-size: 56px; transition: all 0.3s; overflow: hidden;
    position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; clip-path: polygon(50% 0, 50% 0, 100% 25%, 110% 70%, 50% 100%, 50% 100%, 0 75%, 0 25%); }

.pxl-icon-clip:after { content: ""; position: absolute; top: -2px; left: 0; bottom: 0; right: 0;
    transition-delay: 0.1s; transform: scale(0); transform-origin: center; transform-style: preserve-3d; transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.52);
    clip-path: polygon(50% 0, 50% 0, 100% 25%, 110% 70%, 50% 100%, 50% 100%, 0 75%, 0 25%); background: var(--c1); z-index: -1; }

.pxl-icon1 { transform: scale(1); transition-delay: 0.1s; transform-origin: center; transform-style: preserve-3d; transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.52); }
.pxl-icon2 { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
    transition-delay: 0.1s; transform: scale(0); transform-origin: center; transform-style: preserve-3d; transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.52); }

@media all and (max-width: 480px) {
	.services_row { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 500px) and (max-width: 992px) {
	
}


/* ---------- ----- STEPS ----- ---------- */
.steps_row { display: grid; grid-template-columns: repeat(2, 1fr); }
.steps_col { display: block; width: 100%; }

.steps_img { display: block; width: 82%; margin-left: auto; border-radius: 12px; overflow: hidden; }
.steps_img img { width: 100%; height: auto; }

@media all and (max-width: 480px) {
	.steps_row { grid-template-columns: repeat(1, 1fr); grid-gap: 16px; }
	.steps_img { display: block; width: 100%; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.steps_row { grid-gap: 16px; }
	.steps_img { display: block; width: 100%; }
}



/* ---------- ----- Accordion ----- ---------- */
.accordion { width: 100%; display: flex; flex-direction: column; gap: 24px; }

.accordion_box { border-radius: 8px; background: var(--bgG1); overflow: hidden; }
.accordion_box .accordion_btn { display: block; padding: 20px; width: 100%;
	text-align: left; background: var(--bg1); color: #000; border: 0; cursor: pointer; font-family: unset; font-weight: 500; font-size: 18px; position: relative; }
.accordion_box .accordion_btn:after { content: '+'; color: #000; font-size: 20px; line-height: 0; position: absolute; top: 48%; right: 24px; }

.accordion_box .accordion_txt { display: none; margin: 0; padding: 16px; transition: var(--ts); }
.accordion_box.on .accordion_btn { background: #fff0; color: #fff; }
.accordion_box.on .accordion_btn:after { content: '-'; color: #fff; }
.accordion_box.on .accordion_txt { display: block; color: #fff; transition: var(--ts); }

@media all and (max-width: 480px) {
	.accordion { gap: 16px; }
	.accordion_box .accordion_btn { font-size: 16px; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.accordion { gap: 16px; }
}


/* ---------- ----- Card ----- ---------- */
.card_area { background: url("assets/images/background-02.jpg")no-repeat center / cover; background-attachment: fixed; }
.card { display: block; padding: 60px 0px; }
.card_info { display: block; text-align: center; color: #fff; }
.card_info h2 { font-size: 62px; }
.card_info h2 span { display: block; }
.card_info ul { display: inline-flex; gap: 32px; margin-top: 16px; font-size: 18px; }
.card_info ul li i { margin-right: 6px; }

@media all and (max-width:480px) {
	.card { display: block; padding: 0px 0px; }
	.card_info h2 { font-size: 32px; }
}


/* ---------- ----- Reviews ----- ---------- */
.slider_row { display: flex; justify-content: space-between; align-items: center; }
.slider_col { position: relative; }
.slider_col:nth-child(1) { width: 30%; }
.slider_col:nth-child(2) { width: 60%; }

.slider_area { width:100%; position:relative; overflow:hidden; }
.slider { display:flex; transition:transform 0.7s ease-in-out; }
.slide { display: block; min-width:100%; height:400px; }
.review_ { display: block; width: 100%; padding: 16px; }
.review_ .review_title h3 { font-size: 52px; }
.review_ .review_title h3 span { color: var(--c1); }

.review_ .review_star { font-size: 30px; color: #ff8f00; margin: 16px 0px; }
.review_ .review_star {  }
.review_ .reviewer_ { margin-top: 32px; }
.review_ .reviewer_ h3 { font-size: 24px; }
.review_ .reviewer_ p { font-size: 14px; color: var(--c1); }

/* Arrows */
.arrows { width: 100%; height: 100%; position: absolute; top: 0;
	display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.arrow { position: relative; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size:30px; color: #000; transform: rotate(90deg); }

.prev_btn:before, .next_btn:before { content: ""; position: absolute; top: 7px; opacity: 0.4;
	display: block; width: 32px; height: 32px; background: #000; border-radius: 50px; }
.prev_btn:before { right: -8px; }
.next_btn:before { left: -8px; }


/* Custom Dots */
.dots { width:100%; display:flex; flex-direction: column; justify-content:center; gap:12px; padding: 50px 0px; }
.dot { width: 100%; background:rgba(255,255,255,0.4); cursor:pointer;  }

.reviewer { display: block; position: relative; padding: 12px 32px; }
.reviewer:before { content: ""; display: block; width: 90%; height: 100%; position: absolute; top: 0; left: 0; transform: skewX(8deg); box-shadow: var(--bs); }
.reviewer h3 { font-size: 24px; }
.reviewer p { font-size: 14px; color: var(--c1); }

.reviewer:after { content: "\f101"; position: absolute; top: 0; left: 90%; font-family: var(--fa); font-weight: 800; font-size: 0;
	display: flex; justify-content: space-around; align-items: center; width: 10px; height: 100%; background: var(--c1); color: #fff; transform: skewX(8deg); transition: var(--ts); }
.dot.active .reviewer:after { background: var(--c1); width: 70px; font-size: 20px; }


@media all and (max-width: 498px) {
	.slider_row { flex-direction: column; }
	.slider_col:nth-child(1) { width: 100%; }
	.slider_col:nth-child(2) { width: 100%; }

	.review_ .review_title h3 { font-size: 38px; }
	.review_ .review_star { font-size: 24px; margin: 8px 0px; }
	.review_ .reviewer_ h3 { font-size: 24px; }
	.review_ .reviewer_ p { font-size: 14px; color: var(--c1); }

	.arrows { position: relative; flex-direction: row; }
	.arrow { transform: rotate(0deg); }
	.dots { display: none; }

}

@media (min-width: 500px) and (max-width: 992px) {
	.review_ .review_title h3 { font-size: 42px; }
}



/* ---------- ----- Form Section ----- ---------- */
.form_section {  }
.form_row { display: flex; align-items: center; }
.form_col:nth-child(1) { width: 55%; }
.form_col:nth-child(2) { width: 45%; }
.form_col { display: block; }
.form_col h2 { font-size: 48px; }

.form_img { display: block; width: 100%; }
.form_img img { width: 100%; height: auto; }

@media all and (max-width: 480px) {
	.form_section { padding: 0px 16px; }
	.form_row { flex-direction: column; }
	.form_col:nth-child(1) { width: 100%; }
	.form_col:nth-child(2) { width: 100%; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.form_section { padding: 0px 16px; }	
}



/* ========== ========== ========== ========== ========== ========== ========== ========== ========== ==========
												PAGES CSS
========== ========== ========== ========== ========== ========== ========== ========== ========== ========== */


/* ---------- ----- Page Banner ----- ---------- */
.page_banner { display: block; background: url("assets/images/background-01.jpg")no-repeat center / cover; }
.page_container { max-width: 1140px; margin: auto; position: relative; }
.pb_row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 24px; }
.pb_col { display: block; }

.pb_text { width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; }
.pb_title { color: #fff; }
.pb_title h1 { color: unset; font-size: 54px; }
.pb_title h1 span { display: block; }
.pb_title p  { margin-top: 16px; font-size: 18px; }

.pb_image { display: block; width: 100%; }
.pb_image img { width: 100%; height: auto; }

.pageNav { display: block; position: absolute; bottom: 0; right: 0px; padding: 12px 16px; background: #fff; border-radius: 9px 9px 0px 0px; }
.pageNav ul { display: flex; gap: 8px; align-items: center; }
.pageNav ul li:nth-child(1) { font-weight: 800; font-family: var(--ff1); }
.pageNav ul li:nth-child(2) { color: var(--c1); }
.pageNav ul li:nth-child(3) { font-family: var(--ff1); font-weight: 400; }

@media all and (max-width: 480px) {
	.page_banner { padding: 48px 16px 0px 16px; }
	.pb_row { grid-template-columns: repeat(1, 1fr); }
	.pb_title h1 { font-size: 32px; }
	.pb_title p  { font-size: 15px; }

	.pageNav ul { font-size: 15px; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.page_banner { padding: 48px 16px 0px 16px; }
	.pb_title h1 { font-size: 32px; }
	.pb_title p  { font-size: 15px; }
	.pageNav ul { font-size: 15px; }
}



/* ========== ========== ===== ABOUT PAGE CSS ===== ========== ========== */











/* ========== ========== ========== ========== ========== ========== ========== ========== ========== ========== ==========
																															SERVICE PAGE
========== ========== ========== ========== ========== ========== ========== ========== ========== ========== ========== */

/* ========== ===== SERVICE PAGE ===== ========== */
.service_row { display: flex; justify-content: space-between; gap: 32px; }
.service_col { display: block; position: relative; }
.service_col:nth-child(1) { width: 70%; }
.service_col:nth-child(2) { width: 30%; }

@media all and (max-width: 498px) {
	.service_row { flex-direction: column; }
	.service_col:nth-child(1) { width: 100%; }
	.service_col:nth-child(2) { width: 100%; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.service_row { flex-direction: column; }
	.service_col:nth-child(1) { width: 100%; }
	.service_col:nth-child(2) { width: 100%; }
}


/* Service INFO */
.service_image { display: block; width: 100%; border-radius: var(--br1); overflow: hidden; margin-bottom: 32px; }
.service_image img { width: 100%; height: 45vh; object-fit: cover; }

.serviceInfo { display: block; }
.serviceInfo h2 { font-size: 32px; color: var(--c2); margin-bottom: 9px; }
.serviceInfo strong { font-size: 18px; }
.serviceInfo h3 { font-size: 20px; color: var(--c2); }
.serviceInfo h4 { font-size: 16px; color: var(--c3); margin-top: 12px; }
.serviceInfo p { text-align: justify; margin-top: 12px; }
.serviceInfo a { text-decoration: underline dotted #000; color: #000; }
.serviceInfo a:hover { color: var(--c3); text-decoration: underline dotted var(--c1); }
.serviceInfo ul { list-style-type: disc; padding-left: 24px; margin-top: 12px; }
.serviceInfo ul li+li { margin-top: 9px; }
.serviceInfo ul li p { margin-top: 4px; }
.serviceInfo ol { list-style-type: decimal; padding-left: 24px; margin-top: 12px; }
.serviceInfo ol li+li { margin-top: 9px; }

.serviceInfo b { font-weight: 600; color: #000; }
.serviceInfo hr { margin: 16px 0px; border: none; height: 1px ;background-color: #ddd0;}

.features { list-style-type: disc; padding-left: 24px; margin-top: 12px;  }
.features li+li { margin-top: 9px; }

.choose { list-style-type: decimal; padding-left: 24px; margin-top: 12px; }
.choose li+li { margin-top: 9px; }
.choose li b { display: block; }

@media all and (max-width: 498px) {

}

@media (min-width: 500px) and (max-width: 992px) {

}


.service_sidebar { display: flex; flex-direction: column; gap: 16px; }

/* WIDGET ANCHOR */
.widget_anchor { width: 100%; padding: 30px 24px; position: relative; border: 1px solid #efeef5; box-shadow: var(--bs); border-radius: 12px; }
.widget_anchor h3 { font-size: 28px; margin-bottom: 16px; }

.category_list { display: block; position: relative; }
.category_list li+li { margin-top: 12px; }
.category_list li { display: block; position: relative; background: var(--bg2); transition: all 0.3s ease; border-radius: 4px; overflow: hidden; z-index: 1; }
.category_list li:before { content: ''; position: absolute; bottom: 0; right: 0; left: 0;
	background: var(--c1); width: 0; height: 100%; transition: .3s ease; overflow: hidden; z-index: -1; }

.category_list li a { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 15px; }
.category_list li:hover:before { width: 100%; }
.category_list li:hover { color: #fff; }
.act_link { background: var(--c1)!important; color: #fff!important; }

/* PAGE FORM */
.serv_form { display: block; width: 100%; margin: auto; box-shadow: var(--bs); padding: 20px; margin-bottom: 16px; border-radius: 12px; }
.serv_form h3 { font-size: 24px; margin-bottom: 20px; }
.input__+.input__ { margin-top: 16px; }
.input__ { display: block; }
.input__ label { display: block; position: relative; font-size: 15px; font-weight: 500; color: #000; margin-bottom: 6px; }
.input__ input,
.input__ select,
.input__ textarea { width: 100%; padding: 10px 16px; background: #f3f5fd; border: 1px solid #f3f5fd; outline: 0; }
.input__ button { padding: 12px 48px; border: 0; outline: 0; border-radius: 4px; font-weight: bold; background: var(--c1); color: #fff; }

@media all and (max-width: 498px) {

}

@media (min-width: 500px) and (max-width: 992px) {
	.service_sidebar { flex-direction: row; }
}







/* ========== ===== ===== Contact Page ===== ===== ========== */
.contact_row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 24px; }
.contact_col { display: block; width: 100%; }

.contact_text { display: block; }
.contact_text h2 { font-size: 32px; margin-top: 12px; }
.contact_text p { margin-top: 16px; }
.contact_text p+p { margin-top: 6px; }
.contact_box { display: block; margin-top: 24px; }
.contact_box ul { display: flex; align-items: center; gap: 24px; }
.contact_box ul li i { font-size: 42px; color: var(--c1); }
.contact_box ul li h3 { font-size: 18px; }
.contact_box ul li p { font-size: 15px; margin-top: 8px; }

.contact_form { display: block; padding: 32px; background: #fff; border-radius: 6px; box-shadow: 0px 7px 24px 0px #0000001f; }
.contact_form h2 { font-size: 32px; }
.contact_form p { margin-top: 16px; }
.contact_form form { display: block; }
.form_group { display: flex; gap: 16px; margin-top: 16px; }
.form_group input,
.form_group select,
.form_group textarea { width: 100%; padding: 16px; background: #f3f5fd; border: 1px solid #f3f5fd; outline: 0; }
.form_group button { padding: 16px 48px; border: 0; outline: 0; border-radius: 4px; background: var(--c1); color: #fff; }

@media all and (max-width: 480px) {
	.contact_row { grid-template-columns: repeat(1, 1fr); }
	.form_group { flex-direction: column; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.contact_row { grid-template-columns: repeat(1, 1fr); }
}


/* ========== ========== ========== ========== ========== ========== ========== ========== ========== ========== ==========
																															BLOG & Blog Pages
========== ========== ========== ========== ========== ========== ========== ========== ========== ========== ========== */

/* ---------- ----- Blog ----- ---------- */
.blog_row_ { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 32px; }
.blog_col_ { display: block; width: 100%; background: #fff; box-shadow: 0 5px 30px 0 #d6d7d891; border: 1px solid #ddd; border-radius: var(--br2); overflow: hidden; }

.blog_img_ { display: block; width: 100%; }
.blog_img_ img { width: 100%; height: auto; }

.blog_text_ { padding: 20px; }
.blog_text_ ul { display: flex; justify-content: space-between; margin-bottom: 16px; }
.blog_text_ ul li+li { margin-left: 16px; }
.blog_text_ ul li i { color: var(--c1); margin-right: 4px; }
.blog_text_ h3 { font-size: 18px; margin-bottom: 16px; font-weight: 600; text-align: justify; }
.blog_text_ p { text-align: justify; }
.blog_text_ a { display: inline-block; padding:  9px 16px; background: var(--c1); color: #fff; margin-top: 24px;  font-size: 15px; border-radius: 50px; }
 

@media all and (max-width: 480px) {
	.blog_row_ { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 500px) and (max-width: 1140px) {
	.blog_row_ { grid-gap: 16px; }
}


/* ---------- ----- Blog Pages ----- ---------- */
.blog__row { display: flex; justify-content: space-between; gap: 32px; }
.blog__col { display: block; position: relative; }
.blog__col:nth-child(1) { width: 68%; }
.blog__col:nth-child(2) { width: 32%; }

@media all and (max-width: 498px) {
	.blog__row { flex-direction: column; }
	.blog__col:nth-child(1) { width: 100%; }
	.blog__col:nth-child(2) { width: 100%; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.blog__row { flex-direction: column; }
	.blog__col:nth-child(1) { width: 100%; }
	.blog__col:nth-child(2) { width: 100%; }
}

/* Blog Article */
.blogarticle_image { display: block; width: 100%; border-radius: var(--br1); overflow: hidden; margin-bottom: 32px; }
.blogarticle_image img { width: 100%; height: 45vh; object-fit: cover; }

.blog_article { display: block; }
.blog_article h2 { font-size: 40px; font-weight: 600; }
.blog_article h3 { font-size: 24px; color: var(--c1); font-weight: 600; }
.blog_article h4 { font-size: 18px; margin-top: 12px; font-weight: 600; }
.blog_article p { text-align: justify; margin-top: 12px; }
.blog_article a { text-decoration: underline dotted #000; color: #000; }
.blog_article a:hover { color: var(--c3); text-decoration: underline dotted var(--c1); }

.blog_article b { font-weight: 500; }
.blog_article hr { margin: 32px 0px; color: #ddd; }

.blog_article > .disc { list-style-type: disc; padding-left: 24px; margin-top: 12px;  }
.blog_article > .disc li+li { margin-top: 9px; }

.blog_article > .decimal { list-style-type: decimal; padding-left: 24px; margin-top: 12px; }
.blog_article > .decimal li+li { margin-top: 9px; }
.blog_article > .decimal li span { font-weight: 500; }
.blog_article > .decimal li p { margin-top: 6px; }

.blog_article > .check { list-style-type: none!important; margin-top: 12px; }
.blog_article > .check li+li { margin-top: 9px; }
.blog_article > .check li { position: relative; padding-left: 24px; }
.blog_article > .check li:before { content: "✔"; position: absolute; left: 0; color: var(--c1); font-weight: 600; }
.blog_article > .check li b { display: block; }


@media all and (max-width: 498px) {
	.blog_article h2 { font-size: 24px; }
}

/* Blog SideBar */
.sticky_side { position: sticky; top: 100px; height: fit-content; overflow: visible; }
.blog_sidebar { display: flex; flex-direction: column; gap: 16px;
	background: #fff; box-shadow: var(--bs); padding: 24px 16px; border-radius: var(--br1); }

/* Blog Recent Posts */
.recent_posts {  }
.recent_posts h3 { font-size: 22px; margin-bottom: 16px; }
.recent_post+.recent_post { padding-top: 16px; margin-top: 16px; border-top: 1px solid #ddd; }
.recent_post_thumb  { display: table-cell; width: 100px; }
.recent_post_thumb img { width: 100%; height: auto; }
.recent_post_info { display: table-cell; padding: 0 0 0 12px; vertical-align: top; }
.recent_post_info h3 { font-size: 16px; }
.recent_post_info ul { display: flex; font-size: 12px; }
.recent_post_info ul li+li { margin-left: 8px; }
.recent_post_info ul li i { color: var(--c1); margin-right: 4px; }

/* Blog Gallery */
.blog_gallery { display: block; }
.blog_gallery h3 { font-size: 22px; margin-bottom: 16px; }
.blog_gallery .images { display: flex; flex-wrap: wrap; }
.blog_gallery .images img { width: 33.33%; padding: 7px; }

/* Blog Social */
.blog_social { display: block; }
.blog_social h3 { font-size: 22px; margin-bottom: 16px; }
.blog_social i { width: 40px; height: 40px; line-height: 40px; text-align: center; background: #e7e7e7; border-radius: 4px; transition: 0.5s; }
.blog_social i:hover { background: var(--c1); color: #fff; }

@media all and (max-width: 498px) {

}

@media (min-width: 500px) and (max-width: 992px) {

}




/* ========== ========== ========== ========== ========== ========== ========== ========== ========== ========== ==========
														FOOTER
========== ========== ========== ========== ========== ========== ========== ========== ========== ========== ========== */

.upper_footer { display: block; width: 100%; background: var(--bg1); }
.footer_row { max-width: 1140px; margin: auto; display: grid; grid-template-columns: 25% 18% 22% 28%; grid-gap: 3.33%; padding: 60px 16px; }
.footer_col { display: block; width: 100%; }
.footer_col h3 { font-size: 22px; text-transform: uppercase; color: var(--c1); margin-bottom: 16px; }

.footer_logo { display: block; width: 212px; }
.footer_logo img { width: 100%; height: auto; }
.footer_text { margin-top: 16px; }
.footer_text p { text-align: justify; }

.footer_social { display: flex; gap: 9px; margin-top: 12px; }
.footer_social a { display: block; width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 50px; background: var(--c1); color: #fff; }

.footer_links {  }
.footer_links li+li { margin-top: 9px; }
.footer_links li a { display: block; position: relative; transition: var(--ts); font-weight: 500; }
.footer_links li a:before { content: '\f101'; margin-right: 6px; font-family: var(--fa); font-weight: 600; color: var(--c1); }
.footer_links li a:hover { color: var(--c1); }

.footer_link { display: flex; gap: 9px; }
.footer_link+.footer_link { margin-top: 12px; }
.footer_icon { display: block; font-size: 38px; color: var(--c1); line-height: 0; }
.footer_info { display: block; }
.footer_info h4 { font-size: 17px; font-weight: 600; }
.footer_info p { transition: var(--ts); margin-top: 6px; }
.footer_info a { display: block; margin-left: 6px; transition: var(--ts); }
.footer_info a+a { margin-top: 9px; }
.footer_info a:hover { color: var(--c1); }
.footer_link:hover .footer_info p { color: var(--c1); }

.lower_footer { background: var(--c1); color: #fff; padding: 18px 16px;  }
.footer_row_ { max-width: 1140px; margin: auto; display: flex; justify-content: space-between; }
.footer_col_ { font-weight: 500; }
.footer_col_ p {  }
.footer_col_ ul { display: flex; gap: 8px; }
.footer_col_ ul li a {  }

@media all and (max-width:480px) {
	.footer_row { grid-template-columns: repeat(1, 1fr); grid-gap: 16px; }
	.footer_row_ { flex-direction: column; gap: 16px; text-align: center; }
	.footer_col_ ul li { display: block; width: 100%; }
	.footer_col_ ul li a { display: block; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.footer_row { grid-template-columns: repeat(2, 1fr); }

}