:root {
    --color-base: #3C454F;
    --color-gray-f: #808080;
    --color-gray-border: #cccccc;
    --color-gray-lightest: #F5F5F5;
    --color-gray-lighter: #EDF2F0;
    --fs-per: .0625;
    --fs-vw: .0694;
}

.freshers {
    color: var(--color-base);
}

.freshers .container--l {
    width: 1340rem;
}

.freshers .container--m {
    width: 1200rem;
}

.freshers .container--s {
    width: 1000rem;
}

.freshers .container--ss {
    width: 800rem;
}

section {
    padding: 0;
}

.pages.freshers .main {
    padding: 0 0 40rem;
}

.ls {
    letter-spacing: -.02em;
}

@media screen and (max-width: 767.9px) {
    :root {
        --fs-vw: .2667;
    }

    .freshers .container--l,
    .freshers .container--m,
    .freshers .container--s,
    .freshers .container--ss {
        width: 335rem;
    }

    .pages.freshers .main {
        padding: 0 0 20rem;
    }
}

/* typography */
.heading__wrapper.w {
    color: var(--color-white);
}

.freshers .heading--primary {
    font-size: 60rem;
    line-height: 1;
    font-weight: normal;
    letter-spacing: 0;
    text-align: left;
    margin-bottom: 5rem;
}

.freshers .heading--sub {
    font-weight: 600;
}

.pages.freshers .heading--primary.imgBg {
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 160rem;
    color: var(--color-white);
    height: 54.2vw;
    padding-top: 14rem;
}

.pages.freshers .heading--sub {
    display: block;
    margin: 14rem 0 55rem;
    font-size: 16rem;
}

.pages.freshers .heading--text {
    display: block;
    text-align: left;
    font-size: 20rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .025em;
}

.heading--secondaryF {
    font-size: 32rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    position: relative;
}

.heading--secondaryF::before {
    position: absolute;
    top: -32rem;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 80rem;
    height: 4rem;
    background-color: var(--color-green);
}
@media screen and (max-width: 1440px) {
    .pages.freshers .heading--primary.imgBg {
            height: 780rem;
    }
}
@media screen and (max-width: 767.9px) {

    .freshers .heading--primary {
        font-size: 40rem;
        font-weight: normal;
        margin-bottom: 0;
    }

    .pages.freshers .heading--primary.imgBg {
        padding: 0 0 7rem;
        margin-bottom: 60rem;
        height: 666rem;
    }

    .pages.freshers .heading--sub {
        margin: 8rem 0 55rem;
    }

    .pages.freshers .heading--text {
        letter-spacing: 0;
    }

    .heading--secondaryF {
        font-size: 28rem;
    }

    .heading--secondaryF::before {
        top: -24rem;
    }
}

/* button */
.btn--f {
    width: 40rem;
    height: 40rem;
    border: 1px solid var(--color-green);
    background-color: var(--color-white);
    transition: all .4s;
}

.btn--f .svg--arrow {
    fill: var(--color-green);
    transition: all .4s;
    width: 8rem;
    height: 11rem;
}

.btn--f:hover {
    background-color: var(--color-green);
}

.btn--f:hover .svg--arrow {
    fill: var(--color-white);
}

.btn--moreF {
    width: 160rem;
    height: 54rem;
    background-color: var(--color-green);
    border: 1px solid var(--color-green);
    color: var(--color-white);
    transition: all .4s;
    text-transform: uppercase;
    text-align: center;
    font-size: 14rem;
    letter-spacing: .2em;
    font-weight: 600;
    padding-left: 36rem;
    gap: 18rem;
}

.btn--moreF .svg--link {
    fill: var(--color-white);
    transition: all .4s;
    width: 15rem;
    vertical-align: text-bottom;
    height: 15rem;
}

.btn--moreF:hover {
    background-color: var(--color-white);
    color: var(--color-green);
    opacity: 1;
}

.btn--moreF:hover .svg--link {
    fill: var(--color-green);
}

.btn--topF {
    position: relative;
    width: 360rem;
    height: 80rem;
    font-size: 18rem;
    font-weight: 600;
    border: 1px solid var(--color-gray-f);
    color: var(--color-green);
    margin: 0 auto 70rem;
}

