/* THEMES */

:root 
{
    --bgColor: #0f001b;
    --topGlow: #ca67fd;
    --bgImage: url("../images/background.svg");
    --bgOpacity: 0.15;
    --borderColor: #7020b8;
    --textColor: #fff;
    --menuWeight: 400;
    --themeButtonBg: #7020b8;
    --boxSquareColor:#ffffffb7;
    --buttonBackground: linear-gradient(180deg, rgba(166, 67, 255, .2), rgba(64, 24, 104, .2));
    --buttonBoxShadow: 2px 2px 22px 0 rgba(185, 97, 255, .12), -2px -2px 22px 0 rgba(185, 97, 255, .12);
    --buttonHover: inset 2px 2px 4px 0 rgba(185, 97, 255, .36), inset -2px -2px 4px 0 rgba(185, 97, 255, .36);
}

/* THEMES */

* 
{
    /* font-family: "e-Ukraine", sans-serif; */
    font-family: "Roboto Mono", monospace;
    box-sizing: border-box!important;
}

body
{
    background-color:var(--bgColor);
    overflow-x: hidden;
    position:relative;
}


/* FONTS */

@font-face {
    font-family: e-Ukraine;
    src: url("https://www.kodven.com/assets/fonts/e-Ukraine-Thin.otf");
    font-weight: 200
}

@font-face {
    font-family: e-Ukraine;
    src: url("https://www.kodven.com/assets/fonts/e-Ukraine-UltraLight.otf");
    font-weight: 300
}

@font-face {
    font-family: e-Ukraine;
    src: url("https://www.kodven.com/assets/fonts/e-Ukraine-Light.otf");
    font-weight: 400
}

@font-face {
    font-family: e-Ukraine;
    src: url("https://www.kodven.com/assets/fonts/e-Ukraine-Regular.otf");
    font-weight: 500
}

@font-face {
    font-family: e-Ukraine;
    src: url("https://www.kodven.com/assets/fonts/e-Ukraine-Medium.otf");
    font-weight: 700
}

@font-face {
    font-family: e-Ukraine;
    src: url("https://www.kodven.com/assets/fonts/e-Ukraine-Bold.otf");
    font-weight: 800
}

@font-face {
    font-family: LabsAmiga;
    src: url("https://www.kodven.com/assets/fonts/labsAmiga.woff");
}

@font-face {
    font-family: FaveHandPro;
    src: url("https://www.kodven.com/assets/fonts/FaveHandPro.woff2");
}

/* FONTS */

/* GENERAL */

.topGlow
{
    position: absolute;
    top: -250px;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
    transform-origin: center;
    width: 100vw;
    height: 396px;
    background: var(--topGlow);
    border-radius: 100%;
    filter: blur(400px);
}

.backgroundPattern
{
    width:100%;
    height:100vh;
    position:fixed;
    background-image: var(--bgImage);
    z-index: -4;
    opacity: var(--bgOpacity);
    /* mix-blend-mode: soft-light; */
    background-size: cover;
    background-repeat: repeat;
}

/* GENERAL */

/* PRELOADER */

.preloaderOuter
{
    width:100%;
    height:100vh;
    position:fixed;
    left:0px;
    top:0px;
    z-index:999;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
}

.preloaderBox
{
    flex:1;
    height:100vh;
    float:left;
    border-right: 1px solid var(--borderColor);
    transition: 0.4s ease all;
    overflow:hidden;
    background-color:var(--bgColor);
}

.preloaderBoxBg
{
    width:100%;
    height:100vh;
    background-image: var(--bgImage);
    float:left;
    opacity: var(--bgOpacity);
}

.preloaderLogo
{
    width:300px;
    height:106px;
    position:absolute;
    z-index:9;
    margin:calc(50vh - 53px) calc(50% - 150px);
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:var(--bgColor);
    border: 1px solid var(--borderColor);
    transition: 0.4s ease all;
}

.preloaderLogo img
{
    width:260px;
    height:96px;
    object-fit: contain;
    object-position: center;
    margin-left:-3px;
}

/* PRELOADER */

/* MENU */

.menuOuter
{
    width:100%;
    min-height: 50px;
    padding:0px 30px;
    float:left;
    position:relative;
}

.menuOuter:before
{
    content: "";
    width: 35px;
    height: 1px;
    border-bottom: 1px solid var(--borderColor);
    position: absolute;
    bottom: 11px;
    left: -1px;
    rotate: -321deg;
}

.menuOuter:after
{
    content: "";
    width: 35px;
    height: 1px;
    border-bottom: 1px solid var(--borderColor);
    position: absolute;
    bottom: 11px;
    right: -1px;
    rotate: 321deg;
}

.menuInner
{
    width:100%;
    min-height:50px;
    float:left;
    border-bottom:1px solid var(--borderColor);
    display:flex;
    align-items:center;
    justify-content: center;
    gap:20px;
    position:relative;
}

