@import url('font.css');

/*======GLOBAL======*/
:root{
    --frog-green : #97cc97;
    --tea-green : #d9edc3;
    --turquoise-green : #aad5b5;
    --green-spring-rain : #b0cfb8;
    --summer-green : #94c1a0;
    --nile-blue : #164061;

    --brandcolor: rgb(31, 87, 130);
    --brandcolor-hover: rgb(22, 64, 97);
    --brandcolor-active: rgb(21, 55, 81);
    --brandcolor-light: rgb(170, 213, 181);
    --brandcolor-lightest: rgb(217, 237, 195);
    --brandcolor-lightest-50: rgba(217, 237, 195,0.5);
    --brandcolor-dark: rgb(16, 49, 74);
    --brandcolor-contrast: rgb(255, 255, 255);

    --brandcolor-rgb: 31, 87, 130;
    --brandcolor-hover-rgb: 22, 64, 97;
    --brandcolor-active-rgb: 21, 55, 81;
    --brandcolor-light-rgb: 170, 213, 181;
    --brandcolor-lightest-rgb: 217, 237, 195;
    --brandcolor-lightest-50-rgb: 217, 237, 195,0.5;
    --brandcolor-dark-rgb: 16, 49, 74;
    --brandcolor-contrast-rgb: 255, 255, 255;
}
*{
    font-family: "Montserrat";
}

body{
    background-color: rgba(var(--brandcolor-rgb), 0.05);
}

.bg-brandcolor        { background-color: var(--brandcolor) !important; }
.bg-brandcolor-light  { background-color: var(--brandcolor-light) !important; }
.bg-brandcolor-lightest  { background-color: var(--brandcolor-lightest) !important; }
.bg-brandcolor-lightest-50  { background-color: var(--brandcolor-lightest-50) !important; }
.bg-brandcolor-dark   { background-color: var(--brandcolor-dark) !important; }

.text-brandcolor        { color: var(--brandcolor) !important; }
.text-brandcolor-light  { color: var(--brandcolor-light) !important; }
.text-brandcolor-dark   { color: var(--brandcolor-dark) !important; }
.text-brandcolor-contrast { color: var(--brandcolor-contrast) !important; }


.border-brandcolor        { border-color: var(--brandcolor) !important; }
.border-brandcolor-light  { border-color: var(--brandcolor-light) !important; }
.border-brandcolor-dark   { border-color: var(--brandcolor-dark) !important; }

.btn-brandcolor {
    background-color: var(--brandcolor) !important; ;
    color: var(--brandcolor-contrast) !important; ;
    border: 1px solid var(--brandcolor) !important; ;
    padding: 0.375rem 0.75rem !important; ;
    font-size: 1rem !important; ;
    line-height: 1.5 !important; ;
    border-radius: 0.25rem !important; ;
    text-align: center !important; ;
    text-decoration: none !important; ;
    cursor: pointer !important; ;
}

.btn-brandcolor:hover {
    background-color: var(--brandcolor-hover) !important; ;
    border-color: var(--brandcolor-hover) !important; ;
}

.btn-brandcolor:active {
    background-color: var(--brandcolor-active) !important; ;
    border-color: var(--brandcolor-active) !important; ;
}

.btn-outline-brandcolor {
    background-color: transparent !important; ;
    color: var(--brandcolor) !important; ;
    border: 1px solid var(--brandcolor) !important; ;
}

.btn-outline-brandcolor:hover {
    background-color: var(--brandcolor) !important; ;
    color: var(--brandcolor-contrast) !important; ;
}


.alert-brandcolor {
    background-color: var(--brandcolor-light) !important; ;
    color: var(--brandcolor-dark) !important; ;
    border: 1px solid var(--brandcolor) !important; ;
    padding: 0.75rem 1.25rem !important; ;
    border-radius: 0.25rem !important; ;
}

.badge-brandcolor {
    display: inline-block !important; ;
    padding: 0.25em 0.4em !important; ;
    font-size: 75% !important; ;
    font-weight: 700 !important; ;
    color: var(--brandcolor-contrast) !important; ;
    background-color: var(--brandcolor) !important; ;
    border-radius: 0.375rem !important; ;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: rgba(var(--brandcolor-rgb), 0.5); /* uses hex color */
    box-shadow: 0 0 0 0.2rem rgba(var(--brandcolor-rgb), 0.25); /* uses rgb + alpha */
}

.m-auto{
    margin-left: auto;
    margin-right: auto;
}

.center {
    transform: translate(-50%, -50%);
}

.rotate-45 {
    transform: rotate(45deg);
}

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-neg45 {
    transform: rotate(-45deg);
}

.rotate-neg90 {
    transform: rotate(-90deg);
}

.center-rotate-45 {
    transform: translate(-50%, -50%) rotate(45deg);
}

.l50{
    left : 50%;
}
.t50{
    top:50%;
}
.r50{
    right : 50%;
}
.b50{
    bottom: 50%;
}


.pointer {
    cursor: pointer;
}

a{
    text-decoration: none;
}

li{
    list-style: none;
}

.btn{
    border-radius: 20px !important;
    padding : 7px 30px !important;
}

.show{
    display: block;
}

.hide{
    display: none;
}

.relative{
    position: relative;
}

.absolute{
    position: absolute;
}

.t-0{
    top : 0;
}

.b-0{
    bottom : 0;
}

.l-0{
    left : 0;
}

.r-0{
    right : 0;
}

.text-justify {
    text-align: justify;
}

