@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?tlja50');
  src:  url('../fonts/icomoon.eot?tlja50#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?tlja50') format('truetype'),
    url('../fonts/icomoon.woff?tlja50') format('woff'),
    url('../fonts/icomoon.svg?tlja50#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.icon-mobile:before {
  content: "\e908";
}
.icon-right-arrow:before {
  content: "\e904";
}
.icon-location:before {
  content: "\e905";
}
.icon-link:before {
  content: "\e906";
}
.icon-check-mark:before {
  content: "\e907";
}
.icon-facebook:before {
  content: "\e900";
}
.icon-linked-in:before {
  content: "\e901";
}
.icon-email:before {
  content: "\e902";
}
.icon-telephone:before {
  content: "\e903";
}



:root {
  --black: #000000;
  --black-100: #253247;
  --white: #ffffff;
  --white-100: #C2C5D2;
  --white-200: #F9F9F9;
  --white-300: #F9FAFF;
  --white-400: #F0EBEB;
  --red: #DE2F1C;


  --transition: all 0.5s ease-in-out;
}

html {
  font-size: 0.534vw;
}

body {
  position: relative;
  font-family: "Source Sans 3", sans-serif;
  color: var(--black);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 3rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

ul li {
  list-style-type: none;
  list-style-position: inside;
}

ol li {
  list-style-type: inherit;
  list-style-position: inside;
}

figure,
address,
blockquote {
  margin: 0;
  padding: 0;
}

input:focus,
textarea:focus {
  outline: none;
  box-shadow: none;
  background-color: var(--white);
}

body.admin-bar header {
  margin-top: 32px;
}
.container { padding: 0 2rem;}
.row{margin-left: -2rem;margin-right: -2rem;}
.row>*{padding: 0 2rem;}

/* ================== USER FOR SAFRI auto Complete field off ============================== */
input::-webkit-contacts-auto-fill-button {visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0;}

/* Common Style Start */
.button_com{display: inline-block; border-radius: 0.3rem; padding: 1.2rem 2.8rem; color: var(--white); font-size: 2.2rem; font-weight: 600; line-height: 3rem; background-color: var(--black-100); transition: var(--transition); }
.button_com:hover{background-color: var(--red); color: var(--white);}



.com_heading_sec{margin-bottom: 2.8rem;}
.com_heading_sec .com_sub_hed{display: inline-block; color: var(--red); font-size: 3.2rem;font-weight: 600;line-height: 3.8rem; text-transform: uppercase; margin-bottom: 1.4rem;}
.com_heading_sec .com_heading{color: var(--white); font-size: 6.5rem;font-weight: 700;line-height: 9rem; margin-bottom: 2.7rem;}
.com_heading_sec .com_heading_content p{color: var(--white);font-size: 2.2rem;font-weight: 400;line-height: 3rem; margin-bottom:2.5rem}
.com_heading_sec .com_heading_content p:not(:last-of-type){margin-bottom: 2.5rem;}
.com_heading_sec .button-wrap{margin-top: 2.5rem;}



.semibanner-area {height: 25.5rem;position: relative;overflow: hidden;background-color: var(--black-100); margin-top: 9.2rem;}
.semibanner-image {position: absolute;top: 0;left: 0;width: 100%;height: 100%; opacity: 0.2;}
.semibanner-image::after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: var(--black-100); opacity: 0.2;}
.semibanner-image img {width: 100%;height: 100%;object-fit: cover;}
.semibanner-text-wrap {position: relative;z-index: 1;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
.semibanner-text {position: relative;color: var(--white);font-size: 8rem;font-weight: 700;line-height: 11rem;text-align: center;}
.hogo__page_title{position: absolute; top: -100%; left: -100%;}
.semibanner-content-image { width: 30rem;}

body.page-hogo .semibanner-content-image img , body.single-product .semibanner-content-image img{ filter: brightness(0) invert(1);}
body.page-hogo .semibanner-area , body.single-product .semibanner-area { margin-top: 9.9rem;}

.all_page_wrp{padding: 15rem 0rem; border-bottom: 0.1rem solid var(--white-400);}

.swiper-button-next{right: 0;}
.swiper-button-prev{left: 0;}
.swiper-button-prev::after , .swiper-button-next::after{display: none;}
.swiper-button-prev , .swiper-button-next{width: 5rem !important; height: 5rem !important; border-radius: 0.6rem; background: var(--white); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); transition: var(--transition);}
.swiper-button-prev:hover , .swiper-button-next:hover{background: var(--red);}
.swiper-button-prev:focus , .swiper-button-next:focus{outline: none; border: none;}
.swiper-button-prev span , .swiper-button-next span{color: var(--black); font-size: 1.9rem; transition: var(--transition);}
.swiper-button-prev:hover span , .swiper-button-next:hover span{color: var(--white);}
.swiper-button-prev {transform: rotate(180deg);}


