body {
    margin: 0 !important;
    padding: 0;
    background-color: #EFEFED;
    font-family: "Gilroy";
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

html {
    box-sizing: border-box;
    margin: 0px !important;
    height: -webkit-fill-available;
}

svg {
    width: 100%;
    height: 100vh;
    visibility: visible;
}

#svg-wraper {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    visibility: visible;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #FEA400;
    z-index: 4;
}

#svg-wraper path {
    fill: #efefed;
    stroke: #EFEFED;
    stroke-width: 2px;
}

#svg-wraper h1 {
    color: #efefed;
    position: absolute;
    top: 60vh;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 50vw;
    font-size: 60px;
    /* font-family: 'Gilroy Bold'; */
    font-family: "Dreamspace";
    font-weight: 700;
    letter-spacing: 3px;
}

@media only screen and (max-width: 768px) {
    #svg-wraper h1 {
        top: 55vh;
        font-size: 30px;
    }
}


/* @media only screen and (min-width: 768px) and (max-width: 1080px) {
    #svg-wraper h1 {
        top: 55vh;
        left: 30%;
        font-size: 40px;
    }
} */

@font-face {
    src: url('../fonts/Ablation Black.otf');
    font-family: 'Ablation';
}

@font-face {
    src: url('../fonts/GilroyFont/Gilroy-Medium.otf');
    font-family: 'Gilroy Medium';
}

@font-face {
    src: url('../fonts/GilroyFont/Gilroy-Light.otf');
    font-family: 'Gilroy Light';
}

@font-face {
    src: url('../fonts/GilroyFont/Gilroy-Bold.otf');
    font-family: 'Gilroy Bold';
}

@font-face {
    src: url('../fonts/GilroyFont/Gilroy-Extrabold.otf');
    font-family: 'Gilroy Extrabold';
}

@font-face {
    src: url('../fonts/Kakuati/kakuati-light.ttf');
    font-family: 'Kaukati';
}

@font-face {
    src: url('../fonts//Beckman/beckman-free.otf');
    font-family: 'Dreamspace';
}

ul a {
    color: #0f0f0f;
    text-decoration: none;
    font-family: "Gilroy Extrabold";
    /* font-size: 50px; */
}

.page-active {
    width: 30px;
    border: 3px solid #FEA400;
    position: absolute;
    top: 40px;
}

@media only screen and (min-width: 50rem) {
    ul a {
        font-family: "Gilroy Bold";
        font-family: "Dreamspace";
        /* font-family: "Kaukati"; */
        text-transform: uppercase;
        font-size: 17px;
    }
}

.u-list-reset {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.navbar-height {
    height: 10vh;
}

input,
textarea {
    font-family: "Gilroy Medium";
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Gilroy Medium';
    color: black;
}

p {
    font-family: 'Gilroy Light';
    color: black;
}

.navbar-height a h3 {
    /* font-family: "Gilroy Bold"; */
    font-family: "Dreamspace";
    /* font-family: "Kaukati"; */
    font-weight: 600;
    letter-spacing: 2px;
    /* font-size: 30px; */
}


/* ------------------------------Preload Logo----------------------------------- */

.preload-logo {
    animation: fadeIn 3s;
    -webkit-animation: fadeIn 3s;
    -moz-animation: fadeIn 3s;
    -o-animation: fadeIn 3s;
    -ms-animation: fadeIn 3s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* ------------------------------------showcase---------------------------------------------- */

.index-showcase {
    background-image: url("../img/logo-grey-sh.png");
    background-repeat: no-repeat;
    background-size: 50%;
    background-position-x: 00px;
    background-position-y: -30px;
    position: relative;
    height: 84vh;
    width: 100%;
}

.presentation-text {
    position: absolute;
    width: 100%;
    bottom: 5vh;
}

@media only screen and (max-width: 768px) {
    .index-showcase {
        background-size: 180%;
        background-position-x: 40px;
        background-position-y: -30px;
        height: 90vh;
    }
}


/* .k-logo {
    color: #000;
    font-family: "Gilroy Medium";
} */

.showcase-btn {
    border: 2px solid;
    border-color: #FEA400;
    border-radius: 0px;
    color: black;
}

.showcase-btn:hover {
    background-color: #FEA400;
    color: white;
}

#showcase-img li {
    font-family: "Gilroy Medium";
}

#showcase-img a {
    margin-top: 20px;
    color: #000;
}

.plan-project {
    padding: 10px 20px 10px 20px;
    background-color: #FEA400;
    border-radius: 0px;
    color: white;
    font-family: "Gilroy Medium";
}

.long-description {
    font-family: "Gilroy medium";
}

#showcase p {
    color: black;
}

button {
    font-family: "Gilroy Medium";
}


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

.web-success {
    border-left: 4px solid #99757D;
}

#services {
    margin-top: 20vh;
    margin-bottom: 20vh;
}

#services .card {
    border: none;
    border-radius: 0px;
    background-color: transparent;
    border-right: 1px solid #d8c5c9 !important;
}

@media only screen and (max-width: 768px) {
    .service-border-bottom {
        border-bottom: 1px solid #d8c5c9 !important;
    }
    #services .card {
        border: none !important;
    }
}

.read-more-text {
    text-decoration: none;
    font-size: 12px !important;
    font-family: "Ablation";
    visibility: hidden;
}

.read-more-btn {
    text-decoration: none;
}

.card:hover .read-more-text {
    transition: 0.7s !important;
}

@media screen and (max-width: 768px) {
    .service-cubes {
        width: 150px;
    }
}


