main.css

body {
    background-image: url('img/bg1.png');
    background-position: center;
    background-repeat: repeat-y;
    

  }

.maindiv{
    position: relative;
    background-image: url('img/bg1.png');
    background-position: center;
    background-repeat: repeat-y;
    margin: auto;
}


.header {

    position: relative;
    width: 1400px;
    margin: auto;

}

.mainlogo{
position: absolute;
left: 13.47%;
right: 77.01%;
top: 1.11%;
bottom: 94.78%;

background: url('kyplogo.png');
}

a {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    color: #DE2212;
    text-decoration: none;
}

.logoyan{
position: absolute;
width: 0px;
height: 110px;
left: 303px;
top: 25px;

opacity: 0.3;
border: 1px solid #5A585C;
}


.logoyan1{
position: absolute;
width: 144px;
height: 51px;
left: 322px;
top: 33px;

}

.logoyan2{
    position: absolute;
    width: 144px;
    height: 51px;
    left: 322px;
    top: 91px;
    
    
    }

.uyeol label {

font-family: Inter;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;

text-align: center;
color: #FFFFFF;

flex: none;
order: 0;
align-self: center;
margin: 10px 0px;
}

/* Hakkımızda */

.hakkimizda{
    position: absolute;
    width: 105px;
    height: 27px;
    left: 604px;
    top: 68px;
    
    font-family: Poppins;
    font-style: bolder;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    color: #DE2212;
}



/* Ürünler */

.urunler{
position: absolute;
width: 66px;
height: 27px;
left: 720px;
top: 68px;

font-family: Poppins;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 27px;
color: #DE2212;
}


/* Topluluk */

.topluluk{
position: absolute;
width: 76px;
height: 27px;
left: 840px;
top: 68px;

font-family: Poppins;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 27px;
color: #DE2212;
}


/* Kaynaklar */

.kaynaklar{
position: absolute;
width: 130px;
height: 27px;
left: 975px;
top: 68px;

font-family: Poppins;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 27px;
color: #DE2212;
}


/* İletişim */

.iletisim{
position: absolute;
width: 65px;
height: 27px;
left: 1135px;
top: 68px;

font-family: Poppins;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 27px;
color: #DE2212;
}

/* Button / Solid / Rounded / Default */


/* Auto Layout */
.uyeol{
display: flex;
flex-direction: row;
padding: 8px 24px;

position: absolute;
width: 93px;
height: 40px;
left: 1260px;
top: 62px;

background: #DE2212;
border-radius: 50px;
}




.kyyp{
    position: relative;
    width: 962px;
    height: 72px;
    margin: auto;
    top: 80px;
    
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 72px;
    /* identical to box height */
    color: #5A585C;
}

.kyypheader{
    position: relative;
    width: 962px;
    height: 72px;
    margin: auto;
    top: 80px;
    
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 72px;
    text-align: center;
    /* identical to box height */
    color: #5A585C;
}

.kyypdesc{
    position: relative;
    width: 778px;
    height: 112px;
    margin: auto;
    top: 130px;
    
    font-family: Merriweather;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    
    color: #5A585C;
}

.kyypdescleft{
    position: relative;
    width: 778px;
    height: 112px;
    margin: auto;
    top: 130px;
    
    font-family: Merriweather;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 30px;
    text-align: left;
    
    color: #5A585C;
}

.cards{
    position: relative;
    width: 1050px;
    margin: auto;
}

.card1{
position: absolute;
width: 250px;
height: 280px;
left: 0px;
top: 320px;

background: #FFFFFF;
box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(40, 41, 61, 0.04), 10px 10px 20px rgba(96, 97, 112, 0.16);
border-radius: 12px;
}

.card1_logo{
position: absolute;
width: 100.5px;
height: 100px;
left: 75px;
top: 53px;

background: #CFCFCF;
border-radius: 8px;
}


.card1_title{
position: absolute;
width: 156px;
height: 28px;
left: 47px;
top: 186px;

/* Healines / H5 - 20px */

font-family: Inter;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 28px;
/* identical to box height, or 140% */

text-align: center;

/* Dark / Dark 400 */

color: #28293D;
}