.wpcf7-not-valid-tip { margin-top: 0.5rem;font-size: 1.4rem;line-height: 2rem;}
.wpcf7 form .wpcf7-response-output{ font-size: 1.2rem !important; line-height: 1.6rem !important; font-weight: 400; color: var(--black) !important; margin-top: 1rem !important; padding: 1rem !important; border-radius: 1rem;}

.wpcf7 form.invalid .wpcf7-response-output{border-color: var(--red) !important;}
/* Common Style End */

/* Header Style Start */
.site-header { position: fixed;width: 100%; top: 0; left: 0; z-index: 99; overflow: hidden; padding: 2rem 0; transition: var(--transition);}
.site-header.sticky {background-color: rgba(0, 0, 0, 0.70);}


.site-header .custom-logo-link {display: inline-block; width: 15.7rem;}
.site-header .custom-logo-link img{ width: 100%; height: 100%;}

ul.menu-wrapper {display: flex;align-items: center;gap: 7rem;}
ul.menu-wrapper li a{ position: relative; display: inline-block; padding: 0; color: var(--black-100); font-size: 2.2rem;font-weight: 400;line-height: 3rem; transition: var(--transition);}

ul.menu-wrapper li a::after {content: ""; position: absolute; bottom: 0;left: 0; height: 0.2rem; width: 0%; background-color: var(--red);transition: var(--transition); z-index: -1;}
ul.menu-wrapper li a:hover::after, ul.menu-wrapper li.current-menu-item a::after {width: 100%;}

ul.menu-wrapper li:last-of-type a{ border: 0.1rem solid transparent; background-color: var(--red); color: var(--white); border-radius: 0.3rem; padding: 0.6rem 2.7rem; transition: var(--transition);}
ul.menu-wrapper li:last-of-type a:hover::after, ul.menu-wrapper li:last-of-type.current-menu-item a::after {width: 0%;}
ul.menu-wrapper li:last-of-type a:hover { background-color: transparent; border-color: var(--black-100); color: var(--black-100);}
ul.menu-wrapper li:last-of-type.current-menu-item a{background-color: var(--red); color: var(--white); border-color: transparent;}

.site-header.sticky ul.menu-wrapper li a{ color: var(--white);}
.site-header.sticky ul.menu-wrapper li:last-of-type a:hover{ background-color:var(--white); border-color: var(--white); color: var(--black-100);}
.site-header.sticky ul.menu-wrapper li:last-of-type.current-menu-item a{ background-color: var(--red); color: var(--white); border-color: transparent;}


/* Banner Style Start */
.banner-area{height: 100dvh; position: relative; overflow: hidden;}
.banner-area-inner{position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 100%; height: 100%;}
.banner-area-inner .container, .banner-area-inner .row{height: 100%;}
.banner-content-block{display: flex; justify-content: center; flex-direction: column; height: 100%; width: 100%;}

.banner-content-block > *,
.banner-button-wrap {
  opacity: 0;
  transform: translateX(-50px);
}

.banner-badge{ display: inline-block; width: fit-content; padding: 0.5rem 5rem 0.5rem 2.5rem; background-color: var(--red); color: var(--white); font-size: 4.5rem; font-weight: 600; line-height: 4.5rem; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%); margin-bottom: 1.5rem;}

.banner-title{ color: var(--black-100); font-size: 11rem;font-weight: 700;line-height: 11rem; margin-bottom: 1.5rem; text-transform: capitalize;}
.banner-short-content { position: relative; max-width: 52rem; padding-left: 2.2rem; color: var(--black); font-size: 2.2rem;font-weight: 400;line-height: 3rem; margin-bottom: 4rem;}
.banner-short-content::after {content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 0.5rem; background-color: var(--red);}

.banner-image-wrap{position: relative; height: 100%;
opacity: 0;
  transform: translateX(50px);

}

.banner-image{position: absolute; bottom: -3.5rem; right: 0;max-width: 82rem; padding-left: 9.3rem;}


