File: //proc/thread-self/root/home/bibuzptr/www/old/assets/sass/sub-stylesheet/_main.scss
/* @@@@@@@@@@@@@ about Section Start Here @@@@@@@@@@@@@@ */
.about-section {
background-position: right bottom;
.list-group-item {
background-color: transparent;
}
.about-thumb {
@include breakpoint(max-lg){
margin-bottom: 65px;
}
&.ab-images {
@include breakpoint(lg) {
margin-bottom: 0;
position: absolute;
left: 0;
bottom: 50%;
transform: translateY(50%);
}
}
}
.about-left-part {
@extend %flex;
margin: -5px;
margin-bottom: 60px;
@include breakpoint(xl) {
margin-bottom: -5px;
}
.about-item {
width: calc(100% / 1);
@include breakpoint(sm) {
width: calc(100% / 2);
}
@include breakpoint(lg) {
width: calc(100% / 3);
}
&:nth-child(even) {
.about-inner {
flex-direction: column-reverse;
.about-thumb {
margin-bottom: 0;
margin-top: 10px;
}
}
}
.about-inner {
@extend %flex;
margin: 5px;
.about-thumb {
@extend %hidden;
width: 100%;
margin-bottom: 10px;
img {
width: 100%;
@include border-radius(4px);
box-shadow: 0 0 6px rgba(8, 136, 136, .10);
}
}
.about-content {
padding: 20px;
background: #f0f5ff;
text-align-last: center;
.ac-thumb {
margin-bottom: 15px;
}
.ac-content {
h6 {
margin-bottom: 10px;
}
}
}
}
}
}
.about-wrapper {
.about-title {
margin-bottom: 20px;
h2 {
margin-bottom: 25px;
@include breakpoint (max-sm){
font-size: 24px;
}
@include breakpoint(sm){
font-size: 30px;
}
@include breakpoint(lg){
font-size: 40px;
}
}
p {
max-width: 470px;
&.home-2{
max-width: 540px;
}
}
}
}
&.about-page {
.about-wrapper {
max-width: 500px;
@include breakpoint(max-lg) {
margin: 30px auto 0;
}
.about-title {
h6 {
span {
font-weight: 500;
}
}
}
.about-content {
max-width: 450px;
.lab-btn{
padding: 13px 46px;
}
}
}
}
}
/* @@@@@@@@@@@@@ history Section Section Start Here @@@@@@@@@@@@@@ */
.history-section{
.history-header{
margin-left: 0;
h2 {
margin-top: -10px;
}
}
.history-content{
.history-items{
overflow: hidden;
.swiper-slide{
overflow: hidden;
.lab-inner{
overflow: hidden;
background-color: $ash-color;
padding: 15px;
@include breakpoint(md){
padding: 30px;
}
@include breakpoint(max-sm){
border-radius: 10px;
}
.lab-thumb{
margin-bottom: 15px;
}
.lab-content{
text-align: left;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 15px;
@include breakpoint(md) {
padding: 0;
}
.history-left{
@include breakpoint(max-md){
display: block;
}
width: 200px;
h2{
@include breakpoint(max-md){
font-size: 30px;
}
@include breakpoint(max-sm){
font-size: 24px;
}
span{
font-size: 72px;
@include breakpoint(max-md){
font-size: 46px;
}
@include breakpoint(max-sm){
font-size: 36px;
}
}
}
}
.history-right{
@include breakpoint(max-md){
width: 100%;
}
width: calc(100% - 200px);
}
}
}
}
}
.achievement{
background-color: $ash-color;
padding: 44px 23px;
margin-top: 30px;
@include breakpoint(md){
margin-top: 15px;
}
@include breakpoint(max-sm){
border-radius: 10px;
}
.achievement-content{
margin-top: 45px;
.lab-item{
margin-bottom: 40px;
.lab-inner{
.lab-content{
h3 {
margin-bottom: 10px;
@include breakpoint(md){
@include breakpoint(max-lg){
font-size: 30px;
}
}
@include breakpoint(max-mobile){
font-size: 20px;
}
@include breakpoint (sm){
font-size: 24px;
}
}
h5 {
margin-top: 0;
color:$desc-color;
@include breakpoint(md){
@include breakpoint(max-lg){
font-size: 20px !important;
}
}
@include breakpoint(max-mobile){
font-size: 18px;
}
@include breakpoint (sm){
font-size: 20px;
}
}
}
}
}
}
.history-navigation{
@extend %flex;
justify-content: flex-end;
@include breakpoint(max-lg){
display: none;
}
.history-button-prev, .history-button-next{
outline: none;
font-size: 30px;
cursor: pointer;
transition: $transition;
&:hover{
color:$theme-color;
}
}
.history-button-prev{
margin-right: 30px;
}
}
}
}
}
/* @@@@@@@@@@@@@ Feature Section Section Start Here @@@@@@@@@@@@@@ */
.feature-section {
.lab-item {
margin: 15px 0;
padding: 60px 30px;
box-shadow: 0 0 6px rgba(8, 136, 136, .08);
@include transition($transition);
background: $white-color;
@include breakpoint(lg) {
margin: 0 0 15px;
}
&:hover {
box-shadow: 0 5px 10px rgba(136, 136, 136, .10);
h6 {
color: $theme-color;
}
.lab-thumb {
img {
transform: scale(1.07);
}
}
}
.lab-thumb {
margin-bottom: 20px;
img {
@include transition($transition);
transform: scale(1);
}
}
h6 {
transition: $transition;
}
p {
max-width: 300px;
margin: 0 auto;
}
}
}
/* @@@@@@@@@@@@@ Product Section Start Here @@@@@@@@@@@@@@ */
.product-section {
.section-wrapper {
margin-bottom: 9px;
.card {
@include transition($transition);
padding: 20px;
border-radius: 10px;
@extend %hidden;
background: $white-color;
box-shadow: 0 0 10px rgba(136, 136, 136, .10);
&::after{
content:"";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color:rgba(0,7,26,.702);
transform: scale(0);
@include transition($transition); }
&:hover{
.addcart-overlay{
transform: scale(1);
}
&::after{
transform: scale(1);
}
}
.addcart-overlay{
position: absolute;
z-index: 9;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
transform: scale(0);
@include transition(.4s);
.addcart-content{
.addcart-icon{
a{
transition: all .3s ease-in-out;
background-color: $white-color;
height: 40px;
width: 40px;
line-height: 40px;
margin-right:10px;
text-align: center;
@include border-radius(100%);
display: inline-block;
@include transition(.4s);
&:hover{
background-color: $theme-color;
@include transform(rotate(360deg));
i{
color:$white-color;
}
}
i{
font: 15px;
color: $title-color;
@include transition($transition);
}
}
}
.lab-btn{
padding: 9px 33px;
font-size: 15px;
font-weight: 700;
color:white;
margin-top: 40px;
text-transform: none;
@include transition($transition);
}
}
}
.card-body {
.card-title {
&:hover {
color: $theme-color;
}
}
.product-price{
color: $theme-color;
del{
color: $title-color;
font-size:16px;
margin-left: 5px;
}
}
}
}
}
}
/* @@@@@@@@@@@@@ video Section Start Here @@@@@@@@@@@@@@ */
.video-section{
.video-content{
@extend %rel;
img {
@include border-radius(6px);
}
a{
@extend %abs;
top:50%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
width: 60px;
height: 60px;
img {
width: 100%;
}
}
}
}
/* @@@@@@@@@@@@@ Chicken Life Section Start Here @@@@@@@@@@@@@@ */
.chicken-life-cycle{
.lab-item{
.lab-thumb{
margin-bottom: 60px;
@include breakpoint(lg) {
margin-left: -60px;
padding-right: 30px;
margin-bottom: 0;
}
@include breakpoint(sm){
@include breakpoint(max-lg){
margin-bottom: 60px;
}
}
}
}
}
.life-cycle-item {
margin-bottom: 15px;
.lci-left {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 24px;
font-weight: 700;
color: $white-color;
background: $theme-color;
@include border-radius(100%);
margin-bottom: 15px;
@include breakpoint(sm) {
margin-right: 15px;
margin-bottom: 0;
}
}
.lci-right {
h6 {
margin-bottom: 10px;
}
p{
max-width: 350px;
}
}
}
/* @@@@@@@@@@@@@ Service Section Start Here @@@@@@@@@@@@@@ */
.service-section{
.service-content {
margin-bottom: -10px;
}
}
/* @@@@@@@@@@@@@ Contact Us Section Start Here @@@@@@@@@@@@@@ */
.contact-section {
.contac-top {
margin-bottom: 60px;
}
.contac-bottom {
margin-bottom: 15px;
}
}
.location-map {
@include breakpoint(max-lg) {
margin-bottom: 15px;
}
#map {
height: 417px;
width: 100%;
iframe {
height: 100%;
width: 100%;
border: none;
}
}
}
.contact-form {
form {
&.comment-form {
@extend %flex;
justify-content: space-between;
width: 100%;
margin-top: 0;
input[type="text"], [type="email"] {
padding: 10px 15px;
border: 1px solid $border-color;
background: $white-color;
width: 100%;
margin-bottom: 15px;
@include breakpoint(sm) {
width: calc(100% / 2 - 10px);
}
&:nth-child(3) {
@include breakpoint(md) {
width: 100% !important;
margin-right: 0;
}
}
}
textarea {
background: $white-color;
border: 1px solid $border-color;
width: 100%;
padding: 10px 15px;
}
button {
&.lab-btn {
width: 100%;
margin-top: 15px;
padding: 10px 15px;
color: $white-color;
background: $theme-color;
outline: none;
border: none;
@include border-radius(3px);
box-shadow: 0 5px 5px rgba(255, 177, 31, .25);
@extend %pointer;
&:hover {
box-shadow: none;
}
}
}
}
}
}
/* @@@@@@@@@@@@@ Faq Section Start Here @@@@@@@@@@@@@@ */
.faq-section {
.faq-tab {
padding: 30px;
background: $white-color;
box-shadow: 0 5px 5px rgba(81, 70, 174, .15);
@include breakpoint(max-lg) {
margin-bottom: 30px;
}
> h5 {
margin-bottom: 15px;
}
ul {
li {
width: 100%;
a {
padding: 5px 0;
color: #716c80;
font-size: 16px;
&.active {
color: $theme-color;
text-decoration: underline;
}
}
}
}
}
.faq-content {
margin-bottom: -10px;
.tab-pane {
> h5 {
color: $theme-color;
margin-bottom: 15px;
text-decoration: underline;
}
.card {
margin-bottom: 25px;
border: none;
box-shadow: 0 3px 3px rgba(81, 70, 174, .15);
}
.card-header {
background: $white-color;
border: none;
padding: 0;
@extend %pointer;
.faq-item {
padding: 20px 30px;
border: none;
width: 100%;
text-align: left;
outline: none;
background: #fdfeff;
@extend %pointer;
@extend %rel;
font-size: 16px;
@include breakpoint(sm) {
font-size: 20px;
}
&::after, &::before {
@extend %abs;
background: $title-color;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
&::after {
width: 20px;
height: 2px;
}
&.collapsed {
&::before {
width: 2px;
height: 20px;
right: 29px;
}
}
}
}
.card-body {
background: #fdfeff;
padding-top: 0px;
padding-left: 30px;
padding-right: 30px;
}
}
}
}
/* @@@@@@@@@@@@@ Gallery Section Start Here @@@@@@@@@@@@@@ */
.gallery-section{
padding-bottom: 135px;
overflow: hidden;
.gallery-content{
.gallery-grid{
display: grid;
justify-content: center;
-ms-grid-columns: fr;
grid-template-columns: repeat(1, 1fr);
grid-gap: 20px;
margin: 0 15px;
@include breakpoint (md){
-ms-grid-columns: fr fr;
grid-template-columns: repeat(2, 1fr);
margin: 0;
}
@include breakpoint (lg){
-ms-grid-columns: fr fr fr fr;
grid-template-columns: repeat(4, 1fr);
}
.grid-image{
overflow: hidden;
img{
max-width: 100%;
@include transition(all 0.5s cubic-bezier(.45,.05,.55,.95)) ;
}
&:hover{
img{
transform: scale(1.1);
}
}
}
}
.default-btn{
padding: 12px 37px;
margin-top: 32px;
}
}
}
/* @@@@@@@@@@@@@ sponsor Section Start Here @@@@@@@@@@@@@@ */
.sponsor-section {
.section-wrapper {
margin-bottom: 15px;
.sponsor-slider {
@extend %hidden;
text-align: center;
}
}
}
/* @@@@@@@@@@@@@ testimonial Section Start Here @@@@@@@@@@@@@@ */
.testimonial-section {
.section-header {
margin-bottom: 30px;
}
.testi-slider {
@extend %hidden;
.testi-item {
margin: 10px;
.testi-inner {
box-shadow: 0 0 10px rgba(136, 136, 136, .10);
padding: 30px;
@include border-radius(6px);
}
}
}
.section-wrapper {
@extend %rel;
&:hover {
.testi-navigation {
opacity: 1;
}
}
}
.testi-navigation {
@extend %abs;
top: 50%;
width: 70%;
left: 50%;
opacity: 0;
transform: translate(-50%, -50%);
@include transition($transition);
@include breakpoint(max-lg) {
display: none !important;
}
.testi-nav {
@extend %abs;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
background: $ash-color;
color: $title-color;
margin-right: 10px;
@extend %pointer;
@include border-radius(100%);
&:hover, &.active {
color: $white-color;
background: $theme-color;
}
&:last-child {
margin-right: 0;
}
&.testi-slider-prev {
left: -20px;
}
&.testi-slider-next {
right: -20px;
}
}
}
.testi-pagination {
margin-top: 15px;
span {
background: $white-color;
margin: 2px;
border: 2px solid $theme-color;
opacity: 1;
width: 12px;
height: 12px;
&.swiper-pagination-bullet-active {
background: $theme-color;
}
}
}
}
/* @@@@@@@@@@@@@ Team Section Start Here @@@@@@@@@@@@@@ */
.team-section {
.section-wrapper {
margin-bottom: -7px;
}
.card {
@include transition($transition);
box-shadow: 0 0 6px rgba(8, 136, 136, .08);
&:hover {
@include transform(translateY(-5px));
box-shadow: 0 10px 10px rgba(136, 136, 136, .10);
}
&.style-2 {
padding: 30px 0 10px;
img {
width: 210px;
height: 210px;
margin: 0 auto;
@include border-radius(100%);
}
}
h6 {
&:hover {
color: $theme-color;
}
}
}
}
/* @@@@@@@@@@@@@ 404 page Section Start Here @@@@@@@@@@@@@@ */
.fore-zero {
.section-wrapper {
.zero-item {
h2 {
line-height: 1.4;
margin-bottom: 0;
font-weight: 400;
}
.zero-thumb {
margin-bottom: 40px;
}
.lab-btn {
@include border-radius(3px);
}
}
}
}