.ctc-light-bg {
    background-color: #dfedf5;
}
.ctc-bg {
    background-color: /*#0072b1*/#0077B5;
}
.ctc-dark-bg {
    background-color: #003a62;
}
.ctc-bg .sec-title .sub-title,
.ctc-dark-bg .sec-title .sub-title {
    color: #fff !important;
}
.ctc-bg a,
.ctc-bg p,
.ctc-bg div,
.ctc-bg h1,
.ctc-bg h2,
.ctc-bg h3,
.ctc-bg h4,
.ctc-bg h5,
.ctc-bg h6,
.ctc-dark-bg a,
.ctc-dark-bg p,
.ctc-dark-bg div,
.ctc-dark-bg h1,
.ctc-dark-bg h2,
.ctc-dark-bg h3,
.ctc-dark-bg h4,
.ctc-dark-bg h5,
.ctc-dark-bg h6 {
    color: #fff;
}
.ctc-bg .sec-title .sub-title::before,
.ctc-bg .read-more,
.ctc-bg .btn-style-one,
.ctc-dark-bg .sec-title .sub-title::before,
.ctc-dark-bg .read-more,
.ctc-dark-bg .btn-style-one {
    background: #fff !important;
    background-color: #fff !important;
    color: var(--bg-theme-color1) !important;
}

.ctc-bg b,
.ctc-dark-bg b
/*.ctc-bg .btn-style-one:hover,
.ctc-dark-bg .btn-style-one:hover*/ {
    color: #fff !important;
}
.text-ctc {
    color: var(--theme-color2);
}
.text-ctc-dark {
    color: #0072b1;
}
.our-achievements .content-box {
    background-color: /*#b4e2ff*/#0077B5;
}
.our-achievements .content-box::before {
    border-top-color: #b4e2ff;
}
.our-achievements .content-box::after {
    font-family: 'flaticon';
    font-size: 100px;
    content: "\f122";
    position: absolute;
    right: 0;
    bottom: -35px;
    opacity: 0.04;
}
.our-achievements .testimonial-block:last-child .content-box::before {
    border-top-color: transparent;
}
.our-achievements .testimonial-block .content-box .rating {
    background-color: /*#ffc107*/#ececec;
}
.our-achievements .testimonial-block .content-box .rating {
    color: /*#ffc107*/var(--border-theme-color2);
}
.our-achievements .testimonial-block .content-box .text {
    color: #000;
}

/*.our-achievements .inner-box:hover .content-box {
    background-color: var(--bg-theme-color1);
    color: #fff;
}*/

.btn-style-one::before {
    background-color: #ccc;
}

.our-achievements .inner-box:hover .content-box {
    background-color: #ccc;
    color: #333 !important;
}
.our-achievements .inner-box:hover .content-box div {
    color: #333 !important;
}
.our-achievements .inner-box:hover .content-box:before {
    border-top: 20px solid var(--border-theme-color1);
}
.our-achievements .testimonial-block:last-child .inner-box:hover .content-box:before {
    border-top-color: transparent;
}
.our-achievements .inner-box:hover .content-box .text {
    color: #9898a0;
}

.product-block .inner-box:hover {
    background-color: var(--theme-color2);
    color: #ffffff;
}
.product-block .inner-box:hover a {
    color: #ffffff;
}
.product-block .inner-box:hover a.product-detail-btn {
    border-color: #ffffff;
}
.product-block .inner-box:hover .text-primary {
    color: #ffc107 !important;
}
.features-section-two{
    background: linear-gradient(60deg, /*rgba(84,58,183,1)*/ #0077B5 0%, rgba(0,172,193,1) 100%);
}
.waves {
    position:relative;
    width: 100%;
    height:15vh;
    margin-bottom:-7px; /*Fix for safari gap*/
    min-height:100px;
    max-height:150px;
}
/* Animation */

.parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}
@keyframes move-forever {
    0% {
        transform: translate3d(-90px,0,0);
    }
    100% {
        transform: translate3d(85px,0,0);
    }
}

