:root {
    --p-color: 225, 0, 255;
    --s-color: 240, 142, 105;
    --sd-color: #551C98;
    --a-color: #e74c3c;
    --t-color: #C6C6C6;
    --b-color: #010108;
    --wwa-color: #C995F9;
    --services: #251C30;
    --f-color: #292929;
    font-family: 'Inter', sans-serif;


}

@supports (font-variation-settings: normal) {
    :root {
        font-family: 'Inter var', sans-serif;
    }
}
html{
    scroll-behavior: smooth;
}
* {
    color: #fff;
    text-decoration: none !important;
    transition: 0.3s ease-in-out all;
    font-family: 'Inter';
}

body {
    background: #000;
}

ul li {
    list-style: none;
}

/*---- header -----*/
.header {
    padding-top: 17rem;
    background: url(../images/header-background.jpg) no-repeat;
    background-size: cover;
    text-align: center;
}

.header h1 {
    font-family: 'Inter';
    font-weight: 900;
    text-align: center;
    font-size: 50px;
}

.header h1 span {
    background: linear-gradient(235.81deg, rgba(var(--p-color), 1) 20.53%, rgba(var(--s-color, 1)) 86.31%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

#vp {
    font-weight: 700;
    margin: 2rem 0;
    color: #fff;
    background: rgba(var(--s-color), 1);
    padding: 12px 36px 12px 36px;
    border-radius: 20px;
    display: inline-block;
}

#vp:hover {
    padding-inline: 50px;
    opacity: 0.7;
    color: #fff;
    /*transform: skew(5deg);*/
    border-radius: 5px 20px;

}

.header-items {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

#hd-item img {
    width: 80px;
    height: 80px;
    padding: 15px;
    border-radius: 30%;
    border: 2px solid #fff;
    background: linear-gradient(239.33deg, rgba(var(--p-color), 1) 3.46%, rgba(var(--s-color), 1) 92.21%);
    box-shadow:
        0px 0px 30px 0px #7F43FF,
        0px 0px 4px 0px #FFFFFF38 inset;
}

#hd-item p {
    background: linear-gradient(180deg, #1B0F4E 0%, rgba(27, 15, 78, 0) 100%);
    box-shadow: 0px -21px 30px 0px #7F43FF99;
    border-radius: 15px 15px 0 0;
    font-size: 16px;
    color: var(--t-color);
    padding: 2rem 5rem;
    margin-top: 3rem;
    margin-bottom: 0;
}

#hd-item:hover img {
    opacity: 0.7;
    border-radius: 45%;
}

#hd-item:hover p {
    box-shadow: 0px -21px 30px -5px #7F43FF99;
    padding-top: 1rem;
    padding-bottom: 3rem;
}

#header-end {
    padding-top: 7rem;
    padding-bottom: 1rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) -13.21%, #000000 100%);
}

#header-end p {
    font-weight: 400;
    line-height: .36px;
    color: var(--t-color);
    margin-bottom: 2rem;
}

#header-end i {
    border-radius: 100%;
    padding: 7px;
    border: 1px solid #fff;
}

#header-end:hover i {
    color: #fdfdfd;
}

#header-end:hover p {
    font-size: 17px;
    color: #FDFDFD;
    margin-bottom: 1.6rem;
}

#header-end a:hover i {
    opacity: 0.8;
    rotate: calc(360deg);
}

/*----- who we are */
.who-we-are {
    padding-top: 2rem;
    background: var(--b-color);
}

#wwa-title {
    display: flex;
    align-items: center;
    margin: 50px auto;
}

#wwa-title p:first-child {
    color: rgba(var(--s-color), 1);
    font-weight: 400;
}

#wwa-title span {
    color: #fff;
}

#wwa-title #line {
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) -1.52%, rgba(0, 0, 0, 0) 109.98%);
    width: 50%;
    margin-left: 1rem;
}

#wwa-center {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

#wwa-center img {
    height: 57px;
    width: 57px;
    background: var(--sd-color);
    padding: 12px;
    border-radius: 50%;
    box-shadow: 0px 0px 30px 0px #7F43FF, 0px 0px 4px 0px #FFFFFF inset;
    margin-right: 2rem;
}

#wwa-center #text {
    width: 90%;
    margin-bottom: 6rem;
}

#wwa-center #text h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 2rem;
}

#wwa-center #text h1 span {
    background: linear-gradient(235.81deg, rgba(var(--p-color), 1) 20.53%, rgba(var(--s-color), 1) 86.31%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

#wwa-center #text p {
    font-size: 20px;
    color: var(--t-color);
}