.menuCenterOuter
{
    flex:1;
    min-height:50px;
    border-left:1px solid var(--borderColor);
    border-right:1px solid var(--borderColor);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:25px;
    gap:5px;
}

.menuBox
{
    min-width:10px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    color:var(--textColor)!important;
    padding:0px 10px;
    padding-bottom:1px;
    font-weight:var(--menuWeight);
    letter-spacing: 0.3px;
    position:relative;
    cursor:pointer;
    opacity: 0.8;
    transition: 0.3s ease all;
    font-family: "Roboto Mono", monospace;
    text-decoration: none!important;
}

.menuBox:before
{   
    content:"";
    width:10px;
    height:10px;
    position:absolute;
    left:10px;
    top:10px;
    border-top:2px solid var(--borderColor);
    border-left:2px solid var(--borderColor);
    transition: 0.3s ease all;
    opacity: 0;
}

.menuBox:after
{   
    content:"";
    width:10px;
    height:10px;
    position:absolute;
    right:10px;
    bottom:10px;
    border-bottom:2px solid var(--borderColor);
    border-right:2px solid var(--borderColor);
    transition: 0.3s ease all;
    opacity: 0;
}

.menuBox:hover:before
{
    left:0px;
    top:0px;
    opacity: 1;
}

.menuBox:hover:after
{
    right:0px;
    bottom:0px;
    opacity: 1;
}

.menuBox:hover
{
    opacity: 1;
}

.menuLogoOuter
{
    width:350px;
    min-height:30px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding-left:10px;
}

.menuLogoOuter img
{
    width:100%;
    height:40px;
    margin-top:-3px;
    cursor:pointer;
    object-fit: contain;
    object-position: center left;
}

.menuRightOuter
{
    width:350px;
    min-height:20px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:15px;
}

.menuRightLink
{
    min-width:10px;
    min-height:10px;
    font-size:14px;
    color:var(--textColor)!important;
    font-weight:var(--menuWeight);
    letter-spacing: 0.3px;
    opacity: 0.8;
    transition: 0.3s ease all;
    font-family: "Roboto Mono", monospace;
    text-decoration: none!important;
    cursor: pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.menuRightLink:hover
{
    opacity: 1;
}

.menuRightLink i
{
    float:left;
    font-size:15px;
    margin-top:2px;
    margin-right:10px;
    color:var(--borderColor);
}

.themeButtonOuter
{
    width:60px;
    height:35px;
    float:left;
    border-radius:30px;
    border:1px solid var(--borderColor);
    padding:5px;
    cursor:pointer;
}

.themeButtonCircle
{
    width:23px;
    height:23px;
    background-color:var(--themeButtonBg);
    border-radius:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--textColor);
    font-size:16px;
    transition: 0.4s ease all;
}

.menuRightBtn
{
    min-width:10px;
    height:40px;
    border: 1px solid var(--borderColor);
    background: var(--buttonBackground);
    box-shadow: var(--buttonBoxShadow);
    -webkit-clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    border-radius: 14px 3px 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0px 1.5rem;
    font-size:13px;
    color:var(--textColor)!important;
    font-weight:400;
    letter-spacing: 0.3px;
    transition: 0.3s ease all;
    font-family: "Roboto Mono", monospace;
    text-decoration: none!important;
    cursor: pointer;
    padding-bottom:3px;
}

.menuRightBtn:hover
{
    box-shadow: var(--buttonHover);
}

.serviceFormOuter
{
    width:100%;
    height:100vh;
    background-color:rgba(0, 0, 0, 0.5);
    position:fixed;
    right:0px;
    top:0px;
    z-index:99;
}    

.serviceFormInner
{
    width:460px;
    height:100vh;
    background-color:var(--bgColor);
    border-left:1px solid var(--borderColor);
    position:absolute;
    right:0px;
    top:0px;
    overflow: hidden;
}

.serviceFormInnerBg
{
    width:100%;
    height:100%;
    background-image:var(--bgImage);
    position: absolute;
    left:0px;
    top:0px;
    z-index: 1;
    opacity: var(--bgOpacity);
}

.serviceFormInnerContents
{
    width:100%;
    height:100%;
    position:absolute;
    left:0px;
    top:0px;
    z-index: 5;
    display:flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
}

