@import './root.css';

.icon {
    background-repeat: no-repeat;
    display: inline-block;
    background-position: center;
    height: 20px;
    width: 20px;
}

button:hover{
    cursor: pointer;
}

.round {
    position: absolute;
    z-index: 1;
    background-size: cover;
}

.icon-advanced {
    background-image: url('./imageAndSvg/navSvg/Vector.svg');
}

.icon-search {
    background-image: url('./imageAndSvg/navSvg/Search.svg');
    background-color: var(--primary-yellow);
    height: 100%;
    width: clamp(3.125rem, 3.279vw + 1.691rem, 5.625rem);
    border-radius: var(--elipse-border);
}

.icon-round1 {
    background-image: url('./imageAndSvg/section1svg/Ellipse7.svg');
    height: clamp(4.188rem, 5.492vw + 1.785rem, 8.375rem);
    width: clamp(4.188rem, 5.492vw + 1.785rem, 8.375rem);
}

.icon-round2 {
    background-image: url('./imageAndSvg/section1svg/Ellipse14.svg');
    height: clamp(2.938rem, 3.852vw + 1.252rem, 5.875rem);
    width: clamp(2.938rem, 3.852vw + 1.252rem, 5.875rem);
}

.icon-round3 {
    background-image: url('./imageAndSvg/section1svg/Ellipse8.svg');
    height: clamp(2.813rem, 3.689vw + 1.199rem, 5.625rem);
    width: clamp(2.813rem, 3.689vw + 1.199rem, 5.625rem);
}

.icon-round4 {
    background-image: url('./imageAndSvg/section1svg/Ellipse13.svg');
    height: clamp(7.375rem, 9.672vw + 3.143rem, 14.75rem);
    width: clamp(7.375rem, 9.672vw + 3.143rem, 14.75rem);
}

.icon-round5 {
    background-image: url('./imageAndSvg/section1svg/Ellipse12.svg');
    height: clamp(5.125rem, 6.721vw + 2.184rem, 10.25rem);
    width: clamp(5.125rem, 6.721vw + 2.184rem, 10.25rem);
}

.icon-hex1 {
    background-image: url('./imageAndSvg/s2-svg/Group1000001935.png');
    background-size: 100% 100%;
    left: 100%;
    top: -3px
}

.icon-hex2 {
    background-image: url('./imageAndSvg/s2-svg/Group1000001934.svg');
    left: -12px;
    top: -12px;
    background-size: 100% 100%;
}

.icon-s2-ellips1 {
    background-image: url('./imageAndSvg/s2-svg/Group1000001867.svg');
    top: -30px;
    left: -30px;
    height: 70px;
    width: 70px;
    z-index: -1;
}

.icon-s2-ellips2 {
    background-image: url('./imageAndSvg/s2-svg/Ellipse11.svg');
    background-size: 100% 100%;
    height: 130px;
    width: 130px;
    transform: var(--position-translate);
    right: -70px;
    top: 60%;
    z-index: -1;
}

.icon-s2-ellips3 {
    background-image: url('./imageAndSvg/s2-svg/Ellipse10.svg');
    background-size: 100% 100%;
    height: 90px;
    width: 90px;
    right: 4%;
    top: 15%;
}

.icon-s2-group1 {
    background-image: url('./imageAndSvg/s2-svg/Group.svg');
    height: 232px;
    width: 108px;
    background-size: contain;
    left: 3%;
    top: -70px;
}

