/* Page Header Block Styles */

.page-header { position:relative; height:20rem; overflow:hidden; font-size:1rem; }
.page-header img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:grayscale(100%) }
.page-header > div { position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; justify-content:center; padding-top:2rem; background:#0006; }
.page-header h1 { color:#fff; font-size:3rem; }


/* SECTION INTRO BLOCK STYLES */

.section-intro { padding:3rem 1rem; }
.section-intro .inner { display:grid; grid-template-columns:2fr 5fr; gap:1.52rem; max-width:1250px; margin:0 auto; }
.section-intro .inner .topic { font-weight:600; font-size:2rem; line-height:1.15; }
.section-intro .inner .details { font-size:1rem; line-height:1.5; font-size:1.2rem; color:#555; }

@media( max-width:900px ){
.section-intro .inner { display:grid; grid-template-columns:1fr; }
}

@media( max-width:700px ){
.section-intro .inner .topic { font-size:1.52rem; line-height:1.3; }
.section-intro .inner .details { font-size:1rem }
}

/* ATTRIBUTES BLOCK */
 
#summary { background:#111; }
#summary .inner { display:grid; grid-template-columns:1fr 1fr 1fr; }

#summary .inner > div { padding:3rem 2rem; }
#summary .inner > div:nth-child(2){ background:#ff7700; font-size:1rem; }

#summary div strong { font-size:1.32rem; padding:0.75rem 0; display:block; color:#fff; }
#summary div p { font-size:1rem; color:#fff; line-height:1.64; }

@media( max-width:750px ) { #summary .inner > div { padding:2rem 1.2rem; } }

@media( max-width:650px ){
#summary .inner { grid-template-columns:1fr; }
}


/* HOME INTRO */

        .about-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .about-section {
            padding: 100px 0;
            /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
        }

        .about-content {
            display: flex;
            align-items: center;
            gap: 60px;
        }

        .about-text {
            flex: 1;
        }

        .section-subtitle {
            display: inline-block;
            color: #e74c3c; color:#ff7700; 
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .about-section .section-title {
            font-size: 2.8rem;
            color: #2c3e50; 
            margin-bottom: 25px;
            line-height: 1.2; text-align:left!important;
        }

        .section-title span {
            color: #e74c3c; color:#ff7700;
        }

        .about-description {
            font-size: 1.1rem;
            color: #555;
            margin-bottom: 30px; line-height:1.6;
        }

        .features-list {
            list-style: none;
            margin-bottom: 40px; display:none;
        }

        .features-list li {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
        }

        .features-list i {
            color: #e74c3c; color:#ff7700;
            margin-right: 15px;
            font-size: 1.2rem;
            margin-top: 3px;
        }

        .about-btn {
            display: inline-block;
            background-color: #e74c3c; background-color:#ff7700;
            color: white;
            padding: 14px 32px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            border: 2px solid #e74c3c; border-color:#ff7700; 
        }

        .about-btn:hover {
            background-color: transparent;
            color: #e74c3c; color:#ff7700;
        }

        .about-btn-outline {
            background-color: transparent;
            color: #2c3e50;
            border: 2px solid #2c3e50;
            margin-left: 15px;
        }

        .about-btn-outline:hover {
            background-color: #2c3e50;
            color: white;
        }

        .about-images {
            flex: 1;
            position: relative;
            height: 500px;
        }

        .image-large {
            position: absolute;
            width: 80%;
            height: 80%;
            bottom: 0;
            right: 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            z-index: 2;
        }

        .image-small {
            position: absolute;
            width: 60%;
            height: 60%;
            top: 0;
            left: 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            border: 8px solid white;
            z-index: 3;
        }

        .image-large img,
        .image-small img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .experience-badge {
            display:none!important;
            position: absolute;
            bottom: 40px;
            left: -20px;
            background: #e74c3c; background:#ff7700;
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            z-index: 4;
            box-shadow: 0 10px 30px rgba(231, 76, 60, 0.3);
        }

        .experience-badge .years {
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1;
        }

        .experience-badge .text {
            font-size: 1rem;
            font-weight: 600;
        }

        /* Stats Section */
        .stats-section {
            background-color: #2c3e50; background:#111;
            padding: 80px 0;
            color: white;
        }

        .stats-container {
            display: flex;
            justify-content: space-around;
            text-align: center;
        }

        .stat-item {
            flex: 1;
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: #e74c3c; color:#ff7700;
            margin-bottom: 10px;
        }

        .stat-text {
            font-size: 1.2rem;
            font-weight: 500;
        }

        /* Responsive Styles */
        @media (max-width: 992px) {
            .about-content {
                flex-direction: column;
                gap: 40px;
            }

            .about-images {
                width: 100%; display:none;
                /* height: 400px; */ height:1000px; background:#000;
            }

            .section-title {
                font-size: 2.4rem;
            }
        }

        @media (max-width: 768px) {
            .about-section {
                padding: 60px 0;
            }

            .section-title {
                font-size: 2rem;
            }

            .stats-container {
                flex-direction: column;
                gap: 40px;
            }

            .experience-badge {
                left: 10px;
                bottom: 20px;
            }
        }

/* HOEM INTRO */

        .about-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .about-section {
            padding: 100px 0;
            /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
        }

        .about-content {
            display: flex;
            align-items: center;
            gap: 60px;
        }

        .about-text {
            flex: 1;
        }

        .section-subtitle {
            display: inline-block;
            color: #e74c3c; color:#ff7700; 
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .about-section .section-title {
            font-size: 2.8rem;
            color: #2c3e50; 
            margin-bottom: 25px;
            line-height: 1.2; text-align:left!important;
        }

        .section-title span {
            color: #e74c3c; color:#ff7700;
        }

        .about-description {
            font-size: 1.1rem;
            color: #555;
            margin-bottom: 30px; line-height:1.6;
        }

        .features-list {
            list-style: none;
            margin-bottom: 40px; display:none;
        }

        .features-list li {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
        }

        .features-list i {
            color: #e74c3c; color:#ff7700;
            margin-right: 15px;
            font-size: 1.2rem;
            margin-top: 3px;
        }

        .about-btn {
            display: inline-block;
            background-color: #e74c3c; background-color:#ff7700;
            color: white;
            padding: 14px 32px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            border: 2px solid #e74c3c; border-color:#ff7700; 
        }

        .about-btn:hover {
            background-color: transparent;
            color: #e74c3c; color:#ff7700;
        }

        .about-btn-outline {
            background-color: transparent;
            color: #2c3e50;
            border: 2px solid #2c3e50;
            margin-left: 15px;
        }

        .about-btn-outline:hover {
            background-color: #2c3e50;
            color: white;
        }

        .about-images {
            flex: 1;
            position: relative;
            height: 500px;
        }

        .image-large {
            position: absolute;
            width: 80%;
            height: 80%;
            bottom: 0;
            right: 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            z-index: 2;
        }

        .image-small {
            position: absolute;
            width: 60%;
            height: 60%;
            top: 0;
            left: 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            border: 8px solid white;
            z-index: 3;
        }

        .image-large img,
        .image-small img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .experience-badge {
            position: absolute;
            bottom: 40px;
            left: -20px;
            background: #e74c3c; background:#ff7700;
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            z-index: 4;
            box-shadow: 0 10px 30px rgba(231, 76, 60, 0.3);
        }

        .experience-badge .years {
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1;
        }

        .experience-badge .text {
            font-size: 1rem;
            font-weight: 600;
        }

        /* Stats Section */
        .stats-section {
            background-color: #2c3e50; background:#111;
            padding: 80px 0;
            color: white;
        }

        .stats-container {
            display: flex;
            justify-content: space-around;
            text-align: center;
        }

        .stat-item {
            flex: 1;
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: #e74c3c; color:#ff7700;
            margin-bottom: 10px;
        }

        .stat-text {
            font-size: 1.2rem;
            font-weight: 500;
        }

        /* Responsive Styles */
        @media (max-width: 992px) {
            .about-content {
                flex-direction: column;
                gap: 40px;
            }

            .about-images {
                width: 100%; display:none;
                /* height: 400px; */ height:1000px; background:#000;
            }

            .section-title {
                font-size: 2.4rem;
            }
        }

        @media (max-width: 768px) {
            .about-section {
                padding: 60px 0;
            }

            .section-title {
                font-size: 2rem;
            }

            .stats-container {
                flex-direction: column;
                gap: 40px;
            }

            .experience-badge {
                left: 10px;
                bottom: 20px;
            }
        }

/* home cta */


/* Basic Styling - Customize to match your brand */
.tutor-cta-section {
   /* background: linear-gradient(135deg, #667eea99 0%, #764ba2 100%); */ /* A professional gradient */
    background: linear-gradient(135deg, #2c2c2c99 0%, #00000099 100%); /* A professional gradient */
    color: white;
    padding: 80px 20px;
    text-align: center;
	position:relative;
}

.cta-container {
    max-width: 700px;
    margin: 0 auto;
	position:relative; 
	z-index:2;
}

.cta-container h1 {
    font-size: 2.5rem;
	line-height:1.1;
    margin-bottom: 1rem;
}

.cta-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.cta-button-group {
    margin-bottom: 3rem;
    margin-top:2rem;
}

.btn {
    display: inline-block;
    padding: 15px 30px;
    margin: 0 10px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #FFD700; /* A bright, attention-grabbing color */
    color: #333;
}

.btn-primary:hover {
    background-color: #F0C300;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background-color: white;
    color: #667eea;
}

.trust-signals {
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 0.9rem;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Add your own icons or use an icon font like Font Awesome */
.icon-shield:before { content: "ЁЯЫбя╕П"; }
.icon-graph:before { content: "ЁЯУИ"; }
.icon-users:before { content: "ЁЯСе"; }


.tutor-cta-section img { width:100%; height:100%; display:block; 
/* position:absolute; */ top:0;height:0;left:0;right:0; z-index:10; object-fit:cover; }


/* Responsive Design */
@media (max-width: 768px) {
    .trust-signals {
        flex-direction: column;
        gap: 15px;
    }
    .cta-button-group .btn {
        display: block;
        margin: 10px auto;
        width: 80%;
        max-width: 250px;
    }
}

.cta-block { position:relative; }
.cta-block img { position:absolute; top:0;bottom:0;left:0;right:0; object-fit:cover; width:100%; height:100% }
.cta-block section { z-index:3; position:relative; }

/* project galleryies */

.gallerycontainer { width:100%; padding:4rem 0 }
.gallerycontainer .inners { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:1.2rem; background:#fff;max-width:1200px; margin:0 auto; }
.gallerycontainer .inners img { width:100%; height:100%; object-fit:cover; aspect-ratio:6/4; transition:500 ms ease }
.gallerycontainer .inners img:hover { transform:scale(1.1); }

@media( max-width:1000px ){ .gallerycontainer .inners { display:grid; grid-template-columns:1fr 1fr 1fr } }
@media( max-width:750px ){ .gallerycontainer .inners { display:grid; grid-template-columns:1fr 1fr } }
@media( max-width:600px ){ .gallerycontainer .inners { display:grid; grid-template-columns:1fr } }
@media( max-width:450px ){ .gallerycontainer .inners { display:grid; grid-template-columns:1fr } }

/* MISSION */

.mission { padding:5rem 1rem; background:#1d1f28; background:#000; }/*
.mission { background-image:linear-gradient( #eeeeee, #ffffff 40%, #ffffff ); }*/
.mission .inner { display:grid; grid-template-columns:2.3fr 5fr; gap:2rem; max-width:1200px; margin:0 auto;  }

.mission .data { display:grid; grid-template-columns:1fr; grid-template-columns:1fr 1fr; gap:0.75rem; }
.mission .data > div {  padding:3rem 1.5rem; color:#333; background:white;  border-radius:10px; }
.mission .data > div p { line-height:1.5; font-size:1rem; }

.mission .data h3 { font-weight:600; font-size:1.5rem; }
.mission .data p { padding:1rem 0; }

.mission .head { display:flex; flex-direction:column; gap:1.5rem; justify-content:center; }
.mission .head h2 { font-weight:600; font-size:3rem; align-self:center; line-height:1.2; color:white; }
.mission .head header { font-size:1.2rem; font-weight:500; position:relative; color:#02cfc9; letter-spacing:0.05rem }
.mission .head p { font-size:1.2rem; line-height:1.52; }

@media( max-width:1000px ){
.mission .inner { display:grid; grid-template-columns:1fr; }
}

@media( max-width:550px ){ .mission .data { grid-template-columns:1fr; } }

/* OUR TEAM */

#our-team { padding:5rem 0rem;  }
#our-team .inner { display:grid; grid-template-columns:1fr 1fr; gap:2rem; max-width:1200px; margin:0 auto; 
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; border-radius:10px; overflow:hidden; background:white; }

#our-team .text { padding:2.5rem 2rem; display:flex; flex-direction:column; gap:1.2rem; }
#our-team .text p { color:#777; line-height:1.6;  font-size:1rem; }
#our-team .img { position:relative; background:black }
#our-team .img img { display:block; position:absolute; object-fit:cover; width:100%; height:100%; }

#our-team .text h2 { font-size:1.8rem; font-weight:600; }

@media( max-width:800px ) {
#our-team .inner { grid-template-columns:1fr; }
#our-team .img { background:transparent; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
#our-team .img img { position:relative; width:100%; max-width:600px; }
}


/* shared values */

.sharedvalues { padding:4rem 1rem; background:#f3f3f3; background-image:url('img/diagonal.webp') }
.sharedvalues > h2 { text-align:center; font-size:2rem; font-weight:600 }
.sharedvalues .inner { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; max-width:1200px; margin:2.2rem auto }
.sharedvalues .inner > div { padding:3rem 1.2rem; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; border-radius:6px; line-height:1.5;
font-size:1rem; background:white; }
.sharedvalues .inner > div header { font-size:1.52rem; font-weight:600; }
.sharedvalues .inner > div p { color:#777; padding:1rem 0 }


@media( max-width:800px ){ .sharedvalues .inner { grid-template-columns:1fr 1fr }  }
@media( max-width:550px ){ .sharedvalues .inner { grid-template-columns:1fr }  }

/* IMPACT */


#impact { padding:4rem 1rem; background:#000; color:#fff; }
#impact .inner { max-width:1300px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:6rem; }

#impact .img { background:#000; position:relative; }

#impact .inner .txt { padding:3rem 0; display:flex; flex-direction:column; gap:1rem; }

#impact .txt header { font-size:1.3rem; font-weight:600; color:#e3e3e3; color:darkorange; letter-spacing:0.08rem; }

#impact .txt p { line-height:1.75; color:#777; padding:1rem 0}

#impact .txt ul { display:grid; grid-template-columns:1fr; gap:0.5rem; list-style:none; }
#impact .txt li { display:flex; align-items:flex-start; padding:0.2rem; line-height:1.3; font-size:1rem; }
#impact .txt li::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background-image: url('/svg/tick.svg');
background-size: contain;
background-repeat: no-repeat;
margin-right: 5px;
vertical-align: middle;
}

#impact .txt h2 { font-size:2rem; font-weight:600; line-height:1.2;  padding:1rem 0; }

#impact .large { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; }
#impact .small { position:absolute; bottom:-8%; right:-10%; width:80%; aspect-ratio:6/4; object-fit:cover; z-index:1; border:7px solid #fff; }

@media( max-width:1150px ){
#impact .txt ul { grid-template-columns:1fr; }
}

@media( max-width:1000px ){
#impact .inner { grid-template-columns:1fr;  }
#impact .img { display:none; }
}


@media( max-width:1000px ){
#impact .txt ul { grid-template-columns:1fr}
}

/* SUSTAIN */

.xtras { padding:4rem 1rem; }
.xtras .inner { display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:1300px; margin:0 auto; }

.xtras .inner > div { position:relative; }
.xtras .inner > div > div { position:relative; z-index:1; background:#000a; padding:3rem 2rem; color:#fff; height:100% }
.xtras header { font-size:1.6rem; font-weight:600; padding:1rem 0; position:relative; margin-bottom:1.5rem;  }

.xtras header::after { content:""; position:absolute; bottom:0; left:0; height:2px; width:4rem; background:red; }

.xtras p { line-height:1.1; font-size:1rem; padding:0.5rem 0; line-height:1.3; }
.xtras ul { margin-left:1rem; }
.xtras li { list-style:disc; padding:0.35rem 0; font-size:1rem; color:#fff!important; }
.xtras .inner .img { position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; z-index:0; }
.xtras .inner .img img { display:block; width:100%; height:100%; object-fit:cover; }

@media( max-width:800px ){
.xtras .inner { grid-template-columns:1fr; }
}