.content-section-box
{
      width: 100%;
      height: auto;

      font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
}
.content-section-box
.box-container
{
      width: 85%;
      height: 30vh;  
      display: flex;      
      align-items: center;
      justify-content: center;
}
.content-section-box
.box-a
h5
{     
      color: #333;
      display: block;      
      font-size: 60px;                  
      margin-left: 50px;
      text-transform: uppercase;            
}
.content-section-box
.box-b
{     
      width: 100%;
}
.content-section-box
p
{            
      font-size: 15px;      
      margin-top: 35px;
      font-weight: 400;
      line-height: 1.8;      
      margin-left: 50px;      
      text-align: justify;      
      color: rgb(0, 0, 0);
}
.content-section-box
.reveal-text 
{
      visibility: hidden;
}
.content-section-box
.line 
{          
      display: flex;
      overflow: hidden;      
}



.content-section-trigger
{
      width: 100%;
      height: auto;        
      background-color: transparent;
}
.content-section-trigger
.trigger-container
{      
      width: 98%;
      height: 80vh;      
      margin: 0 auto;
      background-color: transparent;
}
.content-section-trigger
img 
{      
      width: 97%;   
      height: 80%;      
      display: flex;
      margin: 0 auto;      
      margin-top: 50px;
      object-fit: cover;         
      border-radius: 20px;      
      background-repeat: no-repeat;
}
.content-section-trigger
.trigger-background
{           
      width: 100%;
      height: 80vh;
      overflow: hidden;
      position: relative;
      visibility: hidden;
      clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);      

      transition-delay: 0.2s;
      transition: 1s ease-out;
}
.content-section-trigger
.trigger-background
img 
{
      transform: scale(1.3);

      transition: 2s ease-out;
}
.content-section-trigger
.animating 
.trigger-background
{      
      visibility: visible;
      transform: skewY(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.content-section-trigger
.animating 
img 
{
      transform: scale(1);

      transition: 4s ease-out;
}
.content-section-trigger
.fading-up 
{
      opacity: 1;      
      transform: translateY(0px);

      transition-delay: 0.7s;
      transition: 1s ease-out;
}



.content-section-context
{
      width: 100%;
      height: auto;                        
      background-color: transparent;    

      font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
}
.content-section-context
.context-container
{
      width: 95%;            
      height: 60vh;
      margin: 0 auto;          
      padding: 100px 0;
      border-radius: 15px;            
      background-color: #f9f9f9;          
}
.content-section-context
.context-a 
{      
      width: 20%; 
      float: left;
      height: 60px;
      background-color: transparent;                     
}
.content-section-context
.context-b
{      
      width: 20%; 
      float: left;
      height: 60px;
      background-color: transparent;                       
}
.content-section-context
.context-c
{      
      width: 60%; 
      float: left;
      height: 60px;
      background-color: transparent;     
}
.content-section-context
h5
{         
      font-size: 15px; 
      color: #0a1326;
      font-weight: 500;      
      line-height: 1.4;
      padding-left: 40px;
      text-transform: capitalize;      
}
.content-section-context
h6
{                     
      color: #999;        
      font-size: 14px;       
      font-weight: 500;      
      line-height: 1.4;
      padding-left: 10px;
      text-transform: capitalize;      
}
.content-section-context
.context-c
p
{              
      font-size: 14px;      
      color: #0a1326;      
      font-weight: 500;
      line-height: 1.4;      
      padding-left: 10px;                 
}
.content-section-context
.context-padding
{
      width: 100%;
      height: 80px;
}
.content-section-context
.reveal-text 
{
      visibility: hidden;
}
.content-section-context
.line 
{          
      display: flex;
      overflow: hidden;
      position: relative;      
}



.content-section-account
{
      width: 100%;
      height: auto;
      margin-top: 20px;
      background-color: transparent;

      font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
}
.content-section-account
.account-container 
{     
      width: 100%;
      height: 110vh;
      display: grid;
      position: relative;      
      place-items: center;
}
.content-section-account
img 
{      
      width: 100%;
      height: 100%;      
      object-fit: contain; 
      background-position: center;
      background-repeat: no-repeat;
}
.content-section-account
h5
{        
      z-index: 99;                 
      top: 25%;            
      height: 50%;        
      display: grid;      
      font-size: 80px;            
      color: #25387c;
      font-weight: 700;              
      position: absolute;
      place-items: center;       
      text-transform: uppercase;
}
.content-section-account:not(.no-js)
.account-background 
{      
      width: 100%;
      height: 100vh;
      overflow: hidden;
      position: relative;
      visibility: hidden;
      border-radius: 40px;
      clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);

      transition-delay: 0.2s;
      transition: 1s ease-out;
}
.content-section-account:not(.no-js) 
.account-background
img 
{
      transform: scale(1.3);

      transition: 2s ease-out;
}
.content-section-account:not(.no-js) 
.account-animate
.account-background
{      
      visibility: visible;
      transform: skewY(0);  
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.content-section-account:not(.no-js) 
.account-animate
 img 
{
      transform: scale(1);

      transition: 4s ease-out;
}
.content-section-account:not(.no-js) 
.account-heading
{
      opacity: 0;      
      transform: translateY(40px);

      transition: 0.4s ease-out;
}
.content-section-account:not(.no-js) 
.account-item
{
      opacity: 1;      
      transform: translateY(0px);

      transition-delay: 0.7s;
      transition: 1s ease-out;
}



.content-section-counter
{
      width: 100%;
      height: 20vh;      
      background-color: transparent;
}
.content-section-counter
.counter-container
{
      width: 98%;
      height: 120px;
      margin: 0 auto;      
      border-radius: 20px;     
      border: 1px solid #ccc;
}
.content-section-counter
.counter-box
{      
      width: 25%;
      float: left;
      height: 120px;
      padding: 2px 0;
      text-align: center;           
}
.content-section-counter
h5
{
      margin: 0;       
      padding: 2px;
      color: #ccc;
      font-size: 14px;                       
      font-weight: 700;      
      text-transform: uppercase;

      font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
}
.content-section-counter
h6
{      
      padding: 0;      
      font-size: 40px;
      color: #232323;
      font-weight: bold;            

      font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
}
.content-section-counter
img
{      
      width: 50px;
      height: auto;
}



.content-section-brief
{
      width: 100%;
      height: auto;
      margin-top: 50px;
      background-color: transparent;
}
.content-section-brief
.brief-container
{
      width: 98%;
      height: 40vh;
      margin: 0 auto;
      padding-top: 50px;            
      background-color: transparent;
      /*
      border: 0.1px solid #ededed;      
      */
}
.content-section-brief
.brief-a
{      
      width: 35%;  
      float: left;
      height: 200px;            
      
}
.content-section-brief
.brief-b
{      
      width: 25%;  
      float: left;
      height: 200px;      
}
.content-section-brief
.brief-c
{      
      width: 40%;  
      float: left;
      height: 200px;            
}
.content-section-brief
img
{
      width: 50%;
      float: right;
      height: auto;      
      margin: 10px 0;
      border-radius: 10px;
}
.content-section-brief
span
{     
      color: #ccc;                         
      padding: 0 50px; 
      font-size: 18px;      
      font-weight: 900;          

      font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
}
.content-section-brief
h5
{          
      font-size: 22px;      
      color: #25387c;
      font-weight: 900;      
      padding: 10px 40px;

      font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
}
.content-section-brief
h6
{           
      padding: 10px 0;      
      font-size: 14px;     
      color: #232323;
      font-weight: 500;            

      font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
}
.content-section-brief
p
{          
      width: 75%;                     
      font-size: 15px;
      color: #232323;   
      font-weight: 500;      
      
      font-family: "Ubuntu", serif;
}
/*
.content-section-brief
hr
{           
      border: 0;
      width: 50%;      
      height: 1px;
      margin: 0 auto;
      display: block;      
      border-top: 1px solid #ccc;      
}
*/
.content-section-brief
i
{      
      font-size: 12px;
      color: #01a437; 
}



.content-section-mixing
{
      width: 100%;
      height: auto;
      background-color: transparent;

      font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
}
.content-section-mixing
.mixing-container
{	  
      width: 100%;
      height: 25vh;                  
      overflow: hidden;
      position: relative;      
}
.content-section-mixing
.mixing-item
{
      width: 100%;            
}
.content-section-mixing
h5
{	  	
	top: 40%;                  
      font-size: 180px;
      font-weight: bold;
      position: absolute;
      white-space: nowrap;        
      text-transform: uppercase;      
	  
	animation: scroll-left 20s linear infinite;  
      -moz-animation: scroll-left 20s linear infinite;
      -webkit-animation: scroll-left 20s linear infinite;
}
.content-section-mixing
p
{
      opacity: 0.2;
      color: #767676;
	display: inline-block;
}



.content-section-content
{
      width: 100%;
      height: auto;
      background-color: transparent;

      font-family: "Ubuntu", serif;
}
.content-section-content
.content-container
{
      width: 100%; 
      height: 80vh;
      margin-top: -30px;
      background-color: #25387c;  
      border-radius: 30px 30px 0 0;
}
.content-container:after 
{
      content: "";
      clear: both;
      display: table;      
}
.content-section-content
.content-a
{      
      width: 27%; 
      float: left;      
}
.content-section-content
.content-article
{      
      width: 80%;
      height: auto;
      margin: 0 auto;                  
}
.content-section-content
h4
{
     color: #fff;     
     padding: 50px 0;
     font-size: 30px; 
     font-weight: 700;     
}
.content-section-content
i
{
     font-size: 25px;      
}
.content-section-content
h5
{    
     width: 60%; 
     color: #fff;      
     padding: 10px 0;
     font-size: 20px; 
     font-weight: 400;          
     border-bottom: 1px solid #fff;
}
.content-section-content
h6
{     
     color: #fff;
     font-size: 25px; 
     font-weight: 500;
     padding: 15px 20px;
}
.content-section-content
p
{     
     color: #fff;
     font-size: 14px; 
     font-weight: 500;
     padding: 10px 20px;
}
.content-section-content
.content-b
{      
     width: 46%;          
     float: left;
     height: 100%;                
}
.content-section-content
img
{      
     width: 100%;
     height: 60%;
     margin: 0 auto;
     object-fit: cover;     
     border-radius: 0 0 15px 15px;
     background-repeat: no-repeat;
}
.content-section-content
.text-red 
{         
     margin: 5px;     
     color: #ccc;
}
.content-section-content
.content-head
{
     width: 50%; 
     color: #fff;
     font-size: 15px; 
     font-weight: 500;
     padding-top: 40px;
     text-transform: uppercase;
}
.content-section-content
.content-paragraph
{
     width: 50%; 
     color: #fff;
     font-size: 18px; 
     font-weight: 500;     
     line-height: 1.4;
}
.content-section-content
.content-c
{
     width: 27%;  
     float: left;
     height: 100%;                         
}
.content-section-content
.content-overlay
{
     margin-top: 170px;
}
.content-section-content
.content-box
{            
      opacity: 0;  
      padding: 80px;
      position: absolute;
      pointer-events: none;
      justify-content: space-between;         

      animation: animate-content 15s linear infinite;
      animation-delay: calc(3s * var(--delay));
}
.content-overlay:hover 
.content-box
{
      animation-play-state: paused;
}
.content-box:last-child
{      
      animation-delay: calc(-3s * var(--delay));
}
.content-section-content
.content-item
{
      display: flex;
      align-items: center;
}
.content-section-content
.content-background
{      
      width: 400px;
      height: auto;
      position: absolute;                            
}
.content-section-content
.content-box
img
{          
      width: 100%;
      height: auto;      
      object-fit: cover;      
      border-radius: 10px;
      /*
      filter: grayscale(10) blur(0px);
      */
}



.content-section-timeline
{
      width: 100%;
      height: auto;            
      margin: 0 auto;    
      margin-top: -30px;
      background-color: #fff;
      border-radius: 30px 30px 0 0;      

      font-family: "Ubuntu", serif;
}
.content-section-timeline
.timeline-heading
{
      width: 15%;      
      text-align: center;
}
.content-section-timeline
h4
{
      font-size: 12px;
      color: #25387c;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
}
.content-section-timeline
.timeline-container
{  
      width: 80%;
      height: 45vh;    
      margin: 0 auto;    
      text-align: center;
      padding-top: 100px;
}
.content-section-timeline
.timeline-line
{      
      width: 100%;
      height: 1px;                       
      background-color: #ccc;      
}
.content-section-timeline
.timeline-item 
{
      float: left;       
      width: 300px;           
}
.content-section-timeline
.timeline-circle
{      
      width: 32px;      
      height: 32px;            
      margin-top: -20px;     
      border-radius: 100%;         
      border: 1px solid #ccc;
      background-color: #f9f9f9;      
      
      display: flex;      
      position: absolute;            
      align-items: center;
      justify-content: center;     

      transition: ease all 0.8s;
}
.timeline-item:hover 
.timeline-circle
{    
      background-color: #fff;
}
.timeline-item:hover 
.timeline-article
{
      margin-top: 80px;            
}
.content-section-timeline
.timeline-article
{
      float: left;
      height: 20vh;
      margin-top: 100px;      
      border-radius: 10px;        
      /*
      padding: 6px 12px 12px;
      background-color: #fff;            
      */

      transition: ease all 0.5s;
}
.content-section-timeline
span
{
      font-size: 10px;
      color: #232323;
      display: inline-block;      
}
.content-section-timeline
h5
{               
      font-size: 15px;
      color: #232323;
      text-align: left;
      font-weight: 700;
      margin-top: -60px;            
}
.content-section-timeline
h6
{ 
      width: 100%;          
      font-size: 40px;                   
      color: #25387c;
      text-align: left;      
      font-weight: 700;
      border-bottom: 1px solid #ccc;
}
.content-section-timeline
p
{
      width: 50%;                      
      padding: 10px 0;
      font-size: 18px; 
      color: #6a7780;
      font-weight: 500;      
      text-align: left;            
}




.content-section-tabs
{
      width: 100%;
      height: auto;      
      background-color: transparent;

      font-family: "Ubuntu", sans-serif;
}
.content-section-tabs
.tabs-container
{
      width: 100%;                  
      height: auto;
      display: flex;      
      align-items: center;
      flex-direction: column;
      justify-content: center;      
}
.content-section-tabs
.swiper-container
{      
      width: 98%;
      height: 1000px;                  
      position: relative;
      object-fit: contain;
      border-radius: 15px;             
      background-position: center center;
}
.swiper-wrapper 
{
      transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
}
.content-section-tabs
.swiper-slide 
{      
      color: #fff;
      overflow: hidden;
      position: relative;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
}
.content-section-tabs
.swiper-slide::after 
{
      content: "";      
      z-index: 1;      
      width: 100%;
      height: 100%;
      right: -115%;
      bottom: -10%;
      position: absolute;
      border-radius: 100%;     
      /*
      background-color: rgba(0, 0, 0, 0.7);
      box-shadow: -230px 0 150px 60vw rgba(0, 0, 0, 0.7);
      */
}
.content-section-tabs
.tabs-article
{      
      z-index: 2;
      top: 30%;
      width: 80%;      
      right: 20%;      
      max-width: 310px;
      position: absolute;
      transform: translate(50%, 0);     
}
.content-section-tabs
.tabs-date
{      
      opacity: 0;
      color: #fff;
      display: block;            
      font-size: 50px;
      font-weight: 700;
      margin-bottom: 15px;
      
      transform: translate3d(20px, 0, 0);      
      
      transition: 0.2s ease 0.4s;
}
.content-section-tabs
.tabs-heading
{ 
      opacity: 0;      
      font-size: 50px;
      color: #25387c;
      margin: 0 0 15px;
      font-weight: bold;
      transform: translate3d(20px, 0, 0);

      transition: 0.2s ease 0.5s;
}
.content-section-tabs
.tabs-paragraph
{          
      opacity: 0;
      color: #fff;
      font-size: 22px;
      font-weight: 500;
      line-height: 1.5;      
      transform: translate3d(20px, 0, 0);

      transition: 0.2s ease 0.6s;
}
.content-section-tabs
.tabs-date 
{
      opacity: 1;
      transform: translate3d(0, 0, 0);

      transition: 0.4s ease 1.6s;
}
.content-section-tabs
.tabs-heading
{
      opacity: 1;
      transform: translate3d(0, 0, 0);

      transition: 0.4s ease 1.7s;
}
.content-section-tabs
.tabs-paragraph
{
      opacity: 1;
      transform: translate3d(0, 0, 0);

      transition: 0.4s ease 1.8s;
}
.swiper-pagination 
{
      z-index: 1;            
      height: 100%;
      display: none;
      font-size: 22px;      
      font-weight: 700;
      right: 5% !important;
      flex-direction: column;
      justify-content: center;        
}
.swiper-pagination::before 
{
      content: "";     
      top: 0;         
      width: 1px;
      left: -30px;
      height: 100%;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.2);
}
.swiper-pagination-bullet 
{
      opacity: 1;
      width: auto;
      height: auto;
      color: #fff;
      position: relative;
      text-align: center;            
      background: transparent;      
      margin: 15px 0 !important;      
}
.swiper-pagination-bullet::before 
{
      content: "";      
      top: 8px;      
      width: 6px;
      height: 6px;
      left: -32.5px;
      position: absolute;
      border-radius: 100%;
      background-color: red;

      transform: scale(0);

      transition: 0.2s;
}
.swiper-pagination-bullet-active 
{
      color: #ccc;
}
.swiper-pagination-bullet-active::before 
{
      transform: scale(1);
}
.swiper-button-next,
.swiper-button-prev 
{
      z-index: 2;      
      top: 15%;
      width: 25px;
      height: 25px;
      margin-top: 0;
      background-size: 40px 40px;      

      transition: 0.2s;
}
.swiper-button-prev 
{
      left: 8%;      
      background-image: url("assets/svg/tabs/button-01.svg");
}
.swiper-button-prev:hover 
{
      transform: translateX(-3px);
}
.swiper-button-next 
{
      right: 8%;      
      background-image: url("assets/svg/tabs/button-02.svg");
}
.swiper-button-next:hover 
{
      transform: translateX(3px);
}



.content-section-thumbnails
{
      width: 100%;
      height: 100vh;      
      display: flex;
      margin: 0 auto;     
      margin-top: 30px; 
      align-items: center;
      border-radius: 15px;
      justify-content: center;      
      background-color: #25387c;
}
.content-section-thumbnails
h5
{
      color: #fff;
      font-size: 25px;
}
.content-section-thumbnails
.thumbnails-container
{      
      gap: 5px;      
      width: 100%;            
      padding: 5px;      
      display: grid;         
      padding-top: 50px;
      grid-template-columns: 1fr;            

      transition: 0.3s;
}
.content-section-thumbnails
.thumbnails-item
{          
      width: 100%;
      height: 100%;  
      padding: 5px;                
      margin: 0 auto;
      position: relative;      
}
.content-section-thumbnails
img
{      
      width: 70%;
      height: 100%;      
      display: block;            
      margin: 0 auto;
      object-fit: cover;      
      border-radius: 8px;

      transition: 0.3s;
}
.content-section-thumbnails
img:hover 
{
      transform: scale(1.02);
}



.content-section-client
{
      width: 100%;
      height: auto;                  
      background-color: transparent;      

      font-family: "Ubuntu", sans-serif; 
}
.content-section-client
.client-container
{
      width: 96%;
      height: 60vh;
      margin: 0 auto;          
      padding-top: 10px;
}
.content-section-client
.client-column
{      
      width: 25%;      
      float: left;
      height: 100px;      
      text-align: center;
      padding: 80px 10px;
      background-color: transparent;
}
.content-section-client
a
{              
      display: block;     
      font-size: 14px;      
      color: #0a1326;
      font-weight: 700;                  
      text-decoration: none;
      text-transform: uppercase;    
      
      transition: 0.5s;
}
.content-section-client
a:hover
{                        
      color: #888;            
}
/*
.content-section-client
a::after 
{      
      content: "";                  
      left: 2%;
      width: 50px;
      height: 1px;
      margin: 4px 0;
      position: absolute;
      background-color: #01a437;

      transform: scaleX(0);
      transform-origin: right;

      transition: transform 0.5s;
}
.content-section-client
a:hover::after 
{
      transform: scaleX(1);
      transform-origin: left;
}
*/
.content-section-client
.client-heading
{ 
      opacity: 0; 
      position: relative;
      animation-play-state: paused; 
}
.content-section-client
.reveal-text 
{
      visibility: hidden;
}
.content-section-client
.line 
{          
      display: flex;
      overflow: hidden;
      position: relative;      
}