@media only screen and (min-width: 576px) {

}
@media only screen and (max-width: 768px) {
    .ctc-banner{
        display: none;
    }
    .banner-vid,
    .mob-menu-padding {
        display: block;
    }

    .mob-menu-padding {
        height: 60px;
        background-color: #ad9e8b;
    }
}
@media only screen and (min-width: 768px) {
    .ctc-banner{
        height: 60vh;
        display: block;
    }
    .banner-vid,
    .mob-menu-padding {
        display: none;
    }
}
@media only screen and (min-width: 992px) {
    .ctc-banner{
        height: 100vh;
    }
}
@media only screen and (min-width: 1200px) {
    .sustainability-div {
        margin-right: 25px;
        margin-left: 10%;
        max-width: 100% !important;
    }
}
/*.sustainability-area {
	!*background-color: #e8ffe8;*!
    background: linear-gradient(to right, rgb(182, 244, 146), rgb(51, 139, 147));
}*/
.sustainability-area {
    background: linear-gradient(296deg, #486a33, #325d55, #90ab3b);
    background-size: 600% 600%;

    -webkit-animation: sustainabilitybg 16s ease infinite;
    -moz-animation: sustainabilitybg 16s ease infinite;
    animation: sustainabilitybg 16s ease infinite;
}

@-webkit-keyframes sustainabilitybg {
    0%{background-position:0% 20%}
    50%{background-position:100% 81%}
    100%{background-position:0% 20%}
}
@-moz-keyframes sustainabilitybg {
    0%{background-position:0% 20%}
    50%{background-position:100% 81%}
    100%{background-position:0% 20%}
}
@keyframes sustainabilitybg {
    0%{background-position:0% 20%}
    50%{background-position:100% 81%}
    100%{background-position:0% 20%}
}
.sustainability-area .sec-title .sub-title::before {
    background: #fff;
}
.sustainability-area * {
    color: #fff;
}

.ocean {
    /*background-image: linear-gradient(0deg, #182848, #2980b9)*/
}

.bubble {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    background-color: white;
    bottom: -30px;
    opacity: 0.2;
    animation: bubble 15s ease-in-out infinite,
    sideWays 4s ease-in-out infinite alternate;
}

@keyframes bubble {
    0% {
        transform: translateY(0%);
        opacity: 0.06;
    }
    100% {
        transform: translateY(-120vh);
    }
}


.bubble--1 {
    left: 10%;
    animation-delay: 0.5s;
    animation-duration: 16s;
    opacity: 0.2;
}

.bubble--2 {
    width: 15px;
    height: 15px;
    left: 40%;
    animation-delay: 1s;
    animation-duration: 10s;
    opacity: 0.1;
}

.bubble--3 {
    width: 10px;
    height: 10px;
    left: 30%;
    animation-delay: 5s;
    animation-duration: 20s;
    opacity: 0.3;
}

.bubble--4 {
    width: 25px;
    height: 25px;
    left: 40%;
    animation-delay: 8s;
    animation-duration: 17s;
    opacity: 0.2;
}

.bubble--5 {
    width: 30px;
    height: 30px;
    left: 60%;
    animation-delay: 10s;
    animation-duration: 15s;
    opacity: 0.1;
}

.bubble--6 {
    width: 10px;
    height: 10px;
    left: 80%;
    animation-delay: 3s;
    animation-duration: 30s;
    opacity: 0.4;
}

.bubble--7 {
    width: 15px;
    height: 15px;
    left: 90%;
    animation-delay: -7s;
    animation-duration: 25s;
    opacity: 0.3;
}

.bubble--9 {
    width: 20px;
    height: 20px;
    left: 50%;
    bottom: 30px;
    animation-delay: -5s;
    animation-duration: 19s;
    opacity: 0.2;
}

.bubble--10 {
    width: 40px;
    height: 40px;
    left: 30%;
    bottom: 30px;
    animation-delay: -21s;
    animation-duration: 16s;
    opacity: 0.3;
}

.bubble--11 {
    width: 30px;
    height: 30px;
    left: 60%;
    bottom: 30px;
    animation-delay: -13.75s;
    animation-duration: 20s;
    opacity: 0.3;
}

.bubble--11 {
    width: 25px;
    height: 25px;
    left: 90%;
    bottom: 30px;
    animation-delay: -10.5s;
    animation-duration: 19s;
    opacity: 0.3;
}

.ctc-header-vid {
    background-color: #000;
    background-image: url(../images/icons/video-loading.gif);
    background-repeat: no-repeat;
    background-position: center;
}

.header-style-two .header-lower {
    background-color: rgba(0,0,0,0.5);
}

.opacity-50 {
    opacity: .5 !important;
}