@import url('https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap');
body{font-family: "TikTok Sans", sans-serif; font-size: 16px; font-weight: 400; width: 100%;   cursor: default; background-color: white;}
a, button, input{outline: none;}
.tiktok {font-family: "TikTok Sans", sans-serif;}
.hazelnuts{font-family: 'TT Hazelnuts';}
.mision-gradient{
  background: #000000;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}
/* HEADER */
.header {position: fixed; top: 0; left: 0; width:  100%; z-index: 99;}
.m-menu-slide { transition: transform 0.35s ease;}
.m-menu-open { transform: translateY(0); }
.m-menu-closed { transform: translateY(-100%); }
footer .activemenu{color: #052A5D; }
#m-menu .activemenu{border-color: #fff; }
.sticky-header .logo{ height: 50px; transition: all 0.4s linear;}
#line2 , #line1 {transform-origin: center;}
.open .linea { transform: translate(10px, 10px) rotate(60deg); width: 27px !important;}
.open .lineb { transform: translate(1px, -1px) rotate(-60deg); width: 27px !important;}
.open .linec { transform: translate(7px, -1px) rotate(0deg); width: 27px !important;}
.team-gradient{
  background: #000;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 1) 100%);
}
.team-group:hover .team-gradient{ background: rgba(183, 40, 40, 0.70);}
.sticky-header .header-bg{
 opacity: 100%;
 transition: all 0.4s linear;
 background-color: #434343;
 box-shadow: 0px 0px 30px 0px #00000021;
}
 .sub-title {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  font-family: 'TT Hazelnuts';
  letter-spacing: 6%;
  display: flex;
  align-items: center;
  color: #052A5D;
  gap: 10px; 
}

.sub-title::before {
  content: "";
  display: inline-block;
  width: 20px;   
  height: 2px;   
  background-color: #052A5D; 
}
.title{
font-size: 40px;
line-height: 53px;
text-transform: capitalize;
font-family: "TikTok Sans", sans-serif;
color: #212121;
}
.paragraph{
font-size: 18px;
line-height: 29px;
color: #373737;
font-family: "TikTok Sans", sans-serif;
}

#banner { z-index: 1; }
.circle {
   height: 60%;
  aspect-ratio: 1 / 1;
  z-index: 5;
  border-radius: 50%;
}
 ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #052A5D; }

.home-carousel .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none; 
}

.home-carousel .owl-prev, 
.home-carousel .owl-next {
    position: absolute;
    width: 50px !important;
    height: 50px !important;
    pointer-events: auto; 
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    color: transparent !important;
    transition: transform 0.3s ease;
}


.home-carousel .owl-prev { 
    left: 40px; 
    background-image: url('../images/home/left.svg') !important; 
}
.home-carousel .owl-next { 
    right: 40px; 
    background-image: url('../images/home/right.svg') !important; 
}

.home-carousel .owl-prev:hover, 
.home-carousel .owl-next:hover {
    transform: scale(1.2);
}
.owl-carousel .owl-nav {position: absolute; z-index: 9;  width: 100%;}
 .owl-carousel .owl-prev,  .owl-carousel .owl-next {color: rgba(255, 255, 255, 0)!important;    transition: all ease 800ms; width: 45px!important; height: 45px!important;}
 .owl-carousel .owl-prev {cursor: pointer; background: url('../images/home/left.svg')  center no-repeat !important;  background-size: 100%!important; }
 .owl-carousel .owl-next  {cursor: pointer; background: url('../images/home/right.svg')  center no-repeat !important;  background-size: 100%!important; }
 .case-carousel .owl-nav { top: inherit; left: 80%; bottom: 0px; }
 .owl-carousel .owl-prev {cursor: pointer; background: url('../images/home/left.svg')  center no-repeat !important;  background-size: 100%!important; }
 .owl-carousel .owl-next  {cursor: pointer; background: url('../images/home/right.svg')  center no-repeat !important;  background-size: 100%!important; }
 .team-carousel .owl-prev {cursor: pointer; background: url('../images/inner/prew.svg')  center no-repeat !important;  background-size: 100%!important; }
 .team-carousel .owl-next {cursor: pointer; background: url('../images/inner/right.svg')  center no-repeat !important;  background-size: 100%!important; }
.team-carousel .owl-nav {left: -110px; bottom: 0px;}
 .pre-card {
  flex: 1;
  transition: all 0.3s linear;
}

/* Hover OR default active card */
.pre-card:hover,
.pre-card.active {
  flex: 2;
}

.pre-card:not(:hover):not(.active) {
  flex: 0.9;
}

.pre-card:hover .pre-img,
.pre-card.active .pre-img {
  transform: scale(1.1);
}

.pre-card:hover .pre-content, 
.pre-card.active .pre-content {
  opacity: 100%;
}

.pre-card:hover .pre-content p,  .pre-card:hover .pre-content .title-pre, .pre-card.active .pre-content .title-pre,
.pre-card.active .pre-content p{
  display: block;
} 
.pre-card:hover .post-content,
.pre-card.active .post-content {
  opacity: 0;
}

@media (max-width: 1536px) {.home-carousel .owl-prev { position: absolute; left: 100px;} .home-carousel .owl-next { position: absolute; right: 100px;}}
@media (max-width: 1280px) {.home-carousel .owl-prev { position: absolute; left: 70px;} .home-carousel .owl-next { position: absolute; right: 70px;}
.paragraph{
font-size: 16px;
line-height: 27px;
}
}
@media (max-width: 1024px) {
  .team-carousel .owl-nav {left:40%; bottom: inherit;}

  .home-carousel .owl-prev { position: absolute; left: 20px;}
.home-carousel .owl-next { position: absolute; right: 20px;}
  .circle {
  height: 400px;
  width: 400px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}
.owl-carousel .owl-prev,  .owl-carousel .owl-next { width: 35px!important; height: 35px!important;}
.sticky-header .logo{ height: 40px;}
.sub-title {
  font-size: 16px;
  letter-spacing: 6%;
  gap: 8px; /* space between line and text */
}
.title{
font-size: 35px;
line-height: 46px;
}
.paragraph{
font-size: 16px;
line-height: 25px;}
}
@media (max-width: 776px) {
  .circle {
  height: 350px;
  width: 350px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}
.nav-link::before { margin-left: 0px; }
}
/* Responsive sizes */
@media (max-width: 640px) { .sticky-header .logo{ height: 35px;}
.circle {
  height: 300px;
  width: 300px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}
.owl-carousel .owl-prev,  .owl-carousel .owl-next { width: 30px!important; height: 30px!important;}
 .home-carousel .owl-prev { position: absolute; left: 10px;}
.home-carousel .owl-next { position: absolute; right: 10px;}
.sub-title {
  font-size: 12px;
  letter-spacing: 6%;
  gap: 6px; /* space between line and text */
}
.title{
font-size: 30px;
line-height: 40px;
}
.paragraph{
font-size: 12px;
line-height: 22px;}
}