/************** CUSTOM COLOURS *********/

@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

.ctext-blue {
	color:#2EB0C3;
}

.styleSecondColor {
  color: #2691A1;
}

#main {
  background-image: url(../img/footer_image.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  opacity: 1;
}

.divider {
  border: 0;
  height: 4px;
  border-top: #ddd 1px solid;
  border-bottom: #ddd 1px solid;
  text-align: center;
  position: relative;
  clear: both;
}

.dividerw {
    border: 0;
    height: 4px;
    border-top: #2EB0C3 1px solid;
    border-bottom: #2EB0C3 1px solid;
    text-align: center;
    position: relative;
    clear: both;
  }

.divider .fa, .divider .fa-duotone, .dividerw .fa, .dividerw .fa-duotone {
  color: #2EB0C3;
  background: #ffffff;
  text-align: center;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
  position: absolute;
  top: -20px;
  left: 50%;
  margin: 0 auto 0 -20px;
}

div.smallseparator {
  color: #DDDDDD;
  margin: 30px 0;
  text-align: center;
}

div.smallseparator:after,
div.smallseparator:before {
		content:"\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
		text-decoration:line-through;
	}




/**********************************/

.label-orange {
    background-color: #F07057;
}

.label-red {
    background-color: #F15757;
}

.label-pink {
    background-color: #F73F69;
}

.label-yellow {
    background-color: #EAA824;
}

.label-darkgreen {
    background-color: #9DB667;
}

.label-darkblue {
    background-color: #1980B6;
}

.label-lightblue {
    background-color: #66B7E2;
}

.label-brown {
    background-color: #AB8B64;
}

.label-grey {
    background-color: #9E9E9E;
}


.ctext-aqt, .divider.aqt .fa, .divider.aqt .fas {
    color: #2EB0C3;
  }

.ctext-youtube, .divider.yt .fa, .divider.yt .fas {
	color:#A40F09;
}

.ctext-orange, .divider.or .fa, .divider.or .fas {
    color: #F07057;
}

.ctext-red, .divider.red .fa, .divider.red .fas, .item-box-desc small.ctext-red {
    color: #F15757;
}

.ctext-pink, .divider.pk .fa, .divider.pk .fas {
    color: #F73F69;
}

.ctext-aqtpink, .divider.aqtpk .fa, .divider.aqtpk .fas {
    /*color: #FEE9EF;*/
    color: #e595d6;
}

.ctext-yellow, .divider.yw .fa, .divider.yw .fas {
    color: #EAA824;
}

.ctext-darkgreen, .divider.dg .fa, .divider.dg .fas {
    color: #9DB667;
}

.ctext-teal, .divider.te .fa, .divider.te .fas {
    color: #20c997;
}

.ctext-darkblue, .divider.db .fa, .divider.db .fas {
    color: #1980B6;
}

.ctext-darkblue4, .divider.db4 .fa, .divider.db4 .fas {
    color: #94d1f0;
}

.ctext-lightblue, .divider.lb .fa, .divider.lb .fas {
    color: #66B7E2;
}

.ctext-brown, .divider.bw .fa, .divider.bw .fas {
    color: #AB8B64;
}

.ctext-grey, .divider.gy .fa, .divider.gy .fas {
    color: #9E9E9E;
}

.bgcust-aqt {
    background-color: #2EB0C3;
}

.bgcust-youtube {
	background-color: #A40F09;
}

.bgcust-orange {
    background-color: #F07057;
}

.bgcust-red {
    background-color: #F15757;
}

.bgcust-pink {
    background-color: #F73F69;
}

.bgcust-yellow {
    background-color: #EAA824;
}

.bgcust-darkgreen {
    background-color: #9DB667;
}

.bgcust-teal {
    background-color: #20c997;
}

.bgcust-darkblue {
    background-color: #1980B6;
}

.bgcust-lightblue {
    background-color: #66B7E2;
}

.bgcust-brown {
    background-color: #AB8B64;
}

.bgcust-grey {
    background-color: #9E9E9E;
}

.text-dark {
    color: #343a40 !important;
}





/********* From old css **********/

.table-gold {
  --bs-table-color: #000;
  --bs-table-bg: #d6af36;
  --bs-table-border-color: #d6af36;
  --bs-table-striped-bg: #d6af36;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #d6af36;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #d6af36;
  --bs-table-hover-color: #000;
}

