@use '../utils' as *;
/*-----------------------------------------------------------------------------------

    Theme Name: Educeet -- Online Education & Courses Template
    Author: Ordianit
    Support:ordianit@gmail.com
    Description: Educeet -- Online Education & Courses Template
    Version: 1.0.2

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

    01. Theme default css 
    02. about css start
    03. activities css start
    04. banner css start
    05. blog-sidebar css start
    06. blog css start
    07. brand css start
    08. campus css start
    09. career css start
    10. cart css start
    11. categories css start
    12. Checkout css start
    13. choose css start
    14. contact css start
    15. course css start
    16. cta css start
    17. error css start
    18. event css start
    19. faq css start
    20. feature css start
    21. footer css start
    22. funfact css start
    23. gallery css start
    24. header css start
    25. hero css start
    26. language css start
    27. menu css start
    28. newsletter css start
    29. policy css start
    30. portfolio css start
    31. price css start
    32. shop css start
    33. contact css start
    34. slider css start
    35. social css start
    36. stats css start
    37. team css start
    38. testimonial css start
    39. text slider css start
    40. tuition css start
    41. video css start
    42. zoom-metting css start

    
    **********************************************/

/*----------------------------------------*/
/* 01. THEME DEFAULT CSS START
/*----------------------------------------*/

@import url($font-url);

@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1350px;
    }
    .container-1380 {
        max-width: 1380px;
    }
    .container-1200 {
        max-width: 1200px;
    }
    .container-1270 {
        max-width: 1270px;
    }
    .container-1130 {
        max-width: 1130px;
    }
    .container-1370 {
        max-width: 1370px;
    }
    .container-1600 {
        max-width: 1600px;
    }
    .container-1620 {
        max-width: 1620px;
    }
    .container-1750 {
        max-width: 1750px;
    }
    .container-1720 {
        max-width: 1720px;
    }
}


/*---------------------------------
	typography css start 
---------------------------------*/
body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    font-family: var(--it-ff-body);
    color: var(--it-text-body);
}

a {
    text-decoration: none;
    transition: .3s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--it-common-black);
    line-height: 1.5;
    @include transition(.3s);
    font-family: var(--it-ff-spartan-semibold);
}


img {
    max-width: 100%;
}

h4 {
    font-size: 34px;
    @media #{$xl,$lg} {
        font-size: 25px;
	}
    @media #{$md,$xs} {
        font-size: 20px;
	}
}

h5 {
    font-size: 20px;
    
}

h6 {
    font-size: 18px;
}

ul {
    margin: 0px;
    padding: 0px;
}

p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--it-text-body);
    font-family: var(--it-ff-body);
}

.z-index-1 {
    position: relative;
    z-index: 1;
}

.z-index-2 {
    position: relative;
    z-index: 2;
}

.z-index-3 {
    position: relative;
    z-index: 3;
}
.z-index-4 {
    position: relative;
    z-index: 4;
}
.z-index-5 {
    position: relative;
    z-index: 5;
}


.layer{
    position: relative !important;
}
a,
.btn,
button,
input,
select,
textarea,
li,
img,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
    @include transition(.3s);
}

a:focus,
.button:focus {
    text-decoration: none;
    outline: none;
}

a:focus,
a:hover {
    color: inherit;
    text-decoration: none;
}

a,
button {
    color: inherit;
    outline: none;
    border: none;
    background: transparent;
}

button:hover {
    cursor: pointer;
}

button:focus {
    outline: 0;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

input {
    height: 55px;
    width: 100%;
    border: none;
    outline: none;
    padding: 0 25px;
    line-height: 50px;
    font-size: 16px;
    color: var(--it-common-black);
    background-color: #F6F7F9;
    text-transform: capitalize;
    &::placeholder {
        color: var(--it-text-body);
        text-transform: capitalize;
    }

    &:focus {
        border-color: var(--it-theme-1);
    }
}

textarea {
    outline: none;
    width: 100%;
    padding: 20px 25px;
    border: none;
    height: 200px;
    resize: none;
    color: var(--it-common-black);
    background-color: #F6F7F9;
    text-transform: capitalize;
    @include it-placeholder {
        color: #797979;
        text-transform: capitalize;
    }

    &:focus {
        border-color: var(--it-theme-1);
    }
}

input[type="color"] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
    padding: 0;
    border-radius: 50%;
}

*::-moz-selection {
    background: var(--it-theme-1);
    color: var(--itt-common-white);
    text-shadow: none;
}

::-moz-selection {
    background: var(--it-theme-1);
    color: var(--it-common-white);
    text-shadow: none;
}

::selection {
    background: var(--it-theme-1);
    color: var(--it-common-white);
    text-shadow: none;
}


*::-moz-placeholder {
    color: var(--it-common-black);
    font-size: var(--it-fz-body);
    opacity: 1;
}

*::placeholder {
    color: var(--it-common-black);
    font-size: var(--it-fz-body);
    opacity: 1;
}

/*---------------------------------
    common classes css start 
---------------------------------*/

.fix {
    overflow: hidden
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.gx-10 {
    --bs-gutter-x: 10px;
}
.gx-15 {
    --bs-gutter-x: 15px;
}
.gx-20 {
    --bs-gutter-x: 20px;
}
.gx-25 {
    --bs-gutter-x: 25px;
}
.gx-35 {
    --bs-gutter-x: 35px;
    @media #{$xs}{
        --bs-gutter-x: 30px;
    }
}
.gx-40 {
    --bs-gutter-x: 40px;
    @media #{$xs}{
        --bs-gutter-x: 30px;
    }
}
.gx-50 {
    --bs-gutter-x: 40px;
    @media #{$xs}{
        --bs-gutter-x: 30px;
    }
}
.gx-70 {
    --bs-gutter-x: 70px;
    @media #{$xs}{
        --bs-gutter-x: 30px;
    }
}

.border-radius-10 {
    border-radius: 10px;
    & img {
       border-radius: 10px;
    }
}
.border-radius-20 {
    border-radius: 20px;
    & img {
       border-radius: 20px;
    }
}
.border-radius-30 {
    border-radius: 30px;
    & img {
       border-radius: 30px;
    }
}
.border-radius-100 {
    border-radius: 100px !important;
}
.border-radius-0 {
    border-radius: 0 !important;
}
.border-line {
    display: inline;
    background-repeat: no-repeat;
    background-size: 0% 1px, 0 1px;
    background-position: 100% 100%, 0 100%;
    transition: background-size 0.3s linear;
    background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor);
    &:hover {
        background-size: 0% 1px, 100% 1px;
    }
}
.title-hover {
    transition: all .3s;
    &:hover {
        color: var(--it-theme-1);
    }
}
.slider-transtion {
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
}
.thumb-overlay {
    position: relative;
    & img {
        width: 100%;
    }
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: 20px;
        background-color: rgba($color: #1F2432, $alpha: .5);
    }
}
.zoom-effect {
    overflow: hidden;
    & img {
       transition: 1.3s all ease;
    }
    &:hover {
        & img {
            transform: scale(1.2);
        }
    }
}
.sky {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 20px;
    background: linear-gradient(to bottom, #b3e5fc, #e1f5fe);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}