@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:wght@400..700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

::selection {
    background-color: #d6d5d0;
    color: #636161;
}

:root {
    --black: #24272c;
    --black2: #393E46;
    --white: #F6F5F2;
}

body {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #121212;
    transition: 0.4s ease;
    overflow: hidden;
}

.sections {
    height: 90%;
    width: 95%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 20% 80% 22% 78% / 71% 16% 84% 29%;
    box-shadow: 0 0 30px #747272;
    position: relative;
    transition: 0.650s ease;
}

/* ---------------------------------- Welcome ---------------------------------- */

@keyframes welcomeContentAnimation {
    from {opacity: 1;}
    to {opacity: 0;}
}

.welcome {
    background-color: #2e2e2e;
    border-radius: 20% 80% 22% 78% / 71% 16% 84% 29%;
    box-shadow: 0 0 30px #2e2e2e;
}

@keyframes welcomeLeftTextAnimation {
    from {transform: translateX(-1400px);}
    to {transform: translateX(0px);}
}
@keyframes welcomeLeftTextAnimationReverse {
    from {transform: translateX(0px);}
    to {transform: translateX(-1400px);}
}


@keyframes welcomeRightTextAnimation {
    from {transform: translateX(1400px);}
    to {transform: translateX(0px);}
}
@keyframes welcomeRightTextAnimationReverse {
    from {transform: translateX(0px);}
    to {transform: translateX(1400px);}
}


@keyframes welcomeBottomTextAnimation {
    from {transform: translateY(1000px);}
    to {transform: translateY(0px);}
}
@keyframes welcomeBottomTextAnimationReverse {
    from {transform: translateY(0px);}
    to {transform: translateY(1000px);}
}

