/*@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Glegoo);
@import url(http://fonts.googleapis.com/css?family=Montserrat);
@import url(http://fonts.googleapis.com/css?family=Open%20Sans);*/
@import url('roboto.css');
@import url('Roboto_Condensed.css');
@import url('Glegoo.css');
@import url('Montserrat.css');
@import url('OpenSans.css');




body {
    font-family: "Montserrat", sans-serif;
    background: #ffffff;
    font-weight: bold;
}

p {
    font-family: "Montserrat", sans-serif;
    line-height: 22px;
    font-size: 16px;
    font-weight: 300;
}

/*=== MEDIA QUERY ===*/
.top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    color: #fff;
    transition: all 0.2s ease-out 0s;
    padding: 15px 0;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #dedede;
    z-index: 10;
}

    .top-bar.animated-header {
        padding: 20px 0;
        background: #fff;
        box-shadow: none;
    }

.navbar {
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0;
}

.mainMenu-right {
    margin-left: auto !important;
}

    .navbar.bg-light {
        background: #fff !important;
    }

    .navbar .nav-item .nav-link {
        /*color: #444 !important;*/
        color:#0a62bb !important;
        font-size: 14px;
        font-weight: 900;
        transition: .3s all;
        text-transform: uppercase;
        padding: 5px 15px;
        display: block;
    }

        .navbar .nav-item .nav-link:hover {
            /*color: #0a62bb !important;*/
            /*color: #ffd800 !important;*/
            color: gainsboro !important;
        }

    .navbar .nav-item:last-child .nav-link {
        padding-right: 0;
    }

.dropdown-menu {
    /*background: #222222;*/
    /*background: white;*/
    background-color: #0a62bb;
    border: 0;
    border-radius: 0;
    padding: 15px;
    box-shadow: none;
    display: block;
    opacity: 0;
    z-index: 1;
    visibility: hidden;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    transition: visibility 500ms, opacity 500ms, -webkit-transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
    transition: visibility 500ms, opacity 500ms, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
    transition: visibility 500ms, opacity 500ms, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99), -webkit-transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
}

/*#divSlogan {
    display: flex;
    flex-wrap: wrap;
}*/

/* Media query for screens less than 600px wide */
@media (max-width: 600px) {
    #divSlogan {
        font-size: 11px;
    }
    /*#divSlogan_2 {
        white-space: normal;
    }*/

    #Message2Section .team-wrapper {
        padding-top: 100px;
        background: white;
        padding-bottom: 30px;
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        position: relative;
    }

        #Message2Section .team-wrapper:hover {
            cursor: pointer;
            /*opacity: 0.9;*/
            bottom: 1px;
        }

        #Message2Section .team-wrapper .team-des {
            padding: 20px;
            /*padding-right: 135px*/
        }

   

    #Message2Section img {
        max-width: 350px;
        height: auto;
    }

    #PolicySection h2 {
        color: white;
        font-size: 40px !important;
        text-shadow: 2px 2px 4px #000000;
    }

    #Sustain2Section h2 {
        color: white;
        font-size: 40px !important;
        text-shadow: 2px 2px 4px #000000;
    }

    #Sustain4Section h2 {
        color: white;
        font-size: 40px !important;
        text-shadow: 2px 2px 4px #000000;
    }

    #Sustain6Section h2 {
        color: white;
        font-size: 60px !important;
        text-shadow: 2px 2px 4px #000000;
    }

    #Sustain8Section h2 {
        color: white;
        font-size: 40px !important;
        text-shadow: 3px 3px 5px #000000;
    }
}



@media (max-width: 991px) {
    #team .team-wrapper {
        margin-top: 40px;
    }


    #Message2Section .team-wrapper {
        margin-top: 40px;
    }

    #Policy2Section .team-wrapper {
        margin-top: 40px;
    }

    .dropdown-menu {
        display: none;
        opacity: unset;
        visibility: unset;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    #Message2Section .team-wrapper {
        padding-top: 100px;
        background: white;
        padding-bottom: 30px;
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        position: relative;
    }

        #Message2Section .team-wrapper:hover {
            cursor: pointer;
            /*opacity: 0.9;*/
            bottom: 1px;
        }

        #Message2Section .team-wrapper .team-des {
            padding: 20px;
            /*padding-right: 135px*/
        }

 

    #Message2Section img {
        max-width: 100%;
        height: auto;
    }
}

