/* ============================================================
   Solaren company sections (info-top + services-top)
   From demo.templatemonster.com/demo/235684.html
   Scoped under `.solaren-company`. Rem values converted to px
   (template root was 62.5% -> 1rem = 10px).
   ============================================================ */

.solaren-company {
    font-family: 'Inter', sans-serif;
}

.solaren-company a {
    text-decoration: none;
    color: #fff;
}

.solaren-company .wow {
    visibility: hidden;
}

/* ---------- Info top ---------- */
.solaren-company .info-top {
    padding: 80px 0 40px;
    background-color: #fff;
}

.solaren-company .tabloozellik {
    max-width: 1260px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.solaren-company .tabloozellik::after {
    content: "";
    display: table;
    clear: both;
}

.solaren-company .tabloozellik [class^="tablo--"] {
    float: left;
}

.solaren-company .tabloozellik [class^="tablo--"]:not(:last-child) {
    margin-right: 30px;
}

.solaren-company .tabloozellik .tablo--1-ve-4 {
    width: calc((100% - 3 * 30px) / 4);
}

.solaren-company .paketler {
    perspective: 1500px;
    -moz-perspective: 1500px;
    position: relative;
    z-index: 4;
}

.solaren-company .hizmet-kutu .kutu-duzen {
    position: relative;
    display: block;
    overflow: hidden;
    text-align: center;
    padding: 46px 20px 54px 20px;
    border-radius: 5px;
    transition: all 300ms ease;
}

.solaren-company .hizmet-kutu .kutu-duzen:hover {
    background: #059669;
}

.solaren-company .hizmet-kutu .kutu-duzen:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 0%;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 5px;
    transition: all 500ms ease;
}

.solaren-company .hizmet-kutu .kutu-duzen:hover:before {
    height: 100%;
    top: 0;
}

.solaren-company .hizmet-kutu .kutu-duzen h3 {
    margin-bottom: 30px;
    font-size: 22px;
    font-weight: 700;
}

.solaren-company .hizmet-kutu .kutu-duzen h3 a {
    color: #059669;
    transition: color 300ms ease;
}

.solaren-company .hizmet-kutu .kutu-duzen:hover h3 a {
    color: #fff;
}

.solaren-company .hizmet-kutu .kutu-duzen .icon-box {
    position: relative;
    display: inline-block;
    margin-bottom: 33px;
}

.solaren-company .hizmet-kutu .kutu-duzen .icon-box i {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 50%;
    color: #059669;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    transition: all 500ms ease;
}

.solaren-company .hizmet-kutu .kutu-duzen .icon-box i svg {
    width: 60px;
    height: 60px;
}

.solaren-company .hizmet-kutu .kutu-duzen:hover .icon-box i {
    box-shadow: none;
}

.solaren-company .hizmet-kutu .kutu-duzen .icon-box .border-layer {
    position: absolute;
    width: 140px;
    height: 140px;
    left: -10px;
    top: -10px;
    border: 2px solid #fff;
    border-radius: 50%;
    clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%, 0 0);
    transition: all 500ms ease;
    animation: hizmet-rot 2s infinite linear;
    animation-play-state: paused;
}

.solaren-company .hizmet-kutu .kutu-duzen:hover .icon-box .border-layer {
    animation-play-state: running;
}

.solaren-company .hizmet-kutu .kutu-duzen:hover .border-layer {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0);
}

.solaren-company .hizmet-kutu .kutu-duzen .icon-box .border-layer:before {
    position: absolute;
    content: '';
    background: #fff;
    width: 12px;
    height: 12px;
    left: 15px;
    bottom: 9px;
    border-radius: 50%;
}

.solaren-company .hizmet-kutu .kutu-duzen p {
    color: #666;
    font-size: 14px;
    text-align: center;
    line-height: 1.7;
}

/* ---------- Services top (Who Are We) ---------- */
.solaren-company .services-top {
    padding: 80px 0 80px;
    background-color: #fff;
}

.solaren-company .h-yazi-ortalama {
    text-align: center;
}

.solaren-company .h-yazi-margin-orta-3 {
    margin-bottom: 10px;
    text-align: center;
}

.solaren-company .h2-baslik-hizmetler-2 {
    font-size: 34px;
    font-weight: 600;
    display: inline-block;
    color: #000;
    text-align: center;
    margin: 0;
}

.solaren-company .h2-baslik-hizmetler-2 strong {
    font-size: 50px;
    color: #059669;
}

