body
  {
    margin: 0;
    padding: 0;
    
    color:                  #FFFFFF;
    background-image:  none; 
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-repeat: no-repeat;
    cursor: url('/Images/Small-Wand.png') 16 0, auto;


  }



.borderright
{
       float: right;
      
       border: 5px;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  
}

.border1
{
       float: right;
      
       border: 5px;
  border-style: solid;
  border-color: red;
  border-radius: 4px;
  
}



.custom {
	font-family: Source Sans Pro;	
}




color: white;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight:  100;
    padding: 14px;
    text-decoration: none;
}



.names3 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 18px;
font-weight:  300;
text-align: right;
text-decoration: none;
color: white;
letter-spacing: 3px;


}


.heart1 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 18px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.5px;


}


.heart2 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 18px;
font-weight:  300;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.5px;


}

.heart3 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 10px;
font-weight:  300;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;


}

.heart4 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 13px;
font-weight:  300;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;


}


.heart5 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 15px;
font-weight:  630;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;
line-height: 1.3;


}

.heart6 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 14px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: black;
letter-spacing: 1.2px;



}



.heart7 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 13px;
font-weight:  300;
text-align: left;
text-decoration: none;
color: black;
letter-spacing: 1.2px;


}

.heart8 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 10px;
font-weight:  300;
text-align: right;
text-decoration: none;
color: white;
letter-spacing: 1.3px;
line-height: 1.6;
}


.heart9 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 19px;
font-weight:  700;
text-align: right;
text-decoration: none;
color: white;
letter-spacing: 3px;
line-height: 1.6;


}

.heart10 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 14px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;



}

.heart11 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 14px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: black;



}

.heart12 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 14px;
font-weight:  500;
text-align: center;
text-decoration: none;
color: black;



}

.i13-wide {letter-spacing: 3px;}




.center-left {
  position: absolute;
  top: 40%;
  left: 16px;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 18px;
  font-weight:  520;
  text-align: left;
  text-decoration: none;
  color: white;
  letter-spacing: 2px;
  
}

@media screen and (min-width: 601px) {
  div.center-left {
    font-size: 15px;
  }
}

@media screen and (max-width: 600px) {
  div.center-left {
    font-size: 12px;
  }
}


.main2b
{
    background-color:  transparent;
       	font-family: 	  'Noto Sans HK', sans-serif;
	font-size: 	  13px;
	font-weight: 	   400;
	text-align:	   left;
	text-decoration:   none;
	color: 		  white;
	letter-spacing:   1.3px;
	padding:          6px 15px; /* Add some padding */
        cursor:           pointer; /* Add a pointer cursor on mouse-over */     
        border:            none; /* Remove borders */
}


.main2b:hover {

    opacity: 0.7;
    
}