/* Home About Style Start */
.home-about-area{padding: 10.5rem 0; background: url(../images/about-bg.png), #0B182D; background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden;}
.home-about-content{text-align: center;}
.home-about-content .com_heading_sec{margin-bottom: 0;}
.home-about-content .button_com{color: var(--white); background-color: var(--red);  }
.home-about-content .button_com:hover{background-color: var(--white); color: var(--black-100);}
.home-about-content .com_heading_content{max-width: 114.5rem; margin: 0 auto;}

/* Home Product Style Start */
.home-product-area{padding: 15.5rem 0 13rem; overflow: hidden;}
.home-product-item{display: block;}
.product-item-image-wrap{position: relative; border-radius: 2rem 2rem 0 0; overflow: hidden;}
.product-item-image-wrap img{width: 100%; height: 100%;}
.home-product-content{position: absolute; bottom: -100%; right: 0; min-height: 23rem; padding: 4rem 8.5rem; background: rgba(0, 0, 0, 0.50); box-shadow: 6px 15px 20px 0 rgba(136, 141, 162, 0.20); text-align: center; opacity: 0; visibility: hidden; transition: var(--transition);}
.home-product-item:hover .home-product-content{bottom: 0; opacity: 1; visibility: visible;}
.short-content{color: var(--white); font-size: 2.2rem;font-weight: 400;line-height: 3rem; margin-bottom: 2.5rem;}

.product-btn{display: inline-block; border: none; border-radius: 0.3rem; padding: 1.2rem 2.8rem; color: var(--white); font-size: 2.2rem; font-weight: 600; line-height: 3rem; background-color: var(--red); transition: var(--transition); }
.product-btn:hover{background-color: var(--white); color: var(--black-100);}

.logo-area{padding: 4rem; height: 18.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0 0 20px 20px; background: var(--white); box-shadow: 0 0 10px 0 rgba(136, 141, 162, 0.10); transition: var(--transition);}
.home-product-item:hover .logo-area{ box-shadow: 6px 15px 20px 0 rgba(136, 141, 162, 0.20);}
.logo-area figure{width: fit-content; margin: 0 auto;}


/* Home Product Style Start */
.home-contact-area{padding: 6rem 0 5rem; background: url(../images/contact-bg.png), var(--white-300); background-position: left; background-size: contain; background-repeat: no-repeat; overflow: hidden;}
.home-contact-inner{margin-left: 15rem;}
.home-contact-area .com_heading_sec { margin-bottom: 2.8rem;  max-width: 51rem; }
.home-contact-area .com_heading_sec .com_heading{color: var(--black-100); line-height: 7rem; }
.home-contact-area .com_heading_sec .com_heading_content p{color: var(--black); font-size: 2rem;}

.mail-contact{display: flex; align-items: center; gap: 2rem 3rem; flex-wrap: wrap;}
.mail-contact a{display: flex; align-items: center; gap: 1rem; color: var(--black); font-size: 2.2rem;font-weight: 400;line-height: 3rem; transition: var(--transition);}
.mail-contact a:hover{color: var(--red);}
.mail-contact a span{color: var(--red); font-size: 2rem; transition: var(--transition);}

.contact_sec_loop { padding: 4.8rem 5.8rem; margin-right: 10rem; border-radius: 2rem; background: var(--white); box-shadow: 6px 15px 20px 0 rgba(136, 141, 162, 0.20);}
.contact_head{margin-bottom: 2.4rem;}
.contact_hed_text { color: var(--black-100);font-size: 4.8rem;font-weight: 600; line-height: 7rem;}
.contact_sub_hed_text { display: inline-block; color: var(--black-100);font-size: 1.6rem;font-weight: 400; line-height: 3rem;}

.double-input{display: flex;align-items: center;gap: 2.5rem;}
.form-control-wrapper{ margin-bottom: 2rem; width: 100%;}
.form-control-wrapper p{line-height: 0;}
.form-control-wrapper label{ font-size: 2rem;font-weight: 400;line-height: 3rem; color: var(--black-100); margin-bottom: 1rem;}
.formcontrol { width: 100%; height: 5.5rem; background-color: var(--white-200); border: 0.1rem solid var(--white-100); font-size: 1.8rem;font-weight: 300;line-height: 3rem; color: var(--black-100); padding: 2rem; border-radius: 1rem; transition: var(--transition);}
.formcontrol:focus { outline: none; box-shadow: none; border-color: var(--black-100);}
.formcontrol::placeholder{font-size: 1.8rem;font-weight: 300;line-height: 3rem; color: var(--black-100);}
select.formcontrol {  padding: 0.5rem 2rem; padding-right: 5rem; -webkit-appearance: none; -moz-appearance: none;   background-image:url(../images/dropdown-icon.svg); background-position: 95% 50%; background-size: 1.7rem;  background-repeat: no-repeat;}
textarea.formcontrol {  resize: none;height: 10rem;}
.contact_sec_loop input[type='submit']{ display: inline-block; border-radius: 0.3rem; padding: 1.2rem 3.8rem; color: var(--white); font-size: 2.2rem; font-weight: 600; line-height: 3rem; background-color: var(--red); border: none; transition: var(--transition);}
.contact_sec_loop input[type='submit']:hover{background-color: var(--black); color: var(--white);}


/* Footer Style Start */
.footer_top{padding:5.2rem 0;}
.footer_top .footer_top_inner {display: flex; align-items: center; justify-content: space-between; gap: 2rem 5rem; flex-wrap: wrap;}
.footer_top_nav , .footer_top_logo, .footer_top_right{width: calc(33.33% - 3.4rem)}

ul.footer-navigation-wrapper {display: flex;align-items: center;gap: 2rem 3.7rem; flex-wrap: wrap;}
ul.footer-navigation-wrapper li a{ position: relative; display: inline-block; padding: 0; color: var(--black-100); font-size: 2rem;font-weight: 400;line-height: 3rem; transition: var(--transition);}
ul.footer-navigation-wrapper li a:hover, ul.footer-navigation-wrapper li.current-menu-item a{color: var(--red);}
.footer-logo{text-align: center;}
.footer-logo .custom-logo-link {display: inline-block; width: 15.7rem;}
.footer-logo .custom-logo-link img{ width: 100%; height: 100%;}

.footer_top_right{display: flex; align-items: center; justify-content: end; gap: 2rem 7.5rem;}
ul.footer-nav{display: flex;align-items: center; gap: 2rem 4rem; flex-wrap: wrap;}
ul.footer-nav li a{position: relative; display: inline-block; padding: 0; color: var(--black-100); font-size: 2rem;font-weight: 400;line-height: 3rem; transition: var(--transition);}
ul.footer-nav li a:hover , .footer-nav ul li.current-menu-item a{color: var(--red);}
ul.footer-nav li:nth-of-type(2){position: relative;}
ul.footer-nav li:nth-of-type(2)::after { content: ""; position: absolute; top: 50%; left: -2rem; transform: translateY(-50%); width: 0.2rem; height: 4rem; background: var(--white-100); }
.socialmenu-nav {display: flex;align-items: center;gap: 1.8rem; flex-wrap: wrap;}
.socialmenu-nav li a{font-size: 0; line-height: 0;}
.socialmenu-nav li a span{font-size: 2.4rem; color: var(--black-100); transition: var(--transition);}
.socialmenu-nav li a:hover span{color: var(--red);}

.footer_bot{padding: 1.9rem 0; background-color: var(--black-100); text-align: center;}
.copy_right{color: var(--white); font-size: 1.5rem;font-weight: 400;line-height: 3rem;}



/* About Loop Style Start */
.common_content h2,.common_content h3,.common_content h4,.common_content h5,.common_content h6{font-size: 6.5rem;font-weight: 600;line-height: 7rem; color: var(--black-100); margin-bottom: 2rem;}
.common_content h3{font-size: 6rem;line-height: 6.5rem;}
.common_content h4{font-size: 5.5rem;line-height: 6rem;}
.common_content h5{font-size: 5rem;line-height: 5.5rem;}
.common_content h6{font-size: 4.5rem;line-height: 5rem;}
.common_content p{font-size: 2.2rem; line-height: 3rem; font-weight: 400; color: var(--black); margin-bottom: 2rem;}
.common_content p a{color: var(--red); transition: var(--transition);}
.common_content p a:hover{color: var(--black);}

.common_content ul , .common_content ol {margin-bottom: 2rem;}
.common_content ul li , .common_content ol li{ position: relative; color: var(--black);font-size: 2.2rem;font-weight: 400;line-height:3rem; text-align: left;}
.common_content ul li {padding-left:4rem;}
.common_content ul li:not(:last-of-type),.common_content ol li:not(:last-of-type){margin-bottom: 1.5rem;}

.common_content ul li::after,.com_content ul li:after{ position: absolute;content: "\e907"; font-family: 'icomoon'; top: 0rem; left: 0; font-size: 2.2rem; color: var(--red);}
.common_content ul li p, .common_content ol li p{margin-bottom: 0rem;}



.loop-image{border-radius: 2rem; overflow: hidden; margin-left: 8.5rem;}
.loop-image img{ width: 100%; height: 100%; object-fit: cover; transition: var(--transition);}
.loop-image:hover img{transform: scale(1.1);}
.loop-content-wrap{margin-right: 8.5rem;}
.loops-area .row:not(:last-of-type){margin-bottom: 13.5rem;}
.loops-area .row:nth-of-type(even){flex-direction: row-reverse;}
.loops-area .row:nth-of-type(even) .loop-content-wrap{margin-left: 8.5rem; margin-right: 0;}
.loops-area .row:nth-of-type(even) .loop-image{margin-right: 8.5rem; margin-left: 0;}

/* Product List Loop Style Start */
.product-top-content{max-width: 165rem; margin: 0 auto; text-align: center;}
.product-top-content .com_heading_sec{margin-bottom: 13rem;}
.product-top-content .com_heading_sec h2 {color: var(--black-100); font-size: 6.5rem; font-weight: 700; line-height: 9rem; margin-bottom: 2.7rem;}
.product-top-content .com_heading_sec p {color: var(--black); font-size: 2.2rem; font-weight: 400; line-height: 3rem;}


.product-loop-image-wrap{display: flex; align-items: end;  margin-right: 8.5rem; margin-left: 0;}
.loops-area .row:nth-of-type(even) .product-loop-image-wrap{flex-direction: row-reverse; margin-left: 8.5rem; margin-right: 0;}
.product-loop-image{position: relative; max-width: 51rem; margin-bottom: 3rem; border-radius: 2rem; overflow: hidden; box-shadow: 6.281px 15.702px 20.936px 0 rgba(136, 141, 162, 0.20);}
.hogo_logo_product{display: inline-block; position: absolute; bottom: 1.8rem; left: 2.4rem; width: 8.5rem;}
.loops-area .row:nth-of-type(even) .hogo_logo_product{left: auto; right: 2.4rem;}
.product-loop-image-small{position: relative; z-index: 1; max-width: 33.5rem; margin-left: -8.5rem; border-radius: 2rem; overflow: hidden; box-shadow: 6.281px 15.702px 20.936px 0 rgba(136, 141, 162, 0.20);}
.loops-area .row:nth-of-type(even) .product-loop-image-small{margin-left: 0rem; margin-right: -8.5rem;}
.product-loop-image > img , .product-loop-image-small img{width: 100%; height: 100%; object-fit: cover; transition: var(--transition);}
.product-loop-image:hover > img , .product-loop-image-small:hover img{transform: scale(1.1);}

.product-loop-content-wrap{margin-left: 8.5rem; margin-right: 0;}
.loops-area .row:nth-of-type(even) .product-loop-content-wrap{margin-right: 8.5rem; margin-left: 0;}


.product-loop-content-wrap .product-name{color: var(--black-100);font-size: 4.8rem;font-weight: 600;line-height:5.8rem; margin-bottom: 2.5rem;}
.product-loop-content-wrap .button-wrap{margin-top: 6rem;}
.product-loop-content-wrap .button_com{padding: 1.2rem 2rem; background-color: var(--red);}
.product-loop-content-wrap .button_com:hover{background-color: var(--black-100);}
.product-loop-content-wrap .common_content ul li { padding-left: 0;}
.product-loop-content-wrap .common_content ul li::after{display: none;}


/* Product Details Style Start */
.product-details-wrap{display: flex;align-items: flex-end; position: relative; margin-bottom: 7rem; overflow: hidden;}
.product-details-image{max-width: 91rem; width: 100%; border-radius: 2rem; overflow: hidden;margin-bottom: 6rem;}
.product-details-image img{width: 100%; height: 100%; object-fit: contain;}
.product-details-image .hogo_logo_product{bottom: 3rem; left: 4.5rem; width: 15.8rem;}
.product-details-content-wrap{ max-width: 88.8rem; position: absolute; bottom: 0; right: 0; z-index: 1; margin-left: -6.2rem; padding: 9rem; border-radius: 106px 20px 20px 20px; background: var(--white); overflow: hidden;}

.product-details-content-wrap .product-name{color: var(--black-100);font-size: 5rem;font-weight: 600;line-height:5.5rem; margin-bottom: 2.5rem;}
.product-details-content-wrap .common_content ul li { padding-left: 0;}
.product-details-content-wrap .common_content ul li::after{display: none;}
.product-details-content-wrap .button-wrap{margin-top: 5rem;}
.product-details-content-wrap .button_com{ padding: 0.7rem 2.7rem; background-color: var(--red);}
.product-details-content-wrap .button_com:hover{background-color: var(--black-100);}

.related-product-wrap{overflow: hidden;}
.related-product-heading{margin-bottom: 5.4rem; text-align: center;}
.related-product-subhead{display: inline-block; color: var(--red);font-size: 3.2rem;font-weight: 600;line-height:3.2rem; text-transform: uppercase;}
.related-product-head{color: var(--black-100);font-size: 6.5rem;font-weight: 600;line-height:7rem;}

.related-image{border-radius: 2rem; overflow: hidden; width: 100%; height: 100%; margin-bottom: 2.5rem;}
.related-image > img{ width: 100%; height: 100%; object-fit: cover; transition: var(--transition);}
.related-image:hover > img{ transform: scale(1.1);}
.related-image .hogo_logo_product{bottom: 1.5rem; left: auto; right: 2rem; width: 6.9rem;}

.related-product-item-wrap{display: flex;align-items: flex-start;justify-content: center; flex-wrap: wrap; gap: 4rem;}
.related-product-item{width: calc(25% - 3rem);}
.related-product-content{display: flex;align-items: flex-start; justify-content: space-between; gap: 2rem;}
.product-info{display: inline-block; color: var(--black-100);font-size: 2rem;font-weight: 600;line-height:2.4rem; transition: var(--transition);}
.product-info:hover{color: var(--red);}
.icon-block{padding: 0.2rem 0 0.5rem 3rem; position: relative;}
.icon-block::after {content: "";position: absolute;top: 0;left: 0;width: 0.2rem; border-radius: 1rem; height: 100%;background: var(--black-100);}
.icon-block i{color: var(--red);font-size: 3.2rem; transition: var(--transition);}
.icon-block i:hover{color: var(--black);}
.related-product-wrap .button-wrap{margin-top: 16rem; text-align: center;}
.related-product-wrap .button_com{ padding: 0.7rem 2.7rem; background-color: var(--red);}
.related-product-wrap .button_com:hover{background-color: var(--black-100);}
.related-product-wrap .button-wrap { margin-top: 6rem;}

.related_slider{padding: 0 3rem;}
.related-next{display: none; right: 1.4rem;}
.related-prev{display: none; left: 1.4rem;}




/* Terms and conditions / Privacy policy Style Start */
.tc-pp-page .common_content h2, .tc-pp-page .common_content h3, .tc-pp-page .common_content h4, .tc-pp-page .common_content h5, .tc-pp-page .common_content h6{
  position: relative;font-size: 4.5rem; line-height: 5rem;  margin-bottom: 3rem; padding-bottom: 1rem;}
.tc-pp-page .common_content h3{font-size: 4rem;line-height: 4.5rem;}
.tc-pp-page .common_content h4{font-size: 3.5rem;line-height: 4rem;}
.tc-pp-page .common_content h5{font-size: 3rem;line-height: 3.5rem;}
.tc-pp-page .common_content h6{font-size: 2.5rem;line-height: 3rem;}

.tc-pp-page .common_content h2::after, .tc-pp-page .common_content h3::after, .tc-pp-page .common_content h4::after, .tc-pp-page .common_content h5::after, .tc-pp-page .common_content h6::after{ content: ""; position: absolute; bottom: 0; left: 0.5rem; width: 10rem; height: 0.5rem; background-color: var(--red);}

.tc-pp-page .common_content ul, .tc-pp-page .common_content ol , .tc-pp-page .common_content p { margin-bottom: 3rem;}
.tc-pp-page .common_content ul li, .tc-pp-page .common_content ol li , .tc-pp-page .common_content p { font-size: 2rem;}

/* 404 / Thank You Style Start */
.thakyou-content{text-align: center;}
.thakyou-content .button-wrap{margin-top: 6.5rem;}
.thakyou-content .button_com{background-color: var(--red);}
.thakyou-content .button_com:hover{background-color: var(--black-100);}

/* Contact Style Start */
.form-area{padding-bottom: 0 !important; border: none;}
.form_sec .com_heading_sec {margin-bottom: 4rem; text-align: center;}
.form_sec .com_heading_sec h2 ,.form_sec .com_heading_sec h3{color: var(--black-100); font-size: 4.8rem;font-weight: 700; line-height: 5.4rem; margin-bottom: 0.5rem;}
.form_sec .com_heading_sec h3{font-size: 4.2rem;line-height: 5rem;}
.form_sec .com_heading_sec p {color: var(--black);}

.form-area .form_sec {margin-bottom: 7.5rem;}
.form-area input , .form-area select , .form-area textarea{background-color: transparent;}
.form-area .form-con-wrap{display: flex;align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 2rem 4rem;}
.form-left , .form-right{max-width: 64.5rem; width: 100%;}

.form-area input[type='submit'] {  display: block; margin: 3rem auto 0; border-radius: 0.3rem; padding: 1.2rem 6.5rem; color: var(--white); font-size: 2.2rem; font-weight: 600;line-height: 3rem;background-color: var(--red);border: none; transition: var(--transition);}
.form-area input[type='submit']:hover {background-color: var(--black-100);}
.form-area textarea{height: 20.5rem;}
.form-area .form-left textarea{height: 9rem;}

.contact-box { display: flex; align-items: center; background: var(--white-300); line-height: 0; overflow: hidden;}
.contact-wrap{width: 50%; padding: 5rem 0;}
.map-area { width: 50%;}
.map-area iframe{height: 61.8rem;}

.contact-wrap-inner{max-width: 62rem; margin: 0 17rem 0 auto;}
.contact-wrap .location-info{display: flex; align-items: flex-start; gap: 2.5rem; color: var(--black); font-size: 2.2rem;font-weight: 400;line-height: 3rem;}
.contact-wrap .location-info i{padding-top: 0.5rem; color: var(--red); font-size: 2rem; transition: var(--transition);}
.contact-wrap .com_heading_sec{margin-bottom: 3.5rem; max-width: 50rem;}
.contact-wrap .com_heading_sec .com_heading {color: var(--black-100); line-height: 7rem; font-weight: 600; margin-bottom: 2.5rem;}
.contact-wrap .com_heading_sec .com_heading_content p {color: var(--black);}
.contact-wrap-inner{max-width: 62rem;}



/* Hogo Plus Style Start */
.site-header .site-logo.hogo-logo .custom-logo-link { width: 18.5rem;}
.site-header .site-logo.hogo-plus .custom-logo-link { width: 28.5rem;}
.hogo-banner-area{position: relative; overflow: visible;}
.hogo-banner-area::after{position: absolute;content: "";bottom: -16rem;left: -6rem; width: 68.5rem; height: 68.5rem; border-radius: 68.5rem; background: linear-gradient(180deg, rgba(255, 248, 242, 0.15) 0%, rgba(226, 170, 123, 0.15) 100%);filter: blur(75px); z-index: -1;}
.banner-area.hogo-banner-area .banner-title {margin-bottom: 3rem;}
.banner-area.hogo-banner-area .banner-short-content{margin-bottom: 6rem;}

.hogo-banner-area .banner-content-block{padding-left: 6rem;}
.hogo-banner-area .banner-image {bottom: 0;}
.app_buttons { display: flex;align-items: center; gap: 2.5rem; flex-wrap: wrap;}
.app_button_com {width: fit-content;border-radius: 0.3rem; padding: 1.3rem 2.5rem; overflow: hidden; background: var(--black-100); transition: var(--transition);}
.app_button_com:hover {background: var(--red);}

.hogo-banner-area .banner-content-block > *,
.hogo-banner-area .app_button_com {
  opacity: 0;
  transform: translateX(-50px);
}

.hogo-banner-area .banner-image-wrap {
  opacity: 0;
  transform: translateX(50px);
}
.hogo-banner-area .app_buttons {
  transform: translateX(-50px);
  /* DO NOT set opacity:0 on the wrapper */
}

.how-it-works{padding-top: 13rem;}
.how-it-works .com_heading_sec{margin-bottom: 7.5rem; text-align: center;}
.how-it-works .com_heading_sec .com_heading { color: var(--black-100); line-height: 7rem; font-weight: 600; margin-bottom: 4rem;}
.how-it-works .com_heading_sec .com_heading_content p { color: var(--black);}


.how-work-area{position: relative; border-radius: 2rem; background: rgba(255, 234, 216, 32%); padding: 8rem 15rem 6rem 10rem;}
.hogo-side-logo{position: absolute; top: 50%; transform: rotate(-90deg) translateY(-50%); right: -9rem; opacity: 0.2;}
.how-it-work-content{display: flex; gap: 4rem;width: 100%;}

.how-work-head{text-align: center; color: var(--black-100); font-size: 4.8rem; font-weight: 600;line-height: 5.4rem;margin-bottom: 9rem;}
.how-work-area .short-text { color: var(--black); font-size: 2.2rem; font-weight: 400; line-height: 3.4rem; margin-bottom: 2.5rem;}


.how-work-area .left-area , .how-work-area .right-area{width: 50%;}
.how-image-area {padding-right: 7.4rem; position: relative; z-index: 1;}
.how-image-area .bottom-image{position: relative; z-index: -1; margin-top: -18rem; margin-left: auto;}
.how-image-item{ width: fit-content; height: fit-content; border-radius: 0.8rem; overflow: hidden; background: rgba(0, 0, 0, 0.00); box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 0.25);}
.how-image-item img{width: 100%; height: 100%; object-fit: cover;}

