*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Inter', sans-serif; /* Inter fontunu belirle */
}
#gunler{
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 5px;
}
.section-space{
    margin: 12.5vh 0;
}
@media screen and (max-width: 768px){
    .section-space{
        margin: 7.5vh 0;
    }
    
}


.custom-bg-color 
{
    background: linear-gradient(to right, #ffffff, #9ee1e2); /* Gradient arka plan rengi */
}

nav{
    background-color: #66CED0;
    background-image: linear-gradient(to left, #66CED0 , #ffffff);
    position: sticky !important;
    top: 0;
    z-index: 100;
}
nav .nav-link{
    color: initial;
}
nav .nav-link:hover{
    text-decoration: underline;
}
nav .navbar-nav{
    gap: 25px;
}
nav .navbar-toggler{
    border: 2px solid #000000;
}
nav .navbar-toggler-icon{
    width: initial !important;
    height: initial !important;
    vertical-align: initial !important;
    content: initial !important;
    background: initial !important;
    background-size: initial !important;

}


.lang-select .dropdown-menu{
    right: 0;
    left: initial;
    text-align: right;
    min-width: max-content;
    background: #038487;
}
.lang-select .dropdown-menu span{
    color: white;
}
.lang-select .dropdown-menu a:hover span{
    color: black;
}
.lang-select .dropdown-item {
    width: max-content;
}
.login-button {
    padding: 10px;
    border-radius: 5px;
    background-color: #038487; /* Arka plan rengi */
    color: #fff; /* Yazı rengi (isteğe bağlı, özel bir renk kullanmak istiyorsanız ayarlayabilirsiniz) */
    text-align: center; /* Yazıyı merkezlemek için */
}
.login-button:hover {
    color: white;
}

.btn-hc{
    background-color: #038487; /* Arka plan rengi */
    color: white;
}
.btn-hc:hover{
    color: white;
}

footer {
    background-color: #038487;
    color: #fff;
    padding: 9vh 5% 3vh;
}
.footer-row{
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media screen and (max-width: 900px){
    .footer-row{
        grid-template-columns: 1fr;
    }
}


.footer-container hr {
    background-color: #fff;
}

.bottom-hr{
    height: 2px;
    background: white;
    border-radius: 20px;
}

.card-alarm-inner{
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.footer-ul ul li 
{
    margin-bottom: 2rem;
}
footer .col-md-3 h4, footer .footer-links-wrapper a{
    font-size: 2rem !important;

}
.subscription-wrapper{
    position: relative;
}
.subscription-wrapper div
{
    background-color: #F1C40F;
    width: max-content;
    padding: 7px 10px;
    border-radius: 3px;
    position: absolute;
    top: 0px;
    right: 0;
}


ul li {
    list-style: none; /* Noktaları kaldırmak için */
    padding: 0; /* Varsayılan liste içi boşluğu sıfırlamak için */
}

footer .icon-container {
    display: flex;
    justify-content: flex-end;
}

footer .icon {
    margin-left: 1.5rem; /* İcon'lar arasındaki boşluğu belirleyin */
}

.background-image-div {
    width: 100%; /* İhtiyacınıza göre genişliği belirleyin */
    height: 240px; /* İhtiyacınıza göre yüksekliği belirleyin */
    background-size: cover; /* Resmin div içinde kaplamasını sağlar */
    background-position: center; /* Resmin div içinde konumunu ayarlar */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("img/breadcrumb.png");
}

.background-image-div h1 {
    color: #038487;
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
}
@media screen and (max-width: 768px){
    .background-image-div{
        height: 125px;
    }
    .background-image-div h1{
        font-size: 2.5rem;
    }
}
@media screen and (max-width: 500px){
    .background-image-div{
        height: 125px;
        padding: 10px;
    }
    .background-image-div h1{
        font-size: 2rem;
    }
}

.background-image-div h4 {
    color: #038487;
    font-size: 1.2rem;
}

/* login style */

#loginPage .form-hr {
    display: flex;
    align-items: center;
    gap: 10px;
}

#loginPage .form-hr span {
    flex-grow: 1;
    background: #038487;
    height: 2px;
}
#loginPage .form-hr .hr-text{
    color: #038487;
    font-size: 14px;
}

#loginPage .loginPage-inner{
    width: 100%;
    margin: auto;
}
#loginPage .loginPage-form-area{
    width: 60%;
    margin: 100px auto;
}
#loginPage .input-group span{
    background: #eee;
}
#loginPage .input-group input{
    background: #eee;
}

#loginPage .icon-container{
    display: flex;
    gap: 15px;
}
#loginPage .icon{
    border: 1px solid black;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
}
#loginPage .icon svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
    #loginPage .loginPage-form-area {
      width: 80%; /* veya istediğiniz genişlikte bir değer */
    }
  
    #loginPage .input-group input {
      width: 100%;
    }
  }

