*
{
    margin: 0;
    padding: 0;
 
}
body
{


   
}
.fullsize
{
    width: 100dvw;
    height: 70dvh;
}


/* Navigasyon Css */

nav
{
    background-color: white;
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;

}
.navigasyon
{
    margin-top: 2dvh;
    border-radius: 5dvw;
    border: solid 1px rgba(0, 0, 0, 0.2);
}


#burgermenu
{
    display: flex;
    align-items: center;
    justify-content: center;
}
nav img
{
     height: 3.5dvh;
}
nav ul
{
    width: 100%;
    list-style: none;
    display: flex;
    align-items: center;



}
.left
{

    justify-content:end;
    margin-right: 65px;
}
.right
{
    justify-content: baseline;
    margin-left: 35px;
}
nav li
{
    height: 50px;
    padding: 0 20px;
    

}
nav svg
{
    width: 50px;
    display: none;
}
nav a 
{
    position: relative;
    font-size: 17px;
    height: 100%;   
    text-decoration: none;
    display: flex;
    align-items: center;
    color: black;
    padding: 5px;
    margin: 5px;
    z-index: 2;
}
nav a span
{
    position: absolute;
    top: 0;
    left: 0;
    height: 0;    
    width: 100%;
    height: 100%;
    background-color: #993333;
    border-bottom: 2px solid #993333;
    border-radius: 15px;
    opacity: 0;
    transform: scale(1) translateY(30px);
    transition: .5s;
    z-index: 1;

}

.sidebar
{
    padding-top: 50px;
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: 250px;
    z-index: 9999;
    background-color: rgb(255, 255, 255);
    display:none;
    flex-direction: column;
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}
.sidebar li
{
    width: 100%;
    padding-top: 20px;
    
}

/* Slider Css */
.swiper 
{
    width: 90dvw;
    height: 90dvh;
}


.slider
{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sliderFont;
}
.stick
{
    position: absolute;
    width: 3dvw;
    height: 70dvh;
    background-color: #993333cc;
    z-index: 1;
    margin-right: 45dvw;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    animation: flipInY 5s infinite alternate;
}
.stick2
{
    position: absolute;
    width: 2.5dvw;
    height: 65dvh;
    background-color: #9933339d;
    z-index: 1;
    margin-right: 36dvw;
    animation: flipInY 10s infinite alternate;
}
.stick3
{
    position: absolute;
    width: 2dvw;
    height: 55dvh;
    background-color: #99333370;
    z-index: 1;
    margin-right: 27dvw;
    animation: flipInY 4s infinite alternate;
}
.stick4
{
    position: absolute;
    width: 1.5dvw;
    height: 45dvh;
    background-color: #9933332f;
    z-index: 1;
    margin-right: 19dvw;
    animation: flipInY 12s infinite alternate;
}
.stick5
{
    position: absolute;
    width: 1dvw;
    height: 35dvh;
    background-color: #99333310;
    z-index: 1;
    margin-right: 12dvw;
    animation: flipInY 2s infinite alternate;
}
.slider .spansol
{
    display: flex;
    align-items: center;
    margin-right: 3vw;
}
.slider .spansag
{
    display: flex;
    align-items: center;
    margin-left: 4vw;
    font-size: 14vw;
}

.slidersag
{
    display:flex;
    flex-direction: column;
    margin-left: 110px;

    justify-content: center;
}
.slider h1
{
    font-size: 3vw;
    z-index: 999;
    text-align:start;
    color: transparent;
    -webkit-text-stroke: 0.3dvh  #993333;
  
}
.slider h4
{
    z-index: 998;
    font-size: 1.5vw;
}
h4 span
{
    position: relative;
    color: transparent;
    animation: displayText 9s infinite;
    animation-delay: calc(-3s*var(--i));
    text-transform: uppercase;
}
h4 span::before
{
    content: attr(data-text);
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    color: #993333;
    border-right: 0.3dvw solid #0F1C26;
    animation: animate 3s linear infinite;
    overflow: hidden;
}
.slider img
{
    height: 75dvh;
    margin-top: 60px;
    z-index: 997;
    position: relative;
    
}
.slider button
{
    margin: 20px;
    height: 7dvh;
    width: 12dvw;
    border-style: none;
    border-radius: 10dvw;
    box-shadow: 5px 34px 63px -24px rgba(66, 68, 90, 1);
    background-color: #993333;
    color: white;
    font-family: sliderFont;
}
/* İmage Galeri */
.ekko-lightbox-nav-overlay a {
    color: goldenrod;
}
.gallery-title {
    text-align: center;
	font-weight: 500;
	border-bottom: 1px dotted orange;
	margin-top: 1em;
}