/* ------------------------------------Portfoloi Preview---------------------------------------------- */


/* .hr-text {
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    color: rgb(255, 255, 255);
    text-align: center;
    height: 1.5em;
    opacity: 0.5; */


/* }
.hr-text:before {
    content: "";
    background: linear-gradient(to right, transparent, #615858, transparent);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 3px;
}
.hr-text:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    padding: 0 0.5em;
    line-height: 1.5em;
    color: #000000;
    background-color: #EFEFED;
}
.hr-text:after {
    transition: 0.7s;
}
a:hover .hr-text:after {
    transform: scale(1.1);
} */

.project-div {
    overflow: hidden;
}

.project-description {
    position: absolute;
    left: 5%;
    top: 90%;
    text-decoration: none;
    z-index: 2;
}

.portfolio-project img {
    transition: transform 0.8s, filter 0.8s ease-in-out;
    filter: brightness(80%);
}

.portfolio-project:hover img {
    transform: scale(1.08);
    filter: brightness(100%);
}

.project-description h5 {
    color: rgb(255, 255, 255);
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    font-size: 20px;
    font-weight: bolder;
    transition: transform 0.8s, filter 0.8s ease-in-out;
}

.project-div:hover .project-description h5 {
    transform: scale(1.08);
}


/* --------------------------testimonials-------------------------------- */


/* #client-info {
    position: absolute;
    top: 92%;
}

.client-name {
    margin-top: 21px;
}

#testimonials {
    margin-top: 10vh;
} */

.slider {
    /* position: absolute;
    top: 50%;
    left: 50%; */
    /* transform: translate(-50%, -50%); */
    width: 10vw;
    /* min-height: 80vh; */
    height: 6vh;
    /* box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); */
    /* border: 2px solid black; */
    /* border: 1px solid black; */
}


/* .slider h4 {
    font-family: "Ablation";
} */

.wrapper {
    overflow: hidden;
    position: relative;
    /* background: #222; */
    z-index: 2;
}

.slide {
    /* padding: 70px; */
    width: 10vw;
    height: 10vh;
    /* cursor: pointer; */
    float: left;
    /* border: 1px solid black; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 1s;
    position: relative;
    background: transparent;
}


/* -------index carousel */


/* 
.control {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 20px;
    margin-top: -20px;
    z-index: 2;
}

.prev,
.next {
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.prev {
    background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronLeft-512.png);
    left: -20px;
}

.next {
    background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronRight-512.png);
    right: -20px;
} */


/* ----portfolio-carousel */

.control2 {
    position: absolute;
    top: 90%;
    left: 70%;
    width: 80px;
    height: 40px;
    background: transparent;
    z-index: 2;
}

.prev2,
.next2 {
    position: absolute;
    background-size: 35px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.prev2 {
    background-image: url("../img/arrow-left.png");
    background-position-x: left;
}

.next2 {
    background-image: url("../img/arrow-right.png");
    background-position-x: right;
    margin-left: 25px;
}


/* --------------------------contact-form-------------------------------- */

#contact-form {
    /* background-image: url("img/showcase-footer.png"); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 40px;
    margin-top: 15vh;
    /* z-index: 5; */
}

#contact-form input {
    border: none;
    border-radius: 0px;
    border-bottom: 2px solid gray;
}

#contact-form textarea {
    border: none;
    border-radius: 0px;
    border-bottom: 2px solid gray;
}

#contact-form button {
    border: none;
    border-radius: 0px;
    border-bottom: 2px solid rgb(182, 174, 174);
}

#submit-message {
    border: 1px solid #CED4Da;
}

#submit-message:hover {
    background-color: #107f83 !important;
    color: #CED4Da !important;
}


/* --------- footer ---------- */

.copyright-text {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 10vh;
    /* border-top: 2px solid rgba(0, 0, 0, 0.295); */
}

.info-case2 {
    margin-top: 10vh;
}

.footer-nav {
    margin-top: 50vh;
    list-style: none;
}

.footer-nav li a {
    font-size: 40px;
    color: #000;
    opacity: 0.3;
    font-family: "gilroy extrabold" !important;
}

.footer-nav li a:hover {
    opacity: 0.7;
}

.info-case2 a {
    text-decoration: none;
    font-family: "gilroy medium";
}

.copyright-text .small {
    position: absolute;
}

.footer-text {
    height: 100vh;
    width: 100%;
    clip-path: polygon(100% 0, 0% 100%, 0 0);
    background-image: linear-gradient(to bottom right, #efefed, #fff);
    /* background-color: #fff; */
    padding: 0;
    margin: 0;
    position: absolute;
    z-index: 2;
    stroke-width: 0px !important;
}

#footer-div {
    position: absolute;
    height: 100vh;
    width: 100%;
    background-color: #fea400;
    /* clip-path: polygon(50% 45%, 100% 0, 100% 100%, 0 100%, 0 0); */
    background-image: linear-gradient(to bottom left, #fea400 #ffcc6d);
    z-index: -1;
    stroke: none;
}

.footertext-shadow {
    padding: 0;
    position: absolute;
    filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.2));
    z-index: 2;
    width: 100%;
}

.footerdiv-shadow {
    padding: 0;
    position: absolute;
    /* filter: drop-shadow(10px -10px 10px rgba(0, 0, 0, 0)); */
    z-index: 1;
    width: 100%;
}

.footertext-shadow {
    width: 100%;
    padding: 0;
}

.footer-contact {
    /* position: absolute; */
    top: 10vh;
}

