/* color variable */
:root{
    --bodyColor: #100d26;
    --bodyColorLight: #666358;
    --themeColor: #1AA5C2;
    --themeColor2: #99DBE7; 
    --themeLightColor: #D1EDF3;
    --themeExtraLightColor: #F3FBFC;
    --white: #fff;
    --black: #000;
    --lightGray: #E0E0DE;
    --yellow: #f3b93e;
}

/* Genral */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html {
    color: var(--bodyColor);
    font-size: 16px;
    line-height: 1.4;
    font-family: "Montserrat", sans-serif;
}

input, button {
    font-family: "Montserrat", sans-serif;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.875rem;
}

h3 {
    font-size: 1.625rem;
}

h4 {
    font-size: 1.375rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

body {
    padding-top: 97.4px;
}

[contentEditable=true]:focus, [tabindex]:focus, a:focus, area[href]:focus, button:focus, iframe:focus, input:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus, textarea:focus, .imgTextBoxes .box > a:hover, .imgTextBoxes .box > a:focus, .iconBoxes .box a:hover, .iconBoxes .box a:focus, .downloadBox .box a:hover, .downloadBox .box a:focus, .threeColSlider .item a:hover, .threeColSlider .item a:focus, .videoSlider .item a:hover, .videoSlider .item a:focus {
    outline: none !important;
    box-shadow: 0px 0px 0 2px #fff, 0px 0px 0 4px var(--themeColor2), 0px 0px 0px 6px var(--bodyColor) !important;
}

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

.mb-0 {
    margin-bottom: 0px !important;
}

.btnC {
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background: var(--themeColor);
    border: 2px solid var(--themeColor);
    color: #fff;
    display: inline-block;
    padding: 11px 25px;
    border-radius: 4px;
    text-align: center;
}

.btnC:hover {
    background: var(--white);
    color: var(--bodyColor);
}

.btnC.large {
    padding: 12px 25px;
    font-size: 1.25rem;
    min-width: 300px;
}

/* wrapper */
.wrapper {
    width: 100%;
}

/* container */
.container {
    padding: 0 15px;
    max-width: 1140px;
    margin: 0 auto;
}

/* headerWrapper */
.headerWrapper {
    padding: 15px 0;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: var(--themeExtraLightColor);
    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
    z-index: 9;
}

.headerWrapper .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* logoArea */
.logoArea a {
    display: block;
}

.logoArea img {
    max-width: 200px;
}


/* headerRight */
.headerRight {
   
}

/* socailArea */
.socailArea {
    float: right;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.socailArea .call {
    float: left;
    color: var(--bodyColor);
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.socailArea .call a {
    color: green;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
}

.socailArea .call a img,
.socailArea .call a svg {
    margin-right: 5px;
}

.socailArea .call a:hover {
    text-decoration: underline;
}

.socailArea ul {
    float: left;
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.socailArea li a {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bodyColor);
    border-radius: 4px;
}

.socailArea li a svg {
    width: 18px;
    height: auto;
}

.socailArea li a svg path ,
.socailArea li a svg rect {
    fill: var(--bodyColor);
}


.socailArea li a:hover {
    background: var(--bodyColor);
    color: var(--bodyColor);
}

.socailArea li a:hover svg path,
.socailArea li a:hover svg rect {
    fill: var(--white);
}

.socailArea.black .call {
    color: var(--bodyColor);
}

.socailArea.black .call a {
    display: flex;
}

.socailArea.black li a {
    border-color: var(--bodyColor);
}

.socailArea.black li a:hover {
    background: var(--bodyColor);
}

.socailArea.black li a:hover svg path,
.socailArea.black li a:hover svg rect {
    fill: var(--white);
}

/* menuArea */
.menuArea {
    clear: both;
    float: right;
}

.menuArea ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.menuArea li a {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bodyColor);
    text-decoration: none;
}

.menuArea li a:hover {
    color: var(--themeColor);
}

/* Dark Header */
.headerWrapper.dark {
    background: var(--bodyColor);
}

.headerWrapper.dark .menuArea li a {
    color: var(--white);
}

.headerWrapper.dark .menuArea li a:hover {
    color: var(--themeColor);
}

.headerWrapper.dark .socailArea .call {
    color: #fff;
}

.headerWrapper.dark .socailArea .call a {
    color: #fff;
}

.headerWrapper.dark .socailArea li a {
    border-color: var(--white);
}

.headerWrapper.dark .socailArea li a:hover {
    background: var(--white);
}

.headerWrapper.dark .socailArea li a svg path,
.headerWrapper.dark .socailArea li a svg rect {
    fill: var(--white);
}

.headerWrapper.dark .socailArea li a:hover svg path,
.headerWrapper.dark .socailArea li a:hover svg rect {
    fill: var(--bodyColor);
}

.headerWrapper.dark .socailArea .call a svg path,
.headerWrapper.dark .socailArea .call a svg rect {
    fill: var(--white);
}

/* contenWrapper */
.contenWrapper {
    width: 100%;
}

/* bannerWrapper */
.bannerWrapper {
    width: 100%;
        box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
}

.bannerSlider {
    width: 100%;
}

.bannerSlider .container {
    position: relative;
    padding-top: 50px;
    padding-bottom: 0px;
}

.bannerSlider .item {
    color: #fff;
    text-align: center;
    width: 100%;
    background-color: var(--bodyColor);
    position: relative;
}

.bannerSlider .item::before {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    background-image: url(../images/banner-bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 0.3;
}

.bannerSlider .item .skillImg {
    width: 100%;
    margin: 30px auto 0 auto;
}

.bannerSlider .item h1 {
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 30px;
    font-weight: 300;
}

.bannerSlider .item h1 strong {
    font-weight: 700;
    display: block;
}

.bannerSlider .item .live {
    position: absolute;
    top: 0px;
    left: 15px;
    font-size: 1.125rem;
    color: #fff;
    text-decoration: none;
    display: flex;
    background-color: rgba(0, 0, 0, .28);
    border: 2px solid var(--themeExtraLightColor);
    border-top: none;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
}

.bannerSlider .item .live.right {
    left: auto;
    right: 15px;
}

.bannerSlider .item .live span {
    padding: 7px 20px;
}

.bannerSlider .item .live .red {
    background: red;
    font-weight: 700;
    text-transform: uppercase;
}

.bannerSlider .item h4 {
    margin-bottom: 5px;
}

.bannerSlider .item ul {
    padding: 0 0 20px 20px;
}

.bannerSlider .item p {
    font-weight: 500;
    margin-bottom: 15px;
}

.bannerSlider .price {
    position: absolute;
    top: 100px;
    right: 30px;
    width: 150px;
    height: 150px;
    display: block;
    background: #fff;
    border: 4px solid var(--yellow);
    border-radius: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: var(--bodyColor);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-align: center;
    padding: 0px;
    text-decoration: none;
}

.bannerSlider .price strike {
    color: red;
    width: 100%;
}

.bannerSlider .price span {
    font-size: 2rem;
    display: block;
    color: green;
    width: 100%;
}

.bannerSlider .price div {
    width: 100%;
}

.subbanner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: left;
}

.subbanner .col {
    width: 50%;
    padding: 0 20px;
}

/* titleSec */
.titleSec {
    width: 100%;
    margin-bottom: 25px;
}

.titleSec.white h2 {
    color: var(--white) !important;
}

.titleSec h2 {    
    text-transform: uppercase;
    font-weight: 300;
    text-align: center;
    position: relative;
    color: var(--bodyColor) !important;
}

.titleSec h2 span {
    color: var(--themeColor) !important;
    font-weight: 700;
}

.titleSec h2:after {
    margin: 10px auto 0;
    width: 100px;
    height: 2px;
    display: block;
    content: "";
    background: var(--themeColor);
}

.titleSec p {
    text-align: center;
    margin: 20px 0 0 0;
}

/* benifitsArea */
.benifitsArea {
    padding: 50px 0;
    width: 100%;
}

.benifitsArea p {
    padding: 0 14%;
    margin-bottom: 25px;
}

table {
    width: 100%;
    border: 1px solid var(--bodyColorLight);
    table-layout: fixed;
    border-collapse: collapse;
}

table th,
table td {
    border: 1px solid var(--bodyColorLight);
    padding: 8px 15px;
}

table th {
    font-size: 1.375rem;
    background: var(--bodyColor);
    color:  var(--white);
    padding: 17px 15px;
    font-weight: 500;
}

/* contactArea */
.contactArea {
    width: 100%;
    padding: 50px 0;
    background: var(--bodyColor);
}

.contactArea .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contactArea .socailArea {
    float: none;
    margin-bottom: 15px;
}

.contactArea .socailArea .call {
    color: var(--white);
    font-size: 1rem;
    justify-content: flex-start;
}

.contactArea .socailArea .call a {
    color: var(--white);
}

.contactArea .inputStyle {
    width: 100%;
    height: 42px;
    border: 1px solid var(--themeColor);
    padding: 0 15px;
    font-size: 1rem;
    border-radius: 3px;
}

.contactArea .image {
    width: 40%;
    padding: 30px 30px 0 30px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.contactArea .contactForm {
    width: 55%;
}

.contactArea h2 {
    margin-bottom: 5px;
}

.contactArea p {
    color: #fff;
    font-weight: 500;
    margin-bottom: 15px;
}

.contactArea .formGroup {
    width: 100%;
    margin-bottom: 20px;
}

.contactArea .btnC {
    margin-bottom: 15px;
}

#responseMsg {
    font-weight: 700;
    margin: 0 0 0 0;
}

/* syllabusArea */
.syllabusArea {
    padding: 30px 0;
    width: 100%;
    background: var(--bodyColor);
}

.syllabusArea .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.syllabusArea h2 {
    color: #fff;
}

/* contentArea */
.contentArea {
    width: 100%;
    padding: 50px 0;
}

.contentArea .underContent {
    column-count: 2;
    column-gap: 30px;
}

.contentArea h2,
.contentArea h3,
.contentArea h4,
.contentArea h5,
.contentArea h6 {
    color: var(--themeColor);
    margin-bottom: 15px;
}

.contentArea .duration {
    padding: 20px;
    border-radius: 15px;
    background: var(--themeColor2);
    color: var(--bodyColor);
    margin-bottom: 15px;
}

.contentArea p {
    margin-bottom: 15px;
}

.contentArea ul,
.contentArea ol {
    padding: 0 0 15px 20px;
    font-weight: 700;
}

.contentArea li {
    margin-bottom: 5px;
}

/* footerWrapper */
.footerWrapper {
    width: 100%;
    background: var(--themeLightColor);
    padding: 40px 0;
}

.footerWrapper .container {
    display: flex;
    gap: 50px;
}

.footerWrapper .col {
    width: 33.33%;
}

.footerWrapper .logoArea {
    margin: 0 0 20px 0;
}

.footerWrapper h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--bodyColor);
    text-decoration: none;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.footerWrapper h3::after {
    width: 60px;
    border-bottom: 6px solid var(--bodyColor);
    content: "";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.footerWrapper h3::before {
    width: 80px;
    border-bottom: 2px solid var(--themeColor);
    content: "";
    display: block;
    position: absolute;
    bottom: 2px;
    left: 0px;
}

.footerWrapper p {
    font-weight: 500;
    width: 100%;
}

.footerWrapper ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.footerWrapper li {
    margin-bottom: 10px;
}

.footerWrapper li a {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bodyColor);
    text-decoration: none;
}

.footerWrapper li a:hover {
    text-decoration: underline;
}


/* copyrightArea */
.copyrightArea {
    padding: 12px 0;
    width: 100%;
    background: var(--bodyColor);
    color: var(--white);
    text-align: center;
    font-size: 0.85rem;
}