* {
    box-sizing: border-box;
    --Primary-blue: #002559;
    --Blue-text: #163663;
    --Primary-yellow: #ffcf01;
    --bg-color: conic-gradient(
        from 83.1deg at 25.07% 53.09%,
        #00143f -4.91deg,
        #005091 25.16deg,
        #00143f 355.09deg,
        #005091 385.16deg
    );
    
}
a {
    text-decoration: none;
}
/* html {
    font-size: 62.5%;
} */
 
/* body {
    font-size: 1.6rem;
    font-family: "Montserrat";
}  */
.removed {
    transform: translateX(-100%);
}
/* ===commom== */
.buttonType1 {
    display: block;
    border-radius: 4px;
    background: var(--Primary-yellow, #ffcf01);
    padding: 10px 16px;
    min-width: 115px;
    width: fit-content;
    color: var(--Primary-blue, #002559) !important;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none !important;
    text-transform: uppercase;
    border: none;
    transition: all 0.3s ease;
}

.buttonType1:hover  a{
    transform: scale(1.05);
}

.buttonType2:hover {
    background-color: var(--Primary-blue, #002559);
    color: #fff;
}

.buttonType2 {
    text-decoration: none !important;
    display: block;
    border-radius: 4px;
    border: 1px solid #2b87bb;
    width: 115px;
    padding: 10px 16px;
    gap: 10px;
    color: #2b87bb;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.desc {
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}

.nav-link:hover {
    color: #ffcf01!important;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
}

.line2 >.nav-link:hover {
    color: #fff!important;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}
.desc.t2 {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}

.text-shadow {
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.heading {
    color: #fff;
    line-height: 45px;
    text-decoration: none;
}

.heading.t1 {
    font-size: 48px;
    font-weight: 600;
    font-style: normal;
}
.heading.t2 {
    font-size: 36px;
    font-weight: 800;
}
.heading.t2-2 {
    font-size: 36px;
    font-weight: 500;
}
.heading.t2-3 {
    font-size: 36px;
    font-weight: 600;
}
.heading.t3 {
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    text-decoration: none;
}
.heading.t3:hover{
    color: #fff !important;
}
.yellow {
    color: var(--Primary-yellow);
}
.blue {
    color: var(--Blue-text) !important;
}

.bold700 {
    font-weight: 700 !important;
}

.uppercase {
    text-transform: uppercase;
}

.relative {
    position: relative;
}

/* =================HEADER============ */

.logoBox {
    width: 151px;
    height:20.88px;
    /* margin-bottom: 5px; */
}

.logoBox img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.header {
    height:72px !important;
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--Primary-blue);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.headerBox {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 19px;
    padding-bottom: 16px;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.headerBox .nav {
    display: flex;
    align-items: center;
}

.headerBox .nav .nav-item {
    margin: 0px 6px;
}

.headerBox .nav .buttonNav {
    margin-left: 81px;
}

.headerBox .nav .activeMenu .desc{
    color:#ffcf01!important;
    font-weight:bold;
}
.notiBox {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 32px 0;
    background-color: #4f88b4;
    z-index: -2;
    opacity: 0;
    pointer-events: none;
}

.notiBox.show {
    animation: show linear 0.5s forwards;
}

.notiBox .boxContent {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px; /* 120% */
}

@keyframes show {
    0%{
        opacity: 0;
        transform: translateY(-100%);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.iconNavMb {
    display: none;
    fill: white;
}

.iconNavMb svg {
    width: 30px;
}

.mbNav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateX(-100%);
    background-color: var(--color-1);
    color: #fff;
    z-index: 10;
    padding: 20px 20px 0 20px;
    transition: all 0.2s linear;
    background-color: var(--Primary-blue);
}
.mbNav.active {
    transform: translate(0);
}
.mbNav .line1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mbNav .line1 .btnClose svg {
    width: 30px;
    height: 30px;
    fill: #fff;
}

.mbNav .socials {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 20px;
    text-transform: uppercase;
}

.mbNav .socials .iconBox {
    position: relative;
    width: 20px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: var(--color-1);
    padding: 17px;
}
.mbNav .socials .iconBox i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}

/* .mbNav .line2 {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
}

.mbNav .line2 a {
    border: 2px solid #fff;
    margin-bottom: 20px;
    padding: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
} */
.mbNav .line2 {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
  }
  
  .mbNav .line2 a {
    margin-bottom: 20px;
    padding: 10px;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    color: #fff;
  }
/* =================Footer============ */
footer {
    background-color: #01143f;
    padding: 68px 0;
}

footer .logoBox {
    margin-bottom: 16px;
    width: 185px;
    height:auto;
}

footer .socialsBox {
    margin-top: 16px;
}

footer .boxContent {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
}

footer .boxContent .itemCol {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

footer .boxContent .itemCol a,
footer .boxContent .itemCol p{
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}

footer .boxContent .itemCol a {
    text-decoration: none;
}

footer .copyright {
    margin-top: 57px;
    display: flex;
    gap: 24px;
}

footer .copyright .privacy {
    color: #2b87bb !important;
    text-decoration: none;
}

/* contactProfessor */
.contactProfessor {
    background: radial-gradient(
        1375.12% 136.51% at 75.53% -6.61%,
        #01143f 0%,
        #01143f 9.76%,
        #014c8c 90.42%
    );
    padding: 72px 0 88px;
}

.contactProfessor .labelHeaing {
    padding: 48px 0;
}

.contactProfessor .buttonType1 {
    margin-top: 48px;
}

.formContact {
    width: 100%;
    display: grid;
    grid-template-areas: 
    "nameBox companyBox"
    "phoneBox majorBox"
    "emailBox mesBox"
    "confirm1Box mesBox"
    "confirm2Box mesBox";
    grid-template-columns: 1fr 1fr;
    column-gap: 120px;
}

.formContact .inputBox {
    margin-top: 30px;
}

.formContact > div {
    width: 100%;
}

.formContact .nameBox { grid-area: nameBox;}
.formContact .companyBox { grid-area: companyBox;}
.formContact .phoneBox { grid-area: phoneBox;}
.formContact .majorBox { grid-area: majorBox;}
.formContact .emailBox { grid-area: emailBox;}
.formContact .confirm1Box { grid-area: confirm1Box;}
.formContact .confirm2Box { grid-area: confirm2Box;}
.formContact .mesBox { grid-area: mesBox;}

.formContact .rowForm {
    margin-top: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
}

.formContact .form-label {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.formContact .form-control {
    display: flex;
    padding: 10px 14px;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 8px;
    border: 0.75px solid #fff !important;
    background-color: transparent !important;
    color: #06daff !important;
    font-size: 16px;
}

.formContact .form-control::placeholder {
    color: #fff;
    font-size: 16px;
    opacity: 0.7;
}

.formContact .form-check {
    margin-top: 48px;
    display: flex;
    align-items: start;
    justify-content: baseline;
    gap: 8px;
}

.formContact .form-check input {
    margin-top: 5px;
    border-radius: 4px;
    width: 18px;
    aspect-ratio: 1/1;
    background-color: transparent;
    border: 1px solid #fff;
    height: 18px;
    border-color:#fff;
}


.formContact .form-check label {
    color: #fff;
    vertical-align: middle;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.formContact .form-check .invalid-feedback {
    display: none;
}

.formContact .invalid-feedback {
    margin-top: 8px;
}

@media screen and (max-width: 1200px) {
    .headerBox .nav {
        display: none;
    }

    .iconNavMb {
        display: block;
    }
    .subNavProduct{
        display:block !important;
    }
}


@media screen and (max-width: 768px) {
    .formContact {
        grid-template-areas: 
        "nameBox"
        "companyBox"
        "phoneBox"
        "majorBox"
        "emailBox"
        "mesBox"
        "confirm1Box"
        "confirm2Box";
        grid-template-columns: 1fr;
    }

    footer .logoBox {
        margin: 0 auto;
    }
    footer .boxContent {
        grid-template-columns: 1fr 1fr;
        row-gap: 20px;
    }
    footer .boxContent .itemCol {
        align-items: center;
    }
    .subNavProduct{
        display:block !important;
    }
}

@media screen and (max-width: 425px) {
    footer .boxContent {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    .subNavProduct{
        display:block !important;
    }
}