/* Written by TanJid */

* {
    
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    /*transition: 1s;*/
}

body {
    background-color: var(--primary-color);
    /*overflow: hidden;*/
}

:root{
    --primary-color: #D7F3F3;
    --secondary-color: #103737;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  z-index: 9999;
}

.preloader img {
    position: absolute;
    width: 45px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.preloader.hide-preloader {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.preloader p {
    font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
    color: var(--secondary-color);
    letter-spacing: 1px;
    font-size: 9px;
    text-align: center;
    position: absolute;
    padding-top: 125px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dark-mode{
    --primary-color: #081919;
    --secondary-color: #D7F3F3;
}

#dark-toggle{
    width: 30px;
    margin: 10px 20px;
    cursor: pointer;
}

#sticky-element {
    position: static;
    background: var(--primary-color);
    z-index: 999;
    transition: 1s;/*BGFade*/
}

#sticky-placeholder {
    height: 60px;
    background: var(--primary-color);
    clear: both;
    visibility: hidden;
    transition: height 0.2s ease-out;
}

.teejay{
    width: 100%;
    height: 100vh;
    background: var(--primary-color);
    position: relative;
    transition: 1s;/*BGFade*/
}

.teejayAlt{
    width: 100%;
    /*height: 100vh;*/
    background: var(--primary-color);
    position: relative;
    transition: 1s;/*BGFade*/
}

.teejayEgg{
    
    width: 100%;
    /*height: 100vh;*/
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    /*transition: 1s;/*BGFade*/
}

iframe{
    background: black;
    background-image: url("TanJid_Creations_Intro.gif");
    background-size: 40%;
    background-repeat:no-repeat;
    background-position: center center;  
    border-radius: 20px;
    border:0;
    z-index: 99;
}

.sreel{
    background-size: 16%;
}

.reels{
    background-size: 100%;
}

.teejayVInfo{
    width: 560px;
    height: 420px;
    display:inline-flex;
    border-radius: 22px;
    background: #1A908F;
    margin: 4px 2px;
    box-shadow: 0 5px 10px -5px rgba(0,0,0,0.4);
}

.teejayVInfo h2 {
    font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
    color: #D7F9F9;
    position:absolute;
    letter-spacing: 0;
    font-size: 16px;
    padding-top: 333px;
    align-content: center;
    width: 560px;
}

.teejayVInfo p {
    font-family:courier, courier new, serif;
    color: #D7F9F9;
    position:absolute;
    letter-spacing: 0;
    font-size: 16px;
    padding-top: 358px;
    /*padding-left: 20px;*/
    align-content: center;
    width: 560px;
}

.teejayVidS{
    width: 100%;
    height: 80%;
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--primary-color);
    display: flex;
    justify-content: center;
    transition: 1s;/*BGFade*/
}

.teejayVid{
    width: 100%;
    /*height: 60%;*/
    background: var(--primary-color);
    display: flex;
    justify-content: center;
    transition: 1s;/*BGFade*/
}

.teejayVid h1{
    font-size: 54px;
    color: var(--secondary-color);
    margin-bottom: 20px;
    transition: 1s;
}

.teejayVid p{
    /*color: #606163;*/
    line-height: 22px;
}


.teejayVid2{
    text-align: center;
    margin: 10px 80px;
}

.teejayVid2 h1{
    color: var(--secondary-color);
}

.teejayVid2 h2{
    color: var(--secondary-color);
}

.teejayVid2 p{
    /*color: #606163;*/
    line-height: 22px;
}

.teejayVid3{
    
    width: 100%;
    /*height: 100vh;*/
    /*background: var(--primary-color);*/
    display: flex;
    justify-content: center;
    transition: 1s;/*BGFade*/
}


.teejayVid3 h1{
    font-size: 54px;
    color: var(--secondary-color);
    margin-bottom: 20px;
    transition: 1s;
}

.teejayVid3 p{
    /*color: #606163;*/
    line-height: 22px;
}

.teejayVid4{
    margin: 1% 5%;
}

.teejayVid4 h1{
    color: var(--secondary-color);
    transition: 1s;
}

.teejayVid4 h2{
    color: var(--secondary-color);
    transition: 1s;
}

.teejayVid4 p{
    /*color: #606163;*/
    line-height: 22px;
}

