* {
  box-sizing: border-box;
}


body{
background-color: #000000;
padding-top:0px;
 min-height: 100%;
margin:0;

}

.ustbar{
width:100%;

height:50px;
background: rgba(255, 255, 255, 0.9);



display:flex;
justify-content:space-between;


background-color:#3E3636

}



.ustpng{
border-radius:10px;
}




.banner{
width:100%;
height:550px;

display: flex;
justify-content: space-between;
position: relative;
background-image:url("resimler/banner4.avif");

background-size: cover;
background-repeat: no-repeat;
background-position: center;
font-size: 25px;
font-weight: 600;
margin-top:50px;
padding-top:110px;
padding-bottom:110px;
}

.banner a {
  text-decoration: none;
  color: black;
}

.liste{
padding-top:10px;
opacity: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
width:50px;
height:50px;
}
.sol_liste{
align-items: left;

}
.sag_liste{
align-items: right;

}
.liste li{

width:50px;
height:50px;

list-style:none;
display: flex;
width: fit-content;


background-color: #fff3f3;
opacity: 0.3;
border-radius: 15px;

}
.liste li:hover{
    opacity: 1;
    transition: all 0.1s ease-in-out;
    list-style: none;
    background-color: #f8f8f8;
    border: 0px solid rgb(255, 0, 0);
    border-radius: 15px;
    padding: 20px;
padding: 50px;
transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);


}

.ustpng{
width:40px;
height:40px;
opacity:0.7;
border-radius:10px;
box-shadow: 0 0 0 rgba(0,0,0,0);
transition: transform 0.3s ease, box-shadow 0.3s ease;

}
.ustpng:hover{
opacity:1;
transition: transform 0.3s ease;
  transform: scale(1.15);
  box-shadow: 0 0 10px 7px rgba(255,255,255,0.7);
}


.navigasyon_bar{



display: flex;
justify-content:space-between;

box-shadow: 0 0 0 rgba(0,0,0,0);
transition: transform 0.3s ease, box-shadow 0.3s ease;
padding:5px;

position:fixed;
width:100%;
top:0;

  overflow: hidden;

z-index:100;
background-color:#D72323;

opacity:0.7;
}

.huawei_png{
width:30px;
height:30px;
padding-top:0px;
padding-bottom:0px;
margin:0;
object-fit: contain;
}


.ic_div{
  display: flex;
  align-items: center;    
  text-align: center;
  gap:8px;
}


.navigasyon_bar img{
transition: transform 0.3s ease;
  transform: scale(1);
}
.navigasyon_bar img:hover{
  transform: scale(1.20);
}


.navigasyon_bar a:hover{
    opacity: 1;
    transition: all 0.1s ease-in-out;
  box-shadow: 0 12px 25px rgba(0,0,0,0.18);

    
    background-color: #ffffff;
    border: 0px solid rgb(255, 0, 0);
    border-radius: 15px;
    
transform: translateY(-3px) scale(1.01);
  box-shadow: 0 0 10px 7px rgba(255,255,255,0.7);


}
.navigasyon_bar:hover{
opacity:1;
}

.navigasyon_bar a{
  text-decoration: none;
  color: black;
padding: 10px;
margin-right:20px;
}
.navpng{
width:40;
height:40;
}






.baslik{
text-align:center;

  margin: auto;
margin-top:50px;
  margin-bottom:50px;
max-width: 1000px;
color:#F5EDED;

}
.paragraf{

  margin: auto;
  text-align: justify;
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  line-height: 1.7;
  max-width: 1000px;
color:#F5EDED;


}

.siralama{
  margin: auto;
  text-align: justify;
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  line-height: 1.7;
  max-width: 1000px;
color:#F5EDED;

}

.foto{

display:flex;
  margin: auto;
  margin-top:50px;
  align-items:justify;
border-radius:20px;
width:100%;
max-width:800px;
}

.ana_baslik{
padding-top:200px;
margin: auto;
  margin-top:50px;
text-align:center;
font-size:64px;
color:#ffffff;
}

