@font-face {
    font-family: "Open Sans";
    src: url(../fonts/Light/OpenSans-Light.woff2?v=1.101) format("woff2"),
        url(../fonts/Light/OpenSans-Light.woff?v=1.101) format("woff");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: "Open Sans";
    src: url(../fonts/Regular/OpenSans-Regular.woff2?v=1.101) format("woff2"),
        url(../fonts/Regular/OpenSans-Regular.woff?v=1.101) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Open Sans";
    src: url(../fonts/Semibold/OpenSans-Semibold.woff2?v=1.101) format("woff2"),
        url(../fonts/Semibold/OpenSans-Semibold.woff?v=1.101) format("woff");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: "Open Sans";
    src: url(../fonts/SemiboldItalic/OpenSans-SemiboldItalic.woff2?v=1.101) format("woff2"),
        url(../fonts/SemiboldItalic/OpenSans-SemiboldItalic.woff?v=1.101) format("woff");
    font-weight: 600;
    font-style: italic
}

@font-face {
    font-family: "Open Sans";
    src: url(../fonts/Bold/OpenSans-Bold.woff2?v=1.101) format("woff2"),
        url(../fonts/Bold/OpenSans-Bold.woff?v=1.101) format("woff");
    font-weight: 700;
    font-style: normal
}



html,
body {
    margin: 0;
    font-size: 18px;
    background: #fff;
    font-family: 'Open Sans', sans-serif;
    color: #000;
}

html {
    scroll-behavior: smooth;
}

body a {
    text-decoration: none;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

body img {
    max-width: 100%;
}

a:hover {
    text-decoration: none;
}

input[type='button'],
input[type='submit'],
input[type='text'],
input[type='email'],
input[type='search'] {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    letter-spacing: 0.5px;
}

p {
    margin: 0;
    line-height: 2em;
    letter-spacing: 0;
}

ul {
    margin: 0;
    padding: 0;
}

.table {
    width: 60%;
    margin-bottom: 40px;
}

/*-- header --*/

header {
    position: absolute;
    width: 100%;
    padding: 15px 0;
    z-index: 9;
}

.right-p li,
.right-p li a {
    display: inline-block;
    color: #ddd;
    font-size: 15px;
    letter-spacing: 2px;
}

.right-p li span {
    color: #fff;
}

/*-- header --*/

.toggle,
[id^='drop'] {
    display: none;
}

/* Giving a background-color to the nav container. */
nav {
    margin: 0;
    padding: 0;
}

#logo img,
.footer-title img {
    width: 200px;
}

#logo a {
    float: left;
    font-size: 0.75em;
    font-weight: 600;
    display: initial;
    margin: 0;
    letter-spacing: 1px;
    color: #fff;
    padding: 0px 0;
    border: none;
}

#logo a span.fa {
    color: #ff4f81;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
    content: '';
    display: table;
    clear: both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
    float: right;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}

/* Positioning the navigation items inline */
nav ul li {
    margin: 0px;
    display: inline-block;
    float: left;
}

/* Styling the links */
nav a {
    color: #ddd;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
    padding-left: 0;
    padding-right: 0;
    padding: 10px 13px;
    font-weight: 600;
    font-size: 15px;
    vertical-align: middle;
}

nav ul li ul li:hover {
    background: #f8f9fa;
}

/* Background color change on Hover */
nav a:hover {
    color: #ddd;
}

.menu li.active a {
    color: #fff;
}

.menu li.active {
    background: #3e9cb6;
    padding-bottom: 5px;
    border-radius: 28px;
    letter-spacing: 0;
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
    display: none;
    position: absolute;
    /* has to be the same number as the "line-height" of "nav a" */
    top: 30px;
    background: #fff;
    padding: 10px;
}

/* Display Dropdowns on Hover */
nav ul li:hover>ul {
    display: inherit;
}

/* Fisrt Tier Dropdown */
nav ul ul li {
    width: 170px;
    float: none;
    display: list-item;
    position: relative;
}

nav ul ul li a {
    color: #333;
    padding: 5px 10px;
    display: block;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
    position: relative;
    top: -60px;
    /* has to be the same number as the "width" of "nav ul ul li" */
    left: 170px;
}

/* Change ' +' in order to change the Dropdown symbol */
li>a:only-child:after {
    content: '';
}

.banner-container {
    position: relative;
    text-align: center;
    color: white;
}

.banner-container h4 {
    font-size: 40px;
    font-weight: 600;
    padding-top: 100px;
}

.banner-container p {
    font-size: 20px;
    color: #fff;
}

.top-left-lg {
    position: absolute;
    top: 170px;
    left: 60px;
}

