/* ====================== 
============Header ======
======================= */

.widebanner {font-size: 0.8333333333333333vw}
.widebanner .bnrInner {padding: 0 15px}
.widebanner h1 {
    margin: 0 0 40px;
    padding-top: 140px;
    line-height: 1.114;
    font-size: 3.3em;
    font-weight: 700;
    color: #025a8c;
}
.widebanner .bnrTitle {
    width: 100%;
    max-width: 700px;
    padding-bottom: 2.0833333333333335vw;
}
.widebanner .bnrTitle p {
    line-height: 1.111;
    font-size: 1.8em;
    font-weight: 600;
    color: #000;
    margin: 0;
}
.widebanner .commBtn {
    background: #ff3f20;
    text-transform: capitalize;
    font-family: inherit;
    font-weight: 700;
    font-size:1.6em;
    padding:0 25px;
    margin: 0;
}
.widebanner .bannerBrand {
    width: 100%;
    padding: 80px 0 70px;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    flex-wrap: wrap;
    display: flex;
    margin: 0;
}
.widebanner .bannerBrand {
    width: 100%;
    padding: 4.166666666666667vw 0 3.6458333333333335vw;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    flex-wrap: wrap;
    display: flex;
    margin: 0;
}
@media screen and (max-width: 1920px) {
    .widebanner h1 {
        font-size: 3.3em;
        margin-bottom: 2.0833333333333vw;
        padding-top: 7.2916666666667vw;
    }
    .widebanner .bnrTitle {padding-bottom: 2.0833333333333vw}
    .widebanner .bnrTitle p {font-size: 1.8em}
}

@media screen and (max-width: 1366px) {
    .widebanner h1 {
        margin-bottom: 1.5vw;
        font-size: 3.7em;
    }
    .widebanner .bnrTitle p {
        max-width: 43.8vw;
        padding-bottom: 1.5vw;
        font-size: 2.6em;
    }
    .widebanner .commBtn {
        min-height: 3.5vw;
        padding: 0 1.3020833333333vw;
        border-radius: 1.666vw;
        font-size: 1.8em;
    }
    .widebanner .bannerBrand {
        width: 56.931216931217%;
        padding-bottom: 1.5vw;
    }
}

@media screen and (max-width: 1280px) {
    .widebanner .bannerBrand { width: 70%}
}
@media screen and (max-width: 639px) {
    .widebanner .bannerBrand {width: calc(100vw - 30px)}
    .widebanner h1 {font-size: 4.5em}
    .widebanner .bnrTitle p {font-size: 2.8em}
}

/*     trainBox     */

.training.emploTrain {padding: 80px 0}
.training h2 {
    text-align: center;
    color: #025a8c;
}
.trainMid {
    width: 100%;
    padding: 40px 0 0;
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
    display: flex;
    gap: 30px;
    margin-top: 50px
}
.emploTrain .trainMid {padding-top: 0}
.trainBox {
    width: calc(33.3333% - 20px);
    background: rgba(255, 255, 255, 1);
    box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, .25);
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    padding: 30px;
}
.emploTrain .trainBox {width: calc(25% - 22.5px)}
.imgTextBox {
    width: 100%;
    padding: 100px 0;
    position: relative;
    text-align: center;
    color: #fff;
}
.trainIcon {
    width: 108px;
    height: 108px;
    margin: 0 auto;
    background-color: #025a8c;
    border-radius: 50%;
    line-height: 0;
    display: block;
}
.trainBox span {
    line-height: 1.1666;
    font-size: 22px;
    font-weight: 700;
    color: #025a8c;
    display: block;
}
.trainBox p {
    margin: 30px 0 0;
    line-height: 1.666;
    font-family: 'proximaNova';
    font-weight: 400;
    font-size: 18px;
    color: #000;
}
.tttpp p {
    text-align: left;
    font-size: 22px;
    line-height: 1.4
}
.trainIcon {
   margin-bottom: 30px
 
}
.trainIcon svg {
    width: 108px;
    height: auto;
}

@media screen and (max-width: 1023px) {
    .training.emploTrain {padding: 60px 0}
    .emploTrain .trainBox {width: calc(50% - 22.5px)}
    .tttpp p {font-size: 18px}
    .imgTextBox {padding: 60px 0}
}

@media screen and (max-width: 639px) {
    .emploTrain .trainBox {width: 100%}
    .tttpp p {font-size: 16px}
}
/*curriculum*/