.serviceFormTitleOuter
{
    width:100%;
    height:80px;
    float:left;
    border-bottom:1px solid var(--borderColor);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.serviceFormTitleOuter h3
{   
    flex:1;
    float:left;
    margin:0px;
    font-size:21px;
    color:var(--textColor);
    margin-top:-2px;
}

.serviceFormTitleBtn
{
    width:40px;
    height:40px;
    border:1px solid var(--borderColor);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    color:var(--textColor);
    padding-top:2px;
    cursor:pointer;
}

.serviceFormInnerContentsScrolled
{
    width:100%;
    flex:1;
    overflow:auto;
    padding:20px;
}

.customInputOuter
{
    width:100%;
    min-height:10px;
    float:left;
    margin-bottom:20px;
}

.customInputOuter p
{
    width:100%;
    float:left;
    margin:0px;
    font-size:15px;
    font-weight:500;
    color:var(--textColor);
    margin-bottom:10px;
}

.customInputOuter input
{
    width:100%;
    height:45px;
    float:left;
    border:1px solid var(--borderColor)!important;
    outline:0px!important;
    padding:0px 10px;
    font-size:14px;
    padding-bottom:1px;
    background-color:transparent;
    color:var(--textColor);
    border-radius:3px;
}

.customInputOuter textarea
{
    width:100%;
    height:145px;
    float:left;
    border:1px solid var(--borderColor)!important;
    outline:0px!important;
    padding:10px;
    font-size:14px;
    padding-bottom:1px;
    background-color:transparent;
    color:var(--textColor);
    resize: none!important;
    border-radius:3px;
}

.serviceFormNotificationOuter
{
    width:100%;
    min-height:10px;
    float:left;
}

.serviceFormNotificationOuter
{
    width:100%;
    min-height:10px;
    float:left;
    background-color:var(--bgColor);
    padding:13px;
    font-size:13px;
    color:var(--textColor);
    font-weight:500;
    margin-bottom:15px;
    border-radius:3px;
    border:1px solid var(--borderColor);
    line-height: 23px;
}

.customInputGroupOuter
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:14px;
    flex-wrap: wrap;
}

.customCheckOuter
{
    width:calc(50% - 7px);
    min-height:10px;
    float:left;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:10px;
    cursor:pointer;
    margin:0px!important;
}

.customCheckOuter input
{
    display:none;
}

.customCheckOuter input:checked ~ .customCheckBox
{
    background-color:var(--bgColor);
}

.customCheckOuter input:checked ~ .customCheckBox i
{
    display: block;
}

.customCheckBox
{
    width:17px;
    height:17px;
    border:1px solid var(--borderColor);
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 3px;
    margin-top:2px;
    font-size:13px;
    padding-top:2px;
}

.customCheckBox i
{
    display: none;
    color:#fff;
}

.customCheckOuter p
{
    flex:1;
    margin:0px;
    font-size:13px;
    font-weight:500;
    color:var(--textColor);
    float:left;
}

/* MENU */

/* SLİDER */

.sliderOuter
{
    width:100%;
    min-height:10px;
    float:left;
    padding:0px 30px;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    overflow: hidden;
}

.sliderLeftSquare
{
    width:40px;
    height:40px;
    border: 1px solid var(--borderColor);
    background: var(--buttonBackground);
    float:left;
    margin-top:15px;
    display:flex;
    align-items:center;
    justify-content: center;
    color:var(--textColor);
}

.sliderContentsOuter
{
    flex:1;
    min-height:150px;
    border-left: 1px solid var(--borderColor);
    border-right: 1px solid var(--borderColor);
    float:left;
    margin-right:-1px;
}

.sliderRightSocialsOuter
{
    width:45px;
    min-height:15px;
    float:left;
    margin-top:15px;
}

.sliderRightSocialBox
{
    width:40px;
    height:40px;
    border: 1px solid var(--borderColor);
    background: var(--buttonBackground);
    float:left;
    margin-bottom:-1px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content: center;
    color:var(--textColor);
    font-size:14px;
    transition: 0.3s ease all;
    padding-bottom:2px;
}

.sliderRightSocialBox:hover
{
    box-shadow: var(--buttonHover);
}

.sliderContentsTopLine
{
    width:100%;
    height:55px;
    border-bottom:1px solid var(--borderColor);
    display:flex;
    align-items:center;
    justify-content:center;
}

.sliderContentsTopLineBorder
{
    flex:1;
    height:55px;
    border-right:1px solid var(--borderColor);
    margin-right:-1px;
}

.sliderMarqueeOuter
{
    width:100%;
    height:240px;
    float:left;
    position:relative;
    border-bottom:1px solid var(--borderColor);
}

.sliderMarqueeBg
{
    width:100%;
    height:100%;
    position: absolute;
    left:0px;
    top:0px;
    z-index: 1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sliderMarqueeBgBorder
{
    flex:1;
    height:240px;
    border-right:1px solid var(--borderColor);
    margin-right:-1px;
}

.sliderMarqueeBgSquare
{
    width:7px;
    height:7px;
    float:left;
    position:absolute;
    background-color:var(--boxSquareColor);
}

.sliderMarqueeSquareText
{
    min-width:10px;
    height:20px;
    float:left;
    position:absolute;
    left:35px;
    bottom:10px;
    color:var(--textColor);
    font-family: "Roboto Mono", monospace;
    font-weight:600;
    z-index: 2;
    font-size:10px;
    background-color:#ffffffaf;
    padding:0px 6px;
    padding-top:3px;
}

.sliderMarqueeTextOuter
{
    width:100%;
    height:100%;
    position:absolute;
    left:0px;
    top:0px;
    z-index:3;
}

.sliderMarqueeText
{
    height:240px;
    font-family: "LabsAmiga", monospace;
    font-size:130px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--textColor);
    padding-bottom:10px;
    margin-right:45px;
}

