@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap');



@font-face {

   font-family: Halogen-bold;

   src: url(../fonts/Halogen-Bold.otf) format("woff");

   font-weight: bold;

   font-style: normal;

   font-display: swap

}



:root{

    --font-Halogen: 'Halogen-bold';

     --font-roboto: 'Roboto';

}





.rule-sec{

    width:100%;

    height:auto;

    position:relative;
    margin-top: 25px;

}

.rule-sec .banner-content-wrapper {

    position: relative;
    margin-bottom: 50px;

}



.rule-sec .banner-content .rule-head {

    font-size: 120px;
    
    font-weight: 600;

    text-transform: capitalize;

    margin-bottom: 0;

    color: #ffffff;

}

.rule-sec .banner-content-right h4 {

    position: relative;

    padding-left: 40px;

    margin-top: 40px;

    font-size: 20px;

line-height: 30px;

color: #ffffff;

font-weight: 400;

 font-family:var(--font-roboto)!important;

}

.rule-sec .banner-content-right h4:before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 18px;

    height: 18px;

    background-color: #fff;

    border-radius: 50%;

    box-shadow: 0px 0px 10px rgb(255 255 255);

}

.fs-20 {

    font-size: 20px;

    font-weight: 400;

}



/*software-content*/



.software-sec{

    width:100%;

    height:auto;

    padding: 100px 0px 130px;

}

.software-content{

    width:100%;

    height:auto;

    display:flex;

    justify-content:space-between;

    position: relative;

}

.software-content1{

    width:25%;

    height:auto;

    position: relative;

}

.software-content2{

    width:83%;

    height:auto;

     position: relative;

}



.software-head{

    width:100%;

    height:auto;

    position:relative;

}



.software-head:before{

  content: "";

    position: absolute;

    border-left: 2px solid #fff;

    height: 0;

    right: -113px;
    
    transform: scaleY(0);
    
    transform-origin: 0 0;
    transition: 1s cubic-bezier(.5, 0, 0, 1);
    transition-property: transform, opacity;

}

.software-content1:before{

    content: "";

    position: absolute;

    border-left: 2px solid #fff;

    height: 0;

    top: 242px;
    
    transform: scaleY(0);
    
    transform-origin: 0 0;
    transition: 1s cubic-bezier(.5, 0, 0, 1);
    transition-property: transform, opacity;

}

.software-head.is-visible:before,
.software-content1.is-visible:before{
    transform: scaleX(1) scaleY(1);
}

.software-content1.is-visible:before{
    height: 450px;
}

.software-head.is-visible:before{
    height: 690px;
}

.software-head h4{

     font-size: 48px;

    line-height: 48px;

color: #ffffff; 

margin-bottom: 50px;

}



.soft-card{

    width:100%;

    height:auto;

    filter: drop-shadow(0px 6px 23px rgba(0,0,0,0.6));

    background-color: #191919;  

    padding:20px 20px;

    text-align: center;
    
    margin: 40px 16px;

}

.software-content2.software-slider .slick-list{
    margin: -40px -16px;
}

.soft-card h5{

 font-size: 20px;

letter-spacing: 1px;

line-height: 40px; 

text-transform: uppercase;

margin-bottom: 6px;

text-align: left;

}

.soft-card p{

line-height: 30px;

color: #ffffff;  

text-align: left;

}

.card-col-soft{

    padding-left: 1px;

    margin-right: -274px;

    background: transparent;

}

    



.software-content  .slider__counter {

    color: #fff;

    position: absolute;

    left: -452px;

    font-size: 30px;

    font-weight: 600;

    margin: 0 30px;

    top: 144px;

}



.software-content1  .custom-arrows{

    display: flex;

    align-items: center;

    position: absolute;

    left: 0;

}



.software-content1  .custom-arrows i{

    width: 38px;

    height: 38px;

    border-radius: 50%;

    border: 1px solid #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 20px;

    cursor: pointer;

    transition: 0.3s;

}



