/*
Theme Name: NoLimit Academy Theme
Theme URI: https://nolimit.id
Author: Marketing Indirect
Author URI: https://nolimit.id
Description: ...
Requires at least: 6.1
Tested up tp: 6.2
Requires PHP: 7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: academy
Tags: blog, online-catalogue
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css');
/* @import url('https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css'); */
@import url('https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/css/superfish.min.css');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");


:root {


    --bg-dark-blue: #0f172a;
    --bg-light-yellow: #fcfaee;
    --txt-gray: #d1dede;
    --txt-normal: #56646f;
    --txt-dark: #1f1f2f;
    --txt-primary: #007bff;
    


}



/*** General ***/
body {
    font-family:'Inter', sans-serif; font-weight:400; font-size:16px; color:var(--txt-normal);
}



/*** Superfish ***/
.sf-menu {
    li { background:none; 
        a { border:0; font-size:1em; }
    }
}



/*** Elements ***/
h1, h2, h3, h4, h5, h6 {
    font-family:'Poppins', sans-serif; font-weight:600; color:var(--txt-dark);
}
a { text-decoration:none; }

.text-light {
    a { color:white; }
}
button { font-family:'Poppins', sans-serif; position:relative; overflow:hidden; transition: all 0.5s ease-in-out; }

ul { padding-left:1.2em; }

label { font-weight:semibold; font-family:'Poppins', sans-serif;cursor:pointer; }
label sup { position:relative; color:red; font-size:.5em; margin-top:-.1em; }
label .answer-box { transition:color 0.3s ease; }
label:hover .answer-box { color:var(--txt-primary); }


/*** Utilities ***/
.vh-75 { height:75vh; }
.htmx-indicator { z-index:-100; overflow:hidden; position:absolute; right:-10000px; transition: right 0.5s ease-in-out;
    &.htmx-request { z-index:unset; position:relative; right:unset; }
}

.readmore-toggle { transition: all 1s ease; max-height:30vh; 
    &.active { max-height:3000px; }
}
.readmore-btn { font-size:.8em; }
.btn-white-gradient { background:linear-gradient(0deg, rgba(255,255,255,1) 30%, rgba(255,255,255,.5) 60%, rgba(255,255,255,.1) 75%, rgba(255,255,255,0) 100%); }

.zoom-fx {
    .zoom-fx-img { transition: all 0.3s ease; }
    &:hover {
        .zoom-fx-img { transform:scale(1.05); }
    }
}

/*** Bootstrap ***/
.container { max-width:1200px; }
textarea.form-control,
.form-floating textarea.form-control { min-height:8em; }
.form-floating > label { font-size:.9em; font-weight:normal; font-style:italic; }
.form-floating > .form-control:focus + label, 
.form-floating > .form-control:not(:placeholder-shown) + label,
.form-floating > .form-control:not(:placeholder-shown) + .btn + label,
.form-floating > .form-select:focus + label, 
.form-floating > .form-select:not(:placeholder-shown) + label { font-weight:bold; color:#111; }
hr, .vr { opacity:.15; }


.datepicker-days { font-family:'Open Sans', sans-serif; }


.accordion-button:not(.collapsed) { background-color:var(--txt-primary); color:#fff; 
    & > i { transform:rotate(-10deg); color:white !important; transition: all 0.3s ease; }
    &::after { filter:brightness(1000%); }
}



@media all and (max-width:768px) {
    .container { padding-left:1.5em; padding-right:1.5em; }
}


/*** Superfish ***/
.sf-menu {
    li {
        &:hover { background:none; }
        a { 
            font-family:'Poppins', sans-serif; padding:1.25em 1em;
            &:hover { background:none; }
        }
    }
}



.global-wrapper { display:block; width:100%; min-height:100vh; overflow-x:hidden; }
.header-gap { padding-top:70px; }



/*** Header ***/
#web-header { 
    z-index:1021; position:fixed; max-height:70px; background-color:rgba(255, 255, 255, 95%); width:100%; 
    a { color:var(--txt-dark); transition:color 0.3s ease;
        &:hover { color:var(--txt-primary); }
    }    
}