.dropdown-item {
    background-color: #0a62bb;
    color: #fff;
    /*color: #0a62bb;*/
    display: block;
    font-size: 14px;
    font-weight: 900;
    line-height: normal;
    text-decoration: none;
    padding: 8px 0;
    transition: .3s all;
}

    .dropdown-item:not(:last-child) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .dropdown-item:hover {
        /*color: #ffd800 !important;*/
        color: gainsboro !important;
        /*color: #0a62bb !important;*/
        background: transparent;
    }

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1);
}



/*#SliderHeader {

    background-image: radial-gradient(at 300px 300px,rgba(0,0,0,.2), 0, rgba(0,0,0,.7) 180%),url('../images/harddisk_4.jpg');
    background-size: cover;
    background-attachment: fixed;
    padding: 230px 0;
    color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    position: relative;
}*/

#SliderHeader {
    background-image: radial-gradient(at 300px 300px,rgba(0,0,0,.2), 0, rgba(0,0,0,.3) 180%),url('../images/p5.jpg');

    /*background-image: radial-gradient(at 300px 300px,rgba(0,0,0,.2), 0, rgba(0,0,0,.3) 180%),url('../images/p3.jpg');*/
 
    background-position: center top;
    background-size: cover;
    /*background-attachment: fixed;*/
    padding: 230px 0;
    color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.gradient {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(at 300px 300px, rgba(159,0,191,.9) 0, #4D4FA7 70%);
}

    
    /*#SliderHeader:before {
        content: '';
        z-index: 9;
        background: rgba(255, 255, 255, 0.78);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }*/
    #SliderHeader .block {
        position: relative;
        z-index: 9;
    }


    #SliderHeader h1 {
        /*font-size: 4.5rem;
        color: #0a62bb;
        text-shadow: 2px 2px white;
        font-weight: 900;*/
        /*font-size: 72px;*/
        font-size: 3.5rem;
        color: whitesmoke;
        font-weight: bolder;
        font-family: url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
        /*background: -webkit-linear-gradient(#0a62bb, #0A0ABB, #0ABBBB );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 900;*/
        /*filter: drop-shadow(2px 2px #ffffff);*/
    }
    /* lineup class and keyframes */
.lineUp {
    /*animation: 2s anim-lineUp ease-out infinite;*/
    animation: 2s anim-lineUp ease-out;
    /*animation-fill-mode: forwards;*/
}

@keyframes anim-lineUp {
    0% {
        opacity: 0;
        transform: translateY(80%);
    }

    20% {
        opacity: 0;
    }

    50% {
        opacity: 1;
        transform: translateY(0%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}



.typed-out {
    display: inline-block;
    overflow: hidden;
    /*border-right: .15em solid orange;*/
    white-space: nowrap;
    /*font-size: 1.6rem;*/
    font-size: 1.4rem;
    width: 0;
    animation: typing 4s forwards infinite;
    text-shadow: 2px 2px #0a62bb;
}

@keyframes typing {
    from {
        width: 0%
    }

    to {
        width: 100%
    }
}

#wrapper {
    /*width: 100%;
    height: 400px;
    border: 1px solid black;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.btnIntro {
    /*background-color: #0a62bb;*/
    background-color:transparent;
    border-color:white;
    border: solid;
    color: white;
    padding: 16px 32px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    opacity: 0.8;
    transition: 0.3s;

}

    .btnIntro:hover {
        background-color: #0a62bb;
        opacity: 0.8;
        border-color: white;
        color: white;
    }


/* start about team service portfolio contact */
#IntroSection, #ValueSection, #LinkSection, #ContactSection, #MissionSection, #CultureSection, #ContactUsSection {
    padding-top: 90px;
    padding-bottom: 40px;
}
/* end about team service portfolio contact */

    #IntroSection .IntroContent {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    #IntroSection h2 {
        font-weight:bold;
    }

    #IntroSection p {
        font-family: "Montserrat", sans-serif;
        line-height: 22px;
        font-size: 16px;
        font-weight: 500;
    }

    .MoveFromLeft {
        animation: 4s moveFrmLeft;
        /*animation-delay: 2s;*/
    }

@keyframes moveFrmLeft {
    from {
        left: -200px;
    }

    to {
        left: 0px;
    }
}