.main2bb
{
    background-color:  #818589; /* For browsers that do not support gradients */
    background-image:  linear-gradient(#818589, #414345); /* Standard syntax (must be last) */
    border: 0;
  line-height: 2.2;
  padding: 0 20px;
  font-size: 1rem;
  letter-spacing: 1.3px;
  font-face: montserrat semi bold;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 4px;
    cursor:            pointer; /* Add a pointer cursor on mouse-over */
    text-decoration:   none;
    
     
}



.main2bb:hover {

    
    opacity: 0.7;
    
}

/***** LK Everything ******/


.hero-image {
  width: 100%;
  height: auto;
  display: block;
}



/***** LK Modals ******/

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.modal-content {
  background: #fff;
  color: #333;
  max-width: 400px;
  margin: 10% auto;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  text-align: center;
  font-family: "Quicksand", sans-serif;
}

.modal-content button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #312783;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}



.city {display:none}


/***** LK Fonts ******/
@font-face {
  font-family: 'Magnolia Script'; /* Define a name for your font */
  src: url('Fonts/Magnolia Script.otf') format('opentype'), /* Add otf format */
         font-weight: normal; /* Or specify weight */
  font-style: normal;  /* Or specify style */
}




/***** LK Text ****/

.lkcenter{
font-family: 'Noto Sans HK', sans-serif;
font-size: 13px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;
padding-top: 2px;

}


.lktext{
font-family: 'Noto Sans HK', sans-serif;
font-size: 13px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;
margin-top: 5px;
}


/***** LK Container ****/

/* Full-width container stretches across the screen */
.full-width-container {
  width: 100%;
  padding: 0.5rem; /* space inside the container */
  background-color: #ffffff; /* optional background */
  box-sizing: border-box;
}

/* Inner content centers and scales nicely */
.inner-content {
       /* prevent content from stretching too wide on large screens */
  height:  auto;        /* center the content */
  width: 100%;
}


/***** LK Scrollable Container ****/

div.ex3 {
  background-color: transparent;
  width: 250px;
  height: 150px;
  overflow: auto;
}



/**** LK Colours ****/


.mainlk
{
    background-color:  #0414c7; /* For browsers that do not support gradients */
      background-image:  linear-gradient(#041c47, #8057c7); /* Standard syntax (must be last) */
  
    color:             white;
    text-decoration: none;
    
    
        opacity:                ;
        border-radius:         ;
        border-style:           ;
        border-width:           ;
        border-color:           ;
}



.transparent {
background-color: transparent;
color: white;
}


.lightblues {

color:                  #353535;
    background-image:  linear-gradient(to top left, #c6d2e2, #fbfff6, #f6f6ff); 
}


/***** LK Align ****/

.center {
  margin: 0;
  position: absolute;
    left: 30%;
  }

.center2 {
  margin: 0;
  position: absolute;
    left: 40%;
  }

/***** LK Share Icons ****/

.social-share {
  text-align: center;
  padding: 1rem 0;
}

.share-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 6px #ffe6fb;
}

.share-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.share-icons a i {
  font-size: 32px;
  color: #fff;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

.share-icons a:hover i {
  transform: scale(1.25) rotate(4deg);
  filter: drop-shadow(0 0 10px #ffd6fc) brightness(1.2);
}


/* Mobile tweak */
@media (max-width: 480px) {
  .share-icons a i {
    font-size: 28px;
  }
}




/***** LK Footer ****/

.footer {
   position: auto;
   left: 0;
   bottom: 0;
   
   width: 100%;
   height: 520px;
   background-color:  #041c47; /* For browsers that do not support gradients */
    background-image:  linear-gradient(#041c47, #8057c7); /* Standard syntax (must be last) */
   
   color: white;
   text-align: right;
   padding: 18px;
   opacity: 0.9;
   font-family: 'Noto Sans HK', sans-serif;
   font-size: 12px;
   line-height: 1.2;
   text-decoration: none;
   
}

.text {
 text-decoration: none;
}


/* Right-aligned section inside the footer */
.footer-right {
  
  float: right;
  margin: 16px;
}


.footer .search-container {
  float: right;
}

.footer input[type=text] {
  width: 170px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  

  }

.footer .search-container button {
  float: right;
  padding: 6px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.footer .search-container button:hover {
  background: #ccc;
}


color: white;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight:  100;
    padding: 14px;
    text-decoration: none;
}


/****** LK Form Inline ******/

* {box-sizing: border-box;}

.form-inline {  
  display: flex;
  flex-flow: row wrap;
  align-items: center;
float: right;
}

.form-inline label {
  margin: 5px 10px 5px 0;
}

.form-inline input {
  vertical-align: middle;
  margin: 3px 7px 3px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
border-radius: 4px;
float: right;
  

}

.form-inline button {
   border: 0;
  line-height: 2.2;
  padding: 0 14px;
  font-size: 1rem;
  letter-spacing: 1.3px;
  font-face: Noto Sans HK;
  text-align: center;
  color: #fff;
  
  border-radius: 4px;
  background-color: #071635;  /* Dark Blue from Dig Tran Image */
  
  cursor: pointer;
 width: 170px;
 

  
}

.form-inline button:hover {
background-color: #008080;  /* W3 Teal */
 color:white
}


@media (max-width: 800px) {
  .form-inline input {
    margin: 5px 0;
  }
  
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}


/******* LK Modal Tabs ****/


.tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.tab-link {
  padding: 0.5rem 1rem;
  border: none;
  background: #eee;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Quicksand", sans-serif;
}

.tab-link.active {
  background: #312783;
  color: white;
}

/******* LK Menus ****/

.mobile-container {
  max-width: 480px;
  margin:left;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}



/******* LK Indents & Spacers ****/

.in15 {
  text-indent: 15px;
}

.spacer3 {
position: relative;
height: 3px;
}

.spacer20 {
position: relative;
height: 20px;
}

.spacer90 {
position: relative;
height: 90px;
}

.spacer120 {
position: relative;
height: 120px;
}

.spacer70 {
position: relative;
height: 70px;
}

.spacer40 {
position: relative;
height: 40px;
}


/******* LK Buttons ****/


.lkb
{
    background-color:  #0414c7; /* For browsers that do not support gradients */
      background-image:  linear-gradient(#041c47, #8057c7); /* Standard syntax (must be last) */

       	font-family: 	  'Noto Sans HK', sans-serif;
	font-size: 	  13px;
	font-weight: 	   500;
	text-align:	   left;
	text-decoration:   none;
	color: 		  #ffffff;
	letter-spacing:   1.2px;
	padding:          6px 15px; /* Add some padding */
        cursor:           pointer; /* Add a pointer cursor on mouse-over */     
        border:            none; /* Remove borders */
}


.lkb:hover {

    opacity: 0.7;
    
}


.purplebsmall {
  border: 0;
  line-height: 2.2;
  padding: 0 10px;
  font-size: 13px;
  letter-spacing: 1.3px;
  font-face: Noto Sans HK;
  text-align: center;
  color: #fff;
  
  border-radius: 4px;

  background-color:  #0414c7; /* For browsers that do not support gradients */
      background-image:  linear-gradient(#041c47, #8057c7); /* Standard syntax (must be last) */

  
  cursor: pointer;
 
  
}

.purplebsmall:hover {
background-color: #008080;  /* W3 Teal */
 color:white
}




/******* LK Mobile Menu ****/


.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #04AA6D;
  color: white;
}



/****** LK Padding ******/

.paddinglk {
padding-top: 5px;
}

.paddingtlk2 {
padding-top: 8px;
}


.paddingtlk3 {
padding-top: 30px;
}


.paddingtlk4 {
padding-top: 60px;
}



/* Sparkle Trail */
    .sparkle {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: radial-gradient(circle, white, pink, transparent);
      pointer-events: none;
      animation: sparkleFade 1s ease-out forwards;
      z-index: 999;
    }
    @keyframes sparkleFade {
      0% { transform: scale(1); opacity: 1; }
      100% { transform: scale(0.5) translateY(-10px); opacity: 0; }
    }
	
	/* Sparkle trail animation */
.sparkle-trail {
  position: absolute;
  top: 50%; /* Start from the center of the page */
  left: 50%;
  pointer-events: none;
  z-index: 9999;
  width: 0;
  height: 0;
  animation: sparkleTrail 1.5s linear forwards;
}

/* Sparkle trail effects */
@keyframes sparkleTrail {
  0% {
    width: 5px;
    height: 5px;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 10px 5px #f8d0ff, 0 0 20px 10px #ffb8ff, 0 0 30px 15px #ffd0d0;
  }
  100% {
    width: 30px;
    height: 30px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    box-shadow: 0 0 50px 25px #f8d0ff, 0 0 100px 50px #ffb8ff, 0 0 150px 75px #ffd0d0;
  }
}

/* Twinkly Lights & Wrapper */
    .twinkle-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0; /* or 1 if needed above background but below main content */
}

.twinkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  animation: twinkle 2s infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.5); }
}

/* Randomize positions and animation delays */
.twinkle:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
.twinkle:nth-child(2) { top: 30%; left: 50%; animation-delay: 0.5s; }
.twinkle:nth-child(3) { top: 70%; left: 80%; animation-delay: 1s; }
/* ...add more as needed */




/**** TJ Colours ****/


.main13
{
    background-color:  #ab1560; /* For browsers that do not support gradients */
      background-image:  linear-gradient(#ab1560, #ab1560); /* Standard syntax (must be last) */
  
    color:             white;
    text-decoration: none;
    
    
        opacity:                ;
        border-radius:         ;
        border-style:           ;
        border-width:           ;
        border-color:           ;
}

.main14
{
    background-color:  #ab1560; /* For browsers that do not support gradients */
    background-image:  linear-gradient(#ab1560, #941253); /* Standard syntax (must be last) */

    color:             white;
        opacity:                ;
        border-radius:         ;
        border-style:           ;
        border-width:           ;
        border-color:           ;
}


.fgreen
{
    background-color:  #15ab53; /* For browsers that do not support gradients */
      background-image:  linear-gradient(#15ab53, #15ab53); /* Standard syntax (must be last) */
  
    color:             white;
    text-decoration: none;
    
    
        opacity:                ;
        border-radius:         ;
        border-style:           ;
        border-width:           ;
        border-color:           ;
}


.white
{
    background-color:  white; /* For browsers that do not support gradients */
      background-image:  linear-gradient(white, white); /* Standard syntax (must be last) */
  
    
      font-family: 	  'Pragati Narrow', sans-serif;
	font-size: 	  14px;
	font-weight: 	   500;
	text-align:	   left;
	text-decoration:   none;
	color: 		  #ab1560;
	letter-spacing:   1.2px;
	padding:          6px 15px; /* Add some padding */
        cursor:           pointer; /* Add a pointer cursor on mouse-over */     
        border:            none; /* Remove borders */

}



/**** TJ Text ****/

.tj1 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 11px;
font-weight:  300;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;

}

@media screen and (max-width: 600px) {
  .tj1 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 11px;
font-weight:  400;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;

}
}

.tj2 {
font-family: 'Pragati Narrow', sans-serif;
font-size: 22px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.3px;

}

@media screen and (max-width: 600px) {
  .tj2 {
    font-size: 18px;
    font-weight:  500;
    text-align: left;
    text-decoration: none;
    color: white;
    letter-spacing: 1.3px;
  }
}

@media screen and (min-width: 601px) {
  .tj2 {
font-family: 'Pragati Narrow', sans-serif;
font-size: 22px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.3px;

}
}


.tj3 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 13px;
font-weight:  300;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;

}

@media screen and (max-width: 600px) {
  .tj3 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 13px;
font-weight:  400;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;

}
}

@media screen and (min-width: 601px) {
  .tj3 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 13px;
font-weight:  300;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;

}
}