.teejayVid5{
    width: 100%;
    /*height: 100vh;*/
    background: var(--primary-color);
    display: flex;
    justify-content: center;
    transition: 1s;/*BGFade*/
}

.teejayVid5 button{
    transition: 1s;/*BGFade*/
}

.teejayVid5 button:hover{
    background: #1A908F;
}

.teejayVid6{
    text-align: center;
    margin: 10px 10px;
}


.teejayVid7{
    width: 100%;
    /*height: 100vh;*/
    background: var(--primary-color);
    justify-content: center;
    transition: 1s;/*BGFade*/
}


.teejayVid8{
    width: 100%;
    height: 70px;
    background: var(--primary-color);
    display: flex;
    justify-content: center;
    transition: 1s;/*BGFade*/
}

.teejayVid8 button{
    height: 25px;
    width: 120px;
    font-size: 12px;
    transition: 1s;/*BGFade*/
}

.teejayVid8 button:hover{
    background: #1A908F;
}

.teejayVid9{
    text-align: center;
    margin: 3px 3px;
}

.teejayVid10{
    padding-top: 25px;
    padding-bottom: 10px;
    text-align: center;
    margin: 10px 10px;
}

nav{
    width: 84%;
    margin: auto;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


nav ul{
    flex: 1;
    text-align: right;
}

nav ul li{
    display: inline-block;
    list-style: none;
    margin: 10px 20px
}

nav ul li a{
    text-decoration: none;
    color: var(--secondary-color);
    transition: 1s;
}

nav ul li a:hover{
    color: #1A908F;
}

.logo{
    width: 100px;
    cursor:grab;
    /*-webkit-filter: drop-shadow(10px 10px 10px #222);
    filter: drop-shadow(2px 2px 5px #222);*/
}

.info{
    padding-right: 20%;
    margin-left: 8%;
    margin-top: 8%;
}

.info h1{
    font-size: 380%;
    color: var(--secondary-color);
    margin-bottom: 20px;
    transition: 1s;
}

.info h2{
    font-size: 150%;
    color: var(--secondary-color);
    margin-bottom: 20px;
    transition: 1s;
}

.info p{
    font-size: 100%;
    /*color: #606163;*/
    line-height: 180%;
}

.inf{
    padding-right: 42%;
    text-align:left;
    color: var(--secondary-color);
}

.inf a{
    font-weight:500;
    color: var(--secondary-color);;
}

.inf2{
    color: var(--secondary-color);
}

.inf2 a{
    font-weight:600;
    color: var(--secondary-color);;
}

#all_clients {
    width: 75px;
    height: 30px;
    border: 0;
    outline: none;
    background: #103737;
    color: #D7F3F3;
    font-size: 12px;
    border-radius:  30px;
    text-align: center;
    box-shadow: 0 6px 20px -5px rgba(0,0,0,0.4);
    margin: 0 0;
    position:relative;
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle;
    transition: 1s;
}

#all_clients:hover{
    background: #1A908F;
}


button{
    width: 200px;
    height: 60px;
    border: 0;
    outline: none;
    background: var(--secondary-color);
    color: var(--primary-color);
    font-size: 20px;
    border-radius:  30px;
    text-align: center;
    box-shadow: 0 6px 20px -5px rgba(0,0,0,0.4);
    margin: 30px 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: 1s;
}

.check-box{
    width: 60px;
    height: 60px;
    border-radius: 30px;
    box-shadow: 0 0 12px -2px rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    right: -30px;
    opacity: 0;
}

.check-box svg{
    width: 30px;
    margin: 15px;
}

svg path{
    stroke-width: 3;
    stroke: var(--primary-color);
    stroke-dasharray: 34;
    stroke-dashoffset: 34;
    stroke-linecap: round;
}

.active{
    background: #1A908F;
    transition: 1s;
}

.active .check-box{
    right: 0;
    opacity: 1;
    transition: 1s;
}

.active p{
    margin-right: 50px;
    transition: 1s;
}

.active svg path{
    stroke-dashoffset: 0;
    transition: 1s;
    transition-delay: 1s;
}

span{
    color: #1A908F;
}

.img-box{
    width: 45%;
    height: 80%;
    position: absolute;
    bottom: 0;
    right: 100px;
}

.img-box img{
    height: 100%;
    position:absolute;
    left: 50%;
    bottom: 1%;
    transform: translateX(-50%);
    transition: bottom 1s, left 1s;
}

