423 lines
7.5 KiB
SCSS
423 lines
7.5 KiB
SCSS
/*-------------------
|
|
FAQ Styles
|
|
---------------------*/
|
|
.faq-accordion {
|
|
.accordion-item {
|
|
border: none;
|
|
border-radius: 10px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0px 10px 50px 0px rgba(26,46,85,0.1);
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.accordion-header {
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
.accordion-button {
|
|
background-color: var(--color-primary);
|
|
padding: 20px 45px 20px 30px;
|
|
border-radius: 10px 10px 0 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--color-white);
|
|
transition: .3s;
|
|
z-index: 2;
|
|
@media #{$large-mobile} {
|
|
font-size: 16px;
|
|
}
|
|
&:after {
|
|
display: none;
|
|
}
|
|
&:before {
|
|
content: "\e91e";
|
|
font-family: "icomoon";
|
|
font-size: 6px;
|
|
color: var(--color-white);
|
|
background-image: none;
|
|
position: absolute;
|
|
top: 22px;
|
|
right: 30px;
|
|
line-height: 1;
|
|
transform: rotate(180deg);
|
|
transition: .3s;
|
|
}
|
|
&.collapsed {
|
|
background-color: transparent;
|
|
color: var(--color-heading);
|
|
&:before {
|
|
top: 26px;
|
|
transform: rotate(0deg);
|
|
color: var(--color-body);
|
|
}
|
|
}
|
|
}
|
|
.accordion-body {
|
|
padding: 25px 30px 30px;
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.edu-faq-content {
|
|
position: relative;
|
|
.shape-group {
|
|
@extend %liststyle;
|
|
margin: 0;
|
|
li {
|
|
position: absolute;
|
|
z-index: -1;
|
|
&.shape-1 {
|
|
bottom: -115px;
|
|
right: -145px;
|
|
}
|
|
&.shape-2 {
|
|
bottom: -95px;
|
|
right: -165px;
|
|
span {
|
|
display: block;
|
|
height: 101px;
|
|
width: 101px;
|
|
border: 15px solid var(--color-secondary);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.edu-faq-gallery {
|
|
position: relative;
|
|
.thumbnail-1 {
|
|
text-align: right;
|
|
img {
|
|
border-radius: 120px 120px 0 120px;
|
|
}
|
|
}
|
|
.thumbnail-2 {
|
|
margin-top: 70px;
|
|
img {
|
|
border-radius: 60px 0 100px;
|
|
}
|
|
}
|
|
.thumbnail-3 {
|
|
margin-top: -30px;
|
|
text-align: right;
|
|
img {
|
|
border-radius: 60px 0 100px;
|
|
}
|
|
}
|
|
.thumbnail-4 {
|
|
img {
|
|
border-radius: 0 50px 120px 120px;
|
|
}
|
|
}
|
|
.shape-group {
|
|
@extend %liststyle;
|
|
margin: 0;
|
|
li {
|
|
position: absolute;
|
|
z-index: -1;
|
|
margin: 0;
|
|
&.shape-1 {
|
|
top: -45px;
|
|
left: 44%;
|
|
}
|
|
&.shape-2 {
|
|
top: 56px;
|
|
right: -10px;
|
|
}
|
|
&.shape-3 {
|
|
bottom: -15px;
|
|
left: -7px;
|
|
z-index: 1;
|
|
@media only screen and (max-width: 991px) {
|
|
display: none;
|
|
}
|
|
}
|
|
&.shape-4 {
|
|
bottom: -45px;
|
|
left: -45px;
|
|
@media only screen and (max-width: 991px) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.faq-style-1 {
|
|
padding: 150px 0 120px;
|
|
@media #{$md-layout} {
|
|
padding: 150px 0 100px;
|
|
}
|
|
@media #{$sm-layout} {
|
|
padding: 100px 0;
|
|
}
|
|
}
|
|
|
|
.faq-style-2 {
|
|
padding: 120px 0 150px;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url(../../images/bg/bg-image-10.webp);
|
|
background-size: cover;
|
|
}
|
|
@media #{$md-layout} {
|
|
padding: 100px 0;
|
|
}
|
|
@media #{$sm-layout} {
|
|
padding: 80px 0 100px;
|
|
}
|
|
.edu-faq-gallery {
|
|
z-index: 1;
|
|
@media #{$md-layout} {
|
|
margin-top: 50px;
|
|
}
|
|
@media #{$sm-layout} {
|
|
margin-top: 20px;
|
|
}
|
|
.thumbnail-1 {
|
|
margin-top: 35px;
|
|
img {
|
|
border-radius: 0 80px 0 80px;
|
|
}
|
|
}
|
|
.thumbnail-2 {
|
|
margin-top: 285px;
|
|
@media #{$md-layout} {
|
|
margin-top: 0;
|
|
}
|
|
@media #{$sm-layout} {
|
|
margin-top: 0;
|
|
}
|
|
img {
|
|
border-radius: 80px 0 80px 0;
|
|
}
|
|
}
|
|
.shape-group {
|
|
@media only screen and (max-width: 991px) {
|
|
display: none;
|
|
}
|
|
.shape-1 {
|
|
top: 35px;
|
|
left: -35px;
|
|
}
|
|
.shape-2 {
|
|
top: 35px;
|
|
left: 210px;
|
|
right: auto;
|
|
z-index: 1;
|
|
}
|
|
.shape-3 {
|
|
top: 230px;
|
|
left: inherit;
|
|
bottom: inherit;
|
|
right: -22px;
|
|
z-index: -1;
|
|
}
|
|
.shape-4 {
|
|
top: 270px;
|
|
left: inherit;
|
|
right: -58px;
|
|
bottom: inherit;
|
|
}
|
|
.shape-5 {
|
|
bottom: 110px;
|
|
left: -50px;
|
|
}
|
|
.shape-6 {
|
|
bottom: 35px;
|
|
left: 90px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.faq-style-3 {
|
|
.edu-faq-gallery {
|
|
text-align: right;
|
|
@media only screen and (max-width: 991px) {
|
|
text-align: center;
|
|
}
|
|
.thumbnail-1 {
|
|
background-color: var(--color-white);
|
|
box-shadow: 0px 20px 40px 0px rgba(42,11,88,0.1);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
display: inline-block;
|
|
@media only screen and (max-width: 991px) {
|
|
display: block;
|
|
}
|
|
img {
|
|
border-radius: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.shape-group {
|
|
@media #{$sm-layout} {
|
|
display: none;
|
|
}
|
|
.shape-1 {
|
|
top: -30px;
|
|
right: -50px;
|
|
left: inherit;
|
|
}
|
|
.shape-2 {
|
|
top: 70px;
|
|
right: -97px;
|
|
z-index: 1;
|
|
}
|
|
.shape-3 {
|
|
bottom: -40px;
|
|
left: -68px;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.faq-style-4 {
|
|
padding-bottom: 100px;
|
|
@media #{$sm-layout} {
|
|
padding-bottom: 50px;
|
|
}
|
|
.faq-accordion {
|
|
.accordion-item {
|
|
.accordion-button {
|
|
color: var(--color-white);
|
|
&:before {
|
|
color: var(--color-white);
|
|
}
|
|
&.style-extra02 {
|
|
background-color: var(--color-extra02);
|
|
}
|
|
&.style-extra05 {
|
|
background-color: var(--color-extra05);
|
|
}
|
|
&.style-primary {
|
|
background-color: var(--color-primary);
|
|
}
|
|
&.collapsed {
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.faq-thumbnail {
|
|
position: relative;
|
|
.thumbnail {
|
|
mask-image: url(../../images/others/mask-09.png);
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-size: contain;
|
|
-webkit-mask-position: center;
|
|
text-align: center;
|
|
}
|
|
.shape-group {
|
|
@extend %liststyle;
|
|
li {
|
|
margin: 0;
|
|
position: absolute;
|
|
z-index: -1;
|
|
&.shape-1 {
|
|
top: -78px;
|
|
right: 115px;
|
|
z-index: 1;
|
|
@media only screen and (max-width: 991px) {
|
|
z-index: -1;
|
|
}
|
|
}
|
|
&.shape-2 {
|
|
top: 0;
|
|
right: 30px;
|
|
}
|
|
&.shape-3 {
|
|
bottom: 40px;
|
|
left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.faq-page-area {
|
|
overflow: hidden;
|
|
}
|
|
.faq-page-nav {
|
|
padding-right: 30px;
|
|
@media only screen and (max-width: 991px) {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
padding-right: 0;
|
|
}
|
|
.title {
|
|
margin-bottom: 14px;
|
|
}
|
|
.nav-tabs {
|
|
border: none;
|
|
display: block;
|
|
.nav-item {
|
|
margin: 18px 0;
|
|
}
|
|
.nav-link {
|
|
border: none;
|
|
background-color: transparent;
|
|
padding: 5px 0;
|
|
color: var(--color-heading);
|
|
font-weight: 600;
|
|
font-family: var(--font-secondary);
|
|
position: relative;
|
|
transition: var(--transition);
|
|
@media only screen and (max-width: 991px) {
|
|
margin: 0 auto;
|
|
}
|
|
&:after {
|
|
content: "\e95a";
|
|
font-family: var(--font-icomoon);
|
|
color: var(--color-primary);
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: 1px;
|
|
left: -20px;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
|
|
}
|
|
&.active {
|
|
padding-left: 30px;
|
|
color: var(--color-primary);
|
|
&:after {
|
|
font-size: 20px;
|
|
left: 0;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.faq-page-tab-content {
|
|
position: relative;
|
|
&:after {
|
|
content: url(../../images/others/map-shape-1.png);
|
|
position: absolute;
|
|
bottom: -90px;
|
|
right: 70px;
|
|
z-index: -1;
|
|
}
|
|
} |