.MoveFromRight {
    animation: 4s moveFrmRight;
    /*animation-delay: 2s;*/
}

@keyframes moveFrmRight {
    from {
        right: -200px;
    }

    to {
        right: 0px;
    }
}

#ValueSection .icon {
    text-decoration: none;
    color: #fff;
    background-color: #0a62bb;
    height: 100px;
    text-align: center;
    width: 100px;
    font-size: 50px;
    line-height: 100px;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
 
}

#ValueSection .ValueContent {
    padding-top: 60px;
    padding-bottom: 40px;
}

#ValueSection .media {
    margin: 0px 0 70px 0;
}

    #ValueSection .media .media-left {
        padding-right: 25px;
    }

    #ValueSection .media .media-heading {
        text-transform: uppercase;
    }

#ValueSection h2{

    font-weight:bold;
}
/*#ValueSection .media-body:hover {
    background-color: #0a62bb;
    opacity: 1;
    border-radius: 25px;
}*/

#CultureSection h2 {
    font-weight: bold;
}

#MissionSection {
    padding-bottom: 80px;
}

    #MissionSection h2 {
        font-weight: bold;
    }

    #MissionSection .ColMission {
        display: flex;
        justify-content: center;
        align-items: center;
        /* height: 100px; */
        width: 100px;
    }

    #MissionSection .IconColor {
        background: linear-gradient(to right, #0a62bb, #48B5D6, #B3E0EE);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #MissionSection .MissionIcon {
        padding-bottom: 40px;
    }
    /* start portfolio */
    #LinkSection {
        padding-bottom: 80px;
    }

    #LinkSection .LinkContent {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    /*#LinkSection .col-md-3 {
        padding: 0px;
    }*/


    #LinkSection .col-md-4 {
        /*padding: 0px;*/
        padding-bottom:20px;
    }

    #LinkSection .link-wrapper {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.04), 0 2px 10px 0 rgba(0, 0, 0, 0.06);

    }

        #LinkSection .link-wrapper .link-desc {
            padding: 20px 50px;
            margin-top: 0;
            background-color: #0a62bb;
            color: whitesmoke;
            text-align:center;
            /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.04), 0 2px 10px 0 rgba(0, 0, 0, 0.06);*/
            /*color: #666;*/
            max-height:100%;
        }

.portfolio-thumb,
.portfolio-overlay {
    max-width: 450px;

}

#LinkSection .portfolio-thumb {
    overflow: hidden;
    padding: 0;
    margin: 0 auto;
    height:200px;
}

    #LinkSection .portfolio-thumb .portfolio-overlay {
        background: #28a7e9;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 93%;
        height: 94%;
        opacity: 0;
        position: absolute;
        padding: 20px 10px 20px 20px;
        margin-left: auto;
        margin-right: auto;
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        color: white;
    }

        #LinkSection .portfolio-thumb .portfolio-overlay h4 {
            font-weight: bold;
            padding-bottom: 10px;
        }

        #LinkSection .portfolio-thumb .portfolio-overlay .btn {
            background: none;
            border: 1px solid #fff;
            border-radius: 2px;
            color: #fff;
            font-weight: bold;
        }

    #LinkSection .portfolio-thumb:hover .portfolio-overlay {
        cursor: pointer;
        opacity: 0.8;
    }

#LinkSection h2 {
    font-weight: bold;
    padding-bottom: 40px;
}

.img_respond {
    display: block;
    /*max-width: 100%;
    height: 200px;*/
    width: 100%;
    height: 100%;
}


/* end portfolio */

#Contact2Section {
    background-color: #0a62bb;
}


#ContactSection {
    background-color: #1C3A6F;
}

#ContactSection h2 {
   color:white;
}

    #ContactSection h6 {
        font-size: 0.9rem;
    }

    #ContactSection .contact_info 
    {
        color: white;
        padding-top: 60px;
        text-align:center;
    }

    #ContactSection .ContactContent {
        padding-top: 60px;
        padding-bottom: 40px;
    }

#ContactUsSection {
    background-color: #0a62bb;
    color: white;
    padding-top: 100px;
    padding-bottom: 40px;
}

    #ContactUsSection h2 {
        text-align: center;
        padding-top: 35px;
    }