.tj4 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 14px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;

}

@media screen and (max-width: 600px) {
  .tj4 {
    font-size: 13px;
    font-weight:  500;
    text-align: left;
    text-decoration: none;
    color: white;
    letter-spacing: 1.2px;
  }
}

@media screen and (min-width: 601px) {
  .tj4 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 14px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;

}
}


.tj5 {
font-family: 'Pragati Narrow', sans-serif;
font-size: 13px;
font-weight:  500;
text-align: right;
text-decoration: none;
color: white;
letter-spacing: 1.3px;

}


.tj6 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 12px;
font-weight:  400;
text-align: left;
text-decoration: none;
color: black;
letter-spacing: 1.2px;

}

@media screen and (max-width: 600px) {
  .tj6 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 11px;
font-weight:  400;
text-align: left;
text-decoration: none;
color: black;
letter-spacing: 1.2px;

}
}

.tj7 {
font-family: 'Pragati Narrow', sans-serif;
font-size: 22px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: black;
letter-spacing: 1.3px;

}

@media screen and (max-width: 600px) {
  .tj7 {
    font-size: 17px;
    font-weight:  500;
    text-align: left;
    text-decoration: none;
    color: black;
    letter-spacing: 1.3px;
  }
}

@media screen and (min-width: 601px) {
  .tj7 {
font-family: 'Pragati Narrow', sans-serif;
font-size: 22px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: black;
letter-spacing: 1.3px;

}
}