.ctext-gold {
	color: #d6af36;
}

.ctext-sylver {
	color: #a7a7ad;
}

.ctext-bronze {
	color: #a77044;
}

.bgcust-gold {
	background-color: #d6af36;
}

.bgcust-sylver {
	background-color: #a7a7ad;
}

.bgcust-bronze {
	background-color: #a77044;
}


.ctext-youtube, .divider.yt .fa, .divider.yt .fas, .divider.yt .fa-duotone {
	color:#A40F09;
}

.ctext-orange, .divider.or .fa, .divider.or .fas, .divider.or .fa-duotone {
    color: #F07057;
}

.ctext-red, .divider.red .fa, .divider.red .fas, .divider.red .fa-duotone {
    color: #F15757;
}

.ctext-pink, .divider.pk .fa, .divider.pk .fas, .divider.pk .fa-duotone {
    color: #F73F69;
}

.ctext-lightpink, .divider.lpk .fa, .divider.lpk .fas, .divider.lpk .fa-duotone {
    color: #FEE9EF;
}

.ctext-yellow, .divider.yw .fa, .divider.yw .fas, .divider.yw .fa-duotone {
    color: #EAA824;
}

.ctext-darkgreen, .divider.dg .fa, .divider.dg .fas, .divider.dg .fa-duotone {
    color: #9DB667;
}

.ctext-teal, .divider.te .fa, .divider.te .fas, .divider.te .fa-duotone {
    color: #20c997;
}

.ctext-darkblue, .divider.db .fa, .divider.db .fas, .divider.db .fa-duotone {
    color: #1980B6;
}

.ctext-lightblue, .divider.lb .fa, .divider.lb .fas, .divider.lb .fa-duotone {
    color: #66B7E2;
}

.ctext-paleblue, .divider.pb .fa, .divider.pb .fas, .divider.pb .fa-duotone {
	color:#BEE5EB;
}



.ctext-brown, .divider.bw .fa, .divider.bw .fas, .divider.bw .fa-duotone {
    color: #AB8B64;
}

.ctext-grey, .divider.gy .fa, .divider.gy .fas, .divider.gy .fa-duotone {
    color: #9E9E9E;
}

.ctext-gray-dark, .divider.gd .fa, .divider.gd .fas, .divider.gd .fa-duotone {
    color: #343a40;
}

.ctext-aqt, .divider.aqt .fa, .divider.aqt .fas, .divider.aqt .fa-duotone {
    color: #2EB0C3;
  }

.bgcust-aqt {
	background-color: #2EB0C3;
}

.bgcust-youtube {
	background-color: #A40F09;
}

.bgcust-orange {
    background-color: #F07057;
}

.bgcust-red {
    background-color: #F15757;
}

.bgcust-pink {
    background-color: #F73F69;
}

.bgcust-lightpink, .just_added_row {
    background-color: #FEE9EF; 
}

.bgcust-yellow {
    background-color: #EAA824;
}

.bgcust-darkgreen {
    background-color: #9DB667;
}

.bgcust-lightgreen {
    background-color: #ccffcc;
}

.bgcust-teal {
    background-color: #20c997;
}

.bgcust-darkblue {
    background-color: #1980B6;
}

.bgcust-lightblue {
    background-color: #66B7E2;
}

.bgcust-paleblue {
    background-color: #BEE5EB;
}

.bgcust-lightbluev2 {
    background-color: #9CD6FE;
}

.bgcust-brown {
    background-color: #AB8B64;
}

.bgcust-grey {
    background-color: #9E9E9E;
}

.bgcust-gray-dark {
    background-color: #343a40;
}




/******* callout *****/
.bd-callout-info {
    --bd-callout-color: var(--bs-info-text-emphasis);
    --bd-callout-bg: var(--bs-info-bg-subtle);
    --bd-callout-border: var(--bs-info-border-subtle);
  }
  .bd-callout {
    --bs-link-color-rgb: var(--bd-callout-link);
    --bs-code-color: var(--bd-callout-code-color);
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--bd-callout-color, inherit);
    background-color: var(--bd-callout-bg, var(--bs-gray-100));
    border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300));
  }


