* {
   margin: 0;
   padding: 0;
   font-family: Arial, Helvetica, sans-serif;
   scroll-behavior: smooth;
}

body {
   display: flex;
   flex-direction: column;
   height: 100vh;
   gap: 1.2rem;
}

.navbar-first {
   border-bottom: 1px rgb(190, 190, 190) solid;
}

.nav-link:hover {
   color: red;
}

.active {
   color: red;
}

.ozelnav {
   display: flex;
   width: 45rem;
   justify-content: space-between;
   margin-right: 2.8rem;
}

.container-fluid {
   display: flex;
   width: 100%;
}

.container-fluid .altdiv {
   display: flex;
   width: 50rem;
   justify-content: space-around;

}

.container-fluid .altdiv ul {
   display: flex;
   width: 45rem;
   justify-content: space-around;
   gap: 1.2rem;
}

.background-carousel {
   width: 100%;
   height: 84rem;
}

.tanitim {
   display: flex;
   width: 100%;
   height: 68rem;
   padding: 3.4rem;
   margin: 3.4rem;
   align-items: center;
   justify-content: center;
}

.tanitim div img {
   width: 32rem;
   height: 22rem;
}

.tanitim .text span {
   text-align: center;
   justify-content: center;
   align-items: center;
   width: 35rem;
}

div .text {
   display: flex;
   flex-direction: column;
   height: 22rem;
   align-items: center;
   justify-content: center;
   min-width: 20rem;
   margin-left: 1rem;
   margin-top: 15px;
}

div .text h2 {
   color: red;
}

div .text span {
   text-align: center;
}

.hizmetler {
   display: flex;
   flex-direction: column;
   margin-top: 6rem;
   width: 100%;
   height: 64rem;
   align-items: center;
}

.belgeler {
   display: flex;
   flex-direction: column;
   margin: auto;
}

.belgeler .sertifikalar {
   display: flex;
   justify-content: space-around;
   padding: 4px;
}

.hizmetler h2 {
   font-family: 'Times New Roman', Times, serif;
   font-weight: bold;
   text-align: center;
   width: 24rem;
   border-bottom: 1px red solid;
   margin-bottom: 1.8rem;
}

.card {
   display: flex;
   width: 100%;
   height: 50rem;
   border: none;
   gap: 5px;
}

.card .first-card {
   display: flex;
   justify-content: center;
   align-items: center;
}

.card .one-card {
   display: flex;
   justify-content: center;
   align-items: center;
}

.card .two-card {
   display: flex;
   justify-content: center;
   align-items: center;
}

.card .first-card a {
   margin: 1.6rem;
   width: 30rem;
   height: 25rem;
   border-radius: 8px;
}

.card .one-card img {
   margin: 1.6rem;
   width: 30rem;
   height: 25rem;
   border-radius: 8px;
}

.card .two-card img {
   text-decoration: none;
   margin: 1.6rem;
   width: 30rem;
   height: 25rem;
   border-radius: 8px;
   align-items: center;
}

.card .first-card a span {
   position: relative;
   left: 27%;
   bottom: -82%;
   font-size: xx-large;
   text-decoration: none;
   color: #ffffff;
   width: 15rem;
   height: 2rem;
   border-radius: 4px;
}

.card .second-card {
   display: flex;
   justify-content: center;
   align-items: center;
}

.card .second-card a {
   text-decoration: none;
   margin: 1.6rem;
   width: 30rem;
   height: 25rem;
   border-radius: 8px;
   align-items: center;
}

.card .second-card a span {

   position: relative;
   left: 23%;
   bottom: -82%;
   font-size: xx-large;
   text-decoration: none;
   color: #ffffff;
   width: 15rem;
   height: 2rem;
   border-radius: 4px;
}

.belgeler {
   margin-top: 5rem;
   width: 100%;
   height: 64rem;
   align-items: center;
   justify-content: center;
   color: red;
}

.belgeler h1 {
   text-align: center;
}

footer {
   display: flex;
   position:static;
   width: 100%;
   height: 42rem;
   background-color: rgb(37, 36, 36);
   color: #fff;

}

footer .main-footer {
   display: flex;
   width: 100%;
   height: 21rem;
   padding: 4rem;
   gap: 4rem;
}

footer .main-footer .company {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

footer .main-footer .sayfalar {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

footer .main-footer .iletisim {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.black-name {
   display: flex;
   position: relative;
   background-color: black;
   width: 100%;
   height: 5rem;
   color: #fff;
   align-items: center;
}

.black-name h2 {
   display: flex;
   height: 5rem;
   margin-left: 8rem;
   font-weight: bold;
   align-items: center;
}

.cevre-politika {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 30rem;
   margin-top: 3.2rem;
   justify-content: center;
   align-items: center;
   gap: 1.2rem;
}

.cevre-politika h2 {
   color: rgb(238, 47, 47);
   font-weight: 600;
}

.cevre-politika div {
   width: 50rem;
}

.cevre-politika div span {
   font-size: small;
   text-align: center;
}

.makina-div {
   display: inline-block;
   flex-direction: column;
   width: 100%;
   height: 64rem;
   align-items: center;
   justify-content: center;
   padding: 2rem;
   margin: 2rem;
}

.makina-div .diktorna, .makina-div .universaltorna, .makina-div .cncborwek, .makina-div .all {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 2.4rem;
   margin: auto;
   width: 70%;
   height: 21rem;
   color: #fff;
   border-radius: 3px;
}

.iletisim {
   display: flex;
   width: 100%;
   height: 80%;
   justify-content: space-between;
   align-items: center;
   margin: auto;
}

.iletisim div {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 2.5rem;
   gap: 4px;
}

.iletisim div h4 {
   color: red;
}

.form {
   display: flex;
   flex-direction: column;
}

.form h4 {
   margin: auto;
   margin-top: 6rem;
}

.form input {
   margin: 1.2rem;
   display: flex;
   width: 95%;
   height: 3rem;
   padding: 0.3rem;
}

.form textarea {
   margin: 1.2rem;

}

.form button {
   width: 10rem;
   height: 3rem;
   background-color: black;
   color: #fff;
   margin: auto;
   margin-bottom: 3rem;
}

.referanslar {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin-top: 2.4rem;
   margin-left: 1.2rem;
   width: 100%;
   height: 68rem;
   gap: 2rem;
}

.referanslar div {
   display: flex;
   width: 18rem;
   height: 10rem;
   box-shadow: 4px 4px 8px 12px rgba(0, 0, 0, 0.1);
   border-radius: 4px;

}

.referanslar div img {
   width: 100%;
   height: 100%;
}

.projeler-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 2.4rem;
   margin: auto;
   justify-content: center;
   align-items: center;
}

.carousel-item {
   position: relative;
   text-align: center;
}

.carousel-first-div {
   position: absolute;
   top: 40%;
   left: 24%;
   transform: translate(-50%, -50%);
   width: 32rem;
   height: 18rem;
   color: #fff;
   background-color: rgb(8, 8, 8);
   opacity: 0.8;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   border-radius: 4px;
}

.carousel-first-div h2 {
   font-size: 24px;
}

.carousel-first-div span {
   font-size: 40px;
}

.carousel-first-div p {
   font-size: 16px;
}