.card2{
position: absolute;
width: 250px;
height: 280px;
left: 270px;
top: 320px;

/* Light / Light 100 */

background: #FFFFFF;
box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(40, 41, 61, 0.04), 10px 10px 20px rgba(96, 97, 112, 0.16);
border-radius: 12px;
}

.card3{
    position: absolute;
    width: 250px;
    height: 280px;
    left: 540px;
    top: 320px;
    
    /* Light / Light 100 */
    
    background: #FFFFFF;
    box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(40, 41, 61, 0.04), 10px 10px 20px rgba(96, 97, 112, 0.16);
    border-radius: 12px;
    }

    .card4{
        position: absolute;
        width: 250px;
        height: 280px;
        left: 810px;
        top: 320px;
        
        /* Light / Light 100 */
        
        background: #FFFFFF;
        box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(40, 41, 61, 0.04), 10px 10px 20px rgba(96, 97, 112, 0.16);
        border-radius: 12px;
        }

.card_alt_s{ 
position: absolute;
width: 1110px;
height: 581px;
left: 165px;
top: 906px;
}

.card_alt1{      
/* Auto Layout */

display: flex;
flex-direction: column;
padding: 16px;

position: absolute;
width: 300px;
height: 365px;
left: 0px;
top: 200px;

/* Light / Light 100 */

background: #FFFFFF;
box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(40, 41, 61, 0.08), 0px 0.5px 2px rgba(96, 97, 112, 0.16);
border-radius: 16px;
}
.card_alt2{      
    /* Auto Layout */
    
    display: flex;
    flex-direction: column;
    padding: 16px;
    
    position: absolute;
    width: 300px;
    height: 365px;
    left: 400px;
    top: 200px;
    
    /* Light / Light 100 */
    
    background: #FFFFFF;
    box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(40, 41, 61, 0.08), 0px 0.5px 2px rgba(96, 97, 112, 0.16);
    border-radius: 16px;
    }
    .card_alt3{      
        /* Auto Layout */
        
        display: flex;
        flex-direction: column;
        padding: 16px;
        
        position: absolute;
        width: 300px;
        height: 365px;
        left: 800px;
        top: 200px;
        
        /* Light / Light 100 */
        
        background: #FFFFFF;
        box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(40, 41, 61, 0.08), 0px 0.5px 2px rgba(96, 97, 112, 0.16);
        border-radius: 16px;
        }

.card_alt1_img{  
position: static;
height: 214px;
left: 4.52%;
right: 4.52%;
top: 36px;

border-radius: 8px;

/* Inside Auto Layout */

flex: none;
order: 0;
align-self: flex-start;
margin: 16px 16px;
}





.card_alt1_title{  

position: static;
width: 300px;
height: 42px;
left: 0px;
top: 0px;

/* Healines / H3 - 28px */

font-family: Inter;
font-style: normal;
font-weight: bold;
font-size: 28px;
line-height: 150%;
/* identical to box height, or 42px */


/* Dark / Dark 500 */

color: #000000;

/* Inside Auto Layout */

flex: none;
order: 0;
align-self: flex-start;
margin: 0px 8px;
}

.card_alt1_desc{ 
/* Enim laboris ullamco quis ullamco proident occaecat et deserunt eiusmod pariatur aliquip nulla minim officia. Id minim ut sit aliquip minim aute ex. Excepteur et ipsum consequat aliqua excepteur. */

position: static;
width: 300px;
height: 120px;
left: 0px;
top: 50px;

/* Body / Body - 16px */

font-family: Inter;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 150%;
/* or 24px */


/* Dark / Dark 300 */

color: #555770;

/* Inside Auto Layout */

flex: none;
order: 1;
align-self: flex-start;
margin: 0px 8px;
}

.card_alt1_devam{
position: static;
right: 0%;
top: 0%;
bottom: 0%;
 
font-family: Inter;
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 17px;
letter-spacing: 0.75px;
text-transform: uppercase;
color: #DE2212;

flex: none;
order: 1;
align-self: left;
margin: 35px 10px;
}

