
*{
    font-family: 'Poppins', sans-serif;
}

@media (max-width: 767px){
    video {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        width: 200%;
        height: 100%;
        z-index: -1000;
        background-color: black;
      }
    
    
      
    #initial-screen {
        justify-content: center;
        height: 100vh;
        text-align: center;
    }

    #logo-belive{
        width: 100%;
    }

    #navbarBelive{
        display:flex;
        justify-content: space-between;
        align-items:center;
        gap: 15rem;
    }

    #navbarContainer{
        justify-content: center;
    }

    #text-home{
        text-align: center;
        color: white;
        display: grid;
        font-size: 2rem;
        align-items: center;
        height: 50vh;
        font-family: 'Along Sans s2';
    }

    #text-home-2{
        text-align: center;
        font-weight: 700;
        font-size: 2.3rem;
    }

    mark {
        background-color: #FF009E;
        color: white;
        font-size: 1.5rem;
    }

    #arrow-icon{
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0;
    }

    #seta-home{
        /* margin-top: 5rem; */
        width: 5rem;
    }

    #our-services{
        padding: 1rem;
        background-color: white;
    }

    #our-services-icons{
        margin: 3rem 0 3rem 0 ;
    }

    #our-services-text{
        padding: 2rem 0 0 0 ;
        font-weight: 400;
        
    }

    #our-services-text > h3{
        font-size: 2rem;
        font-weight: 700;
    }
    
    .info-icon-service{
        text-align: center;
        opacity: 0;
		-webkit-transform: translateX(-40px);
			 -moz-transform: translateX(-40px);
				-ms-transform: translateX(-40px);
				 -o-transform: translateX(-40px);
						transform: translateX(-40px);
		-webkit-transition: all 0.6s ease-out;
			 -moz-transition: all 0.6s ease-out;
				-ms-transition: all 0.6s ease-out;
				 -o-transition: all 0.6s ease-out;
						transition: all 0.6s ease-out;
    }

    .info-icon-service.visible {
		opacity: 1;
		-webkit-transform: none;
			 -moz-transform: none;
				-ms-transform: none;
				 -o-transform: none;
						transform: none;
	}

    .info-icon-service > h4{
        font-weight: 700;
    }

    .info-icon-service > p{
        line-height: 1.2rem;
        

    }

    .icon-service{
        width: 8rem;
    }

    #clients-carousel{
        background-color: #D9D9D9;
    }


    .icon-slide{
        width: 15rem;
    }

  

    .swiper-slide{
        display: flex !important;
        justify-content: center !important;
    }
    .img-carousel{
        object-fit: contain;
        max-width: 15rem;
    }

    #our-partners{
        background-color: white;
        margin: 0;
    }

    #our-partners-container{
        padding-top: 2rem;
        text-align: center;
        font-size: 1.5rem;
        
        font-weight: 300;
        margin: 0;
    }

    #our-partners-button{
        display: grid;
        gap: 0;
        font-weight: 900;
    }


    #our-partners-button > p{
        margin: 0;
    }
    #rectangle{
        padding: 0.3rem 0 0  0.3rem;
        background-color: #FF009E;
    }
    #contact{
        background-color: black;
    }
    #contact-container{
        padding: 2rem
    }
    #contact-container > h3{
        color: #FF009E;
        font-weight: 700;
    }
    #contact-container > p{
        color: white;
        
        font-size: 0.7rem;
    }

    .form-control{
        background-color:rgba(0,0,0,0);
        color: white;
    
    }

    .form-label{
        color: white;
        
    }

    #btn-form{
        background-color: #FF009E;
        color: black;
        font-weight: 700;
        text-align: center;
        padding: 0 8.5rem 0rem 8.5rem ;
        margin-top: 2rem;
    }

    #footer{
        background-color: #FFCE00;
    }

    #footer-container{
        justify-items: center;
        display: grid;
        gap: 1rem;
    }
    #logo{
        display: flex;
        width: 12rem;
        margin-top: 0.5rem;
        justify-items: center;
    }
    
    #socials{
        justify-content: center;
    }

    #socials > p{
        color: black;
        
    }

    #icons-redes{
        display: grid;
        align-items: center;
        justify-content: center;
        
    }

    .icones{
        display: flex;
        justify-content: space-between;
        gap: 8rem;
    }
    
    .icon-rede{
        justify-content: center;
        text-align: center;
    }
    .icon-rede > p{
        text-align: center;
        
    }

    .icon-rede > svg{
        width: 3rem; 
    }
    #footer-contact{
        margin-top: 2rem;
        display: grid;
        justify-content: center;
    }
    .icon-footer-whatsapp{
        width: 5rem;
    }

    #whatsapp{
        text-align: center;
    }

    #whatsapp > p{
        
    }

    #phones{
        display: flex;
        justify-content: space-between;
        
        margin-top: 2rem;
        gap: 1rem;
    }

    #text-home-1{
        font-size: 2.3rem;
    }

    #logo-belive{
        width: 7rem;
    }

    .navbar-toggler{
        /* background-color: white; */
    }

    .swiper {
        height: 20rem;
        object-fit: contain;
      }

      .navbar-nav > li > a{
        color: white !important;
      }

      #navbarSupportedContent{
        text-align: center;
        font-size: 1rem;
      }

      .icon-footer{
        width: 3rem;
    }



}