.ana_paragraf{
  margin: auto;
margin-left:50px;
margin-right:50px;
  text-align: justify;
  font-family: 'Source Serif 4', serif;
  font-size: 24px;
  line-height: 1.7;
  max-width: 1000px;
color:#ffffff;

}

.huawei_hakkinda_banner{

  min-height: 100vh;

  display: flex;
  flex-direction: column;      
  justify-content: center;     
  align-items: center;         

  background-image: url("huawei_hakkında/resimler/banner.jpg");
  background-size: cover;
  background-position: center;
}

.surdurulebilirlik_banner{
  min-height: 100vh;

  display: flex;
  flex-direction: column;      
  justify-content: center;     
  align-items: center;         

  background-image: url("sürdürülebilirlik/resimler/ana_foto.avif");
  background-size: cover;
  background-position: center;
}
.alt_yazi{
  margin-left:40px;
margin-right:40px;
  text-align: justify;
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  line-height: 1.7;
  max-width: 1000px;

}
.ikili-div a {
text-decoration: none;

color:black;
}


.ikili-div{
display:flex;
justify-content:start;
gap:40px;
}

.ilk_div{
transition: transform 0.3s ease, box-shadow 0.3s ease;


}
.ilk_div:hover{
transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
border-radius:20px;

}

.ikinci_div{
transition: transform 0.3s ease, box-shadow 0.3s ease;


}
.ikinci_div:hover{
transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
border-radius:20px;

}

.akilli_egitim_banner{
 min-height: 100vh;

  display: flex;
  flex-direction: column;      
  justify-content: center;     
  align-items: center;         

  background-image: url("eğitim/resimler/banner.jpg");
  background-size: cover;
  background-position: center;

}







.uclu-div a {
color:#585858;
text-decoration:none;
}


.uclu-div{
display:flex;
justify-content:space-between;

margin-left:50px;
margin-right:50px;
box-sizing: border-box;

}

.mini_foto{
width:450px;
height:300px;
border-radius:20px;

}
.div1{
transition: transform 0.3s ease, box-shadow 0.3s ease;
width:450px;
border-radius:20px;
h1{
text-align:center;
}
margin-left:100px;

}
.div1:hover{
transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
border-radius:20px;

}
.div2{
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius:20px;
h1{
text-align:center;
}
width:450px;
margin-right:100px;

}
.div2:hover{
transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
border-radius:20px;

}
.div3{
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius:20px;
h1{
text-align:center;
}

}
.div3:hover{
transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);

}
.div2 li{
  margin-left:10px;
margin-right:10px;
margin-top:10px;
  text-align: justify;
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  line-height: 1.3;
}

.div1 li{
  margin-left:10px;
margin-right:10px;
margin-top:10px;
  text-align: justify;
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  line-height: 1.3;
}


.ic_p{
  margin-left:10px;
margin-right:10px;
  text-align: justify;
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  line-height: 1.3;
  max-width: 1000px;

}




.alt-banner {
  background-color: #3E3636;
  text-align: center;
  padding: 20px;
width:100%;
color:#D72323;
margin-top:50px;

}

.last_foot{
text-align:center;
color:#D72323;


margin-top:30px;
}
.foot a{
text-decoration:none;

color:#D72323;

margin:50px;
}

.foot_divs{
display:flex;
justify-content:space-between;
margin-bottom:50px;
margin-top:50px;
width:auto;
height:50px;
background-color:#3E3636;
gap:10px;
border-radius:20px;


}
.foot_divs a{
text-decoration:none;
text-align:left;
color:#3E3636;
border-radius:20px;

}
.foot_div1{
width:auto;
height:50px;

border-radius:20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
color:#D72323;
line-height:25px;


}
.foot_div1:hover{
transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
color:#D72323;
}
.foot_divs a:hover{
background-color:#f8f8f8;

}
.footer_foto{
width:50px;
height:50px;
border-radius:20px;
float:left;
margin-right: 10px;

}










