/*
 Theme Name:   Hello-elementor Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Hello-elementor Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  hello-elementor-child
*/


body{

}
.green{
    color: #1FA7AD;
}
.elementor-widget-image a img[src$=".svg"] {
    width: 100% !important;
}
.white{
    color:#fff !important;
}
.sectionpadding{
    padding: 60px 20px 60px 20px !important;
}
.sectionpadding-reset{
    padding: 60px 0px 60px 0px !important;
}
.home-header{
    width: auto !important;
    top: 50px;
    left: 220px;
}
.home-header-bg h2{
    padding: 7px 17px 7px 17px;
    background-color: rgba(52, 51, 52, 0.5);
    width: fit-content;
}
.header-bg h1{
    padding: 7px 17px 7px 17px;
    background-color: rgba(52, 51, 52, 0.5);
    width: fit-content;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    justify-self: center;
}
.header-bg h1 span{
    padding-left: 10px;
    padding-right: 10px;
}
.header-on-image{
    position: absolute !important;
    top: 43%;
}
.header-on-image-2-lines{
    position: absolute !important;
    top: 33%;
}
.reset-p p{
    padding-top: 7px;
    margin-bottom: 10px;
}
.affiliations img{
    max-width: 150px !important;
}
.heading-underline h5::after{
    content: "";
    position: absolute;
    border-bottom: 2px solid #DCB271;
    width: 60px;
    left: 0;
    bottom: -7px;
}
.btn-a a{
    border: 2px solid #fff;
    background-color: transparent;
    border-radius: 0;
    padding: 10px 20px 10px 20px;
    color: #fff !important;
}
.btn-a a:hover{
    border: 2px solid #DCB271;
    background-color: #DCB271;
    color: #fff !important;
}
.btn-b a{
    border: 2px solid #00311e;
    color: #00311e !important;
    background-color: transparent;
    border-radius: 0;
    padding: 10px 20px 10px 20px;
}
.btn-b a:hover{
    border: 2px solid #00311e;
    background-color: #00311e;
    color: #fff !important;
}
.mainmenu .menu-item a {
    color: #343334;
}
.mainmenu .menu-item a:hover {
    color: #1FA7AD;
}
.mainmenu .menu-item a::after {
    opacity: 0;
    content:"";
    position:absolute;
    left:0; right:0; top:-10px; bottom:0;
    margin:auto;
    width:40px; height:50px;   /* arc’s radius */
    border-bottom:3px solid #1FA7AD;   /* color & thickness */
    border-left:3px solid transparent;
    border-right:3px solid transparent;
    border-radius:0 0 100px 100px;      /* curve */
    transform:translateY(0px);        /* lift slightly if needed */
    background-color: transparent !important;
    color: #1FA7AD;
    z-index: 999 !important;
}
.mainmenu .sub-menu a::after {
    display: none !important;
}
.sub-menu{
    max-width: 150px !important;
}
.elementor-nav-menu a{
    white-space: wrap !important;
}
.mainmenu a:hover::after {
    opacity: 1;
    top: 0px;    
}
.mainmenu .current-menu-item a{
    color: #1FA7AD;
}
.mainmenu .current-menu-item a::after{
    opacity: 1;
    content:"";
    position:absolute;
    left:0; right:0; top:0; bottom:0;
    margin:auto;
    width:40px; height:50px;   /* arc’s radius */
    border-bottom:3px solid #1FA7AD;   /* color & thickness */
    border-left:3px solid transparent;
    border-right:3px solid transparent;
    border-radius:0 0 100px 100px;      /* curve */
    transform:translateY(0px);        /* lift slightly if needed */
    background-color: transparent !important;
    color: #1FA7AD;
    z-index: 999 !important;
}
.divider-a{
    max-width: 300px !important;
    margin: 0px auto;
}
.divider-b{
    max-width: 30px !important;
    margin: 0px auto;
}
.divider-c{
    max-width: 330px !important;
}
.justify p{
    text-align: justify;
}
.width-a{
    max-width: 710px !important;
    margin: 0px auto;
}
.width-b{
    max-width: 600px !important;
    margin: 0px auto;
}
.width-c{
    max-width: 330px !important;
}
.ov-hidden{
    overflow: hidden !important;
}
.ov-x-hidden{
    overflow-x: hidden !important;
}
.header-toggle{
    position: fixed !important;
    z-index: 9999 !important;
    transition: all 0.3s !important;
    padding: 10px 0px 10px 0px;
}
.header-toggle.toggled{
    transition: all 0.3s !important;
    padding: 0px 10px 0px 10px;
}
.mainmenu a{
    padding: 10px 10px 10px 10px !important;
    transition: all 0.3s !important;
}
.header-toggle.toggled .mainmenu a{
    padding: 0px 10px 0px 10px !important;
}
.header-toggle.toggled .mainmenu .sub-menu a{
    padding: 10px 10px 10px 10px !important;
}
.mainmenu li{
    padding: 10px 10px 10px 10px !important;
    transition: all 0.3s !important;
}
.header-toggle.toggled .mainmenu li{
    padding: 10px 10px 10px 10px !important;
    transition: all 0.3s !important;
}
.header-toggle.toggled .mainmenu .sub-menu li {
    padding: 10px 10px 10px 10px !important;
    transition: all 0.3s !important;
}
.header-toggle .mainlogo img{
    transition: all 0.3s;
}
.header-toggle .mainlogo img{
    transition: all 0.3s;
    max-width: 170px;
}
.header-toggle.toggled .mainlogo img{
    transition: all 0.3s;
    max-width: 160px;
}
.page-padding{
    margin-top: 100px !important;
}
.nobreak{
    --flex-wrap: none !important;
}
.rule {
    position: relative;
    height: 60px;
    max-width: 1050px;
    margin: 0px auto;
}
.rule .tick {
    position: absolute;
    left: 50%;
    top: 6px;
    width: 2px;
    height: 24px;
    background: #fff;
    transform: translateX(-50%);
}
.rule .left,
.rule .right {
    position: absolute;
    top: 20px;               /* position of horizontal line */
    height: 2px;
    background: #fff;
    width: 50%;
    transform: scaleX(0);    /* start collapsed */
}
.rule.dark .left,
.rule.dark .right {
    background: #000;
}
.rule .left.animate-this,
.rule .right.animate-this{
    animation: drawLine 2.2s ease-out forwards;
    animation-delay: 1s;
}
.rule .left {
    right: 50%;
    transform-origin: right center;
}
.rule .left::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 0;               /* start hidden */
    background: #fff;
}
.rule.dark .left::after {
    background: #000;
}
.rule .right {
    left: 50%;
    transform-origin: left center;
}
.rule .right::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 2px;
    height: 0;               /* start hidden */
    background: #fff;
}
.rule.dark .right::after {
    background: #000;
}
.rule .left.animate-this:after,
.rule .right.animate-this:after{
    animation: dropLine 0.4s ease-out forwards;
    animation-delay: 3.2s;   /* wait until horizontal finishes */
}