.tj8 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 14px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: black;
letter-spacing: 1.2px;

}

@media screen and (max-width: 600px) {
  .tj8 {
    font-size: 13px;
    font-weight:  500;
    text-align: left;
    text-decoration: none;
    color: black;
    letter-spacing: 1.2px;
  }
}

@media screen and (min-width: 601px) {
  .tj8 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 14px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: black;
letter-spacing: 1.2px;

}
}

.tj9 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 13px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: black;
letter-spacing: 1.2px;

}

@media screen and (max-width: 600px) {
  .tj9 {
    font-size: 13px;
    font-weight:  500;
    text-align: left;
    text-decoration: none;
    color: black;
    letter-spacing: 1.2px;
  }
}

@media screen and (min-width: 601px) {
  .tj9 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 13px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: black;
letter-spacing: 1.2px;

}
}


.tj10 {
font-family: 'Pragati Narrow', sans-serif;
font-size: 18px;
font-weight:  500;
text-align: center;
text-decoration: none;
color: white;
letter-spacing: 1.3px;

}

@media screen and (max-width: 600px) {
  .tj10 {
    font-size: 15px;
    font-weight:  500;
    text-align: center;
    text-decoration: none;
    color: white;
    letter-spacing: 1.3px;
  }
}

@media screen and (min-width: 601px) {
  .tj10 {
font-family: 'Pragati Narrow', sans-serif;
font-size: 18px;
font-weight:  500;
text-align: center;
text-decoration: none;
color: white;
letter-spacing: 1.3px;

}
}