.sliderBottomContentsOuter
{
    width:100%;
    min-height:10px;
    float:left;
    border-bottom:1px solid var(--borderColor);
    display:flex;
    align-items:center;
    justify-content:center;
}

.sliderBottomContentsBox
{
    flex:1;
    height:350px;
    float:left;
    border-right:1px solid var(--borderColor);
    margin-right:-1px;
    padding:25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-direction: column;
}

.sliderBottomContentsBox h3
{
    width:100%;
    font-size:19px;
    font-weight:400;
    font-family: "Roboto Mono", monospace;
    color:var(--textColor);
    margin:0px;
    line-height:32px;
}

.sliderBottomContentsCenterBox
{
    flex:4;
    height:350px;
    float:left;
    border-right:1px solid var(--borderColor);
    margin-right:-1px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:100px;
}

.sliderBottomContentsCenterBox h2
{
    width:100%;
    text-align:center;
    margin:0px;
    color:var(--textColor);
    font-family: "FaveHandPro", monospace;
    text-transform: uppercase;
    font-size:60px;
    line-height: 47px;
    letter-spacing: 1px;
    rotate: -3deg;
}

.sliderBottomContentsBoxBtn
{
    width:100%;
    height:40px;
    border: 1px solid var(--borderColor);
    background: var(--buttonBackground);
    box-shadow: var(--buttonBoxShadow);
    -webkit-clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    border-radius: 17px 3px 17px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0px 1.5rem;
    font-size:13px;
    color:var(--textColor)!important;
    font-weight:400;
    letter-spacing: 0.3px;
    transition: 0.3s ease all;
    font-family: "Roboto Mono", monospace;
    text-decoration: none!important;
    cursor: pointer;
    padding-bottom:3px;
    text-align: center;
}

.sliderBottomContentsBoxBtn:hover
{
    box-shadow: var(--buttonHover);
}

.sliderBottomSliderOuter
{
    width:100%;
    min-height:10px;
    float:left;
    border-top:1px solid var(--borderColor);
    border-bottom:1px solid var(--borderColor);
    margin-top:-1px;
    padding:25px 0px;
}

.sliderBottomSliderBox
{
    min-width:10px;
    height:70px;
    float:left;
    margin-right:45px;
    background-color:var(--textColor);
}

.sliderBottomSliderBox img
{
    height:70px;
    float:left;
    opacity: 0;
}

/* SLİDER */

/* HOMEPAGE */

.homepageContentsOuter
{
    width:100%;
    min-height:10px;
    float:left;
    border-bottom:1px solid var(--borderColor);
    padding:0px 70px;
    display:flex;
    align-items: flex-start;
    justify-content:flex-start;
    margin-bottom:-1px;
}

.homepageContentsInner
{
    width:100%;
    min-height:50px;
    float:left;
    border-left:1px solid var(--borderColor);
    border-right:1px solid var(--borderColor);
}

.homepageContentsTitleOuter
{
    width:100%;
    min-height:10px;
    float:left;
    border-bottom:1px solid var(--borderColor);
    display:flex;
    align-items:stretch;
    justify-content:center;
}

.homepageContentsTitleText
{
    flex:3;
    border-right:1px solid var(--borderColor);
    float:left;
    margin-right:-1px;
    background-color:#ffffff0c;
}

.homepageContentsTitleText h3
{
    width:100%;
    margin:0px;
    font-size:44px;
    color:var(--textColor);
    padding:25px;
    font-family: "LabsAmiga", monospace;
    line-height:54px;
}

.homepageContentsTitleText h4
{
    width:100%;
    margin:0px;
    font-size:44px;
    color:var(--textColor);
    padding:25px;
    line-height:54px;
}

.homepageContentsTitleBox
{
    flex:1;
    border-right:1px solid var(--borderColor);
    float:left;
    margin-right:-1px;
    position:relative;
}

.homepageContentsTitleBoxInner
{
    width:100%;
    position:absolute;
    height:100%;
    float:left;
    padding:30px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.homepageContentsBoxesOuter
{
    width:100%;
    min-height:50px;
    position:relative;
    float:left;
}

.homepageContentsBoxesBg
{
    width:100%;
    height:100%;
    position:absolute;
    left:0px;
    top:0px;
    display:flex;
    align-items:stretch;
    justify-content:center;
    z-index:1;
}

.homepageContentsBoxesBgBox
{
    flex:1;
    min-height:10px;
    float:left;
    border-right:1px solid var(--borderColor);
    margin-right:-1px;
}

.homepageContentsBoxesInner
{
    width:100%;
    min-height:50px;
    float:left;
    position:relative;
    z-index:3;
}

.faqLineOuter
{
    width:100%;
    min-height:10px;
    float:left;
    padding:20px;
    border-bottom:1px solid var(--borderColor);
    margin-bottom:-1px;
}

.faqLineInner
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}