#wwa-end {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: 11rem;
}

#image-container {
    position: relative;
    width: 500px;
    height: auto;
    display: inline-block;
}

#main-image {
    width: 100%;
    height: auto;
    border-radius: 20px;
    position: relative;
    z-index: 1;
}

#image-container::before {
    content: "";
    position: absolute;
    top: -16px;
    left: -26px;
    width: 110%;
    height: 110%;
    background: linear-gradient(20deg, rgba(var(--p-color), 1) 3.46%, rgba(var(--s-color), 1) 92.21%);
    box-shadow: -1.15px 1.84px 5.35px 0px rgba(var(--s-color), 1)0E,
        -5.06px 8.08px 11.08px 0px rgba(var(--s-color), 1)16,
        -12.42px 19.83px 22.1px 0px rgba(var(--s-color), 1)1C,
        -23.93px 38.19px 43.32px 0px rgba(var(--s-color), 1)22,
        -40.27px 64.26px 79.65px 0px rgba(var(--s-color), 1)2B,
        -62.12px 99.14px 136px 0px rgba(var(--s-color), 1)38;
    border-radius: 10px;
    transform: rotate(-3deg);
    transition: 0.2s ease-in-out all;
}

#image-container:hover::before {
    transform: rotate(0deg);
}

#image-container:hover img {
    opacity: 0.7;
    transform: rotate(-3deg);
}

#wwa-left p {
    color: var(--t-color);
    font-size: 20px;

}

#wwa-left ul {
    padding-left: 2.2px;
}

#wwa-left ul li {
    display: flex;
    flex-direction: row;
    align-items: baseline;

}

#wwa-left ul li i {
    color: var(--wwa-color);
    margin-right: 1rem;
    scale: 1.6;
}

#wwa-left ul li:hover {
    opacity: 0.7;
    transform: scale(1.01);
}

#wwa-left h4 {
    color: var(--wwa-color);
}

/*----- services ------*/

.services {
    position: relative;
    background: var(--services);
    overflow: hidden;
    text-align: center;
}

.services::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/service/bg.png') no-repeat center center;
    background-size: auto;
    z-index: 0;
}

.services .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.services #title {
    display: flex;
    align-items: center;
    margin: 50px auto;
    color: rgba(var(--s-color), 1);
    font-weight: 400;
}

.services #title span {
    margin-left: 1rem;
    color: var(--t-color);
}

#sname span,
#highlight {
    background: linear-gradient(235.81deg, rgba(var(--p-color), 1) 20.53%, rgba(var(--s-color), 1) 86.31%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

#stext {
    width: 50%;
    line-height: 25px;
    color: var(--t-color);
    margin: 3rem auto;
}

#ser-items {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, 63%);
    margin-bottom: 6rem;
    justify-content: center;
}

#sitem {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
}

#sitem img {
    width: 50px;
    height: 50px;
}

#sitem h3 {
    background: linear-gradient(180deg, rgba(var(--p-color), 1) 0%, rgba(var(--s-color), 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 20px;
}

#sitem a {
    font-style: italic;
    color: #fff;
}

#sitem i {
    font-style: italic;
}

#sitem a:hover {
    opacity: 0.7;
}

#sitem a:hover i {
    margin-left: 15px;
}

/*--------- Process -------*/
.process {
    background: url(../images/header-background.jpg) no-repeat;
    background-size: cover;
    padding-bottom: 6rem;
}

.process #p-title {
    display: flex;
    align-items: center;
    padding: 3rem 0px;
    justify-content: flex-end;
}

.process #p-title p {
    color: rgba(var(--s-color), 1);
    font-weight: 400;
}

.process #p-title span {
    color: #fff;
}

.process #p-title #line {
    height: 1px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.5) -1.52%, rgba(0, 0, 0, 0) 109.98%);
    width: 80%;
    margin-right: 2rem;
}

.process #p-text {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: right;
}

.process #p-left {
    width: 40%;
    margin-right: 2rem;
}

.process #p-left h1 {
    font-weight: 700;
}

.process #p-left p {
    color: var(--t-color);
    font-size: 20px;
    line-height: 31px;
    margin-left: 2rem;
}

.process #p-right {
    width: 57px;
    height: 57px;
    border-radius: 50%;
    background: #3A8C7E;
    box-shadow: 0px 0px 30px 0px #2E9F8B, 0px 0px 4px 0px #FFFFFF inset;
    object-fit: none;
}

#pro-items {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#pro-item {
    position: relative;
    width: 48%;
    margin-top: -3rem;
    display: flex;
    align-items: center;
}