#ContactUs2Section {
    padding-top: 100px;
    padding-bottom: 40px;
}

    #ContactUs2Section .contact_info {
        /*color: white;*/
        padding-top: 60px;
        text-align: center;
    }

    #ContactUs2Section .ContactContent {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    #MessageSection {
        background-color: #0a62bb;
        color: white;
        padding-top: 100px;
        padding-bottom: 40px;
    }



    #MessageSection h2 {
        text-align: center;
        padding-top: 35px;
    }

/*.img_respond {
    display: block;
    max-width: 100%;
    height: 200px;
}*/

#Message2Section .team-wrapper {
    padding-top: 100px;
    background: white;
    padding-bottom: 30px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    position: relative;
}

    #Message2Section .team-wrapper:hover {
        cursor: pointer;
        /*opacity: 0.9;*/
        bottom: 1px;
    }

    #Message2Section .team-wrapper .team-des {
        padding: 20px;
        /*padding-right: 135px*/
    }

#Message2Section .imgleft {
    padding: 20px;
    padding-left: 315px;
}

    #Message2Section .imgleft span {
        color: #0a62bb;
        display: block;
        font-weight: bold;
        padding-bottom: 12px;
    }

#Message2Section .imgright {
    padding: 20px;
    padding-left: 170px;
}

    #Message2Section .imgright span {
        color: #0a62bb;
        display: block;
        font-weight: bold;
        padding-bottom: 12px;
    }

        #Message2Section .team-wrapper .team-des span {
            color: #0a62bb;
            display: block;
            font-weight: bold;
            padding-bottom: 12px;
        }

#Message2Section img {
    /*width: 550px;
    height: 350px;*/
    width: 430px;
    height: 280px;
    /*width: 50%;
    height: 30%;*/
    object-fit: cover;
}

#Message2Section p {
    font-family: "Montserrat", sans-serif;
    line-height: 22px;
    font-size: 16px;
    font-weight: 500;
}

#CareerSection {
    background-color: #0a62bb;
    color: white;
    padding-top: 100px;
    padding-bottom: 40px;
}

    #CareerSection h2 {
        text-align: center;
        padding-top: 35px;
    }

#Career2Section {
    padding-top: 40px;
    padding-bottom: 40px;
}

    #Career2Section h2 {
        text-align: center;
        padding-top: 50px;
        padding-bottom:50px;
    }

    #Career2Section .careers-wrapper {
        /*background: #404040;*/
        /*background: #0a62bb;*/
        background: linear-gradient(#0abbbb, #0a62bb,#0a0abb);
        padding-bottom: 10px;
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        position: relative;
        /*padding-top: 40px;*/
    }

        #Career2Section .careers-wrapper:hover {
            cursor: pointer;
            opacity: 0.4;
            bottom: 4px;
        }

        #Career2Section .careers-wrapper .careers-des {
            padding: 20px;
          
        }

            #Career2Section .careers-wrapper .careers-des span {
                /*color: #28a7e9;*/
                display: block;
                font-weight: bold;
                padding-bottom: 12px;
            }

    #Career2Section .WhiteTitle {
        color: white;
    }

    #Career2Section p {
        color: white;
    }

#Career3Section {
    padding-top: 40px;
    padding-bottom: 40px;
}

#Career3Section h2 {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

    #Career3Section img {
        max-width: 60%;
        height: auto;
    }

    #Career3Section .border-left-primary {
        border-left: 0.25rem solid #4e73df !important;
    }

    #Career3Section .post_desc {
        font-size: small;
    }

    #Career3Section .cont_padd{
        padding-bottom:30px;
    }

#KPTCulSection {
    background-color: #0a62bb;
    color: white;
    padding-top: 100px;
    padding-bottom: 40px;
}

    #KPTCulSection h2 {
        text-align: center;
        padding-top: 50px;
    }

#PrivacySection {
    background-color: #0a62bb;
    color: white;
    padding-top: 100px;
    padding-bottom: 40px;
}

    #PrivacySection h2 {
        text-align: center;
        padding-top: 50px;
    }

#Privacy2Section {

    padding-top: 100px;
    padding-bottom: 40px;
}

    #CoreValueSection {
        background-color: #0a62bb;
        color: white;
        padding-top: 100px;
        padding-bottom: 40px;
    }

    #CoreValueSection h2 {
        text-align: center;
        padding-top: 35px;
    }