@media (min-width: 1024px) {
video {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 200%;
    height: 100%;
    z-index: -1000;
    background-color: black;
  }

  #logo-belive{
    width: 6rem;
  }

  #initial-screen {
    justify-content: center;
    text-align: center;
}

  #text-home{
    margin-top: 2rem;
    text-align: center;
    color: white;
    display: grid;
    font-size: 3rem;
    align-items: center;
    height: 45vh;
    font-family: 'Along Sans s2';
    justify-content: center;
}

#text-home-2{
    text-align: center;
    font-weight: 700;
    font-size: 2rem;
}

mark {
    background-color: #FF009E;
    color: white;
    padding: 0.2rem 1rem 0.2rem 1rem;
    font-size: 2rem;
}


#seta-home{
    width: 5rem;

}

#arrow-icon{
    display: flex;
    justify-content: center;
}


#our-services{
    padding: 1rem;
    background-color: white;
}

#our-services-icons{
    margin: 3rem 0 3rem 0 ;
}

#our-services-text{
    padding: 2rem 0 0 0 ;
    font-weight: 400;
    
}

#our-services-text > h3{
    font-size: 2rem;
    font-weight: 700;
}

.info-icon-service{
    text-align: center;
    opacity: 0;
    -webkit-transform: translateX(-40px);
         -moz-transform: translateX(-40px);
            -ms-transform: translateX(-40px);
             -o-transform: translateX(-40px);
                    transform: translateX(-40px);
    -webkit-transition: all 0.6s ease-out;
         -moz-transition: all 0.6s ease-out;
            -ms-transition: all 0.6s ease-out;
             -o-transition: all 0.6s ease-out;
                    transition: all 0.6s ease-out;
}

.info-icon-service.visible {
    opacity: 1;
    -webkit-transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
}

.info-icon-service > h4{
    font-weight: 00;
}

.info-icon-service > p{
    line-height: 1.2rem;
    

}

.icon-service{
    width: 8rem;
}


#our-partners{
    background-color: white;
    margin: 0;
}

#clients-carousel{
    /* height: 55vh; */
    background-color: #D9D9D9;
}


#our-partners-container{
    padding-top: 2rem;
    text-align: center;
    font-size: 1.5rem;
    
    font-weight: 300;
}

#our-partners-button{
    display: grid;
    gap: 0;
    font-weight: 900;
}
.swiper-slide{
    display: flex !important;
    justify-content: center !important;
}


.swiper {
    width: 600px;
    height: 300px;
  }


#our-partners-button > p{
    margin: 0;
}