.software-content1 .custom-arrows i:hover{

    border-color: #ff0000;

    color: #ff0000;

}



.software-content1 .custom-arrows i + i{

    margin-left: 60px;

}



.soft-card img{

    width:100%;

    height:auto;

}

.software-slider .slick-slide{
    width: 500px !important;
}



/*Orchestrate-sec*/

.Orchestrate-sec{

    width:100%;

    height:auto;

    position:relative;

    padding-top: 100px;

}

.Orchestrate-sec h2{

font-size: 100px;

font-weight: 600;

line-height: 110px;

color: #ffffff;  

}
.Orchestrate-sec h1{

font-size: 100px;

font-weight: 600;

line-height: 110px;

color: #ffffff;  

}

.Orchestrate-sec p{

line-height: 30px;

color: #ffffff;

font-weight: 400;

margin-top: 11px;

}

.Orchestrate-sec img{

   width: 85px;

    margin-left: -20px;
    
    margin-top: 12px;

}

.Orchestrate-wrapper{

    width:100%;

    height:auto;

    border-bottom: 1px solid #fff;

    padding-bottom: 20px;

}

/*AWL-Explained*/

.AWL-Explained-sec{

    width:100%;

    height:auto;

    position:relative;

    padding-top:60px;

     padding-bottom:60px;

}

.AWL-Explained-sec h5{

font-size: 18px;

line-height: 70px;

color: #ffffff; 

text-align:center;

text-transform: uppercase;

}

.AWL-Explained-sec h2{

 font-size: 60px;
 
 font-weight: 600;

line-height: 70px;

color: #ffffff;   

text-align:center;

}



.Explained-card{

    width:170px;

    height:150px;

    border-radius: 20px;

filter: drop-shadow(0px 6px 23px rgba(0,0,0,0.6));

background-color: #191919;

text-align:center;

padding: 10px;

position: relative;

   overflow:hidden;

     transition: .3s;

     display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

     /*transform:scale(0.9);*/

     cursor: pointer;

}

.Explained-card img{

    width:58px;

}



.Explained-card2{

    width:100%;

    height:100%;

    border-radius: 20px;

background-color: var(--primary-color);

text-align:center;

padding: 0px 20px;

padding-top: 35px;

position: absolute;

    left: 0;

    bottom:-100%;
border-radius: 20px;
       transition: all .4s ease-in-out;

       opacity:0;

     cursor: pointer; 

       

}



.Explained-card h5{

 font-size: 16px;

line-height: 1.2;

color: #ffffff;   

text-align: center;

text-transform:uppercase;

margin-top: 30px;

margin-bottom:0px;

}

.Explained-card .before-hover{

  opacity:1;  

}

.Explained-card img{

    opacity:1;

}

.Explained-card2 .after-hover{

 font-size: 16px;

line-height: 30px;

color: #ffffff;   

text-align: center;

text-transform:uppercase;

position: absolute;

    top: 0px;

    left: 0px;

    right: 0px;

    /*opacity:0;*/

      transition: .6s;

}

.Explained-card2  p{

  font-size: 12px;

line-height: 18px;

color: #ffffff;

font-weight: 400; 

width: calc(100% - 10px);

margin: 0 auto;

text-align: center;

    position: absolute;

    transition: .3s ease-in;

    text-align: center;

    left: 0px;

    right: 0px;

    top: 80px;

       transition: .6s;

}





.Explained-card:hover{

  transition: .5s;

  transform:scale(1.2) translate(0,0);

}

.Explained-card:hover .Explained-card2{

    opacity:1;

       bottom:0px;

}





.Explained-main-row{

  margin-top: 45px;  

  padding: 0px 128px;

}

/*awl-cloud*/

.awl-cloud{

    width:100%;

    height:auto;

    position:relative;

    padding-top:30px;

     padding-bottom:60px;

}

 .awl-cloud .head{

     width:100%;

     height:auto;

     text-align:center;

 }

.awl-cloud h6{

font-size: 18px;

line-height: 55px;

color: #ffffff; 

text-align:center;

text-transform: uppercase;

margin-bottom: 0px;

}