/*** Footer ***/
.web-footer { font-size:.9em; color:var(--txt-gray); background-color:var(--bg-dark-blue);
    h5 { color:#fff; margin-top:1em; } 
    a { color:var(--txt-gray); 
        &:hover { color:#fff; }
    }
    ul { padding-left:0;
        li { list-style:none; padding:.25em 0; }
    }
}
.copyr { color:var(--txt-gray); border-top:1px solid #d1dede20; font-size:.8em; }


/*** Mobile Menu ***/
.mmenu {
    ul {
        li { list-style:none; padding:.125em 0; position:relative;
            a { display:inline-block; font-size:1.1em; padding:.45em 0; color:var(--txt-normal); overflow:hidden;
                &:hover { color:var(--txt-primary); }
            }
            &.menu-item-has-children .sub-menu {
                height:0; position:absolute; top:0; left:-100vw; opacity:0; transition: all 0.2s ease-in;
                li { display:none; border:none; }
                &.active { z-index:10; height:auto; left:0; opacity:1; position:relative;
                    li { display:block; }
                }
            }
        }
    }
    .arrow-up::before,
    .arrow-down::before {
        content:"\F286"; font-family:"bootstrap-icons"; font-size:1em; height:3em; width:2em; position:absolute; top:0; right:0; background:none; display:flex; align-items:center; justify-content:center; text-align:center; opacity:.6;
    }
    .arrow-down::before { content:"\F282"; }
}



/*** Page ***/
.page-wrapper { min-height:calc(60vh - 136px); }
.page-cover {
    min-height:40vh; padding:5em 0;
    &::after { content:""; width:100%; height:100%; background:#00000090; position:absolute; z-index:1; }
    & > * { position:relative; z-index:2; }
}

.expert { min-height:100px; padding:15px; display:flex; align-items:center; background:linear-gradient(to right, #efefef, #ffffff);
    .pict { max-width:70px; position:absolute; }
    .desc { position:relative; padding-left:90px; height:100%; }
}

.page-content {
    h2 { font-size:1.5em; margin-top:1em; margin-bottom:1em; }
    h3 { font-size:1.2em; }
    p { margin-bottom:1.75em; }
    figure { margin-bottom:2em; margin-top:.5em; }
}


/*** Bootstrap Carousel ***/
.custom-color .carousel-control-prev-icon,
.custom-color .carousel-control-next-icon {
    filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(200deg);
}



/*** HOME COMPONENTS ***/
.features {
    .feat-card { border:1px solid #efefef;
        .icon { max-width:3em; }
    }
}


/*** COURSE CARD ***/
.course-card {
    border:1px solid #efefef;
    a:not(.btn) {
        transition: all 0.3s ease;
        > h5 { transition: all 0.3s ease; }
        &:hover { 
            text-decoration:none; color:var(--txt-primary); 
            > h5 { color:var(--txt-primary); }
        } 
    }
}


/*** CONTACT FORM 7 & CONTACT FORM CARD ***/
.contact-form-card {
    
}

.wpcf7-not-valid-tip { font-size:12px; display:block; padding:.5em .25em; }
.wpcf7-spinner,
form.submitting .wpcf7-spinner { top:50%; transform:translateY(30%) }
textarea.wpcf7-textarea.form-control { min-height:4em; }

.bg-primary .wpcf7-not-valid-tip { color:#fff; }




/*** PROFILE PAGE ***/
.profile-sidebar {
    a { color:var(--txt-normal); 
        &:hover { color:var(--txt-primary); }
        &.text-danger { opacity:.7; 
            &:hover { opacity:1; }
        }
    }
}


.text-bubble { position:relative; background:var(--txt-primary); color:#fff; padding:1.25em; border-radius:1.5em; font-size:1.15em; }

/* Tail (bottom left) */
.text-bubble::after { content:""; position:absolute; bottom:-10px; right:10%; width: 0; height: 0; border: 10px solid transparent; border-top-color: var(--txt-primary); border-bottom: 0; margin-left: -10px;
}



/*** Paginate Links ***/
.paginate {
    display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:1em; margin-top:2em;
    .page-numbers { 
        aspect-ratio:1/1; border:1px solid #cccccc20; display:flex; justify-content:center; align-items:center; }
}




/*** GALLERY GRIDS ***/
.gallery-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows:10px; grid-auto-flow:dense; gap:10px;
    .gallery-item { 
        font-size:1.2rem; border-radius:5px; grid-row-end: span 10; 
        img { width:100%; height:100%; object-fit:cover; border-radius:5px; }
    }
}