/*
CTC Separate Stylesheet
Updated: 2025-09-03 09:40:32
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1756892432
*/
body {
    text-transform: lowercase;
}
.header-cls {
  position: fixed;
  width: 100%;
  z-index: 11;
}
.header-video-cls {
    margin: 0 !important;
}
/* keep your wrappers the same; just ensure they don't clip the line */
.banner-line-right,
.banner-line { position: relative; display: inline-block; overflow: visible; }

/* RIGHT line: grow from TOP to BOTTOM */
.banner-line-right::before{
  content:"";
  position:absolute;
  left:12.8px;
  bottom:200px;              /* your original anchor */
  width:17px;
  height:500px;              /* final height */
  background:#fff;

  /* animation (hidden → fill down) */
  transform-origin: top center;   /* grow downward */
  transform: scaleY(0);
  opacity: 0; visibility: hidden;
  transition:
    transform 3s cubic-bezier(0.860,0.000,0.070,1.000),
    opacity   .6s ease-in-out;
}

/* TOP title line: grow from BOTTOM to TOP */
.banner-line::before{
  content:"";
  position:absolute;
  right:36px;
  top:90%;                   /* your original anchor */
  width:17px;
  height:329px;              /* final height */
  background:#fff;

  /* animation (hidden → fill up) */
  transform-origin: bottom center; /* grow upward */
  transform: scaleY(0);
  opacity: 0; visibility: hidden;
  transition:
    transform 3s cubic-bezier(0.860,0.000,0.070,1.000),
    opacity   .6s ease-in-out;
}

/* trigger when parent gets .in-view */
.heading-animated.in-view .banner-line-right::before{
  transform: scaleY(1);
  opacity: 1; visibility: visible;
}
.heading-animated.in-view .banner-line::before{
  transform: scaleY(1);
  opacity: 1; visibility: visible;
}

.header-manu-list-cls {
  position: absolute;
  bottom: 30px;
  z-index: 8;
}

.header-manu-list-cls .elementor-column-gap-default {
  gap: 100px;
}

.header-manu-list-cls .elementor-button {
	padding: 12px 0px !important;
}


/* parent + tunables (edit heights to your needs) */
.heading-animated{
  --line-after-height: 500px;   /* final height for .line-after-banner */
  --title-line-height: 329px;   /* final height for .vis-title-line */
}

/* keep anchors the same, and avoid clipping */
.heading-animated .line-after-banner,
.heading-animated .vis-title-line{
  position: relative;
  display: inline-block;
  overflow: visible;
}

/* Black line (bottom area) — GROW from TOP to BOTTOM */
.heading-animated .line-after-banner::before{
  content:"";
  position:absolute;
  right:8px;
  bottom:140px;                     /* your original anchor */
  width:17px;
  height:var(--line-after-height);
  background:#000;

  /* start hidden + collapsed, grow downward */
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0; visibility: hidden;
  transition:
    transform 3s cubic-bezier(0.86,0,0.07,1),
    opacity   .6s ease-in-out;
}

/* Red line (near title) — GROW from BOTTOM to TOP */
.heading-animated .vis-title-line::before{
  content:"";
  position:absolute;
  right:7px;
  top:85%;                          /* your original anchor */
  width:17px;
  height:var(--title-line-height);
  background:#B42528;

  /* start hidden + collapsed, grow upward */
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0; visibility: hidden;
  transition:
    transform 3s cubic-bezier(0.86,0,0.07,1),
    opacity   .6s ease-in-out;
}

/* trigger: when parent is in view -> reveal & fill */
.heading-animated.in-view .line-after-banner::before,
.heading-animated.in-view .vis-title-line::before{
  transform: scaleY(1);
  opacity: 1; visibility: visible;
}




/* parent scope */
.heading-animated { --shift: 160px; position: relative; }

/* inline containers */
.heading-animated .line-title-sec,
.heading-animated .line-title-sec-bottom{
  position: relative;
  display: inline-block;
}

.red{ color: var(--e-global-color-secondary); }

/* TOP line: slides DOWN into place */
.heading-animated .line-title-sec::before{
  content:"";
  position:absolute;
  right:10px;
  top:-132px;            /* final anchor */
  width:8px;
  height:100%;
  background:#000;
  display:block;

  /* start above, then move down */
  transform: translateY(calc(var(--shift) * -1));
  transition: transform 1.4s cubic-bezier(0.86,0,0.07,1);
}