#contact{
    background-color: black;
}
#contact-container{
    padding: 2rem
}
#contact-container > h3{
    color: #FF009E;
    font-weight: 700;
}
#contact-container > p{
    color: white;
    
    font-size: 0.7rem;
}

.form-control{
    background-color:rgba(0,0,0,0);
    color: white;

}

.form-label{
    color: white;
    
}

#btn-form{
    background-color: #FF009E;
    color: black;
    font-weight: 700;
    text-align: center;
    margin-top: 2rem;
}

#footer{
    background-color: #FFCE00;
}

#socials{
    padding: 1rem;
}

#socials > p{
    color: black;
    
}

#icons-redes{
    display: flex;
    align-items: center;
    justify-content: space-between;
 
}

.icon-rede{
    justify-content: center;
    text-align: center;
}
.icon-rede > p{
    text-align: center;
    
}

.icon-rede > svg{
    width: 3rem; 
}
#footer-contact{
    display: grid;
    justify-content: center;
}
.icon-footer-whatsapp{
    width: 5rem;
}

#whatsapp{
    text-align: center;
}

#whatsapp > p{
    
}

#phones{
    display: flex;
    justify-content: space-between;
    
    margin-top: 1rem;
    gap: 1rem;
}

#contact-container{
    padding: 2rem;
}

#logo{
    width: 10rem;
}

#footer-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

#socials{
    display: flex;
    justify-content: space-between;
    gap: 8rem;
    align-items: center;
}

#icons-redes{
    display: grid;
    align-items: center;
}

#icons-redes > p{
    
}

.icon-footer-whatsapp{
    width: 4em;
}

.swiper {
    width: 600px;
    height: 300px;
  }

  .icones{
    display: flex;
    justify-content: space-between;
    gap: 5rem;
  }
}

#carousel{
    padding-bottom: 3rem
}


#seta-home{
    rotate: -90deg;
}

a{
    text-decoration: none;
    color: black;
    margin: 0;
}