/* .form-control{
    height: calc(-4.5rem + 4rem + 4rem) !important;
    border-radius: 10px;
} */

/* Checkbox boyutu */
.form-check-input {
    width: 20px; /* Genişlik */
    height: 20px; /* Yükseklik */
    border-radius: 1.5rem;
}

/* Etiketin font boyutu */
.form-check-label {
    font-size: 1rem; /* Yazı boyutu */
    padding: 3px 0 0 11px; /* Yazı ile checkbox arasındaki boşluk */
    color: #7D8486;
}

/* Beni Hatırla yazısı stil */
.form-check-label a {
    font-size: 14px; /* Yazı boyutu */
    color: #007BFF; /* Renk */
}

.float-right
{
    text-decoration: none !important;
}

.login-title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 50% 0;
    background-color: #038487;
}

.btn-outline-primary {
    color: #ffffff;
    border-color: #ffffff;
    padding: 10px 22px;
    border-radius: 7px;
}

.btn-outline-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #08dee2;
    border-color: #08dee2; /*set the color you want here*/
}

/* setting page */

#settingsPage .setting-form .form-groups{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#settingsPage .setting-form .setting-form-submit{
    display: flex;
    width: 50%;
    margin: auto;
}

#settingsPage .setting-form
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#settingsPage .setting-form-submit{
    display: flex;
    justify-content: center;    
    display: inline-block;
}

#settingsPage .setting-form-submit{
    background-color: #038487;
    color: #FFFFFF;
}

#settingsPage .form-groups input{
    background: #eee;
}

#settingsPage form button{
    border-color: transparent;
    border-radius: 5px;
}

#settingsPage2 form{
    width: 50%;
    margin: 10vh auto;
}
@media screen and (max-width: 900px){
    #settingsPage2 form{
        width: 75%;
    }
}
@media screen and (max-width: 768px){
    .login-title{
        border-radius: initial !important;
        padding: 12.5px;
    }
}

#settingsPage2 .form-groups input{
    background: #eee;
}

#settingsPage2 form button{
    background: #038487;
    color: #FFFFFF;
    border-color: transparent;
}

/* forgot password page */

.forgotPassword-form-hr{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #038487;
    font-size: 14px;
}

/* iletişim sayfası */
#iletisimPage .custom-image {
    border-radius: 1rem;
    width: 100%;
    height: auto;
}

#iletisimPage .imageContainer{
    padding: 0rem 2rem 0rem 0rem;
}

#iletisimPage .form-settings{
    padding: 3rem 4rem;
}
@media screen and (max-width: 1100px){
    #iletisimPage .form-settings{
        padding: 2rem;
    }
}
@media screen and (max-width: 768px){
    #iletisimPage .imageContainer{
        display: none;
    }
    #iletisimPage .form-settings{
        padding: 2rem 1rem;
    }
}


.contactPhone{
    padding: 2rem 4rem 2rem 1rem;
    width: 80%;
    margin: auto;
    background-color: #C5D4F3;
    border-radius: 1rem;
}

.contactPhone img{
    position: absolute;
    right: -125px;
    width: 250px
}


.contactForm{
    width: 80%;
    margin: auto;
}
.downloadApp{
    width: 80%;
    margin: auto;
}
.downloadApp img{
    width: 100%;
}

.contactPhone button{
    color: #FFFFFF;
    background-color: #038487;
    border-radius: 0.5rem;
}


.contactPhone h4{
    color: #038487;
    text-align: center;
}

.contactPhone .col-md-4{
    display: flex;
    justify-content: center;
    align-items: center;
}

#iletisimPage .icon-container{
    display: flex;
    gap: 15px;
}

#iletisimPage .icon{
    border: 1px solid inherit;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
}


@media only screen and (max-width: 768px) {
    .contactPhone .phone-wrapper{
        display: none !important;
    }
    .contactPhone{
        gap: 10px;
        padding: 20px 0;
    }
}

/* paketler sayfası */
#paketlerimPage .paketler{
    width: 80%;
    margin: auto;
}


.paket-row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
}
@media screen and (max-width: 1100px){
    .paket-row{
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 768px){
    .paket-row{
        grid-template-columns: 1fr;
    }
}


#paketlerimPage .paket-card .card-img-top h4{
    padding: 40px 15px;
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
}

#paketlerimPage .paket-card .card-body{
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: 44px;
    margin-bottom: 25px;
}

#paketlerimPage .paket-card .card-body .svg-and-text-container{
    display: flex;
    align-items: center; /* Yatayda ortala */
    margin-bottom: 3px;
}
.svg-and-text-container svg{
    width: 25px;
}