.footer-text-logo {
    position: absolute;
    /* clip-path: polygon(25% 25%, 100% 0, 75% 75%, 0% 100%); */
    /* background-image: linear-gradient(to bottom right, #efefed, #fea400); */
    /* background-color: #2929293b; */
    height: 10vh;
    /* width: 60%; */
    /* transform: rotate(-45deg); */
    border: 1px solid black;
    top: 55vh;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    z-index: 10;
    font-family: "Dreamspace";
}


/* .footer-text-sh {
    padding: 0;
    position: absolute;
    filter: drop-shadow(10px -10px 10px rgba(0, 0, 0, 0.2));
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
} */

.footer-text-logo h1 {
    font-family: "Dreamspace";
    font-weight: 900;
    color: #000;
    opacity: 0.8;
}

#footer-overlay {
    width: 100%;
    height: 100vh;
    position: relative;
}

.footer-info-row {
    /* position: absolute; */
    /* left: 0; */
    margin-top: 40vh;
    width: 100%;
    /* bottom: 10vh; */
}

#footer-div .contact-information {
    margin-top: 25vh;
}

#footer-overlay .footer-button {
    padding: 10px 20px 10px 20px;
    border: 4px solid #fea400;
    color: #000;
    text-decoration: none;
    font-family: "gilroy medium";
}

@media only screen and (max-width: 991px) {
    #footer-div .contact-information {
        margin-top: 10vh;
    }
    #footer-overlay .footer-logo {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 55%;
        margin-left: auto;
        margin-top: auto;
        margin-bottom: auto;
        z-index: 100;
        width: 150px;
    }
    .copyright-text {
        bottom: 10px;
    }
}

.footer-logo {
    background-image: url("../img/logo-grey-sh.png") !important;
    background-size: contain;
    background-repeat: no-repeat;
    width: 250px;
    height: 150px;
    margin-top: -10vh;
}

#footer-div a {
    text-decoration: none;
    font-family: "gilroy medium";
}


/* ----------------------------Portfolio----------------------------- */

.portfolio-text {
    margin-top: 20vh;
}

.portfolio-imgs {
    margin-top: -25vh;
}

.portfolio-showcase h1 {
    line-height: 4.5rem;
}

.portfolio-showcase h5 {
    color: #877C84;
    font-size: 30px;
    line-height: 2rem;
}

#triangle-down {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid #FEA400;
    position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

#triangle-down {
    -webkit-animation: action 0.5s infinite alternate;
    animation: action 0.5s infinite alternate;
}

@-webkit-keyframes action {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-15px);
    }
}

@keyframes action {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-15px);
    }
}

@media only screen and (max-width: 768px) {
    .portfolio-showcase-img {
        top: 0vh;
        left: -1vh;
    }
    .portfolio-item {
        height: 35vh !important;
    }
    .portfolio-text {
        margin-top: 20vh;
    }
    .box-div {
        padding: 0px 0px !important;
    }
    .project-divs {
        margin-top: 5vh;
    }
    .project-divs-web {
        margin-top: 5vh;
    }
    .load-more {
        padding: 10px 20px 10px 20px !important;
    }
    .portfolio-showcase {
        background-size: 130%;
        top: -135px;
        border-right: none;
        /* left: 5px; */
    }
    #triangle-down {
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 30px solid #FEA400;
    }
    .portfolio-showcase h5 {
        font-size: 20px;
    }
    .portfolio-showcase h1 {
        line-height: 2.5rem;
    }
    .portfolio-text h5 {
        font-size: 20px !important;
    }
    .portfolio-imgs {
        margin-top: -30vh;
    }
}

.portfolio-row {
    margin-top: 10vh;
}

.portfolio-item {
    height: 60vh;
    padding: 0px 0px 0px 0px;
}

.box-div {
    position: relative;
    /* padding: 0px 13px; */
}

.project-divs {
    margin-top: 5vh;
}

.project-divs-web {
    margin-top: 15vh !important;
}

.project-divs .portfolio-item:nth-child(1) {
    display: inline-table;
}

.project-divs .portfolio-item:nth-child(2) {
    display: inline-table;
}

.project-divs2 .portfolio-item:nth-child(1) {
    display: inline-table;
}

.project-divs2 .portfolio-item:nth-child(2) {
    display: inline-table;
}

.odd-project {
    margin-top: 4vh;
}

.item1,
.item2,
.item3,
.item4 {
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(80%);
}

.item1 {
    background-image: url("../img/AJDAacademy.jpg");
}

.item2 {
    background-image: url("../img/liridoni.JPG");
}

.item3 {
    background-image: url("../img/ecommerce.jpg");
}

.item4 {
    background-image: url("../img/portfoloi.jpg");
}

@media only screen and (max-width: 992px) {
    .odd-project {
        margin-top: 0vh !important;
    }
    .project-title-even {
        top: 2vh !important;
        font-size: 16px;
        left: 2vh !important;
        z-index: -1;
    }
    .project-title-odd {
        font-size: 16px;
        left: 2vh !important;
        /* top: -2vh !important; */
        z-index: -1;
    }
    .projects-caption {
        margin-bottom: 2vh;
    }
}

.load-more {
    padding: 20px 30px 20px 30px;
    background-color: #FEA400;
    border-radius: 0px;
    color: white;
    font-family: "Gilroy Medium";
}

.projects-caption {
    /* margin-bottom: -2vh !important; */
}

.project-title-odd {
    position: absolute;
    left: 4vh;
    top: 6vh;
    z-index: 1;
    transition: ease-in-out 0.3s;
}