.curriculum {
    width: 100%;
    padding: 80px 0;
    position: relative
}
.curriculum h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 60px;
    color: #025a8c;
}
.criclmTop {
    padding: 30px;
    list-style: none;
    background-color: #fff;
    box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, .1);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 10px;
    display: flex;
    margin: 0
}
.criclmTopIn {
    text-align: center;
    border-left: 1px solid #b5b5b5;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 1 0 0;
    gap: 10px;
    line-height: 1;
    font-size: .75em;
    color: #a5a5a5
}

.criclmTopIn strong {
    font-weight: 600;
    font-size: 16px;
    color: #000;
}

.criclmTopIn:first-child {border-left: none}
.criclmTop .criclmTopIn > img {
    width: 60px;
    border-radius: 50%;
    height: auto;
}
.criclmTop .criclmTopIn:first-child {
    flex-direction: inherit;
    align-items: center;
    justify-content: center;
}
.criclmTop .criclmTopIn:first-child .teacherTxt span {text-align: left}

.teacherTxt p {margin: 0}
.teacherTxt {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
    gap: 10px
}
.teacherTxt span {
    display: block;
    text-align: center;
    font-size: 18px;
    width: 100%;
}
.teacherTxt img {
    width: 140px;
    padding: 0 5px;
}
.curriculum .stars {line-height: 0}
.criclmMid > .elementor-container {
    width: 100%;
    align-items: flex-start;
    display: flex;
    gap: 30px;
}
.criclmMid .criclmLft {
    width: calc(58.758109360519% - 15px) !important;
    text-align: center
}
.accorBoxWrp .accorBox:first-child {margin-top: 0}
.accorBox {
    width: 100%;
    padding: 30px;
    text-align: left;
    margin-top: 30px;
    box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, .1);
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden
}
.criclmLft strong {
    line-height: 1.2;
    background: none;
    position: relative;
    padding: 0 0 0 43px;
    font-size: 18px;
    font-weight: 700;
    color: #025a8c;
    border: none;
}

.criclmLft strong::before {
    width: 19px;
    height: 19px;
    transform: rotate(180deg);
    transition: transform .3s ease-in-out;
    background: url("../images/arrow-323.svg") no-repeat left center;
    background-size: 100% auto;
    position: absolute;
    display: block;
    content: "";
    left: 0;
    top: 0
}
.criclmLft strong[aria-expanded="true"]::before {transform: rotate(0deg)}
.criclmLft ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0
}
.accorBox li {
    min-height: 84px;
    padding: 15px 0 15px 43px;
    box-sizing: border-box;
    border-top: 1px solid rgba(181, 181, 181, .36);
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    line-height: 1;
    display: flex;
    color: #000
}
.accorBox ul:first-of-type li:first-child {border-top: none}
li.vdoList {
    background: url("../images/video.svg") no-repeat left center;
    background-size: 28px auto
}

li.vdoList a {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-size: inherit;
    font-size: inherit;
    text-decoration: none;
    line-height: inherit;
    cursor: pointer;
    color: #000
}
.accorBox li a:hover {color: #ff3f20}
.criclmMid .criclmRgt {
    width: calc(41.241890639481% - 15px) !important;
    box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, .1);
    background-color: #fff;
    border-radius: 10px;
    margin-top: 30px
}
.criclmBanner {
    width: 100%;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    line-height: 0
}
.criclmBanner img {width: 100%}
.criclmRgtIn {
    padding: 30px;
    border-radius: 0 0 10px 10px
}
.criclmRgtIn p {margin: 0}
.criclmRgt strong {
    display: block;
    padding-bottom: 20px;
    line-height: 1.041;
    font-size: 1em;
    font-weight: 700;
    color: #025a8c;
    text-align: left
}
.criclmRgt ul {
    width: 100%;
    list-style: none;
    flex-direction: column;
    align-items: flex-start;
    display: flex;
    padding: 0;
    margin: 0;
    gap: 18px
}
.criclmRgt li {
    padding-left: 37px;
    /*background: url("../images/list.svg") no-repeat left 2px;*/
    background-size: 16px auto;
    font-weight: 700;
    line-height: 1;
    color: #000
}

.criclmRgt li.dollar,
.criclmRgt li.lessons,
.criclmRgt li.hoursof {
    padding-left: 43px;
    line-height: 26px
}
.criclmRgt li.dollar {
    background: url("../images/dollar.svg") no-repeat left center;
    background-size: 12px auto
}
.criclmRgt li.lessons {
    background: url("../images/lessons.svg") no-repeat left center;
    background-size: 20px auto
}

