style.css

/*PORTFOLYO*/
#portfolyo {
    background: #F0F2F1;
    padding-top: 100px;
}
.portfolyoimg {
    -webkit-box-shadow: 6px -2px 50px -1px rgba(0,0,0,0.46);
    -moz-box-shadow: 6px -2px 50px -1px rgba(0,0,0,0.46);
    box-shadow: 6px -2px 50px -1px rgba(0,0,0,0.46);
}
#portfolyo h6 {
    color: black;
    padding: 10px;
    margin-top: 10px;
}
#portfolyo a:hover, #portfolyo h6:hover {
color: #29BFF3;
}


#dentapolish6 {
margin:0 auto !important;
}
#portfolyo img {
    padding: 10px 10px 20px 10px;
    transition: all .5s; 
}
#portfolyo img:hover {
    transform: scale(1.1);
    
}
/*Flip Starts

#f1_container {
    position: relative;
    margin: 10px auto;
    width: 450px;
    height: 281px;
    z-index: 1;
  } 

  #f1_container {
    perspective: 1000;
  }
  #f1_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.5s linear;
  }
  #f1_container:hover #f1_card {
    transform: rotateX(180deg);
    box-shadow: -5px 5px 5px #aaa;
  }
  .face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  .face.back {
    display: block;
    background-repeat: no-repeat;
    background-position-x: 20%;
    transform: rotateX(180deg);
    box-sizing: border-box;
    padding: 10px;
    text-align: right;
  }
  .back button { 
    background: rgba(24, 24, 24, 0.6);
    transition: all .3s ease-in-out;
    border-radius: 25px;
  }
  .back button a {
    color: white !important;
    text-decoration: none;
  }

  .back button:hover {
  background:rgba(41, 191, 243, 0.8);
  }






 
.saffet-back {
    background-image: url("img/portfolio/saffetcicekcilik-mobile.png");
}
.sahra-back {
    background-image: url("img/portfolio/sahrasuryanisarap-mobile.png");
}
*/
 /*Flip Ends*/

body {
    font-family: 'Lora', serif;
   }
   
   h1, h2, h3, h4, h5 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
   }
h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

.navbar-collapse {
padding-top: 20px;
}

.languages {
color: white;
position: fixed;
z-index: 1100;
}
@media only screen and (max-width: 370px) {
    .languages {
    color: white;
    position: fixed;
    z-index: 1100;
    right: 25px;
    top: 5px;
    }
}

@media only screen and (min-width: 370px) {
    .languages {
        color: white;
        position: fixed;
        z-index: 1100;
        right: 25px;
        top: 5px;
    }
} 
@media only screen and (min-width: 460px) and (max-width: 980px) {
    .languages {
        color: white;
        position: fixed;
        z-index: 1100;
        right: 70px;
        top: 5px;
    }
} 
@media only screen and (min-width: 980px) {
    .languages {
        color: white;
        position: fixed;
        z-index: 1100;
        right: 85px;
        top: 5px;
    }
}

.languages ul {
    list-style: none;
    margin: 0 auto;
}
.languages img {
width: 24px;
height: 24px;
}

.languages li {
    display: inline;
}
.languages img {
    transition: filter .3s ease-in-out;
    -webkit-filter: grayscale(80%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(80%); /* FF 35+ */
  }
  .languages img:hover {
    -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(0%); /* FF 35+ */
  }

#iletisim {
    padding: 100px 0 0 0;
}

#teklif-al {
    color: #29BFF3 !important;
}
#teklif-al:hover {
    color: #259EEF !important;
}


@media only screen and (max-width: 500px) {
    .navbar-brand img {
        width: 180px;
        height: 50px;
        padding-left:10px; 
    }
}

.main-h1 {
font-size:7vw;
padding-top: 300px;
color: white;
}
.main-h2 {
    font-size:4vw;
    color: white;
    padding-bottom: 0;    
}
.btn-first {
    font-size:3vw;
    background: rgba(24, 24, 24, 0.6);
    color: white;
    border-radius: 25px;
}
.btn-first:hover {
    background:rgba(41, 191, 243, 0.8);
}

@media only screen and (min-width: 500px) {
    .btn-first {
        font-size:2vw;
    }
    .main-h2 {
        font-size:3vw;
    }
    .main-h1 {
        font-size:6vw;
    }
 }

body, html {
    height: 100%;
}

h1, h2, h3 {
    padding-bottom: 30px; 
}

p {
    font-size: 18px;
}

section {
    padding: 60px 30px;
}

i {
    padding: 15px;
}

nav {
    background: rgba(0, 0, 0, 0.7);
    padding-left: 60px !important;
    padding-right: 80px !important;
    z-index: 1;
}


@media only screen and (max-width: 500px) {
    nav {
        padding-left: 10px !important;
        padding-right: 30px !important;
    }
    }

.nav-item a {
    color: white !important;
}



.dropdown-menu{
    background: rgba(0, 0, 0, 0.7) !important; 
    text-align: center; 
}

.nav-link:hover {
    color: #29BFF3 !important;
}
.dropdown-menu a:hover {
    background: none;
    color: #29BFF3 !important;
}

/* HAMBURGER Icon 1 */
#nav-icon1 {
    width: 40px;
    height: 30px;
    position: relative;
    margin: 0 auto !important;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
  }