#paketlerimPage .paket-card .card-body .svg-and-text-container svg{
    margin-right: 10px; /* SVG ile metin arasında bir boşluk bırakmak için */
    margin-bottom: 1rem;
}

.faqs h4{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 4rem;
    font-weight: bold;
    color: #038487;
    font-size: 3rem;
}
@media screen and (max-width: 768px){
    .faqs h4{
        margin-bottom: 2.5px;
        font-size: 2.5rem;
    }
    
}
.faqs .card{
    border: 2px solid #038487;
}
.faqs .card-header{
    border-bottom: initial;
}

.faqs .accordion .card-header h2 a{
    color: #038487;
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}

.faqs .accordion .card{
    border-radius: 1rem;
}

.faqs .accordion .card{
    margin-bottom: 1rem;
}

#paketlerimPage .paketler .card-body svg{
    margin-right:auto;
    padding-top: 1rem;
}

#paketlerimPage .paketler .paket-card a{
    position: absolute;
    border-radius: 6px;
    bottom: -2.5vh;
    left: 50%;
    transform: translateX(-50%);
    background-color: #038487;
    color: #FFFFFF;
    padding: 7px 16px;
    border: none;
}

#paketlerimPage .paketler .paket-card .price{
    color: #038487;
    font-weight: bold;
    border-radius: 6px;
    bottom: -1.2rem;
    right: 4.3rem;
}


#paketlerimPage .paketler .paket-card .price{
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    font-weight: bold;
    font-size: 1.4rem;
}

#paketlerimPage .paketler .paket-card .packet-time{
    background-color: #FFFFFF;
    padding: 1.5px 10px;
    display: flex;
    justify-content: center;
    color: #038487;
    position: absolute;
    right: 0rem;
    top: 2.5vh;
}

#paketlerimPage .paket-card .card-img-top{
    margin-bottom: 25px;
}

#paketlerimPage .paket-card .card-img-top .feature{
    color: #FFFFFF;
    text-align: center;
    padding: 0 15px 10px;
}

#paketlerimPage .paket-card{
    border: 2px solid rgba(0,0,0,.125);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 100%;
    width: 100%;
    position: relative;
}

/* Hakkımızda sayfası */

#hakkimizdaPage .stats-container{
    /* display: flex; */
}

#hakkimizdaPage .stats-container .columns{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;
}
#hakkimizdaPage .stats-container .columns-single{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
    border-radius: 34px;
    box-shadow: 0px 0px 30px rgba(0.3, 0.1, 0.1, 0.2);
}
#hakkimizdaPage .stats-container  .columns-single h4{
    margin: 0;
    font-weight: bold;
    color: #038487;
    font-size: 3rem;
}

#hakkimizdaPage .stats-container  .columns-single p{
    margin: 0;
    font-size: larger;
}

.references .columns{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
}

.references .columns-single{
    box-shadow: 0 20px 30px rgba(0.3, 0.1, 0.1, 0.2);
    border-radius: 31px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    min-height: 175px;
}

.references .columns-single img{
    width: 100%;
}
@media screen and (max-width: 992px){
    .references .columns-single{
        min-height: 125px;
    }
}
@media screen and (max-width: 768px){
    .references .columns{
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 576px){
    .references .columns-single{
        min-height: 100px;
    }
    #hakkimizdaPage .stats-container .columns{
        grid-template-columns: 1fr;
    }
}

.hakkimizdaVideo{
    border-radius: 40px;
    height: 66vh;
    width: 100%;
}


.references h4{
    font-weight: bold;
    text-align: center;
    color: #038487;
    font-size: 3rem;
}

@media screen and (max-width: 576px){
    .references h4{
        font-size: 1.5rem;
    }
}

/* kategoriler sayfası */
.kategoriler-container .columns{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 15px;
}

.kategoriler-container .columns-single img{
    width: 100%;
}

.kategoriler-container .columns-single{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    gap: 20px;
}

.kategoriler-container .columns-single p{
    margin: 0;
    text-align: center;
}


#kategorilerPage .rows-container .columns{
    display: flex;
    flex-direction: column;
}



#kategorilerPage .rows-container .columns-single{
    padding: 10px 7.5px;
    align-items: center;
    border-radius: 20px;
    min-height: 275px;
    position: relative; /* Pozisyonu relative yapmak gerekli */
    overflow: hidden; /* Animasyonun dışına taşmasını engeller */
}

.border-animation {
    box-shadow: 0 0 0 5px #038487;
    animation: spinAround 5s linear infinite;
}

@keyframes spinAround {
    0% {
        box-shadow: 0 0 0 2.5px #038487;
    }
    25% {
        box-shadow: 0 0 0 5px #038487, 0 0 0 5px transparent;
    }
    50% {
        box-shadow: 0 0 0 2ç5px transparent;
    }
    75% {
        box-shadow: 0 0 0 5px transparent, 0 0 0 5px #038487;
    }
    100% {
        box-shadow: 0 0 0 2.5px #038487;
    }
}

