.navbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
   z-index: 4;
    display: flex;
    transition: background-color 0.3s ease;
    
}
@media only screen and (max-width: 769px){
    h1 { font-size: 32px!important; line-height: 1.2; }
    h2 { font-size: 28px!important;; line-height: 1.3; }
    h3 { font-size: 24px!important;; line-height: 1.4; }
    h4 { font-size: 20px!important;; line-height: 1.5; }
    h5 { font-size: 18px!important;; line-height: 1.5; }
    h6 { font-size: 16px!important;; line-height: 1.6; }

}
.navbar.scrolled {
    background-color: #000000 !important; 
    
}
@media screen and (min-width:1024px) and (max-width:1366px) {
    .column-about-us{
        grid-template-columns: 1fr 1fr!important;
    }
}
@media screen and (min-width:1024px) and (max-width:1180px) {
.image-column-content{
width:70vw!important;
height: 70vh!important;
}
}
@media screen and (min-width:1280px){
    .image-column-content,
    .image-column-content img{
        width: 53vw;
        height: 100vh;
        padding-top: 0!important;
    }
}

@media screen and (min-width:390px) and (max-width:1024px) {
.column-about-us-page-left{
padding-left: 2rem!important;
}
}
@media screen and (min-width:390px) and (max-width:1024px) {
.column-about-us-page-left{
flex-basis: 50%!important;
padding: 0;
}
}
@media screen and (min-width:1280px){
.stack-left-about-us-page,
.stack-left-about-us-page img{

    width: 100vw;
    left: 50%;
    height: 100vh;
    padding-top: 0!important;
}
}
@media screen and (min-width:390px) and (max-width:1024px) {
.image-stack-column-about img{
height: 100%!important;
}
}
@media screen and (min-width:1024px) and (max-width:1366px) {
    .image-stack-column-about img{
    height: 68vh!important;
    }
    }
    
.main{
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.reveal {
    opacity: 0; 
    transform: translateY(50px); 
    transition: opacity 1s ease, transform 1s ease; 
  }
  .reveal.show {
    opacity: 1;
    transform: translateY(0);
  }



.overlay {
    margin: 0;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.432) 33%, rgba(0, 0, 0, 0.363) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
   
}
.hero-section{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 2;
    
}

.background-hero{
    position: absolute;
    top: 0;
    left: 0;
    width: 160%;
    height: 100%;
    object-fit: cover; 
    z-index: -1;
    transform: translateX(-30%);
    

}
.marquee-container {
  overflow: hidden;
  position: relative;
}

.marquee {
  display: flex;
  width: max-content;
}

.marquee-top {
  animation: scroll-right 20s linear infinite;
 
}

.marquee-bottom {
  animation: scroll-left 20s linear infinite;
}

@keyframes scroll-right {
  0% { transform: translateX(-45%); }
  100% { transform: translateX(0%); }
}

@keyframes scroll-left {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-45%); }
}
.zoom {
    transition: transform 0.7s ease;
}

.zoom:hover {
    transform: scale(1.1);
    cursor: pointer;
}


@media screen and (min-width:768px) and (max-width:1366px) {
.column-ourmission{
display: grid!important;
grid-template-columns: 1fr 1fr!important;
gap: 25px;
}

}

@media screen and (min-width:390px) and (max-width:767px) {
.slide-section{
 height: 108vh!important;

}

.swiper-wrapper,
.swiper-slide{
    display: flex!important;
    width: 99%!important;
    gap: 10px;
    right: 0;
    height: 70%!important;
}
.swiper-button-prev{
  top: 77%!important;
  right: 55%!important;
}
.swiper-button-next{
    top: 77%!important;
    left: 80%!important;
}
}
@media screen and (min-width:1024px) and (max-width:1366px) {
    .swiper-wrapper-custom,
    .slide-custom{
        display: flex!important;;
        width: 100%;
        height: 100%!important;
        gap: 0;
        
        
    }
}

@media screen and (min-width:390px) and (max-width:1366px) {
.swiper-pagination {
   
    width: 10px!important;
    top: 250px !important;
}
}

@media screen and (min-width:390px) and (max-width:767px) {
    .swiper-wrapper-custom,
    .slide-custom{
        display: flex!important;
        width: 100%!important;
        height: 100%!important;
        gap: 0;
        left: 0;
        
    }
}