#cta-our-partners{
    font-weight: 800;
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        video {
            position: fixed;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            width: 200%;
            height: 100%;
            z-index: -1000;
            background-color: black;
          }
        
        
          
        #initial-screen {
            height: 100vh;
            text-align: center;
        }
    
        #logo-belive{
            width: 100%;
        }
    
        #navbarBelive{
            display:flex;
            justify-content: space-between;
            align-items:center;
            gap: 15rem;
        }
    
        #navbarContainer{
            justify-content: center;
        }
    
        #text-home{
            text-align: center;
            color: white;
            display: grid;
            font-size: 2rem;
            
            align-items: center;
            height: 60vh;
            font-family: 'Along Sans s2';
            
        }
    
        #text-home-2{
            text-align: center;
            font-weight: 700;
            font-size: 2.3rem;
        }
    
        mark {
            background-color: #FF009E;
            color: white;
            padding: 0.2rem 1rem 0.2rem 1rem;
        }
    
        #arrow-icon{
            display: flex;
            justify-content: center;
        }
    
        #seta-home{
            margin-top: 5rem;
            width: 5rem;
        }
    
        #our-services{
            padding: 1rem;
            background-color: white;
        }
    
        #our-services-icons{
            margin: 3rem 0 3rem 0 ;
        }
    
        #our-services-text{
            padding: 2rem 0 0 0 ;
            font-weight: 400;
            
        }
    
        #our-services-text > h3{
            font-size: 2rem;
            font-weight: 700;
        }
        
        .info-icon-service{
            text-align: center;
            opacity: 0;
            -webkit-transform: translateX(-40px);
                 -moz-transform: translateX(-40px);
                    -ms-transform: translateX(-40px);
                     -o-transform: translateX(-40px);
                            transform: translateX(-40px);
            -webkit-transition: all 0.6s ease-out;
                 -moz-transition: all 0.6s ease-out;
                    -ms-transition: all 0.6s ease-out;
                     -o-transition: all 0.6s ease-out;
                            transition: all 0.6s ease-out;
        }
    
        .info-icon-service.visible {
            opacity: 1;
            -webkit-transform: none;
                 -moz-transform: none;
                    -ms-transform: none;
                     -o-transform: none;
                            transform: none;
        }
    
        .info-icon-service > h4{
            font-weight: 700;
        }
    
        .info-icon-service > p{
            line-height: 1.2rem;
            
    
        }
    
        .icon-service{
            width: 8rem;
        }
    
        #clients-carousel{
            background-color: #D9D9D9;
        }
    
    
        .icon-slide{
            width: 15rem;
        }
    
      
    
        .swiper-slide{
            display: flex !important;
            justify-content: center !important;
        }
        .img-carousel{
            object-fit: contain;
            max-width: 15rem;
        }
    
        #our-partners{
            background-color: white;
            margin: 0;
        }
    
        #our-partners-container{
            padding-top: 2rem;
            text-align: center;
            font-size: 1.5rem;
            
            font-weight: 300;
            margin: 0;
        }
    
        #our-partners-button{
            display: grid;
            gap: 0;
            font-weight: 900;
        }
    
    
        #our-partners-button > p{
            margin: 0;
        }
        #rectangle{
            padding: 0.3rem 0 0  0.3rem;
            background-color: #FF009E;
        }
        #contact{
            background-color: black;
        }
        #contact-container{
            padding: 2rem
        }
        #contact-container > h3{
            color: #FF009E;
            font-weight: 700;
        }
        #contact-container > p{
            color: white;
            
            font-size: 0.7rem;
        }
    
        .form-control{
            background-color:rgba(0,0,0,0);
            color: white;
        
        }
    
        .form-label{
            color: white;
            
        }
    
        #btn-form{
            background-color: #FF009E;
            color: black;
            font-weight: 700;
            text-align: center;
            padding: 0 8.5rem 0rem 8.5rem ;
            margin-top: 2rem;
        }
    
        #footer{
            background-color: #FFCE00;
        }
    
        #footer-container{
            justify-items: center;
            display: flex;
            gap: 1.5rem;
            align-items: center;
            padding: 1.5rem;
        }
        #logo{
            display: flex;
            width: 12rem;
            margin-top: 0.5rem;
            justify-items: center;
        }
        
        #socials{
            display: flex;
            justify-content: center;
            gap: 2rem;
        }
    
        #socials > p{
            color: black;
            
        }
    
        #icons-redes{
            display: grid;
            align-items: center;
            justify-content: center;
            
        }
    
        .icones{
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 3rem;
        }
        
        .icon-rede{
            justify-content: center;
            text-align: center;
        }
        .icon-rede > p{
            text-align: center;
            
        }
    
        .icon-rede > svg{
            width: 3rem; 
        }
        #footer-contact{
            display: grid;
            justify-content: center;
        }
        .icon-footer-whatsapp{
            width: 5rem;
        }
    
        #whatsapp{
            text-align: center;
        }
    
        #whatsapp > p{
            
        }
    
        #phones{
            display: grid;
            justify-content: space-between;
            
            margin-top: 0.5rem;
            /* gap: 1rem; */
        }
    
        #text-home-1{
            font-size: 2.3rem;
        }
    
        #logo-belive{
            width: 7rem;
        }
    
    
        .swiper {
            height: 20rem;
            object-fit: contain;
          }
    
          .navbar-nav > li > a{
            color: white !important;
          }
    
          #navbarSupportedContent{
            text-align: center;
            font-size: 1rem;
          }
    
          .icon-footer{
            width: 3rem;
        }
    
}

#btn-form:hover{
    background-color: #FFCE00;
    color: rgb(0, 0, 0);
}

.icon-button:hover{
    color: #FF009E;
}


.icon-button svg:hover{
    fill: #FF009E;
}

#initial-screen{
    align-items: center;
}


.swiper-button-prev,.swiper-button-next{
    color: #FF009E !important;
}

.swiper-pagination-bullet-active{
    background-color: #FF009E !important;
}
