| Server IP : 5.161.254.237 / Your IP : 216.73.216.230 Web Server : Apache System : Linux diamond.sialwebvps.com 4.18.0-553.8.1.el8_10.x86_64 #1 SMP Tue Jul 2 07:26:33 EDT 2024 x86_64 User : stellasp ( 1131) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/stellasp/public_html/ohhtml/scss/ |
Upload File : |
$black:#000;
$white:#fff;
$hover:#BE1E2D;
$antonio-font:"Antonio", sans-serif;
$anton:"Anton", sans-serif;
$grayText:#999999;
$darkbg:#25262B;
$lightGray:#b0b0b0;
$interFont:"Inter", sans-serif;
$grayBg:#EFECEC;
$popins:"Poppins", sans-serif;
@mixin prefix(){
-webkit-transition:all 0.9s ease;
-moz-transition:all 0.9s ease;
-ms-transition:all 0.9s ease;
-o-transition:all 0.9s ease;
}
@mixin slowprefix(){
-webkit-transition:all 9s ease;
-moz-transition:all 9s ease;
-ms-transition:all 9s ease;
-o-transition:all 9s ease;
}
@mixin button() {
background:$black;
color:$white;
padding:5px 30px;
text-align: center;
outline:none;
border:none;
font-size:14px;
@include prefix();
&:hover {
background:$hover;
color:$white;
}
}
div, section, ul, ol, li, p, address, a, p, img, html, body, header, main, footer, span, strong, article {
margin:0px;
padding:0px;
list-style: none;
list-style-type: none;
}
a {
text-decoration: none;
}
a:hover {
color:$hover;
}
body {
color:$black;
font-size:100%;
font-family:$antonio-font;
}
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 700
.antonio-font {
font-family: "Antonio", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
}
.anton-regular {
font-family: "Anton", sans-serif;
font-weight: 400;
font-style: normal;
}
.inter {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
.poppins-thin {
font-family: "Poppins", sans-serif;
font-weight: 100;
font-style: normal;
}
.poppins-extralight {
font-family: "Poppins", sans-serif;
font-weight: 200;
font-style: normal;
}
.poppins-light {
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
}
.poppins-regular {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}
.poppins-medium {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}
.poppins-semibold {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style: normal;
}
.poppins-bold {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: normal;
}
.poppins-extrabold {
font-family: "Poppins", sans-serif;
font-weight: 800;
font-style: normal;
}
.poppins-black {
font-family: "Poppins", sans-serif;
font-weight: 900;
font-style: normal;
}
.poppins-thin-italic {
font-family: "Poppins", sans-serif;
font-weight: 100;
font-style: italic;
}
.poppins-extralight-italic {
font-family: "Poppins", sans-serif;
font-weight: 200;
font-style: italic;
}
.poppins-light-italic {
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: italic;
}
.poppins-regular-italic {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: italic;
}
.poppins-medium-italic {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: italic;
}
.poppins-semibold-italic {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style: italic;
}
.poppins-bold-italic {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: italic;
}
.poppins-extrabold-italic {
font-family: "Poppins", sans-serif;
font-weight: 800;
font-style: italic;
}
.poppins-black-italic {
font-family: "Poppins", sans-serif;
font-weight: 900;
font-style: italic;
}
@mixin main-heading() {
font-family:$anton;
font-size:17vw;
font-weight:300;
letter-spacing: 0.01em;
text-align:center;
color:$black;
text-transform: uppercase;
@media screen and (max-width:640px) {
font-size:40px;
}
}
@mixin btn() {
background:$hover;
color:$white;
border-radius:20px;
padding:8px 20px;
border:none;
text-transform: capitalize;
font-size:17px;
@include prefix();
&:hover {
background:$black;
}
}
header {
border-bottom:3px solid $hover;
}
.top-annoucement-bar {
background:$black;
padding:5px 0;
// position:fixed;
top:0px;
width: 100%;
}
.left-top-leftsec {
ul {
display: flex;
justify-content:start;
align-items: center;
li {
margin-right:25px;
address {
color:$white;
}
a {
color:$white;
&:hover {
color:$hover;
}
}
}
}
}
.sticky.header-appear .header-reverse-scroll {
.top-annoucement-bar {
display: none;
}
}
.custom-nav {
flex-direction: column;
}
.navbar .navbar-nav .nav-link {
white-space:nowrap;
}
.how-works {
padding-bottom:20px;
}
.main-title {
h3 {
@include main-heading();
}
}
.heading-description {
font-size:18px;
text-align: center;
color:$black;
margin-bottom:15px;
}
.working-steps {
padding:10px 15px;
display: flex;
justify-content: space-around;
height:330px;
}
.steps {
text-align: center;
width:32%;
img {
margin:5px 0 15px 0;
}
strong {
color:$hover;
font-size:16px;
display: block;
}
p {
margin-top:5px;
}
}
@media screen and (min-width:1140px) {
.step-2 {
align-self: end;
}
}
.works-descripton {
h5 {
font-size:3.3vw;
font-family:$antonio-font;
color:$black;
span {
color:$hover;
}
@media screen and (max-width:740px) {
font-size:20px;
}
}
.red-round-btn {
@include btn();
margin:20px 0 0 0;
}
}
.video-sec {
text-align: center;
padding:80px 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f6f5f0+0,f6f5f0+53,2989d8+53,ffffff+53,ffffff+100 */
background: linear-gradient(to right, #f6f5f0 0%,#f6f5f0 50%,#f6f5f5 50%,#ffffff 50%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
h3 {
color:$hover;
font-size:30px;
text-transform: uppercase;
text-align: center;
padding:30px 0;
font-weight:600;
span {
color:$black;
}
}
}
.category-scroll-sec1 {
background:#25262b url(../images/stell-bg-vector.png) no-repeat center center !important;
background-size:50% 120% !important;
color:$white;
}
.category-scroll-sec2 {
background:#25262b url(../images/color-logo-bg.png) no-repeat center center !important;
background-size:50% 150% !important;
color:$white;
.block-tabbed-strip__main-content h2 {
margin-top:70px;
}
}
.block-tabbed-strip__main-content {
h2 {
text-transform: uppercase;
margin-top:25px;
line-height:130px;
}
}
@keyframes moveBadge {
0% {
transform: translateY(0);
}
30% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
}
.team-wears-sec {
position: relative;
text-align: center;
article {
@media screen and (min-width:1300px) {
width:30%;
}
width:80%;
margin:30px auto;
font-size:26px;
font-weight:500;
font-family:$antonio-font;
color:$black;
img {
width:30px;
height:30px;
}
}
}
.animated-gif {
position: relative;
top:-50%;
margin:-100px auto;
margin-bottom:50px;
width:300px;
transform: translate(-50%, -50%);
animation: moveBadge 6s infinite;
@media screen and (max-width:840px) {
margin:0 auto;
}
}
.departments{
padding:50px 0;
h3 {
font-size:40px;
text-transform:capitalize;
margin-bottom:20px;
text-align: center;
}
p {
text-align: center;
margin-bottom:20px;
color:$grayText;
font-size:18px;
}
}
.department-box {
border-radius:10px;
padding:15px;
background:$white;
color:$black;
box-shadow:0px 0px 5px rgba($color: #000000, $alpha: 0.5);
min-height:300px;
margin-top:20px;
text-align: left;
.top-border {
height:1px;
background:$black;
}
h4 {
margin-top:15px;
color:$black;
text-transform: capitalize;
font-size:20px;
font-weight:600;
}
p {
margin:15px 0;
color:$black;
text-align: left;
font-size:16px;
}
ul {
li {
list-style-position: inside;
list-style-type: disc;
}
}
}
footer {
background:$darkbg;
color:$white;
padding-top:30px;
}
.news-letter-sec {
padding:20px;
h3 {
color:$white;
@media screen and (min-width:1300px) {
font-size:2.2vw;
margin:15px 0 0;
}
span {
color:$hover;
}
}
.news-letter-field {
display:flex;
position: relative;
margin-bottom:15px;
.news-field {
background:transparent;
}
.submit-icon {
position:absolute;
right:5px;
top:-1px;
font-size: 20px;
color:$white;
background: none;
border:none;
}
}
.social-media-icons {
margin-top:20px;
strong {
color:$hover;
font-size:18px;
}
ul {
display: flex;
justify-content:start;
li {
margin-top:15px;
margin-right:15px;
img {
@include prefix();
}
&:hover img {
opacity:0.7;
}
}
}
}
}
.col-link {
padding:20px 0;
h3 {
font-size:24px;
text-transform: capitalize;
margin-bottom:20px;
}
ul {
li {
list-style-type: disc;
list-style-position: inside;
margin-top:5px;
a {
font-weight:300;
font-size:16px;
color:$lightGray;
&:hover {
color:$white;
}
}
}
}
strong {
display:block;
margin-top:10px;
}
address {
color:$lightGray;
a {
color:$lightGray;
&:hover {
color:$white;
}
}
}
}
.copy-right {
border-top:1px solid $lightGray;
padding:10px 0;
text-align: center;
p {
color:$lightGray;
a {
color:$white;
&:hover {
color:$hover;
}
}
}
}
.breadcrumb-sec {
.breadcrumb {
margin:0px !important;
.breadcrumb-item {
padding:15px 10px;
font-family:$interFont;
a {
color:$black;
font-weight:500;
}
}
.breadcrumb-item.active {
color:$hover;
}
}
}
.active-catname {
font-family:$interFont;
font-size:30px;
font-weight:600;
text-transform: capitalize;
}
.top-cats-sec {
background:$grayBg;
padding:15px 0;
.cats-menu {
li {
.dropdown-btn {
background:transparent;
border:none;
font-family: $interFont;
font-size:16px;
text-transform: uppercase;
font-weight:700;
img {
margin-left:5px;
}
&:before {
color:$white;
}
.dropdown-item:focus, .dropdown-item:hover {
background:$hover !important;
}
}
.dropdown-menu {
width:300px;
font-size:16px;
background:$grayBg;
color:$black;
.dropdown-item:before {
content: "\f111";
color:$black;
font-family: FontAwesome;
font-size:6px;
vertical-align: middle;
margin-right: 10px;
}
}
.dropdown-item:focus, .dropdown-item:hover {
&:hover {
color:$white;
}
}
}
}
}
.dropdown-item:focus, .dropdown-item:hover, .dropdown-item:hover, .dropdown-item.active, .dropdown-item:active {
background:$hover !important;
color:$white;
}
.top-cats-sec .cats-menu li .dropdown-menu .dropdown-item:before:hover {
color:$white;
}
.cats-menu {
ul.cat-dlist {
display: flex;
li.main-li {
width:20%;
}
}
}
.product-main-wrapper {
padding:50px 0;
}
.product-wrapper {
margin-bottom:20px;
.pro-detail {
font-family:$popins;
padding:10px 0;
h2 {
font-size:18px;
color:$black;
}
p {
margin:0px;
color:$black;
}
}
}
.main-pagination-sec {
display: flex;
justify-content: center;
}
.page-item:first-child .page-link {
color:$hover;
}
.page-item:last-child .page-link {
color:$hover;
}
.page-link {
color:$black;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
filter: brightness(0) saturate(100%);
font-size:20px;
}
.next-pre-product {
width:280px;
display: flex;
justify-content: space-between;
float:right;
i {
font-weight:300;
}
span {
display:block;
}
.next-pro {
a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family:$popins;
color:$black;
}
i {
text-align:left;
}
}
.prv-pro {
i {
text-align: right;
}
}
}
.detil-product-description {
padding:15px 20px;
}
.product-name {
margin-bottom:20px;
h1 {
font-size: 25px;
font-weight: 400;
letter-spacing: -0.25px;
}
strong {
color:$hover;
font-size:24px;
font-weight:500;
}
}
.pro-qty-sec {
text-align: center;
// width:105px;
color:#727272;
span {
font-size:14px;
color: #2f2f2f;
}
.qty-field {
width:60px;
height:40px;
text-align: center;
color:$black;
border:none;
font-size:40px;
&:focus, &:focus-visible {
border:none;
box-shadow: none;
}
}
.less, .more {
height:35px;
width:35px;
border:1px solid $black;
display: flex;
justify-content: center;
align-items: center;
font-weight:200;
font-size:13px;
cursor: pointer;
border-radius:4px;
color:$black;
i {
border-bottom:1px solid $black;
color:$black;
}
}
}
.qty-input, .qty-input2, .qty-input3, .qty-input4 {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.pro-qty-sec {
display: flex;
display: flex;
flex-direction: column;
justify-content: start;
width: 130px;
text-align: center;
strong {
color:$black;
font-weight:400;
margin-right: 20px;
display: block;
margin-bottom: 10px;
}
}
/*Size radio button*/
.size-top {
margin-top:15px;
strong {
color:$black;
text-transform: uppercase;
font-weight:400;
}
}
.sizes span {
text-align: center;
display: block;
// color:$black;
}
.sizes input[type="radio"] {
display: none;
}
.sizes {
display: flex;
margin-top:7px;
flex-wrap: wrap;
}
.sizes label {
font-size: 16px;
cursor: pointer;
margin: 0;
padding:10px 10px;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
background:$grayBg;
color:$black;
}
.sizes input[type="radio"]:checked + label {
background:$hover;
color:$white !important;
}
.sizes input[type="radio"] label {
border: 1px solid #c2c2c2;
color:$black;
}
.inquiry-btn {
@include button();
margin-top:15px;
width:100%;
}
.product-attributes-wrapper {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.product-attributes {
margin-right:15px;
}
}
.option-1 {
margin-top:20px;
}
.size-qty-sec {
display: flex;
justify-content: space-between;
align-items:end;
.add-inquiry-btn {
background:$hover;
color:$white;
padding:10px 0;
border:none;
display: block;
width:100%;
margin-left:15px;
text-transform: uppercase;
font-family:$popins;
@include prefix();
&:hover {
background: $black;
}
}
}
.product-des-detail {
// margin:20px 0;
padding:15px 0;
h5 {
font-size:1.8vw;
padding:10px 0;
color:$black;
}
.nav-tabs .nav-link {
width:25%;
border:1px solid #c0c0c0;
border-radius:0px;
padding:15px 0;
font-size:16px;
color:$black;
@media screen and (max-width:640px) {
width:100%;
}
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
background:$hover;
color:$white;
}
}
.description-content-sec {
display: flex;
justify-content: space-between;
flex-flow: wrap;
padding:15px 10px;
.des-content {
width:50%;
display: flex;
justify-content: start;
align-items:center;
p {
text-align: justify;
margin:10px 0;
font-size:14px;
}
img {
padding:0 10px;
}
}
ul,ol {
padding-left:5px;
list-style-type: disc !important;
list-style-position: inside;
li {
list-style-type: disc !important;
list-style-position:outside;
}
}
@media screen and (max-width:840px) {
.des-content {
width:100%;
}
}
@media screen and (max-width:640px) {
.des-content {
width:100%;
}
}
h2, h3, h4, h5, h6 {
color:$hover;
font-size:22px;
padding:10px 0;
}
p {
font-size:15px;
margin-bottom:15px;
}
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
content: url(../images/left-arrow.png);
}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-prev:after {
content: url(../images/right-arrow.png);
}
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
--bs-offcanvas-width: 600px;
}
.product-description {
ul {
li {
list-style-type: disc;
list-style-position: inside;
}
}
}
.carousel-button-div {
background:$white;
color:$black;
width:70% !important;
margin:auto;
display: flex;
align-items: center;
justify-content: center;
height: 70px;
position: absolute;
left: 0%;
right: 0%;
bottom: 2px;
.carousel-control-next, .carousel-control-prev {
width: 5%;
display: flex;
align-items: center;
justify-content: center;
top: 26px !important;
height: 19px;
}
}
.button-content {
strong {
display: block;
color:$black;
font-size:14px;
}
p {
color:$grayText;
font-size:14px;
}
}
main {
font-family: $popins;
}
.whats-behind {
background:#f2f2f2;
padding:15px 0;
text-align: center;
h4 {
text-align: center;
color:$black;
}
@media screen and (min-width:1140px) {
.col-md-20 {
width:20%;
}
}
@media screen and (max-width:940px) {
.col-md-20 {
width:25%;
}
}
@media screen and (max-width:740px) {
.col-md-20 {
width:32.3%;
}
.best-seller-sec {
h3, h4 {
font-size:22px;
}
}
}
@media screen and (max-width:640px) {
.col-md-20 {
width:100%;
}
}
.box-div {
padding:10px 5px;
margin:10px 0;
img {
margin:10px auto 20px;
}
p {
font-size:16px;
color:#797979;
}
}
}
.whats-behind {
margin:30px 0;
}
.best-seller-sec {
h3 {
color:$black;
font-weight:700;
font-size:3vw;
text-transform: uppercase;
}
h4 {
font-size:2.6vw;
color:#696969;
font-style: italic;
text-transform: uppercase;
}
}
@media screen and (max-width:540px) {
.cats-menu ul.cat-dlist li.main-li {
width:49%;
}
}