/* Product */

.proBas 
{
    display: flex;
    justify-content: center;
    align-items: center;
}
.proİmg img
{
    margin-left: 6rem;
    height: 70dvh !important;
    display: flex;
    justify-content: center;
    align-items: center;
   
}
.proTab
{
    padding-top: 7rem;

   
}

/* Hakkımızda Bölümü */
.hakAna
{
    padding-top: 8dvh;
}
.hakİmg img
{
    width: 48.9dvw ;
    height: 39dvh;
    object-position: 80% 30%;
    border-bottom-left-radius: 5rem;
    object-fit: cover;
}

.hakAbout h2
{
    border-left: 8px solid #AE1D2F;
    padding-left: 55px;
    font-size: 50px;
}

.hakAbout p
{
    padding-top: 30px;
    padding-left: 25px;
    font-size: 20px;
}
.vizAna
{
    padding-top: 8dvh;
}
.vizHak p 
{
    padding-top: 30px;
    padding-left: 25px;
    font-size: 20px; 
}
.vizHak h2
{
    border-left:8px solid #AE1D2F;
    padding-left: 55px;
    font-size: 50px;
}
.vizİmg img
{
    width: 48.9dvw !important;
    height: 29dvh;
    object-position: 80% 30%;
    border-top-right-radius: 5rem;
    border-bottom-right-radius: 5rem;
    object-fit: cover;
}

.misAna
{
    padding-top: 8dvh;
}
.misHak p 
{
    padding-top: 30px;
    padding-left: 25px;
    font-size: 20px; 
}
.misHak h2
{
    border-left: 8px solid #AE1D2F;
    padding-left: 55px;
    font-size: 50px;
}
.misİmg img
{
    width: 48.9dvw !important;
    height: 29dvh;
    object-position: 80% 30%;
    border-top-left-radius: 5rem;
    object-fit: cover;
}

.hakLogo
{
    margin: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hakLogo img
{
    width: 30dvw;
    height: auto;
}

/*Contanc bölümü*/

.section {
    padding: 100px 0;
    position: relative;
}

.gray-bg {
    background-color: #f5f5f5;
    height: 100dvh;
}
/* Contact Us
---------------------*/
.contact-name {
  margin-bottom: 30px;
}
.contact-name h5 {
  font-size: 22px;
  color: #20247b;
  margin-bottom: 5px;
  font-weight: 600;
}
.contact-name p {
  font-size: 18px;
  margin: 0;
}

.social-share a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
  margin-right: 10px;
}
.social-share .dribbble {
  box-shadow: 0 8px 30px -4px rgba(234, 76, 137, 0.5);
  background-color: #ea4c89;
}
.social-share .behance {
  box-shadow: 0 8px 30px -4px rgba(0, 103, 255, 0.5);
  background-color: #0067ff;
}
.social-share .linkedin {
  box-shadow: 0 8px 30px -4px rgba(1, 119, 172, 0.5);
  background-color: #ac1b01;
}

.contact-form .form-control {
  border: none;
  border-bottom: 1px solid #20247b;
  background: transparent;
  border-radius: 0;
  padding-left: 0;
  box-shadow: none !important;
}
.contact-form .form-control:focus {
  border-bottom: 1px solid #fc5356;
}
.contact-form .form-control.invalid {
  border-bottom: 1px solid #ff0000;
}
.contact-form .send {
  margin-top: 20px;
}
@media (max-width: 767px) {
  .contact-form .send {
    margin-bottom: 20px;
  }
}