.project-title-even {
    position: absolute;
    left: 4vh;
    top: 1vh;
    z-index: 1;
    transition: ease-in-out 0.3s;
}

.box-div:hover .project-title-odd,
.box-div:hover .project-title-even {
    margin-top: 10px;
}

#whyus {
    margin-top: 15vh;
}

#whyus button {
    font-family: "Gilroy Medium";
    color: #000;
    border-radius: 2px;
    border: 1px solid #000;
}

#whyus .card {
    transition: 0.5s;
    /* background: #EEF2F3; */
    background: transparent;
    border: 3px solid black;
    border-top: 3px solid black;
    transform: skew(-20deg);
    /* transform: rotate(45deg); */
    border-radius: 0px;
}

#whyus .card-body {
    transform: skew(20deg);
    /* transform: rotate(-45deg); */
}

.why-card .card:hover {
    background: black;
}


/* -------------------------------------------------Websites--------------------------------------*/

.ajda-coursereview {
    margin-top: 15vh;
    background-color: #EFEFED;
}

.ajda-admin {
    margin-top: 10vh;
}

.lauch-website {
    font-family: "Gilroy Medium";
    text-decoration: none;
    text-transform: uppercase;
    color: black;
}

.project-first-section {
    width: 100%;
}

.project-related-img {
    position: absolute;
    z-index: -1;
    background-image: url("../img/profile-cover6.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    width: 100%;
    height: 90vh;
}

.projects-homepage-img {
    height: 140vh;
    background-image: url("../img/ajda-homepage.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 10vh;
}

.projects-highlight-img {
    height: 70vh;
    background-image: url("../img/ajda-course.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.project-solution {
    margin-top: 90vh;
}

@media only screen and (max-width: 992px) {
    div .project-solution {
        margin-top: 5vh;
    }
    .projects-homepage-img {
        margin-top: 0px;
    }
    div .project-highlight-text {
        margin-top: 0px;
    }
}

.project-highlight-text {
    margin-top: 10vh;
}

.pro-hightlight {
    margin-top: 15vh;
}


/************************************************************************ABOUT***************************************************/

.about-showcase {
    margin: 0px !important;
    clip-path: polygon(89% 64%, 100% 0, 42% 0);
    background-color: #efefed !important;
    position: absolute;
    z-index: 5;
    top: -16vh;
    height: 70vh;
    width: 100%;
}

.orange-about-shade {
    margin: 0px !important;
    clip-path: polygon(89% 64%, 100% 0, 100% 79%);
    background-color: #fea400;
    position: absolute;
    z-index: -2;
    top: -16vh;
    height: 70vh;
    width: 100%;
}

.clip-path-shadowab {
    position: absolute;
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.3));
    z-index: -1;
    width: 100%;
}

.clip-path-shadowab1 {
    position: absolute;
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.3));
    z-index: -2;
    width: 100%;
}

.mission-showcase {
    margin-top: 5vh;
    width: 100%;
    /* height: 55vh; */
    /* clip-path: polygon(0 0, 62% 0, 77% 100%, 0 100%); */
    /* clip-path: polygon(100% 0, 47% 0, 54% 100%, 100% 100%); */
    /* background-color: #efefed; */
    position: relative;
    z-index: -2 !important;
}

.our-image {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.black-stripe {
    position: relative;
    height: 100vh;
    margin-top: -16vh;
    background-color: #292929;
    width: 100%;
    z-index: -100;
}

.about-text {
    margin-top: 30vh;
}

.about-text2 {
    /* background-image: url("../img/logo-orange-sh.png"); */
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: -15vh;
    width: 100%;
    height: 40vh;
    padding-top: 10vh;
    padding-bottom: 10vh;
    clip-path: polygon(0 0, 57% 0, 48% 100%, 0 100%);
    clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%);
    clip-path: polygon(52% 0, 0 0, 0 100%, 52% 100%);
    background-color: #fea400;
}

#background-dark {
    background-color: #292929;
}

.mission-div {
    position: absolute;
    width: 100%;
    top: 75vh;
    z-index: 5;
}

.about-text h2,
h3,
h4 {
    font-family: 'Gilroy Medium';
}

.about-box1 h3 {
    /* margin-top: 17vh;
    margin-bottom: 2vh;
    margin-left: 3vh; 
    font-family: 'Gilroy Medium';
}

.about-box1 p {
    font-family: 'Gilroy Medium';
    /* margin-top: 20vh; */
}

#about-box2 {
    /* position: relative; */
    z-index: 1;
    top: 0vh;
}

.about-box2 p {
    font-family: 'Gilroy Medium';
}


/* .about-box3 {
    margin-top: 25vh;
    background-color: orange;
    height: 30vh;
} */

.about-button {
    width: 150px;
    height: 45px;
    border: none;
    background-color: #0f0f0f;
    color: white;
    border-radius: 0px;
    transition: ease-out 0.3s;
    font-size: 1rem;
    outline: none;
    border: 1px solid #0f0f0f;
    position: relative;
    z-index: 1;
    text-decoration: none;
    font-family: "gilroy medium";
}

.about-button:hover {
    color: #fff;
    cursor: pointer;
}

.about-button:before {
    transition: 0.5s all ease;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    bottom: 0;
    opacity: 0;
    content: "";
    background-color: #212529;
}

.about-button:hover:before {
    transition: 0.5s all ease;
    left: 0;
    right: 0;
    opacity: 1;
    z-index: -1;
}


/*********************************************************CONTACT US***********************************************************/

.is-invalid {
    display: block;
}

.is-valid {
    visibility: hidden;
}