/* BOTTOM line: slides UP into place */
.heading-animated .line-title-sec-bottom::before{
  content:"";
  position:absolute;
  left:12px;
  bottom:-130px;         /* final anchor */
  width:8px;
  height:100%;
  background: var(--e-global-color-secondary);
  display:block;

  /* start below, then move up */
  transform: translateY(var(--shift));
  transition: transform 1.4s cubic-bezier(0.86,0,0.07,1);
}

/* trigger state */
.heading-animated.in-view .line-title-sec::before,
.heading-animated.in-view .line-title-sec-bottom::before{
  transform: translateY(0);
}



/* colors (yours) */
.red-title { color:#B82227; }
.color-gray { color:#717171; }

/* add this class to the HEADING widget wrapper (Elementor → Advanced → CSS Classes) */
.heading-animated .about-left,
.heading-animated .about-right { position:relative; }

/* distance the line will travel before it settles */
.heading-animated { --shift: 160px; }  /* tweak this number */

/* TOP red line: starts higher, then slides DOWN into place */
.heading-animated .about-left:before{
  content:"";
  position:absolute;
  left:7px;
  bottom:105px;                 /* final anchor */
  width:9px;
  height:600px;                 /* your line length */
  background:#B82227;
  display:block;

  /* animation */
  transform: translateY(calc(var(--shift) * -1));   /* start above */
  transition: transform 3s cubic-bezier(0.860,0.000,0.070,1.000);
}

/* BOTTOM grey line: starts lower, then slides UP into place */
.heading-animated .about-right:before{
  content:"";
  position:absolute;
  right:9px;
  top:105px;                    /* final anchor */
  width:7px;
  height:600px;                 /* match the visual length you want */
  background:#717171;
  display:block;

  /* animation */
  transform: translateY(var(--shift));              /* start below */
  transition: transform 3s cubic-bezier(0.860,0.000,0.070,1.000);
}

/* When the section is in view → run the move */
.heading-animated.in-view .about-left:before,
.heading-animated.in-view .about-right:before{
  transform: translateY(0);
}



/* wrapper clips the zoom so it stays inside */
.zoom-loop { position: relative; overflow: hidden; display: block; }

/* animate only the <img> */
.zoom-loop img{
  display:block;
  width:100%; height:100%;           /* keeps it filled */
  object-fit:cover;
  transform-origin:center;
  will-change:transform;
  animation: zoom-in-out 8s ease-in-out infinite;
}

@keyframes zoom-in-out{
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }   /* tweak amount */
  100% { transform: scale(1); }
}


.button-circle-cls .elementor-widget-container:after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 100px;
    right: -19px;
	top:-38px;
    border: 1px solid #B42528;
    z-index: -1;
    background-repeat: no-repeat;
}

.margin-last-child-cls .elementor-widget-image {
    margin: 0px !important;
}

.blog-details-inner-cls h2 {
    font-size: 42px;
    font-weight: 300;
    line-height: 50px;
    text-transform: capitalize;
}
.blog-details-inner-cls h3{
    color: var(--e-global-color-primary);
	font-size: 32px;
    font-weight: 300;
    line-height: 40px;
    text-transform: capitalize;
}
.blog-details-inner-cls p, .blog-details-inner-cls ul {
    text-transform: Initial;
    margin-bottom: 15px;
}
.blog-details-inner-cls table {
    text-transform: Initial;
}

 /*==== Media 768px Start ====*/

@media (max-width: 768px){
.header-manu-list-cls {
	bottom: 7px !important;
	padding: 0px 5px 0px 5px !important;
}
.header-manu-list-cls .elementor-button {
    padding: 0px 0px !important;
}
.header-manu-list-cls .elementor-column-gap-default span {
    font-size: 16px;
	line-height: 18px;
}
}

 /*==== Media 768px Close ====*/

/*==== Media 480px Start ====*/
  
 @media (max-width: 480px) {
.header-banner-cls{
	top: 80px !important;
}
.header-banner-cls h1.elementor-heading-title {
    font-size: 35px !important;
    line-height: 40px !important;
}
.header-manu-list-cls .elementor-column-gap-default span {
	font-size: 14px;
	color: #fff;
	line-height: 15px;
	font-weight: 400;
}
.header-manu-list-cls .elementor-button {
	padding: 0px 0px 4px !important;
}
.header-manu-list-cls .elementor-element-populated {
    border-color: #fff !important;
}
}

 /*==== Media 480px Close ====*/