.btn--topF:hover {
    opacity: 1;
    border: 1px solid var(--color-green);
    color: var(--color-white);
    background-color: var(--color-green);
}

.btn--topF::after {
    position: absolute;
    content: "";
    top: calc(50% - 7rem);
    right: 30rem;
    width: 19rem;
    height: 10rem;
    border: none;
    border-right: 4rem solid var(--color-green);
    transform: skew(45deg);
    transition: .4s;
}

.btn--topF:hover::after {
    right: 20rem;
    width: 26rem;
    border-right: 4rem solid var(--color-white);
}

.btn--topF::before {
    position: absolute;
    content: "";
    width: 20rem;
    height: 3rem;
    border-radius: 3rem;
    background-color: var(--color-green);
    top: 50%;
    right: 28rem;
    transition: all .4s;
}

.btn--topF:hover::before {
    right: 18rem;
    width: 30rem;
    background-color: var(--color-white);
}

.btn--linkF {
    border: none;
    background-color: var(--color-white);
}

.btn--linkF:hover {
    background-color: var(--color-green);
}

.btn--linkF::before,
.btn--linkF::after {
    display: none;
}

.btn--linkF .svg--link {
    width: 18rem;
    height: 18rem;
    fill: var(--color-green);
    transition: all .4s;
}

.btn--linkF:hover .svg--link {
    fill: var(--color-white);
}

@media screen and (max-width: 767.9px) {

    .btn--f {
        width: 35rem;
        height: 35rem;
    }

    .btn--topF {
        width: 280rem;
        height: 54rem;
        margin: 0 auto 20rem;
    }
}

/* link */
.link--hover {
    display: block;
    position: relative;
    overflow: hidden;
}

.link--hover:hover {
    opacity: 1;
}

.link--hover::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .5;
    transition: all 1s;
}

.link--hover:hover::after {
    opacity: 0;
}

.link--hover .img--hover {
    transition: all 1s;
    object-fit: cover;
}

.link--hover:hover .img--hover {
    transform: scale(1.1);
}


/* cardF */

.cardF__list {
    position: relative;
    margin-bottom: 240rem;
}

.cardF__list::before {
    position: absolute;
    content: "";
    height: 658rem;
    width: 100%;
    top: 97rem;
    left: 0;
    background: linear-gradient(to right, var(--color-gray-lightest) 0%,
            var(--color-gray-lightest) 83%,
            var(--color-white) 83%,
            var(--color-white) 100%);
    z-index: -1;
}

.reverse::before {
    left: unset;
    right: 0;
    background: linear-gradient(to right, var(--color-white) 0%,
            var(--color-white) 17%,
            var(--color-gray-lightest) 17%,
            var(--color-gray-lightest) 100%);
}

.cardF__container {
    display: flex;
    max-width: 1440rem;
    margin: 0 auto;
    gap: 60rem;
    justify-content: flex-end;
}

.reverse .cardF__container {
    flex-direction: row-reverse;
}

.cardF__list .text__wrapper {
    width: 540rem;
    padding-top: 207rem;
}

.cardF__img {
    width: 720rem;
}

@media screen and (max-width: 767.9px) {
    .cardF__list {
        margin-bottom: 60rem;
        background-color: var(--color-gray-lightest);
        padding-bottom: 53rem;
    }

    .cardF__list::before {
        display: none;
    }

    .cardF__container,
    .reverse .cardF__container {
        flex-direction: column-reverse;
    }

    .cardF__list .text__wrapper {
        width: 335rem;
        margin: 0 auto;
        padding-top: 22rem;
        display: flex;
        flex-direction: column;
    }



    .cardF__img {
        width: 100%;
    }
}

/* header */
.header--freshers {
    position: fixed;
    background-color: transparent;
    color: var(--color-white);
}

.pages .header--freshers,
.pages .header--freshers::after {
    transition: all .4s;
}

.header--freshers::after,
.header--freshers::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100rem;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    background-color: var(--color-white);
    z-index: -1;
}

.header--freshers .header__link {
    margin-right: auto;
    align-self: center;
    margin-left: 15rem;
}

.freshers .header__logo {
    margin: 0;
    width: 268rem;
    padding: 10rem 0;
    display: block;
}

.pages #name,
.pages #nameSub {
    fill: var(--color-white);
    transition: all .4s;
}