#thanks-msg {
    visibility: hidden;
}

.message-sent {
    display: block !important;
}


/* 
.display {
    margin-top: 10vh;
} */

#contact-page {
    position: relative;
    height: 84vh;
    width: 100%;
}

#contact-page .container {
    margin-top: 10vh;
}

.contact-box {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}


/* #rocket {
    position: absolute;
    top: 20vh;
    left: 45vw;
    z-index: 1;
    width: 250px;
    transition: 1.5s;
} */

@media only screen and (max-width: 768px) {
    #contact-page h1 {
        /* font-size: 25px; */
    }
    #contact-page h2 {
        font-size: 20px;
    }
    #rocket {
        left: 40vw;
        width: 100px;
    }
    #contact-page {
        position: relative;
        height: auto;
    }
}

@media only screen and (max-width: 991px) {
    .info-case {
        margin-top: 15vh;
    }
    .info-case2 {
        margin-top: 10vh;
    }
    #contact-page .container {
        margin-top: 5vh;
    }
}

#submit-message {
    color: #6C757D !important;
}

.contact-us {
    margin-top: 7vh;
}

#contact-form1 {
    margin-top: 4vh;
}

#contact-form1 input {
    border: none;
    border-radius: 0px;
    border-bottom: 2px solid #0f0f0f;
}

#contact-form1 textarea {
    border: none;
    border-radius: 0px;
    border-bottom: 2px solid #0f0f0f;
}

#contact-form1 button {
    border: none;
    border-radius: 0px;
    border-bottom: 2px solid #0f0f0f;
}

.info-case {
    font-family: 'Gilroy Medium';
}

.info-case .instagram,
.facebook,
.freelancer {
    text-decoration: none;
}


/* Footer */


/*------------------------------------------------ Services ---------------------------------------------------*/


/* Service - 1 */

.showcase-white-shape {
    margin: 0px !important;
    clip-path: polygon(89% 64%, 100% 0, 42% 0);
    background-color: #fff;
    position: absolute;
    z-index: 1;
    top: -16vh;
    height: 70vh;
    width: 100%;
}

.showcase-orange-shape {
    margin: 0px !important;
    clip-path: polygon(89% 64%, 100% 0, 100% 79%);
    background-color: #fea400;
    position: absolute;
    z-index: -2;
    top: -16vh;
    height: 70vh;
    width: 100%;
}

.showcase-white-shadow {
    position: absolute;
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.2));
    z-index: -1;
    width: 100%;
}

.showcase-orange-shadow {
    position: absolute;
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.3));
    z-index: -2;
    width: 100%;
}

@media only screen and (max-width: 50rem) {
    .showcase-white-shape {
        visibility: hidden;
    }
    .showcase-orange-shape {
        visibility: hidden;
    }
    .showcase-white-shadow {
        visibility: hidden;
    }
    .showcase-orange-shadow {
        visibility: hidden;
    }
}

.web-des {
    margin-top: -16vh;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    position: absolute;
    z-index: 1;
}

.clip-path-shadow {
    position: absolute;
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.1));
    z-index: -1;
    width: 100%;
}

.web-dev-hr {
    height: 15px !important;
    background-color: #fea400;
    opacity: 100%;
    position: relative;
    z-index: -2;
}

.margin-bottom-footer {
    margin-bottom: 15vh;
}

.small-rectangle {
    /* clip-path: polygon(0 0, 100% 0, 82% 100%, 0% 100%); */
    height: 15px;
    width: 200px;
    background-color: #fea400;
}

#web-design {
    width: 100%;
    clip-path: polygon(0 0, 89% 0, 76% 100%, 0 100%);
    background-color: #212529;
    position: relative;
    z-index: 1 !important;
}

#maintnance {
    /*width: 100%;*/
    /* height: 65vh; */
    clip-path: polygon(0 0, 89% 0, 76% 100%, 0 100%);
    position: relative;
    z-index: 1;
}

#web-dev {
    width: 100%;
    /* height: 70vh; */
    /* clip-path: polygon(0 0, 89% 0, 76% 100%, 0 100%); */
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 23% 100%);
    background-color: white;
    position: relative;
    z-index: 1;
}

.services-text {
    margin-top: 15vh;
}

.service-one {
    /* border: 1px solid black; */
    clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
    background-color: #212529;
}

#web-app a,
.service-link {
    text-decoration: none;
    color: black;
}

@media only screen and (max-width: 768px) {
    .services-row h5 {
        font-size: 20px !important;
    }
    #web-design,
    #web-dev,
    #maintnance {
        width: 100vw;
        /* height: 150vh; */
        /* clip-path: polygon(50% 100%, 100% 80%, 100% 0, 0 0, 0 80%); */
        clip-path: polygon(0 100%, 100% 80%, 100% 0, 0 0, 0 80%);
        position: relative;
    }
    #web-design {
        background-color: #212529;
        z-index: -1;
    }
    #web-dev {
        z-index: -2;
        /* height: 150vh !important; */
    }
    #maintnance {
        z-index: -3;
    }
    #web-design img,
    #web-dev img,
    #maintnance img {
        width: 200px !important;
    }
    .services-showcase {
        margin: 0px !important;
        clip-path: polygon(42% 0, 100% 79%, 100% 0);
        background-color: #fff;
        position: absolute;
        z-index: -1;
        top: -16vh;
        height: 70vh;
        width: 100vw;
    }
    .orange-service-shade {
        display: none;
    }
}

#web-app a:hover,
.service-link:hover {
    text-decoration: none;
    color: black;
}