.solaren-company .h2-baslik-anasayfa-ozel1 {
    font-size: 30px;
    font-weight: 600;
    display: inline-block;
    color: #000;
    line-height: 1.3em;
    margin: 0 0 20px 0;
}

.solaren-company .h2-baslik-anasayfa-ozel1 strong {
    color: #059669;
}

.solaren-company .paragraf {
    font-size: 14px;
    font-weight: 400;
    color: #616161;
    line-height: 1.7;
}

.solaren-company .paragraf a {
    color: #047857;
}

.solaren-company .divider {
    opacity: 0.5;
    height: auto;
    max-width: 100%;
    vertical-align: top;
}

.solaren-company .custom-button {
    height: 70px;
    line-height: 70px;
    display: inline-block;
    background: #047857;
    color: #fff;
    font-weight: 600;
    border: none;
    padding: 0 50px;
    position: relative;
    font-size: 16px;
    border-radius: 100px;
    box-shadow: 0 10px 24px rgba(5, 150, 105, 0.3);
    transition: all 0.35s ease-in-out;
}

.solaren-company .custom-button:before {
    content: "";
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.05;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.86, 0, 0.09, 1);
}

.solaren-company .custom-button:hover {
    text-decoration: none;
    color: #fff;
    background: #065f46;
    box-shadow: 0 12px 28px rgba(5, 150, 105, 0.4);
}

.solaren-company .custom-button:hover:before {
    width: 100%;
}

/* ---------- Grid ---------- */
.solaren-company .tablo {
    max-width: 1190px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.solaren-company .tablo::after {
    content: "";
    display: table;
    clear: both;
}

.solaren-company .tablo [class^="tablo--"] {
    float: left;
}

.solaren-company .tablo [class^="tablo--"]:not(:last-child) {
    margin-right: 60px;
}

.solaren-company .tablo .tablo--1-ve-2 {
    width: calc((100% - 60px) / 2);
}

.solaren-company .tablo .tablo--1-ve-3 {
    width: calc((100% - 2 * 60px) / 3);
}

/* ---------- Gallery (sun + bulb overlap) ---------- */
.solaren-company .tablo .tablo--1-ve-2 {
    position: relative;
}

.solaren-company .galeri1 {
    position: relative;
    text-align: center;
}

.solaren-company .imagerotate {
    position: relative;
    display: inline-block;
    width: 84%;
    max-width: 1080px;
    animation: spin 15s linear infinite;
}

.solaren-company .galeri {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.solaren-company .galeri__gorsel {
    width: 100%;
    outline-offset: 20px;
}

.solaren-company .galeri__gorsel--3 {
    width: 80%;
    max-width: 967px;
    border-radius: 3px;
}

.solaren-company .galeri1__gorsel {
    width: 100%;
    outline-offset: 20px;
}

/* ---------- Spacing helpers ---------- */
.solaren-company .bosluk3 {
    margin-top: 30px;
}

.solaren-company .bosluk333 {
    margin-top: 33px;
}

.solaren-company .bosluk3rh {
    margin-top: -70px;
}

.solaren-company .boslukicon {
    margin-top: 30px;
}

/* ---------- Keyframes ---------- */
@keyframes hizmet-rot {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* ---------- WOW animations ---------- */
.solaren-company .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.solaren-company .fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.solaren-company .fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.solaren-company .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
.solaren-company .zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@keyframes slideInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}
.solaren-company .slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .solaren-company .tabloozellik [class^="tablo--"]:not(:last-child) {
        margin-right: 0;
        margin-bottom: 60px;
    }
    .solaren-company .tabloozellik [class^="tablo--"] {
        width: 100% !important;
    }
    .solaren-company .tablo [class^="tablo--"]:not(:last-child) {
        margin-right: 0;
        margin-bottom: 60px;
    }
    .solaren-company .tablo [class^="tablo--"] {
        width: 100% !important;
    }
    .solaren-company .h2-baslik-hizmetler-2 {
        font-size: 30px;
    }
    .solaren-company .h2-baslik-anasayfa-ozel1 {
        font-size: 26px;
    }
    .solaren-company .paragraf {
        font-size: 15px;
    }
}

/* Display headings -> Sora (site font) */
.solaren-company .hizmet-kutu .kutu-duzen h3,
.solaren-company .h2-baslik-hizmetler-2,
.solaren-company .h2-baslik-anasayfa-ozel1 {
    font-family: 'Sora', sans-serif;
}