#CoreValue1Section {
    padding-top: 100px;
    padding-bottom: 40px;
}

    #CoreValue1Section h2 {
        background-image: linear-gradient(to right, #0a62bb, #4A729B);
        color: #fff;
        text-align: center;
        max-width: 100%;
    }

#CoreValue2Section {
    padding-top: 40px;
    padding-bottom: 40px;
}

    #CoreValue2Section h2 {
        text-align: center;
        padding-top: 50px;
        padding-bottom: 50px;
        font-weight:bolder;
    }

    #CoreValue2Section .block {
        /*color: #fff;*/
        padding: 85px 65px;
        float: left;
        height: 100%;
    }

#CoreValue2Section .block p {
    font-weight: 300;
}

    #CoreValue2Section .bgColor_1 {
        /*background-color: #5DA0FB;*/
        background-color: #9FD5F1;
        /*background: -webkit-linear-gradient(#F5EF34,#F6F042,#F9F57A);*/
    }

    #CoreValue2Section .bgColor_2 {
        /*background-color: #01B8FE;*/
        background-color: #70B6EA;
        /*background: -webkit-linear-gradient(#56DFE4,#90EAED,#C7F4F6);*/
    }

    #CoreValue2Section .bgColor_3 {
        /*background-color: #5DA0FB;*/
        background-color: #9FD5F1;
        /*background: -webkit-linear-gradient(#AED5FB,#C8E2FC,#E3F1FE);*/
    }

#CoreValue2Section .divDelay1
{
    animation-delay:-1s;
}

    #CoreValue2Section .divDelay2 {
        animation-delay: -2s;
    }

#CoreValue3Section {
    padding-top: 40px;
    padding-bottom: 40px;
}

    #CoreValue3Section h2 {
        background-image: linear-gradient(to right, #0a62bb, #4A729B);
        color:#fff;
        text-align:center;
        max-width:100%;
    }

#CoreValue4Section {
    padding-top: 40px;
    padding-bottom: 40px;
}

    #CoreValue4Section h2 {
        background-image: linear-gradient(to right, #0a62bb, #4A729B);
        color: #fff;
        text-align: center;
        max-width: 100%;
    }

    #CoreValue4Section .block {
        /*color: #fff;*/
        padding: 85px 65px;
        float: left;
        height: 100%;
    }

        #CoreValue4Section .block p {
            font-weight: 300;
        }
    #CoreValue4Section h5 {
        font-weight: bold;
        padding-bottom:20px;
    }

    #CoreValue4Section .bgColor_1 {
        /*background-color: #FAF7FB;*/
        background: #EDEEF3;
    }

    #CoreValue4Section .bgColor_2 {
        background-color: #C0B6FF;
    }

    #CoreValue4Section .bgColor_3 {
        background-color: #F2E7F8;
    }


    #CoreValue4Section .bgColor_4 {
        background-color: #D7C6D8;
    }

    #CoreValue4Section .bgColor_5 {
        background-color: #D2D0F5;
    }

    #CoreValue4Section .bgColor_6 {
        background-color: #A5A4B5;
    }

#CoreValue5Section {
    padding-top: 100px;
    padding-bottom: 40px;
}

    #CoreValue5Section h2 {
        background-image: linear-gradient(to right, #0a62bb, #4A729B);
        color: #fff;
        text-align: center;
        max-width: 100%;
    }

#CoreValue6Section {
    padding-top: 100px;
    padding-bottom: 40px;
}

    #CoreValue6Section h2 {
        background-image: linear-gradient(to right, #0a62bb, #4A729B);
        color: #fff;
        text-align: center;
        max-width: 100%;
    }

#CoreValue7Section .block {
    /*color: #fff;*/
    padding: 85px 65px;
    float: left;
    height: 100%;
}

    #CoreValue7Section .block p {
        font-weight: 300;
    }

#CoreValue8Section .block {
    /*color: #fff;*/
    padding: 85px 65px;
    float: left;
    height: 100%;
}

    #CoreValue8Section .block p {
        font-weight: 300;
    }

#BPSection {
    background-color: #0a62bb;
    color: white;
    padding-top: 100px;
    padding-bottom: 40px;
}

    #BPSection h2 {
        text-align: center;
        padding-top: 50px;
    }

#BP2Section {
    padding-top: 40px;
    padding-bottom: 40px;
}