.service-title {
    margin-top: 10vh;
}

.parallelogram2 p {
    transform: skew(20deg);
    /* text-decoration: none; */
}

.parallelogram2 h1 {
    transform: skew(20deg);
    margin-top: 10vh;
}

.para.para {
    width: 30px;
    height: 25px;
    transform: skew(-20deg);
    border: 2px solid black;
    background-color: orange;
}

.square.square {
    transform: skew(20deg);
    width: 30px;
    height: 30px;
    border: 2px solid black;
    background-color: orange;
}

.parallelogram-second {
    width: 30px;
    height: 25px;
    transform: skew(-20deg);
    border: 2px solid black;
    background-color: orange;
}

.service-img {
    transform: skew(20deg);
    position: absolute;
    top: -10vh;
    left: -10vh;
}


/* service 3 */

.parallelogram3 {
    height: 50vh;
    transform: skew(20deg);
    border-bottom: 4px solid orange;
    background: transparent;
    position: relative;
    transition: ease-in 0.4s;
}

.parallelogram3:hover {
    border: none;
    border-bottom: 4px solid gray;
    /* border-right: 4px solid orange; */
    background: transparent;
}

#web-app .parallelogram3 img {
    transform: skew(-20deg);
    position: absolute;
    top: 8vh;
    left: 15vh;
}

.parallelogram4 {
    height: 50vh;
    transform: skew(20deg);
    border-top: 4px solid orange;
    border-left: 4px solid orange;
    background: transparent;
    transition: ease-in 0.4s;
    padding-left: 5vh !important;
}

.parallelogram4:hover {
    border: none;
    border-top: 4px solid gray;
    border-left: 4px solid gray;
    background: transparent;
}

.service-title2 {
    margin-top: 25vh;
}

.parallelogram4 h1 {
    transform: skew(-20deg);
    margin-top: 7vh;
}

.parallelogram4 p {
    transform: skew(-20deg);
}


/* Service - 2 */

.parallelogram5 {
    height: 50vh;
    transform: skew(20deg);
    border-top: 4px solid orange;
    border-right: 4px solid orange;
    background: transparent;
    position: relative;
    transition: ease-in 0.4s;
}

.parallelogram6 {
    height: 50vh;
    transform: skew(20deg);
    /* border-top: 4px solid orange; */
    /* border-right: 4px solid orange; */
    background: transparent;
    position: relative;
    padding-left: 7vh;
    transition: ease-in 0.4s;
}

.parallelogram5:hover {
    border: none;
    border-top: 4px solid gray;
    border-right: 4px solid gray;
    background: transparent;
}

#web-app .parallelogram5 img {
    transform: skew(-20deg);
    position: absolute;
    top: 8vh;
    left: 5vh;
}

.parallelogram6 h1 {
    transform: skew(-20deg);
    margin-top: 7vh;
}

.parallelogram6 p {
    transform: skew(-20deg);
}


/* ----------------Maintnance--------------- */


/* .portfolio-showcase {
    background-image: url("img/shape-showcase.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    position: relative;
    top: -15.1vh;
    z-index: -1;
}
 */

.web-design-text {
    margin-top: 50vh;
}

.web-design-text h3 {
    line-height: 2.7rem;
}


/* ------------------------------------------------Web-design------------------------------------------------------- */

.inner-border {
    -webkit-box-shadow: inset 0px -15px 0px #fea400;
    -moz-box-shadow: inset 0px -15px 0px #fea400;
    box-shadow: inset 0px -15px 0px #fea400;
}

.inner-border-proje {
    -webkit-box-shadow: inset 0px -15px 0px #fff;
    -moz-box-shadow: inset 0px -15px 0px #fff;
    box-shadow: inset 0px -15px 0px #fff;
}

.inner-border-related {
    -webkit-box-shadow: inset 0px -10px 0px #fff;
    -moz-box-shadow: inset 0px -10px 0px #fff;
    box-shadow: inset 0px -10px 0px #fff;
}

#web-deg a {
    text-decoration: none;
    transition: 0.5s;
}

.related-arrow {
    visibility: hidden;
    transition: 0.5s !important;
}

.related-arrow1 {
    visibility: hidden;
    transition: 0.5s !important;
}

.rel-1 {
    background-color: #fff;
    clip-path: polygon(14% 0, 100% 0%, 86% 100%, 0% 100%);
}

.rel-2 {
    background-color: #212529;
    clip-path: polygon(14% 0, 100% 0%, 86% 100%, 0% 100%);
    margin-top: -20px;
}

.clip-path-shadow2 {
    filter: drop-shadow(10px -10px 10px rgba(46, 31, 31, 0.3));
}

.clip-path-shadow1 {
    filter: drop-shadow(10px -10px 10px rgba(46, 31, 31, 0.2));
}

.web-dev-showcase {
    margin-top: 13vh;
}

#web-dev2 .row {
    height: 84vh;
}

@media only screen and (max-width: 768px) {
    .web-dev-showcase h5 {
        font-size: 20px !important;
    }
    #web-deg p {
        font-size: 18px;
    }
}


/* -----------------------------------------------NAVBAR-------------------------------------------- */


/* @import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap); */

:root {
    /* Color */
    --lightest: #fffdf7;
    --brown: #a88c7b;
    --brown-darker: #9a7c6a;
    /* Width */
    --lg: 80rem;
    --md: 50rem;
    --sm: 30rem;
}


/*
  Base
*/

*,
*:before,
*:after {
    box-sizing: inherit;
}