.nav {
    position: sticky;
    top: 0;
    z-index: 999;
    /* padding: 12px 3%; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--common-white);
    box-shadow: 0 -29px 62.2px 0 var(--basic-box-sha);
    font-style: normal;
    font-weight: var(--md-font-w);
    line-height: normal;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navlist {
    display: flex;
    gap: var(--gap-nav);
    color: var(--primary-blue);
    font-size: var(--font-size-20);
}

.navlist li {
    display: flex;
    align-items: center;
}

.logo {
    color: var(--primary-blue);
    font-size: var(--font-size-24);
}

/* css for section1 */

section {
    padding: calc(var(--nav-h) - 30px) 3%;
    overflow: hidden;
}

.section1 {
    display: flex;
    gap: 20px;
}

.section1 aside {
    flex-basis: var(--circle-border);
}

.section1 .aside1 {
    margin-top: 40px;
    padding-left: 6%;
}

.aside1 h1 {
    color: var(--primary-blue);
    font-size: var(--font-size-46);
    font-weight: var(--lg-font-w);
}

.aside1 p {
    color: var(--btn-black-c);
    font-weight: var(--sm-font-w);
    font-size: var(--font-size-20);
    margin: 30px 0 33px 0;
}

.aside1 label {
    color: var(--primary-blue);
    font-weight: var(--md-font-w);
    font-size: var(--font-size-16);
    margin-bottom: 5px;
    display: inline-block;
}

.btn-group {
    display: flex;
    align-items: flex-end;
    gap: var(--gap-nav);
    flex-wrap: wrap;
}

.search-group div {
    display: flex;
    position: relative;
    width: clamp(15.625rem, 12.295vw + 10.246rem, 25rem);
}

.search-group div input {
    padding-left: 20px;
    width: 100%;
    outline: 1px solid var(--primary-blue);
    border-radius: var(--elipse-border);
    padding: var(--button-pad);
}

.search-group div input::placeholder {
    color: var(--placeholder-grey)
}

.search-group .icon {
    position: absolute;
    right: 0;
}

.grid-layout {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 40px;
}

.grid-layout div {
    position: relative;
    width: clamp(9.375rem, 1.721vw + 8.622rem, 10.688rem);
    height: clamp(13.75rem, 2.541vw + 12.638rem, 15.688rem);
    border-radius: 44px;
    box-shadow: 0px 0px 4px 0px var(--basic-box-sha);
}

.grid-layout div img {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
    border-radius: 44px;
    object-fit: cover;
}

.grid-layout div:nth-child(1),
.grid-layout div:nth-child(3) {
    margin-top: 40px;
    justify-self: end;
}

.grid-layout div:nth-child(2),
.grid-layout div:nth-child(4) {
    align-self: flex-start;
}

.grid-layout div:nth-child(1) .sideinfo {
    top: 15%;
    left: -40%;
}

.grid-layout div:nth-child(3) .sideinfo {
    bottom: 15%;
    left: -40%;
}

.grid-layout div:nth-child(4) .sideinfo {
    bottom: 15%;
    right: -40%;
}

.grid-layout div:nth-child(2) .sideinfo {
    top: 15%;
    right: -40%;
}

.grid-layout div:nth-child(2) .icon-round1 {
    transform: var(--position-translate);
    top: 13%;
    left: 90%;
}

.grid-layout div:nth-child(2) .icon-round1 .icon-round2 {
    top: 15%;
    left: 15%;
}

.grid-layout div:nth-child(4) .icon-round3 {
    transform: var(--position-translate);
    top: 90%;
    left: 80%;
}

.grid-layout div:nth-child(3) .icon-round4 {
    transform: var(--position-translate);
    top: 0;
    left: 10%;
}

.grid-layout div:nth-child(3) .icon-round4 .icon-round5 {
    top: 15%;
    right: 15%;
}

.sideinfo {
    position: absolute;
    display: inline-block;
    padding: 6px 20px;
    font-weight: var(--md-font-w);
    border-radius: 64px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0px 0px 4px 0px var(--basic-box-sha);
    backdrop-filter: blur(2px);
    width: max-content;
    line-height: 18px;
    z-index: 10;
}

.sideinfo span {
    font-size: var(--font-size-14);
}

.sideinfo p {
    font-size: var(--font-size-24);
    color: var(--primary-blue);
}

/* section2 css */

.section2 {
    text-align: center;
    position: relative;
}

.s2-layout>p:nth-child(1) {
    color: var(--primary-yellow);
    font-size: var(--font-size-20);
    font-weight: var(--md-font-w);
    position: relative;
    padding: 4px;
    width: max-content;
    margin: auto;
}

.s2-layout h1 {
    color: var(--primary-blue);
    font-weight: var(--md-font-w);
    font-size: var(--font-size-36);
}

.s2-layout>p:nth-child(3) {
    color: var(--btn-black-c);
    font-size: var(--font-size-20);
    font-weight: var(--sm-font-w);
    padding: 40px 10%;
}

.s2-aside {
    padding: 0 8%;
    display: flex;
    gap: var(--gap-nav);
}

.s2-aside>div {
    background-color: var(--common-white);
    padding: 2% 4%;
    border-radius: 34px;
    margin-bottom: 30px;
    border: 9px solid var(--common-white);
    box-shadow: 0px 0px 53.7px 0px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s2-aside>div:hover {
    background: linear-gradient(149deg, var(--faded-blue) 1.39%, var(--primary-blue) 98.61%);
    box-shadow: 0px 0px 53.7px 0px rgba(0, 0, 0, 0.06);
}

.s2-aside>div:hover p {
    color: var(--common-white) !important;
}

.s2-aside div p:nth-child(2) {
    font-size: var(--font-size-20);
    font-weight: var(--sm-font-w);
    color: var(--btn-black-c);
}

.s2-aside div>div:nth-child(1) {
    height: clamp(3.813rem, 2.103rem + 3.039vw, 5.75rem);
    width: clamp(3.813rem, 2.103rem + 3.039vw, 5.75rem);
    margin-bottom: clamp(0.625rem, -1.029rem + 2.941vw, 2.5rem);
    border-radius: var(--circle-border);
    background: linear-gradient(180deg, var(--primary-yellow) 0%, var(--faded-yellow) 100%);
    box-shadow: 0px 0px 20.7px 0px rgba(0, 0, 0, 0.13);
    display: grid;
    place-items: center;
}

.s2-box4 {
    position: relative;
    background-color: var(--common-white);
}


.s2-aside div img {
    width: clamp(1.875rem, 0.772rem + 1.961vw, 3.125rem);
    height: clamp(1.875rem, 0.772rem + 1.961vw, 3.125rem);
    object-fit: cover;
}

/* section 3 css */

.section3 {
    text-align: center;
    position: relative;
}

.s3-btn-group {
    display: flex;
    gap: var(--gap-nav);
    justify-content: center;
    flex-wrap: wrap;
}

.s3-btn-group button:hover {
    background-color: var(--primary-blue);
    color: var(--btn-white-c);
}

.s3-aside {
    display: flex;
    gap: var(--gap-nav);
    justify-content: center;
    padding: 5%;
    flex-wrap: wrap;
}

.s3-aside>div {

    min-height: clamp(23.75rem, 17.96rem + 10.294vw, 30.313rem);
    border-radius: 29px;
    width: clamp(18.75rem, 14.118rem + 8.235vw, 24rem);
    background: var(--common-white);
    padding: 1.5%;
    box-shadow: 0px 0px 18.8px 0px rgba(0, 0, 0, 0.09);
}

.s3-aside>div:nth-child(2) {
    position: relative;
}

.el-p .icon-s2-ellips2 {

    left: -20%;
    top: 90%;
    transform: rotate(-60deg);
}

.imgsup {
    position: relative;
}

.imgsup p {
    display: flex;
    padding: 6px 10px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 10;
    font-size: var(--font-size-16);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.84);

}

.imgsup p img {
    width: var(--font-size-16);
    height: var(--font-size-16);
}

.imginfo {
    width: 100%;
    height: clamp(12.5rem, 7.868rem + 8.235vw, 17.75rem);
    border-radius: 29px;
}

.info-group {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
}

.info-group dl {
    text-align: left;
    justify-self: flex-start;
}

.info-group dd {
    font-size: var(--font-size-14);
    font-weight: var(--sm-font-w);
}

.info-group dd::before {
    content: '. ';
    font-size: var(--font-size-32);
}

.info-group dt {
    font-size: var(--font-size-24);
    font-weight: var(--md-font-w);
}

.info-group span {
    display: inline-block;
    align-self: center;
    justify-self: flex-start;
    color: var(--primary-blue);
}

.img-group {
    box-sizing: content-box;
    justify-self: flex-end;
    display: flex;
    height: 50px;
    width: 50px;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px;
    padding: 8px;
    border-radius: 9px;
    border: 1px solid #ECECEC;
}

/* section 4 css */

.s-4-layout>h1 {
    position: relative;
    width: fit-content;
    margin: auto;
}

.s-4-layout>h1 img {
    width: clamp(5.875rem, 3.283rem + 4.608vw, 8.813rem);
    height: clamp(4.875rem, 2.724rem + 3.824vw, 7.313rem);
    position: absolute;
    left: -4rem;
    top: 90%;
    transform: var(--position-translate);
}

.s4-aside-layout {
    display: flex;
    gap: var(--gap-nav);
    justify-content: center;
    padding: 5%;
    flex-wrap: wrap;
}

.s4-aside-layout>div {
    width: clamp(20rem, 11.176rem + 15.686vw, 30rem);
    height: clamp(13.25rem, 7.294rem + 10.588vw, 20rem);
    background-color: var(--common-white);
    border-radius: 34px;
    box-shadow: 0px 0px 53.7px 0px rgba(48, 92, 222, 0.18);
    padding: 1.5%;
}

.s4-aside1 {
    display: flex;
    justify-content: space-between;
}

.student-profile {
    width: 90px;
    height: 90px;
    border-radius: var(--circle-border);
    border: 7px solid #FFF;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    object-fit: cover;
}

.s4-aside1 h1 {
    font-size: var(--font-size-32);
    display: flex;
    align-self: center;
    flex-direction: column;
    line-height: normal;
}

.s4-aside1 h1 span {
    font-size: var(--font-size-16);
    color: var(--btn-black-c);
    display: inline-block;
    align-self: flex-start;
}

.linked-in-img {
    align-self: flex-start;
    border-radius: 12px;
    padding: 8px;
    background: #D9E2FF;
}

.s4-aside2 {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.s4-aside2 div {
    justify-items: flex-start;
}

.s4-aside2 p {
    font-size: var(--font-size-16);
    padding: 3px 0;
}

.s4-aside2 div p:nth-child(1) {
    color: var(--placeholder-grey);
}

.s4-aside2 div img:nth-child(2) {
    width: clamp(7.25rem, 4.051rem + 5.686vw, 10.875rem);
    height: clamp(2rem, 1.173rem + 1.471vw, 2.938rem);
}




/* section 5 css */

.section5 {
    padding: 8%;
    position: relative;
    margin: 30px 0;
    text-align: center;
}

.section5::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('./imageAndSvg/section5img/a5.png');
    z-index: -1;
    opacity: 0.2;
}

.section5 h1 {
    font-size: var(--font-size-32);
    font-weight: var(--md-font-w);
    color: var(--primary-blue);
    margin-bottom: 30px;
}

.s5-layout aside {
    display: grid;
    grid-template-columns: repeat(6, auto);
    place-items: center;
    gap: 40px
}

.s5-layout aside img {
    width: 80%;
}

/* section 6 css */


.section6 .icon-s2-ellips2 {
    rotate: 180deg;
    left: -8%;
}

.icon-wave {
    position: absolute;
    background-image: url('./imageAndSvg/section6img/wavw.svg');
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    z-index: -1;
}

.icon-wave1 {
    position: absolute;
    background-image: url('./imageAndSvg/section6img/wavw2.svg');
    width: 100%;
    height: 50%;
    top: 90px;
    left: 0;
    z-index: -1;
}

.s6-aside-layout p {
    font-size: var(--font-size-20);
}

.s6-aside-layout {
    display: flex;
    gap: var(--gap-nav);
    justify-content: center;
    padding: 5% 0;
}

.s6-aside>div {
    text-align: left;
    padding: 3% 5%;
    margin-bottom: var(--gap-nav);
    width: clamp(24rem, 13.412rem + 18.824vw, 36rem);
    border-radius: 34px;
    background: var(--common-white);
    box-shadow: 0px 0px 53.7px 0px var(--basic-box-sha);
}

.star-icon {
    background-image: url('./imageAndSvg/section6img/Star.svg');
    background-size: 100% 100%;
    width: clamp(6.25rem, 3.493rem + 4.902vw, 9.375rem);
    height: clamp(6.25rem, 3.493rem + 4.902vw, 9.375rem);
    position: relative;
}

.qoute-icon {
    background-image: url('./imageAndSvg/section6img/iconoir_quote.svg');
    position: absolute;
    width: clamp(2.25rem, 1.202rem + 1.863vw, 3.438rem);
    height: clamp(2.25rem, 1.202rem + 1.863vw, 3.438rem);
    transform: var(--position-translate);
    top: 53%;
    left: 50%;
}

.profile-review {
    display: flex;
    justify-content: space-between;
}

.profile-img {
    background-image: none;
    border-radius: var(--circle-border);
    border: 7px solid #FFF;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
}

.with-out-profile {
    display: flex;
}

/* section7 css */

.section7 {
    padding: 8%;
    margin: 30px 0;
    background-image: linear-gradient(90deg, var(--primary-blue) 0%, var(--faded-blue) 100%);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px
}

.s7-aside1 {
    color: var(--common-white);
    align-self: center;
}

.s7-aside1 h1 {
    font-size: var(--font-size-40);
    font-weight: var(--lg-font-w);
}

.s7-aside1 p:nth-child(2) {
    font-size: var(--font-size-24);
    font-size: var(--sm-font-w);
    max-width: 570px;
    margin: 25px 0;
}

.s7-aside1 h2 {
    font-size: var(--font-size-24);
    font-size: var(--md-font-w);
    margin: 10px 0;
}

.s7-aside1 p:nth-child(5) {
    font-size: var(--font-size-20);
    font-size: var(--sm-font-w);
    max-width: 480px;
    margin: 25px 0 40px 0;
}

.s7-aside1 ul {
    padding-left: 35px;
    font-size: var(--font-size-20);
    font-weight: var(--sm-font-w);
    display: grid;
    gap: 8px;
    margin-bottom: 30px;
}

.s7-aside1 ul li {
    position: relative;
}

.s7-aside1 ul li::before {
    position: absolute;
    content: ' ';
    background-image: url('./imageAndSvg/section7img/hugeicons_tick-double-02.svg');
    width: 30px;
    height: 30px;
    left: -32px;
    top: -3px;
    background-position: center;
    background-size: 100% 100%;
}

.s7-aside1 span {
    display: flex;
    align-items: center;
    position: relative;
    left: 120px;
}

.s7-aside1 span img {
    width: 60px;
    height: 60px;
    border-radius: var(--circle-border);
    border: 3px solid var(--common-white);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    position: absolute;
}

.s7-aside1 span img:nth-child(3) {
    left: -120px;
}

.s7-aside1 span img:nth-child(2) {
    left: -95px;
}

.s7-aside1 span img:nth-child(1) {
    left: -70px;
}

.s7-aside2 {
    width: clamp(19.375rem, 10rem + 16.667vw, 30rem);
    border-radius: 31px;
    background: var(--common-white);
    box-shadow: 0px 0px 45px 5px rgba(13, 13, 13, 0.12);
    padding: 6% 8%;
}

.s7-aside2,
.generalform {
    display: grid;
    gap: 15px
}

.s7-aside2 h1,
.generalform button {
    justify-self: center;
}

.s7-aside2 button {
    font-size: var(--font-size-24);
    font-weight: var(--md-font-w);
    box-shadow: 0px 0px 45px 5px rgba(13, 13, 13, 0.12) !important;
}

.s7-aside2 h1 {
    color: var(--btn-black-c);
    font-size: var(--font-size-32);
    font-weight: var(--md-font-w);
}

.generalform label {
    font-size: var(--font-size-20);
    font-weight: var(--md-font-w);
}

.generalform input,
.generalform select {
    border-radius: 9px;
    background: var(--common-white);
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    display: inline-block;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
}


/* section 8 css */

.s8-aside {
    display: grid;
    grid-template-columns: repeat(3, auto);
    place-items: center;
    gap: var(--gap-nav);
    padding: 3%;
}

.s8-aside>div {
    width: clamp(17.5rem, 9.779rem + 13.725vw, 26.25rem);
    min-height: clamp(16.875rem, 9.43rem + 13.235vw, 25.313rem);
    border-radius: 34px;
    box-shadow: 0px 0px 53.7px 0px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    position: relative;
    background-color: var(--common-white);
}

.s8-aside div img:nth-child(1) {
    width: 100%;
    height: clamp(7.5rem, 4.191rem + 5.882vw, 11.25rem);
    object-fit: cover;
}

.s8-bottom-grid-layout {
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px 20px;
}

.hover-arrow {
    display: none;
}

.s8-bottom-grid-layout span {
    color: var(--placeholder-grey);
}

.s8-bottom-grid-layout span:nth-child(1) {
    justify-self: flex-start;
}

.s8-bottom-grid-layout span:nth-child(2) {
    justify-self: flex-end;
}

.s8-bottom-grid-layout h1,
.s8-bottom-grid-layout p {
    grid-column: 1/3;
    font-size: var(--font-size-20);
    text-align: left;
    color: var(--btn-black-c);
}

.s8-bottom-grid-layout p {
    font-size: var(--font-size-16);
}

.s8-aside>div:hover::after {
    position: absolute;
    content: 'Read more';
    left: 0;
    top: 0;
    color: var(--common-white);
    font-size: var(--font-size-40);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(48, 92, 222, 0.67);
    box-shadow: 0px 0px 53.7px 0px rgba(0, 0, 0, 0.10);
}

.s8-aside>div:hover .hover-arrow {
    display: inline-block;
    position: absolute;
    z-index: 10;
    transform: var(--position-translate);
    left: 50%;
    top: 65%;
    padding: 10px;
    border-radius: var(--circle-border);
    background-color: var(--common-white);
}

.s8-elp1 {
    position: absolute;
    background-image: url('./imageAndSvg/section8img/Ellipse23.svg');
    background-size: 100% 100%;
    width: clamp(17.438rem, 9.772rem + 13.627vw, 26.125rem);
    height: clamp(17.438rem, 9.772rem + 13.627vw, 26.125rem);
    right: -10%;
    bottom: -10%;
    z-index: -1;
}

.s8-elp2 {
    position: absolute;
    background-image: url('./imageAndSvg/section8img/Ellipse23.svg');
    width: clamp(13.125rem, 7.335rem + 10.294vw, 19.688rem);
    height: clamp(13.125rem, 7.335rem + 10.294vw, 19.688rem);
    transform: var(--position-translate);
    top: 50%;
    background-size: 100% 100%;
}

.s8-elp3 {
    position: absolute;
    background-image: url('./imageAndSvg/section8img/Ellipse10.svg');
    width: clamp(9.063rem, 5.037rem + 7.157vw, 13.625rem);
    height: clamp(9.063rem, 5.037rem + 7.157vw, 13.625rem);
    transform: var(--position-translate);
    top: 50%;
    right: 8%;
    background-size: 100% 100%;
}



/* section 9  || footer css */
footer {
    background-color: var(--primary-blue);
    color: var(--common-white);
}

.section9 {
    padding: 3% 8%;
}

footer>p {
    background-color: var(--dark-blue-bg);
    text-align: center;
    font-size: var(--font-size-16);
    font-weight: var(--sm-font-w);
    padding: 8px;
}

.f-aside1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid rgba(255, 255, 255, 0.27);
    padding-bottom: 30px;
}