.section-title h2 {
    font-weight: 700;
    color: #20247b;
    font-size: 45px;
    margin: 0 0 15px;
    border-left: 5px solid #AE1D2F;
    padding-left: 15px;
}
.section-title {
    padding-bottom: 45px;
}
.contact-form .send {
    margin-top: 20px;
}
.px-btn {
    padding: 0 50px 0 20px;
    line-height: 60px;
    position: relative;
    display: inline-block;
    color: #20247b;
    background: none;
    border: none;
}
.px-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 30px;
    background: transparent;
    border: 1px solid rgba(252, 83, 86, 0.6);
    border-right: 1px solid transparent;
    -moz-transition: ease all 0.35s;
    -o-transition: ease all 0.35s;
    -webkit-transition: ease all 0.35s;
    transition: ease all 0.35s;
    width: 60px;
    height: 60px;
}
.px-btn .arrow {
    width: 13px;
    height: 2px;
    background: currentColor;
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 25px;
}
.px-btn .arrow:after {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
    position: absolute;
    top: -3px;
    right: 0;
    display: inline-block;
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Mobil Görüntü */
@media only screen and (max-width: 800px) 
{
    .proİmg img
    {
        margin-left: 10dvw;    
        height:50dvh  !important;
        justify-content: center;
        align-items: center;
    }
    .proTab
    {
        padding-top: 0;
        padding-bottom: 50px;
    }
    .pdfİcon
    {
        width: 6dvh !important;
    }
    .pdfDownload
    {
        width: 6dvh !important;
    }
    .eKatalog
    {
        height: 10dvh !important;
    }
    .eKatalog h2
    {
        font-size: 1rem;
    }
    .bannerRes
    {

    display: flex;
    padding-top: 5rem;
    }
  
    

    .bannerRes img
    {
        position: relative;
        z-index: 999 !important;
        width: auto !important;
        height: 15dvh !important; 
        
    }
    .bannerPro
    {
        z-index: 1 !important;
        display: block;
    }
    .hideOnMobile
    {
        display: none;
    }
    .showOnMobile
    {
        display: flex;
    }
    .sliderMobile
    {
        flex-direction: column;
        justify-content:center ;
        align-items: center;
    }
    .sliderMobile h1
    {
        font-size: 10vw;
    }
    .sliderMobile h4
    {
        font-size: 4vw;
    }
    .sliderMobile .slidersag
    {
        margin-left: 0px;
    }
    .sliderMobile button
    {
        width: 56dvw;
    }
    .sliderHeight
    {
        max-height: 45dvh;
    }
    .heroMobile
    {
        width: 100%;
        height: 15dvh;
    }
    .hakİmg img
    {
        width: 100dvw !important;
        border-bottom-right-radius: 0rem;
        border-bottom-left-radius: 0rem;
        border-top-left-radius: 5rem;
        border-top-right-radius: 0;
    }
    .vizİmg img
    {
     
        width: 100dvw !important;
        border-bottom-right-radius: 0rem;
        border-bottom-left-radius: 0rem;
        border-top-left-radius: 5rem;
        border-top-right-radius: 0;
    }
    .misİmg img
    {
     
        width: 100dvw !important;
        border-bottom-right-radius: 0rem;
        border-bottom-left-radius: 0rem;
        border-top-left-radius: 5rem;
    }
    .hakLogo img
    {
        width: 80dvw !important;
    }
}
/*Hero*/

.bg
{
    position: relative;
}
.bannerTab
{
    display: flex;

}
.bannerRes img
{
    width: 40dvw;
    box-shadow: 8px 32px 48px -31px rgb(0, 0, 0);
    -webkit-box-shadow: 8px 32px 48px -31px rgb(0, 0, 0);
    -moz-box-shadow: 8px 32px 48px -31px rgba(0,0,0,0.87);
    z-index: 900;

}
.bannerRes
{

    display: flex;
    padding-top: 5rem;
    align-items: center;
    justify-content: center;    


    
}
.bannerPro
{

    border-radius: 1rem;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40dvw ;
    height: 300px;
    background-color: #fafafa;
    border-top-style: none;
    border-bottom-style:groove;
    border-right-style: groove;
    border-left-style: groove;
    z-index: 1;
    margin-bottom: 2rem;
    -webkit-animation: slide-bottom 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-bottom 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    transition: opacity 2s;
}
.bannerBut {
    position: absolute;
    border-radius: 10px 10px 0 0;
    width: 8dvw;
    height: 5dvh;
    position: absolute;
    background: linear-gradient(229deg, rgba(100,7,8,1) 2%, rgba(189,68,68,1) 47%, rgba(100,7,8,1) 86%);
    top: 21dvh;
    right: 49.1dvw;
    z-index: 999;
    color: white;
    border-style: none;
    rotate: 90deg;

    &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        left: -20px;
        bottom: 0;
        background: #000;
        background:radial-gradient(circle at 0 0, transparent 20px, #640708 21px);
    }
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        right: -20px;
        bottom: 0;
        background: #000;
        background:radial-gradient(circle at 100% 0, transparent 20px, #640708 21px);
    }
}

.bannerBut2 {
    position: absolute;
    border-radius: 10px 10px 0 0;
    width: 8dvw;
    height: 5dvh;
    position: absolute;
    background: linear-gradient(229deg, rgba(100,7,8,1) 2%, rgba(189,68,68,1) 47%, rgba(100,7,8,1) 86%);
    top: 21dvh;
    right: 42dvw;
    z-index: 999;
    color: white;
    border-style: none;
    rotate: 270deg;

    &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        left: -20px;
        bottom: 0;
        background: #000;
        background:radial-gradient(circle at 0 0, transparent 20px, #640708 21px);
    }
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        right: -20px;
        bottom: 0;
        background: #000;
        background:radial-gradient(circle at 100% 0, transparent 20px, #640708 21px);
    }
}


.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #993333 !important;
}
.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }


/* Hero Animasyon */

@-webkit-keyframes slide-top {
    0% {
      -webkit-transform: translateY(0px);
              transform: translateY(00px);
    }
    100% {
      -webkit-transform: translateY(-100px);
              transform: translateY(-100px);
    }
  }
  @keyframes slide-bottom {
    0% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);

    }
    100% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
  
    }
  }
  
/* E-Katalog Banner */

.bosluk
{
    height: 10dvh;
}
.boslukHak
{
    height: 6dvh;
}
.pdfİcon
{
  display: flex;
  justify-content: end;
  align-items:end;
}
.pdfDownload
{
  display: flex;
  justify-content: center;
  align-items:center;
}
.eKatalog
{
    font-family:sliderFont ;
    height: 14dvh;
    background-image: url('../img/backgroundkatalog.png');
    background-size: cover;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Footer Bölümü */

.footerMain
{
    background-color: #191b22;
    color: white;
}
.footerSosyal
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    gap:3rem;
}
.footerNav
{
    display: flex;
    justify-content: center;
    align-items: center;
    

}
.footerNav ul
{
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    color: white;
    gap:1rem;
}
.footerNav a
{
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    color: white;
    gap:1rem;
}
.footerNav a:hover
{
 color:#c52023
}
.footerCopy
{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contatc Bölümü */

.iletisim
{
    --s: 50px;
  --c: #191b22;
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: 35.36% 35.36% at;
  --_c: #0000 66%,#20222a 68% 70%,#0000 72%;
  background: 
    radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s), 
    radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s), 
    radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s), 
    radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s), 
    repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s), 
    radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c);
  background-attachment: fixed;
    width: 100%;
    height: 9dvh;
    color: white;
}
.iletisim h4
{
    margin-top: 2.5dvh;
    display: flex;
    justify-content: center;

}
.iletisim button
{
    margin-top: 1dvh;
    width: 9dvw;
    height: 7dvh;
    border-radius: 3dvh;
}
/* Makinalarımız */



/* Slider Animasyon*/
@-webkit-keyframes
 flipInY {
    0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 1;
    }
    40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    }
    60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
    }
    80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    }
    }

/* Slider Yazı Animasyon*/
@keyframes
    displayText
    {
        0%
        {
            display: inline-block;
        }
        33.33%,100%
        {
        
            display: none;
       
        }
    }
@keyframes
    animate
    {
        0%
        {
            width: 0;
        }
        10%{
            width: 0;
        }
        100%{
            width: 0;
        }
        70%
        {
            width: 100%;
        }
        90%{
            width: 100%;
        }
    }

    @keyframes
    productBox
    {
        0%
        {
            width: 0;
        }
        10%{
            width: 0;
        }
        100%{
            width: 0;
        }
        70%
        {
            width: 100%;
        }
        90%{
            width: 100%;
        }
    }


/* Font */
@font-face
{
    font-family: sliderFont;
    src: url(font/Righteous-Regular.ttf);
}