Server : Apache
System : Linux server1.cgrithy.com 3.10.0-1160.95.1.el7.x86_64 #1 SMP Mon Jul 24 13:59:37 UTC 2023 x86_64
User : nobody ( 99)
PHP Version : 8.1.23
Disable Function : NONE
Directory : /home/dnlcambodia/www/Khmer/assets/scss/
|
Server : Apache System : Linux server1.cgrithy.com 3.10.0-1160.95.1.el7.x86_64 #1 SMP Mon Jul 24 13:59:37 UTC 2023 x86_64 User : nobody ( 99) PHP Version : 8.1.23 Disable Function : NONE Directory : /home/dnlcambodia/www/Khmer/assets/scss/ |
.ft-project-section {
z-index: 1;
overflow: hidden;
padding-top: 105px;
&:before {
top: 0;
left: 0;
z-index: -1;
content: '';
width: 100%;
height: 400px;
position: absolute;
background-color: $color-2;
}
.ft-section-title {
max-width: 420px;
span,h2 {
color: #fff;
}
h2 {
padding-bottom: 0;
}
}
}
.ft-project-slider-wrapper {
padding-top: 50px;
}
.ft-project-itembox {
.ft-project-img {
overflow: hidden;
border-radius: 5px;
}
.ft-project-text {
left: 0;
top: 50%;
opacity: 0;
max-width: 370px;
padding: 40px 30px;
border-radius: 5px;
position: absolute;
background-color: #fff;
transform: translateY(-50%);
box-shadow: 1.045px 9.945px 60px 0px rgba(68, 68, 68, 0.15);
h3 {
color: $color-2;
font-size: 24px;
font-weight: 700;
line-height: 1.5;
padding-left: 50px;
position: relative;
padding-bottom: 15px;
&:before {
left: 0;
top: 23px;
content: '';
height: 2px;
width: 40px;
position: absolute;
background-color: $base-color;
}
}
p {
line-height: 1.5;
padding-bottom: 25px;
}
.ft-btn {
a {
background-color: $color-2;
}
}
}
}
.slick-current.slick-center {
.ft-project-itembox {
margin-left: -200px;
padding-left: 200px;
.ft-project-text {
opacity: 1;
}
}
}
.ft-project-slider-area {
margin: 0px -100px;
.slick-list {
overflow: visible;
}
.slick-slide {
-webkit-transition: .3s cubic-bezier(.24,.74,.58,1);
-khtml-transition: .3s cubic-bezier(.24,.74,.58,1);
-moz-transition: .3s cubic-bezier(.24,.74,.58,1);
-ms-transition: .3s cubic-bezier(.24,.74,.58,1);
-o-transition: .3s cubic-bezier(.24,.74,.58,1);
transition: .3s cubic-bezier(.24,.74,.58,1);
opacity: 0;
}
.slick-slide.slick-active {
opacity: 1;
}
.slick-dots {
margin-top: 50px;
@extend%slider-dot;
}
}
.ft-portfolio-content-2 {
padding-top: 45px;
}
.ft-portfolio-section-2 {
z-index: 1;
overflow: hidden;
padding: 105px 0px 90px;
&:before {
top: 0;
left: 0;
z-index: -1;
width: 100%;
content: '';
height: 550px;
position: absolute;
background-color: #003440;
}
.ft-section-title-2 {
max-width: 505px;
.sub-title {
color: #fff;
}
h2 {
color: #fff;
padding-bottom: 0;
}
}
}
.ft-portfolio-slider-item {
padding: 5px;
}
.ft-portfolio-content-2 {
margin: 0px -5px;
}
.ft-portfolio-slider-innerbox {
overflow: hidden;
&:before {
top: 50%;
left: 50px;
right: 0;
content: '';
width: 92%;
height: 92%;
opacity: 0;
margin: 0 auto;
position: absolute;
transform: translateY(-50%);
transition: 500ms all ease;
background-color: rgba(0, 54, 66, 0.95);
}
.ft-portfolio-text {
left: 45px;
bottom: 55px;
max-width: 385px;
position: absolute;
h3 {
opacity: 0;
color: #fff;
font-size: 24px;
font-weight: 700;
line-height: 1.5;
padding-bottom: 20px;
transform: translateX(20px);
transition: 500ms all ease;
transition-delay: .1s;
}
p {
opacity: 0;
color: #fff;
max-width: 360px;
padding-bottom: 25px;
transform: translateX(20px);
transition: 500ms all ease;
transition-delay: .2s;
}
.ft-btn-3 {
opacity: 0;
transform: translateX(20px);
transition: 500ms all ease;
transition-delay: .3s;
a {
height: 45px;
width: 150px;
}
}
}
&:hover {
&:before {
left: 0;
opacity: 1;
}
.ft-portfolio-text {
h3, p, .ft-btn-3 {
opacity: 1;
transform: translateX(0px);
}
}
}
}
.ft-portfolio-slider-2 {
.slick-dots {
position: static;
margin-top: 32px;
button {
display: none;
}
li {
width: 30px;
height: 5px;
background-color: #003440;
&.slick-active {
background-color: $base-color;
}
}
}
}
.ft-project-item-filter-btn {
margin-bottom: 50px;
li {
color: #043441;
cursor: pointer;
font-weight: 500;
padding: 7px 20px;
border-radius: 20px;
&.filtr-active {
color: #fff;
background-color: $base-color;
}
}
}
.ft-project-post-item-content {
.ft-btn {
margin-top: 30px;
a {
margin: 0 auto;
border-radius: 30px;
background-color: #043441;
}
}
}
.ft-project-item-wrapper {
.ft-portfolio-slider-innerbox {
margin: 0 auto;
max-width: 370px;
border-radius: 5px;
margin-bottom: 30px;
.ft-portfolio-text {
max-width: 285px;
h3 {
font-size: 20px;
}
p {
font-size: 14px;
}
}
}
}
.ft-portfolio-overview-text {
overflow: hidden;
border-radius: 8px;
background-color: #fff;
box-shadow: 0px 0px 75px 0px rgba(0, 3, 13, 0.15);
.project-title-overview {
padding: 15px;
background-color: $base-color;
h3 {
color: #fff;
font-size: 22px;
font-weight: 700;
}
}
.ft-portfolio-overview-list-value {
padding: 30px;
.ft-portfolio-overview-list {
li {
color: #1a2428;
font-weight: 700;
margin-bottom: 5px;
span {
float: right;
font-weight: 400;
}
}
}
.ft-project-value {
margin-top: 20px;
span {
color: #1a2428;
font-size: 24px;
font-weight: 700;
font-family: $heading;
}
ul {
li {
font-size: 14px;
color: #ffc601;
}
}
}
}
}
.ft-project-overview-text-wrapper {
z-index: 1;
padding-top: 35px;
h3 {
color: #191919;
font-size: 30px;
font-weight: 700;
padding-bottom: 20px;
}
p {
font-size: 17px;
}
}
.ft-project-overview-comment-list {
font-size: 17px;
padding-top: 35px;
}
.ft-project-overview-list-item {
li {
padding-left: 25px;
margin-bottom: 20px;
position: relative;
&:before {
top: 0;
left: 0;
content: '\f00c';
font-weight: 900;
position: absolute;
color: $base-color;
font-family: 'Font Awesome 5 Pro';
}
}
}
.ft-project-overview-comment-wrapper {
padding: 40px;
margin-left: 60px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 75px 0px rgba(0, 3, 13, 0.15);
.ft-project-overview-comment-img {
width: 110px;
height: 110px;
line-height: 103px;
margin-right: 25px;
text-align: center;
border-radius: 100%;
border: 2px solid $base-color;
img {
width: 90px;
height: 90px;
border-radius: 100%;
}
}
.ft-project-overview-comment-text {
width: 385px;
h4 {
color: #191919;
font-size: 20px;
font-weight: 700;
padding: 20px 0px 5px;
}
span {
color: $color-2;
}
}
}
.ft-similar-work-section {
padding-bottom: 110px;
.ft-similar-work-content {
h2 {
color: #043441;
font-size: 26px;
font-weight: 700;
text-align: center;
padding-bottom: 30px;
}
}
.ft-portfolio-slider-innerbox .ft-portfolio-text {
max-width: 290px;
}
}
.ft-case-study-section {
overflow: hidden;
}
.ft-case-study-items {
width: 25%;
border-right: 1px solid rgb(138 138 138);
.ft-case-study-img {
position: relative;
&:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
position: absolute;
transition: 500ms all ease;
background-color: rgba(0, 0, 0, .65);
}
}
.ft-case-study-text {
left: 60px;
bottom: -25px;
max-width: 335px;
position: absolute;
transition: 500ms all ease;
.serial-no {
color: #fa4318;
font-size: 20px;
font-weight: 500;
}
h3 {
color: #fff;
font-size: 28px;
font-weight: 700;
padding: 25px 0px 25px;
}
p {
opacity: 0;
color: #fff;
line-height: 1.688;
padding-bottom: 35px;
transition: 500ms all ease;
}
}
.more-btn {
left: 60px;
color: #fff;
width: 45px;
height: 45px;
bottom: 40px;
position: absolute;
border: 2px solid rgba(255, 255, 255, .6);
&:hover {
color: #000;
background-color: #fff;
}
}
&:hover {
.ft-case-study-text {
bottom: 90px;
p {
opacity: 1;
}
}
.ft-case-study-img {
&:before {
background-color: rgba(0, 67, 135, .85);
}
}
}
}
.ft-thx-project-section {
z-index: 1;
padding: 110px 0px;
&:before,
&:after {
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 450px;
content: '';
position: absolute;
background-image: url(../img/bg/c-bg.jpg);
}
&:after {
background-image: none;
background-color: rgb(0 13 81 / 90%);
}
.pr-cor-section-title {
max-width: 450px;
h2 {
color: #fff;
padding-bottom: 0;
}
}
}
.ft-thx-project-slider-area {
padding-top: 60px;
}
.ft-thx-project-slider-item {
overflow: hidden;
margin: 0px 10px;
.ft-thx-inner-text {
right: 0;
width: 90%;
opacity: 0;
left: -100%;
color: #fff;
bottom: 30px;
margin: 0 auto;
padding: 30px 20px;
position: absolute;
transition: 500ms all ease;
background-color: $base-color-2;
span {
font-weight: 600;
}
h3 {
color: #fff;
font-size: 24px;
font-weight: 700;
line-height: 1.4;
padding: 10px 0px;
max-width: 280px;
}
.read-more {
top: 50%;
right: 30px;
width: 50px;
height: 50px;
font-size: 20px;
position: absolute;
transform: translateY(-50%);
background-color: #fe484e;
}
}
&:hover {
.ft-thx-inner-text {
left: 0;
opacity: 1;
}
}
}
.port_left_arrow,
.port_right_arrow {
top: 0;
right: 0;
border: none;
color: #fff;
width: 50px;
height: 50px;
margin-left: 10px;
background-color: #fe484e;
&:hover,
&:focus {
color: #fff;
}
}
.ft-thx-project-slider {
.slick-next,
.slick-prev {
display: none;
}
}
// *** Home page seven **//
.pr-sv-case-study-section {
padding: 110px 0px 70px;
.pr-sx-secion-title {
margin: 0;
max-width: 580px;
padding-bottom: 40px;
}
}
.pr-sv-case-study-filter-btn {
margin-bottom: 55px;
li {
cursor: pointer;
font-weight: 600;
padding: 10px 25px;
border-radius: 5px;
color: $base-color-2;
font-family: $heading;
transition: 300ms all ease;
&.filtr-active {
color: #fff;
background-color: #fe484e;
}
}
}
.pr-sv-case-study-item {
max-width: 370px;
border-radius: 8px;
margin-bottom: 40px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 20px 50px 0px rgba(60, 60, 60, 0.1);
.pr-sv-case-study-img {
overflow: hidden;
border-radius: 10px;
&:before {
top: 0;
left: 0;
width: 100%;
content: '';
opacity: 0;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, .7);
transition: 300ms all ease;
}
a {
left: 0;
top: 40%;
right: 0;
opacity: 0;
font-size: 30px;
text-align: center;
position: absolute;
color: #fe484e;
transform: translateY(-50%);
}
}
.pr-sv-case-study-text {
padding: 25px 20px;
h3 {
font-size: 22px;
font-weight: 700;
line-height: 1.636;
color: $base-color-2;
}
}
&:hover {
.pr-sv-case-study-img {
&:before {
opacity: 1;
}
a {
top: 50%;
opacity: 1;
}
}
}
}
.ft-thx-project-section-3 {
padding: 115px 0px;
}
.ft-thx-project-top-content-3 {
.ft-thx-section-title-3 {
max-width: 550px;
h2 {
color: #fff;
}
}
}
.ft-thx-project-slider-item-wrap {
padding: 0px 5px;
}
.ft-thx-project-slider-item-3 {
&:before,
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 85%;
-webkit-transition: .3s cubic-bezier(.24,.74,.58,1);
-khtml-transition: .3s cubic-bezier(.24,.74,.58,1);
-moz-transition: .3s cubic-bezier(.24,.74,.58,1);
-ms-transition: .3s cubic-bezier(.24,.74,.58,1);
-o-transition: .3s cubic-bezier(.24,.74,.58,1);
transition: .3s cubic-bezier(.24,.74,.58,1);
background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(27,27,27,0)),to(#1b1b1b));
background-image: -webkit-linear-gradient(to bottom,rgba(27,27,27,0),#1b1b1b);
background-image: -moz-linear-gradient(to bottom,rgba(27,27,27,0),#1b1b1b);
background-image: -ms-linear-gradient(to bottom,rgba(27,27,27,0),#1b1b1b);
background-image: -o-linear-gradient(to bottom,rgba(27,27,27,0),#1b1b1b);
background-image: linear-gradient(to bottom,rgba(27,27,27,0),#1b1b1b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(27, 27, 27, 0)',endColorStr='#1b1b1b');
}
&:after {
background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(27,27,27,0)),to(#4ab9cf));
background-image: -webkit-linear-gradient(to bottom,rgba(27,27,27,0),#4ab9cf);
background-image: -moz-linear-gradient(to bottom,rgba(27,27,27,0),#4ab9cf);
background-image: -ms-linear-gradient(to bottom,rgba(27,27,27,0),#4ab9cf);
background-image: -o-linear-gradient(to bottom,rgba(27,27,27,0),#4ab9cf);
background-image: linear-gradient(to bottom,rgba(27,27,27,0),#4ab9cf);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(27, 27, 27, 0)',endColorStr='#4ab9cf');
opacity: 0;
}
.ft-thx-inner-text {
left: 0;
bottom: 0;
color: #fff;
z-index: 5;
position: absolute;
padding: 32px 50px;
h3 {
color: #fff;
font-size: 24px;
font-weight: 700;
padding-top: 8px;
}
}
&:hover {
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
}
}
.ft-thx-project-slider-3 {
margin-top: 50px;
.slick-arrow {
height: 46px;
width: 46px;
background-color: #fff;
-webkit-box-shadow: 0 0 13px rgba(1,25,59,.1)!important;
-khtml-box-shadow: 0 0 13px rgba(1,25,59,.1)!important;
-moz-box-shadow: 0 0 13px rgba(1,25,59,.1)!important;
-ms-box-shadow: 0 0 13px rgba(1,25,59,.1)!important;
-o-box-shadow: 0 0 13px rgba(1,25,59,.1)!important;
box-shadow: 0 0 13px rgba(1,25,59,.1)!important;
margin: 0;
-webkit-transform: translate(0,0);
-khtml-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
bottom: 15px;
}
}
.port_left_arrow3,
.port_right_arrow3 {
width: 60px;
color: #fff;
border: none;
height: 60px;
margin-left: 10px;
border-radius: 100%;
background-color: $base-color-3;
}