@media screen and (min-width:768px) and (max-width:1023px) {
    .slide-section{
     height: 85vh!important;
    
    }
    .swiper-wrapper,
    .swiper-slide{
        flex: 0 0 auto;
        width:72%;
        gap: 10px;
        
    }
    .swiper-slide img{
        display: block;
        width:50%;
        height: auto;
        object-fit: cover;
        border-radius: 20px;
    }
    .swiper-button-prev{
      top: 85%!important;
      right: 55%!important;
    }
    .swiper-button-next{
        top: 85%!important;
        left: 75%!important;
    }
    }
    @media screen and (min-width:1024px) and (max-width:1366px) {
        .slide-section {
          height: 85vh !important;
        }
      
        .swiper-wrapper,
        .swiper-slide {
          display: flex !important;
          flex: 0 0 auto;
          width: 60%;
          gap: 10px !important;
          
     
        }
      
        .swiper-slide img {
          display: block !important;
          width: 100% !important;
          height: auto !important;
          object-fit: cover !important;
          border-radius: 20px !important;
        }
      
        .swiper-button-prev {
          top: 77% !important;
          right: 55% !important;
        }
      
        .swiper-button-next {
          top: 77% !important;
          left: 80% !important;
        }
      }
      

@media screen and (min-width:768px) and (max-width:1366px) {
.ourmission-left{
    display: flex;
align-items: center;
}
}
@media screen and (min-width:768px) and (max-width:1366px) {
.stack-of-grid{
padding-left: 7%!important;
}
}
@media screen and (min-width:390px) and (max-width:767px) {
.team-grid{
    display: grid;
    grid-template-columns: 1fr!important;
}
}
@media screen and (min-width:768px) and (max-width:1180px) {
.team-grid{
        display: grid;
        width: 100%!important;
        grid-template-columns: 1fr 1fr 1fr!important;
}    
}

@media screen and (min-width:390px) and (max-width:1023px) {
.button-contact-us {
    display: none!important;
}
}

@media screen and (min-width:390px) and (max-width:1366px) {
.column-left-contact-home,
.column-right-contact-home{
padding: 0!important;


}
}
@media screen and (min-width:390px) and (max-width:1366px) {
.column-left{
    padding-top: 12vh!important;
}
}
@media screen and (min-width:390px) and (max-width:767px) {
.row-title-prices,
.row-recent-services {
    width: 100%;
    flex-flow: column!important;
    text-align: center;

}
}
@media screen and (min-width:820px) and (max-width:1180px) {
.row-basic-pricing{
width:400px;
}
}
@media screen and (min-width:768px) and (max-width:1355px) {
    .row-title-prices,
    .row-recent-services  {
        width: 100%;
  
       
    
    }
    }
@media screen and (min-width:768px) and (max-width:767px) {
.p-prices{
text-align: center!important;
}
}
@media screen and (min-width:390px) and (max-width:1366px) {
    .background-hero video{

     vertical-align: middle;
        width:100%;
        object-fit: cover;
        height:100vh;
    }
}

@media screen and (min-width:390px) and (max-width:1366px) {
    .contact-form{

     padding: 0px;
   
    }
}
@media screen and (min-width:390px) and (max-width:1366px) { 
    .submit-btn{
        width:30vw;
    }
}
@media screen and (min-width:390px) and (max-width:1366px) {
    .ourvalues-grid{
        padding: 0!important;
        grid-template-columns: 1fr!important;
    }
    
}
@media screen and (min-width:1024px) and (max-width:1366px) {
.creanova-footer{
    font-size: 12rem!important;
}
}
@media screen and (min-width:390px) and (max-width:767px) {
    .creanova-footer{
        font-size: 4.7rem!important;
    }
    }
@media screen and (min-width:390px) and (max-width:1366px) {
    .creanova-footer-r{
        font-size: 2rem!important;
    }
    }
@media screen and (min-width:390px) and (max-width:1366px) {
    .links-footer-wrap{
        gap:30px!important;
        grid-template-columns: 1fr!important;
    }
}
@media screen and (min-width:390px) and (max-width:767px) {
.image-column-content {

    width: 100%!important;
    height: 46vh!important;
    overflow: hidden;
}
}
@media screen and (min-width:768px) and (max-width:1366px) {
    .image-column-content {
    
        width: 100%;
        height: 55vh!important;
        overflow: hidden;
}
}
@media screen and (min-width:1181px) and (max-width:1366px) {
.stack-left-about-us-page{
    width: 70vw !important;
    height: 70vh !important;
}
}
@media screen and (min-width:1280px){
.image-column-content2{
    width: 70vw !important;
    
}
}
@media screen and (min-width:1280px){
.row-title-prices p mark{
    color:#FA962C!important
}
}
@media screen and (min-width:390px) and (max-width:1366px) {
.row-custom-about-2,
.row-custom-about-2 figure img{
min-width:100px;
width:100%;

}
}
@media screen and (min-width:390px) and (max-width:1366px) {
.button-about{
    align-items: normal;
}
}
@media screen and (min-width:390px) and (max-width:819px) {
.team-about-us-wrapper{
    grid-template-columns: 1fr 1fr!important;
}
}



@media screen and (min-width:820px) and (max-width:1023px) {
.column-about-us{
    display: grid!important;
}
        
}