.img-box:hover .back-img{
    bottom: 40px;
}

.img-box:hover .main-img{
    left: 54%;
}



.img-box-about{
    width: 40%;
    height: 80%;
    position: absolute;
    bottom: 0;
    right: 4%;
}

.img-box-about img{
    height: 100%;
    position: absolute;
    left: 50%;
    bottom: 1%;
    transform: translateX(-50%);
    transition: bottom 1s, left 1s;
}

.img-box-about:hover .back-img{
    bottom: 40px;
}

.img-box-about:hover .main-img{
    left: 54%;
}


.socials{
    margin-left: 8%;
    /*margin-top: 1%;*/
}

.bottom{
    position: absolute;
    bottom: 0;
}

.socials a{
    font-size: 30px;
    color: var(--secondary-color);
    margin-right: 20px;
    transition: 1s;
}

.socials a:hover{
    color: #1A908F;
}


.socials-cont{
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 100px;
    text-align: center;
}

.socials-cont a{
    font-size: 30px;
    color: var(--secondary-color);
    margin-right: 2%;
    margin-left: 2%;
    transition: 1s;
}

.socials-cont a:hover{
    color: #1A908F;
}



.app-list{
    padding-top: 0%;
    padding-bottom: 1%;
    padding-right: 44%;
    padding-left: 4%;
    text-align: center;
}

.app-list img{
    vertical-align: middle;
    color: var(--secondary-color);
    margin-top:2%;
    margin-bottom:2%;
    margin-right: 2%;
    margin-left: 2%;
    width: 5%;
}

.app-list h2{
    color: var(--secondary-color);
    padding-left: 0%;
    transition: 1s;
}



.ico-slider{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 30%;
    padding-left: 4%;
    /*background: linear-gradient(var(--primary-color), #DDDBCF, var(--primary-color));*/
    background: #D7F3F3;
}


.ico-slider h2{
    padding-left: 0%;
    padding-right: 21%;
}

.slick-slide{
    margin: 0 25px;
}
.slick-slide img{
    width: 110%;
}
.slick-slider{
    position: relative;
    display: block;
    box-sizing: border-box;
}
.slick-list{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-track{
    position: relative;
    top: 0;
    left: 0;
    display: block
}
.slick-slide{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
.slick-slide img{
    display: block;
}
.slick-initialized .slick-slide{
    display: block;
}
.copy{
    padding-top: 250px;
}

.footer{
    text-align: center;
    font-size: 10px;
    background: var(--primary-color);
    color: var(--secondary-color);
    transition: 1s;
}


#tjTopBtn {
    display: block;
    position: fixed;
    width: 60px;
    bottom: 10px;
    right: 30px;
    z-index: 99;
    font-size: 22px;
    border: none;
    outline: none;
    background-color: #1A908F;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 100px;
    transition: opacity 0.5s linear, transform 0.25s linear;
    box-shadow: 0 0 10 #555;
}

.fade-in {
    opacity: 1;
    transform: rotate(0deg);
}

.fade-out {
    opacity: 0;
    display: block;
    transform: rotate(180deg);
}

#tjTopBtn:hover {
    background-color: #1A5656;
}

/* Hovering Logos */
/* Styles for the overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(216, 243, 243, 0.8); /* Background color with opacity */
  z-index: 9999; /* Ensure the overlay appears on top of other elements */
  display: none; /* Initially hide the overlay */
  backdrop-filter: blur(10px); /* Apply blur effect to the background */
    overflow:auto;
  animation: popUp 0.5s;
}

@keyframes popUp {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Styles for the logo list */
.logo-list {
    position: relative;
    padding: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* Styles for the logos */
.clnt_logo {
  display: inline-block;
  margin: 10px;
  width: 120px;
}

/* Style for the close button */
.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
  color: #103737;
  cursor: pointer;
}










.video-placeholder {
    height: 50%;
    width: 50%;
    
  position: relative;
  cursor: pointer;
  background: #000;
  border-radius: 0;
  overflow:hidden;
}

.video-placeholder img {
  width: 100%;
  height: auto;
  opacity: 5.3;
  transition: opacity 0.3s ease;
}

.video-placeholder:hover img {
  opacity: 1;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: #fff;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.video-placeholder:hover .play-button {
  opacity: 1;
}