@keyframes welcomeTextAnimation {
    0% {opacity: 0; transform: scale(0.2); color: #121212; text-shadow: none;}
    10% {opacity: 1; transform: scale(1.2); color: #121212; text-shadow: none;}
    20% {opacity: 1; transform: scale(1); color: #121212; text-shadow: none;}
    25% {color: #bb86fc; text-shadow: 0 0 30px rgb(187, 134, 252, 0.8);}
    45% {color: #121212; text-shadow: none;}
    65% {color: #121212; text-shadow: none;}
    100% {color: #bb86fc; text-shadow: 0 0 30px rgb(187, 134, 252, 0.8);}
}

.welcome-title {
    column-gap: 8px;
    font-size: 35px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    color: #727379; 
}

.welcome-title-right {
    animation-name: welcomeRightTextAnimation;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-iteration-count: 1;

}

.welcome-title-left {
    animation-name: welcomeLeftTextAnimation;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
}

.welcome-name {
    font-size: 80px;
    column-gap: 20px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    position: relative;
    height: 205px;
    width: 760px;
    color: #E0E0E0;
    z-index: 2;
}

.welcome-name-bottom {
    position: absolute;
    bottom: 0;
    animation-name: welcomeBottomTextAnimation;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
}

.welcome-name-left {
    position: absolute;
    top: 0;
    left: 0;
    animation-name: welcomeLeftTextAnimation;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
}

.welcome-name-right {
    position: absolute;
    top: 0;
    right: 0;
    animation-name: welcomeRightTextAnimation;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
}

/* #00ADB5 */
.welcome-text {
    position: absolute;
    bottom: 140px;
    font-size: 14px;
    color: rgb(187, 134, 252, 1);
    text-shadow: 0 0 30px rgb(187, 134, 252, 0.8);
    animation-name: welcomeTextAnimation;
    animation-delay: 1.1s;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    transition: 0.5s ease;
}

@keyframes welcomeHideAnimation {
    from {opacity: 1;}
    to {opacity: 1;}
}

.welcome-text-hide {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100px;
    width: 300px;
    background-color: #2e2e2e;
    animation-name: welcomeHideAnimation;
    animation-duration: 1.1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    opacity: 0;
}


/* ---------------------------------- About ---------------------------------- */

@keyframes aboutAnimation {
    from {transform: translateX(-100%);}
    to {transform: translateX(0);}
}

@keyframes aboutAnimationReverse {
    0% {transform: translateX(0);}
    50% {transform: translateX(-10%);}
    100% {transform: translateX(100%);}
}

.about {
    background-color: #2e2e2e;
    box-shadow: 0 0 30px rgb(187, 134, 252, 0.5);
    border-radius: 16% 84% 14% 86% / 96% 5% 95% 4%;
    flex-direction: row;
    animation-name: aboutAnimation;
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    position: relative;
}

.about-img {
    height: 570px;
}

.about-timer {
    position: absolute;
    bottom: 100px;
    font-size: 22px;
    color: #7c7979;
    font-weight: 500;
    text-shadow: 0 0 10px #7c7979;
    font-family: "Space Grotesk", sans-serif;
}

.about-left {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    
}

.about-left-header {
    font-size: 50px;
    font-weight: 600;
    color: #E0E0E0;
    text-shadow: 0 0 5px #E0E0E0;
    text-align: center;
    margin-left: 20%;
    margin-bottom: 10px;
}

.about-left-txt {
    margin-left: 20%;
    height: 60%;
    font-size: 22px;
    color: #979090;
    text-align: left;

}

@keyframes aboutRight {
    from {opacity: 0;}
    to {opacity: 1;}
}

.about-right {
    width: 50%;
    height: 100%;
    animation-name: aboutRight;
    animation-duration: 7s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
}


/* ---------------------------------- Works ---------------------------------- */

.works {
    width: 100%;
    height: 100%;
    position: relative;
}

.works-frame {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    
}

@keyframes worksFrameCenter {
    from {opacity: 0;}
    to {opacity: 1;}
}

.works-frame-center {
    width: 92%;
    height: calc(100% - 90px);
    display: flex;
    align-items: start;
    justify-content: center;
    animation-name: worksFrameCenter;
    animation-delay: 6s;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    opacity: 0;
    border-top: 2px solid #bb86fc;
    border-left: 2px solid #bb86fc;
    border-right: 2px solid #bb86fc;
    border-radius: 3px;
    transition: 0.8s ease;
}

.works-frame-center-iframe {
    border: none;
    background-color: #ffffff;
}


@keyframes worksHeader {
    0% {transform: translateY(-100%);}
    20% {transform: translateY(0); height: 100%;}
    100% {height: 90px;}
}

.works-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #bbbaba;
    text-shadow: 0 0 5px #bbbaba;
    background-color: #121212;
    font-weight: 600;
    font-size: 40px;
    animation-name: worksHeader;
    animation-duration: 4s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    height: 90px;
    transition: 0.8s ease;
}

.works-frame-sides {
    font-size: 40px;
    width: 4%;
    height: calc(100% - 90px);
    color: #E0E0E0;
    background: linear-gradient(180deg, rgba(18,18,18,1) 0%, rgba(18,18,18,1) 50%, rgba(92,90,90,1) 100%);
    text-shadow: 0 0 10px #E0E0E0;
    cursor: pointer;
    transition: 0.8s ease;

}

@keyframes worksFrameLeft {
    from {transform: translateX(-100%); opacity: 1;}
    to {transform: translateX(0); opacity: 1;}
}

@keyframes worksFrameRight {
    from {transform: translateX(100%); opacity: 1;}
    to {transform: translateX(0); opacity: 1;}
}

@keyframes leftArrow {
    0% {transform: translateX(0px);}
    25% {transform: translateX(-5px);}
    50% {transform: translateX(0px);}
    75% {transform: translateX(5px);}
    100% {transform: translateX(0px);}
}
@keyframes rightArrow {
    0% {transform: translateX(0px);}
    25% {transform: translateX(5px);}
    50% {transform: translateX(0px);}
    75% {transform: translateX(-5px);}
    100% {transform: translateX(0px);}
}

.works-frame-left {
    animation-name: worksFrameLeft;
    animation-delay: 4s;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    opacity: 0;
}

.works-frame-right:hover .works-arrow-right {
    animation-name: rightArrow;
    animation-duration: 0.6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.works-frame-right {
    animation-name: worksFrameRight;
    animation-delay: 5s;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    opacity: 0;
}

.works-frame-left:hover .works-arrow-left {
    animation-name: leftArrow;
    animation-duration: 0.6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


/* ---------------------------------- Works 2 ---------------------------------- */

.works2 {
    width: 100%;
    height: 100%;
    position: relative;
}

.works2-frame {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

@keyframes works2FrameCenter {
    from {opacity: 0;}
    to {opacity: 1;}
}

.works2-frame-center {
    width: 88%;
    height: calc(100% - 90px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation-name: works2FrameCenter;
    animation-delay: 6s;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    opacity: 0;
    background: transparent;
    transition: 0.8s ease;

}

.works2-frame-center-img {
    border-radius: 30px;
    box-shadow: 0 0 20px rgb(187, 134, 252, 0.8);
}


@keyframes works2Header {
    0% {transform: translateY(-100%);}
    20% {transform: translateY(0); height: 100%;}
    100% {height: 90px;}
}

.works2-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #bbbaba;
    text-shadow: 0 0 5px #bbbaba;
    background-color: transparent;
    font-weight: 600;
    font-size: 40px;
    animation-name: works2Header;
    animation-duration: 4s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    height: 90px;
    transition: 0.8s ease;
}

.works2-frame-sides {
    font-size: 40px;
    width: 6%;
    height: calc(100% - 90px);
    color: #E0E0E0;
    background-color: transparent;
    text-shadow: 0 0 10px #E0E0E0;
    cursor: pointer;
    transition: 0.8s ease;
}

@keyframes works2FrameLeft {
    from {transform: translateX(-100%); opacity: 1;}
    to {transform: translateX(0); opacity: 1;}
}

@keyframes works2FrameRight {
    from {transform: translateX(100%); opacity: 1;}
    to {transform: translateX(0); opacity: 1;}
}

@keyframes leftArrow2 {
    0% {transform: translateX(0px);}
    25% {transform: translateX(-5px);}
    50% {transform: translateX(0px);}
    75% {transform: translateX(5px);}
    100% {transform: translateX(0px);}
}
@keyframes rightArrow2 {
    0% {transform: translateX(0px);}
    25% {transform: translateX(5px);}
    50% {transform: translateX(0px);}
    75% {transform: translateX(-5px);}
    100% {transform: translateX(0px);}
}

.works2-frame-left {
    animation-name: works2FrameLeft;
    animation-delay: 4s;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    opacity: 0;
}

.works2-frame-right:hover .works2-arrow-right {
    animation-name: rightArrow2;
    animation-duration: 0.6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.works2-frame-right {
    animation-name: works2FrameRight;
    animation-delay: 5s;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    opacity: 0;
}

.works2-frame-left:hover .works2-arrow-left {
    animation-name: leftArrow2;
    animation-duration: 0.6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}



/* ---------------------------------- Skills ---------------------------------- */

@keyframes skillsAnimaton {
    from {transform: translateY(200%);}
    to {transform: translateY(0);}
}

@keyframes skillsAnimatonReverse {
    0% {transform: rotateZ(0deg) translateY(0);}
    20% {transform: rotateZ(15deg) translateY(0);}
    100% {transform: rotateZ(15deg) translateY(200%);}
}

.skills {
    border-radius: 14% 86% 38% 62% / 54% 5% 95% 46%;
    background-color: #2e2e2e;
    box-shadow: 0 0 30px #2e2e2e;
    transform-origin: center;
    animation-name: skillsAnimaton;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
}

.skills-header {
    position: absolute;
    top: 50px;
    color: #979090;
    font-size: 50px;
    font-family: "Space Grotesk", sans-serif;
}

.skills-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    row-gap: 20px;
    width: 100%;
}


@keyframes skillsItemsAnimaton {
    from {transform: translateX(200%);}
    to {transform: translateX(0);}
}

@keyframes skillsItemsAnimatonReverse {
    from {transform: translateX(0);}
    to {transform: translateX(200%);}
}

.skills-items-container {
    display: flex;
    align-items: center;
    column-gap: 20px;
    width: 38%;
    position: relative;
    animation-name: skillsItemsAnimaton;
    animation-delay: 1s;
    animation-duration: 2.5s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    opacity: 0;
}

.skills-items-container2 {
    animation-delay: 1.2s;
}

.skills-items-container3 {
    animation-delay: 1.4s;
}

.skills-items-container4 {
    animation-delay: 1.6s;
}

.skills-items-container5 {
    animation-delay: 1.8s;
}

.skills-items-container6 {
    animation-delay: 2s;
}


.skills-list-container {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0px;
    width: 100%;
}

.skills-list-icon {
    height: 60px;
    width: 60px;
    background-color: #414040;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.skills-list-icon2 {
    height: 42px;
    width: 42px;
    background-color: #a5a5a5;
    border-radius: 100%;
    outline: #e0b369 solid 2px;
    outline-offset: 3px;
}

@keyframes Centera {
    from {width: 100%;}
    to {width: 0;}
}

.skill-list-center-container {
    position: absolute;
    left: 0;
    height: 60px;
    width: 650px;
}

.skill-list-center {
    position: relative;
    height: 60px;
    width: 100%;
    animation-name: Centera;
    animation-delay: 4.5s;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    transition: 1.5s ease;
}

.skills-list-icon-center {
    position: absolute;
    left: 30px;
    width: 100%;
    height: 60px;
    background-color: #414040;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skills-icon2-center {
    width: 100%;
    height: 42px;
    background-color: #a5a5a5;
    position: relative;
}

.skills-icon2-center::before {
    content: "";
    background-color: #e0b369;
    width: 100%;
    height: 2px;
    position: absolute;
    top: -5px;
}

.skills-icon2-center::after {
    content: "";
    background-color: #e0b369;
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: -5px;
}

.skills-list-icon-center-position {
    position: absolute;
    right: -60px;
}

.skills-list-center-right-icon {
    background: linear-gradient(to right, transparent 50%, #414040 50%);
}

.skills-list-center-right-icon2 {
    background: linear-gradient(to right, transparent 50%, #a5a5a5 50%);
    outline-color: linear-gradient(to right, transparent 50%, #e0b369 50%);
}

.skills-text {
    font-size: 50px;
    font-weight: 500;
    font-family: "Sour Gummy", sans-serif;
    color: #d4d3d3;
    width: 100%;
}

.skills-text2 {
    font-size: 35px;
    font-weight: 300;
    font-family: "Kanit", sans-serif;
    color: #e0b369;
}


/* ---------------------------------- Contact ---------------------------------- */

.contact {
    border-radius: 23% 77% 14% 86% / 85% 4% 96% 15%;
    background-color: #2e2e2e;
    box-shadow: 0 0 30px #3a3a3a;
    animation-name: aboutAnimation;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
}

@keyframes contactTextAnimation {
    0% {color: #121212; text-shadow: none;}
    10% {color: #121212; text-shadow: none;}
    20% {color: #121212; text-shadow: none;}
    25% {color: rgb(187, 134, 252, 1); text-shadow: 0 0 60px rgb(187, 134, 252, 0.8);}
    45% {color: #121212; text-shadow: none;}
    65% {color: #121212; text-shadow: none;}
    100% {color: rgb(187, 134, 252, 1); text-shadow: 0 0 60px rgb(187, 134, 252, 0.8);}
}

.contact-header {
    font-size: 120px;
    color: #121212;
    text-shadow: none;
    animation-name: contactTextAnimation;
    animation-delay: 1s;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    transition: 0.5s ease;
    letter-spacing: 20px;
    height: 25%;
    font-family: "Sour Gummy", sans-serif;
}

.contact-items {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 30px;
}

@keyframes contactInstagramAnimation {
    0% {text-shadow: 0 0 10px #f5852a;}
    25% {text-shadow: 0 0 10px #de2a7b;}
    50% {text-shadow: 0 0 10px #8335b0;}
    75% {text-shadow: 0 0 10px #505bd4;}
    100% {text-shadow: 0 0 10px #f5852a;}
}

@keyframes contactSiteAnimation {
    0% {text-shadow: 0 0 10px #85d4ff;}
    50% {text-shadow: 0 0 10px #e683fc;}
    100% {text-shadow: 0 0 10px #85d4ff;}
}

@keyframes contactWpAnimation {
    0% {text-shadow: 0 0 10px #25d366;}
    50% {text-shadow: 0 0 10px #ffffff;}
    100% {text-shadow: 0 0 10px #25d366;}
}

@keyframes contactPhoneAnimation {
    0% {text-shadow: 0 0 10px #24a8e0;}
    50% {text-shadow: 0 0 10px #ffffff;}
    100% {text-shadow: 0 0 10px #24a8e0;}
}

@keyframes contactMailAnimation {
    0% {text-shadow: 0 0 10px #ffffff;}
    50% {text-shadow: 0 0 10px #eb4131;}
    100% {text-shadow: 0 0 10px #ffffff;}
}

.contact-item-container {
    height: 105px;
    width: 105px;
    background-color: #414040;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
    box-shadow: 0 0 15px rgba(224, 224, 224, 0.4);
    position: relative;
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 60px;
    background: linear-gradient(0deg, rgba(255,219,120,1) 0%, rgba(245,133,42,1) 25%, rgba(222,42,123,1) 50%, rgba(131,53,176,1) 75%, rgba(80,91,212,1) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-item-container:hover {
    transform: scale(1.2);
}

.contact-item-description-container {
    position: absolute;
    top: 100%;
    height: calc(140px + 30%);
    width: 200px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.contact-item-description {
    height: 140px;
    width: 100%;
    background-color: rgb(65, 64, 64, 0.7);
    box-shadow: 0 0 10px #636161;
    border-radius: 10px;
    margin-top: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #bebcbc;
    font-size: 20px;
    padding: 10px;
}

@keyframes contactItemDescriptionAnimation {
    from {transform: translateY(-30%);}
    to {transform: translateY(0);}
}

.contact-item-container:hover .contact-item-description-container {
    visibility: visible;
    opacity: 1;
    animation-name: contactItemDescriptionAnimation;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
}

.contact-instagram {
    animation-name: contactInstagramAnimation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    text-shadow: 0 0 15px white;
}

.contact-phone {
    animation-name: contactPhoneAnimation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    text-shadow: 0 0 15px white;
}

.contact-mail {
    animation-name: contactMailAnimation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    text-shadow: 0 0 10px white;
}

.contact-whatsapp {
    animation-name: contactWpAnimation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    text-shadow: 0 0 15px white;
}

.contact-site {
    animation-name: contactSiteAnimation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    text-shadow: 0 0 15px white;
}



.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.animation-reverse {
    animation-direction: reverse;
    animation-iteration-count: 1;
    animation-delay: 0.1s;
}

.display {
    display: none;
}

@media only screen and (max-width: 1600px) {
    .about-left-txt {font-size: 19px;}
    .about-img {height: 500px;}
    .about-timer {font-size: 18px;}
    .skills-items-container {width: 45%;}
}