/* animations */
@keyframes drawLine {
  to { transform: scaleX(1); }
}

@keyframes dropLine {
  to { height: 30px; }     /* vertical drop length */
}

.timelinecounters{
    margin-top: -100px;
    max-width: 240px;
}
.timelinecounters .elementor-widget-container{
    display: flex;
    justify-content: center;
}
.timelinecounters .elementor-counter{
    padding-top: 86px;
}
.timelinecounters .elementor-widget-container:before{
    content: "";
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("images/circle-white.png");
    min-width: 200px;
    min-height: 200px;
    animation: spin-background 10s linear infinite;
}
.timelinecounters.green .elementor-widget-container:before{
    background-image: url("images/circle-green.png");
}
.timelinecounters .elementor-counter-title{
    padding-top: 100px !important;
    text-align: center;
    line-height: 20px !important;
}
.timelinecounters .elementor-counter:before{
    content: "";
    position: absolute;
    border-bottom: 3px solid #1FA7AD;
    min-width: 60px;
    width: 60px;
    left: 0;
    right: 0;
    top: auto;
    bottom: 110px;
    margin: 0px auto;
    text-align: center;
}

.rule.dark {
    max-width: 1200px;
}
.circleimages{
    max-width: 220px;
}
.circleimages .circles{
    min-height: 130px !important;
}
.circleimages .circles{
    display: flex;
    justify-content: center;
}
.circleimages .circles{
    align-items: center;
}
.circleimages .circles:before{
    content: "";
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("images/twistcircle.png");
    min-width: 200px;
    min-height: 200px;
    animation: spin-background 10s linear infinite;
}
.circleimages img{
    position: relative !important;
}
.circle-buildings{
    max-width: 130px !important;
}
.circle-mall{
    max-width: 160px !important;
}
.circle-data{
    max-width: 90px !important;
}
@keyframes spin-background {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

.banner-bg::before,
.banner-bg > .elementor-background-video-container::before{
    background-position: -100px 0px !important;
}
@media all and (max-width: 1620px){
    .banner-bg::before,
    .banner-bg > .elementor-background-video-container::before{
        background-position: -240px 0px !important;
    }   
}

@media all and (max-width: 1500px){
    .banner-bg::before,
    .banner-bg > .elementor-background-video-container::before{
        background-position: -300px 0px !important;
    }
}

@media all and (max-width: 1454px){
    .rule.dark {
        max-width: 980px;
    }
}

@media all and (max-width: 1400px){
    .banner-bg::before,
    .banner-bg > .elementor-background-video-container::before{
        background-position: -400px 0px !important;
    }
}

@media all and (max-width: 1334px){
    .rule {
        max-width: 800px;
    }
}

@media all and (max-width: 1280px){
    
}

@media all and (max-width: 1214px){
    .rule.dark {
        max-width: 730px;
    }
}

@media all and (max-width: 1170px){
    .home-header{
        top: 50px;
        left: 160px;
    }
}

@media all and (max-width: 1080px){
    .banner-bg::before,
    .banner-bg > .elementor-background-video-container::before{
        background-position: -500px 0px !important;
    }
    .home-header{
        top: 50px;
        left: 100px;
    }
}

@media all and (max-width: 1074px){
    .rule {
        max-width: 530px;
    }
}

@media all and (max-width: 1024px){
    .header-bg h1 span{
        padding-left: 5px;
        padding-right: 5px;
    }
    .site-banners .elementor-element{
        min-height: 500px !important;
    }
    .sectionpadding{
        padding: 40px 20px 40px 20px !important;
    }
    .sectionpadding-reset{
        padding: 40px 0px 40px 0px !important;
    }
    .mainmenu li {
        padding: 1px 10px 1px 10px !important;
        transition: all 0.3s !important;
    }
    .mainlogo{
        z-index: 99;
    }
    .header-toggle{
        transition: all 0.3s !important;
        max-height: 100px;
    }
    .header-toggle.toggled {
        transition: all 0.3s !important;
        max-height: 76px;
    }
    .mainmenu .current-menu-item a::after,
    .mainmenu a::after{
        display: none !important;
    }
    .elementor-nav-menu--dropdown{
        margin-top: 30px !important;
    }
    .header-toggle.toggled .elementor-nav-menu--dropdown{
        margin-top: 18px !important;
    }
    .sub-menu.elementor-nav-menu--dropdown{
        margin-top: 0px !important;
    }
    .menucontainer{
        min-width: 100% !important; 
    }
    .header-toggle .mainlogo img {
        transition: all 0.3s;
        min-width: 180px;
        max-width: 180px;
    }
    .page-padding {
        margin-top: 90px !important;
    }
    .banner-bg::before,
    .banner-bg > .elementor-background-video-container::before{
        background-position: -180px 0px !important;
    }
    .home-header{
        top: 50px;
        left: 150px;
    }
}

@media all and (max-width: 974px){
    .rule.dark {
        max-width: 500px;
    }
}

@media all and (max-width: 860px){
    
}

@media all and (max-width: 830px){
    .banner-bg::before,
    .banner-bg > .elementor-background-video-container::before{
        background-position: -180px 0px !important;
    }
    .home-header{
        top: 50px;
        left: 120px;
    }
}

@media all and (max-width: 814px){
    .rule {
        max-width: 280px;
    }
}

@media all and (max-width: 767px){
    .banner-bg::before,
    .banner-bg > .elementor-background-video-container::before{
        background-position: -100px 0px !important;
    }
    .home-header{
        top: 2%;
        left: 36%;
    }
    .addpadd{
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media all and (max-width: 734px){
    .rule.dark {
        max-width: 260px;
    }
}

@media all and (max-width: 660px){
    .banner-bg::before,
    .banner-bg > .elementor-background-video-container::before{
        background-position: -150px 0px !important;
    }
    .home-header{
        top: 2%;
        left: 36%;
    }
}

@media all and (max-width: 560px){
    .home-header{
        top: 2%;
        left: 40%;
    }
}

@media all and (max-width: 530px){
    .headingpadding-530 .e-con-inner{
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
    .hide-530{
        display: none !important;
    }
    .home-header{
        align-items: flex-end !important;
    }
}

@media all and (max-width: 500px){
    .header-on-image{
        position: absolute !important;
        top: 30%;
    }
    .header-on-image-2-lines{
        position: absolute !important;
        top: 15%;
    }
}

@media all and (max-width: 460px){
    .home-header h2{
        font-size: 16px !important;
    }
    .headingpadding-530{
        padding-right: 0 !important;
    }
}

@media all and (max-width: 400px){
    .banner-bg::before,
    .banner-bg > .elementor-background-video-container::before{
        background-position: -100px 0px !important;
    }
    .home-header {
        top: 2%;
        left: 30%;
    }
}