nav button {
    border: none !important;
    padding-top: 30px !important;
}
nav button:focus {    
    outline: none;
}
  #nav-icon1 span {
    display: block;
    position: absolute;
    height: 5px;
    width: 100%;
    background: #918e8c;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
  #nav-icon1 span:nth-child(1) {
    top: 5px;
  }
  #nav-icon1 span:nth-child(2) {
    top: 15px;
  }
  #nav-icon1 span:nth-child(3) {
    top: 25px;
  }
  #nav-icon1.open span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  #nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }
  #nav-icon1.open span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }

/*main image*/
.main-image {
background-image: url("img/main-image/header.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
}

@media only screen and (max-width: 500px) {
    .main-image {
    background-attachment: inherit;
    }
}



/*short summary*/
.short-summary {
    padding-top: 100px;
    color: black;
}

/*services*/
.services{
    background: #F0F2F1;
padding-top: 100px;
color: black;
}

.my-cards {
    padding: 20px;
}


.my-cards i {
    padding-bottom: 20px;
    opacity: 0.8;
}

.my-cards i {
    transition: all .3s ease-in-out;
 }
 .my-cards i:hover {
    transform:scale(1.07);
    opacity: 1;
}

/*responsive*/
.responsive {
    padding-top: 100px;
    color: black;
}

/*who us*/
.who-us {
    background: #F9F9F9;
    padding-top: 100px; 
}
/*why us*/
.why-us {
    background: #F0F2F1;
    padding-top: 100px;
}
.icon-cards {
    transition: all .3s ease-in-out;
}

.icon-cards:hover {
background: #757474;
color: white;
transform:scale(1.04);
}

/*our process*/
.our-process {
padding-top: 100px;
/*
background-position: center;
background-size: cover;
background-size: contain;
*/
color: black;
}

.our-process img {
    padding-bottom: 20px;
}

.partners img {
    width: 100px;
    height: 100px;
}

/*price-offer*/
.price-offer {
    background: #F9F9F9;
    padding-top: 100px;
    color: black;
}

/*TESTIMONIAL*/

.testimonial-sec{ 
    background: #353535;
    padding-top: 100px;
}
.testimonial-sec h2 {
    color: white;
}
.testimonial{
    padding: 35px 50px;
    margin: 0 20px 30px;
    border-radius: 0 70px 0 70px;
    border: 5px solid #ffc33c;
    border-left: none;
    border-right: none;
    text-align: center;
}
.testimonial .pic{
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
    overflow: hidden;
}
.testimonial .pic img{
    width: 100%;
    height: auto;
}
.testimonial .title{
    display: block;
    margin: 0 0 7px 0;
    font-size: 20px;
    font-weight: 600;
    color: #ffc33c;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.testimonial .post{
    display: block;
    font-size: 15px;
    color: white;
    text-transform: capitalize;
    margin-bottom: 20px;
}
.testimonial .description{
    font-size: 16px;
    color: white;
    line-height: 30px;
}
.owl-theme .owl-controls{ margin-top: 0; }
.owl-theme .owl-controls .owl-page span{
    background: #fff;
    opacity: 0.8;
    transition: all 0.3s ease 0s;
}
.owl-theme .owl-controls .owl-page.active span{ background: #ffc33c; }



@media only screen and (max-width: 500px) {
    .description {
        display: none;
        }
        .desc-min {
            display: inline;
            color: white;
            line-height: 12px;
            font-weight: 100;
            font-size: 16px;
        }
    }

    @media only screen and (min-width: 501px) {
        .desc-min {
            display: none;
        }
    }



/*FOOTER*/
/* iletişim formu */
.red{
    color:red;
    }
  
  #characterLeft {
    color: lightgrey;
    font-size: 12px;
  }
footer h2 {
padding: 40px;
}
 footer .btn {
    font-size: 14px;
    color: #fff !important;
    padding: 12px 22px;
    background: rgb(62, 61, 61);
    border:none;
    border-radius: 0%;
    margin-bottom: 15px;
  }
  footer .btn:hover {
      background: darkgray;
  }
  footer .btn:active {
      background: lightgray !important;
  }

  footer a{
      color: black;
  }
footer a:hover {
    color:rgb(62, 61, 61);
}
  /*quick navbar*/
  .quick-navbar ul {
      list-style: none;
      
  }
  .quick-navbar li {
      display: inline-block;
      font-size: 14px;
  }

footer h4 {
    padding: 40px 20px 20px 20px;
}

.footer-bottom {
    background: #212121;
    color: white;
    padding: 25px 15px 0 15px;
}
.footer-bottom hr {
    margin: 0 auto;
}
.footer-bottom a {
    color: white;
}
.footer-bottom a:hover {
    color:#259EEF; 
}

.social-icons li {
    transition: all .5s ease-in-out;
}

.social-icons li:hover {
color: darkgray;
transform:scale(1.08);
}

@media only screen and (max-width: 500px) {
    .last-hr {
        display: inline-block;
    } 
    .copyright {
        padding-top: 20px; 
    }
    }
  






/*
navbar change color while scrolling
.fixed-top.scrolled {
    background-color: rgb(14, 104, 152, 0.8) !important;
    transition: background-color 2000ms linear;
  }
  */