/*
Theme Name: Zotech
Author: ModinaTheme
Author URI: https://themeforest.net/user/modinatheme/
Description: IT Solutions & Technology HTML Template
Version: 1.0.0
*/

/* Romex Ai text logo mark */
.romex-logo-text {
  font-family: "Montserrat", serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: #000D27;
  letter-spacing: -0.5px;
  display: inline-block;
  white-space: nowrap;
}
.romex-logo-text .accent {
  color: #3FB5FD;
}
.footer-wrapper .romex-logo-text {
  color: #000D27;
}

/* Why-choose animation: 96 transparent PNG frames played as a flipbook. Real
   alpha means the subject is opaque and IN FRONT, the tech circle shows through
   the transparent gaps behind him, and the full frame can be scaled up without
   a white box, bleed-through, holes or flicker. Scaled past the column width so
   he's large; the transparent side-margins spill harmlessly and never cover
   the text (his own pixels stay within the column). */
.choose-us-1 .choose-us-images {
  height: auto;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  /* hidden + shifted left until scrolled into view, then slides in */
  opacity: 0;
  transform: translateX(-140px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  will-change: opacity, transform;
}
.choose-us-1 .choose-us-images.in-view {
  opacity: 1;
  transform: translateX(0);
}
.choose-us-1 .choose-us-images .why-choose-gif {
  position: relative;
  z-index: 2;
  width: 340%;
  max-width: none;
  height: auto;
  object-fit: contain;
  mix-blend-mode: normal;
  transform: translate(50px, -10px);
}
@media (max-width: 991px) {
  .choose-us-1 .choose-us-images .why-choose-gif {
    transform: translate(0, 0);
  }
}
@media (max-width: 991px) {
  .choose-us-1 .choose-us-images .why-choose-gif {
    width: 130%;
  }
}
/* guard against a horizontal scrollbar from the transparent overflow
   (clip, not hidden, so it doesn't become a scroll container) */
.choose-us-wrapper {
  overflow-x: clip;
}

/* features-1: cards now hold variable-length bullet lists, so replace the
   theme's fixed 373px height with an auto height. Stretch every card in a row
   to match the tallest one via flex so they stay visually aligned. */
.features-1 .row {
  display: flex;
  flex-wrap: wrap;
}
.features-1 .row > [class*="col-"] {
  display: flex;
}
.features-1 .single-feature-item {
  height: auto;
  width: 100%;
}

/* about-2: keep the circle only on the icon link, not the email text link
   (the theme's .contact-us a rule was turning the email into a stray circle) */
.about-2 .about-content .infu .contact-us .text a {
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  display: inline;
  font-size: inherit;
  color: var(--white);
}

/*
=================================
|***    Table of contents:   ***|
=================================

Main Style file-> assets/css/main.css 

All the SCSS File in SCSS Folder of Assets Folder. You can read the doc file also for better understand.

// BASIC
@import 'basic';

// MIXIN
@import 'variables';

// TYPOGRAPHY
@import 'typography';

// MIX
@import 'mix';

// HELPER
@import 'helper';

// ICON FONTS
@import 'icon';

// ANIMATION
@import 'animation';

// Button 
@import 'btn';

// Colors 
@import 'colors';

// Preloader 
@import 'preloader';

/* ----------------------------------
    Template Section Styles
 ------------------------------------*/

 /* // Menu - Header Section 
 @import 'header';
 
 // Hero Slide - Section 
 @import 'hero';
 
 // Section Title - Heading 
 @import 'section';
 
 // About - Section 
 @import 'about';
 
 // Features - Section 
 @import 'features';
 
 // services - Section 
 @import 'services';
 
 // testimonial - Section 
 @import 'testimonial';
 
 // Portfolio - Cases - Section 
 @import 'project';
 
 // Price Table - Section 
 @import 'price';
 
 // Call To Action - Section 
 @import 'cta';
 
 // Content Block - Section 
 @import 'contentblock';
 
 // team - Section 
 @import 'team';
 
 // funfact - Section 
 @import 'funfact';
 
 // Download - Section 
 @import 'carousel';
 
 // FAQ - Section 
 @import 'faq';
 
 // Blog - Section 
 @import 'blog';
 
 // Contact Us - Section 
 @import 'contact';
 
 // footer - Section 
 @import 'footer';n facts */