/****** font variants **********/

    .fv-small-caps, .fv-smallcaps {
        font-variant: small-caps;
    }


/******* Parsley ********/

    input.parsley-success,
    select.parsley-success,
    textarea.parsley-success {
    color: #468847;
    background-color: #DFF0D8;
    border: 1px solid #D6E9C6;
    }

    input.parsley-error,
    select.parsley-error,
    textarea.parsley-error {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7;
    }

    .parsley-errors-list {
    margin: 10px 0 3px;
    padding: 0;
    list-style-type: none;
    font-size: 0.9em;
    line-height: 0.9em;
    opacity: 0;
    color: #B94A48;

    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    }

    .parsley-errors-list.filled {
    opacity: 1;
    }

    .form-floating > label {

        margin-top: -3px !important;

    }

    div.parsley-success {
        color: #468847;
        background-color: #DFF0D8;
        border: 1px solid #D6E9C6;
    }
    
    div.parsley-error {
        color: #B94A48;
        background-color: #F2DEDE;
        border: 1px solid #EED3D7;
    }


/******* level image effect *****/

    /*.img-level-card:hover {
        transform: scale(1.1);
        transition: .4s ease;
        z-index: 1;
    }*/

/********* image sticky *********/
    
        .img-sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 1;
        }

/********* about us card overlay **********/

    .card-hover:hover .card-img-overlay {
        opacity: 1;
        
    }

    .card-hover img {
        filter: grayscale(100%);
    }

    .card-has-detail:hover img, .card-hover:hover img {
        filter: grayscale(0);
        filter: contrast(120%);
        filter: brightness(1.2);
        box-shadow: none !important;
    }

    /*.img-about-us:hover   {
        transform: scale(1.5);
        transition: .3s ease;
        filter: grayscale(100%);
    }*/
    
    .card-hover .card-img-overlay {
        z-index: 5;
        opacity: 0;
        transition: opacity .3s ease-in-out;
    }


/********* contact tabs **********/

    .nav-tabs-contact > .nav-link.active {
        
        background-color: #fcfcfd;
        border-bottom: #f8f9fa;
    
        
    }

/******** HP Carousel ********/

    /*.carousel-item {
        height: 100vh;
        min-height: 350px;
        background: no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }*/
  

/******** eye icon on password field ********/
    .field-icon {
        float: right;
        margin-right: 6px;
        margin-top: -40px;
        position: relative;
        z-index: 2;
    }