.faqLineInner p
{
    flex:1;
    font-size:16px;
    color:var(--textColor);
    margin:0px;
    font-family: "Roboto Mono", monospace;
    line-height:26px;
}

.faqLineBtn
{
    width:40px;
    height:40px;
    background-color:var(--borderColor);
    display:flex;
    align-items:center;
    justify-content:center;
    -webkit-clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    border-radius: 17px 3px 17px;
    cursor:pointer;
    font-size:20px;
    color:#fff;
}

.faqLineBtn i
{
    transition:0.3s ease all;
}

.faqLineContentsOuter
{
    width:100%;
    float:left;
    font-size:14px;
    font-weight:var(--menuWeight);
    color:var(--textColor);
    opacity: 0.8;
    font-family: "Roboto Mono", monospace;
    line-height:25px;
    overflow: hidden;
    transition: 0.8s ease all;
    box-sizing: border-box;
    position:relative;
}

.teamBoxesOuter
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
}

.teamBoxOuter
{
    flex:1;
    min-height:10px;
    float:left;
    padding:20px;
}

.teamBox
{
    width:100%;
    min-height:50px;
    float:left;
    border:1px solid var(--borderColor);
    -webkit-clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    border-radius: 17px 3px 17px;
}

.teamBoxTitle
{
    width:100%;
    min-height:10px;
    float:left;
    padding:10px;
    border-bottom:1px solid var(--borderColor);
    position:relative;
}

.teamBoxTitle p
{  
    width:100%;
    float:left;
    font-size:16px;
    font-weight:400;
    color:#fff;
    margin:0px;
    text-align:center;
    font-family: "Roboto Mono", monospace;
    margin-bottom:7px;
}

.teamBoxTitle:before
{
    content:'';
    width:7px;
    height:7px;
    position:absolute;
    left:10px;
    top:10px;
    background-color:#ffffff8d;
    z-index: 3;
}

.teamBoxTitle:after
{
    content:'';
    width:7px;
    height:7px;
    position:absolute;
    right:10px;
    top:10px;
    background-color:#ffffff8d;
    z-index: 3;
}

.teamBoxTitle small
{  
    width:100%;
    float:left;
    font-size:11px;
    font-weight:300;
    color:#ffffffa1;
    margin:0px;
    text-align:center;
    font-family: "Roboto Mono", monospace;
}

.teamBoxImageOuter
{
    width:100%;
    min-height:50px;
    float:left;
    border-bottom:1px solid var(--borderColor);
    display:flex;
    align-items:stretch;
    justify-content:stretch;
}

.teamBoxImageOuter:before
{
    content:'';
    width:30px;
    min-height:10px;
    border-right:1px solid var(--borderColor);
    float:left;
}

.teamBoxImageOuter:after
{
    content:'';
    width:30px;
    min-height:10px;
    border-left:1px solid var(--borderColor);
    float:left;
}

.teamBoxImage
{
    flex:1;
    height:270px;
    float:left;
}

.teamBoxImage img
{
    width:100%;
    height:270px;
    float:left;
    object-fit: cover;
    object-position: center;
    filter: grayscale(100%);
}

.teamBoxBottomOuter
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:15px;
    cursor:pointer;
}

.teamBoxBottomOuter:hover small
{
    color:#9221fc;
}

.teamBoxBottomOuter:before
{
    content:'';
    width:7px;
    height:7px;
    position:absolute;
    left:10px;
    bottom:10px;
    background-color:var(--boxSquareColor);
    z-index: 3;
}

.teamBoxBottomOuter:after
{
    content:'';
    width:7px;
    height:7px;
    position:absolute;
    right:10px;
    bottom:10px;
    background-color:var(--boxSquareColor);
    z-index: 3;
}

.teamBoxBottomOuter small
{
    max-width: 100%;
    font-size:13px;
    color:var(--textColor);
    text-align:center;
    font-family: "Roboto Mono", monospace;
    margin-bottom:2px;
    transition: 0.3s ease all;
}

.teamBoxImage p
{
    width:100%;
    padding:10px;
    margin:0px;
    float:left;
    color:#fff;
    font-size:12px;
    font-family: "Roboto Mono", monospace;
    line-height:22px;
}

.customScroll::-webkit-scrollbar 
{
    width: 3px;
}

.customScroll::-webkit-scrollbar-track 
{
    background: #f1f1f124;
}

.customScroll::-webkit-scrollbar-thumb 
{
    background: #ffffffa3;
}

.customScroll::-webkit-scrollbar-thumb:hover 
{
    background: rgb(197, 197, 197)fffa3;
}

.teamBoxBiography
{
    width:100%;
    height:270px;
    float:left;
    overflow:auto;
}