.criclmRgt li.hoursof {
    background: url("../images/hoursof.svg") no-repeat left center;
    background-size: 22px auto
}

#accordion .accorBox {display: none}
#accordion.show .accorBox,
#accordion .accorBox:nth-child(1) {display: block}
.showMore {
    padding: 0;
    cursor: pointer;
    margin: 30px 0 0;
    position: relative;
    font-family: Proxima Nova;
    background-color: transparent;
    text-decoration: none;
    display: inline-flex;
    padding-right: 27px;
    line-height: 16px;
    font-weight: 600;
    font-size: 16px;
    color: #025a8c;
    border: none
}
#accordion.show .showMore {display: none}
.showMore:hover {color: #025a8c}
.showMore::after {
    width: 18px;
    height: 16px;
    /*background: url("../images/showMore.svg") no-repeat left center;*/
    background-size: 100% auto;
    position: absolute;
    display: block;
    content: "";
    right: 0;
    top: 0
}
@media screen and (max-width: 1280px) {
    .curriculum {padding: 50px 0}
    .curriculum h2 {
        margin-bottom: 20px;
        font-size: 40px;
    }
    .criclmMid > .elementor-container {gap: 15px}
    .trainMid {margin-top: 30px}
    .accorBox {margin-top: 15px}
    .criclmRgt {margin-top: 15px}
}
@media screen and (max-width: 1023px) {
    .teacherTxt span,
    .criclmTopIn strong {font-size: 14px}
}

@media screen and (max-width: 767px) {
    .curriculum {padding: 30px 0}
    .criclmTop {padding: 10px}
    .criclmTopIn {gap: 5px}
    .teacherTxt span,
    .criclmTopIn strong {font-size: 12px}
    .teacherPic {
        width: 40px;
        height: 40px
    }
    .criclmTop .criclmTopIn > img {width: 26px}
    .teacherTxt {gap: 5px}
    .curriculum .stars {max-width: 60%}
    .accorBox {padding: 15px}
    .criclmLft strong {
        padding-left: 30px;
        font-size: 16px
    }
    .criclmLft strong::before {
        width: 15px;
        height: 16px
    }
    .accorBox li {
        min-height: 60px;
        padding: 10px 0 10px 30px;
        font-size: 16px
    }
    li.vdoList {background-size: 22px auto}
    .criclmRgtIn {padding: 15px}
    .criclmRgt strong {padding-bottom: 10px}
    .criclmRgt ul {gap: 10px}
    .criclmRgt li,
    .criclmRgt li.dollar,
    .criclmRgt li.lessons,
    .criclmRgt li.hoursof {padding-left: 30px}
    .criclmMid .criclmRgt {
        width: 100% !important;
        order: 1
    }
    .criclmMid .criclmLft {
        width: 100% !important;
        order: 2
    }
}

@media screen and (max-width: 639px) {
    .criclmTop {
        padding-left: 0;
        padding-right: 0
    }
    .criclmTopIn {font-size: .65em}
    .criclmTopIn:last-child {flex: .7 0 0}
    .curriculum .stars {max-width: 85%}
    .teacherPic {
        width: 30px;
        height: 30px
    }
    .criclmMid {
        flex-wrap: wrap;
        gap: 0
    }
}

@media screen and (max-width: 423px) {
    .teacherTxt span,
    .criclmTopIn strong {font-size: 10px}
}
.guarantee {
    width: 100%;
    padding: 80px 0;
    text-align: center;
    position: relative;
    color: #fff;
}
.grnteInner {
    width: 100%;
    max-width: 884px;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 auto;
    display: flex;
    gap: 54px;
}
.grnteImg {
    width: 100%;
    max-width: 884px;
    line-height: 0;
    margin: auto;
}
.guarantee h2 {
    width: 100%;
    line-height: 1;
    margin: 54px 0 0;
    font-size: 35px;
    font-weight: 700;
    display: block;
    color: #fff;
}
.guarantee p {
    margin: 54px auto;
    max-width: 768px;
    font-size: 20px;
    line-height: 1.3;
}
.guarantee .commBtn {
    background: #ff3f20;
    font-family: inherit;
    font-size: 22px;
}
@media screen and (max-width: 1919px) {
    .grnteImg {width: 46.041666666667vw}
}

@media screen and (max-width: 767px) {
    .grnteImg {width: 80%}
    .guarantee h2 {
        margin: 54px 0 0;
        font-size: 26px;
    }
    .guarantee p {
        margin: 30px auto;
        font-size: 16px;
    }
}