#pro-item::before {
    content: "";
    position: absolute;
    width: 70%;
    height: 70%;
    border: 1px solid rgba(var(--s-color), 1);
    border-radius: 70px 0;
    border-top: none;
    border-left: none;
    right: 0;
    top: 7rem;
}

#pro-item:nth-child(odd) {
    align-self: flex-start;
}

#pro-item:nth-child(even) {
    align-self: flex-end;
}

/*-----testimonials ------*/
.testimonials {
    background-color: #000000;
}


#testo-title {
    display: flex;
    align-items: center;
    padding: 2rem 0;
}

#testo-title p {
    color: rgba(var(--s-color), 1);
    font-weight: 400;
}

#testo-title span {
    color: #fff;
}

#testo-title #line {
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) -1.52%, rgba(0, 0, 0, 0) 109.98%);
    width: 50%;
    margin-left: 1rem;
}

#testo-description {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

#testo-left {
    background: #E64467;
    box-shadow: 0px 0px 30px 0px #E64467, 0px 0px 4px 0px #FFFFFF inset;
    width: 57px;
    height: 57px;
    border-radius: 50%;
    object-fit: none;
    margin-right: 2rem;
}

#testo-right p {
    font-size: 20px;
    color: var(--t-color);
    width: 50%;
    line-height: 24px;
    margin-top: 2rem;
}

#testo-right #vp {
    margin: 1rem 0;
}

#single-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#single-person {
    width: 103px;
    height: 103px;
    border-radius: 100%;
    z-index: 1;
}

#single-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 95%;
    background: linear-gradient(0deg, #161E25, #161E25);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    margin-top: -3rem;
    padding-top: 3rem;
}


#single-box i {
    font-size: 50px;
    color: rgba(var(--s-color), 1);
    margin: 1rem 0;
}

#single-box h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    margin: 1rem 0;
}

#single-box h3 {
    color: var(--t-color);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    margin-top: 2rem;
}

#single-box p {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
}

/*------ contact -------*/
.contact {
    background-color: #000;
    padding: 2rem 0;
}

.contact h1 {
    font-size: 64px;
    font-weight: 700;
    margin: 1rem 0;
}

#contact-items {
    display: flex;
    margin: 1rem 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#contact-items>div {
    width: 45%;
}

#contact-form {
    height: 550px;
    width: 550px;
    border-radius: 25px;
}

#contact-right {
    position: relative;
    width: 100%;
    height: 550px;
    background-image: url('../images/contact/background.png');
    background-size: cover;
    background-position: center;
    border-radius: 25px;
}

#contact-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(var(--p-color), 0.7) 32%, rgba(var(--s-color), 0.7) 50%);
    z-index: 1;
    border-radius: 25px;
}

#con-con {
    margin-top: 50%;
    z-index: 2;
    color: #fff;
    text-align: center;
    padding: 20px;
    top: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: fit-content;
    justify-content: center;
}


#con-con img {
    position: relative;
    width: 103px;
    height: 103px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 2rem;
}

#con-con h4 {
    color: white;
    font-size: 20px;
    line-height: 24px;

}

#con-con p {
    color: white;
    font-size: 16px;
    line-height: 19px;

}

.consult {
    padding: 2rem 0;
    background: linear-gradient(#000 60%, var(--f-color) 30%);
}

.consult .container {
    background: linear-gradient(230deg, rgba(var(--p-color), 1) 40%, rgba(var(--s-color), 1) 70%);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
}

.consult h1:first-child {
    font-size: 43px;
    font-weight: 700;
    line-height: 63px;
}

.consult h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 54px;
}

.consult #con-buttons {
    margin: 2rem auto;
}

.consult a {
    padding: 10px 2rem;
    background: #fff;
    border-radius: 20px;
    font-size: 17px;
    font-weight: 700;
    line-height: 19px;
    color: rgba(var(--s-color), 0.7);
}

.consult a:last-child {
    color: #fff;
    background: rgba(var(--s-color), 1);
    margin-inline: 1rem;
}


.consult a:last-child:hover {
    opacity: 0.7;
}

/*--------- footer -------------*/
.footer {
    background: var(--f-color);
    padding: 2rem 0;
}

.footer .container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
}

.footer .container>* {
    width: 40%;
}

.footer h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 1rem 0;
}

.footer p {
        width: 17rem;
}

.footer p,
.footer a,
.footer li,
.footer span {
    color: var(--t-color);
    font-size: 14px;
    line-height: 16px;
}

.footer ul {
    margin: 0;
    padding: 0;
}

.footer ul li {
    margin: 1rem 0;
}