.blogBoxesOuter
{
    width:100%;
    min-height:10px;
    float:left;
}

.projectsSliderOuter
{
    width:100%;
    min-height:10px;
    float:left;
}

.blogBoxContentsBigOuter
{
    width:100%;
    min-height:10px;
    float:left;
    padding:15px;
    border-bottom:1px solid var(--borderColor);
}

.blogBoxContentsBigOuter h3
{
    width:100%;
    float:left;
    font-size:18px;
    color:var(--textColor);
    margin:0px;
    font-family: "LabsAmiga", monospace;
}

.blogBoxContentsBigOuter h4
{
    width:100%;
    float:left;
    font-size:18px;
    color:var(--textColor);
    margin:0px;
    font-weight:500;
}

.blogBoxContentsBigOuter p
{
    width:100%;
    float:left;
    font-size:13px;
    color:var(--textColor);
    opacity:0.7;
    margin:0px;
    font-family: "Roboto Mono", monospace;
    margin-top:15px;
}

.blogBoxOuter
{
    width:100%;
    min-height:20px;
    padding:20px;
    float:left;
    cursor:pointer;
}

.blogBox
{
    width:100%;
    min-height:50px;
    border:1px solid var(--borderColor);
    -webkit-clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    border-radius: 17px 3px 17px;
    float:left;
}

.blogBoxImageOuter
{
    width:100%;
    height:270px;
    border-bottom:1px solid var(--borderColor);
    padding:15px;
    float:left;
}

.blogBoxImageOuter img
{
    width:100%;
    height:240px;
    object-fit: cover;
    object-position: center;
    border-top-left-radius: 13px;
    float:left;
}

.blogBoxContentsOuter
{
    width:100%;
    min-height:10px;
    border-bottom:1px solid var(--borderColor);
    padding:15px;
    font-size:17px;
    color:var(--textColor);
    float:left;
    font-family: "Roboto Mono", monospace;
}

.blogBoxWritter
{
    width:100%;
    min-height:10px;
    padding:15px;
    border-bottom:1px solid var(--borderColor);
    font-size:12px;
    color:var(--textColor);
    float:left;
    font-family: "Roboto Mono", monospace;
}

.blogBoxWritter small
{
    font-family: "Roboto Mono", monospace;
    opacity: 0.7;
}

.blogBoxBottom
{
    width:100%;
    min-height:30px;
    float:left;
    padding:15px;
    color:var(--textColor);
    font-family: "Roboto Mono", monospace;
    font-size:13px;
    padding-bottom:17px;
}

.blogBoxBottom span
{
    font-size:13px;
    font-family: "Roboto Mono", monospace;
    float:right;
}

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

.homepageSliderPrewBtn
{
    width:40px;
    height:80px;
    position:absolute;
    left:-40px;
    border: 1px solid var(--borderColor);
    background: var(--buttonBackground);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--textColor);
    font-size:20px;
    cursor:pointer;
    padding-top:2px;
}

.homepageSliderNextBtn
{
    width:40px;
    height:80px;
    position:absolute;
    right:-40px;
    border: 1px solid var(--borderColor);
    background: var(--buttonBackground);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--textColor);
    font-size:20px;
    cursor:pointer;
    padding-top:2px;
}

/* HOMEPAGE */

/* FOOTER */

.footerFontsOuter
{
    width:100%;
    min-height:30px;
    float:left;
    border-top:1px solid var(--borderColor);
    padding:0px 70px;
}