/* 

h1,
h2 {
    margin-top: 0;
    font-weight: 600;
}

h1 {
    font-size: calc(1.2rem + 3vw);
}

h2 {
    font-size: calc(1.2rem + 2vw);
}

p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.8rem;
} */


/* 
input,
textarea {
    font-family: inherit;
    color: inherit;
    padding: .2rem .5rem;
    border: none;
    background-color: transparent;
    border-bottom: 1px solid;
}

input[type=submit] {
    cursor: pointer;
    margin-top: 2rem;
    align-self: center;
} */


/*
  Utils, helpers
*/


/*
  Logo
*/

.logo {
    font-size: 2.5rem;
    justify-self: start;
    font-family: "Dreamspace" !important;
    z-index: 5;
    text-decoration: none;
    padding-top: 10px;
}

h3#logo-white {
    color: #fff !important;
}

span.btn-line-white {
    background-color: #fff;
}


/* li a.white-nav-item {
    color: #fff;
}

li a.white-nav-item:hover {
    color: #efefed;
} */


/*
  Button
*/


/* .btn {
    padding: 1rem 2rem;
    border: 1px solid var(--lightest);
    transition: all .2s;
}

.btn:hover {
    background-color: var(--lightest);
    color: black;
} */


/*
  Section
*/


/* .section {
    padding: 6rem 0;
    overflow-x: hidden;
}

.section--intro {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section--article {
    padding-bottom: 0;
}

.section--footer {
    padding-bottom: 3rem;
} */


/*
  Overlay
*/


/* .overlay {
    position: relative;
}

.overlay:before {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: brightness(.8);
}

.overlay--intro:before {
    background-image: url("https://source.unsplash.com/Ai2TRdvI6gM/1600x900");
    filter: brightness(.8);
}

.overlay--contact:before {
    background-image: url("https://source.unsplash.com/nZiKLMN09H8/1600x900");
    filter: brightness(.7);
} */


/*
  Footer nav
*/


/* 
.footer-nav__list {
    display: grid;
    padding-left: 0;
    list-style: none;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 50rem) {
    .footer-nav__list {
        grid-template-columns: 1fr 1fr;
    }
}
 */


/*
  Address
*/


/* .address__list {
    padding-left: 0;
    list-style: none;
    display: grid;
    gap: 1.5rem;
} */


/*
  Wrapper
*/

.wrapper {
    max-width: var(--lg);
    margin: 0 auto;
    /* padding: 0 0.7rem; */
    /* border: 3px solid red; */
}

@media only screen and (min-width: 50rem) {
    .wrapper {
        margin-top: 20px;
    }
}


/* .wrapper--intro {
    margin: 12rem auto;
    text-align: center;
}

.wrapper--footer {
    display: grid;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    align-items: flex-start;
}

.wrapper--copyright {
    margin-top: 4.5rem;
    text-align: center;
} */

.wrapper--nav-area {
    display: grid;
    width: 100%;
    align-items: center;
    grid-template-areas: "menuButton . logo" "menu menu menu";
}

@media (max-width: 49.999rem) {
    .wrapper--nav-area {
        grid-template-rows: auto 1fr;
    }
    .site-nav--is-open .wrapper--nav-area {
        height: calc(100vh - 1rem);
    }
}


/* @media (min-width: 30rem) {
    .wrapper--footer {
        grid-template-columns: 1fr 1fr;
    }
} */

@media (min-width: 50rem) {
    .wrapper--footer {
        grid-template-columns: 1fr 2fr;
    }
    .wrapper--nav-area {
        grid-template-areas: "menu logo";
    }
}

*/
/*
  Title
*/


/* .title {
    text-align: center;
}

.title--article {
    margin-bottom: 6rem;
    position: relative;
}

.title--article:after {
    content: "";
    display: block;
    width: 5rem;
    height: 1px;
    background-color: var(--lightest);
    margin: 2rem auto 0;
}

.title--intro {
    margin-bottom: 4rem;
} */


/*
  Article
*/


/* 
.excerpt {
    row-gap: 1.5rem;
    grid-template-columns: 1.5rem 1fr 1.5rem;
    grid-template-areas: "image image image" ". text .";
    display: grid;
    align-items: center;
    margin-bottom: 6rem;
}

.excerpt--reverse {
    justify-items: center;
    grid-template-areas: ". image ." ". text .";
}

@media (min-width: 50rem) {
    .excerpt {
        grid-template-columns: 3rem 1fr calc(2rem + 5%) 1fr 3rem;
        grid-template-areas: "image image . text .";
    }
    .excerpt--reverse {
        justify-items: stretch;
        grid-template-areas: ". text . image image";
    }
}

.excerpt__image-wrapper {
    overflow-x: hidden;
    grid-area: image;
    justify-self: center;
    display: flex;
}

.excerpt__text-wrapper {
    grid-area: text;
    max-width: 40rem;
    justify-self: center;
}

@media (min-width: 50rem) {
    .excerpt__text-wrapper {
        justify-self: flex-start;
    }
    .excerpt--reverse .excerpt__text-wrapper {
        justify-self: flex-end;
    }
    .excerpt__image-wrapper {
        justify-self: flex-end;
    }
    .excerpt--reverse .excerpt__image-wrapper {
        display: flex;
        justify-self: flex-start;
    }
} */


/*
  Form
*/


/* .contact-form {
    width: 100%;
    max-width: var(--sm);
}

.contact-form__group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
} */


/*
  Site nav
*/