.top-left-sm {
    position: absolute;
    top: 30px;
    left: 60px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.level-1 {
    background-color: #218cc420;
    padding: 20px;
}

.level-2 {
    background-color: #F0F7F7;
    padding: 20px;
}

.social-icn-circle {
    text-align: right;
}

.social-icn-circle a:hover {
    color: #fff;
    text-decoration: none;
}

.info-icn {
    max-width: 50%;
}

.mb-sec{
    margin-bottom: 55px;
}

/* Media Queries
--------------------------------------------- */

@media all and (max-width: 991px) {
    #logo {
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        float: none;
    }

    .menu li.active a {
        color: #3369e7;
    }

    nav ul li span {
        color: #333;
    }

    nav {
        margin: 0;
    }

    nav a {
        color: #333;
    }

    /* Hide the navigation menu by default */
    /* Also hide the  */
    .toggle+a,
    .menu {
        display: none;
    }

    /* Stylinf the toggle lable */
    .toggle {
        display: block;
        padding: 5px 15px;
        font-size: 20px;
        text-decoration: none;
        border: none;
        float: right;
        background-color: #3369e7;
        color: #fff;
        margin-bottom: 0;
    }

    .menu .toggle {
        float: none;
        text-align: center;
        margin: auto;
        width: 30%;
        padding: 5px;
        font-weight: normal;
        font-size: 15px;
        letter-spacing: 1px;
    }

    .toggle:hover {
        color: #333;
        background-color: #fff;
    }

    /* Display Dropdown when clicked on Parent Lable */
    [id^='drop']:checked+ul {
        display: block;
        background: #fff;
        padding: 15px 0;
        width: 100%;
        text-align: center;
    }

    /* Change menu item's width to 100% */
    nav ul li {
        display: block;
        width: 100%;
        padding: 7px 0;
    }

    nav a {
        padding: 5px 0;
    }

    nav a:hover {
        color: #333;
    }

    .login-icon {
        text-align: center;
    }

    nav ul ul .toggle,
    nav ul ul a {
        padding: 0 40px;
    }

    nav ul ul ul a {
        padding: 0 80px;
    }

    nav a:hover,
    nav ul ul ul a {
        background-color: transparent;
    }

    nav ul li ul li .toggle,
    nav ul ul a,
    nav ul ul ul a {
        padding: 14px 20px;
        color: #fff;
        font-size: 17px;
    }

    nav ul li ul li .toggle,
    nav ul ul a {
        background-color: #fff;
    }

    nav ul ul li a {
        font-size: 15px;
    }

    ul.inner-ul {
        padding: 0 !important;
    }

    /* Hide Dropdowns by Default */
    nav ul ul {
        float: none;
        position: static;
        color: #ffffff;
        /* has to be the same number as the "line-height" of "nav a" */
    }

    /* Hide menus on hover */
    nav ul ul li:hover>ul,
    nav ul li:hover>ul {
        display: none;
    }

    /* Fisrt Tier Dropdown */
    nav ul ul li {
        display: block;
        width: 100%;
        padding: 0;
    }

    nav ul ul ul li {
        position: static;
        /* has to be the same number as the "width" of "nav ul ul li" */
    }
}

@media all and (max-width: 330px) {
    nav ul li {
        display: block;
        width: 94%;
    }
}

.user span.fa {
    font-size: 25px;
    color: #fff;
}

/*-- //header --*/