.how-work-area .right-area{padding-left: 5rem; position: relative;}
.how-work-area .right-area::after{position: absolute;content: "";top: 0; left: 0; width: 0.1rem; height: 100%; border-left: 0.2rem dashed #E5E7EB;}
.right-area-item{display: flex;align-items: flex-start; gap: 3.2rem;}
.right-area-item:not(:last-of-type){margin-bottom: 5.5rem;}
.right-area-item .side-icon{width: 5.6rem;}
.right-area-item .content-box{width: calc(100% - 9rem);}
.right-area-item .top-text{ color: var(--black-100); font-size: 2.4rem; font-weight: 600; line-height: 3rem; margin-bottom: 1rem;}
.right-area-item .bottom-text{ color: var(--black); font-size: 2.2rem; font-weight: 400; line-height: 3rem;}

.how-work-area .button-wrap{text-align: center; margin-top: 6rem;}
.how-work-area .button-wrap .button_com{ padding: 0.8rem 2.6rem; font-weight: 400;}

.benifits-area{padding-top: 13.5rem; position: relative;}
.benifits-area::after{position: absolute;content: "";top: 0;left: 50%; transform: translateX(-50%); width: 98.7rem; height: 98.7rem; border-radius: 987px;
background: linear-gradient(180deg, rgba(255, 248, 242, 0.15) 0%, rgba(226, 170, 123, 0.15) 100%);filter: blur(75px); z-index: -1;}
.benifits-heading{margin-bottom: 7.5rem; padding: 0 6rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 5rem; overflow: hidden;}
.benifits-subhead{display: inline-block; color: var(--red);font-size: 3.2rem;font-weight: 600;line-height:3.2rem; text-transform: uppercase;}
.benifits-head{color: var(--black-100);font-size: 6.5rem;font-weight: 600;line-height:7rem;}
.right-text p{max-width: 88rem; font-size: 2.2rem; font-weight: 400; line-height: 3rem; color: var(--black);}

.benefits-slide-wrap .benifitsSlider{padding:  0 5.4rem;}
.benefits-prev{left: 5rem;}
.benefits-next{right: 5rem;}
.benefits-loop figure{overflow: hidden;padding: 2rem;}
.benefits-loop figure img{display: block; width: 100%; height: 100%; margin: 0 auto; transition: var(--transition);}
.benefits-loop figure:hover img{transform: scale(1.05);}

.app-download-area{padding: 13.5rem 0; border-bottom: 0.1rem solid var(--white-400); overflow: hidden;}
.overlay-bg{border-radius: 2rem;background: rgba(255, 234, 216, 0.32); padding-top: 5.5rem;}
.app-download-inner{margin-left: 10rem;}
.app-download-inner .com_heading_sec { margin-bottom: 2.8rem;  max-width: 60rem; }
.app-download-inner .com_heading_sec .com_heading{color: var(--black-100); line-height: 7rem; }
.app-download-inner .com_heading_sec .com_heading_content p{color: var(--black); font-size: 2rem;}
.app-download-inner .app_buttons{margin-top: 6.5rem;}




















/********************* Mobile Menu ************************ */
#menu-toggle {display: none;padding: 0.4rem 0.5rem; background: transparent; border: none; border-radius: 6px;cursor: pointer;  z-index: 1001;position: relative; transition: var(--transition);}
#menu-toggle span{display: block; width: 2rem; height: 0.3rem; background: var(--black); transition: var(--transition);}
#menu-toggle span:not(:last-of-type){margin-bottom: 0.4rem;}
#menu-toggle:hover span{background: var(--red); }
.site-header.sticky #menu-toggle span{background: var(--red);}
.site-header.sticky #menu-toggle:hover span{background: var(--white); }

#menu-toggle.hidden {opacity: 0;pointer-events: none;}

#mobile-menu {position: fixed;top: 0;right: -100%;width: 100%;height: 100vh;background: var(--white);z-index: 1000;transition: right 0.35s ease;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
#mobile-menu.open {right: 0;}
.mobile_menu_sec{display: none;}

.menu-header { width: 100%; height: 7.5rem; position: relative; padding: 2rem 1.6rem; background: transparent; display: flex; align-items: center; justify-content: flex-start; border-bottom: 0.1rem solid var(--red);}
.menu-header .menu-title { flex: 1;text-align: center;}
.close-btn,.back-btn {background: none;border: none;color: var(--red);font-size: 2.2rem;cursor: pointer;}

.menu-header .menu-title .site-logo{ display: inline-block;}
.menu-header .menu-title .site-logo .custom-logo-link{ display: inline-block; width: 10rem;}



.menu-panels {position: relative;width: 100%;height: calc(100dvh - 7.6rem); overflow-y: auto;display: flex;flex-direction: column; scrollbar-color: var(--blue-100) var(--white); scrollbar-width: thin;}
.mobilemenu-menu-container {flex: 1;height: 100%;overflow-y: auto;}

.menu-wrappers,.sub-menu {list-style: none;margin: 0;padding: 0;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: var(--white);overflow-y: auto;overflow-x: hidden;transform: translateX(100%);transition: transform 0.35s ease;z-index: 1;pointer-events: none;visibility: hidden;}
.menu-wrappers.active,.sub-menu.active {transform: translateX(0%);z-index: 3;pointer-events: auto;visibility: visible;box-shadow: -4px 0 10px rgba(0, 0, 0, 0.08);}

.menu-wrappers.previous,.sub-menu.previous {transform: translateX(0%);z-index: 2;pointer-events: none;visibility: hidden;}

.menu-wrappers li,.sub-menu li { display: flex; align-items: center; justify-content: space-between;}
.menu-wrappers li:not(:last-of-type), .sub-menu li:not(:last-of-type) {margin-bottom: 1rem;}
.menu-wrappers li a,.sub-menu li a {display: block;padding: 1.6rem 1rem;color: var(--black);text-decoration: none;font-size: 1.6rem; font-weight: 600; line-height: 2.2rem;  position: relative; z-index: 1;flex-grow: 1; transition: var(--transition);}
 .menu-wrappers li a:hover,.sub-menu li a:hover,.menu-wrappers li.current-menu-ancestor a, .menu-wrappers li.current-menu-item a, .sub-menu li.current-menu-item a:hover {color: var(--red);}

.menu-wrappers li a:hover::after,.sub-menu li a:hover::after,.menu-wrappers li.current-menu-ancestor a::after, .menu-wrappers li.current-menu-item a::after, .sub-menu li.current-menu-item a:hover::after {width: 100%;}
.menu-wrappers li.current-menu-ancestor .sub-menu li a:hover::after, .menu-wrappers li.current-menu-ancestor .sub-menu li.current-menu-item a::after{width: 100%;}

.sub-menu-toggle { width: 3rem; height: 3rem; border: 0.2rem solid var(--yellow__100); font-size: 1.8rem; line-height: 2rem; color: #999; cursor: pointer; background: none; margin-right: 1.6rem; border-radius: 0.4rem;}
.sub-menu-toggle:hover {background-color: #333; color: #fff;}
.menu-item-has-children > a::after {content: none !important;}