/******** ********/

    /*.spring:hover+.hidenLayer {
        display: block;
    }

    .hidenLayer {
        display: none;
    }*/

    .spring {
        /*transition: 0.2s ease-in-out;*/
        cursor: pointer;
    }

    .spring:hover {
        animation-name: grow;
        animation-duration: 1200ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }

 
    @keyframes grow {
        0% {
            transform: scale(1);
        }
        10% {
            transform: scale(1.2);
        }
        20% {
            transform: scale(.8);
        }
        30% {
            transform: scale(1.15);
        }
        40% {
            transform: scale(.85);
        }
        50% {
            transform: scale(1.1);
        }
        60% {
            transform: scale(.9);
        }
        70% {
            transform: scale(1.05);
        }
        80% {
            transform: scale(.95);
        }
        90% {
            transform: scale(1.01);
        }
        100% {
            transform: scale(1);
        }
    }

    .mainh {
        display:flex;
        /*--s: 130px;  /* size  */
        /*--m: 4px;    /* margin */
        --s: 120px;  /* size  */
        --m: 25px;    /* margin */
        --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
        --sl: 150px;  /* size  */
        --ml: 12px;    /* margin */
        --fl: calc(1.732 * var(--s) + 12 * var(--m)  - 1px);
        --sf: 150px;  /* size  */
        --mf: 4px;    /* margin */
        --ff: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
    }

    .containerh {
        font-size: 0; 
        margin-left: -80px;
    }

    .containerh div {
        width: var(--s);
        margin: var(--m);
        height: calc(var(--s)*1.1547); 
        display: inline-block;
        font-size:initial;
        z-index: -1 !important;
        clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
        background-color: rgb(248, 249, 250);
        margin-bottom: calc(var(--m) - var(--s)*0.2885);
        
    }


    .containerh div.empty {
        width: var(--sl);
        margin: var(--ml);
        height: calc(var(--sl)*1.1547); 
        display: inline-block;
        font-size:initial;
        z-index: -1 !important;
        clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
        background-color: rgb(248, 249, 250);
        margin-bottom: calc(var(--ml) - var(--sl)*0.2885);
        
    }
    
    .containerh::before {
        content: "";
        width: calc(var(--s)/2 + var(--m));
        float: left;
        height: 120%;
        shape-outside: repeating-linear-gradient(     
                        #0000 0 calc(var(--f) - 3px),      
                        #000  0 var(--f));
    }

    .containerh div.bbody:hover {
        animation-name: grow;
        animation-duration: 1100ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        cursor: pointer;
        position:relative;
        background: #cff4fc;
        z-index: 1000 !important;
    }

    .bg-bbody {
        z-index: 500;
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #cff4fc;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #cff4fc;
    }

    .containerh div.bbrain:hover {
        animation-name: grow;
        animation-duration: 1100ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        cursor: pointer;
        position:relative;
        background: #f8d7da;
        z-index: 1000 !important;
    }

    .bg-bbrain {
        z-index: 500;
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #f8d7da;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #f8d7da;
    }

    .containerh div.bsafety:hover {
        animation-name: grow;
        animation-duration: 1100ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        cursor: pointer;
        position:relative;
        background: #fff3cd;
        z-index: 1000 !important;
    }

    .bg-bsafety {
        z-index: 500;
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #fff3cd;
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #fff3cd;
    }

    .containerh div.brelationship:hover {
        animation-name: grow;
        animation-duration: 1100ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        cursor: pointer;
        position:relative;
        background: #cfe2ff;
        z-index: 1000 !important;
    }

    .bg-brelationship {
        z-index: 500;
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #cfe2ff;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #cfe2ff;
    }

    .containerh div.parenttoo:hover, div.parenttoo:hover {
        animation-name: grow;
        animation-duration: 1100ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        cursor: pointer;
        position:relative;
        background: #d1e7dd;
        z-index: 1000 !important;
    }

    .bg-parenttoo {
        z-index: 500;
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #d1e7dd;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #d1e7dd;
    }

    .containerh div.booknow:hover {
        animation-name: grow;
        animation-duration: 1100ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        cursor: pointer;
        position:relative;
        /*background: #f1aeb5;*/
        z-index: 1000 !important;
    }

    .bg-booknow {
        background-color: #f1aeb5;
    }   

    .containerh div.empty {
        background-color: rgb(248, 249, 250);
    }

    #titlePanel {
        z-index: 500;
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #effffe;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #ffffff;
        
    }

    #titlePanel h1 {
        color:#ffffff;
        letter-spacing: 4px;
        font-family: 'Lilita One', sans-serif;
        -webkit-text-stroke: 2px #258d9d !important;
        font-size: 3.5rem !important;
    }

    .containerh div.middle {
        overflow: visible;
        padding: 0px;
        margin: 0px;
        width: 280px;
        height: 280px;
    }


    .hexagon {
        width: 120px;
        margin: 20px;
        height: calc(120px*1.1547); 
        display: inline-block;
        font-size:initial;
        clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
        background-color: rgb(248, 249, 250);
        margin-bottom: calc(20px - 120px*0.2885);
    }

    .hexagonL {
        width: 180px;
        margin: 30px;
        height: calc(180px*1.1547); 
        display: inline-block;
        font-size:initial;
        clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
        background-color: rgb(248, 249, 250);
        margin-bottom: calc(30px - 180px*0.2885);
    }

    div.bbody:hover {
        animation-name: grow;
        animation-duration: 1100ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        cursor: pointer;
        position:relative;
        background: #cff4fc;
        z-index: 1000 !important;
    }

    .bg-bbody {
        z-index: 500;
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #cff4fc;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #cff4fc;
    }

    div.bbrain:hover {
        animation-name: grow;
        animation-duration: 1100ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        cursor: pointer;
        position:relative;
        background: #f8d7da;
        z-index: 1000 !important;
    }

    .bg-bbrain {
        z-index: 500;
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #f8d7da;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #f8d7da;
    }

    div.bsafety:hover {
        animation-name: grow;
        animation-duration: 1100ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        cursor: pointer;
        position:relative;
        background: #fff3cd;
        z-index: 1000 !important;
    }

    .bg-bsafety {
        z-index: 500;
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #fff3cd;
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #fff3cd;
    }

    div.brelationship:hover {
        animation-name: grow;
        animation-duration: 1100ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        cursor: pointer;
        position:relative;
        background: #cfe2ff;
        z-index: 1000 !important;
    }

    .bg-brelationship {
        z-index: 500;
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #cfe2ff;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #cfe2ff;
    }

    div.parenttoo:hover, div.parenttoo:hover {
        animation-name: grow;
        animation-duration: 1100ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        cursor: pointer;
        position:relative;
        background: #d1e7dd;
        z-index: 1000 !important;
    }

    .bg-parenttoo {
        z-index: 500;
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #d1e7dd;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #d1e7dd;
    }

    div.booknow:hover {
        animation-name: grow;
        animation-duration: 1100ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        cursor: pointer;
        position:relative;
        /*background: #f1aeb5;*/
        z-index: 1000 !important;
    }

    .bg-booknow {
        background-color: #f1aeb5;
    }
    
    
    /****** mobile view ******/

    .accordion.benefits-baby-swimming{
        --bs-accordion-btn-focus-box-shadow: none !important;
        --bs-accordion-btn-bg: #f8f9fa;
        
    }


    .accordion .baby-brain-mobile {
        --bs-accordion-active-bg: #f8d7da;
        --bs-accordion-active-color: #dc3948;
        --bs-accordion-btn-color: #dc3948;
    }
    
    #baby-brain-mobile-body {
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #f8d7da;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #f8d7da;
    }

    .accordion .baby-body-mobile {
        --bs-accordion-active-bg: #cff4fc;
        --bs-accordion-active-color: #22ccf1;
        --bs-accordion-btn-color: #22ccf1;
    }

    #baby-body-mobile-body {
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #cff4fc;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #cff4fc;
    }


    .accordion .baby-safety-mobile {
        --bs-accordion-active-bg: #fff3cd;
        --bs-accordion-active-color: #ffc715;
        --bs-accordion-btn-color: #ffc715;
    }

    #baby-safety-mobile-body {
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #fff3cd;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #fff3cd;
    }


    .accordion .baby-relationship-mobile {
        --bs-accordion-active-bg: #cfe2ff;
        --bs-accordion-active-color: #1672ff;
        --bs-accordion-btn-color: #1672ff;
    }

    #baby-relationship-mobile-body {
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #cfe2ff;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #cfe2ff;
    }



    .accordion .baby-parenttoo-mobile {
        --bs-accordion-active-bg: #d1e7dd;
        --bs-accordion-active-color: #5dab88;
        --bs-accordion-btn-color: #5dab88;
    }

    #baby-parenttoo-mobile-body {
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #d1e7dd;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #d1e7dd;
    }

    .accordion .booknow-mobile {
        --bs-accordion-active-bg: #f1aeb5;
    }



    /******* POOL PAGE *******/

    .toggle-shadow {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) ;
    }

    .toggle-shadow:hover {
        box-shadow: none !important;
        transition: all .6s ease;
        top:1px;
    }


    /******* bg encart *****/

    .bg-bbody-75 {
        z-index: 500;
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #cff4fc;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #cff4fc;
        opacity: 0.7;
    }

    .bg-bbody-50 {
        z-index: 500;
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #cff4fc;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #cff4fc;
        opacity: 0.5;
    }

    .bg-bbody-25 {
        z-index: 500;
        --s: 100px; /* control the size */
        --c1: #ffffff;
        --c2: #cff4fc;
        
        --_g: 
           var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
           var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
        background:
          radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#ffffff 96%,#0000),
          radial-gradient(100% 100% at 0 100%,#0000, #ffffff 4%,var(--_g),var(--c1) 96%)
          var(--c1);
        background-size: var(--s) var(--s);
        background-color: #ffffff;
        /*opacity: .25;*/
    }

/****** HP Bootstrap Slider Caption effects *****/

.caption-animate .item.active .carousel-caption {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .caption-animate  .item.active .carousel-caption.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  
  .caption-animate  .item.active .carousel-caption.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
  
  .caption-animate .item.active .carousel-caption.flipOutX,
  .caption-animate .item.active .carousel-caption.flipOutY,
  .caption-animate .item.active .carousel-caption.bounceIn,
  .caption-animate .item.active .carousel-caption.bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
  }
  .caption-animate .item .carousel-caption.fadeIn,
  .caption-animate .item .carousel-caption.fadeInDown,
  .caption-animate .item .carousel-caption.fadeInDownBig,
  .caption-animate .item .carousel-caption.fadeInLeft,
  .caption-animate .item .carousel-caption.fadeInLeftBig,
  .caption-animate .item .carousel-caption.fadeInRight,
  .caption-animate .item .carousel-caption.fadeInRightBig,
  .caption-animate .item .carousel-caption.fadeInUp,
  .caption-animate .item .carousel-caption.fadeInUpBig{
    opacity:0;
  }



  /********* blinking text *********/

  .blink_me {
    animation: blinker 1.2s linear infinite;
  }
  
  @keyframes blinker {
    50% {
      opacity: .25;
    }
  }

  /****** wavy bottom :: https://www.shapedivider.app/ *******/
    .custom-shape-divider-bottom-1715760463 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
        transform: rotate(180deg);
    }

    .custom-shape-divider-bottom-1715760463 svg {
        position: relative;
        display: block;
        width: calc(179% + 1.3px);
        height: 63px;
    }

    .custom-shape-divider-bottom-1715760463 .shape-fill {
        fill: #cff4fc;
    }

 /******* Custom tab bar **********/

 .nav-tabs .nav-link.active {
    color: white;
    background-color: #1980B6;
    border-color: var(--bs-nav-tabs-link-active-border-color);
  }


  /******** text stroke for pool page title *********/

  .text-stroke-blue {
    -webkit-text-stroke: 3px rgba(25,128,182,1);
    color: #DAF1F6;
  }

  

 .item-hover-pool {
    color: #fff;
    font-family: 'Chewy', cursive;
    letter-spacing: .09em;
    text-shadow: 1px 1px 4px #000000;
    font-variant: small-caps;
    /*font-size: 2.5rem;*/
    line-height: 1em;
}
    



  /********* flip image horizontally *********/

    .flip-img-horizontal {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
    }