.footer ul i {
    color: rgba(var(--s-color), 1);
    font-size: 18px;
    margin-right: 1rem;
}

.footer ul li span {
    display: block;
    margin-left: 2rem;
    margin-top: 5px;
}

/*-------- footer-end ---------*/
.footer-end {
    text-align: center;
    background: #000;
    padding: 1rem 0;
}

.footer-end p {
    color: var(--t-color);
    font-size: 14px;
    margin: 0;
}
#wwa-left ul li {
    margin-bottom: 17px;
}
div#testo-description {
    margin-bottom: 4rem;
}
.contact h1 {
    margin-top: 6rem;
    margin-bottom: 3rem;
}
header .logo-container figure.v2030 img {
    display: none;
}
header .logo-container .logos .logo img {
    max-width: 180px;
}
nav.navbar.navbar-inverse a {
    font-size: 19px;
    color: white !important;
    margin: 0 8px;
    padding: 10px;
}
nav.navbar.navbar-inverse {
    display: flex;
    align-items: center;
}
header {
    top: 2rem;
    position: relative;
}
div.wpforms-container-full input[type=date], div.wpforms-container-full input[type=datetime], div.wpforms-container-full input[type=datetime-local], div.wpforms-container-full input[type=email], div.wpforms-container-full input[type=month], div.wpforms-container-full input[type=number], div.wpforms-container-full input[type=password], div.wpforms-container-full input[type=range], div.wpforms-container-full input[type=search], div.wpforms-container-full input[type=tel], div.wpforms-container-full input[type=text], div.wpforms-container-full input[type=time], div.wpforms-container-full input[type=url], div.wpforms-container-full input[type=week], div.wpforms-container-full select, div.wpforms-container-full textarea, .wp-core-ui div.wpforms-container-full input[type=date], .wp-core-ui div.wpforms-container-full input[type=datetime], .wp-core-ui div.wpforms-container-full input[type=datetime-local], .wp-core-ui div.wpforms-container-full input[type=email], .wp-core-ui div.wpforms-container-full input[type=month], .wp-core-ui div.wpforms-container-full input[type=number], .wp-core-ui div.wpforms-container-full input[type=password], .wp-core-ui div.wpforms-container-full input[type=range], .wp-core-ui div.wpforms-container-full input[type=search], .wp-core-ui div.wpforms-container-full input[type=tel], .wp-core-ui div.wpforms-container-full input[type=text], .wp-core-ui div.wpforms-container-full input[type=time], .wp-core-ui div.wpforms-container-full input[type=url], .wp-core-ui div.wpforms-container-full input[type=week], .wp-core-ui div.wpforms-container-full select, .wp-core-ui div.wpforms-container-full textarea {
    background: #161E25 !important;
    color: white !important;
    padding: 20px 12px !important;
    min-height: 60px;
    margin-bottom: -4px;
}
div.wpforms-container-full input::placeholder,
div.wpforms-container-full textarea::placeholder,
.wp-core-ui div.wpforms-container-full input::placeholder,
.wp-core-ui div.wpforms-container-full textarea::placeholder {
    color: #ffffff!important; /* استبدل هذا اللون باللون الذي تريده */
}

div.wpforms-container-full select::placeholder,
.wp-core-ui div.wpforms-container-full select::placeholder {
    color: #ffffff!important; /* استبدل هذا اللون باللون الذي تريده */
}

button#wpforms-submit-18 {
    font-weight: 700;
    margin: 2rem 0;
    color: #fff;
    background: rgba(var(--s-color), 1);
    padding: 12px 36px 12px 36px;
    border-radius: 20px;
    display: inline-block;
}
.header-items {
    margin-top: 5rem;
}
textarea#wpforms-18-field_3 {
    margin-top: -11px !important;
}

.video {
    width: 100%;
    height: 400px;
    margin: auto;
    display: block;
    border: none;
  }
  button.close-btn {
    position: absolute;
    top: -30px;
    background: transparent;
    border: none;
    color: red;
    font-size: 50px;
    font-weight: bold;
    left: -30px;
    font-family: cursive;
}
  .video-popup {
    display: none;
    width: 100%;
    height: 100vh;
    margin: auto;
    position: fixed;
    top: 0;
    boxshadow: 10px 10px 10px 10px black;
  }
  
  .popup-bg {
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100vh;
    position: absolute;
  }
  
  .popup-content {
    background: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: auto;
  }
  
  .popup-title {
    padding: 30px;
    margin: 0 auto;
    color: red;
    text-transform: uppercase;
  }
  div#wwa-left {
    width: 44%;
}