.awl-cloud h2{

 font-size: 60px;
 
 font-weight: 600;

    line-height: 78px;

    color: #ffffff;

    text-align: center;

    padding: 0px 87px;

}

.awl-cloud p{


line-height: 30px;

color: #ffffff;

font-weight: 400;

text-align: center;

padding: 11px 298px;

}

.sec5-img{

 margin-top: -125px;   

}

/*awl-services*/

.awl-services{

    width:100%;

    height:auto;

    padding-top: 30px;

    padding-bottom: 100px;

}

.awl-services .head{

     width:100%;

     height:auto;

     text-align:center;

 }

.awl-services h6{

font-size: 18px;

line-height: 55px;

color: #ffffff; 

text-align:center;

text-transform: uppercase;

margin-bottom: 0px;

}

.awl-services h2{

 font-size: 60px;
 
 font-weight: 600;

    line-height: 78px;

    color: #ffffff;

    text-align: center;

    padding: 0px 87px;

}

.awl-services p{
    
    font-size: 18px;

line-height: 30px;

color: #ffffff;

font-weight: 400;

text-align: center;

padding: 11px 322px;

}

.feel-free{

    width:100%;

    height:auto;

    text-align:center;

}

.feel-free h5{

font-size: 16px;

line-height: 70px;

color: #ffffff; 

text-transform:uppercase;

margin-bottom: 0px;

}

/*future-proof*/

.future-proof{

    width:100%;

    height:auto;

    position:relative;

}

.future-proof-content{

    width:100%;

    height:auto;

    display:flex;

    justify-content:space-between;

}

.future-proof-content1{

 width:58%;

 height:auto;

}

.future-proof-content2{

 width:40%;

 height:auto;

}





.future-proof-content11 h2{

  font-size: 40px;
  
  font-weight: 600;

line-height: 50px;

color: #ffffff;  

}



.future-proof-content11 p{

line-height: 30px;

color: #ffffff;    

font-family: var(--font-montserrat)!important;

}



.future-proof-img{

position: absolute;

   width: 700px;

    height: 100%;

    left: 0px;

}

.future-proof-ab{

 position: absolute;

  left: 0px;

  bottom:0;

  width:220px;

}

.future-proof-content11{

    width:100%;

    height:auto;

   padding: 111px 0px; 

}

.future-proof.waas .global-btn:before{
    background-color: #fff;
}

.future-proof.waas .global-btn:after{
    color: #fff;
}



/*faq-waas*/

.faq-waas{

    width:100%;

    height:auto;

    padding-top:100px;

    padding-bottom:0px;

}

/*business-section*/

.business-section{

 width: 100%;

    height: auto;

    padding-top: 55px; 

}


.business-section img{

    width:100%;

    height:100%;

}

/*img dashboard*/

.dashboard-image{

    width:100%;

    height:auto;

    position:relative;

    text-align:center;

    padding:50px 0px;

}

#image-center{

   /*width: 962px;*/
    width: 1100px;
    height: 570px; 

}

#image-left{

   position: absolute;

    right:0;

    z-index: -1; 

    bottom: 50px;

    transform: translateX(-103px);

}

#image-right{

    position: absolute;

    right:0;

    z-index: -6; 

    bottom: 50px;

    transform: translateX(104px);

}



/*responsive*/


@media (min-width: 1920px) and (max-width: 2560px){
    .card-col-soft{
        margin-right: -500px;
    }
    .software-content1:before{
        top: 246px !important;
    }
    .software-content2{
        width: 88%;
    }
    .software-content .slider__counter{
        left: -673px !important;
        top: 148px;
    }
    .future-proof-img,
    .future-proof-ab{
        left: auto;
    }
}


@media (max-width: 575px){
    
    .business-section{
        overflow-x: scroll;
    }
    
   .business-section .image-container{
    width: 1000px;
    max-width: 1000px;
    overflow-x: visible;
    position: relative;
}

}