/*
Theme Name: Edubin - LMS Education HTML Template
Author: ZeTheme
Author URL: https://themeforest.net/user/pixelcurve
Support: zetheme24@gmail.com
Description: Creative HTML5 template.
Version: 1.1
*/
/* CSS Index
-----------------------------------
1. Theme default
2. HEADER
3. SLIDER
4. CATEGORY
5. ABOUT
6. APPLY
7. COURSE
8. VIDEO FEATURES
9. TEACHERS
10. PUBLICATION
11. TEASTIMONIAL
12. NEWS
13. FOOTER
14. CATEGORY 2
15. COURSE 2
16. COUNTER
17. TEACHERS 2
18. EVENT 2
19. COUNT DOWN
20. PAGE BANNER
21. ABOUT PAGE
22. COURSES PAGE
23. COURSE SINGEl PAGE
24. EVENT PAGE
25. EVENT SINGEL PAGE
26. TEACHERS SInGEL PAGE
27. BLOG PAGE
28. BLOG SINGEL PAGE
29. SHOP PAGE
30. SHOP SINGEL PAGE
31. CONTACT PAGE
*/
/*===========================
1. Theme default css
===========================*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Roboto:300,400,500,700');
::selection {
background-color: #FFD700; /* cor de fundo ao selecionar o texto */
color: #000; /* cor do texto ao selecionar */
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #212121;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #fff;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #FFD700;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
scroll-behavior: smooth;
}
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #D9BCA9;
z-index: 99999; /* makes sure it stays on top */
}
#status {
position: fixed;
content: '';
display: block;
top: 25%;
left: 0;
right: 0;
width: 400px;
height: 300px;
margin: 0 auto;
background: url(../images/loader.gif);
opacity: 1;
visibility: visible;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 9999999999;
}
@-webkit-keyframes scaleout {
0% {
-webkit-transform: scale(0); }
100% {
-webkit-transform: scale(1);
opacity: 0; } }
@keyframes scaleout {
0% {
transform: scale(0);
-webkit-transform: scale(0); }
100% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 0; } }
@media(max-width: 369px){
#status{left: -40px;}
}
.text {
background-color: #FFD700;
color: #000;
}
strong {
color: #FFD700;
}
.color {
color: #212121;
}
a:focus,
input:focus,
textarea:focus,
button:focus {
text-decoration: none;
outline: none;
}
a:focus,
a:hover{
text-decoration: none;
}
i,
span,
a{
display: inline-block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: #fff;
margin: 0px;
}
h1 {
font-weight: 500;
}
h2 {
font-size: 36px;
font-family: "Sour Gummy";
}
h3 {
font-size: 28px;
font-family: "Sour Gummy";
}
h4 {
font-size: 22px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
ul,ol {
margin: 0px;
padding: 0px;
list-style-type: none;
}
p {
font-size: 16px;
font-weight: 400;
line-height: 28px;
color: #505050;
margin: 0px;
}
.bg_cover{
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.typing-container {
display: flex;
justify-content: center;
align-items: center;
}
.typing {
white-space: nowrap;
overflow: hidden;
}
.dots {
display: flex;
margin-left: 5px;
}
.dot {
font-weight: bold;
animation: blink 1s infinite;
opacity: 0;
}
.dot:nth-child(1) {
animation-delay: 0s;
}
.dot:nth-child(2) {
animation-delay: 0.3s;
}
.dot:nth-child(3) {
animation-delay: 0.6s;
}
@keyframes blink {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
/*===== All Button Style =====*/
.col-lg-4 figcaption {
margin-top: 1em;
font-size: large;
font-weight: 900;
}
.main-btn {
display: inline-block;
font-weight: 500;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0 35px;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
line-height: 50px;
border-radius: 10px;
color: #07294d;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 5;
-webkit-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
background-color: #FFF500;
}
.main-btn:hover{
color: #fff;
border-color: #000;
background-color: #212121;
text-decoration: none;
}
#btn {
background-color: #00000086;
}
#btn:hover {
background-color: #fff;
color: #000;
}
/*===== All Section Title Style =====*/
.section-title{}
.section-title h5{
color: #07294d;
position: relative;
padding-bottom: 12px;
}
.section-title h2{
font-size: 48px;
color: #fff;
padding-top: 10px;
}
/*===== Preloader Style =====*/
#preloader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #fff; /* Fundo do preloader */
display: flex;
justify-content: center;
align-items: center;
}
/* Loader Animation */
.loader {
border: 8px solid #f3f3f3; /* Cor do fundo do círculo */
border-top: 8px solid #FFF500; /* Cor do círculo animado */
border-radius: 50%;
width: 80px;
height: 80px;
animation: spin 1.5s linear infinite; /* Animação de rotação */
}
/* Keyframes for spinning animation */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes rubixcube1{
20%{ top:16px; left:32px;}
30%{ top:32px; left:32px; }
40%{ top:32px; left:32px; }
50%{ top:32px; left:32px; }
60%{ top:32px; left:32px; }
70%{ top:32px; left:32px; }
80%{ top:32px; left:32px; }
90%{ top:32px; left:32px; }
100%{ top:32px; left:16px; }
}
@keyframes rubixcube1{
20%{ top:16px; left:32px;}
30%{ top:32px; left:32px; }
40%{ top:32px; left:32px; }
50%{ top:32px; left:32px; }
60%{ top:32px; left:32px; }
70%{ top:32px; left:32px; }
80%{ top:32px; left:32px; }
90%{ top:32px; left:32px; }
100%{ top:32px; left:16px; }
}
@-webkit-keyframes rubixcube2{
30%{ left:16px;}
40%{ left:32px;}
50%{ left:32px;}
60%{ left:32px;}
70%{ left:32px;}
80%{ left:32px;}
90%{ left:32px;}
100%{ left:32px;}
}
@keyframes rubixcube2{
30%{ left:16px;}
40%{ left:32px;}
50%{ left:32px;}
60%{ left:32px;}
70%{ left:32px;}
80%{ left:32px;}
90%{ left:32px;}
100%{ left:32px;}
}
@-webkit-keyframes rubixcube3{
30%{ top:0px;}
40%{ top:0px;}
50%{ top:16px;}
60%{ top:16px;}
70%{ top:16px;}
80%{ top:16px;}
90%{ top:16px;}
100%{ top:16px;}
}
@keyframes rubixcube3{
30%{ top:0px;}
40%{ top:0px;}
50%{ top:16px;}
60%{ top:16px;}
70%{ top:16px;}
80%{ top:16px;}
90%{ top:16px;}
100%{ top:16px;}
}
@-webkit-keyframes rubixcube4{
50%{ left:0px;}
60%{ left:16px;}
70%{ left:16px;}
80%{ left:16px;}
90%{ left:16px;}
100%{ left:16px;}
}
@keyframes rubixcube4{
50%{ left:0px;}
60%{ left:16px;}
70%{ left:16px;}
80%{ left:16px;}
90%{ left:16px;}
100%{ left:16px;}
}
@-webkit-keyframes rubixcube5{
60%{ top:16px;}
70%{ top:0px;}
80%{ top:0px;}
90%{ top:0px;}
100%{ top:0px;}
}
@keyframes rubixcube5{
60%{ top:16px;}
70%{ top:0px;}
80%{ top:0px;}
90%{ top:0px;}
100%{ top:0px;}
}
@-webkit-keyframes rubixcube6{
70%{ top:32px;}
80%{ top:16px;}
90%{ top:16px;}
100%{ top:16px;}
}
@keyframes rubixcube6{
70%{ top:32px;}
80%{ top:16px;}
90%{ top:16px;}
100%{ top:16px;}
}
@-webkit-keyframes rubixcube7{
80%{ left:16px;}
90%{ left:0px;}
100%{ left:0px;}
}
@keyframes rubixcube7{
80%{ left:16px;}
90%{ left:0px;}
100%{ left:0px;}
}
/*=====================================================
2. HEADER css
======================================================*/
/*===== Header top =====*/
.logo-img {
height: 100px;
}
#header-logo-site {
display: flex;
justify-content: center;
}
#header-nav {
display: flex;
justify-content: center;
border: 2px solid #000;
}
/*===== Header Logo support =====*/
.header-logo-support{
border-bottom: 1px solid #cecece;
}
.support-button{}
.support-button .support {
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-top: 7px;
}
.support-button .support .icon{}
.support-button .support .cont{
margin-left: 15px;
margin-top: -2px;
}
.support-button .support .cont p{
font-size: 13px;
color: #8a8a8a;
line-height: 18px
}
.support-button .support .cont span{
font-size: 18px;
color: #07294d;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
.support-button .button{
margin-left: 60px;
}
/*===== Header Menu =====*/
.navigation.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fffffff1;
z-index: 999;
-webkit-box-shadow: 0px 0px 191px 0px rgba(0,0,0,0.06);
box-shadow: 0px 0px 191px 0px rgba(0, 0, 0, 0.167);
-webkit-animation: sticky 2s;
animation: sticky 1s;
}
@-webkit-keyframes sticky {
0%{
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
100%{
-webkit-transform: translateY(0%);
transform: translateY(0%)
}
}
@keyframes sticky {
0%{
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
100%{
-webkit-transform: translateY(0%);
transform: translateY(0%)
}
}
.navigation .navbar{
padding: 0;
}
.navigation .navbar .navbar-nav{}
.navigation .navbar .navbar-nav li{
margin-right: 40px;
position: relative;
}
.navigation .navbar .navbar-nav li:last-child{
margin-right: 0;
}
.navigation .navbar .navbar-nav li a{
font-size: 14px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: #000;
text-transform: uppercase;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
padding: 25px 0;
text-decoration: none;
}
.col-lg-4 a:hover {
text-decoration: none;
}
.navigation .navbar .navbar-nav > li > a.active,
.navigation .navbar .navbar-nav > li > a:hover{
color: #FFF500;
}
.navigation .navbar .navbar-nav li .sub-menu{
position: absolute;
top: 110%;
left: -20px;
background-color: #212121;
width: 200px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.4s linear;
transition: all 0.3s linear;
z-index: 99;
}
.navigation .navbar .navbar-nav li:hover .sub-menu{
opacity: 1;
visibility: visible;
top: 100%;
}
.navigation .navbar .navbar-nav li .sub-menu li{
margin-right: 0;
}
.navigation .navbar .navbar-nav li .sub-menu li a{
padding: 10px 15px;
display: block;
border-bottom: 1px solid rgba(255, 198, 0, 0.5);
color: #fff;
}
.navigation .navbar .navbar-nav li .sub-menu li a.active,
.navigation .navbar .navbar-nav li .sub-menu li a:hover{
padding-left: 20px;
color: #fff;
}
.sub-nav-toggler{
display: none;
}
.navigation .navbar .navbar-nav li .sub-menu li:last-child a{
border-bottom: 0;
}
.navbar .navbar-toggler {
padding: 3px 8px;
margin: 18px 0;
-webkit-transform: all 0.4s linear;
transform: all 0.4s linear;
}
.navbar .navbar-toggler .icon-bar {
width: 30px;
height: 2px;
background-color: #000;
display: block;
margin: 5px 0;
position: relative;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.navbar .navbar-toggler.active .icon-bar:nth-of-type(1){
-webkit-transform: rotate(46deg);
transform: rotate(46deg);
top: 7px;
}
.navbar .navbar-toggler.active .icon-bar:nth-of-type(2){
opacity: 0;
}
.navbar .navbar-toggler.active .icon-bar:nth-of-type(3){
-webkit-transform: rotate(134deg);
transform: rotate(134deg);
top: -7px;
}
.right-icon{}
.right-icon ul li{
display: inline-block;
margin-right: 17px;
padding: 22px 0;
}
.right-icon ul li:last-child{
margin-right: 0;
}
.right-icon ul li a{
font-size: 18px;
color: #fff;
position: relative;
padding-right: 7px;
}
.right-icon ul li a span{
font-size: 12px;
color: #fff;
background-color: #FFF500;
border-radius: 50%;
padding: 0px 4px;
position: absolute;
top: -5px;
right: 0;
}
/*===== Index-2 =====*/
.header-social ul li{
display: inline-block;
margin-left: 10px;
}
.header-social ul li:first-child{
margin-left: 0;
}
.header-social ul li a{
font-size: 15px;
color: #dee2e6;
}
.navigation-2 .navbar .navbar-nav li{
margin-right: 40px;
}
.navigation-2 .navbar .navbar-nav li a{
padding: 45px 0;
}
.navigation-2 .right-icon ul li {
padding: 42px 0;
}
.navigation-2.sticky .navbar .navbar-nav li a{
padding: 30px 0;
}
.navigation-2.sticky .right-icon ul li{
padding: 25px 0;
}
/*===== Index-3 =====*/
.navigation-3{
position: absolute;
top: 0;
left: 0;
width: 100%;
background: none;
z-index: 99;
}
.navigation-3 .navbar .navbar-nav li a,
.navigation-3 .right-icon ul li a{
color: #fff;
}
.navigation-3.sticky .navbar .navbar-nav li a,
.navigation-3.sticky .right-icon ul li a{
color: #07294d;
}
.navigation-3.sticky .navbar .navbar-nav > li > a.active,
.navigation-3.sticky .navbar .navbar-nav > li > a:hover{
color: #ffc600;
}
.navigation-3 .navbar .navbar-toggler .icon-bar{
background-color: #fff;
}
.navigation-3.sticky .navbar .navbar-toggler .icon-bar{
background-color: #07294d;
}
/*===== SEARCH BOX =====*/
/*=====================================================
3. SLIDER css
======================================================*/
.single-slider{
padding-bottom: 300px;
}
.slider-cont{
position: relative;
z-index: 5;
}
.slider-cont h1{
font-size: 60px;
font-family: "Sour Gummy";
font-weight: 700;
color: #fff;
}
.slider-cont h2{
font-family: "Sour Gummy";
font-weight: 700;
color: #fff;
}
.slider-cont h3{
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: #fff;
font-size: 20px;
padding-bottom: 25px;
}
.slider-cont p{
font-size: 18px;
color: #fff;
font-weight: 600;
/* padding-bottom: 50px; */
}
.slider-cont ul {}
.slider-cont ul li{
display: inline-block;
margin-right: 15px;
}
.slider-cont ul li:last-child{
margin-right: 0;
}
.slider-active .next.slick-arrow {
left: auto;
right: 0;
}
.slider-active .slick-arrow {
font-size: 50px;
position: absolute;
top: 0%;
left: 0;
color: #fff;
cursor: pointer;
z-index: 5;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.slider-active:hover .slick-arrow{
left: 30px;
opacity: 1;
visibility: visible;
}
.slider-active:hover .next.slick-arrow {
left: auto;
right: 30px;
}
/*===== Index-2 =====*/
.slider-2 .slider-cont h1 {
padding-bottom: 40px;
}
.slider-2.single-slider{
padding-top: 230px;
padding-bottom: 250px;
}
/*===== Index-3 =====*/
#slider-part-3{
position: relative;
padding-top: 220px;
padding-bottom: 120px;
}
#slider-part-3::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.slider-cont-3{
position: relative;
z-index: 5;
background-color: rgba(0, 0, 0, 0.4);
padding: 70px 100px 80px;
}
.slider-cont-3 h2{
color: #fff;
font-size: 48px;
padding-bottom: 8px;
}
.slider-cont-3 span{
font-size: 24px;
color: #fff;
}
.slider-search{
background-color: #fff;
border-radius: 5px;
}
.slider-search .nice-select {
width: 100%;
height: 55px;
line-height: 55px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border: 0;
}
.slider-search .nice-select span {
font-size: 16px;
font-family: 'Poppins', sans-serif;
color: #07294d;
font-weight: 400;
}
.slider-search .nice-select .list {
width: 100%;
border-radius: 0;
margin: 0;
}
.slider-search .nice-select::after {
border-bottom: 0;
border-right: 8px solid #07294d;
border-top: 8px solid transparent;
height: 0px;
margin-top: -4px;
width: 0px;
}
.slider-search input{
width: 100%;
height: 55px;
border: 0;
border-left: 1px solid #a8a8a8;
padding-left: 25px;
font-size: 16px;
font-family: 'Poppins', sans-serif;
color: #8a8a8a;
}
.slider-search .main-btn {
line-height: 53px;
width: 100%;
padding: 0;
}
.slider-search .main-btn:hover{
border-color: #07294d;
}
.slider-feature{}
.singel-slider-feature{
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.singel-slider-feature .icon{}
.singel-slider-feature .cont{
padding-left: 30px;
}
.singel-slider-feature .cont h3{
color: #fff;
padding-bottom: 3px;
margin-top: -3px;
font-size: 24px;
}
.singel-slider-feature .cont span{
color: #fff;
font-size: 15px;
}
/*=====================================================
4. CATEGORY css
======================================================*/
/* Área de Linguagens (Azul ou Verde Claro) */
.color-1 {
background-color: #4CAF50; /* Verde Claro */
color: white;
}
.color-1:hover {
background-color: #45a049;
}
/* Área de Ciências Exatas (Laranja ou Amarelo) */
.color-2 {
background-color: #FFA726; /* Laranja */
color: white;
}
.color-2:hover {
background-color: #fb8c00;
}
/* Área de Ciências Humanas (Roxo ou Vinho) */
.color-4 {
background-color: #8E44AD; /* Roxo */
color: white;
}
.color-4:hover {
background-color: #7D3C98;
}
/* Área de Ciências Naturais (Verde Escuro) */
.color-5 {
background-color: #388E3C; /* Verde Escuro */
color: white;
}
.color-5:hover {
background-color: #2E7D32;
}
/* Área de Artes e Educação Física (Vermelho) */
.color-6 {
background-color: #E53935; /* Vermelho */
color: white;
}
.color-6:hover {
background-color: #D32F2F;
}
/* Área de Ensino Religioso (Cinza ou Bege) */
.color-7 {
background-color: #BDBDBD; /* Cinza */
color: white;
}
.color-7:hover {
background-color: #9E9E9E;
}
.category{
background-color: #212121;
border-radius: 10px;
margin-top: -150px;
position: relative;
z-index: 5;
}
/* Estilos Globais */
.singel-category {
display: inline-block;
padding: 20px;
border-radius: 10px;
text-align: center;
transition: background-color 0.3s ease;
}
.singel-category .icon img {
margin-bottom: 10px;
}
.singel-category .cont span {
font-size: 18px;
font-weight: bold;
}
.category-text h2{
font-size: 36px;
color: #fff;
padding: 0 50px;
}
.singel-category {
padding: 20px 0;
border-radius: 10px;
display: block;
}
.singel-category .icon{
display: inline-block;
}
.singel-category .cont {
display: block;
}
.singel-category .cont span{
color: #fff;
font-size: 18px;
padding-top: 15px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
.category-slied{}
.category-slied a{
display: block;
}
.category-slied .slick-arrow {
position: absolute;
top: 0%;
right: -50px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.category-slied .prev.slick-arrow{
right: auto;
left: -50px;
}
.category-slied .slick-arrow i{
width: 35px;
height: 35px;
line-height: 35px;
border-radius: 50%;
background-color: #557495;
text-align: center;
font-size: 24px;
color: #fff;
cursor: pointer;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.category-slied .slick-arrow i:hover{
background-color: #ffc600;
}
/*=====================================================
5. ABOUT css
======================================================*/
#sobre-escola {
padding-top: 100px;
}
#sobre-escola .content .row {
display: flex;
flex-wrap: wrap;
gap: 20px; /* Espaço entre blocos */
justify-content: space-between; /* Distribui os blocos uniformemente */
position: relative;
}
#sobre-escola .col-md-6 {
flex: 1 1 calc(50% - 20px); /* Permite que cada bloco ocupe 50% da largura menos a margem */
box-sizing: border-box;
min-width: 300px;
}
@media (max-width: 768px) {
#sobre-escola .col-md-6 {
flex: 1 1 100%; /* Empilha os blocos em telas menores */
margin-bottom: 20px;
}
}
#sobre-escola .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
#sobre-escola .section-header {
text-align: center;
margin-bottom: 40px;
}
#sobre-escola .section-header h2 {
font-size: 36px;
font-weight: bold;
margin-bottom: 10px;
font-family: "Sour Gummy";
}
/* Efeito de fade para alternância de textos */
.fade {
opacity: 0;
}
/* Layout com Blocos */
#sobre-escola .content .row {
display: flex;
flex-wrap: wrap;
gap: 20px; /* Espaço entre blocos */
}
#sobre-escola .content .col {
flex: 1;
min-width: 300px;
}
.table {
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
color: #000;
}
table tbody tr:hover {
background-color: #000; /* Cor de fundo ao passar o mouse */
color: #fff; /* Cor do texto ao passar o mouse */
}
.info-bloco {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
transition: transform 0.3s ease, box-shadow 0.3s ease;
font-family: monospace;
}
.info-bloco:hover {
transform: translateY(-10px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
#sobre-escola .info-bloco p {
font-size: 18px;
font-family: monospace;
margin-bottom: 15px;
}
#sobre-escola .info-bloco ul {
margin: 20px 0;
padding-left: 20px;
}
#sobre-escola .info-bloco ul li {
font-size: 18px;
margin-bottom: 10px;
}
#sobre-escola .info-bloco ul li strong {
color: #333;
}
/* Resposividade */
@media (max-width: 768px) {
#sobre-escola .section-header h2 {
font-size: 28px;
}
#sobre-escola .content .row {
display: block; /* Empilha blocos em telas menores */
}
#sobre-escola .info-bloco {
margin-bottom: 20px;
}
}
.section-header h5 {
font-size: 20px;
text-transform: uppercase;
color: #333;
}
.section-header h2 {
font-size: 36px;
margin-bottom: 20px;
color: #000;
}
.content .row {
display: flex;
flex-wrap: wrap;
}
.info-bloco {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.about-event {
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
padding: 20px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
}
.about-event .event-title h3 {
font-size: 24px;
margin-bottom: 15px;
text-align: center;
}
.about-event ul {
list-style: none;
padding: 0;
}
.about-event ul li {
margin-bottom: 15px;
}
.about-event ul li .singel-event {
padding: 10px 0;
border-bottom: 1px solid #ddd;
}
.about-event ul li .singel-event span {
font-size: 14px;
color: #666;
margin-right: 15px;
}
.about-event ul li .singel-event a h4 {
font-size: 18px;
color: #333;
transition: color 0.3s ease;
}
.about-event ul li .singel-event a:hover h4 {
color: #ff9900;
}
.carousel-container {
position: relative;
width: 100%;
max-width: 600px; /* Tamanho máximo do container */
margin: 0 auto;
text-align: center;
overflow: hidden; /* Oculta os itens fora da visão */
border-radius: 10px; /* Bordas arredondadas para o container */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Sombra suave para destaque */
background-color: #f7f7f7; /* Fundo sutil para o container */
}
.carousel-events {
list-style: none;
padding: 0;
margin: 0;
height: 250px; /* Altura para exibir um evento por vez */
display: flex;
flex-direction: column;
justify-content: flex-start;
transition: transform 0.5s ease; /* Animação suave ao mudar de evento */
}
.singel-event {
display: none; /* Todos os eventos são ocultados inicialmente */
padding: 20px;
background-color: #fff;
border-radius: 8px; /* Bordas arredondadas nos eventos */
margin: 10px 20px; /* Espaçamento entre os eventos */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
transition: transform 0.3s ease, opacity 0.3s ease; /* Suave transição de visibilidade e movimento */
}
.singel-event.active {
display: block; /* Exibe apenas o evento ativo */
transform: translateY(0); /* Reseta o movimento */
opacity: 1; /* Define visibilidade máxima */
}
.singel-event h4 {
font-size: 18px;
color: #333;
margin: 10px 0;
}
.singel-event span {
display: block;
color: #777;
font-size: 14px;
margin: 5px 0;
}
.carousel-arrow {
background-color: #212121; /* Cor de fundo das setas */
color: white;
border: none;
padding: 15px;
cursor: pointer;
font-size: 24px;
width: 50px;
height: 50px;
border-radius: 50%; /* Formato circular para as setas */
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Animação suave */
position: absolute;
top: 50%;
transform: translateY(-50%); /* Alinha verticalmente no centro do container */
z-index: 10;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra leve */
}
.carousel-arrow:hover {
background-color: #FFD700; /* Cor ao passar o mouse sobre as setas */
color: #000;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra mais pronunciada */
transform: translateY(-50%) rotate(360deg); /* Adiciona rotação completa de 360 graus */
}
.carousel-arrow.up {
left: 10px; /* Posiciona a seta para cima no lado esquerdo */
}
.carousel-arrow.down {
right: 10px; /* Posiciona a seta para baixo no lado direito */
}
@media (max-width: 768px) {
.carousel-container {
max-width: 100%; /* Ajusta para telas menores */
}
.singel-event {
margin: 10px; /* Ajusta o espaçamento dos eventos */
}
.carousel-arrow {
width: 40px;
height: 40px; /* Reduz o tamanho das setas em telas menores */
font-size: 20px;
}
}
/* Seção de Equipe */
.team-item {
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: #fff;
position: relative;
}
.team-item:hover {
transform: translateY(-10px); /* Efeito ao passar o mouse */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.team-img {
position: relative;
}
.team-img img {
transition: transform 0.3s ease;
}
.team-img:hover img {
transform: scale(1.1); /* Zoom suave na imagem ao passar o mouse */
}
.team-img:hover .team-social {
opacity: 1;
transform: translateY(0); /* Animação para exibir os ícones das redes sociais */
}
.team-social a:hover {
background-color: #333; /* Cor mais escura ao passar o mouse */
}
/* Texto */
.team-item .text-center {
padding: 20px 15px;
}
.team-item h5 {
font-size: 20px;
text-transform: uppercase;
color: #333;
margin-bottom: 5px;
}
.team-item p {
font-size: 14px;
color: #777;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Cor dos botões de redes sociais */
.btn-primary {
background-color: #3498db; /* Cor padrão */
border: none;
}
.btn-primary:hover {
background-color: #2980b9; /* Efeito ao passar o mouse */
}
/* Ajustes de responsividade */
@media (max-width: 992px) {
.team-item {
margin-bottom: 30px; /* Espaço inferior entre os blocos */
}
}
@media (max-width: 768px) {
.team-item {
padding: 20px;
}
.team-item h4 {
font-size: 18px;
}
.team-item p {
font-size: 12px;
}
.team-social a {
font-size: 16px;
}
}
@media (max-width: 576px) {
.team-item {
margin-bottom: 30px;
}
.team-img img {
width: 100%;
height: auto;
}
.team-social a {
font-size: 14px;
}
}
/*=====================================================
6. APPLY css
======================================================*/
/* Seção Apply */
#apply-aprt {
padding-top: 50px;
padding-bottom: 100px;
background-color: #212121;
}
#apply-aprt .container {
max-width: 1200px;
margin: 0 auto;
}
#apply-aprt .apply {
margin-top: 60px;
}
#apply-aprt .apply-cont {
padding: 40px;
text-align: center;
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transições suaves */
}
#apply-aprt .apply-cont p {
font-weight: bold;
font-family: monospace;
color: #fff;
line-height: 1.5;
margin-bottom: 0;
}
#apply-aprt .apply-color-1 {
background-color: #4caf50; /* Verde suave */
}
#apply-aprt .apply-color-2 {
background-color: #f44336; /* Vermelho suave */
}
/* Efeitos de hover */
#apply-aprt .apply-cont:hover {
transform: translateY(-10px); /* Efeito de hover para levantar o bloco */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Sombra ao pairar */
}
/* Lado a lado com quebra automática */
#apply-aprt .row {
display: flex;
flex-wrap: wrap; /* Permite que os blocos quebrem para baixo quando necessário */
gap: 20px; /* Espaço entre os blocos */
}
#apply-aprt .col-lg-6 {
flex: 1 1 calc(50% - 20px); /* Cada bloco ocupa 50% da largura com o espaço */
min-width: 300px; /* Tamanho mínimo para manter blocos legíveis */
}
/* Mantém o layout responsivo em telas médias */
@media (max-width: 992px) {
#apply-aprt .apply-cont {
padding: 30px;
}
#apply-aprt .apply-cont p {
font-size: 22px;
}
}
/* Ajusta para telas pequenas */
@media (max-width: 576px) {
#apply-aprt .col-lg-6 {
flex: 1 1 100%; /* Em telas pequenas, cada bloco ocupa 100% da largura */
}
#apply-aprt .apply-cont p {
font-size: 18px;
}
}
#horarios {
padding: 30px;
margin-bottom: 40px;
}
#horarios #h3 {
font-size: 36px;
font-weight: bold;
margin: 20px;
color: #fff;
}
/* Estilo para os horários */
.horarios {
display: flex;
justify-content: center; /* Centraliza o bloco no meio da tela */
align-items: center; /* Alinha os itens verticalmente */
gap: 50px; /* Espaço entre os blocos */
margin-top: 20px;
}
.horario-item {
text-align: center;
background-color: #f4f4f4; /* Cor de fundo para destacar os itens */
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.horario-item h3 {
margin-bottom: 10px;
font-size: 1.2em;
color: #000;
}
.horario-item p {
font-size: 1em;
color: #333;
}
.horarios article {
background-color: #f9f9f9;
padding: 15px 15px;
border-radius: 10px;
border: 1px solid #ddd;
transition: all 0.3s ease;
}
.horarios article:hover {
background-color: #000;
color: white;
border-color: #595959;
}
.horarios article h3 {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.horarios article p {
margin: 5px 0;
font-size: 1.2em;
}
.horarios article:hover h3,
.horarios article:hover p {
color: white;
}
/* Tabela de horários */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th,
td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #212121;
color: white;
font-weight: bold;
}
tr {
transition: all 0.2s ease;
}
tr:hover {
background-color: #fff;
}
/* Responsividade */
@media (max-width: 768px) {
.horarios {
grid-template-columns: 1fr;
}
}
/* Tornar a tabela responsiva */
@media (max-width: 630px) {
table {
display: block;
width: 100%;
overflow-x: auto; /* Adiciona scroll horizontal se a tabela for maior que a tela */
white-space: nowrap; /* Impede que o conteúdo da célula quebre para a próxima linha */
}
/* Melhorar o layout das células */
th, td {
font-size: 14px; /* Reduz o tamanho da fonte para melhor visualização em telas menores */
padding: 8px; /* Diminui o padding */
}
/* Alternativa: Você também pode querer ajustar a largura de algumas colunas para manter o layout */
td:first-child, th:first-child {
width: 150px; /* Define uma largura mínima para a primeira coluna */
}
}
/*=====================================================
7. Localização css
======================================================*/
.localização {
padding: 50px;
background-color: #212121; /* Cor de fundo suave */
}
.localização div {
max-width: 1200px;
margin: 0 auto;
position: relative;
box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.1); /* Sombra sutil ao redor */
border-radius: 15px; /* Bordas arredondadas */
overflow: hidden;
}
.localização iframe {
border: 0;
border-radius: 15px; /* Aplique a borda arredondada ao iframe também */
}
@media (max-width: 768px) {
.localização iframe {
height: 300px; /* Ajusta a altura em telas menores */
}
}
/*=====================================================
8. VIDEO FEATURES css
======================================================*/
#video-feature{
position: relative;
margin-top: 100px;
}
#video-feature::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5); /* Cor preta com 50% de opacidade */
z-index: 1;
}
.feature-bg{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: #212121e5;
}
.video{
padding-left: 80px;
}
.video i{
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
font-size: 24px;
background-color: #FFF500;
color: #000;
border-radius: 50%;
}
.video i:hover {
background-color: #000;
color: #FFF500;
}
.feature{
position: relative;
z-index: 5;
}
.feature .feature-title{}
.feature .feature-title h3{
font-size: 36px;
color: #fff;
padding-bottom: 15px;
}
.feature ul li .singel-feature{
padding-top: 55px;
overflow: hidden;
}
.feature ul li .singel-feature .icon{
float: left;
overflow: hidden;
display: inline-block;
padding-right: 30px;
}
.feature ul li .singel-feature .cont {
width: 78%;
float: left;
overflow: hidden;
}
.feature ul li .singel-feature .cont h4{
font-size: 24px;
font-family: "Sour Gummy";
color: #fff;
padding-bottom: 15px;
}
.feature ul li .singel-feature .cont p{
color: #fff;
font-family: monospace;
}
@media screen and (min-width: 768px) {
.li-scale {
transition: transform 0.3s ease; /* Transição suave */
}
.li-scale:hover {
transform: scale(1.11); /* Aumenta o tamanho em 5% ao passar o mouse */
}
}
.modal {
display: none; /* Oculta o modal por padrão */
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.861); /* Fundo escurecido */
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #D9BCA9;
box-shadow: 0px 0px 10px black;
padding: 5px;
border-radius: 8px;
width: 90%;
max-width: 1000px;
text-align: center;
}
.modal-content video {
width: 100%;
border-radius: 8px;
}
.close {
position: absolute;
top: 1.5em;
right: 1.5em;
color: #fff;
font-size: 2em;
font-weight: bold;
cursor: pointer;
z-index: 9999999999;
}
.close:hover {
color: #FFF500;
}
/*=====================================================
9. accordion css
======================================================*/
/* Estilos gerais para o accordion */
#FAQ{
margin-top: 100px;
}
.accordion-button {
background-color: #212121;
color: white;
border: none;
transition: background-color 0.3s, color 0.3s;
width: 100%; /* Ocupar todo o espaço */
padding: 10px;
position: relative;
box-sizing: border-box; /* Considera padding e borda ao calcular a largura */
}
.accordion-button:not(.collapsed) {
background-color: #FFD700;
color: #000;
}
.accordion-button:hover {
background-color: #FFD700;
color: #000;
}
.accordion-button:focus {
box-shadow: none;
}
.accordion-body {
background-color: #f1f1f1;
color: #333;
border-top: 1px solid #dcdcdc;
border-radius: 0 0 0.5rem 0.5rem;
padding: 1rem;
}
.accordion-header {
background-color: #212121;
border-bottom: 1px solid #dcdcdc;
border-radius: 0.5rem 0.5rem 0 0;
width: 100%; /* Garante que o header também ocupe o espaço total */
}
.accordion-item {
border: 1px solid #dcdcdc;
border-radius: 0.5rem;
margin-bottom: 1rem;
overflow: hidden;
}
.accordion-button::after {
content: "\f078"; /* Código da seta para baixo */
font-family: "FontAwesome";
font-size: 1.25rem;
position: absolute; /* Faz o ícone flutuar */
right: 1rem; /* Ajusta a posição do ícone à direita */
top: 50%;
transform: translateY(-50%); /* Centraliza verticalmente */
transition: transform 0.3s, color 0.3s;
color: white; /* Cor do ícone */
}
.accordion-button.collapsed::after {
content: "\f077"; /* Código da seta para cima */
transform: translateY(-50%) rotate(180deg);
}
/* Estilos adicionais */
.accordion-button:focus,
.accordion-button:active {
outline: none;
}
.accordion-body p {
margin: 0;
font-family: monospace;
}
/* Adicionando responsividade */
@media (max-width: 767px) {
.accordion-button {
font-size: 1rem;
padding-right: 2rem; /* Ajusta o padding para o ícone em dispositivos menores */
}
.accordion-body {
padding: 0.75rem;
}
}
/* Estilos para o hover do botão */
.accordion-button:hover {
background-color: #FFD700;
color: #000;
cursor: pointer;
}
/*=====================================================
11. TEASTIMONIAL css
======================================================*/
#testimonial{
margin-top: 100px;
}
#testimonial .section-title{
position: relative;
z-index: 5;
}
#testimonial .section-title h5,
#testimonial .section-title h2{
color: #fff;
}
#testimonial .section-title h5::before{
background-color: #fff;
}
.testimonial-slied{
position: relative;
z-index: 5;
}
.singel-testimonial{
position: relative;
}
.singel-testimonial .testimonial-thum{
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.singel-testimonial .testimonial-thum img{
border-radius: 5px;
}
.singel-testimonial .testimonial-thum .quote{
position: absolute;
top: -22px;
}
.singel-testimonial .testimonial-thum .quote i{
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
background-color: #ffc600;
border-radius: 50%;
color: #07294d;
font-size: 18px;
}
.singel-testimonial .testimonial-cont {
padding-left: 140px;
}
.singel-testimonial .testimonial-cont p {
color: #fff;
padding-bottom: 32px;
}
.singel-testimonial .testimonial-cont h6 {
color: #fff;
padding-bottom: 4px;
}
.singel-testimonial .testimonial-cont span {
color: #fff;
font-size: 18px;
}
.testimonial-slied .slick-dots{
margin: 0 auto;
}
.testimonial-slied .slick-dots li{
display: inline-block;
margin-top: 15px;
}
.testimonial-slied .slick-dots li button{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
font-size: 0;
padding: 0;
border: 0;
margin: 0 3px;
cursor: pointer;
}
.testimonial-slied .slick-dots li.slick-active button{
background-color: #ffc600;
}
/*=====================================================
12. Parceiros css
======================================================*/
#parceiros {
background-color: #D9BCA9;
}
/*=====================================================
13. FOOTER css
======================================================*/
.footer-top{
background-color: #212121;
}
.footer-about {
padding-right: 50px;
}
.footer-about p {
color: #fff;
padding-top: 15px;
margin-bottom: 20px; /* Espaço abaixo do parágrafo */
font-family: monospace;
}
.footer-about ul li {
display: inline-block;
margin-right: 15px;
margin-bottom: 10px; /* Espaço abaixo dos itens da lista */
}
.footer-link ul li {
line-height: 35px;
margin-bottom: 10px; /* Espaço abaixo dos itens da lista */
}
.footer-address ul li {
margin-bottom: 15px; /* Aumenta o espaço entre os itens de endereço */
}
.footer-about ul li:last-child{
margin-right: 0;
}
.footer-about ul li p a{
width: 35px;
line-height: 35px;
font-size: 15px;
color: #fff;
border-radius: 50%;
text-align: center;
background-color: #212121;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.footer-about ul li p a:hover{
background-color: #ffc600;
color: #021d3a;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.footer-title h6{
font-size: 18px;
color: #fff;
}
.footer-link{
overflow: hidden;
}
.footer-link ul{
width: 75%;
float: left;
overflow: hidden;
}
.footer-link ul li{
line-height: 35px;
}
.footer-link ul li a{
color: #fff;
font-size: 15px;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.footer-link ul li a i{
margin-right: 8px;
color: #ffc600;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.footer-link ul li a:hover {
color: #ffc600;
}
.footer-link ul li a:hover i{
margin-right: 15px;
}
.support ul{
float: none;
width: 100%;
}
.footer-address ul li{
position: relative;
margin-bottom: 10px;
}
.footer-address ul li:last-child{
margin-bottom: 0;
}
.footer-address ul li .icon i{
font-size: 18px;
color: #ffc600;
position: absolute;
left: 0;
top: 5px;
}
.footer-address ul li .cont{
padding-left: 35px;
}
.footer-address ul li .cont p{
color: #fff;
}
.footer-copyright{
background-color: #212121;
}
.footer-copyright .copyright p{
color: #fff;
}
.footer-copyright .copyright p span{
font-weight: 600;
}
.back-to-top{
position: fixed;
right: 20px;
bottom: 20px;
width: 40px;
height: 40px;
line-height: 35px;
background-color: #ffc600;
color: #fff;
font-size: 28px;
border-radius: 5px;
z-index: 99;
text-align: center;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
display: none;
}
.back-to-top:hover{
color: #fff;
background-color: #212121;
}
.link-scale {
transition: transform 0.1s ease;
display: inline-block; /* Garante que o link seja tratado como um bloco inline */
transform-origin: left; /* O zoom ocorre da esquerda para a direita */
}
.link-scale:hover {
transform: scale(1.1);
text-decoration: underline;
}
#a-link {
color: white;
}
#a-link:hover {
color: #000;
text-decoration: underline;
}
/*=====================================================
14. CATEGORY 2 css
======================================================*/
.category-2-items{}
.category-2-items .singel-items{
position: relative;
}
.category-2-items .singel-items .items-image{
position: relative;
}
.category-2-items .singel-items .items-image img{
width: 100%;
border-radius: 5px;
}
.category-2-items .singel-items .items-image::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(7, 41, 77, 0.6);
border-radius: 5px;
}
.category-2-items .singel-items .items-cont {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.category-2-items .singel-items .items-cont h5{
color: #fff;
font-size: 18px;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.category-2-items .singel-items .items-cont span{
font-size: 14px;
color: #fff;
}
.category-2-items .singel-items .items-cont h5:hover{
color: #ffc600;
}
.category-form {
border-radius: 5px;
overflow: hidden;
-webkit-box-shadow: 0px 0px 75px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 75px 0px rgba(0,0,0,0.1);
margin-top: -154px;
}
.category-form .form-title{
background-color: #07294d;
padding-top: 35px;
padding-bottom: 40px;
}
.category-form .form-title h3{
color: #ffc600;
font-size: 36px;
}
.category-form .form-title span{
font-size: 24px;
color: #fff;
font-family: 'Montserrat', sans-serif;
}
.category-form .main-form{
padding-top: 20px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
background-color: #fff;
}
.category-form .main-form .singel-form{
margin-top: 20px;
}
.category-form .main-form .singel-form input{
width: 100%;
height: 60px;
padding: 0 30px;
font-size: 15px;
color: #8a8a8a;
border: 1px solid #a1a1a1;
border-radius: 5px;
}
.category-form .main-form .singel-form .main-btn{
width: 100%;
line-height: 60px;
margin-top: 20px;
}
/*=====================================================
15. COURSE 2 css
======================================================*/
.singel-course-2{}
.singel-course-2 > .thum{
position: relative;
}
.singel-course-2 > .thum .image > img{
border-radius: 5px;
width: 100%;
}
.singel-course-2 > .thum .price{
position: absolute;
bottom: 40px;
right: 15px;
z-index: 5;
}
.singel-course-2 > .thum .price span {
font-size: 14px;
color: #07294d;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
width: 55px;
height: 55px;
line-height: 55px;
border-radius: 50%;
background-color: #ffc600;
text-align: center;
}
.singel-course-2 > .thum .course-teacher{
background-color: rgba(0, 0, 0, 0.8);
padding: 15px 25px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.singel-course-2 > .thum .course-teacher > .thum{
display: inline-block;
}
.singel-course-2 > .thum .course-teacher > .thum img{
border-radius: 50%;
}
.singel-course-2 > .thum .course-teacher .name{
display: inline-block;
margin-left: 5px;
position: relative;
bottom: 13px;
}
.singel-course-2 > .thum .course-teacher .name h6{
color: #fff;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.singel-course-2 > .thum .course-teacher .name h6:hover{
color: #ffc600;
}
.singel-course-2 > .thum .course-teacher .review{
display: inline-block;
margin-left: 15px;
position: relative;
bottom: 13px;
}
.singel-course-2 > .thum .course-teacher .review ul li{
display: inline-block;
font-size: 12px;
color: #ffc600;
}
.singel-course-2 > .thum .course-teacher .review ul li{}
.singel-course-2 .cont{
padding-top: 25px;
}
.singel-course-2 .cont h4{
font-weight: 600;
font-weight: 24px;
color: #000;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.singel-course-2 .cont h4:hover{
color: #ffc600;
}
/*=====================================================
16. COUNTER css
======================================================*/
.singel-counter{
position: relative;
z-index: 5;
}
.singel-counter span{
font-size: 36px;
color: #ffc600;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.singel-counter p{
font-family: 'Montserrat', sans-serif;
font-weight: 400;
color: #fff;
font-size: 15px;
}
/*===== Index-3 =====*/
.counter-3{}
.counter-3 p{
color: #07294d;
font-weight: 600;
}
/*=====================================================
17. TEACHERS 2 css
======================================================*/
.teachers-2{}
.teachers-2 .teachers-2-singel{
background-color: #fff;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 40px 15px;
}
.teachers-2 .teachers-2-singel .thum{}
.teachers-2 .teachers-2-singel .thum img{
border-radius: 50%;
}
.teachers-2 .teachers-2-singel .cont{
padding-left: 20px;
}
.teachers-2 .teachers-2-singel .cont a{}
.teachers-2 .teachers-2-singel .cont a h5{
font-size: 18px;
color: #000;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.teachers-2 .teachers-2-singel .cont a:hover h5{
color: #ffc600;
}
.teachers-2 .teachers-2-singel .cont p{
font-size: 15px;
}
.teachers-2 .teachers-2-singel .cont span{
font-size: 14px;
color: #07294d;
}
.teachers-2 .teachers-2-singel .cont span i{
margin-right: 5px;
color: #ffc600;
}
.student-slied{
z-index: 5;
}
.happy-student{
background-color: #07294d;
padding-top: 65px;
padding-left: 80px;
padding-right: 80px;
padding-bottom: 80px;
border-radius: 5px;
position: relative;
}.happy-student{
background-color: #07294d;
padding-top: 65px;
padding-left: 80px;
padding-right: 80px;
padding-bottom: 80px;
border-radius: 5px;
position: relative;
}
.happy-student .happy-title{}
.happy-student .happy-title h3{
font-size: 36px;
color: #fff;
padding-bottom: 60px;
}
.happy-student .singel-student{
position: relative;
z-index: 5;
}
.happy-student .singel-student img{
padding-bottom: 20px;
}
.happy-student .singel-student p {
color: #fff;
padding-bottom: 30px;
padding-right: 135px;
}
.happy-student .singel-student h6{
color: #fff;
font-size: 16px;
}
.happy-student .singel-student span{
font-size: 14px;
color: #fff;
}
.happy-student .student-image{
position: absolute;
bottom: 0;
right: 0;
}
/*=====================================================
18. EVENT 2 css
======================================================*/
.event-bg{
position: relative;
border-radius: 5px;
overflow: hidden;
}
.event-bg::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, left top, right top, from(rgba(7,41,77,0.3)),color-stop(10%, rgba(7,41,77,0.3)),to(rgba(7,41,77,1)));
background: linear-gradient(to right, rgba(7,41,77,0.3) 0%,rgba(7,41,77,0.3) 10%,rgba(7,41,77,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d07294d', endColorstr='#07294d',GradientType=1 );
}
.event-2 .event-title h3 {
font-size: 36px;
color: #fff;
padding-bottom: 5px;
}
.event-2 ul li .singel-event {
padding: 25px 0;
border-bottom: 1px solid #cecece;
}
.event-2 ul li:last-child .singel-event {
border-bottom: 0;
}
.event-2 ul li .singel-event span {
font-size: 14px;
color: #fff;
margin-right: 20px;
}
.event-2 ul li .singel-event span i {
color: #ffc600;
margin-right: 3px;
}
.event-2 ul li .singel-event a {
display: block;
}
.event-2 ul li .singel-event a h4 {
padding-top: 5px;
padding-bottom: 10px;
color: #fff;
font-size: 24px;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.event-2 ul li .singel-event a:hover h4 {
color: #ffc600;
}
/*=====================================================
19. COUNT DOWN css
======================================================*/
.count-down-cont{
position: relative;
z-index: 5;
}
.count-down-cont h3{
font-size: 30px;
color: #fff;
font-weight: 500;
padding-bottom: 5px;
}
.count-down-cont h2{
font-size: 72px;
color: #ffc600;
font-weight: 700;
padding-bottom: 37px;
}
.count-down-time{
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.count-down-time .singel-count{
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 25%;
}
.count-down-time .singel-count .number{
font-size: 72px;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
display: block;
}
.count-down-time .singel-count .title{
color: #fff;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 18px;
display: block;
}
.category-form-3{
margin-top: 0;
position: relative;
z-index: 5;
}
.category-form-3 .form-title {
background-color: #ffc600;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.category-form-3 .form-title h3 {
color: #07294d;
}
.category-form-3 .form-title span {
font-weight: 600;
}
.category-form-3 .main-btn{
color: #fff;
}
.category-form-3 .main-btn:hover{
color: #ffc600;
border-color: #07294d;
}
/*=====================================================
20. PAGE BANNER css
======================================================*/
.page-banner-cont{
position: relative;
z-index: 5;
}
.page-banner-cont h2{
font-size: 52px;
color: #fff;
padding-bottom: 15px;
}
.page-banner-cont .breadcrumb{
margin: 0;
background: none;
padding: 0;
}
.page-banner-cont .breadcrumb .breadcrumb-item {
color: #ffc600;
font-size: 18px;
font-weight: 600;
margin-bottom: 2px;
}
.page-banner-cont .breadcrumb .breadcrumb-item a{
color: #fff;
}
.page-banner-cont .breadcrumb-item + .breadcrumb-item::before {
color: #fff;
content: "/";
font-size: 18px;
}
/*=====================================================
21. ABOUT PAGE css
======================================================*/
.about-image img {
width: 100%;
border-radius: 5px;
}
.about-singel-items{}
.about-singel-items span{
font-size: 60px;
color: #dbdbdb;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
line-height: 46px;
padding-bottom: 22px;
}
.about-singel-items h4{
color: #000;
font-size: 24px;
padding-bottom: 25px;
}
/*=====================================================
22. COURSES PAGE css
======================================================*/
.tab-content{}
.tab-content .singel-course .course-teacher .name {
bottom: 0;
}
.courses-top-search{
background-color: #fff;
padding: 15px 30px;
border-radius: 5px;
overflow: hidden;
}
.courses-top-search .nav{
margin-top: 5px;
}
.courses-top-search .nav .nav-item{
margin-right: 15px;
font-size: 15px;
color: #8a8a8a;
}
.courses-top-search .nav .nav-item a{
font-size: 16px;
color: #8a8a8a;
}
.courses-top-search .nav .nav-item a.active{
color: #ffc600;
}
.courses-search{
position: relative;
}
.courses-search input{
height: 30px;
width: 240px;
background-color: #f6f6f6;
border: 0;
color: #8a8a8a;
font-size: 14px;
border-radius: 5px;
padding: 0 20px;
}
.courses-search button{
position: absolute;
top: 0;
right: 15px;
padding: 0;
height: 30px;
font-size: 15px;
color: #8a8a8a;
border: 0;
background: none;
cursor: pointer;
}
#courses-list .singel-course .thum .price {
right: -25px;
bottom: auto;
top: 30px;
}
.courses-pagination{}
.courses-pagination .pagination{}
.courses-pagination .pagination .page-item{
margin: 0 5px;
}
.courses-pagination .pagination .page-item a{
font-size: 15px;
color: #07294d;
width: 40px;
height: 40px;
line-height: 36px;
border: 2px solid #aaa;
border-radius: 5px;
text-align: center;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.courses-pagination .pagination .page-item a.active,
.courses-pagination .pagination .page-item a:hover{
background-color: #ffc600;
border-color: #ffc600;
}
/*=====================================================
23. COURSE SINGEl PAGE css
======================================================*/
.corses-singel-left{
padding: 45px 50px;
background-color: #fff;
}
.corses-singel-left .title{}
.corses-singel-left .title h3{
font-size: 30px;
color: #000;
font-weight: 600;
padding-bottom: 25px;
}
.corses-singel-left .course-terms{}
.corses-singel-left .course-terms > ul > li{
display: inline-block;
margin-right: 60px;
}
.corses-singel-left .course-terms > ul li:last-child{
margin-right: 0;
}
.corses-singel-left .course-terms ul li .teacher-name{
position: relative;
}
.corses-singel-left .course-terms ul li .teacher-name .thum{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
}
.corses-singel-left .course-terms ul li .teacher-name .thum img{
border-radius: 50%;
}
.corses-singel-left .course-terms ul li .teacher-name .name{
padding-left: 60px;
}
.corses-singel-left .course-terms ul li .review span,
.corses-singel-left .course-terms ul li .teacher-name .name span,
.corses-singel-left .course-terms ul li .course-category span{
color: #8a8a8a;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.corses-singel-left .course-terms ul li .teacher-name .name h6,
.corses-singel-left .course-terms ul li .course-category h6{
font-size: 16px;
color: #24486e;
font-weight: 700;
}
.corses-singel-left .course-terms ul li .review{}
.corses-singel-left .course-terms ul li .review ul li {
display: inline-block;
}
.corses-singel-left .course-terms ul li .review ul li a {
font-size: 14px;
color: #ffc600;
}
.corses-singel-left .course-terms ul li .review ul li.rating{
font-size: 14px;
color: #000;
font-weight: 600;
margin-left: 13px;
}
.corses-singel-image{}
.corses-singel-image img{
width: 100%;
}
.corses-tab{
border: 1px solid #edf0f2;
border-radius: 5px;
}
.corses-tab .nav{}
.corses-tab .nav .nav-item{}
.corses-tab .nav .nav-item a {
font-size: 16px;
color: #24486e;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
padding: 20px 0;
display: block;
background-color: #edf0f2;
}
.corses-tab .nav .nav-item a.active {
background-color: #fff;
}
.overview-description{
padding: 0px 30px 25px;
}
.overview-description .singel-description{}
.overview-description .singel-description h6{
font-size: 18px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
color: #000;
padding-bottom: 10px;
}
.curriculam-cont{
padding: 25px 30px;
}
.curriculam-cont .title h6{
font-size: 18px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
color: #000;
padding-bottom: 30px;
}
.curriculam-cont .accordion{
border: 0;
}
.curriculam-cont .accordion .card{
border: 0;
border-radius: 0;
border-bottom: 1px solid #cecece !important;
}
.curriculam-cont .accordion .card:last-child{
border-bottom: 0 !important;
}
.curriculam-cont .accordion .card .card-header {
padding: 0;
border-bottom: 0;
}
.curriculam-cont .accordion .card .card-header a {
overflow: hidden;
display: block;
padding: 15px 15px;
background-color: #edf0f2;
}
.curriculam-cont .accordion .card .card-header a.collapsed{
background-color: #fff;
border: none;
}
.curriculam-cont .accordion .card .card-header a::before,
.curriculam-cont .accordion .card .card-header a.collapsed::before {
content: "\f107";
font-family: FontAwesome;
font-size: 18px;
color: #8a8a8a;
position: absolute;
top: 15px;
right: 15px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.curriculam-cont .accordion .card .card-header a.collapsed:before{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.curriculam-cont .accordion .card .card-header a ul li{
display: inline-block;
}
.curriculam-cont .accordion .card .card-header a ul li:last-child{
float: right;
}
.curriculam-cont .accordion .card .card-header a ul li > i{
color: #ffc600;
font-size: 15px;
margin-right: 5px;
}
.curriculam-cont .accordion .card .card-header a ul li > .lecture{
font-size: 15px;
color: #8a8a8a;
}
.curriculam-cont .accordion .card .card-header a ul li > .head{
font-size: 16px;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
margin-left: 15px;
color: #000;
}
.curriculam-cont .accordion .card .card-header a ul li > .time {
font-size: 15px;
color: #8a8a8a;
text-align: right;
padding-right: 30px;
}
.curriculam-cont .accordion .card .card-header a ul li > .time i{
margin-right: 5px;
}
.curriculam-cont .accordion .card .card-header a ul li > .time span{}
.curriculam-cont .accordion .card .card-body {
background-color: #edf0f2;
padding: 0 25px 20px;
}
.instructor-cont{
padding: 30px 30px 25px;
}
.instructor-cont .instructor-author{
overflow: hidden;
}
.instructor-cont .instructor-author .author-thum{
float: left;
margin-right: 30px;
}
.instructor-cont .instructor-author .author-name{
float: left;
}
.instructor-cont .instructor-author .author-name a{
display: block;
}
.instructor-cont .instructor-author .author-name a h5{
font-size: 18px;
color: 30px;
font-weight: 600;
}
.instructor-cont .instructor-author .author-name span{
font-size: 15px;
color: #8a8a8a;
}
.instructor-cont .instructor-author .author-name .social{
padding-top: 25px;
}
.instructor-cont .instructor-author .author-name .social li{
display: inline-block;
margin-right: 8px;
}
.instructor-cont .instructor-author .author-name .social li a{
font-size: 16px;
width: 35px;
height: 35px;
line-height: 33px;
border: 1px solid #24486e;
background-color: #24486e;
color: #fff;
text-align: center;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.instructor-cont .instructor-author .author-name .social li a:hover{
background-color: #fff;
color: #24486e;
}
.reviews-cont{
padding: 25px 30px 30px;
}
.reviews-cont .title h6{
font-size: 18px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
color: #000;
}
.reviews-cont ul li .singel-reviews {
padding-top: 30px;
padding-bottom: 25px;
border-bottom: 1px solid #d2d2d2;
}
.reviews-cont ul li:last-child .singel-reviews {
border-bottom: 0;
}
.reviews-cont ul li .singel-reviews .reviews-author{
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.reviews-cont ul li .singel-reviews .reviews-author .author-thum img{
border-radius: 5px;
}
.reviews-cont ul li .singel-reviews .reviews-author .author-name{
padding-left: 20px;
}
.reviews-cont ul li .singel-reviews .reviews-author .author-name h6{
font-size: 16px;
font-weight: 600;
}
.reviews-cont ul li .singel-reviews .reviews-author .author-name span{
font-size: 15px;
color: #8a8a8a;
font-weight: 400;
font-family: 'Poppins', sans-serif;
}
.reviews-cont ul li .singel-reviews .reviews-description{}
.reviews-cont ul li .singel-reviews .reviews-description p{
padding-bottom: 17px;
}
.reviews-cont ul li .singel-reviews .reviews-description .rating{
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.reviews-cont ul li .singel-reviews .reviews-description .rating ul li{
display: inline-block;
font-size: 15px;
color: #ffc600;
}
.reviews-cont ul li .singel-reviews .reviews-description .rating span{
font-size: 15px;
color: #000;
margin-left: 10px;
}
.reviews-cont .reviews-form .form-singel {
padding-top: 25px;
}
.reviews-cont .reviews-form .form-singel input,
.reviews-cont .reviews-form .form-singel textarea{
width: 100%;
height: 45px;
border: 1px solid #cecece;
border-radius: 5px;
padding: 0 20px;
}
.reviews-cont .reviews-form .form-singel textarea{
height: 160px;
padding-top: 20px;
resize: none;
}
.reviews-cont .reviews-form .form-singel .rate-wrapper{
overflow: hidden;
}
.reviews-cont .reviews-form .form-singel .rate-label {
float: left;
color: #000;
margin-right: 10px;
margin-left: 0;
}
.reviews-cont .reviews-form .form-singel .rate {
float: left;
color: #cecece;
cursor: pointer;
}
.reviews-cont .reviews-form .form-singel .rate-item {
float: left;
cursor: pointer;
margin: 0px 3px 0px 3px;
}
.reviews-cont .reviews-form .form-singel .rate:hover,
.reviews-cont .reviews-form .form-singel .rate.selected {
color: #ffc600;
}
.reviews-cont .reviews-form .form-singel .rate .rate-item:hover ~ .rate-item,
.reviews-cont .reviews-form .form-singel .rate .rate-item.active ~ .rate-item {
color: #cecece;
}
.releted-courses .title h3{
font-size: 30px;
color: #07294d;
}
.course-features{
background-color: #fff;
padding: 30px 35px;
border-radius: 5px;
}
.course-features h4,
.You-makelike h4{
font-size: 24px;
color: #07294d;
padding-bottom: 15px;
}
.course-features ul{}
.course-features ul li{
font-size: 15px;
color: #8a8a8a;
overflow: hidden;
line-height: 45px;
border-bottom: 1px solid #d2d2d2;
}
.course-features ul li:last-child{
border-bottom: 0;
}
.course-features ul li i{
color: #ffc600;
margin-right: 8px;
}
.course-features ul li span{
float: right;
}
.course-features .price-button{
overflow: hidden;
}
.course-features .price-button span{
font-size: 18px;
color: #24486e;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
margin-top: 12px;
}
.course-features .price-button span b{
color: #ffc600;
}
.course-features .price-button .main-btn{
float: right;
}
.You-makelike{
background-color: #fff;
padding: 25px 30px 30px;
border-radius: 5px;
}
.You-makelike .singel-makelike{
position: relative;
border-radius: 5px;
overflow: hidden;
}
.You-makelike .singel-makelike .image{
position: relative;
}
.You-makelike .singel-makelike .image::before{
position: absolute;
content: '';
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(7, 41, 77, 0.8);
}
.You-makelike .singel-makelike .image img{
width: 100%;
}
.You-makelike .singel-makelike .cont{
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
padding: 0 30px;
}
.You-makelike .singel-makelike .cont h4{
font-size: 18px;
color: #fff;
font-weight: 600;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.You-makelike .singel-makelike .cont h4:hover{
color: #ffc600;
}
.You-makelike .singel-makelike .cont ul li {
display: inline-block;
margin-right: 15px;
color: #ffc600;
}
.You-makelike .singel-makelike .cont ul li a{
font-size: 14px;
color: #fff;
}
.You-makelike .singel-makelike .cont ul li a i{
margin-right: 3px;
}
/*=====================================================
24. EVENT PAGE css
======================================================*/
.singel-event-list{
background-color: #fff;
padding: 30px;
border-radius: 5px;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-align-items: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.singel-event-list .event-thum {
width: 38%;
}
.singel-event-list .event-thum img{
width: 100%;
border-radius: 5px;
}
.singel-event-list .event-cont {
width: 62%;
padding-left: 30px;
}
.singel-event-list .event-cont span {
font-size: 14px;
color: #8a8a8a;
margin-right: 20px;
}
.singel-event-list .event-cont span i {
color: #ffc600;
margin-right: 3px;
}
.singel-event-list .event-cont a {
display: block;
}
.singel-event-list .event-cont a h4 {
padding-top: 5px;
padding-bottom: 10px;
color: #000;
font-size: 20px;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.singel-event-list .event-cont a:hover h4 {
color: #ffc600;
}
/*=====================================================
25. EVENT SINGEL PAGE css
======================================================*/
.events-area{
background-color: #fff;
padding: 45px 50px;
}
.events-left{}
.events-left h3{
padding-top: 5px;
padding-bottom: 10px;
color: #000;
font-size: 30px;
}
.events-left span {
font-size: 14px;
color: #8a8a8a;
margin-right: 20px;
}
.events-left span i {
color: #ffc600;
margin-right: 3px;
}
.events-left img {
margin-top: 35px;
border-radius: 5px;
}
.events-left p{
padding-top: 31px;
}
.events-right{}
.events-coundwon {
padding: 25px 30px 30px;
border-radius: 5px;
overflow: hidden;
margin-top: 110px;
}
.events-coundwon .count-down-time{
position: relative;
z-index: 5;
}
.events-coundwon .count-down-time .singel-count{}
.events-coundwon .count-down-time .singel-count .number {
font-size: 24px;
color: #ffc600;
}
.events-coundwon .count-down-time .singel-count .title{
font-size: 13px;
}
.events-coundwon .events-coundwon-btn{}
.events-coundwon .events-coundwon-btn .main-btn{
width: 100%;
}
.events-address{
border: 1px solid #bcbcbc;
padding: 0 30px 30px;
border-radius: 5px;
}
.events-address ul li{
padding-top: 20px;
}
.events-address ul li .singel-address{
position: relative;
}
.events-address ul li .singel-address .icon{
position: absolute;
top: 0;
left: 0;
}
.events-address ul li .singel-address .icon i{
font-size: 15px;
color: #ffc600;
}
.events-address ul li .singel-address .cont{
padding-left: 23px;
}
.events-address ul li .singel-address .cont h6{
font-size: 15px;
color: #07294d;
}
.events-address ul li .singel-address .cont span{
font-size: 14px;
color: #505050;
}
#contact-map{
width: 100%;
height: 150px;
border-radius: 5px;
}
/*=====================================================
26. TEACHERS SInGEL PAGE css
======================================================*/
.teachers-left{
padding: 40px 50px 35px;
background-color: #fff;
border-radius: 5px;
}
.teachers-left .hero img{
width: 100%;
border-radius: 5px;
}
.teachers-left .name{
padding-top: 25px;
}
.teachers-left .name h6{
font-size: 18px;
color: #000;
}
.teachers-left .name span{
font-size: 15px;
color: #8a8a8a;
}
.teachers-left .social{
padding-top: 15px;
}
.teachers-left .social ul li{
display: inline-block;
}
.teachers-left .social ul li a{
font-size: 30px;
margin-right: 7px;
}
.teachers-left .social ul li:nth-of-type(1) a{
color: #212798;
}
.teachers-left .social ul li:nth-of-type(2) a{
color: #3c9bff;
}
.teachers-left .social ul li:nth-of-type(3) a{
color: #fe1f59;
}
.teachers-left .social ul li:nth-of-type(4) a{
color: #474b8c;
}
.teachers-left .description{
padding-top: 20px;
}
.teachers-right {
border-radius: 5px;
overflow: hidden;
}
.teachers-right .nav{}
.teachers-right .nav .nav-item{}
.teachers-right .nav .nav-item a{
padding: 20px 0;
background-color: #315377;
color: #fff;
font-weight: 15;
color: #fff;
display: block;
font-weight: 600;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.teachers-right .nav .nav-item a.active,
.teachers-right .nav .nav-item a:hover{
background-color: #fff;
color: #315377;
}
.teachers-right .tab-content{
padding: 0px 50px 35px;
background-color: #fff;
}
.teachers-right .tab-content .dashboard-cont{}
.teachers-right .tab-content .dashboard-cont .singel-dashboard h5{
font-size: 18px;
color: #000;
font-weight: 600;
padding-bottom: 15px;
}
.teachers-right .tab-content .reviews-cont{
padding: 45px 0 15px;
}
.teachers-right .tab-content{}
/*=====================================================
27. BLOG PAGE css
======================================================*/
.singel-blog{
overflow: hidden;
border-radius: 5px;
}
.singel-blog .blog-thum img{
width: 100%;
}
.singel-blog .blog-cont{
padding: 40px 50px;
background-color: #fff;
}
.singel-blog .blog-cont a{
display: block;
}
.singel-blog .blog-cont h3{
font-size: 36px;
color: #000;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.singel-blog .blog-cont a:hover h3{
color: #ffc600;
}
.singel-blog .blog-cont ul {
padding: 20px 0;
}
.singel-blog .blog-cont ul li{
display: inline-block;
margin-right: 30px;
}
.singel-blog .blog-cont ul li:last-child{
margin-right: 0;
}
.singel-blog .blog-cont ul li a{
font-size: 15px;
color: #8a8a8a;
}
.singel-blog .blog-cont ul li a i{
color: #ffc600;
margin-right: 5px;
}
.singel-blog .blog-cont p{}
.saidbar{}
.saidbar .saidbar-search{
padding: 35px;
background-color: #fff;
border-radius: 5px;
}
.saidbar .saidbar-search form{
position: relative;
}
.saidbar .saidbar-search form input{
width: 100%;
height: 45px;
padding: 0 25px;
background-color: #f6f6f6;
color: #8a8a8a;
border-radius: 5px;
font-size: 15px;
border: 0;
}
.saidbar .saidbar-search form button{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 20px;
font-size: 16px;
color: #8a8a8a;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.saidbar .categories{
background-color: #fff;
padding: 30px 35px 25px;
border-radius: 5px;
}
.saidbar .categories h4,
.saidbar .saidbar-post h4{
font-size: 24px;
color: #07294d;
}
.saidbar .categories ul{
padding-top: 15px;
}
.saidbar .categories ul li{
line-height: 40px;
}
.saidbar .categories ul li a{
color: #8a8a8a;
font-weight: 15;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.saidbar .categories ul li a:hover{
color: #ffc600;
}
.saidbar .saidbar-post{
padding: 30px 35px 35px;
background-color: #fff;
border-radius: 5px;
}
.saidbar .saidbar-post ul{
padding-top: 10px;
}
.saidbar .saidbar-post ul li a{
display: block;
margin-top: 30px;
}
.saidbar .saidbar-post ul li a .singel-post{
overflow: hidden;
}
.saidbar .saidbar-post ul li a .singel-post .thum{
float: left;
padding-right: 20px;
}
.saidbar .saidbar-post ul li a .singel-post .thum img{
border-radius: 5px;
}
.saidbar .saidbar-post ul li a .singel-post .cont{}
.saidbar .saidbar-post ul li a .singel-post .cont h6{
font-weight: 600;
font-size: 18px;
color: #000;
padding-bottom: 10px;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.saidbar .saidbar-post ul li a .singel-post .cont h6:hover{
color: #ffc600;
}
.saidbar .saidbar-post ul li a .singel-post .cont span{
font-size: 14px;
color: #8a8a8a;
}
.patnar-slied img {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.patnar-slied figcaption {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
margin-top: 1em;
border-radius: 10px;
padding: 5px;
border: 1px solid #e0e0e0;
background-color: #fff;
}
.patnar-slied .slick-slide {
transition: transform 0.5s ease; /* Velocidade de transição */
}
/*=====================================================
28. BLOG SINGEL PAGE css
======================================================*/
.blog-details .cont {
padding: 40px 50px;
background-color: #fff;
}
.blog-details .cont h3 {
font-size: 36px;
color: #000;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.blog-details .cont ul {
padding: 20px 0;
}
.blog-details .cont ul li {
display: inline-block;
margin-right: 30px;
}
.blog-details .cont ul li a {
font-size: 15px;
color: #8a8a8a;
}
.blog-details .cont ul li a i{
color: #ffc600;
margin-right: 5px;
}
.blog-details .cont .share{
padding-top: 22px;
border-bottom: 1px solid #cecece;
padding-bottom: 30px;
}
.blog-details .cont .share li.title{
font-size: 18px;
color: #000;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.blog-details .cont .share > li{
display: inline-block;
margin-right: 10px;
}
.blog-details .cont .share li a{}
.blog-details .cont .share li a i{
width: 35px;
line-height: 35px;
border-radius: 50%;
font-size: 16px;
background-color: #ffc600;
text-align: center;
color: #fff;
margin-right: 0;
}
.blog-details .cont .share li:nth-of-type(2) a i{
background-color: #3C5A99;
}
.blog-details .cont .share li:nth-of-type(3) a i{
background-color: #1da1f2;
}
.blog-details .cont .share li:nth-of-type(4) a i{
background-color: #d34836;
}
.blog-details .cont .share li:nth-of-type(5) a i{
background-color: #e4405f;
}
.blog-details .cont .share li:nth-of-type(6) a i{
background-color: #0077B5;
}
.blog-details .cont .blog-comment .title h3 {
font-size: 24px;
color: #000;
}
.blog-details .cont .blog-comment ul{
padding: 0;
}
.blog-details .cont .blog-comment ul li{
margin-top: 30px;
margin-right: 0;
}
.blog-details .cont .blog-comment ul li .replay{
padding-left: 75px;
padding-top: 0;
padding-bottom: 0;
}
.blog-comment .comment{
padding-bottom: 25px;
position: relative;
border-bottom: 1px solid #d2d2d2;
}
.blog-comment .comment .comment-author{
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.blog-comment .comment .comment-author .author-thum img{
border-radius: 5px;
}
.blog-comment .comment .comment-author .comment-name{
padding-left: 20px;
}
.blog-comment .comment .comment-author .comment-name h6{
font-size: 16px;
font-weight: 600;
color: #000;
}
.blog-comment .comment .comment-author .comment-name span{
font-size: 15px;
color: #8a8a8a;
font-weight: 400;
font-family: 'Poppins', sans-serif;
}
.blog-comment .comment .comment-replay {
position: absolute;
top: 15px;
right: 0;
}
.comment-form .form-singel{
margin-top: 20px;
}
.comment-form .form-singel input,
.comment-form .form-singel textarea{
height: 60px;
width: 100%;
padding: 0 20px;
border: 1px solid #b8b8b8;
border-radius: 5px;
font-size: 15px;
}
.comment-form .form-singel textarea{
height: 120px;
resize: none;
padding-top: 20px;
}
/*=====================================================
29. SHOP PAGE css
======================================================*/
.shop-top-search {
background-color: #fff;
padding: 15px 30px;
border-radius: 5px;
}
.shop-top-search .shop-bar {
display: inline-block;
}
.shop-top-search .nav .nav-item {
margin-right: 15px;
font-size: 15px;
color: #8a8a8a;
}
.shop-top-search .nav .nav-item a{
font-size: 16px;
color: #8a8a8a;
}
.shop-top-search .nav .nav-item a.active {
color: #ffc600;
}
.shop-top-search .shop-select {
display: inline-block;
float: right;
margin-top: -3px;
}
.shop-top-search .shop-select .nice-select {
background-color: #f6f6f6;
border-radius: 5px;
border: 0;
font-size: 14px;
height: 30px;
width: 135px;
line-height: 30px;
color: #8a8a8a;
}
.shop-top-search .shop-select .nice-select.open .list {
width: 100%;
margin-top: 0;
background-color: #f6f6f6;
border: 0;
}
#shop-list .singel-publication .cont {
display: block;
padding-top: 0;
}
#shop-list .singel-publication .cont .name {
width: 100%;
}
#shop-list .singel-publication .cont .name a h6 {
font-size: 18px;
}
#shop-list .singel-publication .cont .name span {
font-size: 16px;
color: #8a8a8a;
padding-top: 15px;
}
#shop-list .singel-publication .cont .button {
width: 100%;
padding-top: 10px;
}
#shop-list .singel-publication .cont .button a {
padding: 0 20px;
font-size: 12px;
line-height: 35px;
}
/*=====================================================
30. SHOP SINGEL PAGE css
======================================================*/
.shop-destails{
background-color: #fff;
padding: 20px 50px 50px;
border-radius: 5px;
}
.shop-destails .shop-left{
padding-right: 50px;
}
.shop-destails .shop-left .shop-image a{
display: block;
}
.shop-destails .shop-left .shop-image img{
width: 100%;
border-radius: 4px;
}
.shop-destails .shop-left .nav .nav-item{
margin-right: 25px;
}
.shop-destails .shop-left .nav .nav-item:last-child{
margin-right: 0;
}
.shop-destails .shop-left .nav .nav-item a {
display: block;
}
.shop-destails .shop-left .nav .nav-item a .shop-thum img{
width: 100%;
border-radius: 3px;
}
.shop-right{}
.shop-right h6{
font-size: 18px;
padding-bottom: 5px;
}
.shop-right span{
font-size: 15px;
color: #8a8a8a;
}
.shop-right p{
padding-bottom: 15px;
}
.nice-number {
position: relative;
display: inline-block;
margin-right: 20px;
}
.nice-number input {
width: 50px !important;
height: 40px;
border-radius: 5px;
border: 2px solid #aaa;
padding-right: 20px;
}
.nice-number button {
position: absolute;
width: 25px;
padding: 0;
right: 2px;
top: 2px;
border: 0;
border-top-right-radius: 5px;
background: none;
cursor: pointer;
}
.nice-number button:last-child{
top: auto;
bottom: 2px;
border-top-right-radius: 0px;
border-bottom-right-radius: 5px;
}
.nice-number button i{
font-size: 15px;
color: #000;
}
.add-btn{
display: inline-block;
}
.add-btn .main-btn{
line-height: 46px;
}
.shop-reviews .nav .nav-item{}
.shop-reviews .nav .nav-item:first-child a{
border-top-left-radius: 5px;
}
.shop-reviews .nav .nav-item:last-child a{
border-top-right-radius: 5px;
}
.shop-reviews .nav .nav-item a{
width: 165px;
line-height: 55px;
background-color: #315377;
font-size: 15px;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
text-align: center;
color: #fff;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.shop-reviews .nav .nav-item a.active{
background-color: #fafafa;
color: #315377;
}
.shop-reviews .tab-content{
background-color: #fafafa;
padding: 0px 45px 40px;
border-radius: 5px;
border-top-left-radius: 0;
}
.shop-reviews .tab-content .reviews-cont{
padding: 0;
}
.releted-item{}
.releted-item .title h3{
font-size: 30px;
color: #07294d;
}
/*=====================================================
31. CONTACT PAGE css
======================================================*/
.contact-from{
background-color: #fff;
padding: 50px;
border-radius: 5px;
}
.contact-from .main-form{}
.contact-from .main-form .singel-form{
margin-top: 20px;
}
.contact-from .main-form .singel-form input,
.contact-from .main-form .singel-form textarea{
width: 100%;
height: 50px;
padding: 0 20px;
border: 1px solid #a1a1a1;
border-radius: 5px;
color: #8a8a8a;
font-size: 15px;
}
.contact-from .main-form .singel-form textarea{
padding-top: 10px;
height: 100px;
resize: none;
}
.form-group{
margin: 0;
}
.list-unstyled li {
font-size: 13px;
margin-left: 2px;
margin-top: 5px;
color: #f00;
}
p.form-message.success,
p.form-message.error {
font-size: 16px;
color: #353535;
background: #ddd;
padding: 10px 15px;
margin-left: 15px;
margin-top: 15px;
}
.contact-address{
background-color: #fff;
padding: 20px 50px 50px;
border-radius: 5px;
}
.contact-address ul li{
padding-top: 30px;
}
.contact-address ul li .singel-address{
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contact-address ul li .singel-address .icon i{
width: 50px;
line-height: 50px;
border-radius: 50%;
border: 1px solid #07294d;
color: #07294d;
font-size: 24px;
text-align: center;
}
.contact-address ul li .singel-address .cont{
padding-left: 20px;
}
.contact-address ul li .singel-address .cont p{}
.map{}
.map #contact-map{
width: 100%;
height: 225px;
}
.map.map-big #contact-map{
width: 100%;
height: 415px;
}
.contact-address .contact-heading{
padding-top: 35px;
}
.contact-address .contact-heading h5{
padding-bottom: 15px;
}