.f-logo {
    color: var(--common-white);
    font-size: var(--font-size-36);
    font-weight: var(--lg-font-w);
    gap: 20px
}

.f-logo img {
    height: clamp(2.688rem, 1.419rem + 2.255vw, 4.125rem);
    width: clamp(2.5rem, 1.397rem + 1.961vw, 3.75rem);
}

.f-aside1 div p:nth-child(2) {
    font-size: var(--font-size-16);
    font-weight: var(--md-font-w);
    padding: 5px;
}

.f-in {
    outline: 1px solid var(--primary-yellow) !important;
}

.f-mail-p {
    margin: 8px 10px 16px 0;
}

.f-social {
    display: flex;
    gap: 15px;
}

.f-social img {
    padding: 8px;
    width: clamp(2.25rem, 1.919rem + 0.588vw, 2.625rem);
    height: clamp(2.25rem, 1.919rem + 0.588vw, 2.625rem);
    background-color: var(--dark-blue-bg);
    border-radius: 8px;
}

.f-aside2 {
    padding-top: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.f-aside2 dl:nth-child(2) {
    justify-self: center;
}

.f-aside2 dl {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.f-aside2 dl dt {
    font-size: var(--font-size-24);
    font-weight: var(--md-font-w);
}

.f-aside2 dl dd {
    font-size: var(--font-size-16);
    font-weight: var(--sm-font-w);
}



/* responsive css */


@media (max-width: 1120px) {
    .s8-aside {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 950px) {

    .img-group {
        display: none;
    }

    .info-group dl {
        grid-column: 1/3;
    }

    .section1 {
        flex-direction: column;
    }


    .section1 .aside1 {
        padding: 0 30px;
        margin: 0;
        text-align: center;
    }

    .btn-group {
        justify-content: space-evenly;
    }



    .grid-layout div {
        width: 55%;
        height: clamp(13.75rem, 3.036rem + 28.571vw, 20rem);

    }

    .s2-aside {
        flex-direction: column;

    }

    .s2-aside>div {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }

    .s2-aside div img {
        margin: 0;
    }





    .s5-layout aside {
        grid-template-columns: repeat(3, auto);
    }

    .s5-layout aside img {
        width: 60%;
    }


    .s6-aside-layout {
        flex-direction: column;
    }

    .s6-aside>div {
        width: 100%;
    }

    .section7 {
        grid-template-columns: auto;
    }

    .s7-aside1 {
        margin: auto;
        margin-bottom: 40px;
    }

    .s7-aside2 {
        width: 100%;
    }

    .s7-aside2 form {
        display: grid;
        grid-template-columns: auto auto;
    }

    .s7-aside2 form button {
        width: 100%;
        align-self: flex-end;
    }


    .f-aside2 {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px
    }

    .f-aside2 dl:nth-child(1) {
        grid-column: 1 / 4;
    }

    .f-aside2 dl:nth-child(2) {
        justify-self: start;
    }


}

@media (max-width:600px) {
    .grid-layout div {
        width: clamp(6.25rem, 6.25rem + 8.333vw, 9.375rem);
        height: clamp(9.375rem, 9.375rem + 11.667vw, 13.75rem);
    }


    .search-group {
        width: 100%;
        align-items: center;
    }

    .search-group div {
        width: 100%;
    }

    .btn-group .btn {
        display: none;
    }

    .section1 .aside2 {
        transform: scale(0.8);
    }

    .section1,
    .section1 .aside1 {
        padding-bottom: 0;
        margin-bottom: 0;
    }


    .s5-layout aside {
        grid-template-columns: repeat(2, auto);
    }

    .s7-aside1 span {
        display: none;
    }

    .s7-aside2 form {
        grid-template-columns: auto;
    }

    .f-aside1 {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .s8-aside {
        grid-template-columns: 1fr;
    }
}

@media (max-width:400px) {


    .icon-s2-group1 {
        display: none;
    }

    .section1 .aside2 {
        transform: scale(0.7);
    }

    .s5-layout aside {
        grid-template-columns: 1fr;
    }

    .s5-layout aside img {
        width: 30%;
    }

    .f-aside2 {
        grid-template-columns: 1fr;
    }

    .f-aside2 dl:nth-child(1) {
        grid-column: initial;
    }

    .f-aside2 dl:nth-child(2) {
        justify-self: center;
    }

    .f-aside2 dl {
        text-align: center;
    }
}