.menuOpen.pages #name,
.pages .bg #name {
    fill: #251714;
}

.menuOpen.pages #nameSub,
.pages .bg #nameSub {
    fill: gray;
}

.header--freshers.bg {
    color: var(--color-base);
}

.header--freshers.bg::after {
    transform: translateY(0);
}


.header--freshers .container {
    width: 1440rem;
    display: flex;
}

.hamburger--f {
    display: none;
}

.nav__lists {
    width: 564rem;
    margin-right: 36rem;
    display: grid;
    grid-template: 50rem 50rem / repeat(5, max-content);
    align-items: center;
    justify-content: space-between;
}

.nav__list:first-child {
    grid-area: 1/1/2/6;
    justify-self: flex-end;
}

.nav__link.link--f {
    padding: 10rem 0;
    display: flex;
    align-items: center;
    gap: 5rem;
    font-size: 12rem;
    font-weight: 600;
    transition: none;
}

.nav__title.link--f:hover {
    opacity: 1;
}

.nav__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    line-height: 1.45;
    padding: 7rem 0 8rem;
    transition: none;
}

.nav__title .title {
    font-weight: 600;
    font-size: 14rem;
    letter-spacing: .03em;
}

.nav__title:hover .title {
    color: var(--color-green);
}

.acc__title--f.active .title {
    color: var(--color-green);
}

.nav__title .sub {
    font-size: 10rem;
    letter-spacing: .2em;
    font-weight: normal;
    color: var(--color-white);
}

.header--freshers.bg .nav__title .sub,
.nav.active .nav__title .sub {
    color: var(--color-gray-f);
}

.header--freshers .icon--link {
    fill: var(--color-white);
    transition: all .4s;
    width: 13rem;
    height: 13rem;
}

.header--freshers.bg .icon--link {
    fill: var(--color-base);
}

.acc__contents--f {
    display: none;
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    padding: 16rem 0;
    background-color: rgba(245, 245, 245, .75);
    position: absolute;
    left: 0;
    top: 100rem;
    font-size: 14rem;
}

.nav__lists--acc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30rem;
}

.nav__list--acc:first-child {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30rem;
}

.nav__list--acc:first-child::after {
    content: "/";
    color: var(--color-base);
}

.nav__title--acc {
    font-size: 14rem;
    letter-spacing: .1em;
    display: flex;
    align-items: center;
    color: var(--color-base);
}

.link--ex {
    width: 13rem;
    margin-left: 6rem;
}

.btn--entry {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120rem;
    height: 100rem;
    font-size: 18rem;
    font-weight: 600;
    background-color: var(--color-green);
    color: var(--color-white);
}