.duyurular{
position: absolute;
width: 2px;
height: 54px;
left: 0px;
top: 100px;

font-family: Poppins;
font-style: normal;
font-weight: 500;
font-size: 36px;
line-height: 54px;
/* identical to box height */

color: #5A585C;
}

.duyuruok{
    position: absolute;
    left: 300px;
    width: 10px;
    top: 325px;
}

.duyurulartumu{
position: absolute;
width: 120px;
height: 27px;
left: 330px;
top: 320px;

font-family: Poppins;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 27px;
/* identical to box height */
color: #DE2212;
}




.grup6{
    position: relative;
    width: 1050px;
    margin: auto;
height: 581px;
top: 556px;
}

.vizyonmisyon{
position: absolute;
width: 518px;
height: 54px;
left: 0px;
top: 550px;

font-family: Poppins;
font-style: normal;
font-weight: 500;
font-size: 36px;
line-height: 54px;
/* identical to box height */
color: #5A585C;
}

.vizyoncard1 {
    position: absolute;
    width: 250px;
    height: 250px;
    left: 0px;
    top: 650px;

    background: #FFFFFF;
    box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(40, 41, 61, 0.04), 10px 10px 20px rgba(96, 97, 112, 0.16);
    border-radius: 12px;
}

.vizyoncard2 {
    position: absolute;
    width: 250px;
    height: 250px;
    left: 300px;
    top: 650px;
    
    background: #FFFFFF;
    box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(40, 41, 61, 0.04), 10px 10px 20px rgba(96, 97, 112, 0.16);
    border-radius: 12px;
    }


.vizyoncard3 {
    position: absolute;
    width: 250px;
    height: 250px;
    left: 0px;
    top: 950px;
    
    background: #FFFFFF;
    box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(40, 41, 61, 0.04), 10px 10px 20px rgba(96, 97, 112, 0.16);
    border-radius: 12px;
    }


.vizyoncard4 {
    position: absolute;
    width: 250px;
    height: 250px;
    left: 300px;
    top: 950px;
    
    background: #FFFFFF;
    box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(40, 41, 61, 0.04), 10px 10px 20px rgba(96, 97, 112, 0.16);
    border-radius: 12px;
    }


.vizyonsag{

    position: absolute;
    width: 622px;
    height: 123px;
    left: 600px;
    top: 650px;
    
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 54px;
    
    color: #5A585C;

}

.vizyonaciklama{

    position: absolute;
    width: 502px;
    height: 293px;
    left: 600px;
    top: 750px;
    
    font-family: Merriweather;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 23px;
    
    color: #5A585C;

}

.footer {
    position: relative;
    width: 1350px;
    margin: auto;
    height: 110px;
    left: 0px;
    top: 1200px;
    background-image: url('img/bg2.jpg');
    background-repeat: no-repeat;
}

.flogo{
    position: absolute;
    width: 327px;
    height: 56px;
    left: 59px;
    top: 20px;
    
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
    
    color: #000000;
}

.fcenter{
    position: absolute;
    width: 327px;
    height: 56px;
    left: 559px;
    top: 50px;
    
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
    
    color: #000000;


}

.footercopy{
    position: absolute;
    width: 327px;
    height: 56px;
    left: 900px;
    top: 30px;
    
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 28px;
    /* or 233% */
    
    text-align: right;
    
    color: #000000;


}

.footerbosluk1{
    position: absolute;
    }
.footerbosluk2{
    position: absolute;
    left: 50px;
    }
.footerbosluk3{
    position: absolute;
    left: 100px;
    }



  
  .dropdown-content1 {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    font-size: 8px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .dropdown-content2 {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    font-size: 8px;
    z-index: 1;
  }
  
  .dropdown-content1 a,  .dropdown-content2  a {
    color: #DE2212;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown-content1 a:hover,   .dropdown-content2 a:hover {background-color: #ddd}
  
  .show {display:block;}


  .firmalar1{
    clear: both;
    width: 1000px;
    padding: 0px;
    margin: auto;
}

.firma1{
    float: left;
    min-height: 100px;
    width: 24%;
    border: 0px solid black;
    text-align: center;
    min-width: 100px;
}