.tj11 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 12px;
font-weight:  300;
text-align: center;
text-decoration: none;
color: white;
letter-spacing: 1.2px;

}

@media screen and (max-width: 600px) {
  .tj11 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 12px;
font-weight:  400;
text-align: center;
text-decoration: none;
color: white;
letter-spacing: 1.2px;

}
}


.tj12 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 12px;
font-weight:  300;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;

}

@media screen and (max-width: 600px) {
  .tj12 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 12px;
font-weight:  400;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;

}
}


.tj13 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 12px;
font-weight:  400;
text-align: center;
text-decoration: none;
color: black;
letter-spacing: 1.2px;

}

@media screen and (max-width: 600px) {
  .tj13 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 11px;
font-weight:  400;
text-align: center;
text-decoration: none;
color: black;
letter-spacing: 1.2px;

}
}

.tj14 {
font-family: 'Pragati Narrow', sans-serif;
font-size: 22px;
font-weight:  500;
text-align: center;
text-decoration: none;
color: black;
letter-spacing: 1.3px;

}

@media screen and (max-width: 600px) {
  .tj14 {
    font-size: 17px;
    font-weight:  500;
    text-align: center;
    text-decoration: none;
    color: black;
    letter-spacing: 1.3px;
  }
}

@media screen and (min-width: 601px) {
  .tj14 {
font-family: 'Pragati Narrow', sans-serif;
font-size: 22px;
font-weight:  500;
text-align: center;
text-decoration: none;
color: black;
letter-spacing: 1.3px;

}
}

.tj15 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 14px;
font-weight:  500;
text-align: center;
text-decoration: none;
color: black;
letter-spacing: 1.2px;

}

@media screen and (max-width: 600px) {
  .tj15 {
    font-size: 13px;
    font-weight:  500;
    text-align: center;
    text-decoration: none;
    color: black;
    letter-spacing: 1.2px;
  }
}

@media screen and (min-width: 601px) {
  .tj15 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 14px;
font-weight:  500;
text-align: center;
text-decoration: none;
color: black;
letter-spacing: 1.2px;

}
}


.tj16 {
font-family: 'Pragati Narrow', sans-serif;
font-size: 22px;
font-weight:  500;
text-align: right;
text-decoration: none;
color: white;
letter-spacing: 1.3px;

}

@media screen and (max-width: 600px) {
  .tj16 {
    font-size: 17px;
    font-weight:  500;
    text-align: right;
    text-decoration: none;
    color: white;
    letter-spacing: 1.3px;
  }
}

@media screen and (min-width: 601px) {
  .tj16 {
font-family: 'Pragati Narrow', sans-serif;
font-size: 22px;
font-weight:  500;
text-align: right;
text-decoration: none;
color: white;
letter-spacing: 1.3px;

}
}


.tj17 {
font-family: 'Pragati Narrow', sans-serif;
font-size: 13px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.3px;

}


.tj18{
font-family: 'Noto Sans HK', sans-serif;
font-size: 13px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;

}

@media screen and (max-width: 600px) {
  .tj18 {
    font-size: 13px;
    font-weight:  500;
    text-align: left;
    text-decoration: none;
    color: white;
    letter-spacing: 1.2px;
  }
}

