@charset "utf-8";

@font-face {
  font-family:Roboto;
  src: url(imajlar/Roboto.ttf);
}

@font-face {
  font-family:Myfont2;
  src: url(imajlar/cravelo.otf);
}

/*mobil için*/
@media only screen and (max-width:768px){
body{
  width: 100%;
  height: auto;
  background-image: url(imajlar/background.webp);
  background-repeat: no-repeat;
  background-size:100% 100%;
  background-attachment: fixed;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header{
  color: rgba(255, 255, 255, 1.0);
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

logo a{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: xx-large;
  text-decoration: none;
  letter-spacing: 2px;
  height: auto;
  margin: 0px;
  padding: 0px;
}

logo h2{
  font-family:Roboto;
  width: 100%;
  font-size: small;
  margin: 0px;
  padding: 0px;
  text-align: center;
  color: rgba(255,255,255,1);
}

@keyframes Animasyon{
  0% {filter: drop-shadow(0px 0px 4px #01d9ff) drop-shadow(0px 0px 4px #01d9ff);}
  10%{filter: drop-shadow(0px 0px 4px #fffb00) drop-shadow(0px 0px 4px #fffb00); }
  20%{filter: drop-shadow(0px 0px 4px #00ffff) drop-shadow(0px 0px 4px #00ffff); }
  30%{filter: drop-shadow(0px 0px 4px #0149ff) drop-shadow(0px 0px 4px #0149ff); }
  40%{filter: drop-shadow(0px 0px 4px #d001ff) drop-shadow(0px 0px 4px #d001ff); }
  50%{filter: drop-shadow(0px 0px 4px #ff0184) drop-shadow(0px 0px 4px #ff0184); }
  60%{filter: drop-shadow(0px 0px 4px #ff0101) drop-shadow(0px 0px 4px #ff0101); }
  70%{filter: drop-shadow(0px 0px 4px #ffffff) drop-shadow(0px 0px 4px #ffffff); }
  80%{filter: drop-shadow(0px 0px 4px #ffff01) drop-shadow(0px 0px 4px #ffff01); }
  90%{filter: drop-shadow(0px 0px 4px #2bff01) drop-shadow(0px 0px 4px #2bff01); }
  100%{filter: drop-shadow(0px 0px 4px #01d9ff) drop-shadow(0px 0px 4px #01d9ff);}
}

logo a img{
  width:80%;
  margin-bottom: 5px;
  filter: drop-shadow(0px 0px 5px #ff0000) drop-shadow(0px 0px 5px #ff0000); 
  animation-name: Animasyon;
  animation-duration:4s;
  animation-iteration-count:infinite;
}

nav{
  font-family: Calibri;
  width: 100%;
  margin-top: 10px;
}

nav ul{
  margin: 0px;
  padding: 0px;
}

nav ul li{
  font-family: Calibri;
  list-style: none;
  text-align: center;
}

nav ul li a{
  font-family:Myfont2;
  letter-spacing: 5px;
  display: block;
  height: 40px;
  font-size:x-large;
  line-height: 40px;
  align-items: center;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  text-decoration: none;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: rgba(249, 1, 1, 0.242);
  border-color: rgba(249, 1, 1, 0.704);
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  
}

nav ul li a:hover{
  background-color: rgba(255, 54, 54, 0.773);
}

.slider{
  width: 80%;
  height: auto;
}

.slide img{
  margin-top: 10px;
  margin-bottom:10px;
  border-radius: 5px;
  border-color: rgba(249, 1, 1, 0.704);
  border-style: solid;
  border-width: 1px;
}

.cta-buton, .callbuton{
  font-family: Calibri;
  display: block;
  text-align: center;
  line-height: 200px;
  height: 200px;
  color: rgb(0, 0, 0);
  background-color: rgb(52, 255, 62);
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-style: solid;
  border-width: 1px;
}

.cta-buton:hover{
  font-family: Calibri;
  display: block;
  font-size:1.5em;
  text-align: center;
  line-height: 200px;
  height: 200px;
  color: rgb(255, 255, 255);
  background-color: rgb(255,52,139);
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  transform: scale(1.1);
}

.callbuton:hover{
  font-family: Calibri;
  display: block;
  font-size:1.5em;
  text-align: center;
  line-height: 200px;
  height: 200px;
  color: rgb(255, 255, 255);
  background-color: rgb(255,52,139);
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  transform: scale(1.1);
}

.cta-buton, .callbuton a{
  font-family: Calibri;
  display: block;
  color: rgb(0, 0, 0);
  font-size: 2em;
  text-decoration: none;
}

section{
  font-family: Calibri;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255, 255, 255, 1.0);
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  background-color: rgba(249, 1, 1, 0.242);
  border-color: rgba(249, 1, 1, 0.704);
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

section h2{
  font-family: Calibri;
  text-align: center;
  margin-top: 5px;
}

section img{
  width: 30%;
}

section p{
  width: 80%;
  font-family: Calibri;
}

article{
  font-family: Calibri;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255, 255, 255, 1.0);
  margin-top: 10px;
  padding: 10px;
  height: auto;
  background-color: rgba(249, 1, 1, 0.242);
  border-color: rgba(249, 1, 1, 0.704);
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

article h1,h2,h3,h4,h5,h6 {
  width: 80%;
  color: rgb(255, 255, 255);
  font-family: Calibri;
  font-size: xx-large;
  margin: 0px;
  padding: 0px;
}

article figure img{
  border-radius: 10px;
}

article figure figcaption{
  font-family: Calibri;
  text-align: center;
}

article p{
  width: 80%;
  font-family: Calibri;
  color: rgba(255, 255, 255, 1.0);
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom:50px;
  padding: 0px;
}

article ul{
  font-family: Calibri;
  width: 80%;
  margin: 0px;
  padding: 0px;
  margin-bottom:50px;
}

footer{
  font-family: Calibri;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255, 255, 255, 1.0);
  margin-top: 10px;
  padding: 10px;
  height: auto;
  background-color: rgba(249, 1, 1, 0.242);
  border-color: rgba(249, 1, 1, 0.704);
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

footer .social a img{
  width: 40px;
  height: auto;
  margin: 5px;
}

.whatsapp a{
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 20px;
  right: 20px;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  z-index: 100;
}

.whatsapp img{
  width: 50px;
  height: 50px;
  filter: drop-shadow(0px 0px 5px #ff0000) drop-shadow(0px 0px 5px #ff0000); 
  animation-name: Animasyon;
  animation-duration:4s;
  animation-iteration-count:infinite;
}

.telegram a{
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 90px;
  right: 20px;
  background-color: #00abee;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  z-index: 100;
}

.telegram img{
  width: 50px;
  height: 50px;
}

}

/* Masaüstü için      */
@media screen and (min-width: 769px) {

body{
  width: 100%;
  height: auto;
  background-image: url(imajlar/background.webp);
  background-repeat: no-repeat;
  background-size:100% 100%;
  background-attachment: fixed;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

logo{
  display: flex;
  flex-direction: column;
  align-content: center;
}

header{
  color: rgba(255, 255, 255, 1.0);
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 0px;
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

logo a{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: xx-large;
  text-decoration: none;
  letter-spacing: 2px;
  height: auto;
  margin: 0px;
  padding: 0px;
}

logo h2{
  font-family:Roboto;
  width: 100%;
  font-size: small;
  margin: 0px;
  padding: 0px;
  text-align: center;
  color: rgba(255,255,255,1);
}

@keyframes Animasyon{
  0% {filter: drop-shadow(0px 0px 4px #01d9ff) drop-shadow(0px 0px 4px #01d9ff);}
  10%{filter: drop-shadow(0px 0px 4px #fffb00) drop-shadow(0px 0px 4px #fffb00); }
  20%{filter: drop-shadow(0px 0px 4px #00ffff) drop-shadow(0px 0px 4px #00ffff); }
  30%{filter: drop-shadow(0px 0px 4px #0149ff) drop-shadow(0px 0px 4px #0149ff); }
  40%{filter: drop-shadow(0px 0px 4px #d001ff) drop-shadow(0px 0px 4px #d001ff); }
  50%{filter: drop-shadow(0px 0px 4px #ff0184) drop-shadow(0px 0px 4px #ff0184); }
  60%{filter: drop-shadow(0px 0px 4px #ff0101) drop-shadow(0px 0px 4px #ff0101); }
  70%{filter: drop-shadow(0px 0px 4px #ffffff) drop-shadow(0px 0px 4px #ffffff); }
  80%{filter: drop-shadow(0px 0px 4px #ffff01) drop-shadow(0px 0px 4px #ffff01); }
  90%{filter: drop-shadow(0px 0px 4px #2bff01) drop-shadow(0px 0px 4px #2bff01); }
  100%{filter: drop-shadow(0px 0px 4px #01d9ff) drop-shadow(0px 0px 4px #01d9ff);}
}

logo a img{
  width:80%;
  margin-bottom: 5px;
  filter: drop-shadow(0px 0px 5px #ff0000) drop-shadow(0px 0px 5px #ff0000); 
  animation-name: Animasyon;
  animation-duration:4s;
  animation-iteration-count:infinite;
}

nav{
  font-family: Calibri;
  width: 70%;

}

nav ul{
  margin: 0px;
  padding: 0px;

}

nav ul li{
  font-family: Calibri;
  list-style: none;
  display: flex;
  flex-direction:row-reverse;
  float: right;
}

nav ul li a{
  display: block;
  font-family:Myfont2;
  letter-spacing: 5px;
  height: 50px;
  font-size:large;
  line-height: 50px;
  text-align: center;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  text-decoration: none;
  margin-left: 5px;
  margin-right: 5px;
  padding-left:10px;
  padding-right:10px;
  background-color: rgba(249, 1, 1, 0.242);
  border-color: rgba(249, 1, 1, 0.704);
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  
}

nav ul li a:hover{
  background-color: rgba(255, 54, 54, 0.773);
}

.slider{
  width: 80%;
  height: auto;
}

.slide img{
  margin-top: 10px;
  margin-bottom:10px;
  border-radius: 5px;
  border-color: rgba(249, 1, 1, 0.704);
  border-style: solid;
  border-width: 1px;
}

.cta-buton, .callbuton{
  font-family: Calibri;
  display: block;
  text-align: center;
  line-height: 200px;
  height: 200px;
  color: rgb(0, 0, 0);
  background-color: rgb(52, 255, 62);
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-style: solid;
  border-width: 1px;
}

.cta-buton:hover{
  font-family: Calibri;
  display: block;
  font-size:1.5em;
  text-align: center;
  line-height: 200px;
  height: 200px;
  color: rgb(255, 255, 255);
  background-color: rgb(255,52,139);
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  transform: scale(1.1);
}

.callbuton:hover{
  font-family: Calibri;
  display: block;
  font-size:1.5em;
  text-align: center;
  line-height: 200px;
  height: 200px;
  color: rgb(255, 255, 255);
  background-color: rgb(255,52,139);
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  transform: scale(1.1);
}

.cta-buton, .callbuton a{
  font-family: Calibri;
  display: block;
  color: rgb(0, 0, 0);
  font-size: 2em;
  text-decoration: none;
}

section{
  font-family: Calibri;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255, 255, 255, 1.0);
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  background-color: rgba(249, 1, 1, 0.242);
  border-color: rgba(249, 1, 1, 0.704);
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

section h2{
  font-family: Calibri;
  text-align: center;
  margin-top: 5px;
}

section img{
  width: 30%;
}

section p{
  width: 80%;
  font-family: Calibri;
}

article{
  font-family: Calibri;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255, 255, 255, 1.0);
  margin-top: 10px;
  padding: 10px;
  height: auto;
  background-color: rgba(249, 1, 1, 0.242);
  border-color: rgba(249, 1, 1, 0.704);
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

article h1,h2,h3,h4,h5,h6 {
  width: 80%;
  color: rgb(255, 255, 255);
  font-family: Calibri;
  font-size: xx-large;
  margin: 0px;
  padding: 0px;
}

article figure img{
  border-radius: 10px;
}

article figure figcaption{
  font-family: Calibri;
  text-align: center;
}

article p{
  width: 80%;
  font-family: Calibri;
  color: rgba(255, 255, 255, 1.0);
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom:50px;
  padding: 0px;
}

article ul{
  font-family: Calibri;
  width: 80%;
  margin: 0px;
  padding: 0px;
  margin-bottom:50px;
}

footer{
  font-family: Calibri;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255, 255, 255, 1.0);
  margin-top: 10px;
  padding: 10px;
  height: auto;
  background-color: rgba(249, 1, 1, 0.242);
  border-color: rgba(249, 1, 1, 0.704);
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

.whatsapp a{
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 20px;
  right: 20px;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  z-index: 100;
}

.whatsapp img{
  width: 50px;
  height: 50px;
  filter: drop-shadow(0px 0px 5px #ff0000) drop-shadow(0px 0px 5px #ff0000); 
  animation-name: Animasyon;
  animation-duration:4s;
  animation-iteration-count:infinite;
}

.telegram a{
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 90px;
  right: 20px;
  background-color: #00abee;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  z-index: 100;
}

.telegram img{
  width: 50px;
  height: 50px;
}

}