/* =============================================================================
    Team Data Sukan
    UI/UX: Shay Rahman
   ========================================================================== */ 


   /* ---- Google Font  ---- */


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,700;1,200;1,400;1,500&display=swap');


/* --------------------------------------------------------------------------
    Variables css
   -------------------------------------------------------------------------- */

:root{
  --header-height: 80px;
  --nav-width: 68px;

  /* ---- Colors  ---- */
  --first-color: #000000;
  --first-color-light: #ffffff;
  --yellow-color: #F6C809;
  --yellow-color-two: #FEE9A5;
  --yellow-color-pop: rgba(246, 199, 9, 0.8);

  --yellow-hover-color: #f69709;
  
  --grey-color: #3d3d3d;
  --grey-color2: #252525;
  --grey-color3: #aeaeae;
  
  /* ---- Font & typography  ---- */

  --body-font: 'Poppins', sans-serif;
  --normal-font-size: 1rem;

  --dsc-font-12: 12px;
  --dsc-font-14: 14px;
  
  /*===== z index =====*/
  --z-fixed: 100;

}

/* =============================================================================
  	Global styles
   ========================================================================== */

*,::before,::after{ box-sizing: border-box; }

::selection { background:#ed5900; color:#ffffff; }
::-moz-selection { background:#ed5900; color:#ffffff;}
::-webkit-selection {background:#ed5900; color:#ffffff;}

body{
  position: relative;
  margin: var(--header-height) 0 0 0;
  padding: 0 1rem;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  transition: .5s;
  background-color: var(--first-color);
  overflow-x: hidden;
}

a{ text-decoration: none; }

.loader {
  position: fixed;
  left: 0; right: 0;
  top: 0; bottom: 0;
  z-index: 9999;
  height: 100px;
  width: 100px;
  max-width: 100px;
  margin: auto; padding: 10px;
  justify-content: center;
  align-items: center;
  background: #000000c5 rgba(0,0,0,0 0.1);
}
.disppear{
  animation: vanish 1s forwards;
}
@keyframes vanish {
  100%{
    opacity: 0;
    visibility: hidden;
  }
}


.clear { clear: both;}
.clear_02 { clear: both; border-bottom: 3px #F6C809 solid; width: 8%;}
.clear_03 { clear: both; border-bottom: 1px #3d3d3d solid; width: 100%; margin-bottom: 20px;}
.clear_04 { clear: both; border-bottom: 3px #F6C809 solid; width: 100px; margin: 10px 0;}

/* --------------------------------------------------------------------------
    Button
   -------------------------------------------------------------------------- */

.btn-click { 
  font-family: var(--body-font);  background-color: var(--yellow-color); 
  border-radius: 0 !important; font-size: 14px; padding: 10px 30px; margin: 10px 0;
  font-weight: 600;
}
.btn-click:hover { background-color: var(--yellow-hover-color); transition: .3s; }

.arrow-back-click { color: var(--first-color); display: block; padding: 10px; margin: 0 10px; background-color: var(--yellow-color);}
.arrow-back-click:hover { background-color: var(--yellow-hover-color); color: var(--first-color-light);}


/*--- Btn up ----*/
.boxGoUp { display:block; text-align:center; position:fixed; z-index:30; right:20px; bottom: 20px; margin-top:7px; }
.boxGoUp a { padding:12px 15px; background-color: var(--first-color); color:#ffffff; font-size:21px; font-weight:bold; border: 1px solid #F6C809; }
.boxGoUp a:hover, .boxGoUp a:focus { background-color:var(--yellow-color); color:var(--first-color); transition: .5s ease; border-color: var(--first-color);}

/* --------------------------------------------------------------------------
    Font
   -------------------------------------------------------------------------- */

.tFont-Title-strd { font-family: var(--body-font); font-size: 50px; color: var(--first-color-light); font-weight: 200;} 
.tFont-Title-strd2 { font-family: var(--body-font); font-size: 40px; color: var(--first-color-light); font-weight: 200;} 

.tNorm-Sub-1 { font-family: var(--body-font); font-size: 16px; color: var(--first-color-light); font-weight: 200; text-align: justify;}


.title-sm-yellow { font-size: 16px !important; font-family: var(--body-font); font-weight: 700; margin: 0; color: var(--yellow-color); }

.glow {
  color: var(--yellow-color);
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
}

.transition-fade {
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}

.is-visible {  opacity: 1;  }

@keyframes glow {
  from { text-shadow: 0 0 5px #F6C809, 0 0 10px #F6C809; }
  to { text-shadow: 0 0 10px #f6a309, 0 0 80px #f6a309, 0 0 40px #f6a309; }
}

/* --------------------------------------------------------------------------
   About Company
   -------------------------------------------------------------------------- */

.wrp-vision-pdd { padding: 150px 0 200px 0;}

.wrp-bg-company { 
  background: url(../img/bg-ds/comp-bg.jpg) top right no-repeat;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}

.wrp-bg-company2 { 
  background: url(../img/bg-ds/comp-bg-main.png) top right no-repeat;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}


.border-fix-wrp1 { border: 2px dashed #ffffff; padding: 20px 0;}

.border-fix-wrp2 { 
  border: 1px solid #3d3d3d; padding: 20px 0;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}

.wrp-bg-company.is-visible, .wrp-bg-company2.is-visible,
.border-fix-wrp2.is-visible {  opacity: 1;  }


.wrp-bg-latest-News { 
  background-color: #000000;
  padding: 50px 0;
  opacity: 1;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}

.wrp-bg-latest-News.is-visible {  opacity: 1;  }

.wrp-bg-latest-white-news { 
  background-color: #000000;
  padding: 50px 0;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}

.wrp-bg-latest-white-news.is-visible {  opacity: 1;  }

.bg-about-wrp-animation {
  position: absolute; z-index: -1;
  width: 700px; height: 700px; margin: 0 auto; 
  display: block; left: 0; right: 0;
}
.bg-about-wrp-animation img {  
  opacity: 0;  
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.bg-about-wrp-animation.is-visible img {  
  opacity: 1;
  animation: visionAnimate 2s cubic-bezier(.02,1.06,.47,.99);
  backface-visibility: hidden;
  animation-duration: 6s;
}

@keyframes visionAnimate {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  10% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  10% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
 }


/* --------------------------------------------------------------------------
    Latest News Page
   -------------------------------------------------------------------------- */

.wrp-bg-news-1 { 
  background: url(../img/post/bg_post_01.jpg) no-repeat right top;
}


.wrp-bg-latest-white-news2 { 
  margin-top: 20px;
  background-color: #ffffff;
  padding: 50px;
  opacity: 0;
  transform: translateX(-60px);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  will-change: transform, opacity, transition;
}

.wrp-bg-latest-white-news2.is-visible {  opacity: 1; transform: translateX(0); }

.wrp-bg-latest-white-news2 iframe {
  opacity: 0;
  transform: translateX(-60px);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  will-change: transform, opacity, transition;

}

.wrp-bg-latest-white-news2 iframe.is-visible {  opacity: 1; transform: translateX(0); }

.wrp-bg-latest-white-news2 h1 { 
  font-size: 32px; 
  font-weight: 600; 
  opacity: 0; 
  transform: translateX(-120px);  
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out; 
  will-change: transform, opacity, transition;
}
.wrp-bg-latest-white-news2 h2 { 
  font-size: 28px; padding: 20px 0; opacity: 1; 
  transform: translateX(-60px);  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
  opacity .3s .25s ease-out; 
  will-change: transform, opacity, transition;
}

.wrp-bg-latest-white-news2 h3 { 
  font-size: 16px; font-weight: 600; opacity: 1; padding: 20px 0; 
  transform: translateX(60px);  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
  opacity .3s .25s ease-out; will-change: transform, opacity, transition;
}

.wrp-bg-latest-white-news2 h4 { 
  font-size: 28px; font-weight: 600; 
  opacity: 1; padding: 20px 0 0 0; transform: translateX(-60px);  
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
  opacity .3s .25s ease-out; 
  will-change: transform, opacity, transition;
}
  
  .text-fix-scroll-news {
    font-size: 16px;
    font-weight: 500; opacity: 1; 
    padding: 20px 0 0 0; transform: translateX(-160px);  
    transition: transform 4s .25s cubic-bezier(0,1,.3,1),
                opacity .3s .25s ease-out; 
    will-change: transform, opacity, transition;

  }

.wrp-bg-latest-white-news2 h1.is-visible, 
.wrp-bg-latest-white-news2 h2.is-visible, 
.wrp-bg-latest-white-news2 h3.is-visible, 
.wrp-bg-latest-white-news2 h4.is-visible,
.wrp-bg-latest-white-news2 .text-fix-scroll-news.is-visible  {
  transform: translateX(0); opacity: 1;
}

.bg-wrp-news-post {
  opacity: 0;
  z-index: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transform: translateX(-260px);
  will-change: transform, opacity;
}

.bg-wrp-news-post.is-visible {  opacity: 1; transform: translateX(0); }

.breadcrumb-fix1 { color: var(--first-color) !important;}
.breadcrumb-fix1 li, 
.breadcrumb-fix1 li a { color: var(--first-color) !important;}

.breadcrumb-fix1 li a:hover, 
.share-btn-fix a:hover { color: var(--yellow-hover-color) !important; transition: .3s;}

.share-btn-fix a { color: var(--first-color-light) !important; transition: .3s;}

.share-btn-fix2 a { color: var(--first-color-light) !important; transition: .3s;}
.share-btn-fix2 a:hover{ color: var(--first-color-light) !important; transition: .3s; background-color: var(--yellow-color);}

.wrp-title-01 { font-family: var(--body-font); color: var(--first-color-light); font-size: 32px; float: left;}
.wrp-title-02 { font-family: var(--body-font); color: var(--first-color-light); font-size: 30px; text-align: center;}
.wrp-title-03 { font-family: var(--body-font); color: var(--first-color-light); font-size: 30px; padding: 150px 0 100px 0; text-align: center;}
.wrp-title-04 { font-family: var(--body-font); color: var(--first-color-light); font-size: 20px; float: left; padding: 16px 0 0 0;}

.wrp-title-main { 
  margin: 100px 0 0 0; 
  opacity: 0;
    -webkit-transition: opacity .5s .25s ease-out;
    transition: opacity .5s .25s ease-out;
}
.wrp-title-main.is-visible {  opacity: 1; }

.wrp-title-sub { 
  margin: 100px 0 0 0; 
  opacity: 0;
    -webkit-transition: opacity .5s .25s ease-out;
    transition: opacity .5s .25s ease-out;
    padding-top: 120px;
}
.wrp-title-sub.is-visible {  opacity: 1; }

.wrp-text-right-viewAll { text-align: right; float: right; color: var(--first-color-light); margin: 12px 12px 0 0; font-style: 14px; }
.wrp-text-right-viewAll:hover { color: var(--yellow-color); transition: .3s; }

.vidWrp { 
  width: 100%;
  position:relative; 
  opacity: 0.8; object-fit: cover;
}
.vidWrp .viewVid { position: absolute; width: 100%; z-index: 1;}

.vidWrp2 { 
  width: 100%;
  position:relative; 
  opacity: 0.6; object-fit: cover;
}
.vidWrp2 .viewVid2 { width: 100%;}

.vidWrp3 { 
  width: 100%;
  position:relative; 
  object-fit:cover;
}
.vidWrp3 .viewVid3 { width: 100%;}


/* --------------------------------------------------------------------------
    Header
   -------------------------------------------------------------------------- */

.header{
  width: 100%;
  height: var(--header-height);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  background: linear-gradient(360deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8393732492997199) 22%, rgba(0,0,0,1) 79%);
  z-index: var(--z-fixed);
  transition: .5s;
}

.header a.hrd-right-text-click { color: var(--first-color-light); }
.header a.hrd-right-text-click:hover { color: var(--yellow-color); transition: .3s;}

.wrp-header-toggle{
  color: var(--first-color-light);
  font-size: 28px;
  cursor: pointer;
}
.imgDS-fix-logo { width: 200px;}


/* --------------------------------------------------------------------------
    Navigation
   -------------------------------------------------------------------------- */

.wrp-svg-icon-about {  width: 24px; height: 24px; }

.nav-list svg { width: 24px; height: 24px; }
.nav-list svg:hover {  fill: var(--yellow-color); transition: .3s; }


.l-navbar{
  position: fixed;
  top: 0;
  left: -30%;
  width: var(--nav-width);
  height: 100vh;
  background-color: var(--first-color);
  padding: .5rem 1rem 0 0;
  transition: .5s;
  z-index: var(--z-fixed);
  border-right: 1px solid #353535;
}

.nav{
  height: 95%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  font-size: 14px !important;
}

.nav-logo, .nav-link{
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  column-gap: 1rem;
  padding: .5rem 0 .5rem 1.5rem;
}

.nav-logo{ margin-bottom: 2rem; }
.nav-logo-icon{ font-size: 1.25rem; color: var(--yellow-color); }
.nav-logo-name{  color: var(--yellow-color); font-weight: 700; }

.nav-link {
  position: relative;
  color: var(--first-color-light);
  margin-bottom: 6px;
  transition: .3s;
}

.nav-link:hover  { color: var(--yellow-color); transition: .3s;  } 
.nav-icon        { font-size: 22px; }

/*social share button*/
.menu-item,
.menu-open-button {
  background: #EEEEEE;
  border-radius: 100%;
  width: 60px;
  height: 56px;
  margin-left: -58px;
  position: absolute;
  color: var(--grey-color2);
  text-align: center;
  line-height: 64px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.menu-open { display: none; }

.menuShare {
  margin: auto;
  position: absolute;
  text-align: center;
  box-sizing: border-box;
  font-size: 26px;
  z-index: 999;
 
}

.menuShare a.menu-item .fa{ color: #596778; }
.share-icon{ color: #596778; }
.menu-item:hover {   opacity: 1; color: var(--yellow-color); }

.menu-item:nth-child(3) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(4) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(5) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(6) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-open-button {
  z-index: 2;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}

.menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
  -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.menu-open:checked ~ .menu-item:nth-child(3) {
  transition-duration: 180ms;
  -webkit-transition-duration: 180ms;
  -webkit-transform: translate3d(0.08px, -55px, 0);
  transform: translate3d(0.08px, -55px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(4) {
  transition-duration: 280ms;
  -webkit-transition-duration: 280ms;
  -webkit-transform: translate3d(0.08px, 55px, 0);
  transform: translate3d(0.08px, 55px, 0);
}

.facebook_share_btn { background-color: #3b5998; }
.facebook_share_btn:hover {  color: #213255; text-shadow: none; }
.twitter_share_btn {  background-color: #00aced;}
.twitter_share_btn:hover {  color: #0078a3; text-shadow: none; }

/*end social share button*/


/*--- Show navbar movil ---*/
.show2 { left: 0; }

/*Add padding body movil
.body-pd{ padding-left: calc(var(--nav-width) + 1rem); }*/

/*Active links*/
.active{ color: var(--yellow-color); }

/*-- Banner Slider --- */
.wrp-slider-banner {
  display: block;
  padding: 10px; margin-left: 50px;
  position: absolute;
  top: 200px; z-index: 1;
}

.wrp-slider-banner h2 { font-size: 18px; font-family: var(--body-font); font-weight: 700; margin: 0; color: var(--yellow-color); }

.text-banner-slider-wrap { display: block; float: left;}
.text-banner-slider-wrap h1 {
  font-family: var(--body-font);
  line-height: 40px; color: var(--grey-color3);
}

.text-banner-slider-wrap h3 {
  color: #ffffff; font-size: 14px;
  font-weight: 700;
}

.no-text-list-banner { 
  display: block; height: 100px; width: 80px; color: #ffffff;
  font-size: 50px; font-family: var(--body-font); text-align: center;
  float: left; font-weight: 300;
}

/*-- Banner Slider --- */
.wrp-text-banner {
  display: block;
  padding: 100px 0; 
  margin: 0 auto;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transform: translateX(-60px);
  will-change: transform, opacity;
}

.wrp-text-banner.is-visible, 
.wrp-text-banner2.is-visible {  opacity: 1; transform: translateX(0); }

.wrp-text-banner h2, 
.wrp-text-banner2 h2 { font-size: 16px !important; font-family: var(--body-font); font-weight: 700; margin: 0; color: var(--yellow-color); }

.wrp-text-banner2 {
  display: block;
  padding: 10px 0; margin-left: 50px; margin-top: 20%;
  opacity: 0; width: 80%;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transform: translateX(-60px);
  will-change: transform, opacity;
}

.text-banner-wrap2 { display: block; float: left; width: 70%;}
.text-banner-wrap2 h1 {
  font-family: var(--body-font);
  line-height: 30px; color: var(--grey-color3);
  font-size: 26px; text-align: justify;
}


.no-text-list-banner2 { 
  display: block; height: 345px; padding-top: 50px; width: 80px; color: #ffffff;
  font-size: 50px; font-family: var(--body-font); text-align: center;
  float: left; font-weight: 300;
}

.no-text-list-banner3 { 
  display: block; height: 345px; padding-top: 30px; width: 80px; color: #ffffff;
  font-size: 50px; font-family: var(--body-font); text-align: center;
  float: left; font-weight: 300;
}

/* --------------------------------------------------------------------------
    Content
   -------------------------------------------------------------------------- */

.text-banner-wrap3 { display: block; float: left; width: 70%; color: var(--grey-color3);}
.text-banner-wrap3 h1 { font-size: 18px; text-align: justify;}

.text-banner-wrap4 { 
    display: block; padding: 20px 0;
    opacity: 0;
    transition: transform 4s .25s cubic-bezier(0,1,.3,1),
                opacity .3s .25s ease-out;
    transform: translateX(-60px);
    will-change: transform, opacity;
  }
  
.text-banner-wrap4.is-visible {  opacity: 1; transform: translateX(0); }

.text-banner-wrap4 h1 { font-family: var(--body-font); line-height: 30px; color: var(--grey-color3); font-size: 26px; }
.text-banner-wrap4 p { font-size: 20px; text-align: center; line-height: 24px;}


/* --------------------------------------------------------------------------
    Insight Page
   -------------------------------------------------------------------------- */

.wrp-bg-insight { 
  background: url(../img/bg-ds/insight-bg.jpg) top right no-repeat;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}

.wrp-bg-insight2 { 
  background: url(../img/bg-ds/insight-bg.jpg) top right no-repeat;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}

.wrp-bg-insight.is-visible, .wrp-bg-insight2.is-visible {  opacity: 1;  }

.box-wrp-insight-dashed { border: 2px solid #FBB040;  margin: auto !important;  }
.box-wrp-insight-dashed h1 { font-size: 22px !important; color: var(--yellow-color) !important; text-align: center;}
.box-wrp-insight-dashed ul { list-style: none; color: var(--first-color-light); padding: 20px 0;}
.box-wrp-insight-dashed p { font-size: 16px !important; color: var(--first-color-light);}

.img-fix-thumb-insight { 
  width: 100%; position:absolute; z-index: -1; opacity: 0;
  -webkit-transition: opacity .5s .25s ease-out;
  transition: opacity .5s .25s ease-out; 
}
.img-fix-thumb-insight.is-visible {  opacity: 1; }


.box-numb-wrp-inside { 
  background-color: var(--yellow-color); display: block; 
  width: 45px; height: 44px; border-radius: 50px; 
  font-size: 30px; text-align: center; margin: -60px auto 20px auto;
}

.box-numb-wrp-inside2 { 
 display: block; background-color: var(--grey-color2);
  width: 45px; height: 44px; border-radius: 50px;  color: var(--grey-color);
  font-size: 30px; text-align: center; margin: -60px auto 20px auto;
}
.box-numb-wrp-inside3 { 
  display: block; background-color: var(--yellow-color-two);
   width: 45px; height: 44px; border-radius: 50px;  color: var(--grey-color2);
   font-size: 30px; text-align: center; margin: -60px auto 20px auto;
 }

 .text-top-animate-line1 { color: var(--grey-color3);}

 .wrp-animate-line1 { transform: rotate(16deg); }

#Layer-Solutions-Wrap { width: 50%;}


/* --------------------------------------------------------------------------
    Clients & Partners
   -------------------------------------------------------------------------- */

.wrp-bg-clients { 
  background: url(../img/bg-ds/clients-bg.jpg) bottom center no-repeat;
  opacity: 0; padding: 200px 0 360px 0;
  background-size:contain;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}
 
.wrp-bg-clients.is-visible {  opacity: 1;}

.wrp-text-clients {
  display: block;
  padding: 100px 0; 
  margin: 0 auto;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transform: translateX(-60px);
  will-change: transform, opacity;
}

.wrp-text-clients.is-visible {  opacity: 1; transform: translateX(0); }

.clients-text-no { 
  display: block; height: 200px; padding-top: 30px; width: 80px; color: #ffffff;
  font-size: 50px; font-family: var(--body-font); text-align: center;
  float: left; font-weight: 300;
}

.line-clear-wrp { display: block;}

.pdd-wrp-logo { padding: 90px 0;}

/* --------------------------------------------------------------------------
    Banner Slider
   -------------------------------------------------------------------------- */

/*--- Pic Banner 1 ----*/
.bg-one-sldr    { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8393732492997199) 52%, rgba(0,0,0,1) 100%);}

.pic-one        { width: 400px; position: absolute; top: 20px; left: 110%;}
.pic-two        { width: 100px; position: absolute; top: 180px; left: 120%;}
.pic-three      { width: 800px; position: absolute; left: 820px; top: 250px;}
.pic-four       { width: 500px; position: absolute; left: 80%; top: 5%; }
.pic-five       { width: 600px; position: absolute; top: 200%;}
.pic-six        { width: 400px; position: absolute; top: 20%;}
.pic-seven      { width: 500px; position: absolute; left: 190%;}


/*--- Pic Banner 2 ----*/
.bg-two-sldr    { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8393732492997199) 52%, rgba(0,0,0,1) 100%);}

.pic-two-one    { width: 40px; position: absolute; top: 450px; left: 130%;}
.pic-two-two    { width: 500px; position: absolute; top: 110px; left: 150%;}
.pic-two-three  { width: 800px; position: absolute; top: 250px; left: 50%;}
.pic-two-four   { width: 500px; position: absolute; top: 65%; left: 20%;}
.pic-two-five   { width: 400px; position: absolute; left: 10%;}
.pic-two-six    { width: 400px; position: absolute; top: 15%; left: 100%;}

#demos {  display: block; height: 200px; }

/* --------------------------------------------------------------------------
    Carousel
   -------------------------------------------------------------------------- */


.carousel-item { height: 600px; }
.carousel-control-prev, .carousel-control-next { width: 5% !important;}

.carousel-indicators [data-bs-target] { 
    width:10px; height:10px; margin:5px 3px;
    background-color: var(--yellow-color); 
    display:block; 
		transition:opacity .2s ease;
		border-radius:30px;
    border-bottom: 0 !important; border-top: 0 !important;
    --webkit-backface-visibility: visible;
}


.img-box { width: 550px; position: relative;}


.wrp-list-top-pdd { padding-top: 280px;}

.carou1 { margin: 30px 0 80px 0px;}
.carou2 { margin-top: 40px;}

.carou1 .owl-dots, 
.carou2 .owl-dots, 
.carou3 .owl-dots { text-align:left; -webkit-tap-highlight-color: transparent;}

.carou1 .owl-nav, 
.carou2 .owl-nav, 
.carou3 .owl-nav { margin-top:20px ; margin-left: 38%;  margin-bottom: 20px;}

.carou1 .owl-nav [class*=owl-], 
.carou2 .owl-nav [class*=owl-] { 
  color:#FFF; font-size:14px; margin:5px; padding:4px 7px; background:#D6D6D6; 
  display:inline-block; cursor:pointer; border-radius:140px;
}

.carou1 .owl-nav [class*=owl-]:hover, 
.carou2 .owl-nav [class*=owl-]:hover,
.carou3 .owl-nav [class*=owl-]:hover  { 
  background:#e9e9e9; color:#000000; text-decoration:none; transition: .3s; 
}
.carou1 .owl-nav span, 
.carou2 .owl-nav span, 
.carou3 .owl-nav span { margin: 0 !important; padding: 0 !important;}

.carou1 .owl-nav .disabled, 
.carou2 .owl-nav .disabled,
.carou3 .owl-nav .disabled  {opacity:.5; cursor:default}

.carou1 .owl-nav.disabled+.owl-dots, 
.carou2 .owl-nav.disabled+.owl-dots,
.carou3 .owl-nav.disabled+.owl-dots { margin:5px 0;}

.carou1 .owl-dots .owl-dot, 
.carou2 .owl-dots .owl-dot, 
.carou3 .owl-dots .owl-dot   {display:inline-block; zoom:1;}

.carou1 .owl-dots .owl-dot span, 
.carou2 .owl-dots .owl-dot span,
.carou3 .owl-dots .owl-dot span {
		width:10px; height:10px; margin:5px 3px; 
		background:#D6D6D6; display:block; 
		transition:opacity .2s ease;
		border-radius:30px; margin-top: 20px;
    --webkit-backface-visibility: visible;
}
.carou1 .owl-dots .owl-dot.active span,
.carou1 .owl-dots .owl-dot:hover span,
.carou2 .owl-dots .owl-dot.active span,
.carou2 .owl-dots .owl-dot:hover span,
.carou3 .owl-dots .owl-dot.active span,
.carou3 .owl-dots .owl-dot:hover span {background:#fec300; transition: .3s; }

.wrp-carou-latest-news { padding: 0;}

.figOp { 
  display: block; border: 1px solid #aeaeae; 
  background-color: var(--grey-color); 
  padding: 30px; border-radius: 10px;
  font-family: var(--body-font); height: 200px; 
  color: var(--yellow-color);
  opacity: 0;
    -webkit-transition: opacity .5s .25s ease-out;
    transition: opacity .5s .25s ease-out;
}

.figOp.is-visible {  opacity: 1; }

.figOp:hover { background-color: var(--grey-color2);  color: var(--grey-color); }
.figOp.disabled { background-color: var(--grey-color2) !important;  color: var(--grey-color) !important;  opacity: 0.8 !important;}


.figOp h5 { 
  font-family: var(--body-font); display: block; 
  text-align: left; font-weight: 600; line-height: 20px; 
  font-size: 20px;
}




/* --------------------------------------------------------------------------
    Safe Hand
   -------------------------------------------------------------------------- */

.wrp-bg-info-contact { 
  padding: 100px;
  background: url(../img/bg-ds/contact-bg.png) left top no-repeat; 
  background-color: var(--yellow-color) !important;
  opacity: 0;
  -webkit-transition: opacity .5s .25s ease-out;
  transition: opacity .5s .25s ease-out;
}

.wrp-bg-info-contact.is-visible {  opacity: 1; }


.wrp-bg-info-contact h1 { font-size: 30px; font-weight: 600; line-height: 24px;}
.wrp-bg-info-contact h3 { font-size: 16px; text-align: justify;}

.list-address-fix { padding: 10px; margin: 0; }
.list-address-fix a { color: var(--first-color);}
.list-address-fix p { font-size: var(--dsc-font-12);}


.get-in-touch {
  display: block;
  padding: 10px 0; margin-left: 50px;
  opacity: 0; width: 90%;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transform: translateX(-30px);
  will-change: transform, opacity;

}

.get-in-touch.is-visible {  opacity: 1; transform: translateX(-10px); }

.t-footer-dsc { font-size: var(--dsc-font-12);}
.address-footer { font-size: var(--dsc-font-12); padding: 0 10px;}

/* --------------------------------------------------------------------------
    Cookies Pop-up
   -------------------------------------------------------------------------- */


.callout { position: fixed; z-index: 900; bottom: 135px; right: 20px; margin-left: 20px; max-width: 300px; border: 1px solid #3d3d3d; }

.callout-container {
  padding: 12px 25px; border-top: solid 1px #353535; 
  background-color: #000000;
  color: var(--first-color-light);
}
.callout-container  p { font-size: 12px;}
.callout-container a { 
  display: block; border: 1px solid #3d3d3d; 
  margin: 10px 0; text-align: center;
  padding: 10px 0; font-size: 12px; color: var(--first-color-light);
}
.callout-container a:hover { background-color: #3d3d3d; transition: .3s; }

.close-btn-cookies {
  position: absolute;
  top: 5px;
  right: 15px;
  color: var(--first-color-light);
  font-size: 30px;
  cursor: pointer;
  z-index: 100 !important;
}

.close-btn-cookies:hover {color: lightgrey; transition: .3s;}


/* --------------------------------------------------------------------------
    5 Solutions SVG
   -------------------------------------------------------------------------- */

.wrp-sol-pdd1 { padding: 200px 0 100px 0;}   

.wrp-bg-solutions { 
  background: url(../img/bg-ds/solutions-bg.png) top right no-repeat;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}

.wrp-bg-solutions.is-visible { opacity: 1;}

/* -- Main Animation Solutions --- */

.bg-about-wrp-sol-animation img {
  position: absolute; z-index: 1;
  /*--width: 700px; left: 0;---*/ 
  height: 700px; margin: 0 auto; 
  display: block; right: 6%;
}

.bg-about-wrp-sol-animation.is-visible { opacity: 1;}


/* -- Advance Analytics --- */
.wrp-bg-solutions2 { 
  background: url(../img/bg-ds/solutions-bg-aa.png) top right no-repeat;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}

.wrp-bg-solutions2.is-visible { opacity: 1;}

/* -- Advance Analytics --- */
.wrp-bg-solutions-ae { 
  background: url(../img/bg-ds/solutions-bg-ae.png) top right no-repeat;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}

.wrp-bg-solutions-ae.is-visible { opacity: 1;}

/* -- Application Development --- */
.wrp-bg-solutions3 { 
  background: url(../img/bg-ds/solutions-bg-ad.png) top right no-repeat;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}
.wrp-bg-solutions3.is-visible { opacity: 1;}

/* -- Event Management --- */
.wrp-bg-solutions4 { 
  background: url(../img/bg_event_man.png) top right no-repeat;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}
.wrp-bg-solutions4.is-visible { opacity: 1;}

/* -- Sports Nation Building --- */
.wrp-bg-solutions5 { 
  background: url(../img/bg-ds/solutions-bg-snb.png) top right no-repeat;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}
.wrp-bg-solutions5.is-visible { opacity: 1;}

.wrp-4-sol { display: block; width: 180px; margin: 0px auto; padding: 20px;}
.wrp-4-sol:hover { background-color: #181818; border-radius: 10px; transition: .3s; }
.wrp-4-sol h5 {  color: var(--first-color-light); text-align: center; line-height: 18px;}

.twrp-4-title { 
  font-size: 40px; color: var(--first-color-light); 
  display: block; padding: 40px 0; text-align: center;
  font-family: var(--body-font); line-height: 5px; font-weight: 700;
}

.wrp-icon5-top { width: 200px; padding: 0 0 20px 70px; }

.wrp-text-banner3 {
  display: block;
  margin-left: 50px; margin-top: 20%;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transform: translateX(-60px); width: 80%;
  will-change: transform, opacity; }

.wrp-text-banner3 h2 { font-size: 16px !important; font-family: var(--body-font); font-weight: 700; margin: 0; color: var(--yellow-color); }
.wrp-text-banner3.is-visible {  opacity: 1; transform: translateX(0); }

.text-banner-wrap5 { display: block; float: left; /* width: 70%; */ width: 75%; text-align: justify;}
.text-banner-wrap5 h1 {
  font-family: var(--body-font);
  line-height: 26px;  /*--line-height: 30px; --*/
  color: var(--yellow-color-two);
  font-size: 22px; /*--font-size: 26px; --*/
}

.wrp-text-banner4 {
  display: block;
  margin-top: 20%;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transform: translateX(-60px); 
  /* -- width: 80%; --- */
  will-change: transform, opacity; }

.wrp-text-banner4.is-visible {  opacity: 1; transform: translateX(0); }

.wrp-text-banner4 h2 {
  font-size: 40px; font-family: var(--body-font); font-weight: 500; 
  margin: 0; color: var(--first-color-light); line-height: 36px;
}

.no-text-list-banner4 { 
  display: block; height: 345px; padding-top: 50px; width: 80px; color: #ffffff;
  font-size: 50px; font-family: var(--body-font); text-align: center;
  float: left; font-weight: 300;
}

.box-num-sol {  
  display: block; height: 40px; width: 40px; 
  padding: 8px 0px; margin: 0 auto; color: var(--first-color);
  font-size: 16px; font-weight: 600;
  background-color: var(--yellow-color-two); border-radius: 20px; 
}

.wrp-5-sol-pdd1 { padding: 100px 0; }

/* --------------------------------------------------------------------------
    Data Management Page
   -------------------------------------------------------------------------- */

.wrp-bg-data-man { 
  background: url(../img/bg-ds/bg_data_Man.png) top right no-repeat;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}
  
.wrp-bg-data-man.is-visible { opacity: 1;}

.wrp-data-man {  padding: 20px 0; }
.wrp-data-man ul { list-style: none; padding: 0;}
.wrp-data-man ul li { font-size: 20px; color: var(--yellow-color); text-align: left;}

/* --------------------------------------------------------------------------
    Sports Asset Management
   -------------------------------------------------------------------------- */

   .wrp-bg-sports-man { 
    background: url(../img/bg-ds/bg_event_man.png) top right no-repeat;
    opacity: 0;
    transition: transform 4s .25s cubic-bezier(0,1,.3,1),
                opacity .3s .25s ease-out;
  }
    
  .wrp-bg-sports-man.is-visible { opacity: 1;}
  
  .wrp-bg-sports-man {  padding: 20px 0; }
  .wrp-bg-sports-man ul { list-style: none; padding: 0;}
  .wrp-bg-sports-man ul li { font-size: 20px; color: var(--yellow-color); text-align: left;}

/* --------------------------------------------------------------------------
  Sports Asset Management
  -------------------------------------------------------------------------- */

  .wrp-bg-asset-man { 
  background: url(../img/bg-ds/solutions-bg-sa.png) top right no-repeat;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
}
  .wrp-bg-asset-man.is-visible { opacity: 1;}


/* --------------------------------------------------------------------------
    Pop-up Contact
   -------------------------------------------------------------------------- */

.pop-upFix {
  background-color: var(--yellow-color-pop); 
}

.pop-upFix .modal-content { 
    background-color: var(--first-color) !important;
    color: var(--first-color-light);
    border-radius: 20px;
}

.pop-upFix .modal-header .btn-close { color: var(--first-color-light) !important;}
.modal-header .btn-close {  background-color: var(--first-color-light); opacity: 1; border-radius: 20px;}

.pop-upFix .modal-body { padding: 20px 0px !important;}
.pop-upFix .modal-header { padding: 20px 0px !important;}
.pop-upFix .modal-content { padding: 20px 30px !important;}
.pop-upFix .modal-footer { padding: 30px 0px 20px 20px !important;}

.pop-upFix .form-control { 
  background-color: var(--grey-color2) !important; border-radius: 0px !important; 
  border-color: var(--grey-color); color: var(--first-color-light) !important;
}

.btn-def1 { 
  border-radius: 0px !important; font-size: 16px; 
  background-color: var(--grey-color) !important;
  color: var(--first-color-light) !important;
  font-size: 14px; padding: 15px 20px; font-weight: 600;
}

.btn-def2 { 
  border-radius: 0px !important; font-size: 16px; 
  background-color: var(--yellow-color) !important;
  color: var(--first-color) !important; display: block;
  font-size: 14px; padding: 15px 20px; font-weight: 600;
}

.btn-def2:hover { background-color: var(--yellow-hover-color); color:var(--first-color); transition: .3s;}

.wrp-box-wide { color: var(--first-color-light); padding: 20px;}
.wrp-box-wide h4 { font-size: 30px; font-family: var(--body-font); font-weight: 600; line-height: 30px;}
.wrp-box-wide span { padding: 10px 0 0 0;}
.wrp-box-wide:hover { background-color: var(--yellow-color); color:var(--first-color); transition: .3s;}

/* --------------------------------------------------------------------------
    Login Page
   -------------------------------------------------------------------------- */

.tFont-small-size { font-size: 14px; color: var(--first-color-light);}


.tFont-small-size-wrp { font-size: 18px; color: var(--first-color-light); display: block; margin: 25px 0;}
.tFont-small-size-wrp:hover { color:var(--yellow-color); transition: .3s;}

.tFont-small-size-wrp span { padding: 6px 0 0 10px; position: absolute; }
.tFont-small-size-wrp i { font-size: 40px;}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
  }

  .form-signin .checkbox {
  font-weight: 400;
  }

  .form-signin .form-floating:focus-within {
  z-index: 2;
  }

  .form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  }

  .form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  }

 /* --------------------------------------------------------------------------
    Team DSC
   -------------------------------------------------------------------------- */ 

.profile_wrp_dsc { padding: 20px 0 0 0; color: var(--first-color-light); text-align: center; }
.profile_wrp_dsc img { border-radius: 10px;}
.profile_wrp_dsc h1 { font-size: 18px; line-height: 20px; padding: 20px 0 0 0; font-weight: bold;}
.profile_wrp_dsc h2 { font-size: 14px;}


.wrp-text-banner-dscteam.is-visible {  opacity: 1; transform: translateX(0); }  
.wrp-text-banner-dscteam {
  display: block;
  padding: 10px 0; 
  opacity: 0; 
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transform: translateX(-60px);
  will-change: transform, opacity;
}
.wrp-text-banner-dscteam h2 { 
  font-size: 16px !important; font-family: var(--body-font); 
  font-weight: 700; margin: 0; color: var(--yellow-color); }

.text-banner-dscteam { display: block; float: left; /* width: 70%; */ width: 75%; text-align: justify;}
.text-banner-dscteam h1 {
  font-family: var(--body-font);
  line-height: 26px;  /*--line-height: 30px; --*/
  color: var(--yellow-color-two);
  font-size: 22px; /*--font-size: 26px; --*/
}

.text-team { font-size: 20px; padding: 60px 0 0 0; color: var(--first-color-light); text-align: center;}