.sidebar {
  position: fixed;
  top: 30%;
  right: 10px;

  width: 60px;
  height: 30vh;

  background-color: #D72323;
  display: flex;
  align-items: center;

  padding-top: 20px;
  z-index: 100;

  opacity: 0.3;
  overflow: hidden;
  border-radius: 20px;

  transition: all 0.4s ease;
}

.sidebar:hover {
  width: 450px;
  height: 75vh;
  top: 10%;
  opacity: 1;
}








.side_bar_baslik{
display:blok;

}


.side_liste{
padding-top:30px;
opacity: 1;
  display: flex;
  justify-content: center;

box-shadow: 0 0 0 rgba(0,0,0,0);
transition: box-shadow 0.3s ease;

}
.side_sol_liste{
align-items: left;

}
.side_sag_liste{
align-items: right;
padding-right: 5vh;

}
.side_liste li{
 flex-direction: column;

list-style:none;
display: flex;
width: fit-content;
margin-top:30px;
padding: 20px;
background-color: #fff3f3;
opacity: 1;
border-radius: 15px;
align-items:center;

}
.side_liste li:hover{
   
    transition: all 0.1s ease-in-out;
    list-style: none;
 flex-direction: column;
margin-top: 30px;
    background-color: #f8f8f8;
    border: 0px solid rgb(255, 0, 0);
    border-radius: 15px;
    padding: 20px;
  box-shadow: 0 0 10px 7px rgba(255,255,255,0.7);

}

.side_liste a{
text-decoration:none;
color:#000000;
}

.side_bar_img{
width:120px;
height:100px;

}





.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.icerik {
  position: relative;
  z-index: 2;
  height: 100%;

  display: flex;
  justify-content: center;

  align-items: center;

  color: white;
  font-size: 18px;
}


.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}

.hero {
  transition: opacity 0.6s ease;
}












.divler{
display:flex;
justify-content:space-between;;
padding-left:5%;
padding-right:5%;
gap:20px;
padding-top:50px;
margin-bottom:50px;

}
.mini_foto{
width:100%;
height:50%;
border-radius:20px;

}

.ic_p{
text-align:center;
}

.mini_foto:hover{
width:100%;
height:50%;
align-items:center;
margin:left:0;
}

.divler a{
text-decoration:none;
color:#F5EDED;
 
}

.div1{
transition: transform 0.3s ease, box-shadow 0.3s ease;

  width: 100%;
  max-width: 420px;

height:450px;

clip-path: polygon(
  20% 100%,  /* sol alt */
  0% 50%,    /* sol orta */
  20% 0%,    /* sol üst */
  80% 0%,    /* sağ üst */
  100% 50%,  /* sağ orta */
  80% 100%   /* sağ alt */
);
  transition: clip-path 3s ease;
background-color:#D72323;

border-radius:20px;
padding-bottom:72px;
.div_h1{
text-align:center;
}

}

.div1:hover{
transform: translateY(-2px) scale(1.01);
  box-shadow: 0 0 20px 10px rgba(255,255,255,0.7);

border-radius:20px;
 clip-path: none;

}
.div2{
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius:20px;

  width: 100%;
  max-width: 420px;
height:450px;


 clip-path: polygon(
  20% 100%,  /* sol alt */
  0% 50%,    /* sol orta */
  20% 0%,    /* sol üst */
  80% 0%,    /* sağ üst */
  100% 50%,  /* sağ orta */
  80% 100%   /* sağ alt */
);
  transition: clip-path 3s ease;
background-color:#D72323;

.div_h1{
text-align:center;

}



}
.div2:hover{
transform: translateY(-2px) scale(1.01);

  box-shadow: 0 0 20px 10px rgba(255,255,255,0.7);
border-radius:20px;

 clip-path: none;

}
.div3{
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius:20px;

h1{
text-align:center;
}

}
.div3:hover{
transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);

}



.dev_baslik{

font-size:100px;

}

.urun_tanitim_img{
width:450px;
height:450px;
opacity:0.9;
}
.tanitim{
align-item:left;

}

.urun-bilgi{
width:75%;
font-size:32px;

padding-left:20px;
}

.hero a{
text-decoration:none;

}