:root {
  --primary: #68AD56;
  --secondary: #2f2e2e;
  --white: #fffff;
}
@font-face {
  font-family: 'CabinetGrotesk-Regular';
  src: url('/lib/fonts/CabinetGrotesk-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'CabinetGrotesk-Bold';
  src: url('/lib/fonts/CabinetGrotesk-Bold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'CabinetGrotesk-Extrabold';
  src: url('/lib/fonts/CabinetGrotesk-Extrabold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

.bg-pri-color {
  background-color: var(--primary);
}

.bg-sec-color {
  background-color: var(--secondary);
}

.text-pri-color {
  color: var(--primary) !important;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}
.fw-900 {
  font-weight: 900;
}

.fw-400 {
  font-weight: 400;
}
.fw-300 {
  font-weight: 300 !important;
}

.bg-sec-color {
  background-color: var(--secondary);
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: var(--primary) !important;
}

html {
  font-size: 14px;
  overflow-x: hidden;
}
body
{
  max-width: 100% !important;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
  .d-p-l-5
  {
    padding-left: 5rem;
  }
  .d-p-r-5
  {
    padding-right: 5rem;
  }
  .d-p-1
  {
    padding: .25rem;
  }
  .d-p-2
  {
    padding: .5rem;
  }
  .d-p-3
  {
    padding: 1rem;
  }
  .d-p-4
  {
    padding: 1.5rem;
  }
  .d-p-5
  {
    padding: 3rem;
  }
  .d-m-1
  {
    margin: .25rem;
  }
  .d-m-2
  {
    margin: .5rem;
  }
  .d-m-3
  {
    margin: 1rem;
  }
  .d-m-4
  {
    margin: 1.5rem;
  }
  .d-m-5
  {
    margin: 3rem;
  }
  .d-m-x-1
  {
    margin: 0 .25rem;
  }
  .d-m-x-2
  {
    margin: 0 .5rem;
  }
  .d-m-x-3
  {
    margin: 0 1rem;
  }
  .d-m-x-4
  {
    margin: 0 1.5rem;
  }
  .d-m-x-5
  {
    margin: 0 3rem;
  }
  .d-m-y-1
  {
    margin: .25rem 0;
  }
  .d-m-y-2
  {
    margin: .5rem 0;
  }
  .d-m-y-3
  {
    margin: 1rem 0;
  }
  .d-m-y-4
  {
    margin: 1.5rem 0;
  }
  .d-m-y-5
  {
    margin: 3rem 0;
  }
  .slider
  {
    background-color: #EFF7EE;
    min-height: 580px;
    margin: auto;
    margin-left: 3rem;
    margin-right: 3rem;
    border-radius: 2rem;
  }
}
/* mobil */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
  .mt-none-mobile
  {
    margin-top: 0 !important
  }
  .nasil-calisir 
  {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
  .contact-yaprak-2, .contact-yaprak-1
  {
    opacity: .3;
  }
  .contact-yaprak-1
  {
    right: -10% !important;
  }
  .blog-post
  {
    margin: 2rem 1rem 2rem 1rem !important;
  }
  .blog-box-container
  {
    margin: 0 !important;
  }
  .page-head-container
  {
    margin: 0 1rem !important;
  }
  .page-head-container .world
  {
    right: -5% !important;
    top: -5% !important;
    width: 10rem !important;
    opacity: .3;
  }
  .page-head-yaprak
  {
    right: 0% !important;
    top: -2% !important;
    width: 5rem !important;
    opacity: .5;
  }
  .cift-yaprak-soru
  {
    z-index: 0 !important;
  }
  .p-none-mobile
  {
    padding: 0 0 !important;
  }
  .px-1-mobile
  {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .mb-1-mobile
  {
    margin-bottom: 1rem !important;
  }
  .mt-2-mobile
  {
    margin-top: 2rem !important;
  }
  .ekip-yaprak-1
  {
    top: 2% !important;
  }
  .ekip-yaprak-2
  {
    top: 3% !important;
  }
  .page-head-container .page-head-yaprak-2
  {
    right: 10% !important;
    bottom: -20% !important;
    width: 5rem !important;
    opacity: .5;
  }
  .breadcrumb
  {
    z-index: 10;
  }
  .slider
  {
    background-color: #EFF7EE;
    min-height: 580px;
    margin: auto;
    margin: 0 1rem;
    border-radius: 2rem;
  }
  .slider span
  {
    z-index: 10;
  }
  topbar
  {
    display: none;
  }
  .yaprak-1
  {
    top: 3% !important;
    left: 60% !important;
    opacity: .3;
  }
  .slide-1
  {
    padding: 1rem;
  }
  .slider-bottom-img
  {
    padding-left: 0 !important;
    padding: 2rem 1rem;
    margin: auto;
  }
  .home-contact-container div
  {
    margin-top: 1rem;
  }
  .contact-2
  {
    height: 90px !important;
    margin-bottom: 1rem;
  }
  .about-yaprak-2
  {
    right: 0% !important;
    opacity: .5;
    margin-top: .5rem;
    rotate: 180deg;
  }
  .about-img
  {
    max-width: 113%;
    min-width: 100%;
    height: auto !important;
    margin-bottom: 2rem;
    padding-top: 2rem;
  }
  .about-boxes
  {
    padding: 0 2rem !important;
  }
  .about-boxes div
  {
    max-width: 100%;
    padding: .5rem;
  }
  .about-boxes h5
  {
    padding-bottom: .5rem;
  }
  .panel-1
  {
    margin-bottom: 3rem;
  }
  .panel-1 .cift-yaprak
  {
    top: 13% !important;
    left: 70% !important;
  }
  .panel-1-2
  {
    max-width: 100%;
    margin-left: 3rem;
    height: 400px !important;
    
  }
  .panel-1
  {
    max-width: 100%;
    padding-left: 0 !important;
    padding: 2rem 2rem !important;
  }
  .panel-1 span
  {
    width: auto !important;
  }
  .panel-1-2 .panel-world-img
  {
    top: -7% !important;
    width: 15rem;
  }
  .panel-2-2
  {
    margin-bottom: 3rem;
  }
  .panel-2 .panel-world-img-2
  {
    width: 15rem;
    top: -7% !important;
  }
  .panel-2
  {
    max-width: 100%;
    margin-left: -3rem;
    height: 400px !important;
  }
  .panel-2-2 .cift-yaprak-2
  {
    top: 13% !important;
    left: 70% !important;
    width: 5rem;
  }
  .panel-2-2
  {
    max-width: 100%;
    padding-left: 0 !important;
    padding: 2rem 2rem !important;
  }
  .panel-2-2 span
  {
    width: auto !important;
  }
  .kent-temizlik-outline
  {
    padding-top: 0 !important;
  }
  .kent-temizlik-inner
  {
    margin-top: 2rem !important;
    margin-bottom: 4rem !important;
  }
  .panel-3
  {
    margin-bottom: 3rem;
  }
  .panel-3 .cift-yaprak
  {
    top: 13% !important;
    left: 70% !important;
  }
  .panel-3-2
  {
    max-width: 100%;
    margin-left: 3rem;
    height: 400px !important;
    
  }
  .panel-3
  {
    max-width: 100%;
    padding-left: 0 !important;
    padding: 2rem 2rem !important;
  }
  .panel-3 span
  {
    width: auto !important;
  }
  .panel-3-2 .panel-world-img
  {
    top: -7% !important;
    width: 15rem;
  }
  .cop-toplama-inner
  {
    flex-direction: column-reverse;
    margin-top: -1rem !important;
  }
  .sponsor-container
  {
    padding: 0 2rem;
  }
  .sponsor-container h5
  {
    font-size: 1.8rem !important;
  }
  .soru-container
  {
    width: 100%;
    padding: 0 1rem !important;
  }
  .soru-container div
  {
    padding: 0rem 1rem;
  }
  .soru-img
  {
    opacity: .3;
    scale: 2.5 !important;
    rotate: 0deg !important;
    padding: 0 !important;
    padding-top: 4rem !important;
  }
  .call-us div
  {
    padding: 0 2rem;
    flex-direction: column !important;
    align-items: center;
  }
  .call-us div h3
  {
    font-size: 2rem !important;
  }
  .call-us div a
  {
    font-size: 1.1rem !important;
  }
  footer
  {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  footer div:first-child
  {
    flex-direction: column !important;
  }
  .f-contact, .f-contact div
  {
    text-align: start !important;
  }
  .social-icons
  {
    justify-content: start !important;
  }
}

.map
{
  padding: 0 5rem;
}
.map iframe
{
  border-radius: 1rem;
}
.contact-box-container
{
  padding: 0 4rem;
}
.radius-1
{
  border-radius: 1rem;
}
.contact-box-h2
{
  font-size: 1.6rem;
  font-family: CabinetGrotesk-Bold;
}

.z-index-10
{
  z-index: 10 !important;
}
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: 'CabinetGrotesk-Regular', sans-serif;
  background-color: white;
  max-width: 100%;
  overflow-x: hidden;
}
.contact-box-form span, .contact-box-form input, .contact-box-form textarea, .contact-box-form select
{
  font-size: 1.1rem;
}
.form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.navbar-div-btn {
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  width: 11rem;
  cursor: pointer;
  padding: .5rem 1rem;
}
.line
{
  height: 20px;
  width: 2px;
  top: -30%;
  left: 50%;
  background-color: var(--primary);
  position: absolute;
}
.line-2
{
  height: 10px;
  width: 2px;
  bottom: -10%;
  left: 50%;
  background-color: var(--primary);
  position: absolute;
}
.nav-item
{
  margin: 1rem 0;
}
.btn-top-right
{
  rotate: 270deg;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.2rem;
}

.yaprak-1
{
  position: absolute;
  width: 12rem;
  rotate: 150deg;
  left: 45%;
  top: 0%;
}
.yaprak-2
{
  position: absolute;
  width: 8rem;
  rotate: 180deg;
  left: 45%;
  bottom: 5%;
}
.home-contact-container div .d-flex
{
  font-size: 3rem;
  border-radius: 1rem;
}
h1,h2,h3,h4,h5,h6,p,ul
{
  margin: 0;
  padding: 0;
}
.section-head
{
  border-radius: 1rem;
}
.about-img
{
  height: 30rem;
  margin-top: -2rem;
  transform: rotateY(180deg);
  margin-left: -1rem;
}
.about-box
{
  border-radius: 1rem;
  width: 40rem;
}
.outlined-text-about {
  font-size: 1.7rem;
  font-weight: 800;
  font-family: CabinetGrotesk-Extrabold;
  color: transparent;
  -webkit-text-stroke: 1px lightgray;
  position: absolute;
  right: 2%;
  top: 2%;
}
.about-box-yaprak
{
  position: absolute;
  right: 0%;
  bottom: -2%;
  opacity: .15;
}
.about-yaprak
{
  width: 10rem;
  position: absolute;
  rotate: 220deg;
  top: 0%;
  left: 1%;
  transform: rotateX(180deg);
}
.about-yaprak-2
{
  width: 9rem;
  position: absolute;
  top: 5%;
  right: 10%;
}
.contact-box-img
{
  position: absolute;
  filter: invert(100%) brightness(70%) sepia(1) saturate(0) hue-rotate(0deg);
  width: 3rem;
  right: 1%;
  top: 2%;
}
.contact-map-bottom-box
{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: -15%;
  left: 0;
  height: 1.7rem;
  width: 100%;
  z-index: 2;
}
.tree-background
{
  position: absolute;
  width: 100%;
  bottom: 0;
  filter: invert(100%) brightness(50%) sepia(1) saturate(0) hue-rotate(0deg);
}
.panel-gorsel
{
  position: absolute;
  width: 43rem;
  max-width: 100%;
  bottom: 0;
  left: -5%;
}
.panel-world-img
{
  position: absolute;
  width: 22rem;
  left: 20%;
  top: -10%;
}
.cift-yaprak
{
  position: absolute;
  left: 65%;
  top: 15%;
  width: 6rem;
}
.tree-background-2
{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  filter: invert(100%) brightness(50%) sepia(1) saturate(0) hue-rotate(0deg);
  transform: rotateY(180deg);
}
.panel-gorsel-2
{
  position: absolute;
  width: 43rem;
  max-width: 100%;
  bottom: 0;
  right: -5%;
}
.panel-world-img-2
{
  position: absolute;
  width: 22rem;
  right: 20%;
  top: -10%;
}
.cift-yaprak-2
{
  position: absolute;
  left: 65%;
  top: 14%;
  width: 6rem;
}
.sponsorlar img
{
  max-width: 220px;
  margin: auto;
  filter: brightness(80%) grayscale(100%);
  opacity: .5;
  height: auto;
  object-fit: contain;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.sponsor-inner:hover img {
  opacity: 1;
  filter: brightness(1) grayscale(0);
}
.sponsor-inner:hover
{
  border: 1px solid whitesmoke;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.sponsor-inner
{
  border: 1px solid transparent;
}
.slider-btn
{
  padding: .3rem .7rem;
  background-color: white;
  border-radius: .8rem;
  color: lightgray;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all .5s ease;
}
.slider-btn:hover
{
  background-color: var(--primary);
  color: white;
}
.soru-bg {
  border-radius: 1rem;
  overflow: hidden;
  width: 100%;
  height: Auto;
  background: linear-gradient(rgba(104, 173, 86, 0.95), rgba(104, 173, 86, 0.95)), 
              url('/img/soru-bg.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.font-extra-bold
{
  font-family: CabinetGrotesk-Extrabold;
}
.font-bold
{
  font-family: CabinetGrotesk-Bold;
}
.soru-img
{
  max-width: 100%;
  height: 200px;
  scale: 3.2;
  padding-top: 2rem;
  padding-left: 4rem;
  transform: rotateY(180deg);
  rotate: -5deg;
}
.cift-yaprak-soru
{
  z-index: 2;
  rotate: 180deg;
  top: -2%;
  right: -1%;
}
.yaprak-soru
{
  z-index: 2;
  rotate: 150deg;
  top: -8%;
  right: 19%;
  width: 10rem;
}
.pri-line
{
  height: 1.5px;
  background-color: var(--primary);
  width: 80%;
}
.page-head-container
{
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 1rem;
  margin: 0 5rem;
  padding: 2rem;
  background-color: #EFF7EE;
}
.breadcrumb
{
  background-color: white;
  border-radius: 1rem;
}
.page-head-container .world
{
  width: 25rem;
  right: -2%;
  top: -35%;
  position: absolute;
}
.page-head-yaprak
{
  width: 10em;
  left: 50%;
  top: -1%;
  rotate: 145deg;
  position: absolute;
}

.page-head-yaprak-2
{
  width: 5rem;
  bottom: -18%;
  left: 40%;
  position: absolute;
  rotate: 180deg;
}
.ekip-box img
{
  border-radius: 1rem;
  width: 100%;
}
.ekip-box
{
  border-radius: 1rem;
  padding: 1.3rem;
}
.ekip-box button
{
  background-color: #f4f4f4;
  border: 2px solid lightgray;
  border-radius: 1rem;
  font-family: CabinetGrotesk-Bold
}
.ekip-yaprak-1
{
  right: -1.5%;
  rotate: -110deg;
  top: 5%;
  width: 6rem;
  position: absolute;
}
.ekip-yaprak-2
{
  left: -1%;
  rotate: 30deg;
  top: 5%;
  position: absolute;
}
.blog-box-container
{
  border-radius: 1rem;
  margin: 0rem 4rem;
}
.blog-box img
{
  border-radius: 1rem;
  width: 100%;
  min-height: 250px;
  max-height: 250px;
  object-fit: cover;
}
.blog-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  background: linear-gradient(to top, #68AD56 5%, rgba(104, 173, 86, 0) 75%);
  border-radius: 1rem;
  z-index: 1;
}

.row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
.blog-box-top
{
  position: absolute;
  top: 6%;
  width: 94%;
  left: 3%;
}
.blog-box-top span
{
  font-size: .8rem;
  border-radius: .5rem;
  padding: .3rem 1rem;
  font-weight: 600;
}
.blog-box-title
{
  position: absolute;
  width: 95%;
  text-align: start;
  left: 5%;
  bottom: 5%;
  z-index: 10;
  color: white;
  font-family: CabinetGrotesk-Bold;
  font-size: 1.8rem;
}
.blog-box-outline
{
  padding: 1rem;
}
.blog-post-img-container img
{
  width: 100%;
  height: 320px;
  border-radius: 1rem;
  object-fit: cover;
  object-position: center;
}
.blog-post
{
  margin: 2rem 5rem 2rem 5rem;
}
.blog-post-inner-boxes
{
  position: absolute;
  top: 6%;
  left: 2%;
  width: 96%;
}
.blog-post-inner-boxes span
{
  padding: .3rem 1rem;
  border-radius: .5rem;
  font-size: .8rem;
  font-weight: 600;
}
.post-inner h1
{
  color: var(--primary);
  font-family: CabinetGrotesk-Bold;
}
.contact-yaprak-1
{
  position: absolute;
  rotate: 150deg;
  width: 10rem;
  top: 50%;
  right: -5%;
  z-index: -1;
}
.contact-yaprak-2
{
  position: absolute;
  rotate: 90deg;
  width: 6rem;
  top: -8%;
  right: 2%;
  z-index: -1;
}
.blog-box
{
  cursor: pointer;
}
.nasil-calisir
{
  background-color: #EFF7EE;
  margin-left: 5rem;
  margin-right: 5rem;
  border-radius: 1rem;
  margin-bottom: 3rem;
}
.img-rounded-bg
{
  background-color: #edebeb;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.nasil-calisir h4
{
  font-family: CabinetGrotesk-Bold;
  font-size: 1.4rem;
}
input:focus, select:focus, textarea:focus {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--primary) !important;
}