/********* eyfs accordion **********/

#accordion_left, #accordion_right {
    --bs-accordion-btn-focus-box-shadow: none !important;
    --bs-accordion-btn-bg:#1980B6;
    --bs-accordion-btn-color:white;
    --bs-accordion-btn-icon: none !important;
    --bs-accordion-btn-active-icon: none !important;
    --bs-accordion-active-bg: #66B7E2;
    --bs-accordion-active-color: white;
    --bs-accordion-border-color: white;
    --bs-accordion-border-width: 5px;
}

.blackboard {
    position: relative;
    padding: 1.5rem;
    border: tan solid 12px;
    border-top: #bda27e solid 12px;
    border-left: #b19876 solid 12px;
    border-bottom: #c9ad86 solid 12px;
    box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5);
    background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1));
    background-color: #333;
    margin: 1rem;
}

/*********** course enquiry form page *********/

.button-overlay {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
  }


  /********** pool template pages **********/

  .my-handle {
    cursor: move;
    cursor: -webkit-grabbing;
  }

  .blue-background-class {
	background-color: #C8EBFB;
}


/********* teachers and pools perfs *********/

.accordionPerformance {

  --bs-accordion-btn-bg: #e595d6;
  --bs-accordion-active-bg: #2EB0C3;
  --bs-accordion-btn-color: #ffffff;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-color: #ffffff;
  --bs-accordion-border-color: #fefefe;
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: none;
  --bs-accordion-inner-border-radius: none;

}


/********** REDBOOK **********/

.accordionPools {

  --bs-accordion-btn-bg: #e595d6;
  --bs-accordion-active-bg: #2EB0C3;
  --bs-accordion-btn-color: #ffffff;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-color: #ffffff;
  --bs-accordion-border-color: #fefefe;
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: none;
  --bs-accordion-inner-border-radius: none;

}

/* <i> tag in accordion button */
.accordionPools .accordion-item .accordion-header .accordion-button i {
    opacity: 1 !important;
}