@media screen and (min-width:1024px) and (max-width:1366px) {
.column-about-us{
height: 70vh;
}
}  
@media screen and (min-width:1280px){
    .column-right-about {
        height: 73vh!important;
    }
}
@media screen and (min-width:1024px) and (max-width:1023px) {
.image-stack-column-about,
.image-stack-column-about img{
height: 70vh;
}
}

.arrow-button {
  
border-radius: 40px;
position: relative;
cursor: pointer;
transition: transform 0.4s ease;
  
}
  
.arrow-button:hover {
background-color: #2C57FA; 
transform: rotate(80deg);
    
}
.heading-effect{
    position: relative;
    cursor: pointer;
    transition: color 0.3 ease;
}

.column-container-services:hover .heading-effect{
    color: #FA962C!important;
}
.column-container-services:hover .arrow-button{
    background-color: #2C57FA; 
}
.column-container-services:hover .arrow-button {
    transform: rotate(80deg); 
}



.about-image img {

    animation: girar 40s linear infinite;
}

@keyframes girar {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.footer{
    position: relative;
   
}
.footer-wrapper{
    position: absolute;
    z-index: 5;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
   
}

.container{
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem!important;
    padding-bottom: 2rem;
}
@media screen and (min-width:390px) and (max-width:1366px) {
.float-p{
    display: none!important;
}
}
@media screen and (min-width:390px) and (max-width:1366px) {
.stack-container-columns-services-portfolio{
padding-top: 12vh!important;

}
}
@media screen and (min-width:390px) and (max-width:1366px) {
.ourvalues-grid-services{
grid-template-columns: 1fr!important;
}
}
@media screen and (min-width:390px) and (max-width:767px) {
.image-column-right-portfolio img{
 width: 100vw;

}
}
@media screen and (min-width:768px) and (max-width:1366px) {
.column-primary-portfolio{
display: grid!important;
grid-template-columns: 1fr 1fr;
}
}

@media screen and (min-width:390px) and (max-width:1366px) {
.openpositions-grid{
    grid-template-columns: 1fr;
}
}
@media screen and (min-width:390px) and (max-width:767px) {
.row-sectionblue{
display: grid!important;
grid-template-columns: 1fr;
}
}
@media screen and (min-width:390px) and (max-width:1366px) {
.row-image-about figure{
width: 29%!important;
}
}
@media screen and (min-width:390px) and (max-width:1366px) {
.grid-stack-team {
    width:180px;
}
}
@media screen and (min-width:390px) and (max-width:768px) {
.testimonials-grid {
display: grid!important;
grid-template-columns: 1fr!important;
}
}
@media screen and (min-width:390px) and (max-width:1366px) {
.grid-four-backgroundblue{
    width:100%;
    
}
}
@media screen and (min-width:390px) and (max-width:768px) {
.row-sectionblue{
justify-content: center;
text-align: center;
align-items: center;
}
}

@media screen and (min-width:390px) and (max-width:767px) {
.paragraph-custom{
    font-size:1rem!important;

}
.paragraph-custom2{
    font-size:1.3rem!important;

}
.paragraph-18{
    font-size: 1.3rem!important
}
.paragraph-18-custom{
    font-size:1.5rem!important
}
}
.heading-custom-h2{
    font-size:2rem!important;
}
.heading-custom{
    font-size:3rem!important;
}

.heading-custom-h3{
    font-size:3.5rem!important
}

@media screen and (min-width:390px) and (max-width:1366px) {
.heading-custom-h4{
    font-size: 3.5rem!important;
}
}

@media screen and (min-width:768px) and (max-width:1366px) {
    .paragraph-custom{
        font-size:1.5rem!important;
    
    }
    .paragraph-custom2{
        font-size:1.3rem!important;
    
    }
    .paragraph-18{
        font-size: 1.8rem!important
    }
    .paragraph-18-custom{
        font-size:1.7rem!important
    }
    }
    .heading-custom-h2{
        font-size:2rem!important;
    }
    .heading-custom{
        font-size:3.5rem!important;
    }
    
    .heading-custom-h3{
        font-size:4rem!important
    }

@media screen and (min-width:768px) and (max-width:1366px) {
.columns-portfolio{
display: grid!important;
grid-template-columns: 1fr 1fr;

}
}





@media screen and (min-width:768px) and (max-width:1366px) {
    .hero-section-responsive{
      height: 60vh;
    }
}
@media screen and (min-width:390px) and (max-width:767px) {
.hero-section{
padding-top: 10vh!important;
}
}
@media screen and (min-width:1280px)  {
.hero-section{
height: 107vh;
}
}
@media screen and (min-width:1280px)  {
    .overlay{
    height: 107vh;
    }
    }
@media screen and (min-width: 1280px) {
     .about-image {
        width: 100%;
        left: -3%;
        bottom: -8%;
        
}
}