/* Custom CSS for Tecno Meccaniche Moderne */
/* Color Palette:
   - Primary Accent (Steel Blue): #36648B
   - Dark (Anthracite): #293133
   - Light (Steel Gray): #E8EEF2
   - Text (Cool Gray): #5A6772
*/

body {
   color: #5A6772;
}

header .header-nav .navbar-nav .nav-link.show,
header .header-nav .navbar-nav .nav-link.active,
header .header-nav .navbar-nav .nav-link:hover {
    color: #8bb5d9;
}

/* Add any specific overrides here that aren't covered by the global replace */
.header-logo{
   position: absolute;
   padding: 10px;
   background-color: #fff;
   border-radius: 4px;
   margin-top: -56px;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

   img{
      max-height: 100px;
   }

}
.header-top{
	a:hover {
		color: #7db5d9;
	}
}
.footer-top-left{
   display: inline-block;
   padding: 10px;
   background-color: #fff;
   border-radius: 4px;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

   img{
      width: auto;
      max-height: 130px;
   }
}


.navbar-sticky-in{
   background: #293133e3;  
}

footer a:hover{
   color: #ffffff99;
   text-decoration: underline;
}

/* AOS (Animate On Scroll) Custom Styles */
/* Custom duration and easing for AOS animations */
[data-aos] {
    transition-duration: 0.8s;
    transition-timing-function: ease-out;
}

/* Hover effects for service boxes */
.service-box, .service-detail-box, .partner-box, .contact-info-box, .specialization-box {
    transition: all 0.3s ease;
}

.service-box:hover, .partner-box:hover, .specialization-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.service-detail-box:hover {
    background-color: #f8f9fa;
}

.contact-info-box:hover {
    background-color: #e9ecef;
}

/* Image hover effects */
.experience-images img, .intro-image img, .office-image img, .partner-image img, .opportunities-image img {
    transition: transform 0.3s ease;
}

.experience-images img:hover, .intro-image img:hover, .office-image img:hover, .partner-image img:hover, .opportunities-image img:hover {
    transform: scale(1.05);
}

/* Progress bar animation */
.progress-bar {
    width: 0 !important;
    transition: width 1.5s ease-in-out;
}

.progress-bar.animate {
    width: var(--progress-width) !important;
}

/* Counter animation */
.counter {
    font-weight: bold;
    color: #36648B;
}

/* Pulse animation for icons */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.pulse-icon {
    animation: pulse 2s infinite;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Loading animation for form submission */
.btn-loading {
    position: relative;
    color: transparent !important;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

 
@media (min-width: 992px) {
    
    .service-detail-box img{
        margin-top: -50px;
        
    }
}

.service-detail-box img{ 
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

section{
    overflow: hidden;
}

.contact-info-box a{
    color: #000;
}
.company-details a{
	color: #5A6772;
}
@media (max-width: 1180px) {
	.header-nav-menu{
		background-color: #fff;
	}
	.header-nav-inner {
        padding-top: 50px !important;
    }
	.slicknav_btn.slicknav_open:before, .slicknav_btn.slicknav_collapsed:before{
		color: #3b4d72;
	}
}
@media (max-width: 767px) {

    .header-logo{
        margin-top: -26px;
    }

    section, .section-padding{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    .breadcrumb{
        margin-top: -40px;
        height: 200px;

        .breadcrumb-inner{
            margin-top: 140px !important;
        }

        .position-absolute{
            position: relative !important;
            transform: none !important;
            left: 0 !important;
            top: 0 !important;
        }
    }
	.slick-slide{
		.btn-secondary{
			margin-bottom: 20px;
		}
	}
}

.service-box h3{
	display: block;
	min-height: 65px;
}

.credits_link{
 color: #38B5E6 !important;
 font-weight: 700;
 font-family: sans-serif;
}

.credits_link:hover{
 color: #fff !important;
}

 .credits_link:before{
  content: "";
  vertical-align: middle;
  width:16px;
  height: 16px;
  display: inline-block;
  margin-right: 5px;
  margin-left: 5px;
  background-image: url(https://www.clion.it/favicon-96x96.png);
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  background-position: center center;

  transition: all 450ms ease;
 }

  .credits_link:hover:before{
   transform: rotateZ(360deg) rotateY(360deg);
  }

@media (max-width: 576px) {

    .slide .banner-info{
        padding-top: 90px !important;
    }
    
}