@media screen and (min-width: 601px) {
  .tj18 {
font-family: 'Noto Sans HK', sans-serif;
font-size: 13px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: white;
letter-spacing: 1.2px;

}
}



/******* TJ Menus ****/


div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}


 .multilevel-dropdown-menu {
            font-family: Pragati Narrow, sans-serif;
            background-color: white;
            color: #black;



                    }

        .parent {
            display: block;
            position: relative;
            float: left;
            line-height: 40px;
            background-color: white;
            
            font-family:  'Pragati Narrow', sans-serif;
	font-size: 	  14px;
	font-weight: 	   500;
	text-align:	   left;
	text-decoration:   none;
	color: black;

	letter-spacing:   1.2px;
            
        }

        .parent a {
            margin: 3px 12px;
            color: black;
            text-decoration: none;
        }

        .parent:hover>ul {
            display: block;
            position: absolute;
            color: black;
      

        }

        .parent:hover {
        color:  black;
        }

        .child {
            display: none;
        }

        .child li {
            background-color: white;
            color: #ab156d;
            line-height: 40px;
                        width: 100%;
        }

        .child li a {
            color: #ab1560;


        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0px;
            min-width: 12em;
        }


     
        ul ul ul {
            left: 100%;
            top: 0;
            margin-left: 1px;
        }

        li:hover {
           background-color: white;
           color: black;


        }

        .parent li:hover {
            background-color: white;
            color: black;


        }


        .expand {
            font-size: 12px;
            float: right;
            margin-right: 5px;
        }


.ltext {
color: #ab1560;

}

.ltext:hover {
color: black;

}







/******* TJ Buttons ****/


.tjb
{
    background-color:  transparent;
       	font-family: 	  'Noto Sans HK', sans-serif;
	font-size: 	  14px;
	font-weight: 	   500;
	text-align:	   left;
	text-decoration:   none;
	color: 		  #000000;
	letter-spacing:   1.2px;
	padding:          6px 15px; /* Add some padding */
        cursor:           pointer; /* Add a pointer cursor on mouse-over */     
        border:            none; /* Remove borders */
}


.tjb:hover {

    opacity: 0.7;
    
}



.tjb2
{
    background-color:  transparent;
       	font-family: 	  'Pragati Narrow', sans-serif;
	font-size: 	  14px;
	font-weight: 	   500;
	text-align:	   center;
	text-decoration:   none;
	color: 		  white;
	letter-spacing:   1.2px;
	padding:          6px 15px; /* Add some padding */
        cursor:           pointer; /* Add a pointer cursor on mouse-over */     
        border:            none; /* Remove borders */
}


.tjb2:hover {

    background-color: #008080;  /* W3 Teal */
 color:white
}

    

.tjb3
{
    background-color:  transparent;

        font-family: 'Noto Sans HK', sans-serif;
        font-size: 13px;
        font-weight:  500;
        text-align: left;
        text-decoration: none;
        color: white;
        letter-spacing: 1.2px;

       	
	padding:          3px 3px 3px 3px; /* Add some padding */
        cursor:           pointer; /* Add a pointer cursor on mouse-over */     
        border:            none; /* Remove borders */
}


.tjb3:hover {

    opacity: 0.7;
    
}






.blueb {
  border: 0;
  line-height: 2.2;
  padding: 0 20px;
  font-size: 1rem;
  letter-spacing: 1.3px;
  font-face: montserrat semi bold;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 4px;
  background-color: #1877F2;  /* TJ Blue */
  
  cursor: pointer;
 
  
}

.blueb a: hover {
opacity: 07; 
}


.greenb {
  border: 0;
  line-height: 2.2;
  padding: 0 20px;
  font-size: 1rem;
  letter-spacing: 1.3px;
  font-face: montserrat semi bold;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 4px;
  background-color: #25D366;  /* WhatsApp Green */
  
  cursor: pointer;
 
  
}

.greenb a: hover {
opacity: 07; 
}


.navyb {
  border: 0;
  line-height: 2.2;
  padding: 0 20px;
  font-size: 1rem;
  letter-spacing: 1.3px;
  font-face: Noto Sans HK;
  text-align: center;
  color: #fff;
  
  border-radius: 4px;
  background-color: #071635;  /* Dark Blue from Dig Tran Image */
  
  cursor: pointer;
 
  
}