/*-- banner --*/
.banner {
    background: url(../images/main-banner.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}

.banner-contest4u {
    background: url(../images/cogat-banner.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}

.banner-cogat {
    background: url(../images/cogat-banner.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}

.banner-scat {
    /* background: url(../images/scat-banner.jpg) no-repeat center; */
    background: url(../images/cogat-banner.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}

.banner-ivolunteer {
    background: url(../images/cogat-banner.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}

.banner-goals {
    background: url(../images/cogat-banner.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}

.banner-about {
    background: url(../images/about-banner.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}

.banner-contact {
    background: url(../images/contact-banner.png) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}

.facebook-icn {
    color: #3b5998;
    padding-right: 10px;
}

.twitter-icn {
    color: #55acee;
    padding-right: 10px;
}

.in-icn {
    color: #007ab9;
    padding-right: 10px;
}

.fa {
    padding: 10px;
    font-size: 30px;
    width: 36px;
    text-align: center;
    text-decoration: none;
    margin: 0px 4px;
    border-radius: 50%;
}

.fa-facebook {
    background: #3b5998;
    color: white;
}

.fa-linkedin {
    background: #007AB9;
    color: white;
}

.fa-twitter {
    background: #55ACEE;
    color: white;
}

.contact-img {
    max-height: 320px;
    margin-top: 100px;
    border-radius: 20px;
}

.layer {
    background: rgba(0, 0, 0, 0.5);
}

.w3ls_banner_txt p {
    color: #eee;
    font-size: 20px;
    line-height: 30px;
}

.banner-lg-text {
    padding: 220px 0 220px 0;
    box-sizing: border-box;
}

.banner-md-text {
    padding: 130px 0 50px 0;
    box-sizing: border-box;
}

.banner-form-w3 {
    padding: 12vw 0 0vw;
    box-sizing: border-box;
}

.banner-card {
    border-radius: 20px;
    text-align: center;
}

.layer {
    background: rgba(0, 0, 0, 0.5);
}

.layer-home {
    background: rgba(0, 0, 0, 0.6);
}

.w3ls_banner_txt p {
    color: #eee;
}

.banner-text-w3pvt {
    padding: 18vw 0px 20vw;
    box-sizing: border-box;
}

.banner-form-w3 {
    padding: 15vw 0 0vw;
    box-sizing: border-box;
}

h3.b-w3ltxt span {
    color: #fff;
}

h3.b-w3ltxt {
    font-size: 3.5em;
    color: #fff;
    font-weight: 500;
    text-shadow: 1px 1px 0px #333;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

h4.b-w3ltxt {
    font-size: 3em;
    letter-spacing: 3px;
    font-weight: 300;
    color: #fff;
}

.banner-box {
    background-color: #fff;
    border-radius: 40px;
    margin: 0 auto;
    width: 350px;
    height: 350px;
}

.banner-clip {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 39%, 0 57%);
    clip-path: polygon(0 0, 100% 0, 100% 39%, 0 57%);
    background-color: #218cc420;

    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    width: 350px;
    height: 350px;
}

.banner-box-content {
    padding: 20px 50px;
    text-align: center;
    position: relative;
    top: -350px;
}

.banner-box-content .text-bold {
    font-weight: 600;
    color: #0265D6;
    font-size: 20px;
}

.banner-box-content .text-reg {
    color: #30444D;
    font-size: 18px;
}

.square-content {
    margin: 0px auto 40px auto;
    border-radius: 20px;
    padding: 20px;
}

.download-sec {
    display: flex;
    align-items: center;
}

.download-sec h3 {
    font-size: 30px;
    color: #333;
    font-weight: 600;
}

.content-padding {
    padding-bottom: 20px;
}

.mw-50 {
    max-width: 50%;
}

.mw-30 {
    max-width: 30%;
}

.mw-70 {
    max-width: 70%;
}


.info-box-1 {
    border: #0062f5 solid 2px;
    border-radius: 10px;
    margin-left: 50px;
    height: 130px;
    width: 130px;
    padding: 15px;
    color: #0062f5;
}

.info-box-2 {
    border: #06a465 solid 2px;
    border-radius: 10px;
    margin-left: 50px;
    height: 130px;
    width: 130px;
    padding: 15px;
    color: #06a465;
}

.info-box-3 {
    border: #fe8700 solid 2px;
    border-radius: 10px;
    margin-left: 50px;
    height: 130px;
    width: 130px;
    padding: 15px;
    color: #fe8700;
}

.info-box-4 {
    border: #a71898 solid 2px;
    border-radius: 10px;
    margin-left: 50px;
    height: 130px;
    width: 130px;
    padding: 15px;
    color: #a71898;
}

.info-box-5 {
    border: #de0a52 solid 2px;
    border-radius: 10px;
    margin-left: 50px;
    height: 130px;
    width: 130px;
    padding: 15px;
    color: #de0a52;
}

.card {
    width: 75%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    min-height: 330px;
}

.card-left {
    margin: 0 25px 65px 120px;
}

.card-right {
    margin: 0 120px 65px 25px;
}

.card h4 {
    padding-bottom: 15px;
    font-weight: bold;
    font-size: 25px;
}

.about-card-top .card{
    min-height: 300px;
}

.about-card-bottom .card{
    min-height: 330px;
}

.contact-heading {
    font-size: 30px;
    color: #00b1ff;
    font-weight: 600;
    margin-bottom: 40px;
}

.btn-submit {
    color: #fff;
    background-color: #00b1ff;
}

h3.b-w3ltxt span {
    color: #fff;
}

h3.b-w3ltxt {
    font-size: 3.5em;
    color: #fff;
    font-weight: 500;
    text-shadow: 1px 1px 0px #333;
}

h4.b-w3ltxt {
    font-size: 40px;
    letter-spacing: 3px;
    font-weight: 600;
    color: #fff;
}

.btn-banner {
    background: #3369e7;
    color: #fff;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 12px 30px;
    display: inline-block;
}

.btn-banner:hover {
    color: #fff;
}

.form-style-w3ls input[type='text'],
.form-style-w3ls input[type='email'],
.form-style-w3ls input[type='password'],
select {
    outline: none;
    font-size: 14px;
    border: none;
    color: #666;
    background: #f1f1f1;
    letter-spacing: 0.5px;
    padding: 14px 20px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.form-style-w3ls button.btn {
    color: #fff;
    background: #3369e7;
    border: none;
    padding: 14px 0;
    outline: none;
    border-radius: 0;
    width: 100%;
    font-size: 15px;
    cursor: pointer;
    letter-spacing: 1px;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

.form-style-w3ls input[type='submit']:hover {
    background: #dc3545;
}

.padding {
    padding: 2.5em;
    background: #fff;
}

.form-style-w3ls span {
    font-size: 13px;
    color: #666;
}

.form-style-w3ls span a {
    color: #3369e7;
}

/*-- //banner --*/

/*-- banner bottom --*/
/* girds */
.three-grids-w3pvt-1 {
    background: url(../images/bb.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 300px;
    position: relative;
    z-index: 1;
}

.three-grids-w3pvt-1:before,
.three-grids-w3pvt-2:before,
.three-grids-w3pvt-3:before,
.three-grids-w3pvt-4:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
    background: #111;
    z-index: -1;
}

.three-grids-w3pvt-2 {
    background: url(../images/bg1.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 300px;
    position: relative;
    z-index: 1;
}

.three-grids-w3pvt-3 {
    background: url(../images/bg2.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 300px;
    position: relative;
    z-index: 1;
}

.three-grids-w3pvt-4 {
    background: url(../images/bg3.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 300px;
    position: relative;
    z-index: 1;
}

.text-effect-wthree {
    margin-top: 13em;
}

.text-effect-wthree h5 {
    font-size: 22px;
    color: #fff;
}

.text-effect-wthree p {
    font-size: 15px;
    color: #ccc;
}

.ser-img span.fa {
    font-size: 40px;
    color: #000;
}

/* //girds */

h2.heading {
    font-size: 30px;
    color: #333;
    font-weight: 600;
}

/*-- banner bottom --*/

/*-- services --*/
.mb-60 {
    margin-bottom: 60px;
}

.services-inner {
    border: 2px solid #3369e7;
    margin-left: 35px;
    transition: 0.3s;
    background: #fff;
}

.our-services-img {
    float: left;
    margin-left: -36px;
    margin-right: 22px;
    margin-top: 28px;
}

.our-services-img img {
    width: 68px;
}

.our-services-text {
    padding-right: 10px;
}

.our-services-text {
    overflow: hidden;
    padding: 28px 0 25px;
}

.our-services-text h4 {
    color: #222222;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    position: relative;
    text-transform: uppercase;
}

.position-image img {
    position: absolute;
    top: 16%;
    left: 0%;
    bottom: 0%;
    width: 20%;
    z-index: -1;
}

.our-services-text h4::before {
    background: #3369e7 none repeat scroll 0 0;
    bottom: 0;
    content: '';
    height: 1px;
    position: absolute;
    width: 40px;
}

.our-services-wrapper:hover .services-inner {
    background: #fff none repeat scroll 0 0;
    border: 2px solid transparent;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
}

.our-services-text p {
    margin-bottom: 0;
}

.services p {
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    color: #666;
}

.services {
    position: relative;
    z-index: 2;
}

/*-- //services-- */

/*-- team --*/

.team-info {
    padding: 20px 20px 0;
}

.team-info h3 {
    font-size: 1.3em;
    letter-spacing: 1px;
    color: #222;
}

.team-info span {
    margin-top: 0.5em;
    font-size: 0.8em;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 1px;
}

/*-- //team --*/

/*-- stats --*/

h3.heading {
    font-size: 30px;
    color: #333;
    font-weight: 600;
    margin-bottom: 40px;
}

.section {
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
}

.section-2 {
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
}

.section-3 {
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    position: relative;
    padding-bottom: 50px;
}


.footer-section {
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid #dee2e6 !important;
}

.font-20 {
    font-size: 20px;
}

.bg-blue {
    background: #798e9820;
}

.secondary-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
}

.title-content {
    font-weight: 600;
    line-height: 28px;
    padding-top: 5px;
    display: block;
    padding-left: 39px;
}

.title-1 {
    color: #19bba5;
}

.title-2 {
    color: #9d8e09;
}

.title-3 {
    color: #8d59c1;
}

.title-4 {
    color: #ee8712;
}

.title-5 {
    color: #BB1945;
}

.title-6 {
    color: #1975bb;
}

.title-7 {
    color: #30444D;
}

.title-8 {
    color: #bb1945;
}

.title-9 {
    color: #4507f3;
}

.title-10 {
    color: #00a9c4;
}

.title-11 {
    color: #00b2a6;
}

.title-12 {
    color: #0A9F5A;
}

.badge-circle {
    color: #fff;
    height: 30px;
    width: 30px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    margin-right: 10px;
}

.bg-circle {
    color: #fff;
    height: 65px;
    width: 65px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    margin-bottom: 55px;
}

.badge-1 {
    background-color: #19bba5;
}

.badge-2 {
    background-color: #9d8e09;
}

.badge-3 {
    background-color: #8d59c1;
}

.badge-4 {
    background-color: #ee8712;
}

.badge-5 {
    background-color: #BB1945;
}

.badge-6 {
    background-color: #1975bb;
}

.badge-7 {
    background-color: #30444D;
}

.badge-8 {
    background-color: #BB1945;
}

.badge-9 {
    background-color: #4507f3;
}

.badge-10 {
    background-color: #00a9c4;
}

.badge-11 {
    background-color: #00b2a6;
}

.badge-12 {
    background-color: #0A9F5A;
}

.pt-12 {
    padding-top: 12px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-17 {
    padding-top: 17px;
}

.diff-sub-content {
    display: block;
    padding-top: 5px;
}

.img-info-right {
    text-align: left;
    border-radius: 20px;
    padding: 25px;
    background-color: #fff;
    position: relative;
    right: 40px;
}

.img-info-left {
    text-align: left;
    border-radius: 20px;
    padding: 25px;
    background-color: #fff;
    position: relative;
    z-index: 1;
    left: 180px;
}

.img-box {
    border-radius: 35px;
    padding: 35px;
    background-color: #fff;
    float: right;
}

.img-box img {
    max-width: 220px !important;
}


.border-1 {
    border: #19bba550 solid 2px;
}

.border-2 {
    border: #9d8e0950 solid 2px;
}

.border-3 {
    border: #8d59c150 solid 2px;
}

.border-4 {
    border: #ee871250 solid 2px;
}

.border-5 {
    border: #bb194550 solid 2px;
}

.border-6 {
    border: #1975bb50 solid 2px;
}

.border-7 {
    border: #30444d50 solid 2px;
}

p.counter {
    color: #fff;
    font-size: 2.5em;
    letter-spacing: 1px;
}

.text-stat p {
    font-size: 15px;
    letter-spacing: 0.5px;
}

p.para-text-w3ls {
    font-size: 15px;
    color: #ccc;
}

.w3layouts_stats_left i {
    font-size: 30px;
    color: #fff;
    background: #333;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    line-height: 70px;
}

.text-stat h4 {
    font-size: 22px;
    color: #ddd;
    line-height: 35px;
    padding: 1em;
    border: 8px solid #aaa;
}

.w3layouts_stats_left {
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
    border: 1px solid #fff;
    padding: 2em 0 !important;
}

.stats-icon {
    background: #333;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    line-height: 70px;
    margin: auto;
}

.w3layouts_stats_left span.fa {
    color: #fff;
    font-size: 25px;
    line-height: 70px;
}

.w3layouts_stats_left:hover {
    border: 1px solid transparent !important;
}

/*-- //stats --*/

/*-- other services --*/

.info p {
    color: #888;
    font-size: 15px;
}

.info h4 {
    color: #222222;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    position: relative;
    text-transform: uppercase;
}

.info img {
    width: 50px;
}

.info {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

/*-- //other services --*/

/* -- testimonials --*/
.testimonials {
    background: url(../images/testimonials.jpg) no-repeat 0px 0px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}

.testi-info-text h4 {
    color: #fff;
    font-size: 23px;
    margin: 0em 0 0em;
    letter-spacing: 2px;
}

.testi-info-text p {
    letter-spacing: 1px;
    width: 100%;
    margin: 0em auto 0;
    color: #ccc;
    line-height: 30px;
    padding: 1em 1em;
    font-size: 15px;
}

.testi-pos h4 {
    text-transform: uppercase;
    font-size: 1em;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
}

/* -- //testimonials --*/

/*-- subscribe --*/
subscribe form {
    border: 1px solid #808080;
    width: 80%;
    margin-top: 10px;
}

footer {
    background: url(../images/footer.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}

.footer-layer {
    background: rgba(0, 0, 0, 0.8);
}

.footer-grid_section {
    width: 70%;
    margin: auto;
}

.footer-title a {
    font-size: 33px;
    font-weight: 600;
    color: #eee;
}

.footer-text p {
    color: #aaa;
}

ul.social_section_1info {
    margin-top: 20px;
}

ul.social_section_1info li {
    display: inline-block;
}

ul.social_section_1info a {
    margin-right: 4px;
    width: 40px;
    height: 40px;
    display: block;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

ul.social_section_1info a span.fa {
    font-size: 13.5px;
    color: #ccc;
    line-height: 40px;
}

ul.links li {
    display: inline-block;
    padding: 0 10px;
}

ul.links a,
.copy-right p a {
    color: #1975BB;
    letter-spacing: 1px;
    font-size: 12px;
}

.copy-right p {
    color: #30444D;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: 600;
}

.copyright {
    background: #111;
}

.copy-right {
    text-align: right;
}

.copy-right p a:hover {
    color: #fff;
}

.image {
    width: 20%;
}

.subscribe form input[type='email'] {
    outline: none;
    padding: 15px 25px;
    color: #333;
    font-size: 14px;
    width: 90%;
    border: none;
    background: #fff;
    letter-spacing: 1px;
}

.subscribe button.btn1 {
    color: #fff;
    border: none;
    padding: 13px 0;
    outline: none;
    text-align: center;
    text-decoration: none;
    background: #333;
    cursor: pointer;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
    float: right;
    width: 10%;
}

.subscribe form {
    width: 80%;
    margin-top: 10px;
}

.subscribe h3 {
    font-size: 40px;
    color: #fff;
    letter-spacing: 1px;
}

.subscribe-left {
    background: #3369e7;
}

.subscribe-right {
    background: #dc3545;
}

.subscribe-right p {
    color: #eee;
}

.news-icon {
    width: 20%;
    text-align: center;
}

.news-icon span.fa {
    color: #fff;
    font-size: 55px;
    margin-top: 20px;
}

/*-- //subscribe --*/

/*-- move top --*/

.move-top {
    position: relative;
}

a.move-top {
    text-align: center;
    position: absolute;
    right: 1%;
    bottom: 90px;
}

a.move-top span {
    color: #fff;
    width: 40px;
    height: 60px;
    border: transparent;
    line-height: 32px;
    font-size: 26px;
    background: #333;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
}

/*-- //move top --*/

/*-- responsive design --*/

@media (max-width: 1440px) {
    .position-image img {
        top: 23%;
    }
}

@media (max-width: 1080px) {
    .navbar-light .navbar-nav .nav-link {
        padding: 0 0px 5px;
    }

    h3.b-w3ltxt {
        font-size: 3em;
    }

    h4.b-w3ltxt {
        font-size: 2.8em;
    }

    .banner-form-w3 h5 {
        font-size: 17px;
    }

    .our-services-img {
        margin-right: 8px;
    }

    .our-services-text h4 {
        font-size: 17px;
        letter-spacing: 0.5px;
    }

    .our-services-img img {
        width: 62px;
    }

    .info h4 {
        font-size: 18px;
    }

    .info img {
        width: 42px;
    }

    .footer-grid_section {
        width: 75%;
    }

    ul.links a,
    .copy-right p,
    .copy-right p a {
        letter-spacing: 0.5px;
    }

    .banner-text-w3pvt {
        padding: 19vw 0 15vw;
    }

    .banner-form-w3 {
        padding: 15vw 0 0vw;
    }

    .padding {
        padding: 2em;
    }

    nav a {
        padding: 10px 10px;
        font-size: 14px;
    }

    #logo a {
        font-size: 0.6em;
    }

    #logo img,
    .footer-title img {
        width: 120px;
    }

    .footer-title a {
        font-size: 28px;
    }

    .subscribe h3 {
        font-size: 34px;
    }
}

@media (max-width: 1024px) {
    p.counter {
        font-size: 2em;
    }

    .testi-info-text h4 {
        font-size: 20px;
        letter-spacing: 1px;
    }
}

@media (max-width: 991px) {
    .banner-text-w3pvt {
        padding: 19vw 0 8vw;
    }

    .banner-form-w3 {
        padding: 0vw 0 10vw;
    }

    .testi-info-text p {
        padding: 1em 0em;
        font-size: 14.5px;
    }

    .footer-grid_section {
        width: 100%;
    }

    .links {
        text-align: center;
    }

    .copy-right {
        text-align: center;
        margin: 10px 0;
    }

    .subscribe form {
        width: 90%;
    }

    .bottom-grids .col-md-3 {
        padding: 0 5px;
    }

    .text-effect-wthree h5 {
        font-size: 19px;
    }

    .team-grid {
        padding: 5px;
    }

    .team-info h3 {
        font-size: 1.2em;
    }

    .image {
        width: 5%;
    }
}

@media (max-width: 900px) {
    .subscribe h3 {
        font-size: 30px;
    }

    h2.heading {
        font-size: 27px;
    }

    h3.heading {
        font-size: 35px;
    }



}

@media (max-width: 768px) {
    .subscribe h3 {
        font-size: 30px;
    }

    .footer-title a {
        font-size: 27px;
    }

    .testi-info-text h4 {
        font-size: 20px;
        letter-spacing: 1px;
    }

    h3.heading {
        font-size: 35px;
    }

    .w3layouts_stats_left i {
        font-size: 20px;
    }

    .banner-text-w3pvt {
        padding: 19vw 8vw 8vw;
    }

    .banner-form-w3 {
        padding: 0vw 0vw 10vw 8vw;
    }

    .banner {
        background: url(../images/main-banner.jpg) no-repeat -130px 0px;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        -ms-background-size: cover;
        background-size: cover;
    }
}

@media (max-width: 736px) {
    h3.b-w3ltxt {
        font-size: 2.8em;
    }

    h4.b-w3ltxt {
        font-size: 2.5em;
    }

    .image {
        width: 7%;
    }

    .img1 h3 {
        font-size: 22px;
    }

    ul.callbacks_tabs {
        position: absolute;
        bottom: -25px;
    }

    .banner-text-w3pvt {
        padding: 22vw 0vw 8vw;
    }

    .banner-form-w3 {
        padding: 0vw 0vw 10vw;
    }

    .carousel-item p {
        font-size: 14px;
    }

    .ser-img img {
        width: 70px;
    }

    .team-grid {
        padding: 0 15px;
    }

    h2.heading {
        font-size: 23px;
    }
}

@media (max-width: 667px) {
    h3.b-w3ltxt {
        font-size: 2.5em;
    }

    h4.b-w3ltxt {
        font-size: 2.2em;
    }
}

@media (max-width: 568px) {
    .banner-text-w3pvt {
        padding: 22vw 8vw 8vw;
    }

    .banner-form-w3 {
        padding: 0vw 8vw 10vw 8vw;
    }

    .position-image img {
        position: static;
        width: auto;
    }

    .banner-bottom p {
        font-size: 15px;
    }

    .subscribe h3 {
        font-size: 25px;
    }

    ul.banner_slide_bg .container-fluid {
        padding: 0;
    }

    .csslider>.navigation {
        left: -1% !important;
    }

    .team-grid {
        padding: 0 15px;
        width: 50%;
    }

    .csslider>.navigation label,
    .csslider>.navigation label:after {
        height: 4px !important;
    }

    .w3ls_banner_txt p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {

    .ord-2 {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }

    .ord-1 {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }

    .img-info-right {
        right: 0;
        margin-bottom: 30px;
    }

    .img-info-left {
        left: 0;
        margin-bottom: 30px;
    }

    .social-icn {
        text-align: center;
    }

    .card-left {
        margin: 20px auto;
    }

    .card-right {
        margin: 0 auto;
    }

    .card {
        width: 90%;
    }

    .section-2 {
        padding-top: 0;
    }

    .info-icn {
        display: none;
    }

    .social-icn-circle {
        text-align: center;
    }

    .diff-sub-content {
        padding-bottom: 25px;
    }

    .table {
        width: 90%;
    }

    .mob-display {
        display: none;
    }

    h3.heading {
        font-size: 34px;
    }

    h3.b-w3ltxt {
        font-size: 2.2em;
    }

    h4.b-w3ltxt {
        font-size: 2em;
        letter-spacing: 2px;
    }

    .banner-text-w3pvt {
        padding: 28vw 8vw 8vw;
    }

    .img-box {
        margin-right: 15px;
    }

    .square-content {
        margin: 0px 20px 40px 20px;
    }

    .feature-center {
        text-align: center;
    }

    .feature-center .bg-circle {
        margin-bottom: 10px;
    }

    h2.heading {
        font-size: 26px;
        line-height: 28px;
    }

    .right-p li,
    .right-p li a {
        font-size: 14px;
        letter-spacing: 1px;
    }

    .subscribe form {
        width: 100%;
    }

    .btn-banner {
        font-size: 15px;
        padding: 10px 25px;
    }

    .stats-icon {
        width: 65px;
        height: 65px;
        line-height: 65px;
    }

    .w3layouts_stats_left span.fa {
        font-size: 20px;
        line-height: 65px;
    }

    .csslider>.navigation {
        bottom: 0% !important;
    }

    ul.links a,
    .copy-right p,
    .copy-right p a {
        letter-spacing: 1px;
    }

    .temp {
        background: url(../images/download-icn.png) no-repeat 133px 4px;
        background-size: cover;
        background-size: 260px 200px;
    }

    .banner {
        background: url(../images/main-banner.png) no-repeat -230px 0px;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        -ms-background-size: cover;
        background-size: cover;
    }
}

@media (max-width: 414px) {
    h4.b-w3ltxt {
        font-size: 1.8em;
        letter-spacing: 1px;
    }

    .navbar-toggler {
        padding: 0.2rem 0.7rem;
    }

    .w3layouts_stats_left i {
        font-size: 18px;
        width: 60px;
        height: 60px;
        line-height: 60px;
    }

    p.counter {
        font-size: 2em;
    }

    .teamy {
        width: 49.5%;
    }

    .teamy__name {
        font-size: 1.2em;
    }

    .social {
        width: 38px;
        height: 38px;
        margin: 2px;
        font-size: 13px;
    }

    p.para-text-w3ls {
        font-size: 13px;
    }

    .subscribe form input[type='email'] {
        width: 85%;
    }

    .subscribe button.btn1 {
        width: 15%;
    }

    ul.links a,
    .copy-right p,
    .copy-right p a {
        font-size: 15px;
    }

    .image {
        width: 20%;
    }

    .ser-img img {
        width: 65px;
    }

    .copyright {
        padding: 0 1em;
    }

    ul.links a,
    .copy-right p,
    .copy-right p a {
        font-size: 14px;
    }

    .footer-title a {
        font-size: 22px;
    }

    .subscribe h3 {
        font-size: 22px;
    }

    .team-grid {
        padding: 0 10px;
    }

    h3.heading {
        font-size: 28px;
    }

    p.para-text-w3ls {
        font-size: 14px;
    }

    h3.b-w3ltxt {
        font-size: 2em;
    }

    h4.b-w3ltxt {
        font-size: 1.8em;
        letter-spacing: 1px;
    }

    #logo img,
    .footer-title img {
      width: 180px;
      margin-top: 7px;
    }

    .section-stats .col-lg-3 {
        padding: 0 7px;
    }

    nav ul li {
        padding: 5px 0;
    }
}

@media (max-width: 384px) {

    .right-p li,
    .right-p li a {
        font-size: 13px;
        letter-spacing: 0.5px;
    }

    .banner-text-w3pvt {
        padding: 33vw 7vw 8vw;
    }

    h3.b-w3ltxt {
        font-size: 2em;
    }

    h4.b-w3ltxt {
        font-size: 1.6em;
        letter-spacing: 1px;
    }

    .btn-banner {
        font-size: 14px;
        letter-spacing: 1px;
        padding: 10px 25px;
    }

    .padding {
        padding: 2em;
    }

    .banner-form-w3 {
        padding: 0vw 7vw 10vw 7vw;
    }

    h2.heading {
        font-size: 21px;
    }

    h3.heading {
        font-size: 30px;
    }

    .teamy__content {
        padding: 20px 10px;
    }

    .footer-text p {
        font-size: 14px;
    }

    ul.links a,
    .copy-right p,
    .copy-right p a {
        font-size: 14px;
    }

    .image {
        width: 25%;
    }

    .subscribe h3 {
        font-size: 25px;
    }

    .ser-img {
        padding-right: 0;
    }

    .team-info h3 {
        font-size: 1em;
    }

    .team-info span {
        font-size: 0.7em;
    }
}

@media (max-width: 375px) {}

@media (max-width: 640px) {
    .banner-box, .banner-clip {
        width: 100%;
    }
    .img-info-right, .img-info-left {
      margin-top: -30px;
      margin-left: 20px;
      margin-right: 20px;
    }
}

/*-- //responsive design --*/

/* Dropdown Menu */

.dropdown-submenu {
    position: relative;
  }
  
  .dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
  }
  
  .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
  }

  .dropdown-menu {
      width: auto !important;
      min-width: 225px;
      margin: 0 auto !important;
      left: -55px !important;
      top: 35px;
  }

  nav ul ul li {
    text-align: center;
  }

  nav ul li ul li{
      width: 100%;
      margin: 0 auto !important;
  }

  nav ul ul li a:hover {
    color: #ffffff;
    background-color: #3e9cb6;
    width: fit-content;
    border-radius: 50px;
    text-align: center !important;
    margin: 0 auto !important;
  }
  .href1 {
      color: #ddd !important;
  }

  .desktophide {
    display: none;
  }
  .mobilehide {
    display: block;
}

  @media all and (max-width: 991px) {
    .href1 {
        color: #333 !important;
    }
    .mobilehide {
        display: none;
    }
    .desktophide {
        display: block;
    }
  }