.line {
    width: 200px;
    height: 5px;
    border-radius: 5px;
    margin: 15px auto;
}

.line .square{
    height : 15px;
    width : 15px;
    border: 5px solid white;
}


.icon{
    height : 30px;
    width: 30px;
}

.icon img{
    height : 100%;
    width : 100%;
}

section {
  scroll-margin-top: 55px;
}

#home{
    margin-top : -55px;
    height : 55px;
}

/*======LOGO======*/
    .company-logo{
        height : 55px;
    }
    .company-logo-main{
        height : 80%; 
    }
    .company-logo-name{
        height : 50%;
    }

/*======NAVBAR======*/
    .nav-buffer,
    .navigation-bar{
        height : 55px;
        background-color: #fff;
    }

    .nav-item{
        position: relative;
        display: inline-flex;

    }

    .nav-item::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0; 
        height: 3px;
        background-color: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .nav-item:hover::after {
        transform: scaleX(1);
    }
        
    .menu-icon-holder{
        height : 40px; width: 40px;
    }
    
    .hamburger-holder{
        width : 100%;
        height : 100%;
        background-color: transparent;
        top : 0;
        left : 0;
    }
    
    .dash{
        position: absolute;
        width : 80%;
        height : 4px;
        background-color: var(--brandcolor);
        margin: 3px 0;
        border-radius: 2px;
        transition: top 0.3s ease, bottom 0.3s ease, transform 0.3s ease, opacity 0.3s ease;     
    }
    .dash:nth-child(1) {
        top: 15%
    }

    .dash:nth-child(2) {
        top: 35%;
    }

    .dash:nth-child(3) {
        top: 58%
    }
    .menu-icon-holder.open .dash:nth-child(1) {
        transform: rotate(45deg);
        top: 40%; 
    }

    .menu-icon-holder.open .dash:nth-child(2) {
        opacity: 0;
    }

    .menu-icon-holder.open .dash:nth-child(3) {
        transform: rotate(-45deg);
        top: 40%
    }

    #menu-dropdown-items{
        width : 100vw !important;
        
    }

    .l-none{
        left : -10000px !important;
    }    

/*======INTRO======*/
    .intro {
        height : 800px;
        overflow: hidden;
    }

    .intro-content{
      width: 100%;
      height: 100%;
      object-fit:cover;
      display: block;
    }

    .intro-left-text{
        position: relative;
        height : 400px;
        z-index: 1;
    }
    .intro-left{
        top : 0;
        width : 100%
    }

    .intro-right{
        top : 400px;
        width : 100%;
    }

    @media (min-width: 768px) {
        .intro {
            height: 400px;
            margin-top : 55px !important;
        }
        .intro-left,
        .intro-right{
            height : 100%;
            top : 0;
            width : 50%;
        }
        .intro-semi-circle{
            position: absolute;
            top : -10%;
            left : -200px;
            display : block;
            height : 120%;
            width : 400px;
            background-color: var(--brandcolor-lightest);
            border-radius: 50%;
            border : 10px solid rgba(var(--brandcolor-rgb),0.8);
        }

        .semi-circle-hider{
            position: absolute;
            top : -10%;
            left : -400px;
            display : block;
            height : 120%;
            width : 400px;
            background-color: var(--brandcolor-lightest);
        }
    }  

    /* .intro-left-text ul li::before{
        content : "⤷";
        color : var(--brandcolor);
        margin-right : 15px;
    }   */

    .bullet>*::before{
         content : "⤷";
        color : var(--brandcolor);
        margin-right : 15px;
    }

    .ndis-logo-container{
        height : 100px;
        width : 100px;
    }

    .ndis-logo{
        height : 100%;
        width : 100%;
    }

/*======ABOUT======*/
    .card-img-equal {
        height: 400px; 
        object-fit: cover;
    }

/*======SERVICES======*/
    .carousel-item img {
        height: auto;
        max-height : 600px;
        object-fit: fill; 
    }

    .carousel-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(var(--brandcolor-rgb), 0.5);
        padding: 10px 0;
    }

    .carousel-caption h1 {
        font-weight: bold;
        color: var(--bs-white);
    }

    .carousel-caption p {
        font-size: 1.1rem;
        color: var(--bs-white) !important;
    }

    .carousel-caption .caption-content {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 15px; 
    }

    .carousel-indicators {
        bottom: -20px;
        
    }

/*======CONTACT======*/
    .brand-icon-holder{
        width : 35px;
        height : 35px;
    }

    .brand-icon{
        border-radius: 30%;
    }

    .brand-youtube{
        border-top-right-radius: 100%;
        border-bottom-left-radius: 100%;
        border-bottom-right-radius: 50%;
        border-top-left-radius: 50%;
    }
    
    .brand-youtube-centre{
        left : -10%;
        top : -10%;
    }

    .brand-icon-youtube-triangle{
        height : 40% !important;
        width : 40% !important;
        top : 30%;
        left : 30%;
    }

    .brand-icon-youtube-masking{
        left : -35%;
        top : -35%;
    }

    .brand-instagram{
        border-radius: 40% ;
    }

    .brand_instagram_circle{
        height : 50%; width : 50%; border : 3px solid white; border-radius: 50%;
       
    }
    .brand_instagram_circle_small{
        height : 10%; width : 10%; top : 15%; right : 15%;
    }

/*======CAREER======*/
    .career-accordion-button::after{
        display : none !important;
    }

/*======FOOTER======*/
    .powered-text{
        font-size : 10px;
    }