.navyb:hover {
background-color: #008080;  /* W3 Teal */
 color:white
}


.navybsmall {
  border: 0;
  line-height: 2.2;
  padding: 0 10px;
  font-size: 13px;
  letter-spacing: 1.3px;
  font-face: Noto Sans HK;
  text-align: center;
  color: #fff;
  
  border-radius: 4px;
  background-color: #071635;  /* Dark Blue from Dig Tran Image */
  
  cursor: pointer;
 
  
}

.navybsmall:hover {
background-color: #008080;  /* W3 Teal */
 color:white
}


.pinkbrandb {
  border: 0;
  line-height: 2.2;
  padding: 0 20px;
  font-size: 1rem;
  letter-spacing: 1.3px;
  font-face: Noto Sans HK;
  text-align: center;
  color: #fff;
  
  border-radius: 4px;
  background-color: #ab156d;  /* Dark Blue from Dig Tran Image */
  
  cursor: pointer;
 
  
}

.pinkbrandb:hover {
 background-color: #071635;  /* Dark Blue from Dig Tran Image */
 color:white
}



/****** TJ Padding ******/

.paddingtj {
padding-top: 15px;
}

.paddingtj2 {
padding-top: 8px;
}




/****** TJ Box Shadow & Rounder Corners *******/


.boxs {
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.boxs2 {
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/****** TJ containers *******/

.flex-container {
  display: flex;
  background-color: #ab156d;
}

.flex-container > div {
  background-color: #ab156d;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

.container13 {
background-color: #ab156d;
}




/***** TJ Input Text & Search Container ******/






/***** TJ Columns ******/

.column {
  float: left;
  width: 33.33%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}



.column2 {
  float: left;
  width: 12.5%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .column2 {
    width: 100%;
    display: block;
  }
}


.column3 {
  float: left;
  width: 20%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .column3 {
    width: 100%;
    display: block;
  }
}


.column4 {
  float: left;
  width: 50%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .column4 {
    width: 100%;
    display: block;
  }
}



/****** TJ Cards ******/

.card2 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 16px;
  text-align: center;
  background-color: #1877f2;
  color: white;
}

.card2:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/****** TJ Image Gallery ******/

  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 20%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 25%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 33.33%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}



.respfoot {
  width: 100%;
  max-width: 95px;
  height: auto;
}

.respfoot2 {
  width: 100%;
  max-width: 150px;
  height: auto;
}


.respfoot3 {
  width: 100%;
  max-width: 260px;
  height: auto;
}


/****** End of TJ New Additions ******/


.brand
{
    background-color:  #818589; /* For browsers that do not support gradients */
    background-image:  linear-gradient(#818589, #414345); /* Standard syntax (must be last) */
    color:             white;
    
    cursor:            pointer; /* Add a pointer cursor on mouse-over */
    text-decoration:   none;
    
     
}




.redb {
  border: 0;
  line-height: 2.2;
  padding: 0 20px;
  font-size: 1rem;
  letter-spacing: 1.3px;
  font-face: montserrat semi bold;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 4px;
  background-color: #da1e25;  /* Heart Red */
  
  cursor: pointer;
 
  
}

.redb a: hover {
opacity: 07; 
}







.redbox {
  height: 60px;
  width: 60px;
  padding: 18px 0;
  background-color: #da1e25;
  font-size: 1rem;
  color: white;
  text-align: center;
  text-shadow: 1px 1px 1px #000;
  border-radius: 4px;
  margin: auto;
}




/***** End of Annimated Button Effects *********/ 





.pinkb
{
    background-color: #c50e52; /* Virtass Pink */
  border: none;
  color: #fff9f2;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  font-face: montserrat semi bold;
  font-weight:  400;
  
  margin: 4px 4px;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-color: #73022c;
  border-radius: 8px;
  letter-spacing: 1.2px;

}


.pinkb:hover {

    opacity: 0.7;
    
}

.paddinglogo {
padding-top: 1px;
}

.padding {
padding-top: 9px;
}


.paddingdd {
padding-top: 10px;
}




/* Grey Gradient */

.grey {

background: #bdc3c7;  /* fallback for old browsers */

background: linear-gradient(to right, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: white;

}


.purple {

background: #840b55;

}



/* Blue Gradient */

.blue {

background: hsla(238, 55%, 90%, 1);

background: linear-gradient(90deg, hsla(238, 55%, 90%, 0.8) 0%, hsla(187, 100%, 89%, 1) 100%);

background: -moz-linear-gradient(90deg, hsla(238, 55%, 90%, 0.8) 0%, hsla(187, 100%, 89%, 1) 100%);

background: -webkit-linear-gradient(90deg, hsla(238, 55%, 90%, 0.8) 0%, hsla(187, 100%, 89%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#D6D7F3", endColorstr="#C6F8FF", GradientType=1 );

}




/* Gradients */
	/* Blue for VPS */
	
	.grad1 {
		background-color: #244a65;/* For browsers that do not support gradients */
		background-image: linear-gradient(to right, #244a65, #155d9b);/* Standard syntax (must be last) */
		color: white;
	}
	/* Purple for Hosting */
	
	.grad2 {
		background-color: #6c389f;/* For browsers that do not support gradients */
		background-image: linear-gradient(to right, #6c389f, #ad3b81);/* Standard syntax (must be last) */
		color: white;
	}
	/* Light Blue for Wordpress Hosting */
	
	.grad3 {
		background-color: #155e9d;/* For browsers that do not support gradients */
		background-image: linear-gradient(to right, #155e9d, #13a7fb);/* Standard syntax (must be last) */
		color: white;
	}
	/* Orange for Web Builder */
	
	.grad4 {
		background-color: #f05d1d;/* For browsers that do not support gradients */
		background-image: linear-gradient(to right, #f05d1d, #faa00d);/* Standard syntax (must be last) */
		color: white; text-decoration: none;
	}

/* Virtass Pink */
	
	.grad5 {
		background-color: #c50e52;/* For browsers that do not support gradients */
		
		color: white; text-decoration: none;
	}


/* Heart Red */
	
	.grad6 {
		background-color: #da1e25;/* For browsers that do not support gradients */
		
		color: white; text-decoration: none;
	}


.h13 {

  text-decoration: underline red 7px; 
  
}



.center-left {
  position: absolute;
  top: 40%;
  left: 16px;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 15px;
  font-weight:  300;
  text-align: left;
  text-decoration: none;
  color: white;
  letter-spacing: 3px;
  
}

@media screen and (min-width: 601px) {
  div.center-left {
    font-size: 15px;
  }
}

@media screen and (max-width: 600px) {
  div.center-left {
    font-size: 12px;
  }
}

.center-left2 {
  position: absolute;
  top: 60%;
  left: 16px;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 18px;
  font-weight:  300;
  text-align: left;
  text-decoration: none;
  color: white;
  letter-spacing: 3px;
  
}

@media screen and (min-width: 601px) {
  div.center-left2 {
    font-size: 18px;
  }
}

@media screen and (max-width: 600px) {
  div.center-left2 {
    font-size: 11px;
  }
}


.center-left3 {
  position: absolute;
  top: 45%;
  left: 16px;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 24px;
  font-weight:  300;
  text-align: left;
  text-decoration: none;
  color: white;
  letter-spacing: 3px;
  
}

@media screen and (min-width: 601px) {
  div.center-left3 {
    font-size: 24px;
  }
}

@media screen and (max-width: 600px) {
  div.center-left3 {
    font-size: 15px;
  }
}


.container1 {
  position: relative;
  text-align: center;
  color: white; 
  border-radius: 8px 8px 8px 8px; 
}

.mainpink {
  background-color: #ab156d;
  }

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}



/***** Tables ******/

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
  font-family: 'Noto Sans HK', sans-serif;
font-size: 14px;
font-weight:  500;
text-align: left;
text-decoration: none;
color: black;
letter-spacing: 1.2px;
  
}

th, td {
  text-align: left;
  padding: 8px;
  color: black;

}

tr:nth-child(even){background-color: #f2f2f2}


/***** Accordions ******/



.accordion {
   

    background:  #414345; /* For browsers that do not support gradients */
    background:  linear-gradient(to right, #414345, #818589); /* Standard syntax (must be last) */
  
    color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  border-radius: 5px;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}