#kategorilerPage .rows-container .columns-single .col-md-10{
    padding-top: 18px;
}

#kategorilerPage .rows-container .columns-single .col-md-10 h4{
    font-weight: bold;
    color: #038487;
    font-size: 2rem;
    width: 100%;
}


#kategorilerPage .rows-container .columns-single .col-md-2 img{
    width: 100%;
}

@media screen and (max-width: 1024px){
    .kategoriler-container .columns{
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
    }
    #kategorilerPage .rows-container .columns-single .col-md-2 img{
        position: initial;
        height: initial;
        bottom: initial;
        left: initial;
    }
}
@media screen and (max-width: 768px){
    .kategoriler-container .columns{
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    #kategorilerPage .rows-container .columns-single .col-md-2 img{
        width: 20%;
    }
    .kategoriler-container .columns-single img{
        width: 75%;
        display: flex;
        margin: auto;
    }
}

/* alarm sayfası */

.reklam-alani{
    padding: 15px 10px;
    text-align: center;
    background: #FF6766;
    color: white;
    border-radius: 5px;
    font-weight: bold;
}


.hero{
    background: url("img/heroBG.png");
    background-size: cover;
    padding: 111px 0;
}
.hero h1{
    color: #34495E;
    font-weight: bold;
    margin-bottom: 20px;
}
.hero-img-wrapper{
    position: relative;
}

.hero-img-2, .hero-img-2{
    position: absolute;
}
.hero-img-2{
    bottom: -4vh;
}
.hero-img-3{
    top: -4vh;
}
.hero-img-pff{
    z-index: 99;
}
@media screen and (max-width: 1000px){
    .hero-img-pff{
        display: none;
    }
}
@media screen and (max-width: 768px){
    .hero{
        padding: 44px 0;
    }
    .hero-img-wrappers{
        display: none;
    }   
}
#base-alarm-container{
    padding: 50px;
    border: 2px solid #038487;
    border-radius: 5px;
}

.alarm-box{
    box-shadow: 0px 5px 2.5px 2.5px rgb(0 0 0 / 7.5%);
    border: 2px solid #038487;
    border-radius: 7.5px;
    padding: 7.5px;
    align-items: center;
    z-index: 99;
    background: white;
    width: 100%;
}
.alarm-time-text{
    margin: 0;
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
}
.alarm-box-actions{
    background: #038487;
    display: flex;
    flex-direction: column;
    margin-left: -10px;
    padding: 10px 10px 10px 20px;
    border-radius: 0 7.5px 7.5px 0;
    align-items: center;
    justify-content: center;
}

.cardtype2-inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cardtype2-box{
    /* overflow: auto; */
    /* z-index: 99; */
    margin: auto;
    align-items: center;
    width: 100%;
    background: white;
    border: 2px solid #d4d4d4;
    border-radius: 10px;
    box-shadow: 2.5px 0px 10px 5px rgb(0 0 0 / 15%);
}

.cardtype2-box-text{
    border: 2px solid #d7d7d7;
    border-top: none;
    border-bottom: none;
    padding: 15px;
}
.cardtype2-box-title{
    margin: 0;
    font-size: 1.55rem;
    font-weight: bold;
}
.cardtype2-box-remaining{
    font-size: 1.5rem;
    font-weight: bold;
    border-bottom: 3px solid #038487;
    width: max-content;
    margin: auto;
    margin-bottom: 10px;
}
.cardtype2-box-datetime, .cardtype2-box-remaining-wrapper{
    text-align: center;
    color: #038487;
}
@media screen and (max-width: 992px){
    .cardtype2-inner{
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 768px){
    .cardtype2-box-text{
        border: none !important;
    }
    .cardtype2-box-remaining{
        margin: initial;
    }
    .alarm-time-text, .cardtype2-box-datetime, .cardtype2-box-remaining-wrapper{
        text-align: initial;
    }
}

.card-dropdown-menu{
    background: #038487;
    right: 0 !important;
    left: initial !important;
    top: initial !important;
    bottom: initial !important;
    transform: initial !important;
}
.card-dropdown-menu:hover .card-dropdown{
    background: initial;
}
.card-dropdown{
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-dropdown span{
    color: white;
}
.dropdown-toggle{
    cursor: pointer;
}
.sub-type-header{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #038487;
    margin-top: 0;
    gap: 10px;
    padding: 7.5px;
    border-radius: 10px 10px 0 0;
    margin-bottom: 10px;
}
.sub-type-header img{
    width: 25px;
}

.sub-type-header p{
    color: white;
    font-weight: bold;
    margin-bottom: 0;
}