555 lines
9.5 KiB
SCSS
555 lines
9.5 KiB
SCSS
@use '../../utils/' as *;
|
|
|
|
/*============= ATTENT CSS AREA ===============*/
|
|
.attent1-section-area {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.tab-container {
|
|
display: flex;
|
|
|
|
@media #{$md} {
|
|
display: inline-block;
|
|
}
|
|
|
|
.nav-pills .nav-link {
|
|
color: var(--ztc-text-text-1);
|
|
font-family: var(--grotesk);
|
|
font-size: var(--ztc-font-size-font-s24);
|
|
font-style: normal;
|
|
font-weight: var(--ztc-weight-bold);
|
|
line-height: 24px;
|
|
display: inline-block;
|
|
transition: all .4s;
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.20);
|
|
padding: 28px 32px;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-bottom: 24px;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
content: "";
|
|
height: 100%;
|
|
left: -100px;
|
|
top: 0;
|
|
transition: all .4s;
|
|
background: var(--ztc-bg-bg-1);
|
|
transition: all .4s;
|
|
width: 10px;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
span {
|
|
color: rgba(255, 255, 255, 0.90);
|
|
font-family: var(--figtree);
|
|
font-size: var(--ztc-font-size-font-s18);
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 26px;
|
|
display: block;
|
|
transition: all .4s;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
svg.svg1 {
|
|
position: absolute;
|
|
left: -29px;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: all .4s;
|
|
}
|
|
|
|
svg.svg2 {
|
|
position: absolute;
|
|
left: -29px;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: all .4s;
|
|
}
|
|
}
|
|
|
|
.nav-link.link1 {
|
|
&::before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 500px;
|
|
width: 10px;
|
|
border-radius: 2px;
|
|
background: rgba(255, 255, 255, 0.20);
|
|
left: -100px;
|
|
top: 0;
|
|
transition: all .4s;
|
|
}
|
|
}
|
|
|
|
.nav-pills .nav-link.active {
|
|
border-radius: 10px;
|
|
background: linear-gradient(135deg, #FF7A00 0%, #F00 100%);
|
|
|
|
svg.svg1 {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: all .4s;
|
|
}
|
|
|
|
svg.svg2 {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: all .4s;
|
|
}
|
|
|
|
&::after {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: all .4s;
|
|
}
|
|
}
|
|
|
|
.tab-content {
|
|
.about3-images {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding-left: 30px;
|
|
transition: all .6s;
|
|
|
|
@media #{$md} {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.about-img10 {
|
|
position: absolute;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.img1 {
|
|
background: rgba(255, 255, 255, 0.20);
|
|
border-radius: 50%;
|
|
padding: 10px;
|
|
overflow: hidden;
|
|
|
|
&:hover {
|
|
img {
|
|
transform: scale(1.1) rotate(-4deg);
|
|
transition: all .4s;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
transition: all .4s;
|
|
}
|
|
}
|
|
|
|
.img2 {
|
|
background: rgba(255, 255, 255, 0.20);
|
|
border-radius: 50%;
|
|
padding: 10px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
overflow: hidden;
|
|
|
|
@media #{$xs} {
|
|
position: relative;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
&:hover {
|
|
img {
|
|
transform: scale(1.1) rotate(-4deg);
|
|
transition: all .4s;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 240px;
|
|
height: 240px;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
transition: all .4s;
|
|
|
|
@media #{$xs} {
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.img3 {
|
|
background: rgba(255, 255, 255, 0.20);
|
|
border-radius: 50%;
|
|
padding: 10px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
overflow: hidden;
|
|
|
|
@media #{$xs} {
|
|
position: relative;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
&:hover {
|
|
img {
|
|
transform: scale(1.1) rotate(-4deg);
|
|
transition: all .4s;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 240px;
|
|
height: 240px;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
transition: all .4s;
|
|
|
|
@media #{$xs} {
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// COUNTER_AREA //
|
|
.counter5-section-area {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.counter-box {
|
|
text-align: center;
|
|
|
|
@media #{$xs} {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
@media #{$md} {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
h2 {
|
|
border-radius: 96px;
|
|
padding: 32px;
|
|
text-align: center;
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.04) 100%);
|
|
color: var(--ztc-text-text-1);
|
|
text-align: center;
|
|
font-family: var(--grotesk);
|
|
font-size: var(--ztc-font-size-font-s44);
|
|
font-style: normal;
|
|
font-weight: var(--ztc-weight-bold);
|
|
line-height: 44px;
|
|
}
|
|
|
|
p {
|
|
color: var(--ztc-text-text-1);
|
|
text-align: center;
|
|
font-family: var(--grotesk);
|
|
font-size: var(--ztc-font-size-font-s18);
|
|
font-style: normal;
|
|
font-weight: var(--ztc-weight-bold);
|
|
line-height: 18px;
|
|
/* 100% */
|
|
padding-top: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Homepage 06 //
|
|
.attent6-section-area {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.skils-widget-boxarea {
|
|
position: relative;
|
|
z-index: 1;
|
|
background: #F9FAFB;
|
|
border-radius: 8px;
|
|
transition: all .4s;
|
|
padding: 20px;
|
|
margin-bottom: 30px;
|
|
|
|
&:hover {
|
|
border-radius: var(--rounded-lg, 8px);
|
|
background: var(--white, #FFF);
|
|
transition: all .4s;
|
|
box-shadow: (0px 4px 30px rgba(0, 0, 0, 0.08));
|
|
transform: translateY(-5px);
|
|
|
|
.icons {
|
|
transform: rotateY(-180deg);
|
|
transition: all .4s;
|
|
}
|
|
}
|
|
|
|
.icons {
|
|
height: 60px;
|
|
width: 60px;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
transition: all .4s;
|
|
border-radius: 8px;
|
|
display: inline-block;
|
|
border-radius: var(--rounded-lg, 8px);
|
|
background: var(--white, #FFF);
|
|
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.content-area {
|
|
a {
|
|
color: var(--ztc-text-text-2);
|
|
font-family: var(--grotesk);
|
|
font-size: var(--ztc-font-size-font-s24);
|
|
font-style: normal;
|
|
font-weight: var(--ztc-weight-bold);
|
|
line-height: 24px;
|
|
display: inline-block;
|
|
transition: all .4s;
|
|
}
|
|
|
|
p {
|
|
color: var(--ztc-text-text-9);
|
|
font-family: var(--figtree);
|
|
font-size: var(--ztc-font-size-font-s18);
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 26px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Homepage 10 //
|
|
.attent10-section-area {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.event6-widget-boxarea {
|
|
position: relative;
|
|
z-index: 1;
|
|
border-radius: var(--rounded-lg, 8px);
|
|
background: #232323;
|
|
padding: 32px;
|
|
|
|
.img1 {
|
|
img {
|
|
height: 350px;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
.content-area {
|
|
padding: 0 0;
|
|
|
|
@media #{$xs} {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
@media #{$md} {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
h3 {
|
|
color: var(--ztc-text-text-1);
|
|
font-family: var(--grotesk);
|
|
font-size: var(--ztc-font-size-font-s32);
|
|
font-style: normal;
|
|
font-weight: var(--ztc-weight-bold);
|
|
line-height: 42px;
|
|
letter-spacing: -0.64px;
|
|
|
|
@media #{$xs} {
|
|
font-size: var(--ztc-font-size-font-s24);
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
color: var(--ztc-text-text-1);
|
|
font-family: var(--grotesk);
|
|
font-size: var(--ztc-font-size-font-s18);
|
|
font-style: normal;
|
|
font-weight: var(--ztc-weight-bold);
|
|
line-height: 26px;
|
|
transition: all .4s;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.schedule-boxarea {
|
|
position: relative;
|
|
z-index: 1;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
transition: all .4s;
|
|
background: #232323;
|
|
padding: 32px 32px 0 32px;
|
|
margin-bottom: 30px;
|
|
|
|
&:hover {
|
|
.images {
|
|
.elements37 {
|
|
transform: rotate(-5deg);
|
|
transition: all .4s;
|
|
}
|
|
|
|
.elements38 {
|
|
left: -15px;
|
|
transform: rotate(-10deg);
|
|
transition: all .6s;
|
|
}
|
|
|
|
.elements39 {
|
|
left: 195px;
|
|
transform: rotate(10deg);
|
|
transition: all .6s;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.images2 {
|
|
.elements37 {
|
|
transition: all .4s;
|
|
}
|
|
|
|
.elements38 {
|
|
left: -50px;
|
|
transition: all .6s;
|
|
}
|
|
|
|
.elements39 {
|
|
left: 150px;
|
|
transition: all .6s;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.images3 {
|
|
.elements37 {
|
|
transition: all .6s;
|
|
transform: rotate(-20deg);
|
|
}
|
|
|
|
.elements38 {
|
|
transform: rotate(-40deg);
|
|
transition: all .4s;
|
|
}
|
|
|
|
.elements39 {
|
|
transform: rotate(-55deg);
|
|
transition: all .4s;
|
|
}
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
color: var(--ztc-text-text-1);
|
|
font-family: var(--grotesk);
|
|
font-size: var(--ztc-font-size-font-s40);
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.images {
|
|
top: 10px;
|
|
position: relative;
|
|
|
|
.elements37 {
|
|
position: relative;
|
|
transition: all .6s;
|
|
z-index: 1;
|
|
}
|
|
|
|
.elements38 {
|
|
position: absolute;
|
|
left: 91px;
|
|
transition: all .6s;
|
|
top: 15px;
|
|
}
|
|
|
|
.elements39 {
|
|
position: absolute;
|
|
left: 91px;
|
|
transition: all .6s;
|
|
z-index: -1;
|
|
top: 7px;
|
|
}
|
|
}
|
|
|
|
.images2 {
|
|
top: 10px;
|
|
position: relative;
|
|
|
|
.elements37 {
|
|
position: relative;
|
|
transition: all .6s;
|
|
z-index: 1;
|
|
}
|
|
|
|
.elements38 {
|
|
position: absolute;
|
|
left: 52px;
|
|
transition: all .6s;
|
|
top: 7px;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.elements39 {
|
|
position: absolute;
|
|
left: 58px;
|
|
transition: all .6s;
|
|
z-index: -1;
|
|
top: 7px;
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
.images3 {
|
|
position: relative;
|
|
left: 30px;
|
|
|
|
.elements37 {
|
|
position: relative;
|
|
transition: all .6s;
|
|
z-index: 1;
|
|
}
|
|
|
|
.elements38 {
|
|
position: absolute;
|
|
left: 45px;
|
|
transition: all 0.6s;
|
|
z-index: -1;
|
|
top: -13px;
|
|
transform: rotate(-20deg);
|
|
}
|
|
|
|
.elements39 {
|
|
position: absolute;
|
|
left: 11px;
|
|
transition: all 0.6s;
|
|
z-index: -2;
|
|
top: -23px;
|
|
transform: rotate(-36deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*============= ATTENT CSS AREA ===============*/ |