.footerFontsInner
{
    width:100%;
    min-height:30px;
    float:left;
    border-left:1px solid var(--borderColor);
    border-right:1px solid var(--borderColor);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.footerFontsBox
{
    flex:1;
    height:220px;
    border-right:1px solid var(--borderColor);
    margin-right:-1px;
    display:flex;
    align-items:center;
    justify-content: center;
    font-family: "LabsAmiga", monospace;
    font-size:140px;
    color:var(--textColor);
    float:left;
}

.footerBottomLineOuter
{
    width:100%;
    min-height:10px;
    border-top:1px solid var(--borderColor);
    float:left;
    padding:0px 70px;
}

.footerBottomLineInner
{
    width:100%;
    min-height:20px;
    float:left;
    border-left:1px solid var(--borderColor);
    border-right:1px solid var(--borderColor);
    display:flex;
    align-items:stretch;
    justify-content:center;
    position:relative;
}

.footerBottomLineContents
{
    flex:3;
    min-height:20px;
    border-right:1px solid var(--borderColor);
    margin-right:-1px;
    padding:18px 0px;
    float:left;
}

.footerBottomLineContents p
{
    width:100%;
    float:left;
    margin:0px;
    font-family: "Roboto Mono", monospace;
    font-size:10px;
    color:var(--textColor);
    padding:0px 15px;
    margin-bottom:2px;
    float:left;
}

.footerBottomLineBox
{
    flex:1;
    min-height:20px;
    border-right:1px solid var(--borderColor);
    margin-right:-1px;
    float:left;
}

.footerContentsBoxOuter
{
    flex:1;
    min-height:20px;
    border-right:1px solid var(--borderColor);
    margin-right:-1px;
    padding:20px;
    float:left;
}

.footerContentsBoxOuter h3
{
    width:100%;
    margin:0px;
    font-family: "Roboto Mono", monospace;
    font-weight:400;
    color:var(--textColor);
    font-size:14px;
    margin-bottom:20px;
    float:left;
}

.footerContentsBoxOuter a
{
    width:100%;
    margin:0px;
    font-family: "Roboto Mono", monospace;
    font-weight:var(--menuWeight);
    color:var(--textColor)!important;;
    font-size:13px;
    margin-bottom:10px;
    float:left;
    opacity: 0.8;
    text-decoration: none!important;
    transition:0.3s ease all;
    cursor:pointer;
}

.footerContentsBoxOuter a:last-child
{
    margin:0px;
}

.footerContentsBoxOuter a:hover
{
    opacity: 1;
}

.footerFormContentsOuter
{
    flex:1;
    min-height:20px;
    border-right:1px solid var(--borderColor);
    margin-right:-1px;
    float:left;
}

.footerFormContentsOuter img
{
    height:35px;
    float:left;
    margin:20px;
    cursor:pointer;
}

.footerFormContentsLineOuter
{
    flex:4;
    min-height:20px;
    border-right:1px solid var(--borderColor);
    margin-right:-1px;
    float:left;
}

.footerFormContentsLineInner
{
    width:100%;
    min-height:10px;
    float:left;
    padding:20px;
}

.footerFormContentsLineInner h3
{
    width:100%;
    float:left;
    margin:0px;
    color:var(--textColor);
    font-family: "Roboto Mono", monospace;
    font-size:14px;
    font-weight:400;
    line-height:25px;
    margin-bottom:20px;
}

.footerFormContentsLineInner input
{
    width:100%;
    float:left;
    margin-top:14px;
    padding:10px 0px;
    padding-bottom:20px;
    font-family: "Roboto Mono", monospace;
    background-color:transparent;
    border: 0px!important;
    outline: 0px!important;
    border-bottom:1px solid var(--borderColor)!important;
    color:var(--textColor);
}

/* FOOTER */

/* ABOUT */

.aboutContentsBoxOuter
{
    width:100%;
    min-height:10px;
    float:left;
    padding:20px;
}

.aboutContentsBoxOuter p
{
    font-size:15px;
    color:var(--textColor);
    font-weight:var(--menuWeight);
    margin-bottom:20px;
}

.aboutContentsBoxOuter p:last-child
{
    margin-bottom:0px;
}

.aboutContentsBoxOuter p b
{
    font-weight:700;
}

.aboutContentsBoxOuter ul
{
    width:100%;
    min-height:10px;
    float:left;
}

.aboutContentsBoxOuter li
{
    font-size:15px;
    color:var(--textColor);
    font-weight:var(--menuWeight);
    margin-bottom:15px;
}

.aboutContentsBoxOuter li b
{
    font-weight:700;
}

/* ABOUT */

/* BLOG LİST */

.blogsTopBtn
{
    min-width:10px;
    height:40px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0px 15px;
    padding-bottom:2px;
    margin-right:15px;
    border:1px solid var(--borderColor);
    color:var(--textColor);
    cursor:pointer;
    font-size:13px;
}    

.blogsTopBtnSelect
{
    background-color:var(--borderColor);
    color:#fff;
}

.blogSearchOuter
{
    width:100%;
    height:40px;
    float:left;
    border:1px solid var(--borderColor);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0px 7px;
    gap:7px;
}

.blogSearchOuter button
{
    background-color:transparent;
    border:0px!important;
    outline:0px!important;
    color:var(--borderColor);
    font-size:20px;
    padding-bottom:2px;
    float:left;
}

.blogSearchOuter input
{
    flex:1;
    height:40px;
    float:left;
    padding-bottom:4px;
    font-size:15px;
    color:#fff;
        background-color:transparent;
    border:0px!important;
    outline:0px!important;
}

.blogListBoxesOuter
{
    width:100%;
    min-heighT:10px;
    float:left;
    display:flex;
    align-items:stretch;
    justify-content:stretch;
    flex-wrap: wrap;
}

.blogListBoxesBoxOuter
{
    width:calc((100% / 3) + 1px);
    min-height:10px;
    border-right:1px solid var(--borderColor);
    border-bottom:1px solid var(--borderColor);
    float:left;
    margin-right:-1px;
    padding:5px;
    margin-bottom:-1px;
}

.pageCounterOuter
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px;
    gap:10px;
}

.pageCounterOuter a
{
    width:35px;
    height:35px;
    border:1px solid var(--borderColor);
    text-decoration: none!important;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--textColor);
    font-size:14px;
}