#BP2Section .box {
    padding: 30px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin: 0 10px 40px 10px;
    background: #fff;
    box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
    transition: all 0.3s ease-in-out;
}

#BP2Section .icon {
    position: absolute;
    left: -10px;
    top: calc(50% - 32px);
}

#BP2Section .title {
    margin-left: 40px;
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 18px;
}

#Sustain2Section {
  
    /*background-image: url('../images/green.jpg');*/
    background-image: url('../images/green2.jpg');
    background-position: center center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 40px;
    height: 500px;
}

    #Sustain2Section h2 {
        /*text-align: center;
        padding-top: 35px;*/
        color: white;
        font-size: 90px;
        text-shadow: 2px 2px 4px #000000;
    }

#SustainSection {
    padding-top: 100px;
    padding-bottom: 100px;
}

#Sustain3Section {
    padding-top: 100px;
    padding-bottom: 100px;
}

    #Sustain3Section .plant_img {
        /*background-image: url('../images/green3.jpg');*/
        background-image: url('../images/planting.jpg');
        background-size: cover;
        background-position: center;
        height: 400px;
    }

    #Sustain3Section .plant_img2 {
        /*background-image: url('../images/green3.jpg');*/
        background-image: url('../images/small_plant.jpg');
        background-size: cover;
        background-position: center;
        height: 400px;
        opacity: 0.5; /* set the opacity */
    }


#Sustain4Section {
    /*background-image: url('../images/rubbish.jpg');*/
    background-image: url('../images/sign.jpg');
    background-position: center center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 40px;
    height: 500px;
}

    #Sustain4Section h2 {
        /*text-align: center;
        padding-top: 35px;*/
        color: white;
        font-size: 90px;
        text-shadow: 2px 2px 4px #000000;
        /*background-color:grey;*/
        /*opacity:0.3;*/
    }

#Sustain5Section {
    padding-top: 100px;
    padding-bottom: 100px;
}


    #Sustain5Section .img_waste1 {
        background-image: url('../images/IMG_6663.JPG');
        background-position: center center;
        background-size: cover;
        height: 250px;
    }
    #Sustain5Section .img_waste2 {
        background-image: url('../images/waste_bottle.jpg');
        background-position: bottom;
        background-size: cover;
        height: 250px;
    }
    #Sustain5Section .img_waste3 {
        background-image: url('../images/waste_mask.jpg');
        background-position: center center;
        background-size: cover;
        height: 250px;
    }
    #Sustain5Section .img_waste4 {
        background-image: url('../images/clean.jpg');
        background-position: center center;
        background-size: cover;
        height: 250px;
    }
    #Sustain5Section .img_waste5 {
        background-image: url('../images/IMG_6666.JPG');
        background-position: center center;
        background-size: cover;
        height: 250px;
    }

    #Sustain6Section {
        /*background-image: url('../images/green.jpg');*/
        background-image: url('../images/charity.jpg');
        background-position: center center;
        background-size: cover;
        padding-top: 100px;
        padding-bottom: 40px;
        height: 500px;
    }

#Sustain6Section h2 {
    /*text-align: center;
        padding-top: 35px;*/
    color: white;
    font-size: 90px;
    text-shadow: 2px 2px 4px #000000;
    /*background-color:grey;*/
    /*opacity:0.3;*/
}

#Sustain7Section {
    padding-top: 100px;
    padding-bottom: 100px;
}

    #Sustain7Section .img_waste1 {
        background-image: url('../images/change.jpg');
        background-position: center center;
        background-size: cover;
        height: 250px;
    }

#Sustain8Section {
    /*background-image: url('../images/green.jpg');*/
    background-image: url('../images/desk.jpg');
    background-position: center center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 40px;
    height: 400px;
}

#Sustain8Section h2 {
    /*text-align: center;
        padding-top: 35px;*/
    color: white;
    font-size: 90px;
    text-shadow: 3px 3px 5px #000000;
    /*background-color:grey;*/
    /*opacity:0.3;*/
}