@media screen and (max-width: 767.9px) {
    .header {
        overflow-x: initial;
    }

    .header--freshers::after,
    .header--freshers::before {
        height: 62rem;
    }

    .header--freshers::before {
        transform: translate(100%, 0);
        opacity: 0;
        transition: all .4s;
    }

    .menuOpen.pages .header--freshers::before {
        transform: translateX(0);
        opacity: 1;
    }

    .header--freshers .container {
        width: 355rem;
        margin: 0 0 0 20rem;
    }


    .header--freshers .header__link {
        margin-left: 0;
    }

    .freshers .header__logo {
        width: 179rem;
    }

    .hamburger--f {
        display: block;
        width: 62rem;
        cursor: pointer;
        transition: all .4s;
        position: relative;
        z-index: 14;
        order: 1;
        padding: 25rem 20rem;
    }

    .hamburger--f.active .hamburger__bar,
    .header--freshers.bg .hamburger__bar {
        background-color: var(--color-base);
    }

    .hamburger__bar {
        background-color: var(--color-white);
    }

    .hamburger--f.active .bar1 {
        width: 40rem;
        transform: translate(-8rem, 4rem) rotate(135deg);
    }

    .hamburger--f.active .bar3 {
        width: 40rem;
        transform: translate(-8rem, -4rem) rotate(-135deg);
    }

    .header--freshers .icon--link {
        fill: var(--color-base);
    }

    .nav {
        position: fixed;
        width: 375rem;
        min-height: calc(100vh - 62rem);
        height: 100%;
        overflow-y: auto;
        transform: translateX(100%);
        opacity: 0;
        top: 62rem;
        right: 0;
        background-color: var(--color-white);
        color: var(--color-base);
        transition: all .4s;
        padding: 25rem 20rem 100rem;
        z-index: 12;
    }

    .nav__lists {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-right: 0;
    }

    .nav.active {
        opacity: 1;
        transform: translateX(0);
    }

    .nav__list {
        width: 100%;
    }

    .nav__list:first-child {
        justify-self: flex-start;
        order: 1;
    }

    .nav__link.link--f {
        padding: 20rem 0 10rem 10rem;
        font-weight: normal;
    }

    .nav__title {
        flex-direction: row-reverse;
        justify-content: flex-end;
        font-size: 20rem;
        align-items: center;
        border-bottom: 1px solid var(--color-gray-border);
        padding: 21rem 0;
    }

    .nav__title .title {
        font-size: 20rem;
        margin-right: 18rem;
    }

    .nav__title .sub {
        font-size: 14rem;
    }

    .nav__title:hover .title,
    .acc__title--f.active .title {
        color: var(--color-base);
    }

    .nav .acc__title--f {
        position: relative;
    }

    .nav .acc__title--f::after {
        content: ">";
        position: absolute;
        font-weight: normal;
        background-color: unset;
        width: unset;
        height: unset;
        transition: all .4s;
        transform-origin: center;
        right: 4rem;
        top: 22rem;
    }

    .nav .acc__title--f.active::after {
        transform: rotate(90deg);
    }

    .acc__contents--f {
        display: block;
        width: 335rem;
        position: relative;
        background-color: unset;
        margin-left: 0;
        top: 0;
        padding-bottom: 6rem;
    }

    .nav__lists--acc {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
        padding-left: 16rem;
    }

    .nav__title--acc {
        font-size: 18rem;
    }

    .nav__list--acc:first-child::after {
        display: none;
    }

    .btn--entry {
        width: 62rem;
        height: 62rem;
        font-size: 12rem;
    }
}

@media screen and (max-width: 500px) {
    .hamburger--f.active .bar1 {
        transform: translate(-8rem, 5rem) rotate(135deg);
    }

    .hamburger--f.active .bar3 {
        transform: translate(-8rem, -5rem) rotate(-135deg);
    }
}


/* footer */
.footer--freshers {
    padding: 43rem 0;
    background-color: var(--color-base);
    
}

.footer--freshers .container {
    width: 1340rem;
    display: flex;
    align-items: center;
}

.footer--freshers .logo__link {
    margin: 0;
    width: 298rem;
}

.footer--freshers .footer__logo {
    width: 268rem;
}

.footer--freshers .btn {
    width: 280rem;
    height: 54rem;
    letter-spacing: .2em;
    background-color: var(--color-base);
}

.footer--freshers .btn:hover {
    color: var(--color-base);
    background-color: var(--color-white);
}

.footer--freshers .btn--icon {
    margin-left: 15rem;
    font-size: 12rem;
    letter-spacing: 0;
    line-height: 1.7;
    padding: 0 0 0 30rem;
    gap: 20rem;
}

.footer--freshers .icon--link {
    fill: var(--color-white);
    transition: all .4s;
    width: 13rem;
    height: 13rem;
}
.footer--freshers .icon--link.insta {
    width: 20rem;
        height: 20rem;
}
.footer--freshers .btn--icon:hover .icon--link {
    fill: var(--color-base);
}

.footer--freshers .footer__wrapper {
    margin-left: auto;
}

.footer--freshers .link--privacy {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 11rem;
    width: max-content;
    margin-left: auto;
}

.link--privacy .img--link {
    width: 13rem;
    margin-left: 6rem;
    margin-bottom: 1rem;
}

.footer--freshers .copyright {
    font-size: 12rem;
    line-height: 1;
}

@media screen and (max-width: 767.9px) {
    .footer--freshers {
        padding: 40rem 0 20rem;
    }

    .footer--freshers .container {
        flex-direction: column;
        width: 335rem;
    }

    .footer--freshers .logo__link {
        margin-bottom: 40rem;
        width: 268rem;
    }

    .footer--freshers .btn--icon {
        margin: 15rem auto 40rem;
    }

    .footer--freshers .link--privacy {
        margin-right: auto;
    }

    .footer--freshers .copyright {
        font-size: 9rem;
    }
}