body {
    background-color: var(--bg-color);
    overflow-x: hidden;
}
#about,
.hero,
#project,
#services,
#experience {
    margin-top: 10rem;
}
#about,
#project,
#services,
#experience {
    padding-top: 10rem;
}


/* HEADER */
.header {
    display: flex;
    justify-content: space-between;
    margin-top: 7rem;
    height: var(--header-height);
    align-items: center;
}
.header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: var(--bg-color);
    box-shadow: 0 .5rem .5rem 0 rgba(130, 130, 130, 0.1);
    margin-top: 0;
    padding: 0 calc((100vw - 120rem)/2);
}
.header__logo {
    display: block;
    height: 100%;
}
.header-logo__img {
    height: 100%;
}
.header__nav {
    display: flex;
    list-style: none;
    text-align: center;
}
.header-nav-list__link {
    display: block;
    text-decoration: none;
    height: calc(var(--header-height) *0.8);
    margin-left: 1rem;
    border-radius: var(--border-radius);
    background: var(--gradient-135deg-color);
}
.header-nav-list-link__text {
    display: block;
    height: inherit;
    line-height: calc(var(--header-height) *0.8);
    background: var(--bg-color);
    transition: all ease .2s;
    padding: 0 2rem;
}
.header-nav-list__link:hover .header-nav-list-link__text {
    background: none;
}
.header__menuIcon {
    display: none;
    color: white;
    font-size: 5rem;
    line-height: var(--header-height);
    padding: 0 2rem;
    margin-right: 0;
    margin-left: auto;
}
#header.OpenMenu {
    height: auto;
}


/* hero */
.hero {
    font-family: 'Suez One', serif;
    padding: 0 2rem;
}
.sticky + .hero {
   padding-top: 15rem;
}
.hero h2 {
    color: var(--text-color);
}
.hero__dot {
    color: var(--primary-color);
}



/* ABOUT */
.about__imgWrap {
    position: relative;
    display: flex;
    width: 100%;
    height: 64rem;
}
.about-img__border {
    height: 90%;
    width: 85%;
    border: 2rem solid var(--primary-color);
    border-radius: var(--border-radius);
    margin: auto auto 0 auto;
}
.about__img img {
    position: absolute;
    top: 0;
    left: 1.2rem;
    width: 40rem;
    border-radius: var(--border-radius);
}
#about .about__content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.about-content__heading {
    text-align: unset;
}
.about-content__btn {
    display: flex;
    justify-content: space-around;
}
.about__btn {
    width: 45%;
}

/* project */
.switch-block {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin: 0 2rem;
}
  
/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
  
/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s;
    outline: 2px solid white;
}
  
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
  
input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
  
/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}
  