.gallery {
    padding: 40px 0 50px;
    position: relative;
    overflow: hidden;
  }
  .gallery ul {
    padding-top: 50px;
    position: relative;
  }
  .gallery ul li {
    margin-bottom: 20px;
    width: 23.2456140351%;
    position: relative;
  }
  .gallery ul li a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
  }
  .gallery ul li a:before {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 40%;
    left: 50%;
    margin: -14px 0 0 -16px;
    background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asodipodi%3D%22http%3A//sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22%20xmlns%3Ainkscape%3D%22http%3A//www.inkscape.org/namespaces/inkscape%22%20inkscape%3Aversion%3D%220.48.4%20r9939%22%20sodipodi%3Adocname%3D%22icon-fullscreen.svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20960%20560%22%0A%09%20enable-background%3D%22new%200%200%20960%20560%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Csodipodi%3Anamedview%20%20borderopacity%3D%221%22%20pagecolor%3D%22%23ffffff%22%20bordercolor%3D%22%23666666%22%20objecttolerance%3D%2210%22%20gridtolerance%3D%2210%22%20guidetolerance%3D%2210%22%20showgrid%3D%22false%22%20fit-margin-top%3D%220%22%20fit-margin-left%3D%220%22%20inkscape%3Azoom%3D%227.375%22%20inkscape%3Acx%3D%22-5.1525424%22%20inkscape%3Acy%3D%2216%22%20id%3D%22namedview11%22%20inkscape%3Awindow-x%3D%22-8%22%20inkscape%3Awindow-y%3D%22-8%22%20fit-margin-right%3D%220%22%20inkscape%3Apageopacity%3D%220%22%20fit-margin-bottom%3D%220%22%20inkscape%3Awindow-width%3D%221366%22%20inkscape%3Awindow-height%3D%22706%22%20inkscape%3Awindow-maximized%3D%221%22%20inkscape%3Apageshadow%3D%222%22%20inkscape%3Acurrent-layer%3D%22svg2%22%3E%0A%09%3C/sodipodi%3Anamedview%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%22220%22%20y%3D%22260%22%20fill%3D%22%23FFFFFF%22%20width%3D%22536%22%20height%3D%2224%22/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%22476%22%20y%3D%224%22%20fill%3D%22%23FFFFFF%22%20width%3D%2224%22%20height%3D%22556%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A) no-repeat;
    content: "";
    opacity: 0;
    z-index: 1;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
  }
  .gallery ul li a:hover:before {
    top: 50%;
    opacity: 1;
  }
  .gallery ul li a:after {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    content: "";
    opacity: 0;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
  }
  .gallery ul li a:hover:after {
    opacity: 1;
  }
  
  .port {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 100px;
    background: #ffffff;
    background-color: #fafafa;
    z-index: 103;
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    border-bottom: 1px solid #d0d0d0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .port img {
    width: 50%;
  }
  .port .description {
    float: left;
    width: 50%;
    max-height: 100%;
    padding: 0 40px 40px;
    overflow: auto;
  }
  .port h1 {
    font-size: 35px;
    line-height: 2.3;
    padding: 0;
  }
  .port > * {
    opacity: 0;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    transition: all 0.5s linear;
  }
  .port.item_open {
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    height: 100vh;
    margin: auto;
    position: fixed;
  }
  .port > * {
    opacity: 1;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
  
  .close {
    width: 21px;
    height: 21px;
    background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2021%2021%22%0A%09%20enable-background%3D%22new%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22layer1%22%20transform%3D%22translate%280%2C-1031.3622%29%22%3E%0A%09%3Cpath%20id%3D%22path2987%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M0%2C1031.4l21%2C21%22/%3E%0A%09%3Cpath%20id%3D%22path2989%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M21%2C1031.4l-21%2C21%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A%0A) no-repeat;
    position: absolute;
    right: 10px;
    top: -121px;
    opacity: 1;
    z-index: 1004;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }
  .item_open .close {
    opacity: 1;
    top: -6rem;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: relative;
  }
  .gallery ul li {
    margin-right: 1%;
}
.gallery ul {
    padding-top: 50px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.gallery ul li a:after {
    right: 0;
}
section.gallery img {
    width: 100%;
}

@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

@-webkit-keyframes scrollm {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100px * 7));
  }
}
@keyframes scrollm {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100px * 7));
  }
}
.slider.ccc {
    background: transparent;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-top: 5rem;
}
.slider::before, .slider::after {
  background: linear-gradient(to right, #010108 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider.ccc .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.slider.ccc .slide {
  height: 100px;
  width: 250px;
}
.slider.ccc img {
    filter: grayscale(1) brightness(2.5);
}