.pageCounterOuter a i
{
    font-size:20px;
    float:left;
}

.pageCounterSelect
{
    background-color:var(--borderColor);
    color:#fff!important;
}

/* BLOG LİST */

/* MOBİLE */

.mobileBtn
{
    width:40px;
    height:40px;
    border: 1px solid var(--borderColor);
    background: var(--buttonBackground);
    box-shadow: var(--buttonBoxShadow);
    -webkit-clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    border-radius: 14px 3px 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:var(--textColor)!important;
    cursor: pointer;
    padding-top:1px;
    padding-left:1px;
    display: none;
}

.mobileBox
{
    display:none;
}

@media only screen and (max-width: 1000px) 
{
    /* MENU */

    .menuLogoOuter
    {
        width:140px;
        padding:0px;
    }

    .mobileBtn
    {
        display:flex;
    }

    .menuCenterOuter
    {
        width:100%;
        flex:auto;
        position:absolute;
        background-color:var(--bgColor);
        top:79px;
        z-index:99;
        display:none;
        padding:0px;
        border:1px solid var(--borderColor);
    }

    .menuBox
    {
        flex:auto;
        width:100%;
        padding:30px 0px;
        border-bottom:1px solid var(--borderColor);
        margin-bottom:-1px;
    }

    .menuInner
    {
        height:80px;
    }

    .menuRightOuter
    {
        flex:1;
        justify-content:flex-end;
    }

    .menuRightLink
    {
        display:none;
    }

    .menuRightBtn
    {
        display:none;
    }

    .mobileBox
    {
        display:flex;
    }

    .serviceFormInner
    {
        width:100%;
    }

    /* MENU */

    /* SLİDER */

    .sliderLeftSquare
    {
        display:none;
    }

    .sliderContentsTopLine
    {
        display:none;
    }

    .sliderMarqueeOuter
    {
        margin-top:0px;
    }

    .sliderBottomContentsBox
    {
        display:none;
    }

    .sliderRightSocialsOuter
    {
        display:none;
    }
    
    .sliderBottomContentsCenterBox
    {
        padding:20px;
    }

    .sliderBottomContentsCenterBox h2
    {
        font-size: 36px;
        line-height: 43px;
    }

    .sliderBottomSliderOuter
    {
        margin-top:0px;
    }

    .sliderBottomSliderOuter
    {
        padding: 15px 0px;
    }

    .sliderBottomSliderBox
    {
        height:40px;
    }

    .sliderBottomSliderBox img
    {
        height:40px;
    }

    /* SLİDER */

    /* HOMEPAGE */

    .homepageContentsTitleText
    {
        flex:1;
    }

    .homepageContentsTitleText h3
    {
        font-size:18px;
    }

    .homepageContentsTitleText h4
    {
        font-size:18px;
    }

    .closeMobileCell
    {
        display:none;
    }

    .teamBoxesOuter
    {
        flex-direction: column;
    }

    .teamBoxOuter
    {
        width:100%;
        flex:auto;
    }

    .mobileFullContents
    {
        padding:0px 30px;
    }

    .homepageSliderPrewBtn
    {
        display:none;
    }

    .homepageSliderNextBtn
    {
        display:none;
    }

    .teamBoxImageOuter:before
    {
        width:10px;
    }

    .teamBoxImageOuter:after
    {
        width:10px;
    }

    .teamBoxImage
    {
        height:200px;
    }

    .teamBoxImage img
    {
        height:200px;
    }

    .teamBoxBiography
    {
        height:200px;
    }

    .blogBoxContentsOuter
    {
        height:auto;
    }

    /* HOMEPAGE */

    /* FOOTER */

    .footerBottomLineInner
    {
        flex-direction: column;
    }

    .footerFormContentsOuter
    {
        border-bottom:1px solid var(--borderColor);
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .footerFormContentsLineOuter
    {
        border-bottom:1px solid var(--borderColor);
    }

    .footerFormContentsLineInner h3
    {
        text-align:center;
    }

    .footerContentsBoxOuter
    {
        border-bottom:1px solid var(--borderColor);
    }

    .footerFontsBox
    {
        height:120px;
        font-size:38px;
    }

    /* FOOTER */

    /* SERVİCES */

    .blogListBoxesBoxOuter
    {
        width:100%;
        border-right:0px;
        padding:0px;
    }

    .blogBoxOuter
    {
        padding:8px;
    }

    .mobileFullWidthOuter
    {
        flex-direction: column;
        margin-bottom:-1px;
    }

    .mobileFullWidth
    {
        width:100%;
        flex:auto;
        border-bottom:1px solid var(--borderColor);
    }

    .mobileFullWidth h4
    {
        line-height:35px;
    }

    .blogsTopBtn
    {
        width:100%;
        margin-bottom:15px;
        margin-right:0px;
    }

    .blogsTopBtn:last-child
    {
        margin-bottom:0px;
    }

    /* SERVİCES */
}

/* MOBİLE */