.slider.round:before {
    border-radius: 50%;
}
.project__item {
    border-radius: 4rem;
    margin-top: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.project-item__img {
    width: 100%;
    height: 40rem;
    display: flex;
}
.project-item__img img {
    margin: auto;
    width: 90%;
    border-radius: 1rem;
    transition: .3s;
}
.project__item:hover .project-item__img img {
    transform: scale(1.03);
    filter: blur(.1rem);
}
.project-overlay {
    background: #000;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: .3s;
    
}
.project__item:hover .project-overlay {
    opacity: .5;
}
.btn-project-block {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    bottom: 14rem;
    transition: .3s;
}
.project__item:hover .btn-project-block {
    opacity: 1;
    bottom: 18rem;
}
.btn-project {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    appearance: none;
    border: 0;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    list-style: none;
    overflow: hidden;
    text-decoration: none;
    touch-action: manipulation;
    white-space: nowrap;
    height: 48px;
    padding: 0 3rem;
    margin: 0 1rem;
    font-size: 18px;
    will-change: box-shadow,transform;
    background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
    box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
    transition: .2s;
}
  
.btn-project:hover {
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
    transform: translateY(-2px);
}
.btn-project:active {
    box-shadow: #3c4fe0 0 3px 7px inset;
    transform: translateY(2px);
  }
.btn-project--viewdemo {
    background-image: radial-gradient(100% 100% at 100% 0, #ff5ae9 0, #ff54ad 100%);
}
.btn-project--viewdemo:hover {
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #cc2d50 0 -3px 0 inset;
    transform: translateY(-2px);
}
.btn-project--viewdemo:active {
    box-shadow: #cc2d50 0 3px 7px inset;
    transform: translateY(2px);
}



/* SERVICES */
.services__item {
    margin-top: 5rem;
}
.services__itemWrap {
    background: var(--gradient-color);
    display: flex;
    height: 104%;
    justify-content: center;
    align-items: center;
    box-shadow: -1rem -1rem 6rem rgba(83,170,223, .5),
    1rem 1rem 6rem rgba(72,37,191, .5);
    border-radius: var(--border-radius);
}
.services-item__content {
    border-radius: inherit;
    background-color: var(--bg-color);
    width: 96%;
    height: 96%;
}
.services-item-content__title {
    display: flex;
    align-items: center;
    padding: 2rem 3rem;
}
.services-item-content-title__icon {
    --size: 8rem;
    width: var(--size);
    height: var(--size);
    display: flex;
    background-color: white;
    border-radius: 50%;
}
.services-item-content-title__icon i{
    margin: auto;
    font-size: 6rem;
    color: var(--primary-color);
}
.services-item-content-title__heading {
    text-align: center;
    flex: 1;
}
.services-item-content-title__desc {
    padding: 0 4rem 4rem;
}



/* EXPERIENCE */
.experience__item {
    margin-top: 8rem;
    text-align: center;
}
.experience-item__img {
    height: 10rem;
}
.experience-item__img img{
    height: 100%;
}
.experience-item__desc {
    color: var(--text-color);
    margin-top: 2rem;
}



/* CONTACT */
.footer {
    background: var(--gradient-315deg-color);
    padding: 0;
    margin-top: 15rem;
    border-radius: 12rem 12rem 0 0;
}
.contact__heading {
    padding: 3rem 0;
    position: relative;
    width: 100%;
}
.contact__heading::before {
    content: '';
    position: absolute;
    display: block;
    height: 60rem;
    width: 60rem;
    background: var(--gradient-315deg-color);
    opacity: .3;
    top: -200%;
    left: -54%;
    border-radius: 50%;
}
.contact__heading::after {
    content: '';
    position: absolute;
    display: block;
    height: 60rem;
    width: 60rem;
    background: var(--gradient-135deg-color);
    opacity: .3;
    top: -200%;
    right: -54%;
    border-radius: 50%;
}
.contactWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
}
.contact__content {
    flex: 0 0 60%;
}
.contact-content__desc {
    margin-top: 1rem;
}
.contact-content__list {
    margin-top: 3rem;
    list-style: none;
}
.contact-content-list__item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.contact-content-list-item__icon {
    font-size: 3rem;
    background: var(--gradient-135deg-color);
    padding: 2rem;
    display: block;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-item);
}
.contact-content-list-item__text {
    font-size: 2rem;
    margin-left: 3rem;
    color: white;
    text-decoration: none;
}
.contact__form {
    flex: 0 0 35%;
    background: var(--gradient-135deg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-item);
    padding: 4rem;
    height: 100%;
}
.input__box {
    position: relative;
}
.input-box__input {
    width: 100%;
    padding: 2rem;
    font-size: 2rem;
    color: white;
    margin-bottom: 1rem;
    border: none;
    outline: none;
    background-color: var(--bg-color);
    border-radius: var(--border-radius);
}

.input-box__label {
    position: absolute;
    top: 2rem;
    left: 1rem;
    font-size: 1.6rem;
    font-family: 'Inter', sans-serif;
    color: white;
    transition: .2s;
}
.input-box__input:focus ~ .input-box__label,
.input-box__input:valid ~ .input-box__label {
    /* chọn những thằng trước label */
    top: .3rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
}
.textarea {
    height: 20rem;
}
.btn-send {
    background: var(--bg-color);
    border-radius: var(--border-radius);
    color: white;
    padding: 2rem 8rem;
    outline: none;
    border: none;
    font-size: 2rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-send:hover {
    background: var(--primary-color);
    box-shadow: 0 0 .1rem rgb(3, 233, 244);
    /* nhiều cái shadow, độ blur khác nhau */
    transition: all ease .2s;
}



.bottom {
    border-top: .1rem solid var(--text-color);
    display: flex;
    align-items: center;
    padding: 3rem 0;
}
.bottom__logo {
    height: 8rem;
    filter: brightness(0) invert(1);
}
.bottom__copyright {
    color: var(--text-color);
    margin: auto 9rem auto auto;
}
.bottom__social {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bottom-social__item {
    --size: 6.6rem;
    background: var(--gradient-135deg-color);
    border-radius: var(--border-radius);
    margin: 0 .6rem;
    box-shadow: var(--box-shadow-item);
    width: var(--size);
    height: var(--size);
}
.bottom-social__item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    padding: 1.8rem;

}
.bottom-social__item img ,
.bottom-social__item i {
    font-size: 3rem;
    color: white;
    width: -webkit-fill-available;
}