@charset "utf-8";
/* CSS Document */
#mainNav .navbar-nav .nav-item .nav-link{font-family: 'Merriweather', serif;
 font-weight: 700; font-style: normal;  padding-top: 0.75rem; padding-bottom: 0.75rem; position: relative;}
#mainNav .navbar-brand img{width:225px;}
#mainNav .navbar-nav .nav-item .nav-link:before {background-color: #000; content: ""; width: 6px; height: 6px; position: absolute; top: 0; left: 50%; border-radius: 10rem; margin-left: -3px; opacity: 0; transition: opacity 0.25s ease;}
#mainNav .navbar-nav .nav-item .nav-link:hover:before{opacity: 1;}

#mainNav .navbar-nav .nav-item .nav-link.active:before{opacity: 1!important;}


#firm{background-color: rgba(17,120,191,0.8);}


.title-en{font-family: "acier-bat-solid", sans-serif; text-transform: capitalize; font-weight: 400; font-style: normal; font-size: 1.5rem; position: relative; padding-left: 20px;}
.title-en:before{background-color: #000; content: ""; width: 8px; height: 8px; position: absolute; left: 0; top: 50%; border-radius: 10rem; margin-top: -4px; transition: opacity 0.25s ease;}

.title-en-top{padding-left: 0!important; padding-top: 20px;}
.title-en-top:before{top: 0!important; left: 50%!important; margin-left: -4px; margin-top: 0!important;}

.title-en.text-blue:before{background-color: var(--dclue-blue);}
.title-en.text-cyan:before{background-color: var(--dclue-cyan);}
.title-en.text-orange:before{background-color: var(--dclue-orange);}
.title-en.text-green:before{background-color: var(--dclue-green);}
.title-en.text-white:before{background-color: var(--dclue-white);}

.title{font-size: 1.875rem; line-height: 42px;}
.subtitle-line{font-size:1.125rem; line-height: 40px;}

#services a{background-color:#fff; display: block; text-decoration: none; color: #000; min-height: 460px; transition: background-color 0.5s ease;}
#services a .content{padding-left:1.25rem; padding-right:1.25rem;}
#services a .content p{text-align: left; padding-left:1.25rem; padding-right:1.25rem; line-height: 1.7;}
#services a span{background-color: #000; color: #fff; border-radius: 10rem; width: 32px; height: 32px; display: block; text-align: center; position: absolute;     right: 25px; bottom:25px;}
#services a span i::before{font-weight: 600!important; padding: 8px 9px;}

#services a:hover{background-color: #19c9f3; color: var(--dclue-white);}
#services a:hover span{background: transparent; border:#fff solid 2px;}

#services a:hover span i::before {padding: 6px 7px;}
.creativity{position:absolute; top: -15%; right: -15%; animation: spin 15s linear infinite; z-index: -1}
#services .content .eng{top: -100px;
    right: 10px;
    width: 146px;
    background-image: url(../images/service-bg.png);
    height: 130px;
    background-repeat: no-repeat;
    opacity: 0.5;}
#results{padding-top: 9rem;}
#results .creativity{left: -15%; top:0;}
#about .creativity{right: -8%; top:-55%;}
#results .col-md-6 a{ margin-bottom: 25px; display: inline-block;}
#results .tp-results{margin-left: 10px;}

.bttn{border-radius: 10rem; padding-left: 2.2rem; padding-right: 2.2rem; padding-top: 0.75rem; padding-bottom: 0.75rem; color: var(--dclue-white)!important; text-decoration: none; font-family: "monopin-j", sans-serif; font-style: normal; letter-spacing: .5px; display: inline-block; }
.bttn:hover, .bttn-lg:hover{background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));}


.bttn-lg{border-radius: 10rem; padding-left: 2.2rem; padding-right: 2.2rem; padding-top: 1.25rem; padding-bottom: 1.25rem; color: var(--dclue-white)!important; text-decoration: none; font-family: "monopin-j", sans-serif; font-style: normal; letter-spacing: .5px; display: inline-block; font-size: 1.5rem; font-weight: 600;}

.tel-no p{font-size: 1.375rem; font-weight: 600;}
.tel-no h5{margin-top: 0!important; font-family: "acumin-pro-condensed", sans-serif; font-size: 50px; font-weight: 700; font-style: normal; letter-spacing: .5px; }
.tel-no span{font-size: 14px;}


h4 span{font-weight: 400; font-size: 18px; margin-bottom: 10px;}


footer h1{font-size: 1.125rem;}
footer h5{font-family: "acumin-pro-condensed", sans-serif; font-weight: 700; font-style: normal; letter-spacing: .5px; font-size: 18px;}
footer span{font-size: 11px;}
footer p{font-size: 14px;}


footer .nav-list {list-style: none;}
footer .nav-list li {width: calc(50% - 10px); box-sizing: border-box;}
footer .nav-list {border-right: #fff solid 1px; margin-right: 20px;}
footer .nav-list:last-child {border-right:none;; margin-right: 0;}
footer .nav-list li a{color: #fff; text-decoration: none; display: block; position: relative; padding-left: 15px; padding-top: 0.685rem; padding-bottom: 0.685rem;} 



footer .nav-list li a:before {background-color: #fff; content: ""; width: 6px; height: 6px; position: absolute; top: 50%; left: 0; border-radius: 10rem; margin-top: -3px; opacity: 0; transition: opacity 0.25s ease;}
footer .nav-list li a:hover:before{opacity: 1;}

.copyright{font-size:14px; }

.fadein {
  opacity: 0;
}

@media (max-width: 768px) {.creativity{top: -5%; width:90%;} footer .nav-list{width: 100%!important;}}
@media (max-width: 540px) {
	.creativity{top: -3%; width:80%;} 
	.title{font-size:2rem} 
	.bttn-lg{font-size: 1.2rem;} 
	footer .d-flex{display: block!important;}
	footer .d-flex img{margin-bottom: 25px!important;}	
	footer .ms-3{margin-left: 0!important}
}


 .swiper-container {
      width: 100%;
      height: 100%; overflow: hidden;
    }



    .swiper-slide {
      text-align: center;
      background: #fff;
 
	 border: solid 1px #cccccc;
	border-radius: 5px;	
		
    }


.swiper-slide span{color:#999; font-size: 14px;}
.swiper-slide .text-box{padding:20px 16px;}
.swiper-container .swiper-pagination-bullet-active{background-color: rgba(var(--dclue-black))!important;}
.swiper-pagination-bullet{opacity: 1!important; border: solid 2px #000!important; background: transparent!important; width: 10px!important; height: 10px!important;}



.swiper-container-h
    {
      width:96%;
      margin:0px auto;
    }
    .swiper-container-h .swiper-wrapper
    {
      height:80%;
      margin-top:3%;
    }

    .swiper-pagination-bullet-active {
      background-color: #fff;
    }








@keyframes spin {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}




@keyframes fadeAnimation {
  from {
    opacity: 0; /* Animation starts with opacity 0 */
    transform: translateY(20px); /* Optional: Slide up animation */
  }
  to {
    opacity: 1; /* Animation ends with opacity 1 */
    transform: translateY(0); /* Optional: Reset translation */
  }
}