.site-nav {
    /* position: sticky; */
    /* top: 0;
    left: 0; */
    padding-top: .5rem;
    padding-bottom: .5rem;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.site-nav__menu {
    /* grid-area: menu; */
    justify-self: end;
}

@media (max-width: 50rem) {
    .site-nav__menu {
        grid-area: menu;
    }
}

.site-nav__link:hover {
    opacity: 1;
    color: #000;
}

@media (max-width: 49.999rem) {
    .site-nav {
        display: flex;
        flex-direction: column;
        /* position: fixed; */
        width: 100%;
    }
    .site-nav__menu {
        display: none;
        flex-direction: column;
        margin: auto;
        padding-top: 1rem;
        padding-bottom: 2rem;
        animation-duration: .2s;
        animation-timing-function: ease-in-out;
    }
    .site-nav__link {
        /* font-size: calc(1.2rem + 3vw); */
        font-size: 40px;
        opacity: 0.6;
        padding: 0rem;
        display: block;
    }
    /* .site-nav--is-open::before {
        height: 100vh;
        overflow-y: auto;
        z-index: 100;
    } */
    /* .site-nav--is-open::after {
        height: 100vh;
        overflow-y: auto;
        z-index: 100;
    } */
    .site-nav--is-open .site-nav__menu {
        display: flex;
    }
}

@media (min-width: 50rem) {
    .site-nav__menu {
        display: flex;
        flex-direction: row;
        padding: 0;
    }
}

.fade-in {
    animation-fill-mode: forwards;
    animation-name: fade;
}

.fade-out {
    animation-fill-mode: backwards;
    animation-name: fade;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/*
  Curtain
*/

.site-nav__curtain {
    visibility: hidden;
    z-index: 2;
    position: fixed;
    bottom: 0;
    /* left: 50%; */
    /* margin-left: -100vh; */
    /* 
    /* margin-right: -900px;
    /* ---------circle------- */
    /* width: 100vw;
    height: 100vh;
    border-radius: 50%; */
    /* --------sqquare------- */
    width: 100vw;
    height: 100vh;
    background-color: #FEA400;
    /* text-align: center; */
    /* --------triangle------ */
    /* width: 0;
    height: 0;
    border-top: 0px;
    border-left: 50vh solid transparent;
    border-right: 50vh solid transparent;
    border-bottom: 100vh solid #FEA400; */
    /* -------animation------ */
    /* background: #FEA400; */
    transform: translateY() scale(1);
    animation-duration: .6s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.nav-triangle {
    position: absolute;
    top: -20vh;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 0;
    height: 0;
    border-top: 0px;
    border-left: 20vh solid transparent;
    border-right: 20vh solid transparent;
    border-bottom: 20vh solid #FEA400;
}

.curtain-up {
    animation-name: curtainUp;
}

.curtain-down {
    animation-name: curtainDown;
}

@media (min-width: 50rem) {
    .site-nav__curtain {
        visibility: hidden;
        transform: translateY(100%) scale(0) !important;
    }
}

@keyframes curtainUp {
    0% {
        /* border-radius: 50%; */
        transform: translateY(120%) scale(3, 1);
        visibility: visible;
        opacity: 1;
        /* transform: skew(20deg); */
        /* z-index: 100; */
    }
    50% {
        /* border-radius: 50%; */
        /* z-index: 15; */
        /* transform: skewY(20deg); */
    }
    100% {
        transform: translateY(0%) scale(3, 1);
        visibility: visible;
        opacity: 1;
        /* border-radius: 0; */
        /* z-index: 15; */
    }
}

@keyframes curtainDown {
    0% {
        /* border-radius: 0; */
        transform: translateY(0%) scale(3, 1);
        opacity: 1;
        visibility: visible;
    }
    50% {
        opacity: 1;
        visibility: visible;
        /* border-radius: 50%; */
    }
    99% {
        /* transform: translateY(100%) scale(0); */
        visibility: visible;
        opacity: 1;
    }
    100% {
        transform: translateY(120%) scale(3, 1);
        opacity: 0;
        visibility: hidden;
    }
}


/*
  Menu button
*/

.menu-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    cursor: pointer;
    border: none;
    outline: none;
    /* padding: .5rem 0 .5rem 2rem; */
    /* color: var(--lightest); */
    color: #000;
    position: sticky;
    left: 0;
    top: 0;
    align-self: normal;
    justify-self: end;
    z-index: 10;
    /* grid-area: menuButton; */
    grid-area: logo;
    /* border: 1px solid black; */
    outline: none;
    /* margin-right: 10px; */
    margin-right: 10px;
}

.menu-button:focus {
    outline: none;
    border: none;
}

.menu-button::-moz-focus-inner {
    outline: none;
    border: 0;
}

.menu-button:active {
    /* transform: translateY(-.2rem); */
}

@media (min-width: 50rem) {
    .menu-button {
        display: none;
    }
}

.menu-button__lines {
    display: grid;
    gap: 5px;
    transition: all .2s ease;
    position: absolute;
    left: 0;
}

.menu-button__lines--open {
    gap: 0;
}

.menu-button__line {
    display: block;
    transition: .2s ease;
    content: '';
    width: 1.3rem;
    height: 2px;
    background-color: var(--lightest);
    background-color: #000;
    transform-origin: center;
}

.menu-button:hover .menu-button__lines {
    gap: 5px;
}

.menu-button__lines--open .menu-button__line {
    grid-row-start: 1;
    grid-column-start: 1;
    transform: rotate(45deg) scale(1.3);
}

.menu-button__lines--open .menu-button__line:nth-child(3) {
    transform: rotate(-45deg) scale(1.3);
}