#Sustain9Section {
    padding-top: 100px;
    padding-bottom: 100px;
}

    #PolicySection {
        /*background-color: #0a62bb;
    color: white;
     padding-top: 100px;
    padding-bottom: 40px;

    */
        background-image: url('../images/earth.jpg');
        /*background-image: url('../images/green.jpg');*/
        /*background-image: url('../images/green2.jpg');*/
        background-position: center center;
        background-size: cover;
        padding-top: 100px;
        padding-bottom: 40px;
        height: 500px;
    }

    #PolicySection h2 {
        /*text-align: center;
        padding-top: 35px;*/
        color: white;
        font-size: 90px;
        text-shadow: 2px 2px 4px #000000;
    
    }

/*#Policy2Section {
    padding-top: 40px;
    padding-bottom: 40px;
}*/

    #Policy2Section .team-wrapper {
        padding-top: 40px;
        background: white;
        padding-bottom: 30px;
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        /*position: relative;*/
    }

#Policy2Section .team-wrapper:hover {
            cursor: pointer;
            /*opacity: 0.4;*/
            bottom: 4px;
            
}

#Policy2Section .team-wrapper .team-des {
            padding: 20px;
}

    #Policy2Section .team-wrapper .team-des span {
        color: #0a62bb;
        display: block;
        font-weight: bold;
        padding-bottom: 12px;
      
    }

#Policy2Section h6 {
    text-align: center;
    padding-top: 50px;
    color: #0a62bb;
    font-weight: bold;
}

#Policy2Section .respond_img {
    /*display: block;
    max-width: 100%;
    height: 100%;*/
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;


}

#Policy3Section {
    padding-top: 100px;
    padding-bottom: 40px;
}

#Policy3Section .team-wrapper {
    padding-top: 40px;
    background: white;
    padding-bottom: 30px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    /*position: relative;*/
}

    #Policy3Section .team-wrapper:hover {
        cursor: pointer;
        /*opacity: 0.4;*/
        bottom: 4px;
    }

    #Policy3Section .team-wrapper .team-des {
        padding: 20px;
    }

        #Policy3Section .team-wrapper .team-des span {
            color: #0a62bb;
            display: block;
            font-weight: bold;
            padding-bottom: 12px;
        }

#Policy3Section h6 {
    text-align: center;
    padding-top: 50px;
    color: #0a62bb;
    font-weight: bold;
}

    #Policy3Section .respond_img {
        /*display: block;
    max-width: 100%;
    height: 100%;*/
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

#NewsSection {
    background-color: #0a62bb;
    color: white;
    padding-top: 100px;
    padding-bottom: 40px;
}


    #NewsSection h2 {
        text-align: center;
        padding-top: 35px;
    }



/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding-top:50px;
}

    /* The actual timeline (the vertical ruler) */
    .timeline::after {
        content: '';
        position: absolute;
        width: 6px;
        background-color: lightslategrey;
        /*background-color: blue;*/
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -3px;
       
    }

/* Container around content */
.timeline_container {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    /*background-color: lavender;*/
    width: 50%;
  
}

    /* The circles on the timeline */
    .timeline_container::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        right: -17px;
        background-color: white;
        border: 4px solid #FF9F55;
        top: 15px;
        border-radius: 50%;
        z-index: 1;
   
    }


/* Place the container to the left */
.timeline_left {
    left: 0;
}

/* Place the container to the right */
.timeline_right {
    left: 50%;
}

/* Add arrows to the left container (pointing right) */
.timeline_left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid grey;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent grey;
}

/* Add arrows to the right container (pointing left) */
.timeline_right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid grey;
    border-width: 10px 10px 10px 0;
    border-color: transparent grey transparent transparent;
}

/* Fix the circle for containers on the right side */
.timeline_right::after {
    left: -16px;
}

/* The actual content */
.timeline_content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
    border:solid;
    border-color:grey;
}

    .timeline_content img {
      max-width:60%;
      height: auto;
    }

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {





    /* Place the timelime to the left */
    .timeline::after {
        /*left: 31px;*/
        left: 25px;
    }

    /* Full-width containers */
    .timeline_container {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

        /* Make sure that all arrows are pointing leftwards */
        .timeline_container::before {
            left: 60px;
            border: medium solid white;
            border-width: 10px 10px 10px 0;
            border-color: transparent white transparent transparent;
        }

    /* Make sure all circles are at the same spot */
    .timeline_left::after, .timeline_right::after {
        left: 15px;
    }

    /* Make all right containers behave like the left ones */
    .timeline_right {
        left: 0%;
    }


  
}