/* My Classes */
/* .content1{
    color: var(--color-ts-white);
} */


/* Scrollbar width */
::-webkit-scrollbar {
  width: 0px;
}


.banner-bottom, .banner, .inner-sec-layer, .contact, .skills, .edu-exp, .projects {
    padding: 4em 5em;
}

@media(max-width: 736px) {
    .banner-bottom, .banner, .inner-sec-layer, .contact, .skills, .edu-exp, .projects {
    padding: 4em 3em;
    }
}

@media(max-width: 415px) {
    .banner-bottom, .banner, .inner-sec-layer, .contact, .skills, .edu-exp, .projects {
         padding: 3em 1.5em;
     }
}


/* tabs */
.inner-w3pvt-wrap {
    padding-top: 2em;
}

.inner-w3pvt-wrap h4 {
    font-size: 18px;
    font-weight: 500;
    font-family: fontin, Arial, sans-serif;
    color: var(--color-ts-white);
    text-transform: capitalize;
    letter-spacing: 1px;
    margin: 0;
}

.inner-w3pvt-wrap h6 {
    font-size: 18px;
    font-family: fontin, Arial, sans-serif;
    letter-spacing: 1px;
    /*color: #555;*/
    font-style: italic;
    /*background: #f6f6f6;*/
    padding-left: 10px;
    margin: 5px 0 20px 15px;
}

.inner-w3pvt-wrap p {
    font-weight: 400;
    font-size: 15px;
    color: var(--color-ts-white);
}

.tab-main section {
    display: none;
}

.tab-main input.w3pvt-sm {
    display: none;
}

.tab-main label {
    display: inline-block;
    padding: 12px 25px;
    color: var(--color-ts-blue);
    background: var(--color-ts-white);
    border: 1px solid #e6e6e6 !important;
    font-size: 16px;
    letter-spacing: 1px;
}

.tab-main span {
    margin-right: 0.5em;
}

/*
.tab-main label:before {
    font-family: fontin, Arial, sans-serif;
    font-weight: normal;
    margin-right: 10px;
    opacity: 0;
    display: none;
}


.tab-main label[for*='1']:before {
    content: '\f1cb';
}

.tab-main label[for*='2']:before {
    content: '\f17d';
}

.tab-main label[for*='3']:before {
    content: '\f16c';
}

.tab-main label[for*='4']:before {
    content: '\f171';
}
*/

.tab-main label:hover {
    cursor: pointer;
}

.tab-main i{
    font-size: 24px;
    vertical-align: sub;
}

.tab-main input:checked+label {
    background: var(--color-ts-green);
    color: #fff;
}

.tab-main #tab1:checked~#content1,
.tab-main #tab2:checked~#content2,
.tab-main #tab3:checked~#content3,
.tab-main #tab4:checked~#content4 {
    display: block;
}

@media screen and (max-width: 800px) {
    .tab-main label:before {
        margin: 0;
        font-size: 18px;
    }
}

@media screen and (max-width: 500px) {
    .tab-main label {
        padding: 15px;
    }
}

/* //tabs */