/*
Template Name: YogaZone: Yoga, Fitness & Maditation Mobile Responsive Bootstrap Html Template
Author: DexignZone
Website: http://www.dexignzone.com/
Contact: dexignexpert@gmail.com
Follow: www.twitter.com/dexignzones
Like: www.facebook.com/dexignzone
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
*/
/*
======================================
* CSS TABLE CONTENT *
======================================
1. GENERAL
2. HEADINGS
3. TEXT & PARAGRAPH
4. LISTS
5. BOX SPACING (inner & outer)
>padding
>marging
6. BOX MAX-WIDTH CSS
7. POSITIONS ( absolute & relative & statice & z-index )
8. COLOR (text & background)
>text color
>background color
9. IMAGES OVERLAY EFFECTS (overly animation on images)
10. IMAGES EFFECTS (image animation in images)
>image-opacity
>image-zoom
>image-zoom-slow
>image-shrink
>image-side-pan
>image-vertical-pan
>image-fade-in
>image-fade-out
>image-rotate
>image-sepia
>image-blurr
>image-blurr-invert
>image off color
>image on color
11. CONTENT SHOW ON IMAGE BOX
12. FORM ELEMENTS
13. WP DEFAULT
14. HEADER (top part of page)
15. PAGE TOP BAR (left & right content)
16. LOGO ( company identify symbol )
17. MAIN BAR ( place logo & main-navigation )
18. NAVIGATIONS
>mena-menu
>mobile-menu
>footer-menu
19. BANNER
20. SLIDER
>rs slider
>owl slider
21. BLOG
22. WIDGETS
23. CUSTOMIZE CSS
>set-radius
>transition
>float-clearfix
24. SORTCODES
>Buttons
>Title separators
>Deviders
>Lists & bullets
>Tabs
>Accordians
>Carousels
>Testimonials
>Pricing table
>Alert box
>Modal pop
>Social icons
>Breadcrumb
>Tables
>Image effects
25. PAGINATION
26. FOOTER
27. PAGE-CONTENT
28. INNER-CONTENT
29. SIDE-NAV
30. ONE-PAGE-LAYOUT
======================================
* END TABLE CONTENT *
======================================
*/
/*--------------------------------------------------------------
1. GENERAL
---------------------------------------------------------------*/
body {
background-color: #FFF;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 400;
color: #767676;
padding: 0;
margin: 0;
overflow-x: hidden;
}
::selection {
color: #fff;
background: var(--primary);
}
a {
color: #EFBB20;
outline: 0 none;
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: none;
outline: 0 none;
}
a:active,
a:hover {
color: #333333;
}
p a {
color: #333333;
}
img {
border-style: none;
height: auto;
max-width: 100%;
vertical-align: middle;
}
hr {
clear: both;
}
section,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
summary {
display: block;
}
address {
font-style: italic;
}
table {
background-color: transparent;
width: 100%;
}
table thead th {
color: #333;
}
table td {
padding: 15px 10px;
}
p,
address,
pre,
hr,
ul,
ol,
dl,
dd,
table {
margin-bottom: 24px;
}
.overflow-hide {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
.clear {
clear: both;
}
.pull-none {
float: none;
}
::-moz-selection {
background: #ff91b8;
color: #fff;
}
::selection {
background: #ff91b8;
color: #fff;
}
@media (min-width: 1200px){
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1140px;
}
}
/*---------------------------------------------------------------
2. HEADINGS
---------------------------------------------------------------*/
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6{
color: #2e1e13;
font-family: "Poppins", sans-serif;
font-weight:600;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: #3b3b3b;
}
h1 {
font-size: 28px;
line-height: 30px;
margin-bottom: 25px;
font-weight: 700;
}
h2 {
font-size: 24px;
line-height: 38px;
margin-bottom: 25px;
font-weight: 600;
}
h3 {
font-size: 20px;
line-height: 24px;
margin-bottom: 20px;
font-weight: 600;
}
h4 {
font-size: 18px;
line-height: 1.5;
margin-bottom: 15px;
font-weight: 600;
}
h5 {
font-size: 16px;
line-height: 22px;
margin-bottom: 10px;
font-weight: 600;
}
h6 {
font-size: 14px;
line-height: 18px;
margin-bottom: 10px;
font-weight: 600;
}
/*---------------------------------------------------------------
3. TEXT & PARAGRAPH
---------------------------------------------------------------*/
p {
line-height: 1.6;
margin-bottom: 24px;
}
strong {
font-weight: 600;
}
/*text align*/
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify
}
/*text vertical align*/
.v-align-t {
vertical-align: top;
display: -webkit-inline-box;
}
.v-align-m {
vertical-align: middle;
}
.v-align-b {
vertical-align: bottom;
}
/*text no line brack*/
.text-nowrap {
white-space: nowrap
}
/*text transform*/
.text-lowercase {
text-transform: lowercase
}
.text-uppercase {
text-transform: uppercase
}
.text-capitalize {
text-transform: capitalize
}
/*text size*/
.font-14 {
font-size: 14px;
}
.font-16 {
font-size: 16px;
}
.font-18 {
font-size: 18px;
}
.font-20 {
font-size: 20px;
}
.font-22 {
font-size: 22px;
}
.font-24 {
font-size: 24px;
}
.font-26 {
font-size: 26px;
}
/*text weight*/
.font-weight-300 {
font-weight: 300;
}
.font-weight-400 {
font-weight: 400;
}
.font-weight-500 {
font-weight: 500;
}
.font-weight-600 {
font-weight: 600;
}
.font-weight-700 {
font-weight: 700;
}
.font-weight-800 {
font-weight: 800;
}
.font-weight-900 {
font-weight: 900;
}
/*---------------------------------------------------------------
4. LISTS
---------------------------------------------------------------*/
dl,
ul,
ol {
list-style-position: outside;
padding: 0;
}
ul,
ol {
margin-bottom: 24px;
}
ul li,
ol li {
padding: 0;
}
dl {
margin-left: 0;
margin-bottom: 30px;
}
dl dd {
margin-bottom: 10px;
}
/*---------------------------------------------------------------
5. BOX SPACING (inner & outer)
---------------------------------------------------------------*/
/*== >padding (around) ======*/
.p-a0 {
padding: 0;
}
.p-a5 {
padding: 5px;
}
.p-a10 {
padding: 10px;
}
.p-a15 {
padding: 15px;
}
.p-a20 {
padding: 20px;
}
.p-a25 {
padding: 25px;
}
.p-a30 {
padding: 30px;
}
.p-a40 {
padding: 40px;
}
.p-a50 {
padding: 50px;
}
.p-a60 {
padding: 60px;
}
.p-a70 {
padding: 70px;
}
.p-a80 {
padding: 80px;
}
.p-a90 {
padding: 90px;
}
.p-a100 {
padding: 100px;
}
/*== >Padding (top) ==*/
.p-t0 {
padding-top: 0;
}
.p-t5 {
padding-top: 5px;
}
.p-t10 {
padding-top: 10px;
}
.p-t15 {
padding-top: 15px;
}
.p-t20 {
padding-top: 20px;
}
.p-t30 {
padding-top: 30px;
}
.p-t40 {
padding-top: 40px;
}
.p-t50 {
padding-top: 50px;
}
.p-t60 {
padding-top: 60px;
}
.p-t70 {
padding-top: 70px;
}
.p-t80 {
padding-top: 80px;
}
.p-t90 {
padding-top: 90px;
}
.p-t100 {
padding-top: 100px;
}
/*== >Padding (bottom) ==*/
.p-b0 {
padding-bottom: 0;
}
.p-b5 {
padding-bottom: 5px;
}
.p-b10 {
padding-bottom: 10px;
}
.p-b15 {
padding-bottom: 15px;
}
.p-b20 {
padding-bottom: 20px;
}
.p-b30 {
padding-bottom: 30px;
}
.p-b40 {
padding-bottom: 40px;
}
.p-b50 {
padding-bottom: 50px;
}
.p-b60 {
padding-bottom: 60px;
}
.p-b70 {
padding-bottom: 70px;
}
.p-b80 {
padding-bottom: 80px;
}
.p-b90 {
padding-bottom: 90px;
}
.p-b100 {
padding-bottom: 100px;
}
/*== >Padding (left) ==*/
.p-l0 {
padding-left: 0;
}
.p-l5 {
padding-left: 5px;
}
.p-l10 {
padding-left: 10px;
}
.p-l15 {
padding-left: 15px;
}
.p-l20 {
padding-left: 20px;
}
.p-l30 {
padding-left: 30px;
}
.p-l40 {
padding-left: 40px;
}
.p-l50 {
padding-left: 50px;
}
.p-l60 {
padding-left: 60px;
}
.p-l70 {
padding-left: 70px;
}
.p-l80 {
padding-left: 80px;
}
.p-l90 {
padding-left: 90px;
}
.p-l100 {
padding-left: 100px;
}
/*== >Padding (right) ==*/
.p-r0 {
padding-right: 0;
}
.p-r5 {
padding-right: 5px;
}
.p-r10 {
padding-right: 10px;
}
.p-r15 {
padding-right: 15px;
}
.p-r20 {
padding-right: 20px;
}
.p-r30 {
padding-right: 30px;
}
.p-r40 {
padding-right: 40px;
}
.p-r50 {
padding-right: 50px;
}
.p-r60 {
padding-right: 60px;
}
.p-r70 {
padding-right: 70px;
}
.p-r80 {
padding-right: 80px;
}
.p-r90 {
padding-right: 90px;
}
.p-r100 {
padding-right: 100px;
}
/*== >Padding (left right) ==*/
.p-lr0 {
padding-left: 0;
padding-right: 0;
}
.p-lr5 {
padding-left: 5px;
padding-right: 5px;
}
.p-lr10 {
padding-left: 10px;
padding-right: 10px;
}
.p-lr15 {
padding-left: 15px;
padding-right: 15px;
}
.p-lr20 {
padding-left: 20px;
padding-right: 20px;
}
.p-lr30 {
padding-left: 30px;
padding-right: 30px;
}
.p-lr40 {
padding-left: 40px;
padding-right: 40px;
}
.p-lr50 {
padding-left: 50px;
padding-right: 50px;
}
.p-lr60 {
padding-left: 60px;
padding-right: 60px;
}
.p-lr70 {
padding-left: 70px;
padding-right: 70px;
}
.p-lr80 {
padding-left: 80px;
padding-right: 80px;
}
.p-lr90 {
padding-left: 90px;
padding-right: 90px;
}
.p-lr100 {
padding-left: 100px;
padding-right: 100px;
}
/*== >Padding (top bottom) ==*/
.p-tb0 {
padding-bottom: 0;
padding-top: 0;
}
.p-tb5 {
padding-bottom: 5px;
padding-top: 5px;
}
.p-tb10 {
padding-bottom: 10px;
padding-top: 10px;
}
.p-tb15 {
padding-bottom: 15px;
padding-top: 15px;
}
.p-tb20 {
padding-bottom: 20px;
padding-top: 20px;
}
.p-tb30 {
padding-bottom: 30px;
padding-top: 30px;
}
.p-tb40 {
padding-bottom: 40px;
padding-top: 40px;
}
.p-tb50 {
padding-bottom: 50px;
padding-top: 50px;
}
.p-tb60 {
padding-bottom: 60px;
padding-top: 60px;
}
.p-tb70 {
padding-bottom: 70px;
padding-top: 70px;
}
.p-tb80 {
padding-bottom: 80px;
padding-top: 80px;
}
.p-tb90 {
padding-bottom: 90px;
padding-top: 90px;
}
.p-tb100 {
padding-bottom: 100px;
padding-top: 100px;
}
/*== >margin (around) ======*/
.m-auto {
margin:auto;
}
.mx-auto {
margin: 0px auto;
}
.m-a0 {
margin: 0;
}
.m-a5 {
margin: 5px;
}
.m-a10 {
margin: 10px;
}
.m-a15 {
margin: 15px;
}
.m-a20 {
margin: 20px;
}
.m-a30 {
margin: 30px;
}
.m-a40 {
margin: 40px;
}
.m-a50 {
margin: 50px;
}
.m-a60 {
margin: 60px;
}
.m-a70 {
margin: 70px;
}
.m-a80 {
margin: 80px;
}
.m-a90 {
margin: 90px;
}
.m-a100 {
margin: 100px;
}
/*== >marging (top) ==*/
.m-t0 {
margin-top: 0;
}
.m-t5 {
margin-top: 5px;
}
.m-t10 {
margin-top: 10px;
}
.m-t15 {
margin-top: 15px;
}
.m-t20 {
margin-top: 20px;
}
.m-t30 {
margin-top: 30px;
}
.m-t40 {
margin-top: 40px;
}
.m-t50 {
margin-top: 50px;
}
.m-t60 {
margin-top: 60px;
}
.m-t70 {
margin-top: 70px;
}
.m-t80 {
margin-top: 80px;
}
.m-t90 {
margin-top: 90px;
}
.m-t100 {
margin-top: 100px;
}
/*== >marging (bottom) ==*/
.m-b0 {
margin-bottom: 0;
}
.m-b5 {
margin-bottom: 5px;
}
.m-b10 {
margin-bottom: 10px;
}
.m-b15 {
margin-bottom: 15px;
}
.m-b20 {
margin-bottom: 20px;
}
.m-b30 {
margin-bottom: 30px;
}
.m-b40 {
margin-bottom: 40px;
}
.m-b50 {
margin-bottom: 50px;
}
.m-b60 {
margin-bottom: 60px;
}
.m-b70 {
margin-bottom: 70px;
}
.m-b80 {
margin-bottom: 80px;
}
.m-b90 {
margin-bottom: 90px;
}
.m-b100 {
margin-bottom: 100px;
}
/*== >marging (left) ==*/
.m-l0 {
margin-left: 0;
}
.m-l5 {
margin-left: 5px;
}
.m-l10 {
margin-left: 10px;
}
.m-l15 {
margin-left: 15px;
}
.m-l20 {
margin-left: 20px;
}
.m-l30 {
margin-left: 30px;
}
.m-l40 {
margin-left: 40px;
}
.m-l50 {
margin-left: 50px;
}
.m-l60 {
margin-left: 60px;
}
.m-l70 {
margin-left: 70px;
}
.m-l80 {
margin-left: 80px;
}
.m-l90 {
margin-left: 90px;
}
.m-l100 {
margin-left: 100px;
}
/*== >marging (right) ==*/
.m-r0 {
margin-right: 0;
}
.m-r5 {
margin-right: 5px;
}
.m-r10 {
margin-right: 10px;
}
.m-r15 {
margin-right: 15px;
}
.m-r20 {
margin-right: 20px;
}
.m-r30 {
margin-right: 30px;
}
.m-r40 {
margin-right: 40px;
}
.m-r50 {
margin-right: 50px;
}
.m-r60 {
margin-right: 60px;
}
.m-r70 {
margin-right: 70px;
}
.m-r80 {
margin-right: 80px;
}
.m-r90 {
margin-right: 90px;
}
.m-r100 {
margin-right: 100px;
}
/*== >marging (left right) ==*/
.m-lr0 {
margin-left: 0;
margin-right: 0;
}
.m-lr5 {
margin-left: 5px;
margin-right: 5px;
}
.m-lr10 {
margin-left: 10px;
margin-right: 10px;
}
.m-lr15 {
margin-left: 15px;
margin-right: 15px;
}
.m-lr20 {
margin-left: 20px;
margin-right: 20px;
}
.m-lr30 {
margin-left: 30px;
margin-right: 30px;
}
.m-lr40 {
margin-left: 40px;
margin-right: 40px;
}
.m-lr50 {
margin-left: 50px;
margin-right: 50px;
}
.m-lr60 {
margin-left: 60px;
margin-right: 60px;
}
.m-lr70 {
margin-left: 70px;
margin-right: 70px;
}
.m-lr80 {
margin-left: 80px;
margin-right: 80px;
}
.m-lr90 {
margin-left: 90px;
margin-right: 90px;
}
.m-lr100 {
margin-left: 100px;
margin-right: 100px;
}
/*== >marging (top bottom) ==*/
.m-tb0 {
margin-bottom: 0;
margin-top: 0;
}
.m-tb5 {
margin-bottom: 5px;
margin-top: 5px;
}
.m-tb10 {
margin-bottom: 10px;
margin-top: 10px;
}
.m-tb15 {
margin-bottom: 15px;
margin-top: 15px;
}
.m-tb20 {
margin-bottom: 20px;
margin-top: 20px;
}
.m-tb30 {
margin-bottom: 30px;
margin-top: 30px;
}
.m-tb40 {
margin-bottom: 40px;
margin-top: 40px;
}
.m-tb50 {
margin-bottom: 50px;
margin-top: 50px;
}
.m-tb60 {
margin-bottom: 60px;
margin-top: 60px;
}
.m-tb70 {
margin-bottom: 70px;
margin-top: 70px;
}
.m-tb80 {
margin-bottom: 80px;
margin-top: 80px;
}
.m-tb90 {
margin-bottom: 90px;
margin-top: 90px;
}
.m-tb100 {
margin-bottom: 100px;
margin-top: 100px;
}
/*== > colum gap less ==*/
.no-col-gap [class*="col-xs-"],
.no-col-gap [class*="col-sm-"],
.no-col-gap [class*="col-md-"],
.no-col-gap [class*="col-lg-"] {
padding-left: 0;
padding-right: 0;
}
/*---------------------------------------------------------------
6. BOX MAX-WIDTH CSS
---------------------------------------------------------------*/
.max-w100 {
max-width: 100px;
}
.max-w200 {
max-width: 200px;
}
.max-w300 {
max-width: 300px;
}
.max-w400 {
max-width: 400px;
}
.max-w500 {
max-width: 500px;
}
.max-w600 {
max-width: 600px;
}
.max-w700 {
max-width: 700px;
}
.max-w800 {
max-width: 800px;
}
.max-w900 {
max-width: 900px;
}
.max-w1000 {
max-width: 1000px;
}
/*---------------------------------------------------------------
7. POSITIONS ( absolute & relative & statice & z-index )
---------------------------------------------------------------*/
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.static {
position: static;
}
.z-index1 {
z-index: 1;
}
.z-index2 {
z-index: 2;
}
.z-index3 {
z-index: 3;
}
.z-index4 {
z-index: 4;
}
.z-index5 {
z-index: 5;
}
.z-index6 {
z-index: 6;
}
.z-index7 {
z-index: 7;
}
.z-index8 {
z-index: 8;
}
.z-index9 {
z-index: 9;
}
.z-index10 {
z-index: 10;
}
.z-index100 {
z-index: 100;
}
.z-index999 {
z-index: 999;
}
/*---------------------------------------------------------------
8. COLOR (text & background)
---------------------------------------------------------------*/
/*=== >text color===*/
.text-white {
color: #fff;
}
.text-black {
color: #000;
}
.text-gray {
color: #f5f6f6;
}
.text-gray-dark {
color: #d3d3d3;
}
.text-red {
color: #F00;
}
.text-green {
color: #090;
}
.text-yellow {
color: #FF0;
}
/*=== >background color===*/
.bg-transparent {
background-color: transparent;
}
.bg-primary {
background-color: #3b20d1;
}
.bg-white {
background-color: #FFF;
}
.bg-black {
background-color: #000;
}
.bg-black-light {
background-color: #212121;
}
.bg-gray {
background-color: #f5f6f6;
}
.bg-gray-dark {
background-color: #d3d3d3;
}
.bg-red {
background-color: #FF4045;
}
.bg-green {
background-color: #38E225;
}
.bg-yellow {
background-color: #F0F52E;
}
/*=== >background image===*/
.bg-img-fix {
background-attachment: fixed;
background-size: cover;
}
/*---------------------------------------------------------------
9. IMAGES OVERLAY EFFECTS (overly animation on images)
---------------------------------------------------------------*/
.dez-img-overlay1,
.dez-img-overlay2,
.dez-img-overlay3,
.dez-img-overlay4,
.dez-img-overlay5,
.dez-img-overlay6,
.dez-img-overlay7,
.dez-img-overlay8,
.dez-img-overlay9,
.dez-img-overlay11
{
position: relative;
}
.dez-img-overlay1:before,
.dez-img-overlay1:after,
.dez-img-overlay2:before,
.dez-img-overlay2:after,
.dez-img-overlay3:before,
.dez-img-overlay3:after,
.dez-img-overlay4:before,
.dez-img-overlay4:after,
.dez-img-overlay5:before,
.dez-img-overlay5:after,
.dez-img-overlay6:before,
.dez-img-overlay6:after,
.dez-img-overlay7:before,
.dez-img-overlay7:after,
.dez-img-overlay8:before,
.dez-img-overlay8:after,
.dez-img-overlay9:before,
.dez-img-overlay9:after,
.dez-img-overlay11:before,
.dez-img-overlay11:after {
content: "";
background: #000;
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
opacity: 0.4;
z-index: 1;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
/*effect 1*/
.dez-img-overlay1:before {
width: 100%;
height: 100%;
opacity: 0;
}
.dez-img-overlay1:hover:before,
.dez-box:hover .dez-img-overlay1:before {
opacity: 0.5;
}
/*effect 2*/
.dez-img-overlay2:before {
width: 100%;
height: 100%;
opacity: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
/* IE6-9 */
}
.dez-img-overlay2:hover:before,
.dez-box:hover .dez-img-overlay2:before {
opacity: 0.9;
}
/*effect 3*/
.dez-img-overlay3:before {
left: 50%;
top: 50%;
}
.dez-img-overlay3:hover:before,
.dez-box:hover .dez-img-overlay3:before {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/*effect 4*/
.dez-img-overlay4:before {
left: 50%;
top: 0;
height: 100%;
}
.dez-img-overlay4:hover:before,
.dez-box:hover .dez-img-overlay4:before {
width: 100%;
left: 0;
}
/*effect 5*/
.dez-img-overlay5:before {
left: 0;
top: 50%;
width: 100%;
}
.dez-img-overlay5:hover:before,
.dez-box:hover .dez-img-overlay5:before {
height: 100%;
top: 0;
}
/*effect 6*/
.dez-img-overlay6:before {
left: 0;
top: auto;
bottom: 0;
width: 100%;
}
.dez-img-overlay6:hover:before,
.dez-box:hover .dez-img-overlay6:before {
height: 100%;
}
/*effect 7*/
.dez-img-overlay7:before,
.dez-img-overlay7:after {
height: 100%;
}
.dez-img-overlay7:after {
left: auto;
right: 0;
}
.dez-img-overlay7:hover:before,
.dez-img-overlay7:hover:after,
.dez-box:hover .dez-img-overlay7:before,
.dez-box:hover .dez-img-overlay7:after {
width: 50%;
}
/*effect 8*/
.dez-img-overlay8:before,
.dez-img-overlay8:after {
height: 100%;
}
.dez-img-overlay8:after {
left: auto;
right: 0;
}
.dez-img-overlay8:hover:before,
.dez-img-overlay8:hover:after,
.dez-box:hover .dez-img-overlay8:before,
.dez-box:hover .dez-img-overlay8:after {
width: 100%;
opacity: 0.3;
}
/*effect 9*/
.dez-img-overlay9:before,
.dez-img-overlay9:after {} .dez-img-overlay9:after {
left: auto;
right: 0;
top: auto;
bottom: 0;
}
.dez-img-overlay9:hover:before,
.dez-img-overlay9:hover:after,
.dez-box:hover .dez-img-overlay9:before,
.dez-box:hover .dez-img-overlay9:after {
width: 100%;
height: 100%;
opacity: 0.3;
}
/*effect 10*/
.dez-img-overlay10:before,
.dez-img-overlay10:after {
width: 100%;
height: 100%;
opacity: 0;
}
.dez-img-overlay10:hover:before,
.dez-box:hover .dez-img-overlay10:before {
opacity: 0.5;
}
.dez-img-overlay10:hover:after,
.dez-box:hover .dez-img-overlay10:after {
width: 90%;
height: 80%;
left: 5%;
top: 10%;
opacity: 0.5;
background: none;
border: 1px dashed #FFFFFF;
}
.dez-img-overlay11:after {} .dez-img-overlay11:hover:after,
.dez-box:hover .dez-img-overlay11:after {
height: 95%;
opacity: 1;
right: 7.5%;
top: 2.5%;
-moz-transform: skewY(0deg);
-webkit-transform: skewY(0deg);
-o-transform: skewY(0deg);
-ms-transform: skewY(0deg);
transform: skewY(0deg);
width: 85%;
}
.dez-img-overlay11:hover:before,
.dez-box:hover .dez-img-overlay11:before {
height: 85%;
left: 2.5%;
opacity: 1;
top: 7.5%;
-moz-transform: skewY(0deg);
-webkit-transform: skewY(0deg);
-o-transform: skewY(0deg);
-ms-transform: skewY(0deg);
transform: skewY(0deg);
width: 95%;
}
.dez-img-overlay11:after {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
bottom: 5%;
height: 80%;
left: auto;
right: 5%;
top: auto;
-moz-transform: skewY(70deg);
-webkit-transform: skewY(70deg);
-o-transform: skewY(70deg);
-ms-transform: skewY(70deg);
transform: skewY(70deg);
width: 90%;
}
.dez-img-overlay11:before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
bottom: auto;
height: 90%;
left: 5%;
right: auto;
top: 5%;
-moz-transform: skewX(-70deg);
-webkit-transform: skewX(-70deg);
-o-transform: skewX(-70deg);
-ms-transform: skewX(-70deg);
transform: skewX(-70deg);
width: 80%;
}
.dez-img-overlay11 {
background-color: #000 !important;
}
.dez-img-overlay11:hover img {
opacity: 0.7 !important
}
/*---------------------------------------------------------------
10. IMAGES EFFECTS (image animation in images)
1. image-opacity
2. image-zoom
3. image-zoom-slow
5. image-shrink
6. image-side-pan
7. image-vertical-pan
8. image-fade-in
9. image-fade-out
10. image-rotate
11. image-sepia
11. image-blurr
12. image-blurr-invert
13. image off color
14. image on color
---------------------------------------------------------------*/
.dez-img-effect {
position: relative;
overflow: hidden;
display: block;
}
.dez-img-effect img {
display: block;
margin: 0;
width: 100%;
height: auto;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
transition: all 0.25s;
-moz-transition: all 0.25s;
-webkit-transition: all 0.25s;
-o-transition: all 0.25s;
}
/* >image-opacity */
.dez-img-effect.opacity img:hover {
opacity: 0.8;
-moz-opacity: 0.8;
-webkit-opacity: 0.8;
}
/* >image-zoom */
.dez-img-effect.zoom-slow img {
transition: all 3s;
-moz-transition: all 3s;
-webkit-transition: all 3s;
-o-transition: all 3s;
}
.dez-img-effect.zoom-slow:hover img {
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
/* >image-zoom-slow */
.dez-img-effect.zoom:hover img {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
/* >image-shrink */
.dez-img-effect.shrink:hover img {
transform: scale(0.8);
-ms-transform: scale(0.8);
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
-moz-transform: scale(0.8);
}
/* >image-side-pan */
.dez-img-effect.side-pan:hover img {
margin-left: -11%;
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
}
/* >image-vertical-pan */
.dez-img-effect.vertical-pan:hover img {
margin-top: -10%;
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
}
/* >image-fade-in */
.dez-img-effect.fade-in {
background: #000
}
.dez-img-effect.fade-in img {
opacity: 0.65;
-moz-opacity: 0.65;
-webkit-opacity: 0.65;
}
.dez-img-effect.fade-in:hover img {
opacity: 1;
-moz-opacity: 1;
-webkit-opacity: 1;
}
/* >image-fade-out */
.dez-img-effect.fade-out {
background: #000
}
.dez-img-effect.fade-out:hover img {
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
}
/* >image-rotate */
.dez-img-effect.rotate:hover img {
-moz-transform: scale(1.5) rotate(-20deg);
-webkit-transform: scale(1.5) rotate(-20deg);
-o-transform: scale(1.5) rotate(-20deg);
-ms-transform: scale(1.5) rotate(-20deg);
transform: scale(1.5) rotate(-20deg);
}
/* >image-sepia */
.dez-img-effect.sepia img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.algo-image-hover.sepia:hover img {
-webkit-filter: sepia(0);
filter: sepia(0);
}
/* >image-blurr */
.dez-img-effect.blurr img {
transition: all 0.2s;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
}
.dez-img-effect.blurr:hover img {
filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
}
/* >image-blurr-invert */
.dez-img-effect.blurr-invert img {
transition: all 0.2s;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
}
.dez-img-effect.blurr-invert img {
filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
}
.dez-img-effect.blurr-invert:hover img {
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
/* >image off color */
.dez-img-effect.off-color img {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
}
.dez-img-effect.off-color:hover img {
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
}
/* >image on color */
.dez-img-effect.on-color img {
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
}
.dez-img-effect.on-color:hover img {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
}
/*---------------------------------------------------------------
11. CONTENT SHOW ON IMAGE BOX
---------------------------------------------------------------*/
/* info box show */
.dez-info-has {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
padding: 30px 40px 40px;
opacity: 0;
margin-bottom: -100px;
z-index: 2;
}
.dez-info-has.p-a15 {
padding: 15px;
}
.dez-info-has.p-a20 {
padding: 20px;
}
.dez-info-has.bg-primary {
background-color: rgba(27, 188, 232, 0.9);
}
.dez-info-has.bg-green {
background-color: rgba(106, 179, 62, 0.9);
}
.dez-info-has.bg-black {
background-color: rgba(0, 0, 0, 0.6);
}
.dez-info-has.bg-white {
background-color: rgba(255, 255, 255, 0.8);
}
.dez-info-has.bg-white h1,
.dez-info-has.bg-white h2,
.dez-info-has.bg-white h3,
.dez-info-has.bg-white h4,
.dez-info-has.bg-white h5,
.dez-info-has.bg-white h6 {
color: #3d474a;
}
.dez-info-has.bg-white h1 a,
.dez-info-has.bg-white h2 a,
.dez-info-has.bg-white h3 a,
.dez-info-has.bg-white h4 a,
.dez-info-has.bg-white h5 a,
.dez-info-has.bg-white h6 a {
color: #3d474a;
}
.dez-info-has.bg-white .dez-info-has-text,
.dez-info-has.bg-white p {
color: #767676;
}
.dez-info-has h1,
.dez-info-has h2,
.dez-info-has h3,
.dez-info-has h4,
.dez-info-has h5,
.dez-info-has h6,
.dez-info-has p,
.dez-info-has-text,
.dez-info-has a {
color: #fff;
}
.dez-info-has .dez-info-has-text {
margin-bottom: 20px;
line-height: 24px;
}
.dez-media {
overflow: hidden;
position: relative;
}
.dez-box:hover .dez-info-has,
.dez-media:hover .dez-info-has {
opacity: 1;
width: 100%;
margin-bottom: 0;
}
/* without hover */
.dez-info-has.no-hover {
opacity: 1;
width: 100%;
margin-bottom: 0;
}
/* Skew */
.dez-info-has.skew-has {
border-top: 4px solid #2D3239;
padding: 30px 40px 60px;
-moz-transform: skewY(10deg);
-webkit-transform: skewY(10deg);
-o-transform: skewY(10deg);
-ms-transform: skewY(10deg);
transform: skewY(10deg);
bottom: -35px;
}
.dez-info-has.skew-has > * {
-moz-transform: skewY(-10deg);
-webkit-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
transform: skewY(-10deg);
}
/*---------------------------------------------------------------
12. FORM ELEMENTS
---------------------------------------------------------------*/
label {
font-weight: 600;
margin-bottom: 10px;
}
.panel-default,
.panel-default > .panel-heading {
border-color: #e7ecf1;
color: inherit;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #e7ecf1;
}
.form-group {
margin-bottom: 5px;
}
.form-control {
border-color: #e1e6eb;
box-shadow: none;
height: 40px;
font-size: 13px;
line-height: 20px;
padding: 9px 12px;
}
.form-control:focus {
border-color: #e1e1e1;
outline: 0;
}
.form-control:focus,
.has-error .form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
.form-control.kv-fileinput-caption {
height: 39px;
}
.form-group.form-inline .radio,
.form-group.form-inline .checkbox {
margin-right: 15px;
}
/*input group*/
.input-group {
width: 100%;
}
.input-group .form-control,
.input-group-addon,
.input-group-btn {
display: table-cell;
}
.input-group-addon {
background: #fff;
border-color: #e1e1e1;
padding: 6px 14px;
font-size: 16px;
}
.input-group-addon.font-size-20 {
font-size: 20px;
}
.input-group-addon.fixed-w {
text-align: center;
padding: 6px 0;
width: 40px;
}
.input-group-addon.v-align-t {
line-height: 30px;
}
/*select box*/
.dropdown-menu {
font-size: 13px;
}
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
width: 100%;
}
.bootstrap-select .dropdown-toggle {
border: 1px solid #e7ecf1 !important;
background-color: #fff !important;
height: 40px;
font-size: 13px;
color: #999;
}
.bootstrap-select .dropdown-toggle:after {
display: none;
}
.bootstrap-select .dropdown-toggle:active,
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select .dropdown-toggle:hover {
background-color: #fff !important;
border: 1px solid #e9e9e9 !important;
box-shadow: none !important;
outline: 0px !important;
}
.bootstrap-select:active,
.bootstrap-select:focus {
border: 0px !important;
box-shadow: none !important;
outline: 0px !important;
}
.bootstrap-select.show {
box-shadow: none !important;
outline: 0px !important;
}
.bootstrap-select.show .dropdown-toggle {
box-shadow: none !important;
outline: 0px !important;
}
.bootstrap-select.show.btn-group .dropdown-menu.inner{
display:block;
}
.bootstrap-select div.dropdown-menu {
border: 1px solid #e9e9e9;
border-radius: 0;
box-shadow: none;
margin-top: -1px;
padding: 0;
font-size: 13px;
}
.bootstrap-select div.dropdown-menu ul li {
padding: 0;
}
.bootstrap-select div.dropdown-menu ul li a {
padding: 5px 15px;
}
.bootstrap-select div.dropdown-menu ul li a img {
border-radius: 100%;
-webkit-border-radius: 100%;
margin-right: 5px;
}
.bootstrap-select .bs-searchbox .form-control {
padding: 5px 10px;
height: 30px;
}
.bootstrap-select .dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.bootstrap-select .dropdown-menu > li > a:hover {
background-color:#f2f2f4;
}
/*radio & checkbox*/
input[type=checkbox],
input[type=radio] {
display: block;
/* opacity: 0; */
margin-left: 1px !important;
}
input[type=checkbox] + label,
input[type=radio] + label {
display: block;
padding-left: 20px !important;
position: relative;
}
input[type=checkbox] + label:hover:before,
input[type=radio] + label:hover:before {
border-color: #3396d1;
}
input[type=checkbox] + label:before,
input[type=radio] + label:before {
background-color: #fff;
border: 2px solid #b6b7b8;
border-radius: 0px;
content: "";
display: inline-block;
height: 16px;
line-height: 1;
margin-left: -20px;
position: absolute;
top: 2px;
transition: all linear 0.1s;
width: 16px;
}
input[type=checkbox] + label:after {
color: #fff;
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: 600;
font-size: 0px;
-webkit-font-smoothing: antialiased;
left: 6px;
position: absolute;
top: 7px;
transition: all linear 0.1s;
}
input[type=checkbox]:checked + label:before {
border-width: 8px;
border-color:var(--color-primary);
}
input[type=checkbox]:checked + label:after {
font-size: 10px;
left: 4px;
top: 3px;
}
input[type=radio] + label:before {
border-radius: 50%;
content: "";
}
input[type=radio]:checked + label:before {
border-color: #3396d1;
border-width: 5px;
}
.form-inline .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"] {
position: absolute;
left: 0;
bottom: 0;
}
/*touchspin input type number*/
.bootstrap-touchspin .input-group-btn-vertical {
position: relative;
white-space: nowrap;
width: unset;
vertical-align: middle;
display: table-cell;
}
.bootstrap-touchspin .input-group-btn-vertical > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
padding: 10px 10px 9px;
margin-left: -1px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: #e1e1e1;
background: #FFF;
}
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
border-radius: 0;
border-top-right-radius: 0;
}
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
margin-top: -2px;
border-radius: 0;
border-bottom-right-radius: 0;
}
.bootstrap-touchspin .input-group-btn-vertical i {
position: absolute;
top: 4px;
left: 5px;
font-size: 9px;
font-weight: normal;
color: #9fa0a1;
}
/*rating star*/
.input-rating input[type=radio] {
display: none;
}
.input-rating input[type=radio] + label {
display: inline-block;
margin-left: -4px;
padding-left: 0px !important;
padding-right: 0px;
width: 24px;
}
.input-rating input[type=radio] + label:first-of-type {
margin-left: 0px;
}
.input-rating input[type=radio] + label:before {
background-color: transparent;
border: none;
color: #ffd925;
content: "\f006";
display: inline-block;
font-family: 'Font Awesome 5 Free';
font-weight: 600;
font-size: 20px;
-webkit-font-smoothing: antialiased;
height: 14px;
line-height: 1;
margin-left: 0px;
position: static;
text-align: center;
top: 2px;
transition: none;
width: 14px;
}
.input-rating input[type=radio]:checked + label:before,
.input-rating input[type=radio] + label.marked:before,
.input-rating input[type=radio] + label.filled:before,
.input-rating input[type=radio] + label.hovered.filled:before {
content: "\f005";
}
.input-rating input[type=radio] + label.hovered:before {
content: "\f006";
}
/*simple rating list*/
.rating-bx {
color: #ffd925;
font-size: 14px;
}
.rating-bx i {
margin: 0 2px;
}
.rating-container .rating-stars::before {
text-shadow: none;
}
.rating-container {
color: #c8c8c8;
}
.rating-container .rating-stars {
color: #3396d1;
}
/*validation symbol*/
.has-feedback label ~ .form-control-feedback {
top: 31px;
}
/*loading*/
#loading-area {
width: 100%;
height: 100%;
background-color: #f6fcff;
position: fixed;
left: 0;
top: 0;
opacity: 1;
z-index: 999999;
background-image: url(../images/loading.html);
background-repeat: no-repeat;
background-size: 150px;
background-position: center;
}
/*loading - 2*/
.loading-cover,
.loading-srh-bar,
.loading-map {
background: rgba(255, 255, 255, 0.8);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.loading-cover .fa-spinner,
.loading-srh-bar .fa-spinner,
.loading-map .fa-spinner {
position: absolute;
left: 50%;
top: 50%;
margin: -10px;
font-size: 25px;
color: #333;
}
.dez-banner-outer {
margin-bottom: 0;
}
.dez-success-top,
.dez-error-top {
margin-bottom: 0;
}
.alert-bx.alert-info {
padding: 15px;
border: 1px solid #bce8f1;
}
/*---------------------------------------------------------------
13. WP DEFAULT
---------------------------------------------------------------*/
.alignnone {
margin: 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 15px;
}
.alignright {
float: right;
margin: 5px 0 15px 25px;
}
.alignleft {
float: left;
margin: 5px 25px 5px 0;
}
@media only screen and (max-width: 1024px) {
.alignleft {
margin: 5px 20px 0 0;
}
}
@media only screen and (max-width: 480px) {
.alignleft {
margin: 5px 16px 0 0;
}
}
a img.alignright {
float: right;
margin: 5px 0 25px 25px;
}
a img.alignnone {
margin: 5px 0 25px 0;
}
a img.alignleft {
float: left;
margin: 5px 25px 25px 0;
}
a img.aligncenter {
display: block;
margin: 5px auto 15px;
}
.wp-caption {
max-width: 100%;
text-align: center;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin: 0;
}
.wp-caption.alignnone {
margin: 5px 0 25px 0;
}
.wp-caption.alignleft {
margin: 5px 25px 25px 0;
}
.wp-caption.alignright {
margin: 5px 0 25px 25px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 100%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
color: #9d9d9d;
font-size: 13px;
line-height: 18px;
margin: 0;
padding: 10px 0;
text-align: left;
}
blockquote {
padding: 16px 20px 16px 80px;
font-size: 18px;
font-style: italic;
color: #555555;
margin: 40px 0;
border-left: none;
line-height: 30px;
position: relative;
background: #f6f6f6;
clear: both;
border-left: 4px solid #EFBB20;
}
@media only screen and (max-width: 480px) {
blockquote {
padding: 10px 14px 10px 45px;
font-size: 14px;
line-height: 22px;
}
}
blockquote p {
font-size: 18px;
color: #555555;
line-height: 30px;
margin-bottom: 0px;
}
blockquote:before {
content: '\f10d';
font-family: "Font Awesome 5 Free";
font-weight: 600;
color: #EFBB20;
font-size: 35px;
position: absolute;
left: 20px;
top: 20px;
font-style: normal;
}
@media only screen and (max-width: 480px) {
blockquote:before {
font-size: 25px;
left: 10px;
top: 10px;
}
}
.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
max-width: 100%;
height: auto;
}
/*---------------------------------------------------------------
14. HEADER (top part of page)
---------------------------------------------------------------*/
.site-header {
position: relative;
z-index: 99999;
}
.site-header ul,
.site-header ol {
margin-bottom: 0;
}
/*without top bar*/
.extra-nav {
float: right;
padding:25px 0 15px 0;
position: relative;
z-index: 9;
}
.extra-nav .site-button-link {
font-size: 22px;
line-height: 25px;
color: #020d26;
cursor: pointer;
}
.extra-nav .extra-cell {
display: inline-block;
margin-left: 10px;
}
.ext-header .main-bar .logo-header{
display:none;
}
@media only screen and (max-width: 991px) {
.ext-header .main-bar .logo-header{
display:table;
}
}
@media only screen and (max-width: 767px) {
.extra-nav {
margin-right: 15px;
}
}
@media only screen and (max-width: 480px) {
.extra-nav {
margin: 0 1px 0 0;
text-align: right;
}
}
/* map page header*/
#header-part.fix-map-header {
height: 90px;
}
#header-part.fix-map-header .main-bar {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
@media only screen and (max-width: 480px) {
#header-part.fix-map-header {
height: 160px;
}
}
/*---------------------------------------------------------------
15. PAGE TOP BAR (left & right content)
---------------------------------------------------------------*/
.top-bar {
background-color: #ffffff;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
color: #444444;
padding: 10px 0px;
}
.dez-topbar-left {
float: left;
}
.dez-topbar-right {
float: right;
}
.dez-topbar-center,
.dez-topbar-left,
.dez-topbar-right {
padding-left: 15px;
padding-right: 15px;
width:auto;
}
.dez-topbar-left ul,
.dez-topbar-right ul{
list-style:none;
margin:0;
padding:0;
}
.dez-topbar-left ul li,
.dez-topbar-right ul li{
display:inline-block;
}
.dez-topbar-left ul li{
padding-right:15px;
position:relative;
}
.dez-topbar-left ul li:after{
content: "";
height: 15px;
width: 1px;
background: #000;
position: absolute;
right: 5px;
opacity: 0.2;
top: 4px;
}
.dez-topbar-left ul li:last-child:after{
content:none;
}
.dez-topbar-left ul li a,
.dez-topbar-right ul li a{
color:#444444;
}
.text-white .dez-topbar-left ul li a,
.text-white .dez-topbar-right ul li a{
color:#fff;
}
.dez-topbar-left ul li a{
position:relative;
}
.topbar-social li a{
padding: 0 6px;
}
@media only screen and (max-width: 991px) {
.dez-topbar-right {
padding-left: 0;
padding-right: 15px;
}
.dez-topbar-left{
padding-left: 15px;
padding-right: 0;
}
}
@media only screen and (max-width: 767px) {
.top-bar [class*="col-"] {
width: 100%;
text-align: right;
padding: 10px 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.top-bar [class*="col-"]:last-child {
border-bottom: none;
}
.top-bar {
padding: 5px 0;
display: none;
}
.dez-topbar-center,
.dez-topbar-left,
.dez-topbar-right {
display:black;
width:100%;
text-align:center;
padding:3px 15px;
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
}
.dez-topbar-left ul li{
padding:0 5px;
}
.dez-topbar-left ul li:after{
right: -2px;
}
}
/* Header Middle */
.middle-bar{
border-bottom:1px solid rgba(0,0,0,0.1);
padding: 20px 0;
}
.middle-area{
display: flex;
justify-content: space-between;
align-items: center;
}
.middle-bar .logo-header,
.middle-bar .logo-header img{
width: 200px;
max-width: 200px;
}
.service-list ul{
margin:0;
padding:0;
list-style:none;
}
.service-list ul li{
display: inline-block;
position: relative;
padding: 0 0 0 55px;
margin-left: 15px;
}
.service-list ul li i{
position: absolute;
left: 10px;
font-size: 38px;
line-height: 38px;
color: var(--color-primary);
font-weight: 100;
top: 2px;
transition:all 0.8s;
-moz-transition:all 0.8s;
-webkit-transition:all 0.8s;
-ms-transition:all 0.8s;
-o-transition:all 0.8s;
}
.service-list ul li:hover i{
transform:scale(1.2);
}
.service-list ul li .title{
font-size: 18px;
font-weight: 500;
margin-bottom: 5px;
line-height: 24px;
}
.service-list ul li span{
font-size: 14px;
color: #999999;
}
/*=== >eamil-phone (left) ===*/
.e-p-bx li {
display: inline;
font-size: 14px;
padding-right: 10px;
}
.e-p-bx li a {
color: #FFF;
}
.e-p-bx li i {
margin-right: 10px;
vertical-align: middle;
}
/*=== >social-links (right) ===*/
.social-bx,
.login-bx {
margin: 0 0 0 15px;
float: right;
}
.social-bx li,
.login-bx li {
font-size: 12px;
margin: 0;
position: relative;
}
.social-bx li {
padding-left: 1px;
padding-right: 1px;
}
.social-bx li a,
.login-bx li a {
color: #ffffff;
}
.social-bx li i,
.login-bx li i {
vertical-align: baseline;
margin: 0 5px 0 0;
}
.social-bx li span,
.login-bx li span {
vertical-align: baseline;
margin: 0 2px 0;
font-size: 8px;
}
.login-bx li ul {
top: 25px;
left: auto;
right: 0;
border: none;
padding: 0;
}
.login-bx li ul li {
border-bottom: 1px solid #F7F7F7;
}
.login-bx li ul li a {
color: #767676;
padding: 9px 15px;
}
.arrow-up-border:before,
.arrow-up:after {
position: absolute;
display: inline-block;
content: '';
}
.arrow-up-border:before {
top: -7px;
right: 19px;
border-right: 7px solid transparent;
border-bottom: 7px solid #F00;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
}
.arrow-up:after {
top: -6px;
right: 20px;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
}
.arrow-left:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.arrow-left:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
/*=== >language-list () ===*/
.language-bx li {
display: inline;
margin: 0 10px;
}
/*---------------------------------------------------------------
16. LOGO ( company identify symbol )
---------------------------------------------------------------*/
/*=== >logo for header ===*/
.logo-header {
display: table;
float: left;
vertical-align: middle;
padding: 0;
color: #EFBB20;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
width: 180px;
height: 74px;
position: relative;
z-index: 9;
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
}
.logo-footer {
display: table;
vertical-align: middle;
padding: 0;
color: #EFBB20;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 0;
margin-right: 0;
max-width: 100%;
height: auto;
}
.logo-header > a,
.logo-footer > a{
display: table-cell;
vertical-align: middle;
}
.logo-header.center-block {
margin-left: auto;
margin-right: auto;
float: none;
}
.logo-header img,
.logo-footer img {
height: auto;
width: auto;
max-width: 180px;
}
.logo-header span,
.logo-footer span {
font-size: 20px;
color: #EFBB20;
letter-spacing: 20px;
}
/*= When header is sticky =*/
.is-fixed .logo-header,
.is-fixed.header-curve .logo-header {
transition:all 0.5s;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
}
/*= Set width for mobile =*/
@media only screen and (max-width: 1200px) {
.header-curve .extra-nav{
padding: 20px 0 20px 0;
}
.extra-nav {
float: right;
padding: 22px 0 15px 0;
}
}
@media only screen and (max-width: 991px) {
.header-curve .navbar-toggler{
margin: 24px 0 18px 15px;
}
}
@media only screen and (max-width: 767px) {
.logo-header,
.is-fixed.header-curve .logo-header,
.is-fixed .logo-header,
.is-fixed.header-curve .logo-header{
width: 135px;
max-width: 135px;
height:50px;
}
.logo-header img,
.logo-footer img {
max-width: 135px;
}
.is-fixed .logo-header a img,
.is-fixed.header-curve .logo-header a img {
vertical-align: sub;
}
.is-fixed .header-nav .logo-header a img,
.is-fixed.header-curve .header-nav .logo-header a img {
vertical-align: middle;
}
.site-header .navbar-toggler,
.site-header .is-fixed .navbar-toggler{
margin:18px 0 14px 15px;
}
.site-header .extra-nav,
.site-header .is-fixed .extra-nav{
padding: 15px 0 0 0;
}
}
/*---------------------------------------------------------------
17. MAIN BAR ( place logo & main-navigation )
---------------------------------------------------------------*/
.main-bar {
background: #FFFFFF;
width: 100%;
position: relative;
}
.header-curve .logo-header:before,
.header-curve .logo-header:after {
background-color: #fff;
content: "";
position: absolute;
bottom: 0;
height: 100%;
z-index: -1;
}
.header-curve .logo-header:before {
right: -50px;
width: 80%;
-webkit-transform: skew( 30deg);
-moz-transform: skew( 30deg);
-o-transform: skew( 30deg);
-ms-transform: skew( 30deg);
transform: skew(30deg);
}
.header-curve .logo-header:after {
right: 10%;
width: 2000px;
}
.is-fixed.header-curve .logo-header img {
margin-top: -0;
}
.header-curve .site-button-link:hover,
.header-curve .site-button-link{
color:#fff;
}
@media only screen and (max-width: 991px) {
.header-curve .header-nav .logo-header:before,
.header-curve .header-nav .logo-header:after {
content:none;
}
}
@media only screen and (max-width: 767px) {
.header-curve .logo-header:after {
right: 0;
left: auto;
}
}
/*---------------------------------------------------------------
18. NAVIGATIONS
>mena-menu
>mobile-menu
>footer-menu
---------------------------------------------------------------*/
/*== >mena-menu ==*/
.navbar-toggler {
border: 0 solid #efbb20;
font-size: 16px;
line-height: 24px;
margin: 28px 0 18px 15px;
padding: 0;
float: right;
}
.navbar-toggler span {
background: #666;
}
.site-header .main-bar .container{
position: relative;
}
.header-nav {
padding: 0;
}
.header-nav .nav {
float: right;
}
.header-nav .nav i {
font-size: 9px;
margin-left: 3px;
margin-top: -3px;
vertical-align: middle;
}
.header-nav .nav > li {
margin: 0px;
font-weight: 400;
position: relative;
}
.header-nav .nav > li > a {
border-radius: 0px;
color: #020d26;
font-size: 16px;
padding:25px 12px 25px 12px;
cursor: pointer;
font-weight: 600;
display: inline-block;
position: relative;
}
.header-nav .nav > li > a.nav-link{
padding-left:12px;
padding-right:12px;
}
.header-nav .nav > li > a:hover {
background-color: transparent;
color: #efbb20;
}
.header-nav .nav > li > a:active,
.header-nav .nav > li > a:focus {
background-color: transparent;
}
.header-nav .nav > li.active > a,
.header-nav .nav > li.current-menu-item > a {
background-color: transparent;
color: #EFBB20;
}
.header-nav .nav > li.active > a:after{
content: "";
height: 5px;
background: var(--color-primary);
width: calc(100% + 2px);
position: absolute;
bottom: 0;
left: -1px;
}
.main-bar.bg-primary .header-nav .nav > li > a:after,
.main-bar.bg-primary .header-nav .nav > li.active > a:after{
background:#fff;
}
.header-nav .nav > li > a:after{
content: "";
height: 5px;
background: var(--color-primary);
width: 0;
position: absolute;
bottom: 0;
right: -1px;
transition:all 0.8s;
-moz-transition:all 0.8s;
-webkit-transition:all 0.8s;
-ms-transition:all 0.8s;
-o-transition:all 0.8s;
}
.header-nav .nav > li:hover > a:after{
width: 100%;
transform-origin:right;
-moz-transform-origin:right;
-webkit-transform-origin:right;
-ms-transform-origin:right;
-o-transform-origin:right;
right:auto;
left:0;
}
.header-nav .nav > li:hover > .sub-menu,
.header-nav .nav > li:hover > .mega-menu {
opacity: 1;
visibility: visible;
margin-top: 0;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.header-nav .nav > li > .sub-menu,
.header-nav .nav > li > .mega-menu {
box-shadow:0px 1px 40px 0px rgba(0, 0, 0, 0.1);
}
.header-nav .nav > li .sub-menu,
.header-nav .nav > li .mega-menu {
border-radius: 2px;
}
.header-nav .nav > li .sub-menu {
background-color: #ffffff;
display: block;
left: 0;
list-style: none;
opacity: 0;
padding: 5px 0;
position: absolute;
visibility: hidden;
width: 220px;
z-index: 10;
}
.header-nav .nav > li .sub-menu li {
border-bottom: 0px solid #f4f4f4;
position: relative;
}
.header-nav .nav > li .sub-menu li a {
color: #000;
display: block;
font-size: 15px;
padding:10px 25px;
text-transform: capitalize;
transition: all 0.15s linear;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
font-weight: 400;
}
.header-nav .nav > li .mega-menu > li ul a:hover,
.header-nav .nav > li .sub-menu li:hover > a{
background-color: #F2F2F2;
text-decoration: none;
}
.header-nav .nav > li .sub-menu li:hover > a {
color: #EFBB20;
}
.header-nav .nav > li .sub-menu li:last-child {
border-bottom: 0px;
}
.header-nav .nav > li .sub-menu.left,
.header-nav .nav > li:hover .sub-menu.left{
left: auto;
right: 0;
}
.header-nav .nav > li .sub-menu li > .sub-menu.left,
.header-nav .nav > li .sub-menu li:hover .sub-menu.left {
left: auto;
right: 220px;
}
.header-nav .nav > li .sub-menu li .fa {
color: inherit;
display: block;
float: right;
font-size: 16px;
opacity: 1;
}
.header-nav .nav > li .sub-menu li .fa.fa-nav {
color: inherit;
display: inline-block;
float: none;
font-size: 13px;
margin-right: 5px;
opacity: 1;
position: unset;
right: 10px;
top: 12px;
}
.header-nav .nav > li .sub-menu li .fas {
display: block;
float: right;
font-size: 13px;
position: absolute;
right: 15px;
top: 15px;
opacity: 1;
}
.header-nav .nav > li .sub-menu li .fas .fa-chevron-down {
color: inherit;
display: inline-block;
float: none;
font-size: 13px;
margin-right: 5px;
opacity: 1;
position: unset;
right: 10px;
top: 12px;
}
@media only screen and (max-width: 991px) {
.header-nav .nav > li .sub-menu li .fas {
font-size: 16px;
right: 0px;
top: 0px;
}
}
.header-nav .nav > li .sub-menu li > .sub-menu {
left: 220px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header-nav .nav > li .sub-menu li:hover > .sub-menu {
left: 220px;
margin: 0px;
opacity: 1;
top: -1px;
visibility: visible;
}
.header-nav .nav > li .sub-menu li:hover > .sub-menu:before {
background-color: transparent;
bottom: 0px;
content: '';
display: block;
height: 100%;
left: -6px;
position: absolute;
top: 0px;
width: 6px;
}
.header-nav .nav > li.has-mega-menu {
position: inherit;
}
.header-nav .nav > li .mega-menu {
background-color: #ffffff;
border: 1px solid #f8f8f8;
display: table;
left: 0px;
list-style: none;
opacity: 0;
position: absolute;
right: 0px;
visibility: hidden;
width: 100%;
margin-top: 20px;
z-index: 9;
}
.header-nav .nav > li .mega-menu > li {
display: table-cell;
padding: 30px 0 25px;
position: relative;
vertical-align: top;
width: 20%;
}
.header-nav .nav > li .mega-menu > li:after {
content: "";
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
right: 0px;
top: 0px;
display: block;
width: 1px;
height: 100%;
}
.header-nav .nav > li .mega-menu > li:last-child:after {
display: none;
}
.header-nav .nav > li .mega-menu > li > a {
color: #000;
display: block;
padding: 0 20px;
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid rgba(0,0,0,0.1);
padding-bottom: 15px;
}
.header-nav .nav > li .mega-menu > li ul {
list-style: none;
margin: 10px 0px 0px 0px;
padding: 0px;
width: 100%;
}
.header-nav .nav > li .mega-menu > li ul a {
color: #000;
display: block;
font-size: 15px;
text-transform: capitalize;
padding: 10px 25px;
font-weight: 400;
}
.header-nav .nav > li .mega-menu > li ul a:hover {
color: #EFBB20;
}
.header-nav .nav .mega-menu a i {
font-size: 14px;
margin-right: 5px;
text-align: center;
width: 15px;
}
.header-nav .nav > li.menu-item-has-children:before {
content: "\f078";
display: block;
font-family: "Font Awesome 5 Free";
right: 4px;
font-weight: 600;
position: absolute;
top: 50%;
color: #999;
margin-top: -8px;
font-size: 8px;
}
/* Header Center */
.site-header.center .header-nav .nav {
display: inline-block;
float: left;
width: 40%;
}
.site-header.center .navbar-nav > li{
display: inline-block;
float: none;
}
.site-header.center .header-nav .nav:first-child {
text-align:right;
}
.site-header.center .header-nav .nav:first-child li{
text-align:left;
}
.site-header.center .header-nav .nav:last-child {
float:right;
}
.site-header.center .logo-header{
position: absolute;
transform: translate(-50%);
-moz-transform: translate(-50%);
-webkit-transform: translate(-50%);
-o-transform: translate(-50%);
position:absolute;
left: 50%;
text-align:center;
}
.site-header.center .logo-header img{
height: 100px;
margin-bottom: -50px;
position: relative;
width: 100px;
z-index: 2;
object-fit: contain;
}
.site-header.center .logo-header:after{
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
content: "";
height: 100px;
position: absolute;
width: 140%;
bottom:-99px;
left: -20%;
}
@media only screen and (max-width: 1200px) {
.header-nav .nav > li > a{
padding: 22px 15px 22px 15px;
font-size: 14px;
font-weight: 500;
}
.extra-nav .site-button-link {
font-size: 22px;
line-height: 22px;
}
.logo-header img,
.logo-footer img{
width: 140px;
}
.logo-header{
width: 140px;
height: 65px;
}
.middle-bar{
display:none;
}
}
@media only screen and (max-width: 991px) {
.site-header.center .header-nav .nav{
width:100%;
float: none;
}
.site-header.center .navbar-nav > li {
display: block;
float: left;
width: 100%;
}
.header-nav .nav > li.has-mega-menu.demos .mega-menu{
max-width:100%;
}
.header-nav .nav > li .mega-menu{
border:0;
}
.site-header.center .is-fixed .header-nav .nav{
height:auto;
}
.header-nav .nav > li .mega-menu > li{
padding:10px 0;
}
.header-nav .nav > li .sub-menu,
.header-nav .nav > li .mega-menu {
border-radius:0;
}
.header-nav .nav > li:hover > a:after,
.header-nav .nav > li.active > a:after{
content:none;
}
.header-nav .nav > li .sub-menu li a,
.header-nav .nav > li .mega-menu > li ul a{
padding: 2px 0 1px 15px;
display: block;
font-size: 16px;
line-height: 30px;
position:relative;
}
.header-nav .nav > li .sub-menu li a:after,
.header-nav .nav > li .mega-menu > li ul a:after{
content: "\f105";
font-family: 'Font Awesome 5 Free';
width: auto;
height: auto;
background: transparent;
top: 1px;
color: #000;
font-size: 16px;
position: absolute;
left: 0;
font-weight: 600;
}
.header-nav .nav > li .sub-menu:after,
.header-nav .nav > li .mega-menu:after{
content:"";
}
}
@media only screen and (max-width: 767px){
.header-nav .logo-header > a{
width: 100%;
display: block;
text-align: center;
}
}
@media only screen and (max-width: 767px) {
.site-header.center .logo-header img{
height: 60px;
margin-bottom: -30px;
}
.logo-header{
height: 50px;
}
}
/* Nav Badge */
.shop-cart.navbar-right{
margin-right:0;
float:none;
display:inline-block;
}
.shop-cart .dropdown-menu.cart-list{
box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.3);
top: 35px;
border:0;
right: 0;
left: auto;
width: 300px;
border-top: 3px solid var(--color-primary);
}
.shop-cart .badge{
font-size: 9px;
height: 15px;
line-height: 15px;
min-width: 15px;
padding: 0;
position: absolute;
right: -5px;
text-align: center;
top: -5px;
border-radius: 10px;
color:#fff;
}
.shop-cart li{
padding: 10px 15px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}
.shop-cart li:last-child{
border-bottom:0;
}
.shop-cart .media-left a {
display: block;
width: 60px;
}
.shop-cart .site-button-link{
position:relative;
}
.extra-nav .site-button-link i,
.shop-cart .site-button-link i{
margin-left: 0;
}
.cart-list.dropdown-menu{
width:260px;
margin-top: 30px;
}
.is-fixed .cart-list.dropdown-menu{
margin-top: 18px;
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
.cart-list .media-object{
width:60px;
}
.cart-item .media-body{
position:relative;
padding-left: 10px;
}
.item-close {
background-color: #303030;
border-radius: 20px;
color: #ffffff;
display: block;
font-size: 9px;
height: 18px;
line-height: 18px;
margin-top: -9px;
position: absolute;
right: 0;
text-align: center;
top: 50%;
width: 18px;
cursor:pointer;
}
.item-close:hover {
background-color: #000;
}
.header-nav .nav > li.demos{
position:inherit;
}
.header-nav .nav > li.demos .mega-menu {
max-width: 700px;
width: 700px;
left:auto;
right:0;
}
.header-nav .nav > li .mega-menu > li.header-add{
padding: 18px 14px;
}
@media only screen and (max-width: 991px) {
header .logo {
display: block;
padding: 4px 0;
}
.header-nav .nav > li.demos .mega-menu.left{
width:100%;
max-width:100%;
}
}
@media only screen and (max-width: 767px) {
.shop-cart .dropdown-menu.cart-list{
left:auto;
right:0;
}
.cart-list.dropdown-menu,
.is-fixed .cart-list.dropdown-menu{
margin-top: 0;
}
}
@media only screen and (max-width: 991px) {
.header-nav {
clear: both;
margin: 0 -15px;
border-bottom: 1px solid #E9E9E9;
}
.header-nav .nav {
float: none;
margin: 0;
background: #fff;
width:100%;
display: block;
}
.header-nav .nav > li {
float: none;
display:block;
width:100%;
font-family: Roboto;
padding: 0 25px 0 25px;
}
.header-nav .nav > li .sub-menu > li,
.header-nav .nav > li .mega-menu > li {
float: none;
display: block;
width: auto;
}
.header-nav .nav > li > a {
display: block;
position: relative;
border: 0;
padding: 8px 0;
font-size: 18px;
line-height: 30px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.header-nav .nav > li .mega-menu > li:after {
display: none;
}
.header-nav .nav > li ul,
.header-nav .nav > li .sub-menu,
.header-nav .nav > li .mega-menu {
display: none;
position: static;
visibility: visible;
width: auto;
background: #f6f6f6;
box-shadow: none;
}
.header-nav .nav > li ul.mega-menu ul {
display: none;
}
.header-nav .nav > li:hover > ul,
.header-nav .nav > li:hover .sub-menu,
.header-nav .nav > li:hover .mega-menu,
.header-nav .nav > li .sub-menu li > .sub-menu {
opacity: 1;
visibility: visible;
display: block;
margin: 0;
}
.header-nav .nav > li ul.mega-menu li:hover ul {
display: block;
}
/* Mobile Responsive */
.side-nav .nav.navbar-nav li a i.fa-chevron-down:before,
.nav.navbar-nav li a i.fa-chevron-down:before {
content:"\f105";
}
.side-nav .nav.navbar-nav li.open ul li.open a i.fa-chevron-down:before,
.nav.navbar-nav li.open ul li.open a i.fa-chevron-down:before {
content:"\f105";
}
.side-nav .nav.navbar-nav li.open a i.fa-chevron-down:before,
.nav.navbar-nav li.open a i.fa-chevron-down:before {
content:"\f107";
}
.header-nav .nav > li ul,
.header-nav .nav > li .sub-menu,
.header-nav .nav > li .mega-menu{
background: transparent;
}
.header-nav .nav > li .mega-menu{
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.header-nav .nav > li > .sub-menu{
border: 1px solid rgba(0,0,0,0.1);
padding: 10px 0;
border-width:0 0 1px 0;
}
.header-nav .nav > li > .sub-menu .sub-menu li a{
padding: 2px 0 1px 30px;
}
.header-nav .nav > li > .sub-menu .sub-menu li a:hover{
background-color:rgba(0,0,0,0.1);
}
.header-nav .nav > li > .sub-menu .sub-menu li a:after{
content: "\f111";
font-family: 'Font Awesome 5 Free';
width: auto;
height: auto;
background: transparent;
top: 3px;
color: #000;
font-size: 5px;
left: 15px;
font-weight: 600;
}
.side-nav .nav.navbar-nav li a i.fa-chevron-down,
.nav.navbar-nav li a i.fa-chevron-down,
.nav.navbar-nav li a i.fa-angle-right {
background-color: var(--color-primary);
color: #ffffff;
height: 30px;
line-height: 30px;
right: 0;
text-align: center;
width: 30px;
z-index: 3;
float: right;
font-size: 20px;
margin: 0;
}
.header-nav .nav > li .sub-menu li i.fa-angle-right:before{
content: "\f105";
}
.header-nav .nav > li .sub-menu li.open i.fa-angle-right:before{
content: "\f107";
}
.header-nav .nav > li .sub-menu .sub-menu,
.header-nav .nav > li:hover .sub-menu .sub-menu,
.header-nav .nav > li:hover .sub-menu,
.header-nav .nav > li:hover .mega-menu {
display: none;
opacity: 1;
margin-top: 0;
}
.header-nav .nav li .sub-menu .sub-menu{
display: none;
opacity: 1;
margin-top: 0;
}
.header-nav .nav > li.open > .sub-menu .sub-menu{
display: none;
}
.header-nav .nav > li.open > .sub-menu li.open .sub-menu,
.header-nav .nav > li.open > .mega-menu,
.header-nav .nav > li.open > .sub-menu,
.header-nav .nav > li ul.mega-menu ul{
display: block;
opacity: 1;
margin-top: 0;
}
.header-nav .nav > li ul.mega-menu{
}
.header-nav .nav > li.open > .sub-menu li.open > a > i,
.header-nav .nav > li.open > a > i{
background:#313444;
}
.header-nav .nav > li.open .sub-menu li.open > a > i{
background:#313444;
}
/* .header-nav .nav > li .sub-menu li .fa{
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
margin: 0;
right: -1px;
color:#fff;
} */
.header-nav .nav > li .mega-menu > li{
padding:0;
}
.header-nav .nav > li .mega-menu > li > a{
display:none;
}
.header-nav .nav .mega-menu a i{
display:inline-block;
float:none;
margin-top: 0;
}
.header-nav .nav .open > a,
.header-nav .nav .open > a:focus,
.header-nav .nav .open > a:hover {
background-color: inherit;
border-color: #e9e9e9;
}
.header-nav .nav > li .mega-menu > li ul a:hover,
.header-nav .nav > li .sub-menu li:hover > a{
background-color: transparent;
text-decoration: none;
}
.header-nav.nav-dark.nav .open > a,
.header-nav.nav-dark .nav .open > a:focus,
.header-nav.nav-dark .nav .open > a:hover {
border-color: rgba(0, 0, 0, 0.2);
}
.header-nav .nav > li .sub-menu li .fa {
color: #000;
display: block;
float: right;
font-size:20px;
opacity: 1;
background:#fff;
}
}
/*= nav dark version =*/
.nav-dark.header-nav .nav > li .sub-menu,
.nav-dark.header-nav .nav > li .mega-menu {
background-color: #232323;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.nav-dark.header-nav .nav > li .sub-menu li {
border-bottom: 0px solid rgba(0, 0, 0, 0.2);
}
.nav-dark.header-nav .nav > li .sub-menu li a,
.nav-dark.header-nav .nav > li .mega-menu > li ul a {
color: rgba(255,255,255,0.6);
}
.header-nav.nav-dark .nav > li .mega-menu > li > a{
color:#fff;
border-color: rgba(255,255,255,0.1);
}
.nav-dark.header-nav .nav > li .sub-menu li a:hover {
background-color: rgba(255,255,255,0.0);
}
.nav-dark.header-nav .nav > li .sub-menu li:hover > a,
.nav-dark.header-nav .nav > li ul li a:hover,
.nav-dark.header-nav .nav > li .mega-menu > li ul a:hover {
background-color: rgba(255,255,255,0.0);
color: #fff !important;
}
.nav-dark.header-nav .nav > li .mega-menu > li:after {
background-color: rgba(255,255,255,0.1);
}
@media only screen and (max-width: 991px) {
.nav-dark.header-nav .nav > li > a{
color:#9d9d9d;
}
.nav-dark.header-nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.8);
}
.nav-dark.header-nav .nav {
background-color: #202020;
}
.nav-dark.header-nav .nav > li > a {
border-top: 0px solid rgba(0, 0, 0, 0.2);
}
[class*="bg-"] .nav-dark.header-nav .nav > li > a {
color: #999;
}
[class*="bg-"] .nav-dark.header-nav .nav > li.active > a,
[class*="bg-"] .nav-dark.header-nav .nav > li:hover > a {
color: #EFBB20;
}
.nav-dark.header-nav .nav > li ul,
.nav-dark.header-nav .nav > li .sub-menu,
.nav-dark.header-nav .nav > li .mega-menu {
background-color: transparent;
}
}
@media only screen and (min-width: 991px) {
.navstyle1 .header-nav .nav > li > a:after{
content: "";
right: 0;
left:auto;
height: 100%;
z-index: -1;
}
.navstyle2 .header-nav .nav > li > a:after{
border-radius: 40px;
background: transparent;
width: 100%;
left: 0;
z-index: -1;
height: 100%;
}
.navstyle2 .header-nav .nav > li,
.navstyle1 .header-nav .nav > li{
padding: 14px 0 0 0;
}
.navstyle2 .header-nav .nav > li > a,
.navstyle1 .header-nav .nav > li > a{
padding: 12px 15px 12px 15px;
border: 0;
position:relative;
z-index:1;
margin-bottom: 8px;
}
.navstyle2 .header-nav .nav > li.active > a:after,
.navstyle2 .header-nav .nav > li:hover > a:after{
box-shadow: inset 0 0 0 2px var(--color-primary);
left: 0;
top: 0;
}
.navstyle1 .header-nav .nav > li:hover > a{
color:#fff;
}
.navstyle1 .header-nav .nav > li:hover > a:after{
right:auto;
left:0;
}
.navstyle1 .header-nav .nav > li.active > a{
background:var(--color-primary);
color:#fff;
}
.navstyle3 .header-nav .nav > li > a{
z-index: 1;
border:0;
}
.navstyle3 .header-nav .nav > li > a:after{
z-index: -1;
}
.navstyle3 .header-nav .nav > li > a:after,
.navstyle3 .header-nav .nav > li:hover > a:after,
.navstyle3 .header-nav .nav > li.active > a:after{
height:100%;
color:#fff;
}
.navstyle3 .header-nav .nav > li:hover > a,
.navstyle3 .header-nav .nav > li.active > a{
color:#fff;
}
.navstyle3 .header-nav .nav > li > .mega-menu,
.navstyle3 .header-nav .nav > li .sub-menu {
background-color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.navstyle3 .header-nav .nav > li .mega-menu li:hover > a,
.navstyle3 .header-nav .nav > li .sub-menu li:hover > a,
.navstyle3 .header-nav .nav > li .mega-menu li > a,
.navstyle3 .header-nav .nav > li .sub-menu li > a{
color:#fff;
}
.navstyle3 .header-nav .nav > li .sub-menu > li:hover > a,
.navstyle3 .header-nav .nav > li .sub-menu > li > a:hover{
background-color:rgba(0,0,0,0.05);
}
.navstyle3 .header-nav .nav > li .mega-menu > li ul a:hover{
background-color:rgba(0,0,0,0.05);
}
.navstyle4 .header-nav .nav > li > a:after{
width: 0;
left: auto;
bottom: 20px;
z-index: -1;
height: 16px;
opacity: 0.2;
right: 15px;
}
.navstyle4 .header-nav .nav > li:hover > a:after{
width: calc(100% - 30px);
left: 15px;
right: auto;
}
.navstyle4 .header-nav .nav > li.active > a:after{
width: calc(100% - 30px);
left: 15px;
bottom: 20px;
z-index: -1;
height: 16px;
opacity: 0.2;
}
.navstyle4 .header-nav .nav > li > a{
border:0;
z-index: 1;
padding:22px 15px 22px 15px;
}
.navstyle5 .header-nav .nav > li > a{
border:0;
padding: 25px 10px 25px 10px;
}
.navstyle5 .header-nav .nav > li.active > a:before,
.navstyle5 .header-nav .nav > li > a:before,
.navstyle5 .header-nav .nav > li.active > a:after,
.navstyle5 .header-nav .nav > li > a:after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.8s, opacity 0.2s;
-moz-transition: -moz-transform 0.8s, opacity 0.2s;
transition: transform 0.8s, opacity 0.2s;
width: auto;
height:auto;
}
.navstyle5 .header-nav .nav > li.active > a:before,
.navstyle5 .header-nav .nav > li > a:before {
content: '[';
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}
.navstyle5 .header-nav .nav > li.active > a:after,
.navstyle5 .header-nav .nav > li > a:after {
content: ']';
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
width: auto;
height:auto;
background: transparent;
}
.navstyle5 .header-nav .nav > li > a:after{
position:unset;
}
.navstyle5 .header-nav .nav > li.active > a:after,
.navstyle5 .header-nav .nav > li:hover > a:after{
opacity: 1;
-webkit-transform: translateX(10px);
-moz-transform: translateX(10px);
transform: translateX(10px);
width: auto;
height:auto;
position: unset;
}
.navstyle5 .header-nav .nav > li.active > a:before,
.navstyle5 .header-nav .nav > li:hover > a:before{
opacity: 1;
-webkit-transform: translateX(-10px);
-moz-transform: translateX(-10px);
transform: translateX(-10px);
}
.navstyle1.header.header-transparent .header-nav .nav > li > a,
.navstyle1.header.dark .header-nav .nav > li > a,
.navstyle1.header.header-transparent .main-bar .header-nav .nav > li > a,
.navstyle1.header.dark .main-bar .header-nav .nav > li > a,
.navstyle5.header.header-transparent .header-nav .nav > li > a,
.navstyle5.header.dark .header-nav .nav > li > a,
.navstyle5.header.header-transparent .main-bar .header-nav .nav > li > a,
.navstyle5.header.dark .main-bar .header-nav .nav > li > a,
.navstyle2.header.header-transparent .header-nav .nav > li > a,
.navstyle2.header.dark .header-nav .nav > li > a,
.navstyle2.header.header-transparent .main-bar .header-nav .nav > li > a,
.navstyle2.header.dark .main-bar .header-nav .nav > li > a{
border:0;
}
.navstyle1 .main-bar.bg-primary .header-nav .nav > li > a:after,
.navstyle1 .main-bar.bg-primary .header-nav .nav > li.active > a:after{
background: #fff;
}
.navstyle1 .main-bar.bg-primary .header-nav .nav > li.active > a,
.navstyle1 .main-bar.bg-primary .header-nav .nav > li:hover > a{
color:var(--color-primary);
}
.navstyle2 .main-bar.bg-primary .header-nav .nav > li.active > a:after{
background: transparent;
box-shadow: inset 0 0 0 2px #fff;
}
.navstyle5 .main-bar.bg-primary .header-nav .nav > li > a:after,
.navstyle5 .main-bar.bg-primary .header-nav .nav > li.active > a:after,
.navstyle2 .main-bar.bg-primary .header-nav .nav > li > a:after{
background: transparent;
}
.navstyle2 .main-bar.bg-primary .header-nav .nav > li:hover > a:after{
box-shadow: inset 0 0 0 2px #fff;
}
.navstyle3 .main-bar.bg-primary .header-nav .nav > li > a:after,
.navstyle3 .main-bar.bg-primary .header-nav .nav > li.active > a:after{
background: #000;
opacity: 0.1;
}
}
/*= when header is sticky =*/
.sticky-no .main-bar {
position: static !important;
}
/*= when header is sticky =*/
.is-fixed .main-bar {
position: fixed;
top: 0;
left: 0;
box-shadow:0 0 50px 0px rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 991px) {
[class*="bg-"] .header-nav .nav > li > a {
color: #fff;
}
[class*="bg-"] .header-nav .nav > li.active > a,
[class*="bg-"] .header-nav .nav > li.current-menu-item > a {
color: #fff;
}
[class*="bg-"] .header-nav .nav > li > a:hover,
[class*="bg-"] .header-nav .nav > li:hover > a {
color: #fff;
}
}
/*= Header style designs strat =*/
/*header with bg primary color 1 */
[class*="bg-"] .navbar-toggler {
border-color: #fff;
}
[class*="bg-"] .navbar-toggler span {
background-color: #fff;
}
@media only screen and (max-width: 991px) {
[class*="bg-"] .header-nav .nav > li > a {
color: #555;
}
}
/*header style 1 (default) */
/* Header Dark */
.header.dark,
.header.dark .main-bar{
background: #252525
}
.header.dark .dez-topbar-left ul li a,
.header.dark .dez-topbar-right ul li a,
.header.dark .header-nav .nav > li > a,
.header.dark .extra-nav .site-button-link,
.header.dark .navbar-toggler {
color: #dfdfdf;
}
.header.dark .navbar-toggler span{
background-color:#dfdfdf;
}
.header.dark .top-bar{
background-color:#252525;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: #dfdfdf;
}
.header-transparent + .page-content .dez-bnr-inr-md,
.header-transparent + .page-content .dez-bnr-inr-sm{
padding-top:60px;
}
/* Header Transparent */
.header-transparent{
position:absolute;
width:100%;
}
.header-transparent .main-bar{
/* background-color:rgba(0,0,0,0); */
background-color: rgb(0 0 0 / 76%);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.header-transparent .header-nav .nav > li > a,
.header-transparent .dez-topbar-left ul li a,
.header-transparent .extra-nav .site-button-link,
.header-transparent .navbar-toggler {
color: #fff;
}
.header-transparent.tb .header-nav .nav > li > a,
.header-transparent.tb .dez-topbar-left ul li a,
.header-transparent.tb .extra-nav .site-button-link,
.header-transparent.tb .navbar-toggler {
color: #000;
}
.header-transparent.tb .is-fixed .header-nav .nav > li > a,
.header-transparent.tb .is-fixed .dez-topbar-left ul li a,
.header-transparent.tb .is-fixed .extra-nav .site-button-link,
.header-transparent.tb .is-fixed .navbar-toggler {
color: #fff;
}
.header-transparent.tb .navbar-toggler span{
background-color: #000;
}
.header-transparent.tb .is-fixed .navbar-toggler span{
background-color: #fff;
}
.header-transparent .navbar-toggler span{
background-color: #fff;
}
.header-transparent .is-fixed .main-bar{
position:fixed;
background-color:rgba(0,0,0,0.9);
border: 0;
}
.header-transparent .top-bar{
background-color: rgba(0,0,0,0);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: #dfdfdf;
}
/* Overlay */
.header-transparent.overlay .top-bar,
.header-transparent.overlay .main-bar{
background-color:rgba(0,0,0,0.5);
}
/* Header Full Width */
.fullwidth .container-fluid{
padding-left: 30px;
padding-right: 30px;
}
@media only screen and (max-width: 767px) {
.fullwidth .container-fluid{
padding-left: 15px;
padding-right: 15px;
}
}
/* Colored Bg */
/*=== Primary */
.header.primary,
.header.primary .main-bar{
background: var(--color-primary)
}
.header.primary .header-nav .nav > li > a,
.header.primary .extra-nav .site-button-link,
.header.primary .navbar-toggler {
color: #fff;
}
.header.primary .navbar-toggler span {
background-color:#fff
}
.header.primary .top-bar{
background-color:var(--color-primary);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: #fff;
}
.header.primary .header-nav .nav > li:hover > a:after,
.header.primary .header-nav .nav > li.active > a:after{
background-color:#fff;
}
/*=== Red */
.header.red,
.header.red .main-bar{
background: #F22D4E;
}
.header.red .header-nav .nav > li > a,
.header.red .extra-nav .site-button-link,
.header.red .navbar-toggler {
color: #dfdfdf;
}
.header.red .navbar-toggler span {
background-color:#dfdfdf
}
.header.red .top-bar{
background-color:#F22D4E;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: #dfdfdf;
}
/*=== Blue */
.header.blue,
.header.blue .main-bar{
background: #00c5dc;
}
.header.blue .header-nav .nav > li > a,
.header.blue .extra-nav .site-button-link,
.header.blue .navbar-toggler {
color: #fff;
}
.header.blue .navbar-toggler span {
background-color:#fff
}
.header.blue .top-bar{
background-color:#00c5dc;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: #fff;
}
/*=== Purpal */
.header.purpal,
.header.purpal .main-bar{
background: #8862b9;
}
.header.purpal .header-nav .nav > li > a,
.header.purpal .extra-nav .site-button-link,
.header.purpal .navbar-toggler {
color: #fff;
}
.header.purpal .navbar-toggler span {
background-color:#fff
}
.header.purpal .top-bar{
background-color:#8862b9;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: #fff;
}
/*=== Yellow */
.header.yellow,
.header.yellow .main-bar{
background: #ffb822;
}
.header.yellow .header-nav .nav > li > a,
.header.yellow .extra-nav .site-button-link,
.header.yellow .navbar-toggler {
color: #fff;
}
.header.yellow .navbar-toggler span {
background-color:#fff
}
.header.yellow .top-bar{
background-color:#ffb822;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: #fff;
}
/* Top Bar Bg */
.top-bar.bg-dark{
background-color:#282a3c;
color:#fff;
}
.top-bar.bg-black{
background-color:#000;
color:#fff;
}
.top-bar.bg-light {
background-color: #a5a5a5;
color: #ffffff;
border-bottom:0;
}
/* Box */
.header.box{
position:absolute;
width:100%;
}
.header.box .main-bar{
background-color:rgba(0,0,0,0);
margin-top: 20px;
transition:all 0.2s;
-webkit-transition:all 0.2s;
-moz-transition:all 0.2s;
-o-transition:all 0.2s;
}
.header.box .header-nav .nav > li > a,
.header.box .extra-nav .site-button-link,
.header.box .navbar-toggler {
color: #000;
}
.header.box .navbar-toggler span{
background-color: #000;
}
.header.box .is-fixed .main-bar{
position:fixed;
background-color:#fff;
margin-top: 0px;
transition:all 0.2s;
-webkit-transition:all 0.2s;
-moz-transition:all 0.2s;
-o-transition:all 0.2s;
}
.header.box .container{
background-color: #ffffff;
border-radius: 2px;
box-shadow: 0 0 4px -2px #000000;
}
.header.box .is-fixed .container{
box-shadow:none;
}
/* Box Overlay */
.header.box.overlay .header-nav .nav > li > a,
.header.box.overlay .extra-nav .site-button-link,
.header.box.overlay .navbar-toggler {
color: #fff;
}
.header.box.overlay .navbar-toggler span{
background-color:#fff;
}
.header.box.overlay .container{
background-color: rgba(0,0,0,0.5);
}
.header.box.overlay .is-fixed .container{
background-color: rgba(0,0,0,0.0);
}
.header.box.overlay .is-fixed .main-bar{
background-color: rgba(0,0,0,0.7);
}
/* Box Dark */
.header.box.dark .header-nav .nav > li > a,
.header.box.dark .extra-nav .site-button-link,
.header.box.dark .navbar-toggler {
color: #fff;
}
.header.box.dark .navbar-toggler span{
background-color: #fff;
}
.header.box.dark .container{
background-color:#252525;
}
.header.box.dark .is-fixed .container,
.header.box.dark{
background-color: rgba(0,0,0,0.0);
}
.header.box.dark .is-fixed .main-bar{
background-color:#252525;
}
/* One Page Nav */
.onepage .navbar{
margin-bottom:0;
border:0;
}
@media only screen and (max-width: 991px) {
.header-transparent.tb .is-fixed .header-nav .nav > li > a,
.header.dark .header-nav .nav > li > a,
.header-transparent .header-nav .nav > li > a,
.header.primary .header-nav .nav > li > a,
.header.blue .header-nav .nav > li > a,
.header.purpal .header-nav .nav > li > a,
.header.red .header-nav .nav > li > a,
.header.yellow .header-nav .nav > li > a,
.header.box.dark .header-nav .nav > li > a,
.header.box.overlay .header-nav .nav > li > a,
.header-curve [class*="bg-"] .header-nav .nav > li.active > a{
color:#000;
}
.header-transparent.tb .is-fixed .header-nav.nav-dark .nav > li > a,
.header.dark .header-nav.nav-dark .nav > li > a,
.header-transparent .header-nav.nav-dark .nav > li > a,
.header.primary .header-nav.nav-dark .nav > li > a,
.header.blue .header-nav.nav-dark .nav > li > a,
.header.purpal .header-nav.nav-dark .nav > li > a,
.header.red .header-nav.nav-dark .nav > li > a,
.header.yellow .header-nav.nav-dark .nav > li > a,
.header.box.dark .header-nav.nav-dark .nav > li > a,
.header.box.overlay .header-nav.nav-dark .nav > li > a,
.header-curve [class*="bg-"] .header-nav.nav-dark .nav > li.active > a{
color:#fff;
}
.header-nav.nav-dark .nav > li .sub-menu li a:after,
.header-nav.nav-dark .nav > li .mega-menu > li ul a:after{
color:#fff;
}
.header-nav.nav-dark .nav > li > a{
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav-dark.header-nav .nav > li .sub-menu,
.nav-dark.header-nav .nav > li .mega-menu {
border: 1px solid rgba(255, 255, 255, 0.2);
border-width: 1px 0 1px 0px;
}
}
/* Left Nav */
/* ==============
Navicon
============== */
.navicon{
width: 20px;
height: 18px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
box-shadow:none!important;
}
.navicon span{
display: block;
position: absolute;
height: 2px;
width: 100%;
border-radius: 1px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.navicon span:nth-child(1) {
top: 0px;
}
.navicon span:nth-child(2) {
top: 7px;
}
.navicon span:nth-child(3) {
top: 14px;
}
.navicon.open span:nth-child(1) {
top: 7px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.navicon.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
.navicon.open span:nth-child(3) {
top: 7px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/* Mo Left */
/* Google Recaptcha */
@media screen and (max-width: 991px){
.mo-left .header-nav.nav-dark{
background-color:#202020;
}
.mo-left .header-nav{
overflow-y: scroll;
position: fixed;
width: 60px;
left:-280px;
height:100vh !important;
transition:all 0.5s;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
top:0;
background-color:#fff;
margin:0;
z-index:99;
}
.mo-left .header-nav li.open a{
position:relative;
}
.header-nav{
overflow-x:scroll;
height:100%;
}
.mo-left .header-nav.show {
left: -1px;
transition:all 0.8s;
-webkit-transition:all 0.8s;
-moz-transition:all 0.8s;
-o-transition:all 0.8s;
margin:0;
width: 280px;
}
.mo-left .navbar-toggler.open:after {
background-color: rgba(0, 0, 0, 0.6);
content: "";
left: 0;
position: fixed;
right: -20px;
top: -63px;
transform: scale(100);
-o-transform: scale(100);
-moz-transform: scale(100);
-webkit-transform: scale(100);
width: 100%;
z-index: -1;
transition: all 0.5s;
transform-origin: top right;
margin: 0 0px 0px 20px;
-webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.6);
}
.mo-left .header-nav .logo-header {
display: block;
float: none;
height: auto;
max-width: 100%;
padding: 20px 15px !important;
width: 100%;
}
.mo-left .header-nav .logo-header img{
max-width: unset;
width: 160px;
vertical-align: middle;
}
.mo-left .navbar-toggler.open span{
background:#fff;
}
}
@media screen and (min-width: 992px){
.header-nav .logo-header{
display: none;
}
}
@media screen and (max-width: 767px){
.mo-left .navbar-toggler.open:after {
margin: 0 0px 0px 15px;
}
}
/*---------------------------------------------------------------
19. BANNER
---------------------------------------------------------------*/
.dez-banner-row,
.dez-banner-outer {
position: relative;
}
.dez-bnr-pic {
width: 100%;
overflow: hidden;
}
.dez-bnr-pic img {
width: 100%;
height: auto;
display: block;
}
.dez-bnr-text {
position: absolute;
left: 0;
top: 35%;
width: 100%;
margin: 0;
font-family: Raleway;
color: #FFFFFF;
font-family: "Raleway";
}
.dez-bnr-text-has {
max-width: 600px;
}
.dez-bnr-text strong,
.dez-bnr-text span {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)
}
.dez-bnr-text strong {
display: block;
font-size: 60px;
font-weight: 700;
line-height: 70px;
margin: 0 0 25px;
color: #FFFFFF;
}
.dez-bnr-text span {
font-size: 20px;
line-height: 30px;
font-weight: 600;
display: block;
margin-bottom: 30px;
}
.dez-bnr-text .btn {
margin-right: 30px;
}
@media only screen and (max-width: 1200px) {
.dez-bnr-text strong {
font-size: 60px;
line-height: 60px;
margin: 0 0 15px;
}
.dez-bnr-text span {
font-size: 20px;
line-height: 24px;
}
}
@media only screen and (max-width: 991px) {
.dez-bnr-text strong {
font-size: 50px;
line-height: 50px;
margin: 0 0 10px;
}
}
@media only screen and (max-width: 767px) {
.dez-bnr-text strong {
font-size: 40px;
line-height: 40px;
margin: 0 0 0;
}
}
@media only screen and (max-width: 680px) {
.dez-bnr-text strong {
font-size: 30px;
line-height: 30px;
margin: 0 0 0;
}
.dez-bnr-text span {
font-size: 14px;
line-height: 18px;
}
}
@media only screen and (max-width: 480px) {
.dez-bnr-text strong {
font-size: 20px;
line-height: 20px;
}
.dez-bnr-text span {
font-size: 12px;
line-height: 16px;
}
}
/*== > inner page banner ==*/
.dez-bnr-inr.dez-bnr-inr-lg {
height: 800px;
}
.dez-bnr-inr.dez-bnr-inr-md {
height: 600px;
}
.dez-bnr-inr.dez-bnr-inr-sm {
height: 400px;
}
.dez-bnr-inr {
height: 460px;
background-size: cover;
background-position: bottom;
display: table;
width: 100%;
text-align: center;
}
.dez-bnr-inr .container {
display: table;
height: 100%;
}
.dez-bnr-inr h1{
font-size:45px;
}
.dez-bnr-inr-entry {
display: table-cell;
vertical-align: middle;
}
.banner-inner-row h1,
.banner-inner-row h2,
.banner-inner-row h3,
.banner-inner-row h4,
.banner-inner-row h5,
.banner-inner-row h6 {
color: #FFF;
}
@media only screen and (max-width: 767px) {
.dez-bnr-inr {
height:300px;
}
.dez-bnr-inr h1{
font-size:26px;
line-height:32px;
}
}
/*== > Provider banner off ==*/
.banner-inner-row.provider-banner-off {
height: 150px;
background-image: url("../images/pattern.jpg") !important;
background-repeat: repeat;
background-size: auto;
}
.provider-banner-off.overlay-black-middle::after {
opacity: 0.1;
}
/*---------------------------------------------------------------
20. SLIDER
>rs slider
>owl slider
---------------------------------------------------------------*/
/*== >rs slider ==*/
.tp-caption .font-weight-300 {
font-weight: 300;
}
.tp-caption .font-weight-400 {
font-weight: 400;
}
.tp-caption .font-weight-500 {
font-weight: 500;
}
.tp-caption .font-weight-600 {
font-weight: 600;
}
.tp-caption .font-weight-700 {
font-weight: 700;
}
.tp-caption .font-weight-800 {
font-weight: 800;
}
.tp-caption .font-weight-900 {
font-weight: 900;
}
.tp-caption h1,
.tp-caption h2,
.tp-caption h3,
.tp-caption h4,
.tp-caption h5,
.tp-caption h6 {
font-weight: 800;
margin-bottom: 24px;
color: #FFFFFF;
}
.tp-caption h1 {
font-size: 70px;
line-height: 60px;
}
.tp-caption h2 {
font-size: 60px;
line-height: 50px;
}
.tp-caption h3 {
font-size: 50px;
line-height: 40px;
margin-bottom: 20px;
}
.tp-caption h4 {
font-size: 40px;
line-height: 30px;
margin-bottom: 15px;
}
.tp-caption h5 {
font-size: 30px;
line-height: 4px;
margin-bottom: 10px;
}
.tp-caption h6 {
font-size: 20px;
line-height: 22px;
margin-bottom: 10px;
}
.tp-caption h4,
.tp-caption h5,
.tp-caption h6 {
font-weight: 600;
}
.tp-caption .text {
color: #ffffff;
font-size: 20px;
line-height: 24px;
width: 500px;
}
.overlay-row {
background: #000 none repeat scroll 0 0;
height: 100%;
left: 0;
opacity: 0.3;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
/*== >owl slider ==*/
/* next pre btn */
.owl-none .owl-nav{
display:none;
}
.owl-theme .owl-nav,
.owl-theme .owl-dots {
margin-top: 20px;
text-align: center;
}
.owl-theme .owl-nav .disabled {
opacity: .5;
cursor: default
}
/* owl dots button */
.owl-theme .owl-dots{
text-align:center;
}
.owl-theme .owl-dots .owl-dot {
display: inline-block;
zoom: 1;
}
.owl-theme .owl-dots .owl-dot span {
width: 10px;
height: 10px;
margin: 5px 7px;
background: #d6d6d6;
display: block;
-webkit-backface-visibility: visible;
-webkit-transition: opacity 200ms ease;
-moz-transition: opacity 200ms ease;
-ms-transition: opacity 200ms ease;
-o-transition: opacity 200ms ease;
transition: opacity 200ms ease;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
background: #869791
}
/* owl dots style */
.owl-theme.dots-style-1 .owl-dots .owl-dot {
}
.owl-theme.dots-style-1 .owl-dots .owl-dot span,
.owl-theme.dots-style-2 .owl-dots .owl-dot span {
background: rgba(0,0,0,0.2);
width: 8px;
height: 8px;
margin: 5px;
}
.owl-theme.dots-style-1 .owl-dots .owl-dot.active span,
.owl-theme.dots-style-1 .owl-dots .owl-dot:hover span {
background: #000;
}
/* owl dots style 3 */
.owl-theme.dots-style-3 .owl-dots {
margin-top: 30px;
position: unset;
right: auto;
text-align: center;
top: auto;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
width: auto;
}
.owl-theme.dots-style-3 .owl-dots .owl-dot span{
height: 8px;
width: 8px;
margin: 0;
}
.owl-theme.dots-style-3 .owl-dots .owl-dot {
border: 1px solid;
border-radius: 20px;
display: inline-block;
margin: 4px;
padding: 3px;
}
.owl-theme.dots-style-3 .owl-dots .owl-dot.active,
.owl-theme.dots-style-3 .owl-dots .owl-dot:hover{
border: 1px solid #FF3B68;
}
.owl-theme.dots-style-3 .owl-dots .owl-dot.active span,
.owl-theme.dots-style-3 .owl-dots .owl-dot:hover span{
background-color:#FF3B68;
}
.owl-item.dots-style-3 .slide-content-box{
opacity:0;
}
.owl-item.active.dots-style-3 .slide-content-box{
opacity:1;
transition:all 2s ease 2s;
-moz-transition:all 2s ease 2s;
-webkit-transition:all 2s ease 2s;
-o-transition:all 2s ease 2s;
}
/*owl button top to center */
.owl-btn-top-c .owl-nav {
text-align: center;
}
/*owl button top to left */
.owl-btn-top-l .owl-nav {
text-align: left;
}
.owl-btn-top-l .owl-nav .owl-prev {
margin-left: 0;
}
/*owl button top to right */
.owl-btn-top-r .owl-nav {
text-align: right;
}
.owl-btn-top-r .owl-nav .owl-next {
margin-right: 0;
}
/*owl button top to left & right */
.owl-btn-top-lr .owl-nav{
text-align: left;
}
.owl-btn-top-lr .owl-nav .owl-next {
margin-right: 0;
float: right;
}
.owl-btn-full .owl-prev,
.owl-btn-full .owl-next{
padding: 40px 8px;
}
/*owl button < > CENTER to left & right */
.owl-btn-center-lr .owl-nav {
margin: 0;
}
.owl-btn-center-lr +
.owl-theme .owl-nav {
margin: 0;
}
.owl-btn-center-lr .owl-nav .owl-prev,
.owl-btn-center-lr .owl-nav .owl-next {
position: absolute;
left: 0;
top: 50%;
margin: 0;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.owl-btn-center-lr .owl-nav .owl-next {
left: auto;
right: 0;
}
.owl-carousel .owl-item img {
transform-style: inherit;
}
/* Owl Button Style */
.owl-btn-1 .owl-prev,
.owl-btn-1 .owl-next,
.owl-btn-2 .owl-prev,
.owl-btn-2 .owl-next,
.owl-btn-3 .owl-prev,
.owl-btn-3 .owl-next{
border-radius: 3px;
height: 40px;
line-height: 40px;
margin: 0 10px !important;
padding: 0;
text-align: center;
width: 40px;
}
.owl-btn-2 .owl-prev,
.owl-btn-2 .owl-next,
.owl-btn-3 .owl-prev,
.owl-btn-3 .owl-next{
margin: 0 -70px !important;
}
.owl-btn-3 .owl-prev,
.owl-btn-3 .owl-next {
background-color: rgba(0, 0, 0, 0);
color: #000000;
font-size: 35px;
height: auto;
width: auto;
opacity:0.2;
}
.owl-btn-3 .owl-prev:hover,
.owl-btn-3 .owl-next:hover {
background-color: rgba(0, 0, 0, 0);
color:#000;
opacity:1;
}
.owl-btn-3.btn-white .owl-prev,
.owl-btn-3.btn-white .owl-next {
color:#fff;
}
.owl-btn-3.btn-white .owl-prev:hover,
.owl-btn-3.btn-white .owl-next:hover {
color:#fff;
}
.owl-btn-4 {
overflow:hidden;
}
.owl-btn-4 .owl-prev,
.owl-btn-4 .owl-next{
background: #ffffff none repeat scroll 0 0;
border-radius: 30px;
box-shadow:0 0 20px 7px rgba(0, 0, 0, 0.5);
color: #000000;
font-size: 24px;
height: 50px;
line-height: 50px;
margin: 0 -10px !important;
overflow: hidden;
padding: 0;
width: 50px;
opacity:0.7;
}
.owl-btn-4 .owl-prev:hover,
.owl-btn-4 .owl-next:hover {
background: #ffffff none repeat scroll 0 0;
color: #000;
opacity:1;
}
/* Thumb */
#sync2 .owl-item.active.current .item img {
outline: 5px solid rgba(0, 0, 0, 0.2);
outline-offset: -9px;
}
/* owl-dots */
.owl-dots-none .owl-dots{
display:none;
}
.owl-dots-primary-full.owl-theme .owl-dots .owl-dot span,
.owl-dots-black-full.owl-theme .owl-dots .owl-dot span,
.owl-dots-white-full.owl-theme .owl-dots .owl-dot span,
.owl-dots-primary-big.owl-theme .owl-dots .owl-dot span,
.owl-dots-black-big.owl-theme .owl-dots .owl-dot span,
.owl-dots-white-big.owl-theme .owl-dots .owl-dot span{
opacity:0.5;
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
margin:4px;
}
.owl-dots-primary-full.owl-theme .owl-dots .owl-dot span,
.owl-dots-primary-big.owl-theme .owl-dots .owl-dot span{
background-color:#1abc9c;
}
.owl-dots-black-full.owl-theme .owl-dots .owl-dot span,
.owl-dots-black-big.owl-theme .owl-dots .owl-dot span{
background-color:#333;
}
.owl-dots-white-full.owl-theme .owl-dots .owl-dot span,
.owl-dots-white-big.owl-theme .owl-dots .owl-dot span{
background-color:#f5f5f5;
}
.owl-dots-primary-full.owl-theme .owl-dots .owl-dot.active span,
.owl-dots-black-full.owl-theme .owl-dots .owl-dot.active span,
.owl-dots-white-full.owl-theme .owl-dots .owl-dot.active span{
opacity:1;
width:25px;
}
.owl-dots-primary-big.owl-theme .owl-dots .owl-dot.active span,
.owl-dots-black-big.owl-theme .owl-dots .owl-dot.active span,
.owl-dots-white-big.owl-theme .owl-dots .owl-dot.active span{
width:14px;
height:14px;
opacity:1;
margin:0px 4px 2px 4px;
}
@media only screen and (max-width: 1200px) {
.owl-btn-2 .owl-prev,
.owl-btn-2 .owl-next,
.owl-btn-3 .owl-prev,
.owl-btn-3 .owl-next{
margin:0 10px !important;
}
}
/*---------------------------------------------------------------
21. BLOG
---------------------------------------------------------------*/
.blog-post {
position: relative;
margin-bottom: 30px;
}
.dez-post-info {} .dez-post-title {
margin-bottom: 10px;
}
.dez-post-title .post-title {
margin-top: 15px;
color: #9f832c;
}
.dez-post-meta {
margin-bottom: 10px;
}
.dez-post-meta ul {
margin: 0 -4px;
list-style: none;
}
.dez-post-meta ul li {
padding: 0;
display: inline-block;
font-size: 13px;
}
.dez-post-meta li:after {
content: "/";
display: inline-block;
font-weight: normal;
margin-left: 5px;
opacity: 0.5;
}
.dez-post-meta li:last-child:after {
display: none;
}
.recent-posts-entry .dez-post-meta a {
color: #7b7b7b;
}
.dez-post-meta li,
.dez-post-meta a,
.dez-post-meta i {
color: #7b7b7b;
}
.dez-post-meta i {
margin: 0 5px;
}
.dez-post-text {
margin-bottom: 15px;
}
.dez-post-text p:last-child {
margin: 0;
}
.dez-post-readmore {
margin-bottom: 15px;
}
.dez-post-readmore.m-b0 {
margin-bottom: 0;
}
.dez-post-tags {
border-top: 1px solid #E9E9E9;
padding-top: 10px;
}
.dez-post-tags .post-tags {
margin: 0 -3px;
list-style: none;
}
.dez-post-tags .post-tags a {
border: 1px solid #ddd;
padding: 2px 8px;
color: #7b7b7b;
margin: 3px;
display: inline-block;
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
}
/*== post date syle css ==*/
.date-style-1 .post-date {
color: #fff;
background-color: #EFBB20;
padding: 3px 5px 3px 5px;
}
.date-style-1 .post-date .fa {
color: #fff;
left: 5px;
top: 5px;
}
.date-style-2 .post-date,
.date-style-4 .post-date {
color: #fff;
position: absolute;
left: 20px;
top: 0;
width: 50px;
text-align: center;
text-transform: uppercase;
}
.date-style-2 .post-date strong,
.date-style-2 .post-date span,
.date-style-4 .post-date strong,
.date-style-4 .post-date span {
display: block;
padding: 10px 5px;
}
.date-style-2 .post-date strong,
.date-style-4 .post-date strong {
font-size: 10px;
padding: 10px 5px 5px;
position: relative;
}
.date-style-2 .post-date > strong:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
height: 1px;
background-color: #fff;
margin: 0 -10px;
width: 20px;
}
.date-style-2 .post-date span {
font-size: 16px;
padding: 5px 5px 10px;
}
.date-style-2 .dez-post-info .post-date {
float: left;
margin-right: 15px;
position: absolute;
}
.date-style-2 .post-date:after,
.date-style-2 .post-date .far,
.date-style-3 .post-date:after,
.date-style-3 .post-date .far,
.date-style-4 .post-date .far {
display: none;
}
.date-style-3 .dez-post-info {
position: relative;
}
.date-style-3 .post-date {
font-family: Poppins, sans-serif;
text-transform: uppercase;
position: absolute;
padding: 8px 15px;
color: #fff;
top: -36px;
left: 0;
height: 36px;
}
.date-style-3 .post-date strong {
color: #fff;
margin-right: 2px;
}
.date-style-3.skew-date .post-date {
padding-right: 8px;
}
.date-style-3.skew-date .post-date:before {
content: "";
position: absolute;
right: -15px;
top: 0;
width: 22px;
height: 100%;
border-right: 3px solid #2D3239;
-moz-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
-o-transform: skewX(20deg);
-ms-transform: skewX(20deg);
transform: skewX(20deg);
}
.date-style-4 .post-date span {
background-color: #2e1e13;
}
.date-style-4 .post-date {
top: 10px;
left: 10px;
font-family: "Roboto Slab", serif;
}
.date-style-4 .dez-post-info {
box-shadow: 0 3px 0 0 #dbdbdb;
}
.date-style-4 .dez-post-meta ul li {
font-weight: normal;
}
.date-style-5 .ow-post-info {
position:relative;
}
.date-style-5 .ow-post-info .post-date,
.date-style-5 .dez-post-info .post-date{
color: #ffffff;
left: -1px;
padding: 7px 15px;
position: absolute;
top: -35px;
}
.date-style-5 .ow-post-info .post-date i,
.date-style-5 .dez-post-info .post-date i{
display:none;
}
.date-style-5 .ow-post-meta li:after,
.date-style-5 .dez-post-meta li:after{
content:none;
}
/*== post without media ==*/
.no-image-blog.date-style-2 .algo-post-info {
padding-top: 70px;
}
.no-image-blog.date-style-2 .post-date {
top: 0;
left: 20px;
}
/*if no image with blog post*/
.blog-post.no-img-post .post-date {
position: static;
float: left;
}
/*blog post half iamge*/
.blog-md .dez-post-media {
width: 350px;
float: left;
margin-right: 30px;
}
.blog-md .dez-post-info {
border: none;
}
.blog-md .dez-post-tags {
border: none;
display: inline-block;
padding: 0;
}
@media only screen and (max-width: 767px) {
.blog-md.blog-post .dez-post-media {
float: none;
margin: 0 0 20px;
width: auto;
}
}
/*Blog page pagination main*/
.nav-links:after {
clear: both;
content: "";
display: table;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}
.pagination .page-numbers {
background-color: #fff;
border: 1px solid #e0e0e0;
color: #767676;
padding: 9px 15px;
font-weight: 600;
font-size: 12px;
display: block;
float: left;
margin-left: -1px;
}
.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
background: #3396D1;
color: #fff;
}
/*Blog paging Next & Prev css*/
.nav-links .nav-previous a,
.nav-links .nav-next a {
display: inline-block;
color: #3396d1;
font-weight: 600;
margin-bottom: 20px;
outline: none !important;
}
.nav-links .nav-previous a:hover,
.nav-links .nav-next a:hover {
color: #0099CC;
}
.nav-links .nav-previous a:after,
.nav-links .nav-next a:after {
content: "\f105";
font-family: "Font Awesome 5 Free";
font-weight: 600;
vertical-align: middle;
margin-left: 2px;
color: #333;
}
/*Post navigation*/
.post-navigation {
background-color: #fff;
padding: 30px;
border-bottom: 2px solid #e3e3e3;
}
.post-navigation .screen-reader-text {
margin-top: 0;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
display: inline-block;
width: 50%;
}
.post-navigation .nav-next {
text-align: right;
}
.post-navigation .nav-previous a:after,
.post-navigation .nav-next a:after {
display: none;
}
.post-navigation .nav-previous .post-title,
.post-navigation .nav-next .post-title {
display: block;
font-size: 15px;
color: #777777;
margin-top: 10px;
}
/*post panging*/
.dez-link-pages {
padding: 20px 0 30px;
}
.dez-link-pages a {
color: #fff;
padding: 2px 6px;
font-size: 12px;
font-weight: 600;
background-color: #CCC;
margin: 0 2px;
}
/*Sticky Post*/
.sticky-post {
position: absolute;
right: 0;
top: 0;
background: #77c04b;
color: #FFF;
padding: 10px 15px;
text-transform: uppercase;
font-weight: 600;
}
/*Post password form*/
.post-password-form {
position: relative;
clear: both;
}
.post-password-form input[type="password"] {
width: 100%;
border: 1px solid #ddd;
padding: 10px 100px 10px 15px;
height: 40px;
}
.post-password-form label {
display: block;
}
.post-password-form input[type="submit"] {
position: absolute;
bottom: 0;
right: 0;
padding: 10px 20px;
background-color: #333;
color: #FFF;
border: none;
height: 40px;
text-transform: uppercase;
font-weight: 600;
}
/*gallery css for blog post*/
.blog [class*="galleryid-"] {
clear: both;
margin: 0 auto;
overflow: hidden
}
.gallery .gallery-item {
float: left;
list-style: none;
margin: 0px 0 0;
overflow: hidden;
padding: 0px 0px 5px 15px;
text-align: center
}
.gallery .gallery-caption {
padding-top: 10px;
font-size: 13px;
}
.gallery .gallery-item img {
float: left;
padding: 0 0px;
width: 100%;
border: none !important;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-icon img {
margin: 0 auto;
}
.gallery-caption {
color: #707070;
color: rgba(51, 51, 51, 0.7);
display: block;
font-family: "Noto Sans", sans-serif;
font-size: 12px;
font-size: 1.2rem;
line-height: 1.5;
padding: 0.5em 0;
}
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
display: none;
}
/*side bar*/
.side-bar .widget {
margin-bottom: 30px;
}
@media only screen and (max-width: 991px) {
.side-bar {
margin-bottom: 40px;
}
}
/*Blog single*/
.blog-single .dez-post-meta {
margin-bottom: 20px;
}
.blog-single .dez-post-text {
margin-top: 20px;
}
.blog-single .dez-post-tags {
margin-top: 20px;
}
/*Blog single */
.blog-single {
margin-bottom: 3.125rem; }
@media only screen and (max-width: 575px) {
.blog-single {
margin-bottom: 2rem; } }
.blog-single h1, .blog-single .h1 {
max-width: 625px;
margin-bottom: 10px; }
.blog-single h1.dz-title, .blog-single .dz-title.h1 {
max-width: 100%; }
.blog-single .dz-post-meta {
margin-bottom: 1.25rem; }
.blog-single .dz-post-text {
padding-bottom: 5px; }
.blog-single .dz-post-text:after {
content: "";
display: block;
width: 100%;
clear: both; }
.blog-single .dz-post-tags {
margin-top: 1.25rem; }
.blog-single .dz-post-media {
border-radius: 0.25rem; }
.blog-single.dz-blog .post-tags {
margin-bottom: 0; }
.blog-single.style-1 {
box-shadow: unset;
border-radius: 0;
overflow: unset;
margin-bottom: 60px; }
.blog-single.style-1 .post-header .dz-title {
margin-right: auto;
margin-left: auto;
text-align: center; }
.blog-single.style-1 ul {
padding: 0; }
.blog-single.style-1 ul li:before {
display: none !important; }
@media only screen and (max-width: 991px) {
.blog-single.style-1 {
margin-bottom: 20px; } }
.blog-single.style-1 .dz-media + .dz-info {
text-align: unset;
border: 0;
padding: 0;
margin-top: 0;
padding: 30px 0 0 0; }
.blog-single.style-1 .dz-meta {
margin-bottom: 30px; }
.blog-single.style-1 .dz-meta li {
align-items: center;
gap: 6px;
flex-wrap: wrap;
position: relative;
margin-right: 30px;
font-size: 13px;
color: #24262B; }
@media only screen and (max-width: 575px) {
.blog-single.style-1 .dz-meta li {
font-size: 12px;
}
}
.blog-single.style-1 .dz-meta li i {
color: var(--secondary);
}
.blog-single.style-1 .dz-meta li:after {
content: "";
height: 6px;
width: 6px;
position: absolute;
right: -17px;
top: 50%;
border-radius: 50%;
background-color: var(--secondary);
transform: translate(0%, -50%);
}
.blog-single.style-1 .dz-meta li:first-child:after, .blog-single.style-1 .dz-meta li:last-child:after {
content: none;
}
@media only screen and (max-width: 575px) {
.blog-single.style-1 .dz-meta li.post-date {
font-size: 12px;
}
}
@media only screen and (max-width: 575px) {
.blog-single.style-1 .dz-meta {
margin-bottom: 20px;
}
.blog-single.style-1 .dz-meta li {
gap: 4px;
margin-right: 10px;
padding-right: 0;
}
.blog-single.style-1 .dz-meta li:after {
content: none;
}
.blog-single.style-1 .dz-meta li.post-date {
padding: 5px 10px;
}
}
.blog-single.style-1 .dz-meta.style-1 li {
color: #fff;
}
.blog-single.style-1 .dz-meta.style-1 li a {
color: #fff;
}
.blog-single.style-1 .dz-meta.style-1 li i {
color: #fff;
}
.blog-single.style-1 .dz-meta.style-1 li:after {
background-color: #fff;
}
.blog-single.style-1 .dz-info {
text-align: unset;
border: 0;
padding: 0;
margin-top: 0;
}
.blog-single.style-1 .dz-info + .dz-media {
margin-top: 25px;
}
.blog-single .dz-media,
.blog-single .dz-post-media {
text-align: center;
}
.blog-single ,
.blog-single .dz-post-media img {
width: auto;
}
.blog-single.style-1 .list-check-2 {
padding-left: 0;
display: flex;
width: 100%;
flex-wrap: wrap;
margin-bottom: 30px;
}
.blog-single.style-1 .list-check-2 li {
padding: 15px 8px 15px 55px !important;
position: relative;
align-items: center;
display: flex;
font-weight: 500;
font-size: 16px !important;
color: #222222;
font-family: var(--font-family-title);
width: 50%;
}
.blog-single.style-1 .list-check-2 li:after {
position: absolute;
left: 5px;
top: 50%;
content: "\e83f";
font-family: 'feather' !important;
font-weight: 300;
color: var(--primary);
font-size: 22px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
transform: translateY(-50%);
}
.blog-single.style-1 .list-check-2.check-circle li:after {
border-radius: 50%;
background-color: transparent;
color: var(--secondary);
border: 1px solid var(--secondary);
}
@media only screen and (max-width: 1199px) {
.blog-single.style-1 .list-check-2 li {
padding: 12px 8px 12px 48px !important;
font-size: 15px !important; }
.blog-single.style-1 .list-check-2 li:after {
width: 35px;
height: 35px;
line-height: 35px;
font-size: 20px;
}
}
@media only screen and (max-width: 767px) {
.blog-single.style-1 .list-check-2 li {
width: 100%;
}
}
.section-full {
--dz-height:600px; }
@media only screen and (max-width: 991px) {
.section-full {
--dz-banner-height:450px; } }
@media only screen and (max-width: 767px) {
.section-full {
--dz-height:380px; } }
@media only screen and (max-width: 575px) {
.section-full {
--dz-height:350px; } }
.post-header {
position: relative;
overflow: hidden;
}
@media only screen and (max-width: 575px) {
.post-header {
margin-bottom: 1.25rem;
}
}
.post-header .dz-media {
height: var(--dz-height);
}
.post-header .dz-media img {
min-height: 250px;
width: 100%;
height: 100%;
object-fit: cover; }
.post-header .dz-info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 100px 30px 30px 30px !important;
width: 100%;
}
@media only screen and (max-width: 575px) {
.post-header .dz-info {
padding: 40px 15px 15px 15px !important;
}
}
.post-header .dz-info .dz-title {
color: #fff;
text-transform: capitalize;
}
@media only screen and (max-width: 575px) {
.post-header .dz-info .dz-title {
font-size: 24px;
}
}
.post-header .dz-info .dz-meta > ul {
justify-content: center;
}
.post-header .dz-info .dz-meta > ul > li {
color: #fff;
}
.dz-meta ul {
margin: 0;
padding: 0;
display: flex;
align-items: center;
flex-wrap: wrap; }
.dz-meta ul li {
display: inline-flex;
position: relative;
font-size: 14px;
font-weight: 400;
margin-right: 10px;
align-items: center;
gap: 6px;
flex-wrap: wrap; }
.dz-meta ul li i {
font-size: 15px;
margin-right: 2px;
color: var(--secondary);
position: relative;
top: -1px; }
@media only screen and (max-width: 575px) {
.dz-meta ul li {
margin-right: 10px;
padding-right: 10px; } }
/*= comment list = */
.comments-area {
padding: 0;
}
.comments-area .comments-title {
text-transform: uppercase;
font-size: 20px;
}
ol.comment-list {
list-style: none;
margin-bottom: 0;
padding-left: 0;
}
ol.comment-list li.comment {
position: relative;
padding: 0;
}
ol.comment-list li.comment .comment-body {
position: relative;
padding: 20px;
margin-bottom: 40px;
margin-left: 80px;
position: relative;
border: 1px solid #e9e9e9;
}
ol.comment-list li.comment .comment-body:before,
ol.comment-list li.comment .comment-body:after {
content: '';
position: absolute;
top: 20px;
width: 0;
height: 0;
border-width: 10px 12px 10px 0;
border-style: solid;
}
ol.comment-list li.comment .comment-body:before {
border-color: transparent #fff transparent #fff;
z-index: 1;
left: -12px;
top: 22px;
}
ol.comment-list li.comment .comment-body:after {
border-color: transparent #e9e9e9 transparent #e9e9e9;
border-width: 12px 14px 12px 0;
left: -14px;
}
ol.comment-list li.comment .comment-author {
display: block;
margin-bottom: 10px;
}
ol.comment-list li.comment .comment-author .avatar {
position: absolute;
top: 0;
left: -80px;
width: 56px;
height: 56px;
border-radius: 100%;
-webkit-border-radius: 100%;
border: 2px solid #FFF;
}
ol.comment-list li.comment .comment-author .fn {
display: inline-block;
color: #555555;
font-size: 14px;
text-transform: capitalize;
font-weight: 600;
font-style: normal;
}
ol.comment-list li.comment .comment-author .says {
display: none;
color: #999999;
font-weight: 600;
}
ol.comment-list li.comment .comment-meta {
color: #8d8d8d;
text-transform: capitalize;
margin-bottom: 15px;
}
ol.comment-list li.comment .comment-meta a {
color: #8d8d8d;
}
ol.comment-list li.comment .comment-meta a {
color: #8d8d8d;
}
ol.comment-list li.comment .comment-meta:before,
ol.comment-list li.comment .reply a:before {
font-family: "Font Awesome 5 Free";
font-size: 14px;
vertical-align: top;
}
ol.comment-list li.comment .comment-meta:before {
content: "\f133";
}
ol.comment-list li.comment .reply a:before {
content: "\f064";
color: #555555;
margin-right: 5px;
vertical-align: middle;
}
ol.comment-list li.comment p {
line-height: 18px;
margin: 0 0 5px;
}
ol.comment-list li.comment .reply a {
position: absolute;
top: 50px;
right: 30px;
margin-top: -5px;
color: #EFBB20;
font-weight: 600;
}
ol.comment-list li .children {
list-style: none;
margin-left: 80px;
}
ol.comment-list li .children li {
padding: 0;
}
@media only screen and (max-width: 767px) {
.comments-area .padding-30 {
padding: 15px;
}
ol.comment-list li.comment .comment-body {
margin-bottom: 30px;
margin-left: 70px;
}
ol.comment-list li.comment .comment-author .avatar {
left: -75px;
height: 60px;
width: 60px;
}
ol.comment-list li .children {
margin-left: 20px;
}
ol.comment-list li.comment .reply a {
position: static;
}
}
@media only screen and (max-width: 480px) {
ol.comment-list li.comment .comment-body {
margin-left: 52px;
}
ol.comment-list li.comment .comment-author .avatar {
left: -55px;
top: 12px;
width: 40px;
height: 40px;
}
}
/*= comment form = */
.comment-respond {
padding: 30px 30px;
border: 1px solid #e9e9e9;
}
.comment-respond .comment-reply-title {
text-transform: uppercase;
font-size: 20px;
}
.comment-respond .comment-reply-title {
font-size: 16px;
font-weight: 600;
}
.comments-area .comment-form {
margin: 0 -15px;
}
.comments-area .comment-form .comment-notes {
display: none;
}
.comments-area .comment-form p {
width: 33.333%;
float: left;
padding: 0 15px;
margin-bottom: 30px;
position: relative;
}
.comments-area .comment-form p.form-allowed-tags {
width: 100%;
}
ol.comment-list li.comment .comment-respond .comment-form p {
padding: 0 15px !important;
}
.comments-area .comment-form p label {
display: none;
line-height: 18px;
margin-bottom: 10px;
}
.comments-area p:before {
font-family: "Font Awesome 5 Free";
font-weight: 600;
display: inline-block;
position: absolute;
left: 15px;
top: 0;
font-size: 16px;
color: #ccc;
width: 40px;
height: 40px;
line-height: 40px;
border: 1px solid #e1e6eb;
text-align: center;
border-radius: 4px 0 0 4px;
-webkit-border-radius:4px 0 0 4px;
}
.comments-area p.comment-form-author:before {
content: "\f007";
}
.comments-area p.comment-form-email:before {
content: "\f0e0";
}
.comments-area p.comment-form-url:before {
content: "\f0ac";
}
.comments-area p.comment-form-comment:before {
content: "\f303";
}
.comments-area .comment-form p input[type="text"],
.comments-area .comment-form p textarea {
width: 100%;
height: 40px;
line-height: 6px 12px;
padding: 10px 10px 10px 50px;
border: 1px solid #e1e6eb;
border-radius: 4px;
-webkit-border-radius: 4px;
outline: 0;
}
.comments-area .comment-form p.comment-form-comment {
width: 100%;
display: block;
clear: both;
}
.comments-area .comment-form p textarea {
height: 120px;
}
.comments-area .comment-form p.form-submit {
clear: both;
float: none;
width: 100%;
margin: 0;
}
.comments-area .comment-form p input[type="submit"] {
background-color: #EFBB20;
border: none;
border-radius: 3px;
border-style: solid;
border-width: 1px;
color: #fff;
display: inline-block;
font-weight: 600;
padding: 10px 20px;
text-transform: uppercase;
}
.comments-area .comment-form p input[type="submit"]:hover,
.comments-area .comment-form p input[type="submit"]:focus,
.comments-area .comment-form p input[type="submit"]:active {
background-color: #6ab33e;
border-color: #6ab33e;
color: #fff;
}
@media only screen and (max-width: 767px) {
.comments-area .comment-form p {
width: 100%;
float: none;
margin-bottom: 20px;
}
.comment-respond {
padding: 20px;
}
}
/*---------------------------------------------------------------
22. WIDGETS
---------------------------------------------------------------*/
.widget {
margin-bottom: 40px;
}
.widget-title {
margin: 0 0 25px;
}
.widget-title {
padding-bottom: 6px;
position: relative;
margin-bottom: 25px;
}
.widget-title:after {
content: "";
position: absolute;
bottom: -12px;
left: 0;
height: 3px;
margin: 0 0 0;
width: 50px;
margin: 10px 0;
}
.widget .widget-title{
text-transform: uppercase;
}
.recent-posts-entry ul,
.category-entry ul {
margin: 0;
list-style: none;
padding: 0;
}
/* widget listing*/
.widget_categories ul,
.widget_archive ul,
.widget_meta ul,
.widget_pages ul,
.widget_recent_comments ul,
.widget_nav_menu ul,
.widget_rss ul,
.widget_recent_entries ul,
.widget_services ul,
.widget_getintuch ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.widget_categories ul li,
.widget_archive ul li,
.widget_meta ul li,
.widget_pages ul li,
.widget_recent_comments ul li,
.widget_nav_menu li,
.widget_recent_entries ul li,
.widget_services ul li {
padding-bottom: 18px;
margin-bottom: 13px;
border-bottom: 1px solid rgba(102, 102, 102, 0.11);
position: relative;
padding: 10px 10px 10px 15px;
margin-bottom: 0;
line-height: 20px;
}
.widget_categories ul li a,
.widget_archive ul li a,
.widget_meta ul li a,
.widget_pages ul li a,
.widget_recent_comments ul li a,
.widget_nav_menu li a,
.widget_recent_entries ul li a,
.widget_services ul li a {
color: #767676;
}
.widget_categories ul li:before,
.widget_archive ul li:before,
.widget_meta ul li:before,
.widget_pages ul li:before,
.widget_recent_comments ul li:before,
.widget_nav_menu ul li:before,
.widget_recent_entries ul li:before,
.widget_services ul li:before {
content: "\f105";
position: absolute;
left: 0;
top: 10px;
font-family: 'Font Awesome 5 Free';
font-weight: 600;
}
.widget_categories ul li li,
.widget_archive ul li li,
.widget_meta ul li li,
.widget_pages ul li li,
.widget_recent_comments ul li li,
.widget_nav_menu li li,
.widget_services li li {
border-bottom: none;
padding-left: 10px;
padding-right: 5px;
padding-top: 0;
padding-bottom: 0;
line-height: 28px;
}
.widget_categories ul li li:before,
.widget_archive ul li li:before,
.widget_meta ul li li:before,
.widget_pages ul li li:before,
.widget_recent_comments ul li li:before,
.widget_nav_menu li li:before,
.widget_services li li:before {
top: 0;
left: -8px;
}
/*widget search custom*/
.search-bx .site-button {
padding: 9px 12px;
border: 1px solid transparent;
border-radius: 0;
}
/*widget search wp-default*/
.widget_search .screen-reader-text {
display: block;
}
.searchform {
position: relative;
}
.searchform input[type="text"] {
width: 100%;
height: 40px;
padding: 10px 90px 10px 15px;
border: 1px solid #CCCCCC;
}
.searchform input[type="submit"] {
height: 40px;
padding: 10px 15px;
background-color: var(--primary);
position: absolute;
right: 0;
bottom: 0;
color: #ffffff;
border-left: none;
border-right: none;
border-top: none;
border-bottom: none;
}
.searchform input[type="submit"]:hover,
.searchform input[type="submit"]:focus,
.searchform input[type="submit"]:active {
background-color: #cf6f91;
color: #ffffff!important;
border-bottom-color: #cf6f91;
}
/*widget recent-posts*/
.recent-posts-entry .post-date,
.tweets-feed-entry .tweet-date {
color: #3396d1;
font-style: normal;
}
.widget .post-title {
line-height: 16px;
}
.recent-posts-entry .widget-post {
margin-bottom: 10px;
display: flex;
align-items: center;
}
.recent-posts-entry .dez-post-meta{
margin-bottom: 0;
}
.recent-posts-entry .post-title{
margin-bottom: 8px;
}
.recent-posts-entry .dez-separator{
margin-bottom: 15px;
}
.recent-posts-entry .widget-post-bx:last-child {
border-bottom: none;
}
.recent-posts-entry .dez-post-media {
float: left;
width: 90px;
min-width: 90px;
}
.recent-posts-entry .dez-post-info {
background: transparent;
padding: 0;
margin-left: 10px;
border: none;
}
.recent-posts-entry .post-meta span {
margin-right: 10px;
}
/*widget recent-comment*/
.widget_recent_comments ul li:before {
content: "\f086";
}
.widget_recent_comments ul li {
padding-left: 20px;
color: #999;
}
/* widget meta*/
.widget_meta ul li a abbr[title] {
color: #333;
border-bottom: none;
}
/*widget calender*/
.widget_calendar caption::after {
color: #707070;
content: ">";
font-family: "Font Awesome 5 Free";
font-weight: 600;
margin: 0 0 0 5px;
}
.widget_calendar table {
border-collapse: separate;
border-spacing: 2px;
width: 100%;
}
.widget_calendar thead {
background-color: #999999
}
.widget_calendar tfoot tr td {
border: none;
padding: 0px
}
.widget_calendar tfoot tr td a {
background-color: #fff;
padding: 4px 10px
}
.widget_calendar table thead tr th {
font-size: 11px;
padding: 5px;
text-align: center;
border: none;
color: #fff;
}
.widget_calendar table tbody td {
font-size: 13px;
padding: 6px 5px;
text-align: center;
background-color: #fff;
border: none;
color: #444;
}
.widget_calendar table tbody td#today {
background-color: #77c04b;
color: #FFF;
}
.widget_calendar table tbody td#today a {
color: #FFF;
}
/*widget tags-list*/
.widget_tag_cloud a {
padding: 8px 10px;
background-color: #FFFFFF;
border: 1px solid #ddd;
font-size: 12px;
display: inline-block;
margin: 0 0 5px;
color: #555555;
}
.side-bar .widget_tag_cloud a:hover {
background-color: #CCCCCC;
}
/*widget archive*/
.widget_archive select {
width: 100%;
padding: 5px;
border: 1px solid #CCC;
}
/*widget text*/
.widget_text select {
width: 100%;
padding: 5px;
border: 1px solid #CCC;
}
.widget_text select option {
width: 100%;
}
/*widget categories*/
.widget_categories li {
text-align: right;
}
.widget_categories li a {
float: left;
}
/*widget RSS*/
.widget_rss ul {
margin: 0;
line-height: 20px;
}
.widget_rss ul li {
line-height: 20px;
margin-bottom: 15px;
}
.widget_rss ul .rsswidget {
color: #333;
}
.widget_rss ul .rss-date {
color: #3396D1;
}
.widget_rss ul .rssSummary {
padding: 5px 0;
}
.widget_rss ul cite {
color: #333;
font-weight: 600;
}
/* widget get in tuch */
.widget_getintuch {
padding-top: 10px;
}
.widget_getintuch li {
margin-bottom: 20px;
position: relative;
padding-left: 40px;
}
.widget_getintuch b,
.widget_getintuch strong {
display: block;
text-transform: uppercase;
}
.widget_getintuch i {
position: absolute;
left: 0;
top: 5px;
text-align: center;
font-size: 14px;
width: 30px;
height: 30px;
line-height: 30px;
background-color: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.05);
}
/* widget gallery */
.widget_gallery ul {
padding-left: 0;
}
.widget_gallery li {
display: inline-block;
margin-bottom: 5px;
width: 32.1%;
border: 2px solid transparent;
}
.widget_gallery li img {
display: inline-block;
}
.widget_gallery li:nth-child(3n-3) {
margin-right: 0;
}
.widget_gallery li:hover {
display: inline-block;
margin-bottom: 0;
width: 32.1%;
border: 2px solid;
}
.widget_gallery a {
display: inline-block;
}
/*---------------------------------------------------------------
23. CUSTOMIZE CSS
>set-radius
>transition
>float-clearfix
---------------------------------------------------------------*/
/*== >set-radius ==*/
.btn,
.panel,
.form-control,
.img-thumbnail,
.panel-head ing,
.dropdown-menu,
.panel-group .panel,
.nav-tabs > li > a,
.modal-content,
.navbar-toggle,
.nav-pills > li > a,
.pager li > a,
.pager li > span,
.well,
.alert,
.list-group-item:first-child,
.list-group-item:last-child,
.input-group-addon,
.btn-group-divides > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle),
.btn-group-divides > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child),
.dez-booking-form .dez-extra-services li .icon-bx-lg,
.dez-booking-form .dez-extra-services li.active .icon-bx-lg:after,
.widget_tag_cloud a,
.searchform input[type="text"],
.searchform input[type="submit"],
ol.comment-list li.comment .comment-body {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
/*== >transition ==*/
a,
.dez-box,
.btn,
.form-control,
.overlay-bx,
.overlay-icon li a i,
.icon-bx-xl,
.icon-bx-lg,
.icon-bx-md,
.icon-bx-sm,
.icon-bx-xs,
.share-social-bx li,
.indicator,
.profile-menu ul li,
.staff-member .member-done,
.how-dez-work .dez-box .shadow-bx img,
.how-dez-work .dez-box .step-no-bx,
.dez-info-has,
.dez-we-find .dez-box,
.navbar-toggle,
.logo-header,
.header-nav .nav > li > a,
.extra-nav,
.skew-secondry:hover,
.skew-primary:hover,
.skew-secondry:hover::after,
.skew-primary:hover::after {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.animate-slow {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.animate-mid {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.animate-fast {
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
/*== >float-clearfix ==*/
.clearfix:after,
.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/*error for select box*/
.has-error .bootstrap-select .dropdown-toggle,
.has-error .bootstrap-select .dropdown-toggle:hover,
.has-error .bootstrap-select .dropdown-toggle:focus {
border-color: #a94442 !important;
}
/*succes for select box*/
.has-success .bootstrap-select .dropdown-toggle,
.has-success .bootstrap-select .dropdown-toggle:hover,
.has-success .bootstrap-select .dropdown-toggle:focus {
border-color: #3c763d !important;
}
.close {
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
}
/*---------------------------------------------------------------
24. SORTCODES
>Buttons
>Title separators
>Deviders
>Lists & bullets
>Tabs
>Accordians
>Carousels
>Testimonials
>Pricing table
>Pricing table
>Alert box
>Image effects
>Modal pop
>Social icons
>Breadcrumb
---------------------------------------------------------------*/
/*== >Buttons ======= */
/* owl slider button */
.owl-prev,
.owl-next {
background-color: #2d3239;
border-color: #2d3239;
color: #ffffff;
padding: 5px 10px;
margin-left: 5px;
margin-right: 5px;
font-size: 13px;
display: inline-block;
cursor: pointer;
border-width: 1px;
border-style: solid;
}
.owl-prev:hover,
.owl-prev:active,
.owl-prev:focus,
.owl-next:hover,
.owl-next:active,
.owl-next:focus {
background-color: #000;
border-color: #000;
color: #ffffff;
}
/* theme default button */
.site-button,
.site-button-secondry {
color: #fff;
padding: 12px 25px;
display: inline-block;
font-size: 14px;
outline: none;
cursor: pointer;
outline: none;
border-width: 0;
border-style: solid;
border-color: transparent;
line-height: 1.42857;
border-radius: 6px;
font-weight: 500;
}
.site-button {
background-color: #EFBB20;
}
.site-button:active,
.site-button:hover,
.site-button:focus,
.active > .site-button {
background-color: #d8a409;
color: #fff;
}
.site-button-secondry {
background-color: #2d3239;
}
.site-button-secondry:active,
.site-button-secondry:hover,
.site-button-secondry:focus,
.active > .site-button-secondry {
background-color: #161b22;
color: #fff;
}
/* button text uppercase */
.site-button.text-uppercase {
text-transform: uppercase;
}
/* button size */
.button-sm {
padding: 5px 10px;
font-size: 12px;
}
.button-lg {
padding: 20px 35px;
font-size: 16px;
}
.button-xl {
padding: 30px 50px;
font-size: 24px;
}
/* button rounded */
.radius-no {
border-radius: 0;
-webkit-border-radius: 0;
}
.radius-sm {
border-radius: 3px;
-webkit-border-radius: 3px;
}
.radius-xl {
border-radius: 100px;
-webkit-border-radius: 100px;
}
/* button colors */
/* white */
.site-button.white {
background-color: #fff;
color: #777;
}
.site-button.white:hover,
.site-button.white:active,
.site-button.white:focus {
background-color: #F4F4F4;
color: #555;
}
/* black */
.site-button.black {
background-color: #171717;
color: #fff;
}
.site-button.black:hover,
.site-button.black:active,
.site-button.black:focus {
background-color: #000;
color: #fff;
}
/* Gray */
.site-button.gray {
background-color: #666666;
color: #fff;
}
.site-button.gray:hover,
.site-button.gray:active,
.site-button.gray:focus {
background-color: #555555;
color: #fff;
}
/* pink */
.site-button.pink {
background-color: #e63f75;
color: #fff;
}
.site-button.pink:hover,
.site-button.pink:active,
.site-button.pink:focus {
background-color: #d22b61;
color: #fff;
}
/* Blue */
.site-button.blue {
background-color: #42B8D4;
color: #fff;
}
.site-button.blue:hover,
.site-button.blue:active,
.site-button.blue:focus {
background-color: #2ca2be;
color: #fff;
}
/* Green */
.site-button.green {
background-color: #35B494;
color: #fff;
}
.site-button.green:hover,
.site-button.green:active,
.site-button.green:focus {
background-color: #26a585;
color: #fff;
}
/* Orange */
.site-button.orange {
background-color: #E56713;
color: #fff;
}
.site-button.orange:hover,
.site-button.orange:active,
.site-button.orange:focus {
background-color: #d55703;
color: #fff;
}
/* Red */
.site-button.red {
background-color: #D93223;
color: #fff;
}
.site-button.red:hover,
.site-button.red:active,
.site-button.red:focus {
background-color: #c51e0f;
color: #fff;
}
/* Brown */
.site-button.brown {
background-color: #69441F;
color: #fff;
}
.site-button.brown:hover,
.site-button.brown:active,
.site-button.brown:focus {
background-color: #5f3a15;
color: #fff;
}
/* Yellow */
.site-button.yellow {
background-color: #ecc731;
color: #fff;
}
.site-button.yellow:hover,
.site-button.yellow:active,
.site-button.yellow:focus {
background-color: #d4af19;
color: #fff;
}
/* purple */
.site-button.purple {
background-color: #AE1AF7;
color: #fff;
}
.site-button.purple:hover,
.site-button.purple:active,
.site-button.purple:focus {
background-color: #9804e1;
color: #fff;
}
/* Skew */
.button-skew {
position: relative;
text-align: center;
margin-right: 21px;
-moz-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.button-skew span {
display: inline-block;
-moz-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
-o-transform: skewX(20deg);
-ms-transform: skewX(20deg);
transform: skewX(20deg);
}
.button-skew i {
background-color: inherit;
position: absolute;
height: 100%;
margin-right: -32px;
right: 0;
top: 0;
padding: 12px 12px;
line-height: normal;
}
.button-skew i:before {
display: inline-block;
-moz-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
-o-transform: skewX(20deg);
-ms-transform: skewX(20deg);
transform: skewX(20deg);
}
.button-skew.button-sm i {
padding: 7px 10px;
margin-right: -27px;
}
.button-skew.button-lg i {
padding: 25px 15px;
margin-right: -40px;
}
.button-skew.button-xl i {
padding: 35px 22px;
margin-right: -55px;
}
/* Graphical */
.site-button.graphical {
color: #fff;
border-radius: 3px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 3px -1px rgba(45, 60, 72, 0.5);
border: 1px solid rgba(0, 0, 0, 0.15);
}
.site-button.graphical:active {
box-shadow: 0 2px 2px rgba(0, 0, 0, .25) inset
}
/* 3D */
.site-button.button-3d {
color: #fff;
border-radius: 3px;
-webkit-border-radius: 3px;
border-bottom: 4px solid rgba(0, 0, 0, 0.2);
border-left: none;
border-right: none;
border-top: none;
}
/* Outline */
.site-button.outline {
color: #888;
background: none;
border-radius: 0px;
-webkit-border-radius: 0px;
border-width: 1px;
border-style: solid;
border-color: #eee;
}
/* white */
.site-button.outline.white {
color: #e7e7e7;
border-color: #e7e7e7;
}
.site-button.outline.white:hover {
color: #666666;
}
/* black */
.site-button.outline.black {
color: #171717;
border-color: #171717;
}
/* gray */
.site-button.outline.gray {
color: #666666;
border-color: #666666;
}
/* pink */
.site-button.outline.pink {
color: #e63f75;
border-color: #e63f75;
}
/* blue */
.site-button.outline.blue {
color: #42b8d4;
border-color: #42b8d4;
}
/* green */
.site-button.outline.green {
color: #35b494;
border-color: #35b494;
}
/* orange */
.site-button.outline.orange {
color: #e56713;
border-color: #e56713;
}
/* red */
.site-button.outline.red {
color: #d93223;
border-color: #d93223;
}
/* brown */
.site-button.outline.brown {
color: #69441f;
border-color: #69441f;
}
/* yellow */
.site-button.outline.yellow {
color: #EFBB20;
border-color: #EFBB20;
}
/* purple */
.site-button.outline.purple {
color: #ae1af7;
border-color: #ae1af7;
}
/* hover */
.site-button.outline:hover {
border-color: rgba(0, 0, 0, 0);
color: #fff;
}
/* button text link */
.site-button-link i {
margin-left:5px;
}
.site-button-link {
display: inline-block;
font-weight: 600;
border:0;
padding:0;
background-color:rgba(0,0,0,0);
}
/* white */
.site-button-link.white {
color: #e7e7e7;
}
.site-button-link.white:hover,
.site-button-link.white:active,
.site-button-link.white:focus {
color: #CCC;
}
/* black */
.site-button-link.black {
color: #171717;
}
.site-button-link.black:hover,
.site-button-link.black:active,
.site-button-link.black:focus {
color: #000;
}
/* Gray */
.site-button-link.gray {
color: #666666;
}
.site-button-link.gray:hover,
.site-button-link.gray:active,
.site-button-link.gray:focus {
color: #555555;
}
/* pink */
.site-button-link.pink {
color: #e63f75;
}
.site-button-link.pink:hover,
.site-button-link.pink:active,
.site-button-link.pink:focus {
color: #2ca2be;
}
/* Blue */
.site-button-link.blue {
color: #42B8D4;
}
.site-button-link.blue:hover,
.site-button-link.blue:active,
.site-button-link.blue:focus {
color: #2ca2be;
}
/* Green */
.site-button-link.green {
color: #35B494;
}
.site-button-link.green:hover,
.site-button-link.green:active,
.site-button-link.green:focus {
color: #26a585;
}
/* Orange */
.site-button-link.orange {
color: #E56713;
}
.site-button-link.orange:hover,
.site-button-link.orange:active,
.site-button-link.orange:focus {
color: #d55703;
}
/* Red */
.site-button-link.red {
color: #D93223;
}
.site-button-link.red:hover,
.site-button-link.red:active,
.site-button-link.red:focus {
color: #c51e0f;
}
/* Brown */
.site-button-link.brown {
color: #69441F;
}
.site-button-link.brown:hover,
.site-button-link.brown:active,
.site-button-link.brown:focus {
color: #5f3a15;
}
/* Yellow */
.site-button-link.yellow {
color: #ecc731;
}
.site-button-link.yellow:hover,
.site-button-link.yellow:active,
.site-button-link.yellow:focus {
color: #d4af19;
}
/* purple */
.site-button-link.purple {
color: #ae1af7;
}
.site-button-link.purple:hover,
.site-button-link.purple:active,
.site-button-link.purple:focus {
color: #9804e1;
}
/* filter buttons css */
.site-filters {
margin-bottom: 30px;
}
.site-filters ul {
margin: 0;
list-style: none;
}
.site-filters li {
display: inline;
padding: 0;
}
.site-filters li.btn {
box-shadow: none;
-webkit-box-shadow: none;
outline: none !important;
border: 0;
}
.site-filters li input {
display: none;
}
.site-filters a {
margin: 0 15px 5px 0;
}
.site-filters .active > [class*="site-button"] {
color: #fff;
background-color: #EFBB20;
}
.site-filters.center {
text-align: center;
}
.site-filters.center ul {
display: inline-block;
margin: auto;
}
.site-filters.center [class*="site-button"] {
display: inline-block;
margin: 0 5px 10px;
text-transform: uppercase;
}
@media only screen and (max-width: 480px) {
.site-filters.center [class*="site-button"] {
margin: 0 1px 5px;
padding: 5px 10px;
font-size: 12px;
}
}
/*== >Title separators ====== */
.dez-separator-outer {
overflow: hidden;
}
.dez-separator {
display: inline-block;
height: 3px;
width: 50px;
margin-bottom: 10px;
position: relative;
}
.dez-separator.style-liner {
width: 20px;
}
.dez-separator.style-icon {
width: 30px;
height: auto;
text-align: center;
font-size: 20px;
}
.dez-separator[class*="style-"]:after,
.dez-separator[class*="style-"]:before {
content: "";
position: absolute;
top: 50%;
left: 30px;
width: 70px;
height: 1px;
background: #eee;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.dez-separator[class*="style-"]:before {
left: auto;
right: 30px;
}
.dez-separator.style-skew {
width: 15px;
height: 10px;
margin-left: 1px;
margin-right: 1px;
-moz-transform: skewX(-10deg);
-webkit-transform: skewX(-10deg);
-o-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
transform: skewX(-10deg);
}
.dez-separator.style-skew[class*="style-"]:after,
.dez-separator.style-skew[class*="style-"]:before {
width: 80px;
height: 4px;
left: 20px;
-moz-transform: translateY(-50%) skewX(-10deg);
-webkit-transform: translateY(-50%) skewX(-10deg);
-o-transform: translateY(-50%) skewX(-10deg);
-ms-transform: translateY(-50%) skewX(-10deg);
transform: translateY(-50%) skewX(-10deg);
}
.dez-separator.style-skew[class*="style-"]:before {
right: 20px;
left: auto;
}
/*== >Deviders ====== */
.dez-divider {
height: 1px;
position: relative;
margin: 30px 0;
}
.dez-divider.divider-2px {
height: 2px;
}
.dez-divider.divider-3px {
height: 3px;
}
.dez-divider.divider-4px {
height: 4px;
}
.dez-divider i {
position: absolute;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
display: block;
border-radius: 100%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.dez-divider.icon-left {
margin-left: 40px;
}
.dez-divider.icon-left i {
left: -40px;
}
.dez-divider.icon-right {
margin-right: 40px;
}
.dez-divider.icon-right i {
left: auto;
right: -40px;
}
.dez-divider.icon-center i {
left: 50%;
margin-left: -5px;
}
/*== >Lists & bullets ====== */
.list-circle,
.list-angle-right,
.list-arrow,
.list-check,
.list-checked,
.list-check-circle,
.list-chevron-circle,
.list-arrow-circle,
.list-times-circle {
margin: 0 0 20px 0;
padding: 0;
list-style: none;
}
.list-circle li,
.list-angle-right li,
.list-arrow li,
.list-check li,
.list-checked li,
.list-check-circle li,
.list-chevron-circle li,
.list-arrow-circle li,
.list-times-circle li {
padding: 5px 5px 5px 20px;
position: relative;
}
.list-circle li:before,
.list-angle-right li:before,
.list-arrow li:before,
.list-check li:before,
.list-checked li:before,
.list-check-circle li:before,
.list-chevron-circle li:before,
.list-arrow-circle li:before,
.list-times-circle li:before {
font-family: "Font Awesome 5 Free";
font-weight: 600;
position: absolute;
left: 0;
top: 6px;
display: block;
font-size: 15px;
color: #777;
}
.list-circle li:before {
top: 10px;
font-size: 10px;
}
.list-circle li:before {
content: "\f111";
}
.list-angle-right li:before {
content: "\f105";
}
.list-arrow li:before {
content: "\f0da";
}
.list-check li:before {
content: "\f00c";
}
.list-checked li:before {
content: "\f14a";
}
.list-check-circle li:before {
content: "\f058";
}
.list-chevron-circle li:before {
content: "\f138";
}
.list-arrow-circle li:before {
content: "\f0a9";
}
.list-times-circle li:before {
content: "\f057";
}
/*listing before icon color css*/
.primary li:before {
color: #EFBB20;
}
.secondry li:before {
color: #77C04B;
}
.black li:before {
color: #000;
}
.white li:before {
color: #fff;
}
.orange li:before {
color: #FF6600;
}
.green li:before {
color: #00CC00;
}
.red li:before {
color: #FF3737;
}
.no-margin {
margin: 0 0 0 !important;
list-style: none;
}
/*listing before numbers*/
.list-num-count {
counter-reset: li;
padding-left: 0;
}
.list-num-count > li {
position: relative;
margin: 0 0 6px 30px;
padding: 4px 8px;
list-style: none;
}
.list-num-count > li:before {
content: counter(li, decimal);
counter-increment: li;
position: absolute;
top: 0;
left: -28px;
width: 28px;
height: 28px;
padding: 5px;
color: #fff;
background: #EFBB20;
font-weight: bold;
text-align: center;
font-size: 12px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.list-num-count.lower-alpha > li:before {
content: counter(li, lower-alpha);
}
.list-num-count.upper-alpha > li:before {
content: counter(li, upper-alpha);
}
.list-num-count.right li:before {
right: -35px;
left: auto;
}
.list-num-count.right li {
margin-left: 0;
margin-right: 35px;
}
/*== >Tabs ========= */
/*tabs style 1 [ defult ]*/
.dez-tabs .tab-pane {
padding: 20px 0;
}
.dez-tabs .nav-tabs > li > a {
color: #3d474a;
font-weight: 600;
font-size: 13px;
-webkit-border-radius: 0;
border-radius: 0;
}
.dez-tabs .nav-tabs > li.active > a,
.dez-tabs .nav-tabs > li.active > a:focus,
.dez-tabs .nav-tabs > li.active > a:hover {
background-color: #fff;
border-color: #ddd;
border-bottom: 1px solid #FFF;
}
.dez-tabs .nav > li > a:focus,
.dez-tabs .nav > li > a:hover {
background-color: transparent;
}
.dez-tabs .nav li a:hover {
border: 1px solid transparent;
}
.dez-tabs .nav-tabs > li > a i {
color: #EFBB20;
margin-right: 5px;
}
/*tabs bg [ tabs background ]*/
.dez-tabs.bg-tabs .nav-tabs > li > a {
border: 1px solid #ddd;
background-color: #efefef;
margin-right: 2px;
}
.dez-tabs.bg-tabs .nav-tabs > li.active > a {
border-bottom: 1px solid transparent;
background-color: #fff;
}
.dez-tabs.vertical.bg-tabs .nav-tabs > li > a {
border: 1px solid #ddd;
}
.dez-tabs.vertical.bg-tabs .nav-tabs > li.active > a {
border-right: 1px solid transparent;
}
.dez-tabs.vertical.right.bg-tabs .nav-tabs > li > a {
border: 1px solid #ddd;
}
.dez-tabs.vertical.right.bg-tabs .nav-tabs > li.active > a {
border-left: 1px solid transparent;
}
/*tabs bg & top border [ tabs background & top border in active ]*/
.dez-tabs.border-top .nav-tabs > li.active > a {
border-top: 2px solid #EFBB20;
padding: 9px 15px 10px;
}
/*tabs style 2 [ content with border outer ]*/
.dez-tabs.border .tab-pane {
padding: 20px;
border: 1px solid #ddd;
margin-top: -1px;
}
/*tabs style 3 [ left-nav ]*/
.dez-tabs.vertical .nav-tabs {
float: left;
width: 170px;
border-bottom: none;
border-right: 1px solid #DDD;
}
.dez-tabs.vertical .tab-pane {
padding: 10px 0 10px 20px;
}
.dez-tabs.vertical .nav-tabs li {
float: none;
margin-right: -1px;
}
.dez-tabs.vertical .nav-tabs li a {
margin-right: 0;
border-right: none;
}
.dez-tabs.vertical .nav-tabs li.active a {
border-bottom: 1px solid #ddd;
}
.dez-tabs.vertical .tab-content {
border-left: 1px solid #DDD;
margin-left: 169px;
}
/*tabs style 4 [ left-nav & content with border ]*/
.dez-tabs.vertical.border .tab-pane {
padding: 20px;
margin-left: -1px;
}
/*tabs style 5 [ right-nav ]*/
.dez-tabs.vertical.right .nav-tabs {
border-left: 1px solid #ddd;
border-right: none;
float: right;
}
.dez-tabs.vertical.right .nav-tabs li {
margin-right: 0;
margin-left: -1px;
}
.dez-tabs.vertical.right .nav-tabs li a {
border-right: 1px solid transparent;
border-left: none;
}
.dez-tabs.vertical.right .nav-tabs li.active a {
border-right: 1px solid #ddd;
border-left: none;
}
.dez-tabs.vertical.right .tab-content {
border-left: none;
border-right: 1px solid #ddd;
margin-right: 169px;
margin-left: 0;
}
.dez-tabs.vertical.right .tab-pane {
padding: 10px 20px 10px 0;
}
/*tabs style 6 [ right-nav & content with border ]*/
.dez-tabs.vertical.right.border .tab-pane {
padding: 20px;
margin-right: -1px;
}
/*== >Accordians =====*/
.panel {
box-shadow: none;
-webkit-box-shadow: none;
}
.dez-accordion .panel {
border: none;
border-radius: 0;
margin-bottom: -1px;
}
.acod-head {
position: relative;
}
.acod-title {
margin-top: 0;
margin-bottom: 0;
}
.acod-head .fa {
margin-right: 5px;
}
.acod-head a {
display: block;
padding: 12px 40px 12px 15px;
border: 1px solid #ddd;
}
.acod-head a,
.acod-head a:hover,
.acod-head a.collapsed:hover {
color: #EFBB20;
}
.acod-head a.collapsed,
.acod-head a.collapsed:after {
color: #3d474a;
}
.acod-head a:after {
font-family:'Font Awesome 5 Free';
font-weight: 600;
content: "\f068";
float: right;
color: #EFBB20;
font-size: 14px;
position: absolute;
right: 12px;
top: 12px;
}
.acod-head a.collapsed:after {
content: "\f067";
}
.acod-body {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-top: 1px solid transparent;
margin-top: -1px;
}
.acod-content {
margin: 20px;
}
/*== accordian rounded corners ==*/
.dez-accordion.rounded .panel:first-child .acod-head a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.dez-accordion.rounded .panel:last-child .acod-head a.collapsed {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.dez-accordion.rounded .panel:last-child .acod-body {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.dez-accordion.rounded .panel:last-child .acod-body.in {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
/*== accordian space between panel ==*/
.dez-accordion.space .panel {
margin-bottom: 5px;
}
.dez-accordion.rounded.space .panel .acod-head a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.dez-accordion.rounded.space .panel .acod-head a.collapsed {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.dez-accordion.rounded.space .panel .acod-body {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
/*== accordian background for title ==*/
.dez-accordion.bg-title .acod-head a {
background-color: #F7F8FA;
}
/*== accordian no cover border with content area ==*/
.dez-accordion.no-cover .acod-body {
border: none;
}
.dez-accordion.no-cover .acod-content {
padding-left: 20px;
margin-right: 10px;
border-left: 2px solid #e8e8e8;
position: relative;
}
.dez-accordion.no-cover .acod-content:after {
content: "";
position: absolute;
bottom: 0;
left: -5px;
width: 8px;
height: 8px;
background-color: #fff;
border: 2px solid #e8e8e8;
}
/*== accordian title bottom bordered ==*/
.dez-accordion.border-bottom .acod-head a {
border-left: none;
border-right: none;
border-top: none;
padding-left: 0;
}
/*== accordian title bottom bordered with colored ==*/
.dez-accordion.border-bottom.no-border .acod-head a {
border: none;
}
.dez-accordion.no-border .acod-content {
margin-top: 10px;
margin-bottom: 10px;
}
/*== >Carousels ======*/
/* Blog carousel */
.ow-post-info {
padding: 20px;
background-color: #fff;
border: 1px solid #ebebeb;
}
.ow-post-title .post-title {
margin: 0 0 10px;
}
.ow-post-text {
margin-bottom: 10px;
}
.ow-post-text p:last-child {
margin: 0;
}
.ow-post-readmore {
margin-bottom: 10px;
}
.ow-post-meta {
margin-bottom: 10px;
}
.ow-post-meta ul {
margin: 0 -4px;
list-style: none;
}
.ow-post-meta ul li {
padding: 0;
display: inline-block;
font-weight: normal;
}
.ow-post-meta li:after {
content: "/";
display: inline-block;
font-weight: normal;
margin-left: 5px;
opacity: 0.5;
}
.ow-post-meta li:last-child:after {
display: none;
}
.ow-post-meta a {
color: #7b7b7b;
font-weight: normal;
}
.ow-post-meta li,
.ow-post-meta li i {
color: #7b7b7b;
margin: 0 5px;
}
.ow-post-media .ow-post-meta li i {
margin: 0;
}
.ow-post-tags {
border-top: 1px solid #E9E9E9;
padding-top: 10px;
}
.ow-post-tags .post-comment {
float: left;
font-weight: normal;
text-transform: uppercase;
}
.ow-post-tags .post-comment a {
color: #7b7b7b;
}
.ow-post-tags .post-tags {
margin: 0 -3px;
list-style: none;
}
.ow-post-tags .post-tags a {
border: 1px solid #ebebeb;
padding: 2px 8px 1px;
color: #777;
margin: 0 3px;
display: inline-block;
text-transform: uppercase;
font-size: 11px;
}
.ow-post-tags .post-tags a:hover,
.ow-post-tags .post-tags a:active,
.ow-post-tags .post-tags a:focus {
border: 1px solid #0098A6;
color: #0098A6;
}
/* empty media */
.no-image-blog.date-style-2 .ow-post-info {
padding-top: 70px;
}
/*Event carousel */
.ow-event-info {
position: relative;
padding: 20px;
background-color: #fff;
border: 1px solid #ebebeb;
}
.ow-event-title .event-title {
margin: 0 0 10px;
}
.ow-event-text {
margin-bottom: 10px;
}
.ow-event-text p:last-child {
margin: 0;
}
.ow-event-readmore {
margin-bottom: 10px;
}
.ow-event-meta ul {
margin: 0;
}
.ow-event-meta ul li {
color: #a9a9a9;
font-weight: 600;
display: inline-block;
padding-right: 15px;
}
.ow-event-meta ul li i {
color: #7b7b7b;
margin-right: 10px;
}
/* empty media */
.no-image-event.date-style-2 .ow-post-info {
padding-top: 70px;
}
/*Client carousel */
.ow-client-logo {
background-color: #fff;
display: table;
width: 100%;
}
.client-logo {
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 10px;
}
.owl-carousel .ow-client-logo img {
height: 80px;
max-height: 100%;
width: auto;
display: inline-block;
}
/*== >Testimonials ======*/
.testimonial-pic {
background: #FFF;
width: 100px;
height: 100px;
position: relative;
display: inline-block;
border: 5px solid #FFF;
}
.testimonial-pic.radius {
border-radius: 100%;
-webkit-border-radius: 100%;
}
.testimonial-pic.radius img {
width: 100%;
height: 100;
border-radius: 100%;
-webkit-border-radius: 100%;
}
.testimonial-pic.shadow {
-webkit-box-shadow: 2px 3px 6px -3px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 2px 3px 6px -3px rgba(0, 0, 0, 0.35);
box-shadow: 2px 3px 6px -3px rgba(0, 0, 0, 0.35);
}
.quote-left,
.quote-right {
position: relative;
}
.quote-left:before,
.quote-right:after {
font-family: 'Font Awesome 5 Free';
position: absolute;
z-index: 10;
top: 15px;
font-weight: 600;
}
.quote-left:before {
content: "\f10d";
left: 0;
}
.quote-right:after {
content: "\f10e";
left: auto;
right: 0;
}
.testimonial-text {
padding: 15px;
position: relative;
}
.testimonial-detail {
padding: 5px;
}
.testimonial-name,
.testimonial-position {
display: block;
}
.testimonial-position {
font-style: italic;
}
.testimonial-text p:last-child {
margin: 0;
}
/*testimonial with background image*/
.testimonial-bg {
color: #fff;
}
/*testimonial 1*/
.testimonial-1 {
text-align: center;
}
.testimonial-1 .testimonial-position {
color: #EFBB20;
}
.testimonial-1 .testimonial-name,
.testimonial-1 .testimonial-position {
display: block;
}
.testimonial-1 .quote-left:before {
width: 36px;
height: 36px;
line-height: 36px;
font-size: 16px;
background: #EFBB20;
color: #FFF;
text-align: center;
left: 0;
top: 65px;
border-radius: 100%;
-webkit-border-radius: 100%;
}
/*testimonial 2*/
.testimonial-2 .testimonial-text {
background-color: #F4F5F7;
padding: 30px;
}
.testimonial-2 .testimonial-text:after {
content: "";
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #F4F5F7;
}
.testimonial-2 .testimonial-detail {
padding: 25px 0 20px 20px;
}
.testimonial-2 .testimonial-pic {
float: left;
margin-right: 15px;
width: 80px;
height: 80px;
}
.testimonial-2 .quote-left:before {
width: 36px;
height: 36px;
line-height: 36px;
font-size: 16px;
background: #EFBB20;
color: #FFF;
text-align: center;
left: 0;
top: 65px;
border-radius: 100%;
-webkit-border-radius: 100%;
}
.testimonial-2 .testimonial-name,
.testimonial-2 .testimonial-position {
padding: 2px 0;
}
.testimonial-2 .testimonial-name {
padding-top: 20px;
}
.testimonial-2 .testimonial-position {
color: #EFBB20;
}
.testimonial-2 .quote-left:before {
top: 50px;
}
/*testimonial 2 with background image*/
.testimonial-2.testimonial-bg .testimonial-text {
color: #777;
background-color: rgba(255, 255, 255, 0.9);
}
.testimonial-2.testimonial-bg .testimonial-text:after {
border-top-color: rgba(255, 255, 255, 0.9);
}
/*testimonial 3*/
.testimonial-3 {
text-align: center;
}
.testimonial-3 .quote-left:before {
position: static;
font-size: 40px;
color: inherit;
}
.testimonial-3 .testimonial-position {
color: #EFBB20;
}
.testimonial-3 .testimonial-name,
.testimonial-3 .testimonial-position {
display: inline-block;
}
/*testimonial 4*/
.testimonial-4 {
background-color: #1e2228;
position: relative;
padding: 30px 40px 30px 10px;
margin-left: 140px;
min-height: 150px;
}
.testimonial-4:after {
background-color: #1e2228;
border-left-width: 4px;
border-left-style: solid;
border-left-color: #EFBB20;
content: "";
position: absolute;
left: -80px;
top: 0;
height: 100%;
width: 80%;
z-index: -1;
-moz-transform: skewX(-25deg);
-webkit-transform: skewX(-25deg);
-o-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.testimonial-4 .testimonial-pic {
position: absolute;
top: 30px;
left: 0;
margin-left: -110px;
}
.testimonial-4 [class*="quote-"] {
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 30px;
border-color: #EFBB20;
border-top-color: transparent !important;
border-left-color: transparent !important;
}
.testimonial-4 [class*="quote-"]:after,
.testimonial-4 [class*="quote-"]:before {
top: 0;
right: -20px;
font-size: 20px;
color: #1E2228;
}
.testimonial-4 .testimonial-text,
.testimonial-4 .testimonial-detail {
padding: 0;
}
.testimonial-4 .testimonial-text {
margin-bottom: 10px;
}
.testimonial-4 .testimonial-name,
.testimonial-4 .testimonial-position {
display: inline-block;
}
.testimonial-4 .testimonial-name:after {
content: "/";
color: #EFBB20;
margin: 0 2px 0 5px;
}
.testimonial-4 .testimonial-name {
text-transform: uppercase;
}
.testimonial-4 .testimonial-position {
font-style: italic;
color: #bebebe;
}
.testimonial-4 .testimonial-pic {
border-color: #EFBB20;
border-width: 3px;
width: 90px;
height: 90px;
}
@media only screen and (max-width: 480px) {
.testimonial-4 .testimonial-pic {
height: 80px;
width: 80px;
}
.testimonial-4:after {
transform: skewX(-10deg);
}
.testimonial-4 {
padding: 25px 10px 25px 0px;
margin-left: 110px;
}
}
/* testimonials 5 */
.testimonial-5 .testimonial-text {
border: 2px solid #e6e6e6;
padding: 30px;
}
.testimonial-5 .testimonial-detail {
padding: 0 0 0 20px;
margin-top: -35px;
}
.testimonial-5 .testimonial-pic {
box-shadow: 0 0 0 2px #e6e6e6;
width: 70px;
height: 70px;
}
.testimonial-5 .testimonial-text p {
font-size: 16px;
line-height: 30px;
}
.testimonial-5 .info p {
display: inline-block;
position: relative;
top: -10px;
padding: 0 10px;
}
/*== >Pricing table ===*/
.pricingtable-inner {
text-align: center;
}
.pricingtable-price {
padding: 20px 20px;
background-color: #F4F7F8;
border: 1px solid #E9E9E9;
}
.pricingtable-bx {
font-size: 50px;
font-family: Arial;
color: #666666;
}
.pricingtable-type {
font-size: 20px;
text-transform: uppercase;
font-size: 16px;
}
.pricingtable-type:before {
content: "/";
margin-right: 3px;
}
.pricingtable-title {
padding: 20px;
text-transform: uppercase;
}
.pricingtable-title * {
margin: 0;
color: #fff;
font-weight: 800;
}
.pricingtable-features {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #E9E9E9;
}
.pricingtable-features li {
padding: 12px;
border-bottom: 1px solid #E9E9E9;
}
.pricingtable-features li i {
margin: 0 3px;
}
.pricingtable-features li:nth-child(even) {
background-color: #F4F7F8;
}
.pricingtable-features li:last-child {
border-bottom: none;
}
.pricingtable-footer {
margin-top: -1px;
padding: 20px;
background-color: #F4F7F8;
border: 1px solid #E9E9E9;
}
.pricingtable-highlight {
margin: -20px 0;
-webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 99;
}
.pricingtable-highlight .pricingtable-price {
padding: 30px 20px;
}
.pricingtable-highlight .pricingtable-footer {
padding: 30px 20px;
}
.no-col-gap .pricingtable-wrapper {
margin-left: -1px;
}
/* COUNTERUP */
.counter {
position: relative;
}
/* COUNTDOWN CLOCK */
.count-row {
background: #333;
}
#countdown-clock {
display: table;
text-align: center;
width: 80%;
margin-left: -15px;
border: 1px solid #3f3f3f;
margin: 17px 0;
}
#countdown-clock span {
display: table-cell;
width: 1%;
color: #FFF;
padding: 5px 15px;
text-transform: uppercase;
font-weight: 600;
color: #999;
border-right: 1px solid #3f3f3f;
}
#countdown-clock span:last-child {
border-right: none;
}
#countdown-clock span b {
display: block;
font-size: 25px;
font-weight: 900;
color: #FFF;
}
@media only screen and (max-width: 991px) {
#countdown-clock {
width: 100%;
}
}
/*== >Alert box =====*/
.alert.alert-sm {
padding: 5px 15px;
font-size: 12px;
}
.alert.alert-lg {
padding: 25px 15px;
font-size: 16px;
}
.alert.alert-xl {
padding: 35px 15px;
font-size: 18px;
}
.alert[class*="alert-"] i {
margin-right: 8px;
}
.alert.no-radius {
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
.alert.no-bg {
background-color: transparent;
border-width: 2px;
}
.alert[class*="alert-"] ul {
padding-left: 25px;
margin-top: 10px;
}
.alert[class*="alert-"] ul li:before {
color: #a94442;
}
/*== >Modal pop =====*/
.modal-header {
border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
}
.modal-footer {
border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
}
.modal-header {
background: #EFBB20;
padding: 15px 25px;
}
.modal-header .modal-title {
color: #fff;
}
.modal .modal-body {
padding: 25px;
}
.modal-xlg {
width: 1000px;
}
.provider_registration .bootstrap-select div.dropdown-menu ul li a {
font-weight: 600;
}
.provider_registration .bootstrap-select div.dropdown-menu ul li a span.childcat {
font-weight: 400;
color: #7c7c7c;
}
@media only screen and (max-width: 1024px) {
.modal-xlg {
width: auto;
margin-left: 15px;
margin-right: 15px;
}
}
/*== >Social icons ===*/
/* social icon default */
.dez-social-icon {
display: inline-block;
margin: 0 -3px;
padding: 0;
text-align: center;
}
.dez-social-icon li {
display: inline-block;
padding: 0;
font-size: 12px;
}
.dez-social-icon li a {
display: inline-block;
width: 24px;
height: 24px;
padding: 4px;
}
.dez-social-icon li .fa {
vertical-align: middle;
}
/* social icon with border */
.dez-social-icon.dez-border li {
padding: 0 3px;
}
.dez-social-icon.dez-border li a {
border: 1px solid rgba(255, 255, 255, 0.05);
}
/* social icon dark */
.dez-social-links.dark li {
padding: 0 3px;
}
.dez-social-icon.dark li a {
border: 1px solid #777777;
color: #777777;
border-radius: 2px;
-webkit-border-radius: 2px;
}
/* social share icon style 1*/
.dez-share-icon li {
border: none;
width: 36px;
display: block;
float: left;
white-space: nowrap;
overflow: hidden;
margin-right: 0;
}
.dez-share-icon li a {
color: #FFF;
}
.dez-share-icon li i {
border-right: none;
font-size: 14px;
color: #FFF;
width: 36px;
height: 34px;
line-height: 34px;
padding: 0;
text-align: center;
}
.dez-share-icon li.fb {
background: #354d89;
}
.dez-share-icon li.fb i {
background: #3a5799;
}
.dez-share-icon li.gp {
background: #d34b2b;
}
.dez-share-icon li.gp i {
background: #e35736;
}
.dez-share-icon li.tw {
background: #029fdf;
}
.dez-share-icon li.tw i {
background: #00abf0;
}
.dez-share-icon li.dig {
background: #1d61aa;
}
.dez-share-icon li.dig i {
background: #2B6FB8;
}
.dez-share-icon li.lin {
background: #0176be;
}
.dez-share-icon li.lin i {
background: #0082CA;
}
.dez-share-icon li.pin {
background: #ac0104;
}
.dez-share-icon li.pin i {
background: #BD0E15;
}
.dez-share-icon li:hover {
width: 90px;
}
/*== >Breadcrumb ====*/
.breadcrumb-row {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
padding: 20px 0;
position: relative;
text-align: center;
z-index: 1;
margin-top: -60px;
}
.breadcrumb-row ul {
margin: 0;
}
.breadcrumb-row ul li {
padding: 0;
margin-right: 3px;
color: #333333;
}
.breadcrumb-row ul li:after {
content: "/";
margin-left: 7px;
color: #fff;
}
.breadcrumb-row ul li:last-child {
color: #fff;
}
.breadcrumb-row ul li:last-child:after {
display: none;
}
/*== >Tables ====*/
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
padding: 10px;
}
.table.borderless > tbody > tr > td,
.table.borderless > tbody > tr > th {
border: none;
}
/*data table*/
.dataTable .sorting_asc .checkbox {
margin-right: 0;
}
/*== >Image effects ==*/
/*use for section*/
.overlay-black-light,
.overlay-black-middle,
.overlay-black-dark,
.overlay-gradient-light,
.overlay-gradient-middle,
.overlay-gradient-dark,
.overlay-white-light,
.overlay-white-middle,
.overlay-white-dark,
.overlay-primary-light,
.overlay-primary-middle,
.overlay-primary-dark {
position: relative;
}
.overlay-black-light:after,
.overlay-black-middle:after,
.overlay-black-dark:after,
.overlay-gradient-light:after,
.overlay-gradient-middle:after,
.overlay-gradient-dark:after,
.overlay-white-light:after,
.overlay-white-middle:after,
.overlay-white-dark:after,
.overlay-primary-light:after,
.overlay-primary-middle:after,
.overlay-primary-dark:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.overlay-black-light:after,
.overlay-black-middle:after,
.overlay-black-dark:after {
background: #000;
}
.overlay-gradient-light:after,
.overlay-gradient-middle:after,
.overlay-gradient-dark:after {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
/* IE6-9 */
}
.overlay-white-light:after,
.overlay-white-middle:after,
.overlay-white-dark:after {
background: #FFF;
}
.overlay-primary-light:after,
.overlay-primary-middle:after,
.overlay-primary-dark:after {
background: #000000;
}
.overlay-black-light:after {
opacity: 0.3;
}
.overlay-black-middle:after {
opacity: 0.5;
}
.overlay-black-dark:after {
opacity: 0.9;
}
.overlay-gradient-light:after {
opacity: 0.3;
}
.overlay-gradient-middle:after {
opacity: 0.5;
}
.overlay-gradient-dark:after {
opacity: 0.9;
}
.overlay-white-light:after {
opacity: 0.5;
}
.overlay-white-middle:after {
opacity: 0.7;
}
.overlay-white-dark:after {
opacity: 0.9;
}
.overlay-primary-light:after {
opacity: 0.3;
}
.overlay-primary-middle:after {
opacity: 0.5;
}
.overlay-primary-dark:after {
opacity: 0.9;
}
.overlay-black-light .container,
.overlay-black-middle .container,
.overlay-black-dark .container,
.overlay-white-light .container,
.overlay-white-middle .container,
.overlay-white-dark .container,
.overlay-primary-light .container,
.overlay-primary-middle .container,
.overlay-primary-dark .container,
.overlay-black-light .container-fluid,
.overlay-black-middle .container-fluid,
.overlay-black-dark .container-fluid,
.overlay-white-light .container-fluid,
.overlay-white-middle .container-fluid,
.overlay-white-dark .container-fluid,
.overlay-primary-light .container-fluid,
.overlay-primary-middle .container-fluid,
.overlay-primary-dark .container-fluid {
position: relative;
z-index: 1;
}
/*use for box*/
.overlay-bx {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 2;
opacity: 0;
visibility: hidden;
}
.overlay-icon {
list-style: none;
width: 160px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
margin: -20px -75px;
}
.overlay-icon a {
display: inline-block;
padding: 0;
margin: 0 2px;
}
.overlay-icon a i {
background-color: #FFF;
}
.overlay-bx:hover a > i,
.dez-media:hover .overlay-bx a > i,
.dez-box-bx:hover .overlay-bx a > i {
opacity: 1;
visibility: visible;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.overlay-bx:hover,
.dez-media:hover .overlay-bx,
.dez-box:hover .overlay-bx,
.ow-img:hover .overlay-bx,
.ow-portfolio-img:hover .overlay-bx {
opacity: 1;
visibility: visible;
}
/* show for text */
.overlay-text {
width: 100%;
position: absolute;
padding: 20px;
color: #FFF;
left: 0;
bottom: 20px;
}
.dez-address-bx {
display: table;
text-align: left;
padding: 20px 20px 20px 25px;
width: 100%;
height: 100%;
position: relative;
font-size: 14px;
vertical-align: middle;
font-weight: 600;
}
.dez-address-bx .fa {
position: absolute;
top: 22px;
left: 0;
font-size: 22px;
}
.col-md-3 .overlay-text {
padding: 5px;
}
.col-md-4 .overlay-text {
padding: 20px;
}
.dez-address2-bx {
display: table;
background: #eaeaea;
padding: 5px 10px;
margin-bottom: 10px
}
/* == 10. ICON BOXES ==*/
.icon-bx-xl,
.icon-bx-lg,
.icon-bx-md,
.icon-bx-sm,
.icon-bx-xs {
display: inline-block;
text-align: center;
}
.icon-bx-xl {
width: 150px;
height: 150px;
line-height: 150px;
}
.icon-bx-lg {
width: 120px;
height: 120px;
line-height: 120px;
}
.icon-bx-md {
width: 100px;
height: 100px;
line-height: 100px;
}
.icon-bx-sm {
width: 80px;
height: 80px;
line-height: 80px;
}
.icon-bx-xs {
width: 40px;
height: 40px;
line-height: 40px;
}
.icon-bx-xl.radius,
.icon-bx-lg.radius,
.icon-bx-md.radius,
.icon-bx-sm.radius,
.icon-bx-xs.radius {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
.border-1,
.border-2,
.border-3,
.border-4,
.border-5 {
border-style: solid;
}
.border-1 {
border-width: 1px;
}
.border-2 {
border-width: 2px;
}
.border-3 {
border-width: 3px;
}
.border-4 {
border-width: 4px;
}
.border-5 {
border-width: 5px;
}
.icon-bx-xl i,
.icon-bx-lg i,
.icon-bx-md i,
.icon-bx-sm i,
.icon-bx-xs i {
vertical-align: middle;
}
.icon-bx-xl i {
font-size: 80px;
}
.icon-bx-lg i {
font-size: 60px;
}
.icon-bx-md i {
font-size: 45px;
}
.icon-bx-sm i {
font-size: 30px;
}
.icon-bx-xs i {
font-size: 20px;
}
.icon-bx-xl img,
.icon-bx-lg img,
.icon-bx-md img,
.icon-bx-sm img,
.icon-bx-xs img {
vertical-align: middle;
max-width: 100%;
width: auto;
}
.icon-bx-xl img {
height: 80px;
}
.icon-bx-lg img {
height: 55px;
}
.icon-bx-md img {
height: 40px;
}
.icon-bx-sm img {
height: 30px;
}
.icon-bx-xs img {
height: 20px;
}
/*== 11. ICON ==*/
.icon-xl,
.icon-lg,
.icon-md,
.icon-sm,
.icon-xs {
display: inline-block;
text-align: center;
}
.icon-xl {
width: 100px;
}
.icon-lg {
width: 80px;
}
.icon-md {
width: 60px;
}
.icon-sm {
width: 40px;
}
.icon-xs {
width: 30px;
}
.icon-xl i,
.icon-lg i,
.icon-md i,
.icon-sm i,
.icon-xs i {
vertical-align: middle;
}
.icon-xl i {
font-size: 80px;
}
.icon-lg i {
font-size: 60px;
}
.icon-md i {
font-size: 45px;
}
.icon-sm i {
font-size: 30px;
}
.icon-xs i {
font-size: 20px;
}
.icon-xl img,
.icon-lg img,
.icon-md img,
.icon-sm img,
.icon-xs img {
vertical-align: middle;
max-width: 100%;
width: auto;
}
.icon-xl img {
height: 80px;
}
.icon-lg img {
height: 70px;
}
.icon-md img {
height: 50px;
}
.icon-sm img {
height: 30px;
}
.icon-xs img {
height: 20px;
}
/*== place icon with box ==*/
.icon-bx-wraper {
position: relative;
}
.icon-bx-wraper .dez-tilte {
margin-top: 0;
}
.icon-bx-wraper .after-titile-line {
margin-bottom: 10px;
}
.icon-bx-wraper p:last-child {
margin: 0;
}
.icon-content {
overflow: hidden;
}
/* icon box left aligh */
.icon-bx-wraper.left .icon-bx-xl,
.icon-bx-wraper.left .icon-bx-lg,
.icon-bx-wraper.left .icon-bx-md,
.icon-bx-wraper.left .icon-bx-sm,
.icon-bx-wraper.left .icon-bx-xs {
float: left;
margin-right: 20px;
}
.icon-bx-wraper.left .icon-xl,
.icon-bx-wraper.left .icon-lg,
.icon-bx-wraper.left .icon-md,
.icon-bx-wraper.left .icon-sm,
.icon-bx-wraper.left .icon-xs {
float: left;
margin-right: 10px;
}
/* icon box right aligh */
.icon-bx-wraper.right {
text-align: right;
}
.icon-bx-wraper.right .icon-bx-xl,
.icon-bx-wraper.right .icon-bx-lg,
.icon-bx-wraper.right .icon-bx-md,
.icon-bx-wraper.right .icon-bx-sm,
.icon-bx-wraper.right .icon-bx-xs {
float: right;
margin-left: 20px;
}
.icon-bx-wraper.right .icon-xl,
.icon-bx-wraper.right .icon-lg,
.icon-bx-wraper.right .icon-md,
.icon-bx-wraper.right .icon-sm,
.icon-bx-wraper.right .icon-xs {
float: right;
margin-left: 10px;
}
/* icon box center aligh */
.icon-bx-wraper.center {
text-align: center;
}
[class*="icon-bx-"][class*="bg-"] a {
color: #fff;
}
[class*="icon-bx-"].bg-white a {
color: inherit;
}
[class*="icon-bx-"][class*="border-"] {
display: table;
line-height: normal;
margin-left: auto;
margin-right: auto;
}
[class*="icon-bx-"][class*="border-"] .icon-cell {
display: table-cell;
vertical-align: middle;
}
.icon-bx-wraper.bx-style-1,
.icon-bx-wraper.bx-style-2 {
border-width: 1px;
border-style: solid;
border-color: #ddd;
}
.icon-bx-wraper.bx-style-2.center [class*="icon-bx-"],
.icon-bx-wraper.bx-style-2.left [class*="icon-bx-"],
.icon-bx-wraper.bx-style-2.right [class*="icon-bx-"] {
position: absolute;
}
.icon-bx-wraper.bx-style-2.center [class*="icon-bx-"] {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon-bx-wraper.bx-style-2.center .icon-bx-xl {
margin-left: -75px;
}
.icon-bx-wraper.bx-style-2.center .icon-bx-lg {
margin-left: -60px;
}
.icon-bx-wraper.bx-style-2.center .icon-bx-md {
margin-left: -50px;
}
.icon-bx-wraper.bx-style-2.center .icon-bx-sm {
margin-left: -40px;
}
.icon-bx-wraper.bx-style-2.center .icon-bx-xs {
margin-left: -20px;
}
.icon-bx-wraper.bx-style-2.left [class*="icon-bx-"] {
position: absolute;
top: auto;
left: 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.icon-bx-wraper.bx-style-2.right [class*="icon-bx-"] {
position: absolute;
top: auto;
right: 0;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
/*== media with content box css ==*/
.dez-box,
.dez-info,
.dez-tilte,
.dez-tilte-inner {
position: relative;
}
.dez-tilte-inner {
display: inline-block;
}
.dez-tilte-inner.skew-title:after {
content: "";
position: absolute;
right: -15px;
top: 0;
width: 50px;
height: 100%;
z-index: -1;
-moz-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
-o-transform: skewX(20deg);
-ms-transform: skewX(20deg);
transform: skewX(20deg);
}
.dez-box[class*="border-"],
.dez-info[class*="border-"] {
border-color: #eee;
}
.dez-info.border-1,
.dez-info.border-2,
.dez-info.border-3,
.dez-info.border-4,
.dez-info.border-5 {
border-top: none;
}
/*== before & after for line css ==*/
.left-border,
.right-border {
position: relative;
}
.left-border:before,
.right-border:before {
content: "";
position: absolute;
top: 5px;
width: 1px;
height: 90%;
background: #CCC;
}
.right-border:before {
right: 0;
}
/*==for images==*/
.dez-media,
.dez-media,
.dez-post-media {
background-color: #FFF;
position: relative;
}
.dez-media img,
.dez-post-media img {
width: 100%;
height: auto;
}
.post-video iframe {
height: 510px;
width: 100%; }
@media only screen and (max-width: 767px) {
.post-video iframe {
height: 350px; } }
@media only screen and (max-width: 575px) {
.post-video iframe {
height: 250px;
} }
.dz-media,
.dz-post-media {
position: relative;
overflow: hidden;
}
.dz-media img,
.dz-post-media img {
width: 100%;
height: auto;
}
.modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide .status-top-box:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 110%;
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0.3%, rgba(0, 0, 0, 0.6) 100%);
opacity: 0.6;
z-index: -1;
}
@media only screen and (max-width: 575px) {
.modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide .status-top-box .title {
font-size: 20px;
}
}
@media only screen and (max-width: 400px) {
.modal-dialog {
margin: 0;
}
}
.blog-single > .dz-media.post-link img + .post-link-in {
background: rgba(255, 255, 255, 0.8);
color: #000000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80px;
gap: 10px;
}
.blog-single > .dz-media.post-link img + .post-link-in:hover {
background: var(--primary);
color: #fff; }
.blog-single > .dz-media.post-link::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px); }
.blog-single > .dz-media.post-link:not(:has(img))::after {
content: none; }
.blog-single > .dz-media.post-link:not(:has(img)) > .post-link-in {
position: static;
transform: none;
width: auto;
background-color: var(--primary); }
.post-link-in {
padding: 15px 15px;
background: var(--primary);
color: #fff;
font-size: 22px;
font-weight: 500;
position: static;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s;
-webkit-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
z-index: 1; }
.blog-single > .dz-media > img + .quote-text {
position: absolute;
}
.blog-single > .dz-media:not(:has(img)) > .quote-text {
position: static;
transform: none;
width: auto;
background-color: var(--rgba-primary-1);
}
.quote-text {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.9);
width: 720px;
}
@media only screen and (max-width: 1199px) {
.quote-text {
width: 510px;
padding: 20px;
}
}
@media only screen and (max-width: 767px) {
.quote-text {
width: calc(100% - 20px);
padding: 8px;
}
}
@media only screen and (max-width: 1199px) {
.quote-text blockquote p {
font-size: 18px;
}
}
@media only screen and (max-width: 575px) {
.quote-text blockquote p {
font-size: 12px;
}
.post-link-in {
font-size: 15px;
}
}
/*==for images==*/
.dlab-media,
.dlab-media,
.dlab-post-media {
position: relative;
}
.dlab-media img,
.dlab-post-media img {
width: 100%;
height: auto;
}
.dlab-media {
overflow: hidden;
position: relative;
}
.tutorial {
border-width: 2px;
border-style: solid;
border-color: #e7e7e7;
border-image: initial;
border-radius: 10px;
padding: 20px;
background: white;
}
.tutorial-data > div {
scroll-margin-top: 100px;
}
.tutorial ul li {
list-style: none;
margin-bottom: 5px;
}
.cateloge {
border: 1px solid #e7e7e7;
border-radius: 4px;
Padding:20px;
background: #ffffff;
display: flex;
gap: 20rem;
margin-bottom: 15px;
}
.cateloge table td {
padding: 10px 0px;
}
.dlab-img-effect {
position: relative;
overflow: hidden;
display: block;
vertical-align: middle;
}
.dlab-img-effect img {
display: block;
margin: 0;
width: 100%;
height: auto;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
transition: all 0.25s;
-moz-transition: all 0.25s;
-webkit-transition: all 0.25s;
-o-transition: all 0.25s;
}
.xl-sticky-top > .side-bar,
.sticky-top,
.sticky-top > .side-bar{
position:sticky;
position: -webkit-sticky;
top:100px;
}
/* Product Gallery */
.product-gallery.on-show-slider{
position:relative;
}
.status-media {
position: relative;
}
@media only screen and (max-width: 575px) {
.status-btn {
display: flex;
flex-direction: column;
justify-content: end;
}
.blog-single > .dz-media.post-link img + .post-link-in {
width: 80%;
gap: 10px;
height: unset;
}
}
.status-media .post-status-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;
width: 100px;
height: 100px;
border: 0;
background-color: rgba(0, 0, 0, 0.4);
}
@media only screen and (max-width: 575px) {
.status-media .post-status-btn {
width: 70px;
height: 70px;
}
.status-media .post-status-btn svg {
width: 22px;
height: 22px;
}
}
.modal.status-modal {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
z-index: 99999;
overflow-y: hidden;
}
@media only screen and (max-width: 575px){
.modal.status-modal .modal-dialog {
margin: 0;
}
}
.modal.status-modal .btn-close {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 44px;
color: #fff;
background-image: url('data:image/svg+xml,');
z-index: 9;
}
@media only screen and (max-width: 575px){
.modal.status-modal .btn-close {
top: 10px;
right: 10px;
}
}
.modal.status-modal .status-pagination {
position: absolute;
top: 0;
bottom: auto !important;
left: 50% !important;
height: auto;
width: 100%;
display: flex;
justify-content: space-between;
z-index: 9;
transform: translate(-50%);
padding: 10px 0;
}
.modal.status-modal .status-pagination .swiper-pagination-bullet {
height: 5px;
background-color: rgba(255, 255, 255, 0.5);
opacity: 1;
width: 100%;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.modal.status-modal .status-pagination .swiper-pagination-bullet::after {
content: "";
height: 100%;
width: 0;
background: #fff;
position: absolute;
top: 0;
left: 0;
}
.modal.status-modal .status-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
width: 100%;
transition: 3.5s linear;
}
.modal.status-modal .modal-content {
border-radius: 30px;
}
.modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide {
height: unset;
}
.modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide .status-top-box {
position: absolute;
top: 0;
left: 0;
z-index: 9;
color: #fff;
width: 100%;
display: flex;
justify-content: space-between;
padding: 30px 20px 0px 20px;
}
.modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide .status-top-box .post-date {
font-size: 16px;
color: #fff;
}
.modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide .status-top-box .title {
font-size: 24px;
color: #fff;
font-weight: 800;
margin-bottom: 0;
}
@media only screen and (max-width: 480px){
.modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide .status-top-box .title {
font-size: 20px;
font-weight: 700;
}
}
.modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide .status-top-box .status-btn .btn.btn-sm {
white-space: nowrap;
padding: 6px 10px;
border-radius: 5px;
background: #000;
color: #fff;
}
.modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide .status-top-box .status-btn .btn.btn-sm:hover {
background-color: #ebebeb;
color: #000;
}
.modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide .status-top-box .status-btn .volume-icon {
width: 44px;
height: 44px;
position: relative;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
float: right;
}
.modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide img {
height: 100vh;
width: 100%;
object-fit: cover;
}
.modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide video {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
object-fit: cover;
z-index: -1;
}
.fullscreen-cover {
height: 100vh !important;
object-fit: cover;
width: 100%;
}
@media only screen and (max-width: 575px) {
.fullscreen-cover {
height: 50vh !important;
object-fit: cover;
width: 100%;
}
}
/*---------------------------------------------------------------
25. PAGINATION
---------------------------------------------------------------*/
/* pagination style-1 */
.pagination-bx .pagination,
.cvf-universal-pagination .pagination {
margin: 0;
}
.pagination {
padding: 10px 0;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: 0;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.pagination > li > a,
.pagination > li > span {
background-color: #fff;
border: 1px solid #e0e0e0;
color: #767676;
padding: 8px 14px;
font-weight: 600;
font-size: 12px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
border-color: transparent;
color: #fff;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
border-color: transparent;
}
.pagination > .previous > a,
.pagination > .next > a {
padding: 8px 14px;
font-size: 12px;
}
/*DataTable pagination */
.dataTables_paginate ul.pagination {
margin: 0;
}
.dataTables_paginate .pagination > li {
padding: 0;
}
/*---------------------------------------------------------------
26. FOOTER
---------------------------------------------------------------*/
/*newslatter*/
.dez-newsletter {
overflow-x: hidden;
}
.skew-subscribe {
position: relative;
}
.skew-subscribe:after {
background-color: #12151a;
content: "";
position: absolute;
left: -50px;
bottom: 0;
width: 2000px;
height: 100%;
border-right: 7px solid #2D3239;
-webkit-transform: skew( 30deg);
-moz-transform: skew( 30deg);
-o-transform: skew( 30deg);
-ms-transform: skew( 30deg);
transform: skew(30deg);
}
@media only screen and (max-width: 767px) {
.dez-newsletter .p-t40.p-b20 {
padding-top: 30px;
padding-bottom: 0;
}
.skew-subscribe.p-t40.p-b20 {
padding-top: 30px;
padding-bottom: 0;
}
.skew-subscribe:after {
left: auto;
right: 30px;
-webkit-transform: skew( -30deg);
-moz-transform: skew( -30deg);
-o-transform: skew( -30deg);
-ms-transform: skew( -30deg);
transform: skew(-30deg);
}
}
/* footer fixed on bottom css*/
.footer-fixed .site-footer {
position: fixed;
width: 100%;
bottom: 0;
}
.footer-fixed .page-content {
position: relative;
z-index: 1;
background-color: #fff;
}
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer h1 a,
footer h2 a,
footer h3 a,
footer h4 a,
footer h5 a,
footer h6 a {
color: #fff;
}
footer p,
footer strong,
footer b,
footer {
color: #fff;
}
footer h1 a,
footer h2 a,
footer h3 a,
footer h4 a,
footer h5 a,
footer h6 a,
footer p a {
color: #EFBB20;
;
}
footer a,
footer a:visited {
color: #fff;
}
footer a:active,
footer a:focus,
footer a:hover {
color: #EFBB20;
}
footer p {
margin-bottom: 10px;
}
footer p,
footer li {
font-size: 15px;
line-height: 22px;
}
footer#footer {
background-position: center;
background-size: cover;
}
.dez-top-footer-overlay,
.dez-bottom-footer-overlay {
position: relative;
}
.dez-top-footer-overlay .container,
.dez-bottom-footer-overlay .container {
position: relative;
z-index: 1;
}
.dez-top-footer-overlay:before,
.dez-bottom-footer-overlay:before {
content: "";
background: #000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.dez-top-footer-overlay:before {
opacity: 2;
}
.dez-bottom-footer-overlay:before {
opacity: 2;
}
footer p {
line-height: 24px;
margin-bottom: 10px;
}
footer p a {
color: #3396d1;
}
footer .widget ul {
list-style: none;
margin-top: 5px;
}
/*widget li in footer*/
footer .widget_categories ul li,
footer .widget_archive ul li,
footer .widget_meta ul li,
footer .widget_pages ul li,
footer .widget_recent_comments ul li,
footer .widget_nav_menu li,
footer .widget_recent_entries ul li,
footer .widget_services ul li {
border-bottom: 1px dashed rgba(102, 102, 102, 0.3);
}
/*widget Getintuch*/
footer .widget_getintuch i {
background-color: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.footer-top {
background: #6F3662;
background-size: cover;
background-position: center;
padding: 50px 0 20px;
}
.footer-line {
position: relative;
}
.footer-line:after {
content: "";
position: absolute;
top: 0;
height: 5px;
width: 100%;
background-color: #EFBB20;
background-image: url(../images/line.html);
background-position: top;
background-repeat: repeat-x;
}
.footer-bottom {
background-color: #5F2652;
padding: 30px 0;
color: #fff;
font-size: 15px;
}
.footer-bottom ul {
margin: 0;
}
@media only screen and (max-width: 991px) {
footer .container {
width: 100%;
}
.col-md-3.col-sm-6.footer-col-4:nth-child(3) {
clear: both;
}
}
@media only screen and (max-width: 767px) {
.footer-clear {
display: block !important;
clear: both;
}
#footer .footer-4-col {
width: 100%;
}
.footer-bottom [class*="clo-"] {
width: 100%;
}
}
/* scroll top btn css */
button.scroltop {
background: var(--color-primary);
border-color: #efbb20;
border-radius: 4px;
border-style: solid;
border-width: 0;
bottom: 15px;
color:#fff !important;
cursor: pointer;
display: none;
height: 50px;
line-height: 50px;
margin: 0;
position: fixed;
right: 15px;
text-align: center;
width: 50px;
z-index: 999;
box-shadow: -4px 4px 24px -10px var(--color-primary);
transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
}
button.scroltop.style3:after,
button.scroltop.style2:after,
button.scroltop.style1:after{
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
content: '';
top: 0;
left: 0;
padding: 0;
z-index: -1;
background: inherit;
-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
-moz-transition: -moz-transform 0.2s, opacity 0.3s;
transition: transform 0.2s, opacity 0.3s;
}
button.scroltop.style1:hover:after {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
button.scroltop.radius{
border-radius:100%;
}
button.scroltop.white{
background:#fff;
color:var(--color-primary) !important;
}
button.scroltop.style2:after {
border: 1px dashed var(--color-primary);
background: transparent;
transform: scale(1.2);
transition: all 0.5s;
}
button.scroltop.style2:hover:after {
-webkit-animation: spinAround 9s linear infinite;
-moz-animation: spinAround 9s linear infinite;
animation: spinAround 9s linear infinite;
}
@-webkit-keyframes spinAround {
from {
-webkit-transform: rotate(0deg) scale(1.2)
}
to {
-webkit-transform: rotate(360deg) scale(1.2);
}
}
@-moz-keyframes spinAround {
from {
-moz-transform: rotate(0deg) scale(1.2)
}
to {
-moz-transform: rotate(360deg) scale(1.2);
}
}
@keyframes spinAround {
from {
transform: rotate(0deg) scale(1.2)
}
to {
transform: rotate(360deg) scale(1.2);
}
}
.icon-bx-wraper:hover .icon-up img,
.icon-bx-wraper:hover .icon-up i,
.icon-up:hover i {
-webkit-animation: toTopFromBottom 0.8s forwards;
-moz-animation: toTopFromBottom 0.8s forwards;
animation: toTopFromBottom 0.8s forwards;
}
@media only screen and (max-width: 591px){
button.scroltop{
height: 35px;
line-height: 35px;
width: 35px;
}
}
@-webkit-keyframes toTopFromBottom {
49% {
-webkit-transform: translateY(-100%);
}
50% {
opacity: 0;
-webkit-transform: translateY(100%);
}
51% {
opacity: 1;
}
}
@-moz-keyframes toTopFromBottom {
49% {
-moz-transform: translateY(-100%);
}
50% {
opacity: 0;
-moz-transform: translateY(100%);
}
51% {
opacity: 1;
}
}
@keyframes toTopFromBottom {
49% {
transform: translateY(-100%);
}
50% {
opacity: 0;
transform: translateY(100%);
}
51% {
opacity: 1;
}
}
button.scroltop.style3:after{
background: transparent;
border: 1px solid var(--color-primary);
}
button.scroltop.style3:hover:after{
transform: scale(1.2);
}
button.scroltop.style4{
transition:all 0.5s;
}
button.scroltop.style4:hover{
transform: scale(1.1);
}
.yoga-footer .footer-top .saf-footer {
padding: 50px 30px 20px;
background-color: #6f3662;
}
.yoga-footer .footer-top {
padding-bottom: 0;
}
.yoga-footer .footer-top,
.yoga-footer .footer-bottom {
background-color: #5F2652
}
.yoga-footer .widget {
margin-bottom: 0;
}
.yoga-footer .newsletter {
max-width: 500px;
margin: 0px auto 30px;
}
.yoga-footer .newsletter input[type="text"] {
background-color: #6F3662;
border: 0;
border-radius: 30px !important;
}
.yoga-footer .newsletter input,
.yoga-footer .newsletter button {
height: 50px;
padding-left: 20px;
padding-right: 20px;
}
.yoga-footer .section-head {
margin-bottom: 30px;
}
.footer-social li a {
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 50px;
}
.footer-social li a:hover {
color: #fff;
}
/* Footer Bg Image */
.footer-image .footer-top,
.footer-image .footer-bottom {
background-color: rgba(0, 0, 0, 0);
}
.footer-image .saf-footer,
.footer-image .newsletter input[type="text"],
.yoga-footer.footer-image .footer-top .saf-footer {
background-color: rgba(0, 0, 0, 0.5);
}
.site-footer .widget_services ul li a {
color: #ffffff;
}
/* Footer Overlay */
.footer-overlay .footer-bottom {
background-color: rgba(0, 0, 0, 0.85);
}
.footer-overlay .footer-top {
background-color: rgba(0, 0, 0, 0.8);
}
/* Footer Style */
.footer-info-box {
border: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-info-box .dez-social-icon li a {
background-color: #ffffff;
border: medium none;
border-radius: 100%;
font-size: 16px;
height: 38px;
line-height: 38px;
padding: 0;
width: 38px;
}
.newsletter input {
height: 44px;
}
.footer-info-box .dez-social-icon {
border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
display: inline-block;
margin: 0 -3px;
padding: 0 0 15px;
text-align: center;
}
.footer-info-box .newsletter .input-group {
background-color: #ffffff;
border-radius: 4px;
overflow: hidden;
}
.footer-info-box .newsletter input[type="text"] {
background-color: #fff;
}
/* Footer White */
.footer-white {
border-top: 2px solid #e0e0e0;
}
.footer-white .footer-top {
background-color: #fff;
}
.footer-white .footer-bottom {
background-color: #efefef;
}
footer.footer-white h1,
footer.footer-white h2,
footer.footer-white h3,
footer.footer-white h4,
footer.footer-white h5,
footer.footer-white h6,
footer.footer-white h1 a,
footer.footer-white h2 a,
footer.footer-white h3 a,
footer.footer-white h4 a,
footer.footer-white h5 a,
footer.footer-white h6 a,
footer.footer-white.site-footer .widget_services ul li a,
footer.footer-white p,
footer.footer-white strong,
footer.footer-white b,
footer.footer-white,
footer.footer-white .dez-post-meta li,
footer.footer-white .dez-post-meta a,
footer.footer-white .recent-posts-entry .dez-post-meta a,
footer.footer-white .dez-post-meta i,
footer.footer-white .footer-bottom,
footer.footer-white .footer-bottom a {
color: #000
}
footer .dez-post-meta li,
footer .dez-post-meta a,
footer .recent-posts-entry .dez-post-meta a,
footer .dez-post-meta i{
color:#fff;
}
/*---------------------------------------------------------------
27. PAGE-CONTENT
---------------------------------------------------------------*/
.page-wraper{
background: #fff;
}
.section-full {
position: relative;
}
.content-area {
padding-top: 120px !important;
}
@media only screen and (max-width: 991px) {
.content-area {
padding-top: 70px !important;
}
}
/*= Section Head Part =*/
.section-head {
margin-bottom: 50px;
}
.section-head.no-margin {
margin-bottom: 0;
}
.section-head h1,
.section-head h2,
.section-head h3 {
margin-top: 0;
}
.title-small {
display: block;
color: #494949;
margin-bottom: 15px;
}
.section-head p {
padding-top: 10px;
font-size: 14px;
color: #797979;
}
.text-center.section-head p {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
.text-white {
color: #FFF;
}
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white .title-small {
color: #FFF;
}
/*= Section Content Part =*/
.section-content {} @media only screen and (max-width: 1024px) {
.section-full {
background-attachment: scroll !important;
}
}
@media only screen and (max-width: 991px) {
.page-content {
margin-top: 0;
}
}
/*---------------------------------------------------------------
28. INNER-CONTENT
---------------------------------------------------------------*/
/*page not found*/
.page-notfound {
padding: 50px 0;
}
.page-notfound strong {
font-size: 200px;
font-weight: 900;
line-height: 140px;
display: block;
}
.page-notfound strong i {
font-size: 190px;
margin: 0 10px;
}
.page-notfound .searchform {
position: relative;
text-align: left;
max-width: 420px;
margin: 30px auto;
}
.error-text {
font-size: 200px;
font-weight: unset;
line-height: 200px;
}
.error-box p{
font-size: 22px;
line-height: 36px;
margin: auto;
max-width: 600px;
}
.error-box .input-group {
margin: 20px auto;
max-width: 500px;
}
.error-box .input-group input{
height:45px;
border-width:2px 0px 2px 2px;
}
/* themeforest required classes */
.sticky {
clear: both;
}
.gallery-caption {
clear: both;
}
.bypostauthor {
clear: both;
}
/*Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
/*===============================================
gallery pages css
=============================================== */
.dez-gallery-listing {
list-style: none;
}
.dez-gallery-box {
margin-bottom: 30px;
}
.dez-gallery-box .check-km{
cursor:pointer;
}
.dez-gallery-box .icon-bx-xs{
background-color:#fff;
color:var(--color-primary);
font-size:15px;
}
/* Light Gallery */
.lg-actions .lg-next,
.lg-actions .lg-prev,
.lg-sub-html,
.lg-toolbar{
background-color: var(--color-primary);
}
.lg-outer .lg-toogle-thumb,
.lg-outer .lg-thumb-outer,
.lg-outer .lg-img-wrap,
.lg-outer .lg-item{
background-color:#fff;
}
.lg-actions .lg-next,
.lg-actions .lg-prev,
.lg-toolbar .lg-icon,
#lg-counter{
color: #fff;
}
/*===============================================
Layout boxed css
=============================================== */
#bg {
background-attachment: fixed;
background-size: cover;
}
.boxed .page-wraper {
max-width: 1200px;
margin: 0 auto;
position: relative;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)
}
.boxed .tp-banner-container,
.boxed .rev_slider_wrapper {
left: 0 !important;
width: 100% !important;
}
.boxed .tp-rightarrow {
right: 0 !important;
}
.boxed .tp-leftarrow {
left: 0 !important;
}
.boxed.footer-fixed .site-footer {
left: 50%;
width: 1200px;
margin: 0 -600px;
}
.boxed .is-fixed .main-bar {
left: 50%;
width: 1200px;
margin: 0 -600px;
}
.boxed .is-fixed.header-curve .logo-header:after {
right: auto;
left: -15px;
width: 90%;
}
.owl-imgbx,
.ow-portfolio-img {
position: relative;
}
.ow-entry-content {
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #eee;
background-color: #fff;
padding: 20px;
margin-bottom: 5px;
}
.ow-entry-title {
font-size: 16px;
font-weight: 600;
padding: 5px 0;
}
.ow-entry-title,
.ow-entry-title a {
color: #3d474a;
}
.ow-entry-text p:last-child {
margin: 0;
}
/*product detail page css*/
/* Product Details*/
.btn-quantity {
width: 150px;
}
.product-description.dex-tabs.border-top .nav-tabs > li.active > a {
border-top: 2px solid #efbb20;
}
.product-description.dex-tabs .nav-tabs > li > a i {
color: #efbb20;
}
.dex-tabs.bg-tabs .nav-tabs > li > a {
background-color: #fcfcfc;
}
/*Product Review*/
ol.commentlist {
list-style: none;
margin: 0;
}
ol.commentlist li {
position: relative;
padding: 0;
margin-bottom: 20px;
background: #F7F8FA;
padding: 20px;
border: 1px dashed #EEEEEE;
min-height: 120px;
}
ol.commentlist li img {
float: left;
border: 5px solid #FFF;
width: 80px;
height: auto;
}
ol.commentlist li .comment-text {
padding-left: 100px;
}
ol.commentlist li .meta {
margin-bottom: 5px;
}
ol.commentlist li .meta strong {
font-size: 16px;
}
ol.commentlist li .meta .time {
color: #999;
display: block;
font-size: 14px;
}
ol.commentlist li .description p {
margin: 0;
}
ol.commentlist li .star-rating {
position: absolute;
top: 20px;
right: 20px;
}
.comment-reply-title {
margin-top: 0;
}
.comment-form [class*="comment-form"] {
width: 49%;
}
.comment-form label {
display: block;
}
.comment-form [class*="comment-form"] input,
.comment-form [class*="comment-form"] textarea {
border: 1px solid #CCC;
padding: 8px 10px;
width: 100%;
}
.comment-form {
margin: 0 -15px;
}
.comment-form [class*="comment-form"],
.comment-form .form-submit {
margin-bottom: 20px;
padding: 0 15px;
}
.comment-form .form-submit input:active,
.comment-form .form-submit input:focus,
.comment-form .form-submit input:hover {
background: #037a85;
}
.dez-quik-search {
background-color: rgba(0,0,0,0.9) !important;
position: fixed;
left: 0;
top: 0;
width: 100%;
height:100%;
z-index: 999;
display: none;
overflow: hidden;
padding: 0 20px;
}
.dez-quik-search.On form {
transition:all 0.5s ease 0.5s;
-moz-transition:all 0.5s ease 0.5s;
-webkit-transition:all 0.5s ease 0.5s;
max-width: 1200px;
opacity:1;
}
.dez-quik-search form {
width: 100%;
max-width: 100px;
margin: auto;
position: relative;
top: 50%;
transition:all 0.5s;
transition:all 0.5s;
-webkit-transition:all 0.5s;
-moz-transform: translate(0px, -50%);
-moz-transform: translate(0px, -50%);
-o-transform: translate(0px, -50%);
-webkit-transform: translate(0px, -50%);
opacity:0;
}
.dez-quik-search .form-control {
padding: 15px 60px 15px 15px;
width: 100%;
height: 90px;
border: none;
background: none;
color: #fff;
font-size: 20px;
border-bottom:2px solid rgba(255,255,255,0.2);
}
.dez-quik-search .form-control::-moz-placeholder {
color: #fff;
}
.dez-quik-search .form-control:-moz-placeholder {
color: #fff;
}
.dez-quik-search .form-control:-ms-input-placeholder {
color: #fff;
}
.dez-quik-search .form-control::-webkit-input-placeholder {
color: #fff;
}
.dez-quik-search span {
position: absolute;
right: 15px;
top: 50%;
margin: -15px 0;
height: 25px;
font-size: 20px;
cursor: pointer;
}
#gmap_canvas {
width: 100%;
height: 400px;
}
#gmap_canvas img {
max-width: none!important;
background: none!important
}
/* sosiyal btn color */
.fb-btn {
background-color: #4867AA;
}
.tw-btn {
background-color: #1DA1F2;
}
.gplus-btn {
background-color: #DC4A38;
}
.pin-btn {
background-color: #CC2127;
}
.link-btn {
background-color: #0274B3;
}
.dez-social-icon.dez-social-icon-lg li a {
font-size: 14px;
height: 35px;
line-height: 34px;
padding: 0;
width: 35px;
color: #ffffff;
}
/* Team Section */
.dez-media.dez-media-left .dez-info-has,
.dez-media.dez-media-top .dez-info-has,
.dez-media.dez-media-right .dez-info-has {
bottom: auto;
margin-bottom: 0;
top: 0;
}
/* Top Side Icon */
.dez-media.dez-media-top .dez-info-has {
margin-top: -100px;
}
.dez-media.dez-media-top:hover .dez-info-has,
.dez-box:hover .dez-media.dez-media-top .dez-info-has {
margin-top: 0;
}
/* Left Side Icon */
.dez-media.dez-media-left .dez-info-has {
left: 0;
padding: 15px;
width: auto;
margin-left: -60px;
}
.dez-media.dez-media-left:hover .dez-info-has {
margin-left: 0px;
}
.dez-media.dez-media-left .dez-social-icon li {
display: block;
margin: 3px 0;
}
/* Right Side Icon */
.dez-media.dez-media-right .dez-info-has {
right: 0;
padding: 15px;
width: auto;
left: auto;
margin-right: -60px;
}
.dez-media.dez-media-right:hover .dez-info-has {
margin-right: 0px;
}
.dez-media.dez-media-right .dez-social-icon li {
display: block;
margin: 3px 0;
}
/* footer social */
.footer-top .container {
position: relative;
}
.widget_tag_cloud.text-black a {
background: #111111;
}
/*---------------------------------------------------------------
29. SIDE-NAV
---------------------------------------------------------------*/
.sidenav.cs-sidenav {
width:800px;
right:-820px;
left:auto;
}
.sidenav {
height: 100%;
width: 300px;
position: fixed;
z-index: 9;
top: 0;
left: -320px;
background-color: #fff;
overflow-x: hidden;
transition: 0.5s;
box-shadow: 0 0 50px 15px rgba(0, 0, 0, 0.2);
border: 0 none;
border-radius: 0;
}
.sidenav > ul li a {
border-color: #ebebeb;
border-image: none;
border-style: solid;
border-width: 1px 0;
display: block;
margin-bottom: -1px;
padding: 12px 15px;
font-size: 15px;
font-weight: 600;
}
.sidenav > ul li a:hover {
color:#fff;
}
.sidenav .logo-header {
height: auto;
padding: 15px;
width: 100%;
}
.button-side-nav {
position: fixed;
right: 20px;
top: 20px;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
box-shadow: -2px 2px 5px 0 rgba(0, 0, 0, 0.4);
font-size: 17px;
cursor: pointer;
}
.sidenav .closebtn {
color: #ffffff;
font-size: 24px;
height: 35px;
line-height: 35px;
padding: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 35px;
z-index: 9;
}
#main {
transition: margin-left .5s;
}
@media only screen and (max-width: 800px) {
.sidenav.cs-sidenav {
width:100%;
}
}
/*---------------------------------------------------------------
30. ONE-PAGE-LAYOUT
---------------------------------------------------------------*/
.sidenav.full-page {
left: 0;
width: 280px;
}
.one-page-layout #main {
margin-left: 280px;
}
.contant-block {
padding-left: 30px;
padding-right: 30px;
position: relative;
z-index: 1;
margin: 0 auto;
max-width: 1500px;
}
.one-page-layout .closebtn,
.one-page-layout .button-side-nav {
display: none;
}
#myNavbar li.active a {
color: #fff;
}
.one-page-layout {
padding-bottom: 0;
margin-bottom: 0;
}
/* Right */
.one-page-layout.right-side .sidenav {
left: auto;
right: 0;
border-radius: 0;
}
.one-page-layout.right-side #main {
margin-left: 0;
margin-right: 280px;
}
/* Responsive Css */
@media only screen and (max-width: 1024px) {
.one-page-layout .closebtn,
.one-page-layout .button-side-nav {
display: block;
}
.sidenav.full-page {
left: -350px;
width: 300px;
z-index: 999;
}
.one-page-layout #main {
margin-left: 0px !important;
}
.site-footer .footer-bottom .col-md-4 {
width: 33.33%;
display: inline-block;
float: left;
}
.one-page-layout.right-side #main {
margin-right: 0px;
}
.one-page-layout.right-side .sidenav {
left: -350px;
right: auto;
border-radius: 0;
}
}
@media only screen and (max-width: 767px) {
.site-footer .footer-bottom .col-md-4 {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
}
}
.dez-full-blog {
height: 100%;
position: fixed;
width: 50%;
background-color: #efefef;
}
.dez-full-blog .owl-carousel .dez-thum-bx img{ width:100%; }
.dez-full-blog .owl-carousel { z-index:auto; }
.dez-full-blog .dez-post-info {
background-color: #efefef;
padding: 20px 30px 30px;
width: 100%;
}
.left-footer-menu .footer-social li a {
border-radius: 50%;
height: 40px;
line-height: 40px;
width: 40px;
padding: 0;
text-align: center;
font-weight: normal;
}
.left-footer-menu .footer-social li {
padding: 0 2px;
}
.left-footer-menu {
position: absolute;
bottom: 0;
width: 100%;
}
.dez-full-blog .dez-post-tags{
background-color:#EFEFEF;
bottom: 0;
padding: 15px 30px;
position: fixed;
width: 100%;}
.full-blog-dark .dez-full-blog .dez-post-tags{
background-color:#090909;
}
/* Blog Section Dark */
.full-blog-dark {
background-color: #101010;
}
.full-blog-dark .post-title a {
color: #fff;
}
.full-blog-dark.style-1 .dez-post-info {
padding-top: 10px;
padding-bottom: 15px;
}
.full-blog-dark .dez-full-blog .dez-post-info {
background-color: #090909;
border: 0;
padding: 20px 30px 30px;
}
.full-blog-dark .dez-post-tags {
border-top: 1px solid #141414;
}
.full-blog-dark .dez-post-tags .post-tags a {
border: 1px solid #2b2b2b;
}
.full-blog-dark .sidenav {
background-color: #090909;
}
.full-blog-dark .sidenav ul li a {
border-color: #0c0c0c;
}
.full-blog-dark .dez-full-blog{background: #090909}
/* Dark Style With Border */
.full-blog-dark.style-2 .dez-post-info,
.full-blog-dark.style-3 .dez-post-info {
border: 1px solid #1b1b1b;
padding: 20px;
}
.blog-page-content .card-container{
padding-left:10px;
padding-right:10px;
}
.blog-page-content .blog-post{
margin-bottom:20px;
}
.blog-page-content .dez-full-blog .dez-post-text{
margin-bottom:30px;
}
/* Light Style With Border */
.style-2 .dez-post-info,
.style-3 .dez-post-info {
border: 1px solid #dddddd;
padding: 10px 20px 20px;
}
.style-3 .dez-full-blog {
width: 41.66%;
}
/*==== Responsive ====*/
@media only screen and (max-width: 1024px) {
.style-3 .dez-full-blog {
width: 50%;
}
}
@media only screen and (max-width: 991px) {
.dez-full-blog,
.style-3 .dez-full-blog {
position: unset;
width: 100%;
}
.dez-full-blog .dez-post-tags{ position:unset; }
}
@media only screen and (max-width: 767px) {
#main {
margin-left: 0 !important;
}
.blog-page-content .dez-full-blog .blog-post{
margin-bottom:0px;
}
}
/*----------------------------------------
31. Comming Soon And Login Pages
-----------------------------------------*/
/*====== Coming Soon Page ======*/
.countdown .date span {
font-size: 60px;
font-weight: 500;
}
.countdown .date {
min-width: 120px;
color: #fff;
display: inline-block;
border-right:1px solid rgba(255,255,255,0.2);
margin:0 -2px;
}
.countdown .date:last-child{
border:0px solid;
}
.countdown .date text {
display: block;
margin: 0 auto;
padding: 2px 1px;
width:100%;
font-size: 14px;
font-weight: 100;
border-top:1px solid rgba(255,255,255,0.2);
letter-spacing:2px;
}
.coming-soon-content h2 {
font-size: 50px;
font-family:roboto;
font-weight:300;
min-height:50px;
line-height:50px;
}
.coming-soon-content p {
max-width: 800px;
margin: 0px auto;
}
.dez-coming-soon {
height: 100%;
width: 100%;
}
.dez-coming-soon .container {
position: relative;
z-index:2;
}
.dez-coming-soon-full{
position: fixed;
overflow-y:scroll;
}
.dez-coming-bx {
margin-top: 50px;
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
.dez-coming-bx .input-group input.form-control{
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 60px;
padding:0 20px;
background:rgba(255,255,255,0.2);
}
.dez-coming-bx .input-group input.form-control::placeholder{
color:#fff;
}
.dez-coming-soon[class*="overlay"]:after{
position:fixed;
}
.dez-coming-soon .logo-header,
.dez-login .logo-header{
width:100%;
padding:30px;
float: none;
margin-left: auto;
margin-right: auto;
}
.dez-coming-soon .logo-header img,
.dez-login .logo-header img,
.top-head img{
max-width:300px;
}
.sidenav.coming-side-bar {
background-color:#fff;
}
.dez-coming-bx.left-bar {
position:fixed;
top:0;
left:0;
width:50%;
margin-top:0;
}
.dez-coming-soon .container-fluid{
z-index:2;
}
/*==== Appointment Form Css =====*/
/* Mack An Appointment Dark */
.mack-an-appointment {
background-color: #2C4A6B;
}
.mack-an-appointment {} .mack-an-appointment [class*="col-md-"] {
padding: 0 7.5px
}
.mack-an-appointment .form-group {
margin-bottom: 15px;
}
.mack-an-appointment .form-control {
background-color: #1f3d5e;
border: 1px solid #153354;
}
.mack-an-appointment .bootstrap-select button.dropdown-toggle {
background-color: #1f3d5e !important;
border: 1px solid #153354 !important;
}
/* Mack An Appointment Dark End */
/* Mack An Appointment White */
.mack-an-appointment.white {
background-color: #fff;
border: 1px solid #d4d4d4;
}
.mack-an-appointment.white .form-control {
background-color: #fff;
border: 1px solid #d4d4d4;
}
.mack-an-appointment.white .bootstrap-select button.dropdown-toggle {
background-color: #fff !important;
border: 1px solid #d4d4d4 !important;
}
.dez-book-now-content {
margin-top: 25%;
}
/* Mack An Appointment White */
/*==== Appointment Form Css END =====*/
/*====== Login Pages =======*/
.dez-login{
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.login-form {
max-width: 400px;
margin: 0px auto;
background: #fff;
}
.dez-form .form-control {
background: #fff;
height: 44px;
}
.dez-form .form-group {
margin-bottom: 15px;
}
.login-form .bottom:hover a{
color:#fff;
text-decoration:underline;
}
.dz-tab-area{
display:none;
}
.dz-tab-area.active{
display:block;
}
/*==== Responsive ====*/
@media only screen and (max-width: 1200px) {
.dez-coming-bx.left-bar .dez-coming-bx .countdown .date{
min-width:110px;
}
}
@media only screen and (max-width: 991px) {
.dez-coming-soon.two-box,
.dez-coming-soon.two-box .dez-coming-bx {
position:relative;
width:100%;
}
.dez-coming-soon.two-box .dez-coming-bx {
margin-top: 0;
margin-bottom: 0;
padding-top: 50px;
padding-bottom: 50px;
}
.dez-coming-soon.two-box .dez-coming-bx h2 {
margin-top: 0;
}
.coming-side-bar {
background: #fff;
}
.skew-content-box{
padding: 5px;
}
.skew-content-box ul li a{
margin-right:3px;
font-size:13px;
}
.dez-social-icon{
margin:0;
}
.skew-content-box ul li a{
padding: 5px;
}
.request-a-quote:before{
left:0;
transform: skewX(0deg);
}
.header-style-4 .slide-up{
position:unset;
}
.dez-coming-bx.left-bar{
position:unset;
width:100%;
}
}
@media only screen and (max-width: 767px) {
.dez-book-now-content {
margin-top: 10px;
margin-bottom: 50px;
}
.coming-soon-content h2 {
font-size: 30px;
}
.countdown .date span {
font-size: 45px;
}
.countdown .date {
max-width: 50px;
}
.dez-coming-bx {
margin-top: 20px;
}
.our-service .service-box{ margin-bottom:30px; }
.our-service{
margin-top:50px;
}
.dez-login{
padding:10px 20px 50px;
}
.dez-newsletter{ padding:15px; }
}
/*==== Responsive ====*/
/*==== Particles ====*/
.particles-js-canvas-el {
position: fixed;
top: 0;
z-index: 1;
height:100%;
}
/* Form Tp Classes */
.dez-book-now-form.tp-light {
background-color: rgba(0, 0, 0, 0.3);
}
.dez-book-now-form.tp-light .form-control,
.dez-book-now-form.tp-light .bootstrap-select .dropdown-toggle {
background-color: rgba(0, 0, 0, 0.0) !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
.dez-book-now-form.tp-dark {
background-color: rgba(0, 0, 0, 0.7);
}
.dez-book-now-form.tp-dark .form-control,
.dez-book-now-form.tp-dark .bootstrap-select .dropdown-toggle {
background-color: rgba(0, 0, 0, 0.0) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
/*==== Skew Section ====*/
.skew-section{
position:relative;
z-index:2;
}
.skew-section.left-top:after,
.skew-section.left-bottom:after,
.skew-section.right-top:before,
.skew-section.right-bottom:before{
background: inherit;
content: "";
height: 100%;
position: absolute;
width: 100px;
z-index:-1;
top:0;
bottom:0;
}
.skew-section.left-top:after{
left: -50px;
transform: skewX(7deg);
}
.skew-section.left-bottom:after{
left: -50px;
transform: skewX(-7deg);
}
.skew-section.right-top:before{
right: -50px;
transform: skewX(7deg);
}
.skew-section.right-bottom:before{
right: -50px;
transform: skewX(-7deg);
}
/*==== Skew Section END ====*/
/*==== Bottom Footer ====*/
.bottom-footer{
position:fixed;
bottom:0;
height:35px;
background:rgba(0,0,0,0.2);
width:100%;
padding:5px;
left:0;
right:0;
z-index:4;
}
/* winHeight */
@media only screen and (max-width: 991px) {
.winHeight{ overflow:scroll; }
}
/* tp login */
.tp-login-black.login-form,
.tp-login-black .dez-form .form-control{
background-color:rgba(0,0,0,0.5)
}
.tp-login-white.login-form,
.tp-login-white .dez-form .form-control{
background-color:rgba(255,255,255,0.3);
backdrop-filter: blur(10px);
}
.tp-login-black .dez-form .form-control,
.tp-login-white .dez-form .form-control{
border:0;
}
.tp-login-white .dez-form .form-control::-moz-placeholder{
color:#fff;
}
/* login form style 2 */
.login-form.style-2 .form-control{
background:#fff;
border-left:2px solid #ff91b8;
}
.login-form.style-3 .form-control{
background:rgba(255,145,184, 0.5);
border:0px solid #0079FC;
}
.login-form.style-3 .dez-form{
padding:30px;
border:1px solid #6AAF08;
}
.login-form.style-3{
background:rgba(0,0,0,0.3);
}
.login-form.style-3 .dez-form .form-control{
color:#fff;
}
.login-form.style-3 .dez-form .form-control::-moz-placeholder,
.yoga-footer .newsletter .form-control::-moz-placeholder,
.yoga-footer .newsletter .form-control{
color:#fff;
}
.slideskew{
animation: 5s ease 0s normal none infinite running slideskew;
}
@keyframes slideskew {
0% {
transform:translateY(0px);
opacity: 1;
}
50% {
transform:translateY(20px);
-moz-transform:translateY(20px);
-webkit-transform:translateY(20px);
-ms-transform:translateY(20px);
-o-transform:translateY(20px);
}
100% {
transform:translateY(0);
-moz-transform:translateY(0);
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
-o-transform:translateY(0);
}
}
/* Support and Buy Button */
.theme-btn{
background-color: #ffffff;
border-radius: 40px;
bottom: 10px;
color: #ffffff;
display: table;
height: 50px;
left: 10px;
min-width: 50px;
position: fixed;
text-align: center;
z-index: 9999;
}
.theme-btn i{
font-size: 22px;
line-height: 50px;
}
.theme-btn.bt-support-now{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1ebbf0+8,39dfaa+100 */
background: #1ebbf0; /* Old browsers */
background: -moz-linear-gradient(45deg, #1ebbf0 8%, #39dfaa 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #1ebbf0 8%,#39dfaa 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #1ebbf0 8%,#39dfaa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ebbf0', endColorstr='#39dfaa',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
bottom: 70px;
}
.theme-btn.bt-buy-now{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1fdf61+0,88BA46+100 */
background: #1fdf61; /* Old browsers */
background: -moz-linear-gradient(top, #A3D179 0%, #88BA46 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #A3D179 0%,#88BA46 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #A3D179 0%,#88BA46 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1fdf61', endColorstr='#88BA46',GradientType=0 ); /* IE6-9 */
}
.theme-btn:hover{
color:#fff;
padding: 0 20px;
}
.theme-btn span{
display: table-cell;
vertical-align: middle;
font-size: 16px;
letter-spacing: -15px;
opacity: 0;
line-height: 50px;
transition:all 0.5s;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
text-transform:uppercase;
}
.theme-btn:hover span{
opacity:1;
letter-spacing: 1px;
padding-left:10px;
}
.at-expanding-share-button[data-position="bottom-left"]{
bottom: 130px !important;
}
/* Support and Buy Button END */
/* Google Recaptcha */
.g-recaptcha{
transform:scale(0.88);
-webkit-transform:scale(0.88);
-moz-transform:scale(0.88);
-o-transform:scale(0.88);
transform-origin:0 0;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-o-transform-origin:0 0;
}
#rc-imageselect {
transform:scale(0.88);
-webkit-transform:scale(0.88);
-moz-transform:scale(0.88);
-o-transform:scale(0.88);
transform-origin:0 0;
-o-transform-origin:0 0;
-moz-transform-origin:0 0;
-webkit-transform-origin:0 0;
}
@media screen and (max-height: 575px){
#rc-imageselect, .g-recaptcha {
transform:scale(0.77);
-moz-transform:scale(0.77);
-o-transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-moz-transform-origin:0 0;
-o-transform-origin:0 0;
-webkit-transform-origin:0 0;
}
}
/* Google Recaptcha */
/*ajax Message*/
.dzSubscribeMsg p {
margin: 0;
}
@media screen and (max-height: 768px){
.dzSubscribeMsg p {
bottom: -20px;
}
}
@media screen and (max-height: 360px){
.dzSubscribeMsg p {
bottom: -10px;
}
}
/*ajax Message*/
/* my work */
.dzForm .input-group-text {
height: 100%;
}
.bootstrap-select .dropdown-toggle:before{
content: "\f0d7";
font-family: 'Font Awesome 5 Free';
font-weight: 600;
position: absolute;
right: 10px;
}
.filter-option{
height: auto;
}
/* my work */
.dropdown-item.active:not(:hover), .dropdown-item:active{
color:#fff!important;
}
.bootstrap-select .dropdown-toggle .filter-option{
height:auto;
}
/* New-tag */
.new-page {
padding: 2px 5px;
font-size: 10px;
background: #ff0000;
color: #fff;
border-radius: 4px;
vertical-align: middle;
margin-left: 10px;
}
.heart {
width: 60px;
height: 60px;
display: inline-block;
background: url(../images/like.png) no-repeat;
cursor: pointer;
margin: -25px -18px;
}
.heart-blast {
background-position: -1680px 0;
transition: background 1s steps(28);
}
.badge {
padding: 3px 4px;
font-weight: var(--headings-font-weight);
background-color: var(--primary);
color: white;
border-radius: 0;
font-family: var(--font-family-base);
font-size: 11px;
min-width: 17px;
min-height: 13px;
text-align: center;
}
.container-fluid {
padding-left: 80px;
padding-right: 80px;
}
@media only screen and (max-width: 1280px) {
.container-fluid {
padding-left: 15px;
padding-right: 15px; } }
@media only screen and (max-width: 575px) {
.container-fluid {
padding-left: 15px;
padding-right: 15px;
}
}
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
/* registration related styling */
.registration-container {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 40px 0;
display: flex;
align-items: center;
}
.registration-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.registration-card {
background: white;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
min-height: 700px;
}
.registration-left {
flex: 1;
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.registration-left::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../images/pattern.png') repeat;
opacity: 0.1;
}
.registration-left-content {
position: relative;
z-index: 2;
}
.registration-left img.logo {
max-width: 200px;
margin-bottom: 30px;
}
.registration-left h1 {
font-size: 32px;
background: linear-gradient(135deg, #d4af37, #f5e6c8);
font-weight: 700;
margin-bottom: 20px;
line-height: 1.3;
}
.registration-left p {
font-size: 16px;
line-height: 1.6;
opacity: 0.9;
margin-bottom: 30px;
}
.registration-features {
margin-top: 40px;
}
.feature-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.feature-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 18px;
}
.feature-text {
font-size: 14px;
opacity: 0.9;
}
.registration-right {
flex: 1;
padding: 60px 40px;
overflow-y: auto;
max-height: 700px;
}
.registration-header {
margin-bottom: 40px;
}
.registration-header h2 {
font-size: 28px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
}
.registration-header p {
color: #7f8c8d;
font-size: 16px;
}
.registration-form {
margin-bottom: 30px;
}
.form-row {
display: flex;
gap: 20px;
margin-bottom: 25px;
}
.form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50;
font-size: 14px;
}
.form-input {
width: 100%;
padding: 14px 16px;
border: 2px solid #e8f5e9;
border-radius: 12px;
font-size: 15px;
background: #f8f9fa;
transition: all 0.3s;
color: #2c3e50;
}
.form-input:focus {
outline: none;
border-color: #083a80;
background: white;
box-shadow: 0 0 0 3px rgba(139, 195, 74, 0.1);
}
.form-input::placeholder {
color: #95a5a6;
}
.form-error {
color: #e74c3c;
font-size: 13px;
margin-top: 5px;
display: block;
min-height: 20px;
}
.form-success {
color: #27ae60;
font-size: 13px;
margin-top: 5px;
display: block;
min-height: 20px;
}
.username-check-container {
display: flex;
gap: 10px;
align-items: flex-start;
}
.username-check-container .form-input {
flex: 1;
}
.check-btn {
background: #083a80;
color: white;
border: none;
padding: 14px 20px;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
white-space: nowrap;
}
.check-btn:hover {
background: #689F38;
transform: translateY(-2px);
}
.referral-container {
background: #f8f9fa;
padding: 20px;
border-radius: 12px;
border: 2px solid #e8f5e9;
margin-bottom: 25px;
}
.referral-code {
background: white;
padding: 12px;
border-radius: 8px;
border: 2px dashed #083a80;
color: #689F38;
font-weight: 600;
text-align: center;
margin-top: 10px;
}
.referral-user {
background: #e8f5e9;
color: #689F38;
padding: 8px 12px;
border-radius: 6px;
display: inline-block;
margin-top: 10px;
font-size: 14px;
}
.captcha-container {
background: #f8f9fa;
padding: 25px;
border-radius: 12px;
border: 2px solid #e8f5e9;
margin-bottom: 25px;
}
.captcha-header {
margin-bottom: 20px;
text-align: center;
}
.captcha-header h4 {
color: #2c3e50;
margin-bottom: 8px;
font-size: 16px;
}
.captcha-header p {
color: #7f8c8d;
font-size: 14px;
}
.captcha-body {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 15px;
}
.captcha-image {
flex: 1;
background: white;
padding: 15px;
border-radius: 8px;
border: 2px solid #e8f5e9;
text-align: center;
min-height: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.captcha-image img {
max-width: 100%;
height: auto;
}
.captcha-refresh-btn {
background: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
font-weight: 500;
}
.captcha-refresh-btn:hover {
background: #2980b9;
transform: translateY(-2px);
}
.captcha-refresh-btn.loading {
opacity: 0.7;
cursor: not-allowed;
}
.captcha-input {
width: 100%;
padding: 14px 16px;
border: 2px solid #e8f5e9;
border-radius: 12px;
font-size: 15px;
text-align: center;
letter-spacing: 2px;
background: white;
transition: all 0.3s;
}
.captcha-input:focus {
outline: none;
border-color: #083a80;
box-shadow: 0 0 0 3px rgba(139, 195, 74, 0.1);
}
.terms-container {
margin: 25px 0;
}
.terms-checkbox {
display: flex;
align-items: flex-start;
gap: 12px;
}
.terms-checkbox input[type="checkbox"] {
margin-top: 4px;
width: 18px;
height: 18px;
accent-color: #083a80;
}
.terms-checkbox label {
color: #2c3e50;
font-size: 14px;
line-height: 1.5;
}
.terms-checkbox a {
color: #083a80;
text-decoration: none;
font-weight: 500;
}
.terms-checkbox a:hover {
text-decoration: underline;
}
.submit-btn {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
border: none;
padding: 16px 32px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(139, 195, 74, 0.3);
}
.submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
.spinner-border {
width: 20px;
height: 20px;
border-width: 2px;
}
.login-link {
text-align: center;
margin-top: 30px;
color: #7f8c8d;
font-size: 15px;
}
.login-link a {
color: #083a80;
text-decoration: none;
font-weight: 600;
}
.login-link a:hover {
text-decoration: underline;
}
/* App Downloads */
.app-downloads {
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.app-downloads h4 {
font-size: 18px;
margin-bottom: 15px;
opacity: 0.9;
}
.app-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.app-btn {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 10px 15px;
border-radius: 8px;
color: white;
text-decoration: none;
transition: all 0.3s;
font-size: 14px;
}
.app-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.app-btn img {
width: 24px;
height: 24px;
}
/* Responsive Design */
@media (max-width: 992px) {
.registration-card {
flex-direction: column;
}
.registration-left,
.registration-right {
padding: 40px 30px;
}
.registration-left {
min-height: 400px;
}
.registration-right {
max-height: none;
}
}
@media (max-width: 768px) {
.form-row {
flex-direction: column;
gap: 25px;
}
.username-check-container {
flex-direction: column;
}
.captcha-body {
flex-direction: column;
gap: 15px;
}
.registration-left,
.registration-right {
padding: 30px 20px;
}
}
@media (max-width: 480px) {
.registration-container {
padding: 20px 0;
}
.registration-wrapper {
padding: 0 15px;
}
.app-buttons {
flex-direction: column;
}
}
/* activation page style */
/* ACTIVATION PAGE SPECIFIC STYLES - Namespaced to avoid conflicts */
.activation-page .activation-section {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
min-height: calc(100vh - 200px);
display: flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
position: relative;
overflow: hidden;
}
.activation-page .activation-container {
background: white;
padding: 15px 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
text-align: center;
max-width: 600px;
width: 90%;
animation: activation-fadeInUp 0.8s ease-out;
font-family: 'Poppins', sans-serif;
position: relative;
z-index: 2;
}
.activation-page .activation-header {
background: #007bff;
color: #ffffff;
padding: 30px;
margin: -15px -40px 30px -40px;
border-radius: 20px 20px 0 0;
text-align: center;
}
.activation-page .activation-header h1 {
margin: 0;
font-size: 28px;
font-weight: 600;
}
.activation-page .success-icon {
font-size: 80px;
color: #4CAF50;
margin: 20px 0;
animation: activation-bounce 2s infinite;
line-height: 1;
}
.activation-page .activation-content h2 {
color: #007bff;
font-size: 2rem;
margin: 10px 0 20px;
font-weight: 600;
}
.activation-page .activation-content p {
font-size: 1.2rem;
color: #555;
margin-bottom: 15px;
line-height: 1.6;
}
.activation-page .spam-note {
background-color: #fff3cd;
border: 1px solid #ffeaa7;
color: #856404;
padding: 15px;
border-radius: 8px;
margin: 25px 0;
font-size: 15px;
text-align: left;
}
.activation-page .activation-buttons {
margin: 30px 0;
}
.activation-page .activation-btn {
display: inline-block;
padding: 14px 32px;
text-decoration: none;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
margin: 8px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.activation-page .activation-btn:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
color: white;
text-decoration: none;
}
.activation-page .mail-btn {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
}
.activation-page .login-btn {
background-color: #28a745;
color: white;
}
.activation-page .login-btn:hover {
background-color: #218838;
}
.activation-page .resend-btn {
background-color: #fd7e14;
color: white;
}
.activation-page .resend-btn:hover {
background-color: #e9690c;
}
.activation-page .activation-footer-content {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
}
.activation-page .activation-footer-content p {
margin-bottom: 15px;
color: #555;
font-size: 1.1rem;
}
.activation-page .confetti {
position: absolute;
width: 10px;
height: 10px;
background: #f1c40f;
opacity: 0.8;
animation: activation-confetti-fall linear infinite;
z-index: 1;
pointer-events: none;
}
/* Namespaced Animations */
@keyframes activation-fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes activation-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
@keyframes activation-confetti-fall {
0% {
transform: translateY(-100vh) rotate(0deg);
}
100% {
transform: translateY(100vh) rotate(720deg);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.activation-page .activation-container {
padding: 15px 20px;
}
.activation-page .activation-header {
padding: 20px;
margin: -15px -20px 20px -20px;
}
.activation-page .activation-header h1 {
font-size: 24px;
}
.activation-page .success-icon {
font-size: 60px;
}
.activation-page .activation-content h2 {
font-size: 1.8rem;
}
.activation-page .activation-content p {
font-size: 1rem;
}
.activation-page .activation-btn {
padding: 12px 24px;
font-size: 0.9rem;
margin: 5px;
display: block;
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
.activation-page .activation-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 480px) {
.activation-page .activation-header h1 {
font-size: 20px;
}
.activation-page .activation-content h2 {
font-size: 1.5rem;
}
.activation-page .spam-note {
font-size: 14px;
padding: 12px;
}
}
/* resendactivation link */
/* =============================================
RESEND ACTIVATION PAGE STYLES
Namespaced with 'resend-' prefix to prevent conflicts
============================================= */
.resend-activation-section {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
min-height: calc(100vh - 200px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
position: relative;
overflow: hidden;
font-family: 'Poppins', sans-serif;
}
.resend-activation-container {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
text-align: center;
max-width: 500px;
width: 90%;
animation: resend-fadeInUp 0.8s ease-out;
position: relative;
z-index: 2;
margin-top: 4rem;
}
.resend-company-logo {
font-size: 2rem;
font-weight: 700;
color: #667eea;
margin-bottom: 30px;
display: inline-block;
text-decoration: none;
transition: color 0.3s ease;
}
.resend-company-logo:hover {
color: #764ba2;
text-decoration: none;
}
.resend-password-icon {
font-size: 80px;
color: #667eea;
margin: 20px 0;
animation: resend-bounce 2s infinite;
display: block;
}
.resend-title {
font-size: 2rem;
color: #2c3e50;
margin: 15px 0;
font-weight: 700;
line-height: 1.3;
}
.resend-subtitle {
font-size: 1.1rem;
color: #555;
margin-bottom: 30px;
line-height: 1.6;
}
/* Form Styles */
.resend-activation-form {
text-align: left;
margin-top: 20px;
}
.resend-form-control {
width: 100%;
padding: 15px 20px;
border: 2px solid #e5e7eb;
border-radius: 10px;
font-size: 1rem;
margin-bottom: 20px;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
}
.resend-form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
outline: none;
}
.resend-btn {
display: block;
width: 100%;
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
padding: 16px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
border: none;
cursor: pointer;
margin-top: 20px;
font-family: 'Poppins', sans-serif;
}
.resend-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
color: white;
}
.resend-btn:active {
transform: translateY(-1px);
}
/* Alert Messages */
.resend-alert {
padding: 15px 20px;
border-radius: 10px;
margin-bottom: 25px;
border-left: 4px solid;
text-align: left;
font-size: 0.95rem;
animation: resend-fadeInUp 0.5s ease-out;
}
.resend-alert-success {
background: #f0fdf4;
border-color: #16a34a;
color: #166534;
}
.resend-alert-danger {
background: #fef2f2;
border-color: #dc2626;
color: #991b1b;
}
/* Back Link */
.resend-back-link {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
}
.resend-back-link a {
color: #667eea;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.resend-back-link a:hover {
color: #764ba2;
text-decoration: underline;
}
/* Animations */
@keyframes resend-fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes resend-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-15px);
}
60% {
transform: translateY(-7px);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.resend-activation-container {
padding: 30px 25px;
width: 95%;
}
.resend-company-logo {
font-size: 1.8rem;
margin-bottom: 20px;
}
.resend-password-icon {
font-size: 60px;
margin: 15px 0;
}
.resend-title {
font-size: 1.7rem;
margin: 10px 0;
}
.resend-subtitle {
font-size: 1rem;
margin-bottom: 25px;
}
.resend-form-control {
padding: 14px 18px;
font-size: 0.95rem;
}
.resend-btn {
padding: 15px 30px;
font-size: 1rem;
}
}
@media (max-width: 480px) {
.resend-activation-section {
padding: 15px;
min-height: calc(100vh - 100px);
}
.resend-activation-container {
padding: 25px 20px;
}
.resend-company-logo {
font-size: 1.5rem;
margin-bottom: 15px;
}
.resend-password-icon {
font-size: 50px;
margin: 10px 0;
}
.resend-title {
font-size: 1.4rem;
}
.resend-subtitle {
font-size: 0.9rem;
margin-bottom: 20px;
}
.resend-form-control {
padding: 12px 16px;
font-size: 0.9rem;
}
.resend-btn {
padding: 14px 25px;
font-size: 0.95rem;
}
.resend-alert {
padding: 12px 16px;
font-size: 0.9rem;
}
}
/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
.resend-activation-container {
background: #1a1a1a;
color: #ffffff;
}
.resend-title {
color: #ffffff;
}
.resend-subtitle {
color: #cccccc;
}
.resend-form-control {
background: #2d2d2d;
border-color: #404040;
color: #ffffff;
}
.resend-form-control::placeholder {
color: #888888;
}
.resend-form-control:focus {
border-color: #667eea;
}
.resend-back-link {
border-top-color: #404040;
}
.resend-back-link a {
color: #8b9cff;
}
.resend-back-link a:hover {
color: #a6b3ff;
}
}
/* login page stylings */
/* =============================================
CUSTOM LOGIN PAGE STYLES
Namespaced with 'custom-' prefix to prevent conflicts
============================================= */
.custom-login-section {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
font-family: 'Poppins', sans-serif;
}
.custom-login-container {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
max-width: 450px;
width: 90%;
animation: custom-fadeInUp 0.8s ease-out;
margin-top: 5rem;
}
.custom-login-header {
text-align: center;
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
margin-bottom: 30px;
}
.custom-brand-logo {
display: block;
margin-bottom: 20px;
}
.custom-brand-logo img {
max-height: 60px;
width: auto;
}
.custom-login-title {
font-size: 2rem;
background: linear-gradient(135deg, #d4af37, #f5e6c8);
margin: 0 0 10px 0;
font-weight: 700;
}
.custom-login-subtitle {
color: #666;
font-size: 0.95rem;
margin: 0;
color:white;
}
/* Form Styles */
.custom-login-form {
margin-bottom: 25px;
}
.custom-form-group {
margin-bottom: 20px;
position: relative;
}
.custom-form-control {
width: 100%;
padding: 15px 20px;
border: 2px solid #e5e7eb;
border-radius: 10px;
font-size: 1rem;
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
}
.custom-form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
outline: none;
}
.custom-form-control.custom-error {
border-color: #dc2626;
}
.custom-password-group {
position: relative;
}
.custom-toggle-password {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #666;
cursor: pointer;
font-size: 1rem;
padding: 5px;
}
.custom-toggle-password:hover {
color: #667eea;
}
.custom-error-message {
color: #dc2626;
font-size: 0.85rem;
margin-top: 5px;
min-height: 20px;
}
/* Form Options */
.custom-form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 0;
}
.custom-checkbox {
display: flex;
align-items: center;
cursor: pointer;
}
.custom-checkbox input {
display: none;
}
.custom-checkbox-label {
position: relative;
padding-left: 30px;
color: #555;
font-size: 0.9rem;
}
.custom-checkbox-label:before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border: 2px solid #ddd;
border-radius: 4px;
transition: all 0.3s ease;
}
.custom-checkbox input:checked + .custom-checkbox-label:before {
background-color: #667eea;
border-color: #667eea;
}
.custom-checkbox input:checked + .custom-checkbox-label:after {
content: '✓';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 12px;
}
.custom-forgot-link {
color: #667eea;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.custom-forgot-link:hover {
color: #764ba2;
text-decoration: underline;
}
/* Login Button */
.custom-login-btn {
width: 100%;
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
padding: 16px;
border-radius: 50px;
border: none;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: 'Poppins', sans-serif;
}
.custom-login-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
}
.custom-login-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.custom-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: white;
animation: custom-spin 1s linear infinite;
}
/* Alerts */
.custom-alert {
padding: 15px 20px;
border-radius: 10px;
margin-bottom: 20px;
border-left: 4px solid;
font-size: 0.9rem;
animation: custom-fadeInUp 0.5s ease-out;
}
.custom-alert-success {
background-color: #d4edda;
border-color: #155724;
color: #155724;
}
.custom-alert-danger {
background-color: #f8d7da;
border-color: #721c24;
color: #721c24;
}
/* Error Messages */
.custom-error-messages {
margin-top: 1x;
}
.custom-error-text {
display: block;
padding: 10px 15px;
border-radius: 8px;
margin-bottom: 8px;
font-size: 0.9rem;
animation: custom-fadeInUp 0.3s ease-out;
}
/* Signup Prompt */
.custom-signup-prompt {
text-align: center;
padding-top: 20px;
border-top: 1px solid #eee;
color: #666;
}
.custom-signup-link {
color: #667eea;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.custom-signup-link:hover {
color: #764ba2;
text-decoration: underline;
}
/* Forgot Password Modal */
.custom-forgot-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1000;
align-items: center;
justify-content: center;
animation: custom-fadeIn 0.3s ease-out;
}
.custom-forgot-modal.custom-modal-active {
display: flex;
}
.custom-forgot-content {
background: white;
padding: 30px;
border-radius: 15px;
max-width: 400px;
width: 90%;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.custom-forgot-content h2 {
color: #2c3e50;
margin: 0 0 10px 0;
font-size: 1.5rem;
}
.custom-forgot-content p {
color: #666;
margin-bottom: 20px;
font-size: 0.9rem;
}
.custom-modal-buttons {
display: flex;
gap: 10px;
margin-top: 25px;
}
.custom-modal-btn {
flex: 1;
padding: 12px;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
}
.custom-modal-cancel {
background: #f3f4f6;
color: #374151;
}
.custom-modal-cancel:hover {
background: #e5e7eb;
}
.custom-modal-submit {
background: #667eea;
color: white;
}
.custom-modal-submit:hover {
background: #5a6fd8;
}
/* Animations */
@keyframes custom-fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes custom-fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes custom-spin {
to {
transform: rotate(360deg);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.custom-login-container {
padding: 30px 25px;
width: 95%;
}
.custom-login-title {
font-size: 1.7rem;
}
.custom-brand-logo img {
max-height: 50px;
}
.custom-form-control {
padding: 14px 18px;
}
.custom-login-btn {
padding: 15px;
font-size: 1rem;
}
.custom-form-options {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
@media (max-width: 480px) {
.custom-login-section {
padding: 15px;
align-items: flex-start;
padding-top: 40px;
}
.custom-login-container {
padding: 25px 20px;
}
.custom-login-title {
font-size: 1.5rem;
}
.custom-brand-logo img {
max-height: 45px;
}
.custom-form-control {
padding: 12px 16px;
font-size: 0.95rem;
}
.custom-login-btn {
padding: 14px;
font-size: 0.95rem;
}
.custom-alert {
padding: 12px 16px;
font-size: 0.85rem;
}
.custom-forgot-content {
padding: 25px 20px;
}
}
/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
.custom-login-container {
background: #1a1a1a;
color: #ffffff;
}
.custom-login-title {
color: #ffffff;
}
.custom-login-subtitle {
color: #cccccc;
}
.custom-form-control {
background: #2d2d2d;
border-color: #404040;
color: #ffffff;
}
.custom-form-control::placeholder {
color: #888888;
}
.custom-form-control:focus {
border-color: #667eea;
}
.custom-checkbox-label {
color: #cccccc;
}
.custom-checkbox-label:before {
border-color: #555;
}
.custom-forgot-link {
color: #8b9cff;
}
.custom-signup-prompt {
color: #cccccc;
border-top-color: #404040;
}
.custom-signup-link {
color: #8b9cff;
}
.custom-forgot-content {
background: #1a1a1a;
color: #ffffff;
}
.custom-forgot-content h2 {
color: #ffffff;
}
.custom-forgot-content p {
color: #cccccc;
}
.custom-modal-cancel {
background: #2d2d2d;
color: #ffffff;
}
}
/* activation success */
/* =============================================
ACCOUNT ACTIVATION SUCCESS PAGE STYLES
Namespaced with 'account-' prefix to prevent conflicts
============================================= */
.account-activation-section {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
position: relative;
overflow: hidden;
font-family: 'Poppins', sans-serif;
}
.account-activation-container {
background: white;
padding: 50px 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
text-align: center;
max-width: 600px;
width: 90%;
animation: account-fadeInUp 0.8s ease-out;
position: relative;
z-index: 2;
margin-top: 4rem;
}
.account-activation-icon {
font-size: 80px;
color: #4CAF50;
margin-bottom: 30px;
animation: account-bounce 2s infinite;
}
.account-activation-icon i {
display: inline-block;
}
.account-activation-title {
font-size: 2.5rem;
color: #2c3e50;
margin-bottom: 20px;
font-weight: 700;
line-height: 1.3;
}
.account-activation-message {
font-size: 1.2rem;
color: #555;
margin-bottom: 40px;
line-height: 1.6;
}
.account-activation-message strong {
color: #667eea;
font-weight: 600;
}
/* Action Buttons */
.account-activation-actions {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 40px;
}
.account-activation-btn {
display: inline-block;
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
padding: 18px 40px;
border-radius: 50px;
text-decoration: none;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
border: none;
cursor: pointer;
}
.account-activation-btn:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
color: white;
text-decoration: none;
}
.account-activation-btn i {
margin-right: 10px;
}
.account-home-btn {
display: inline-block;
background: #f3f4f6;
color: #374151;
padding: 15px 40px;
border-radius: 50px;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border: 2px solid #e5e7eb;
}
.account-home-btn:hover {
background: #e5e7eb;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
color: #374151;
text-decoration: none;
}
.account-home-btn i {
margin-right: 10px;
}
/* Features Section */
.account-activation-features {
padding-top: 30px;
border-top: 1px solid #eee;
}
.account-activation-features h3 {
color: #2c3e50;
font-size: 1.5rem;
margin-bottom: 20px;
font-weight: 600;
}
.account-features-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
display: inline-block;
}
.account-features-list li {
color: #555;
font-size: 1rem;
margin-bottom: 12px;
padding-left: 30px;
position: relative;
}
.account-features-list li i {
color: #4CAF50;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 1.1rem;
}
/* Confetti */
.account-confetti {
position: fixed;
width: 10px;
height: 10px;
background: #f1c40f;
opacity: 0.8;
animation: account-confetti-fall linear infinite;
z-index: 1;
pointer-events: none;
}
/* Animations */
@keyframes account-fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes account-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
@keyframes account-confetti-fall {
0% {
transform: translateY(-100vh) rotate(0deg);
}
100% {
transform: translateY(100vh) rotate(720deg);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.account-activation-container {
padding: 40px 30px;
width: 95%;
}
.account-activation-icon {
font-size: 70px;
margin-bottom: 25px;
}
.account-activation-title {
font-size: 2rem;
margin-bottom: 15px;
}
.account-activation-message {
font-size: 1.1rem;
margin-bottom: 35px;
}
.account-activation-btn {
padding: 16px 35px;
font-size: 1rem;
}
.account-home-btn {
padding: 14px 35px;
font-size: 0.95rem;
}
.account-activation-features h3 {
font-size: 1.3rem;
}
.account-features-list li {
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.account-activation-section {
padding: 15px;
align-items: flex-start;
padding-top: 40px;
}
.account-activation-container {
padding: 35px 25px;
}
.account-activation-icon {
font-size: 60px;
margin-bottom: 20px;
}
.account-activation-title {
font-size: 1.7rem;
}
.account-activation-message {
font-size: 1rem;
margin-bottom: 30px;
}
.account-activation-actions {
gap: 12px;
}
.account-activation-btn {
padding: 15px 30px;
font-size: 0.95rem;
}
.account-home-btn {
padding: 13px 30px;
font-size: 0.9rem;
}
.account-activation-features {
padding-top: 25px;
}
.account-activation-features h3 {
font-size: 1.2rem;
margin-bottom: 15px;
}
.account-features-list li {
font-size: 0.9rem;
margin-bottom: 10px;
}
}
@media (max-width: 360px) {
.account-activation-container {
padding: 30px 20px;
}
.account-activation-title {
font-size: 1.5rem;
}
.account-activation-message {
font-size: 0.95rem;
}
.account-activation-btn,
.account-home-btn {
padding: 14px 25px;
font-size: 0.9rem;
}
}
/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
.account-activation-container {
background: #1a1a1a;
color: #ffffff;
}
.account-activation-title {
color: #ffffff;
}
.account-activation-message {
color: #cccccc;
}
.account-activation-message strong {
color: #8b9cff;
}
.account-home-btn {
background: #2d2d2d;
color: #ffffff;
border-color: #404040;
}
.account-home-btn:hover {
background: #3d3d3d;
color: #ffffff;
}
.account-activation-features {
border-top-color: #404040;
}
.account-activation-features h3 {
color: #ffffff;
}
.account-features-list li {
color: #cccccc;
}
}
/* forgot password */
/* =============================================
PASSWORD RECOVERY PAGE STYLES
Namespaced with 'password-recovery-' prefix to prevent conflicts
============================================= */
.password-recovery-section {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
position: relative;
overflow: hidden;
font-family: 'Poppins', sans-serif;
}
.password-recovery-container {
background: white;
padding: 50px 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
text-align: center;
max-width: 500px;
width: 90%;
animation: password-recovery-fadeInUp 0.8s ease-out;
position: relative;
z-index: 2;
margin-top:5rem;
}
.password-recovery-logo {
font-size: 2rem;
font-weight: 700;
color: #667eea;
margin-bottom: 30px;
display: inline-block;
text-decoration: none;
transition: color 0.3s ease;
}
.password-recovery-logo:hover {
color: #764ba2;
text-decoration: none;
}
.password-recovery-icon {
font-size: 80px;
color: #667eea;
margin: 20px 0;
animation: password-recovery-bounce 2s infinite;
}
.password-recovery-icon i {
display: inline-block;
}
.password-recovery-title {
font-size: 2rem;
color: #2c3e50;
margin: 0 0 15px 0;
font-weight: 700;
line-height: 1.3;
}
.password-recovery-subtitle {
font-size: 1.1rem;
color: #555;
margin-bottom: 30px;
line-height: 1.6;
}
/* Alert Messages */
.password-recovery-alert {
padding: 15px 20px;
border-radius: 10px;
margin-bottom: 25px;
border-left: 4px solid;
text-align: left;
font-size: 0.95rem;
animation: password-recovery-fadeInUp 0.5s ease-out;
}
.password-recovery-success {
background: #f0fdf4;
border-color: #16a34a;
color: #166534;
}
.password-recovery-danger {
background: #fef2f2;
border-color: #dc2626;
color: #991b1b;
}
/* Form Styles */
.password-recovery-form {
margin-top: 30px;
}
.password-recovery-form-group {
margin-bottom: 25px;
}
.password-recovery-input {
width: 100%;
padding: 16px 20px;
border: 2px solid #e5e7eb;
border-radius: 10px;
font-size: 1rem;
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
background: #f9fafb;
}
.password-recovery-input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
outline: none;
background: white;
}
.password-recovery-input::placeholder {
color: #9ca3af;
}
/* Button Styles */
.password-recovery-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
padding: 17px 40px;
border-radius: 50px;
border: none;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
font-family: 'Poppins', sans-serif;
}
.password-recovery-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
color: white;
}
.password-recovery-btn:active {
transform: translateY(-1px);
}
.password-recovery-btn i {
font-size: 1rem;
transition: transform 0.3s ease;
}
.password-recovery-btn:hover i {
transform: translateX(5px);
}
/* Footer Links */
.password-recovery-footer {
margin-top: 35px;
padding-top: 25px;
border-top: 1px solid #eee;
}
.password-recovery-back {
color: #667eea;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.password-recovery-back:hover {
color: #764ba2;
text-decoration: underline;
}
.password-recovery-back i {
font-size: 0.9rem;
transition: transform 0.3s ease;
}
.password-recovery-back:hover i {
transform: translateX(-5px);
}
/* Additional Info (Optional) */
.password-recovery-info {
margin-top: 20px;
padding: 15px;
background: #f9fafb;
border-radius: 10px;
font-size: 0.9rem;
color: #6b7280;
text-align: left;
border-left: 3px solid #667eea;
}
.password-recovery-info ul {
margin: 10px 0 0 0;
padding-left: 20px;
}
.password-recovery-info li {
margin-bottom: 5px;
}
/* Animations */
@keyframes password-recovery-fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes password-recovery-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-15px);
}
60% {
transform: translateY(-7px);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.password-recovery-container {
padding: 40px 30px;
width: 95%;
}
.password-recovery-logo {
font-size: 1.8rem;
margin-bottom: 25px;
}
.password-recovery-icon {
font-size: 70px;
margin: 15px 0;
}
.password-recovery-title {
font-size: 1.7rem;
margin-bottom: 10px;
}
.password-recovery-subtitle {
font-size: 1rem;
margin-bottom: 25px;
}
.password-recovery-input {
padding: 15px 18px;
}
.password-recovery-btn {
padding: 16px 35px;
font-size: 1rem;
}
.password-recovery-alert {
padding: 14px 18px;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.password-recovery-section {
padding: 15px;
align-items: flex-start;
padding-top: 40px;
}
.password-recovery-container {
padding: 35px 25px;
}
.password-recovery-logo {
font-size: 1.6rem;
margin-bottom: 20px;
}
.password-recovery-icon {
font-size: 60px;
margin: 10px 0;
}
.password-recovery-title {
font-size: 1.5rem;
}
.password-recovery-subtitle {
font-size: 0.95rem;
margin-bottom: 20px;
}
.password-recovery-input {
padding: 14px 16px;
font-size: 0.95rem;
}
.password-recovery-btn {
padding: 15px 30px;
font-size: 0.95rem;
}
.password-recovery-footer {
margin-top: 30px;
padding-top: 20px;
}
}
@media (max-width: 360px) {
.password-recovery-container {
padding: 30px 20px;
}
.password-recovery-logo {
font-size: 1.4rem;
}
.password-recovery-title {
font-size: 1.3rem;
}
.password-recovery-subtitle {
font-size: 0.9rem;
}
.password-recovery-btn {
padding: 14px 25px;
font-size: 0.9rem;
}
}
/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
.password-recovery-container {
background: #1a1a1a;
color: #ffffff;
}
.password-recovery-logo {
color: #8b9cff;
}
.password-recovery-logo:hover {
color: #a6b3ff;
}
.password-recovery-title {
color: #ffffff;
}
.password-recovery-subtitle {
color: #cccccc;
}
.password-recovery-input {
background: #2d2d2d;
border-color: #404040;
color: #ffffff;
}
.password-recovery-input:focus {
background: #1a1a1a;
border-color: #667eea;
}
.password-recovery-input::placeholder {
color: #888888;
}
.password-recovery-success {
background: #052e16;
border-color: #16a34a;
color: #86efac;
}
.password-recovery-danger {
background: #450a0a;
border-color: #dc2626;
color: #fca5a5;
}
.password-recovery-footer {
border-top-color: #404040;
}
.password-recovery-back {
color: #8b9cff;
}
.password-recovery-back:hover {
color: #a6b3ff;
}
.password-recovery-info {
background: #2d2d2d;
color: #cccccc;
border-left-color: #667eea;
}
}
/* =============================================
RESET NEW PASSWORD PAGE STYLES
Namespaced with 'reset-new-password-' prefix to prevent conflicts
============================================= */
.reset-new-password-section {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
position: relative;
overflow: hidden;
font-family: 'Poppins', sans-serif;
}
.reset-new-password-container {
background: white;
padding: 50px 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
max-width: 600px;
width: 90%;
animation: reset-new-password-fadeInUp 0.8s ease-out;
position: relative;
z-index: 2;
margin-top: 5rem;
}
.reset-new-password-icon {
font-size: 80px;
color: #667eea;
margin-bottom: 25px;
text-align: center;
animation: reset-new-password-bounce 2s infinite;
}
.reset-new-password-icon i {
display: inline-block;
}
.reset-new-password-title {
font-size: 2.2rem;
color: #2c3e50;
margin: 0 0 10px 0;
font-weight: 700;
text-align: center;
line-height: 1.3;
}
.reset-new-password-subtitle {
font-size: 1.1rem;
color: #555;
margin-bottom: 30px;
text-align: center;
line-height: 1.6;
}
/* Alert Messages */
.reset-new-password-alert {
padding: 15px 20px;
border-radius: 10px;
margin-bottom: 25px;
border-left: 4px solid;
font-size: 0.95rem;
animation: reset-new-password-fadeInUp 0.5s ease-out;
}
.reset-new-password-success {
background: #f0fdf4;
border-color: #16a34a;
color: #166534;
}
.reset-new-password-danger {
background: #fef2f2;
border-color: #dc2626;
color: #991b1b;
}
/* Form Styles */
.reset-new-password-form {
margin-top: 20px;
}
.reset-new-password-group {
margin-bottom: 25px;
}
.reset-new-password-label {
display: block;
font-weight: 600;
color: #374151;
margin-bottom: 10px;
font-size: 1rem;
}
.reset-new-password-required {
color: #dc2626;
}
.reset-new-password-input-container {
position: relative;
width: 100%;
}
.reset-new-password-input {
width: 100%;
padding: 16px 50px 16px 20px;
border: 2px solid #e5e7eb;
border-radius: 10px;
font-size: 1rem;
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
background: #f9fafb;
}
.reset-new-password-input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
outline: none;
background: white;
}
.reset-new-password-input::placeholder {
color: #9ca3af;
}
.reset-new-password-eye {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #6b7280;
cursor: pointer;
font-size: 1.2rem;
padding: 5px;
transition: color 0.3s ease;
}
.reset-new-password-eye:hover {
color: #667eea;
}
/* Error Messages */
.reset-new-password-error {
display: block;
font-size: 0.875rem;
margin-top: 8px;
min-height: 20px;
}
.reset-new-password-error-match {
color: #10b981;
font-weight: 600;
}
.reset-new-password-error-mismatch {
color: #dc2626;
}
.reset-new-password-note {
color: #6b7280;
font-size: 0.85rem;
margin: 8px 0 15px 0;
font-style: italic;
}
/* Password Requirements */
.reset-new-password-requirements {
background: #f8f9fa;
border-radius: 10px;
padding: 20px;
margin-top: 15px;
border-left: 4px solid #667eea;
}
.reset-new-password-requirements-title {
font-size: 1rem;
color: #374151;
margin: 0 0 15px 0;
font-weight: 600;
}
.reset-new-password-requirements-list {
list-style: none;
padding: 0;
margin: 0;
}
.reset-new-password-requirements-list li {
font-size: 0.85rem;
color: #6b7280;
margin-bottom: 8px;
padding-left: 25px;
position: relative;
display: flex;
align-items: center;
}
.reset-new-password-requirements-list li i {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 0.8rem;
}
.reset-new-password-requirement-valid {
color: #10b981 !important;
}
.reset-new-password-requirement-valid i {
color: #10b981 !important;
}
.reset-new-password-requirement-invalid {
color: #6b7280 !important;
}
.reset-new-password-requirement-invalid i {
color: #d1d5db !important;
}
/* Submit Button */
.reset-new-password-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
padding: 18px 40px;
border-radius: 50px;
border: none;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
font-family: 'Poppins', sans-serif;
margin-top: 10px;
}
.reset-new-password-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
color: white;
}
.reset-new-password-btn:active {
transform: translateY(-1px);
}
/* Help Section */
.reset-new-password-help {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
text-align: center;
color: #6b7280;
font-size: 0.9rem;
}
.reset-new-password-help a {
color: #667eea;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.reset-new-password-help a:hover {
color: #764ba2;
text-decoration: underline;
}
/* Animations */
@keyframes reset-new-password-fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes reset-new-password-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-15px);
}
60% {
transform: translateY(-7px);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.reset-new-password-container {
padding: 40px 30px;
width: 95%;
}
.reset-new-password-icon {
font-size: 70px;
margin-bottom: 20px;
}
.reset-new-password-title {
font-size: 1.9rem;
}
.reset-new-password-subtitle {
font-size: 1rem;
margin-bottom: 25px;
}
.reset-new-password-input {
padding: 15px 45px 15px 18px;
}
.reset-new-password-btn {
padding: 17px 35px;
font-size: 1rem;
}
.reset-new-password-requirements {
padding: 18px;
}
.reset-new-password-requirements-list li {
font-size: 0.82rem;
}
}
@media (max-width: 480px) {
.reset-new-password-section {
padding: 15px;
align-items: flex-start;
padding-top: 40px;
}
.reset-new-password-container {
padding: 35px 25px;
}
.reset-new-password-icon {
font-size: 60px;
margin-bottom: 15px;
}
.reset-new-password-title {
font-size: 1.6rem;
}
.reset-new-password-subtitle {
font-size: 0.95rem;
margin-bottom: 20px;
}
.reset-new-password-input {
padding: 14px 40px 14px 16px;
font-size: 0.95rem;
}
.reset-new-password-btn {
padding: 16px 30px;
font-size: 0.95rem;
}
.reset-new-password-requirements {
padding: 16px;
}
.reset-new-password-requirements-list li {
font-size: 0.8rem;
margin-bottom: 6px;
}
}
@media (max-width: 360px) {
.reset-new-password-container {
padding: 30px 20px;
}
.reset-new-password-title {
font-size: 1.4rem;
}
.reset-new-password-subtitle {
font-size: 0.9rem;
}
.reset-new-password-btn {
padding: 15px 25px;
font-size: 0.9rem;
}
}
/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
.reset-new-password-container {
background: #1a1a1a;
color: #ffffff;
}
.reset-new-password-title {
color: #ffffff;
}
.reset-new-password-subtitle {
color: #cccccc;
}
.reset-new-password-label {
color: #e5e7eb;
}
.reset-new-password-input {
background: #2d2d2d;
border-color: #404040;
color: #ffffff;
}
.reset-new-password-input:focus {
background: #1a1a1a;
border-color: #667eea;
}
.reset-new-password-input::placeholder {
color: #888888;
}
.reset-new-password-eye {
color: #888888;
}
.reset-new-password-eye:hover {
color: #8b9cff;
}
.reset-new-password-success {
background: #052e16;
border-color: #16a34a;
color: #86efac;
}
.reset-new-password-danger {
background: #450a0a;
border-color: #dc2626;
color: #fca5a5;
}
.reset-new-password-note {
color: #9ca3af;
}
.reset-new-password-requirements {
background: #2d2d2d;
border-left-color: #667eea;
}
.reset-new-password-requirements-title {
color: #e5e7eb;
}
.reset-new-password-requirements-list li {
color: #9ca3af;
}
.reset-new-password-requirement-valid {
color: #34d399 !important;
}
.reset-new-password-requirement-valid i {
color: #34d399 !important;
}
.reset-new-password-requirement-invalid i {
color: #4b5563 !important;
}
.reset-new-password-help {
border-top-color: #404040;
color: #9ca3af;
}
.reset-new-password-help a {
color: #8b9cff;
}
}
/* password rest success section */
/* =============================================
PASSWORD RESET SUCCESS PAGE STYLES
Namespaced with 'password-reset-success-' prefix to prevent conflicts
============================================= */
.password-reset-success-section {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
position: relative;
overflow: hidden;
font-family: 'Poppins', sans-serif;
}
.password-reset-success-container {
background: white;
padding: 50px 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
text-align: center;
max-width: 600px;
width: 90%;
animation: password-reset-success-fadeInUp 0.8s ease-out;
position: relative;
z-index: 2;
margin-top: 5rem;
}
.password-reset-success-icon {
font-size: 80px;
color: #4CAF50;
margin-bottom: 30px;
animation: password-reset-success-bounce 2s infinite;
}
.password-reset-success-icon i {
display: inline-block;
}
.password-reset-success-title {
font-size: 2.2rem;
color: #2c3e50;
margin: 0 0 20px 0;
font-weight: 700;
line-height: 1.3;
}
.password-reset-success-message {
font-size: 1.1rem;
color: #555;
margin-bottom: 40px;
line-height: 1.6;
}
.password-reset-success-message strong {
color: #667eea;
font-weight: 600;
}
/* Action Buttons */
.password-reset-success-actions {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 40px;
}
.password-reset-success-btn {
display: inline-block;
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
padding: 18px 40px;
border-radius: 50px;
text-decoration: none;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
border: none;
cursor: pointer;
}
.password-reset-success-btn:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
color: white;
text-decoration: none;
}
.password-reset-success-btn i {
margin-right: 10px;
transition: transform 0.3s ease;
}
.password-reset-success-btn:hover i {
transform: translateX(5px);
}
.password-reset-home-btn {
display: inline-block;
background: #f3f4f6;
color: #374151;
padding: 15px 40px;
border-radius: 50px;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border: 2px solid #e5e7eb;
}
.password-reset-home-btn:hover {
background: #e5e7eb;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
color: #374151;
text-decoration: none;
}
.password-reset-home-btn i {
margin-right: 10px;
transition: transform 0.3s ease;
}
.password-reset-home-btn:hover i {
transform: translateX(-5px);
}
/* Security Tips Section */
.password-reset-success-tips {
padding-top: 30px;
border-top: 1px solid #eee;
}
.password-reset-success-tips h3 {
color: #2c3e50;
font-size: 1.5rem;
margin-bottom: 20px;
font-weight: 600;
}
.password-reset-tips-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
display: inline-block;
max-width: 500px;
}
.password-reset-tips-list li {
color: #555;
font-size: 0.95rem;
margin-bottom: 12px;
padding-left: 35px;
position: relative;
line-height: 1.5;
}
.password-reset-tips-list li i {
color: #667eea;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
width: 25px;
text-align: center;
}
/* Confetti */
.password-reset-confetti {
position: fixed;
width: 10px;
height: 10px;
background: #f1c40f;
opacity: 0.8;
animation: password-reset-confetti-fall linear infinite;
z-index: 1;
pointer-events: none;
}
/* Animations */
@keyframes password-reset-success-fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes password-reset-success-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
@keyframes password-reset-confetti-fall {
0% {
transform: translateY(-100vh) rotate(0deg);
}
100% {
transform: translateY(100vh) rotate(720deg);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.password-reset-success-container {
padding: 40px 30px;
width: 95%;
}
.password-reset-success-icon {
font-size: 70px;
margin-bottom: 25px;
}
.password-reset-success-title {
font-size: 2rem;
margin-bottom: 15px;
}
.password-reset-success-message {
font-size: 1rem;
margin-bottom: 35px;
}
.password-reset-success-btn {
padding: 16px 35px;
font-size: 1rem;
}
.password-reset-home-btn {
padding: 14px 35px;
font-size: 0.95rem;
}
.password-reset-success-tips h3 {
font-size: 1.3rem;
}
.password-reset-tips-list li {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.password-reset-success-section {
padding: 15px;
align-items: flex-start;
padding-top: 40px;
}
.password-reset-success-container {
padding: 35px 25px;
}
.password-reset-success-icon {
font-size: 60px;
margin-bottom: 20px;
}
.password-reset-success-title {
font-size: 1.7rem;
}
.password-reset-success-message {
font-size: 0.95rem;
margin-bottom: 30px;
}
.password-reset-success-actions {
gap: 12px;
}
.password-reset-success-btn {
padding: 15px 30px;
font-size: 0.95rem;
}
.password-reset-home-btn {
padding: 13px 30px;
font-size: 0.9rem;
}
.password-reset-success-tips {
padding-top: 25px;
}
.password-reset-success-tips h3 {
font-size: 1.2rem;
margin-bottom: 15px;
}
.password-reset-tips-list li {
font-size: 0.85rem;
margin-bottom: 10px;
padding-left: 30px;
}
.password-reset-tips-list li i {
font-size: 1.1rem;
width: 20px;
}
}
@media (max-width: 360px) {
.password-reset-success-container {
padding: 30px 20px;
}
.password-reset-success-title {
font-size: 1.5rem;
}
.password-reset-success-message {
font-size: 0.9rem;
}
.password-reset-success-btn,
.password-reset-home-btn {
padding: 14px 25px;
font-size: 0.9rem;
}
.password-reset-tips-list li {
font-size: 0.8rem;
}
}
/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
.password-reset-success-container {
background: #1a1a1a;
color: #ffffff;
}
.password-reset-success-title {
color: #ffffff;
}
.password-reset-success-message {
color: #cccccc;
}
.password-reset-success-message strong {
color: #8b9cff;
}
.password-reset-home-btn {
background: #2d2d2d;
color: #ffffff;
border-color: #404040;
}
.password-reset-home-btn:hover {
background: #3d3d3d;
color: #ffffff;
}
.password-reset-success-tips {
border-top-color: #404040;
}
.password-reset-success-tips h3 {
color: #ffffff;
}
.password-reset-tips-list li {
color: #cccccc;
}
.password-reset-tips-list li i {
color: #8b9cff;
}
}
/* timeline */
/* =============================================
TIMELINE PAGE STYLES
Namespaced with 'timeline-' prefix to prevent conflicts
============================================= */
/* Main Layout */
.timeline-main-container {
min-height: 100vh;
background: #f5f7fa;
padding: 30px 0 50px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.timeline-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.timeline-row {
display: flex;
flex-wrap: wrap;
gap: 25px;
}
/* Sidebars */
.timeline-sidebar {
flex: 0 0 300px;
max-width: 300px;
}
.timeline-main-content {
flex: 1;
min-width: 0;
}
/* Widgets */
.timeline-widget {
background: white;
padding: 24px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
transition: transform 0.2s, box-shadow 0.2s;
}
.timeline-widget:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.timeline-widget-title {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #f0f2f5;
position: relative;
}
.timeline-widget-title:after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 60px;
height: 2px;
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}
/* Profile Widget */
.timeline-profile-widget {
text-align: center;
}
.timeline-profile-header {
margin-bottom: 20px;
}
.timeline-profile-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto 16px;
border: 4px solid #e8f5e9;
object-fit: cover;
display: block;
}
.timeline-profile-info {
margin-bottom: 20px;
}
.timeline-profile-name {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 4px;
}
.timeline-profile-username {
color: #7f8c8d;
font-size: 14px;
margin-bottom: 16px;
}
.timeline-profile-stats {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.timeline-stat-item {
text-align: center;
}
.timeline-stat-number {
font-size: 20px;
font-weight: 700;
color: #3b82f6;
margin-bottom: 4px;
}
.timeline-stat-label {
font-size: 12px;
color: #7f8c8d;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Quick Links */
.timeline-quick-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.timeline-quick-link {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 0;
color: #2c3e50;
text-decoration: none;
border-bottom: 1px solid #f0f2f5;
transition: all 0.2s;
}
.timeline-quick-link:hover {
color: #3b82f6;
padding-left: 10px;
background: #f8f9fa;
border-radius: 8px;
}
.timeline-quick-link:last-child {
border-bottom: none;
}
.timeline-quick-link i {
font-size: 18px;
width: 24px;
text-align: center;
}
/* Hashtags */
.timeline-hashtags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.timeline-hashtag-tag {
display: inline-block;
background: #e9ecef;
color: #495057;
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s;
border: 1px solid rgba(59, 130, 246, 0.2);
}
.timeline-hashtag-tag:hover {
background: #3b82f6;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
/* User Items */
.timeline-user-item {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f0f2f5;
transition: all 0.2s;
}
.timeline-user-item:hover {
background: #f8f9fa;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
margin: 0 -10px;
}
.timeline-user-item:last-child {
border-bottom: none;
}
.timeline-user-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
margin-right: 14px;
object-fit: cover;
border: 2px solid #e8f5e9;
}
.timeline-user-info {
flex: 1;
}
.timeline-user-name {
font-size: 15px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 2px;
}
.timeline-user-name a {
color: inherit;
text-decoration: none;
transition: color 0.2s;
}
.timeline-user-name a:hover {
color: #3b82f6;
}
.timeline-birthday-badge {
font-size: 12px;
color: #10b981;
display: flex;
align-items: center;
gap: 4px;
}
.timeline-birthday-date {
font-size: 12px;
color: #7f8c8d;
display: flex;
align-items: center;
gap: 4px;
}
/* Post Composer */
.timeline-post-composer {
background: white;
padding: 30px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.05);
margin-bottom: 25px;
}
.timeline-composer-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.timeline-composer-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 16px;
object-fit: cover;
border: 3px solid #e8f5e9;
}
.timeline-composer-info {
flex: 1;
}
.timeline-composer-title {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 4px;
}
.timeline-composer-subtitle {
font-size: 14px;
color: #7f8c8d;
}
.timeline-composer-textarea {
width: 100%;
border: 2px solid #ecf0f1;
border-radius: 12px;
padding: 16px;
font-size: 15px;
resize: none;
min-height: 120px;
font-family: inherit;
background: #fafbfc;
transition: all 0.3s;
color: #2c3e50;
margin-bottom: 20px;
}
.timeline-composer-textarea:focus {
outline: none;
border-color: #3b82f6;
background: white;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.timeline-composer-textarea::placeholder {
color: #95a5a6;
}
.timeline-composer-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #ecf0f1;
}
.timeline-attachments {
display: flex;
align-items: center;
gap: 12px;
}
.timeline-attachment-btn {
background: transparent;
border: none;
color: #7f8c8d;
font-size: 22px;
cursor: pointer;
padding: 8px;
border-radius: 10px;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
}
.timeline-attachment-btn:hover {
background: #f0f7ff;
color: #3b82f6;
transform: translateY(-2px);
}
/* Post Status */
.timeline-post-status {
position: relative;
}
.timeline-privacy-indicator {
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
background: #f8f9fa;
border-radius: 6px;
border: 1px solid #dee2e6;
}
.timeline-privacy-options {
display: none;
position: absolute;
background: white;
border: 1px solid #dee2e6;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
min-width: 150px;
z-index: 1000;
padding: 5px 0;
margin: 5px 0 0 0;
}
.timeline-privacy-options li {
list-style: none;
}
.timeline-privacy-options a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
color: #495057;
text-decoration: none;
transition: all 0.2s;
}
.timeline-privacy-options a:hover {
background: #f8f9fa;
color: #3b82f6;
}
/* Submit Button */
.timeline-submit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
padding: 14px 32px;
border-radius: 50px;
border: none;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}
.timeline-submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.4);
color: white;
}
.timeline-submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.timeline-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: white;
animation: timeline-spin 1s linear infinite;
}
@keyframes timeline-spin {
to {
transform: rotate(360deg);
}
}
/* Suggested Friends */
.timeline-suggested-friends {
background: white;
padding: 25px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
margin-bottom: 25px;
}
.timeline-section-title {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.timeline-see-all {
font-size: 14px;
color: #3b82f6;
text-decoration: none;
font-weight: 500;
}
.timeline-see-all:hover {
text-decoration: underline;
}
.timeline-suggested-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.timeline-suggested-item {
flex: 1;
min-width: 200px;
max-width: 250px;
background: #f8f9fa;
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.2s;
}
.timeline-suggested-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.timeline-suggested-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto 15px;
object-fit: cover;
border: 3px solid white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.timeline-suggested-info {
margin-bottom: 15px;
}
.timeline-suggested-name {
font-size: 16px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 8px;
}
.timeline-add-friend-btn {
background: #3b82f6;
color: white;
border: none;
padding: 8px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 5px;
}
.timeline-add-friend-btn:hover {
background: #2563eb;
transform: translateY(-2px);
}
/* Posts Container */
.timeline-posts-wrapper {
margin-top: 20px;
}
.timeline-post-card {
background: white;
padding: 0;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.05);
margin-bottom: 25px;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.timeline-post-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.timeline-post-header {
padding: 20px 24px;
border-bottom: 1px solid #f0f2f5;
display: flex;
align-items: center;
}
.timeline-post-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
margin-right: 16px;
object-fit: cover;
border: 3px solid #e8f5e9;
}
.timeline-post-user-info {
flex: 1;
}
.timeline-post-username {
font-size: 16px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 4px;
}
.timeline-post-username a {
color: inherit;
text-decoration: none;
transition: color 0.2s;
}
.timeline-post-username a:hover {
color: #3b82f6;
}
.timeline-post-meta {
font-size: 13px;
color: #7f8c8d;
display: flex;
align-items: center;
gap: 8px;
}
.timeline-privacy-badge {
font-size: 11px;
padding: 3px 8px;
border-radius: 12px;
background: #f0f7ff;
color: #3b82f6;
font-weight: 500;
margin-left: 5px;
}
.timeline-post-content {
padding: 20px 24px;
font-size: 15px;
line-height: 1.7;
color: #2c3e50;
}
.timeline-post-media {
margin: 0 24px 20px;
}
.timeline-post-image {
width: 100%;
max-height: 500px;
border-radius: 12px;
object-fit: contain;
background: #000;
}
.timeline-video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 12px;
}
.timeline-video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.timeline-music-player {
background-color: #f8f9fa;
padding: 15px;
border-radius: 12px;
border: 1px solid #ecf0f1;
}
.timeline-music-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.timeline-music-header i {
font-size: 24px;
color: #3b82f6;
}
.timeline-music-title {
font-weight: 600;
color: #333;
}
.timeline-music-info {
font-size: 12px;
color: #666;
}
.timeline-post-actions {
padding: 16px 24px;
border-top: 1px solid #f0f2f5;
display: flex;
justify-content: space-around;
}
.timeline-post-action-btn {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
color: #7f8c8d;
font-size: 14px;
cursor: pointer;
padding: 10px 20px;
border-radius: 10px;
transition: all 0.2s;
font-weight: 500;
}
.timeline-post-action-btn:hover {
background: #f0f7ff;
color: #3b82f6;
}
.timeline-post-action-btn.timeline-liked {
color: #e74c3c;
}
/* Comments Section */
.timeline-comments-section {
background: #f8f9fa;
border-top: 1px solid #ecf0f1;
padding: 20px 24px;
}
.timeline-loading-comments {
text-align: center;
color: #6c757d;
}
/* Profile Intro */
.timeline-profile-intro {
display: flex;
flex-direction: column;
gap: 15px;
}
.timeline-intro-item {
padding-bottom: 15px;
border-bottom: 1px solid #f0f2f5;
}
.timeline-intro-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.timeline-intro-label {
display: block;
font-weight: 600;
color: #2c3e50;
margin-bottom: 5px;
font-size: 14px;
}
.timeline-intro-content {
color: #6c757d;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* Following List */
.timeline-following-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.timeline-following-item {
display: flex;
align-items: center;
padding: 10px;
border-radius: 8px;
transition: all 0.2s;
}
.timeline-following-item:hover {
background: #f8f9fa;
}
.timeline-following-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
object-fit: cover;
border: 2px solid #e8f5e9;
}
.timeline-following-info {
flex: 1;
}
.timeline-following-name {
font-size: 14px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 2px;
}
.timeline-following-name a {
color: inherit;
text-decoration: none;
transition: color 0.2s;
}
.timeline-following-name a:hover {
color: #3b82f6;
}
.timeline-friend-btn {
font-size: 12px;
color: #6c757d;
text-decoration: none;
transition: color 0.2s;
}
.timeline-friend-btn:hover {
color: #e74c3c;
}
/* Loading States */
.timeline-loading-state {
text-align: center;
padding: 40px 20px;
color: #3b82f6;
}
.timeline-loading-state .timeline-spinner {
border: 3px solid #f3f3f3;
border-top: 3px solid #3b82f6;
width: 40px;
height: 40px;
margin: 0 auto 16px;
}
/* Hashtag Suggestions */
.timeline-hashtag-suggestions {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
max-height: 300px;
overflow-y: auto;
z-index: 9999;
position: absolute;
display: none;
}
.timeline-hashtag-suggestion-item {
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid #f3f4f6;
transition: all 0.2s ease;
}
.timeline-hashtag-suggestion-item:hover,
.timeline-hashtag-suggestion-item.active {
background: #f3f4f6;
}
/* Media Input */
.timeline-media-input {
display: none;
}
/* Utility Classes */
.timeline-d-none {
display: none !important;
}
/* Responsive Design */
@media (max-width: 1200px) {
.timeline-sidebar {
flex: 0 0 280px;
max-width: 280px;
}
}
@media (max-width: 992px) {
.timeline-row {
flex-direction: column;
}
.timeline-sidebar,
.timeline-main-content {
flex: 1;
max-width: 100%;
}
.timeline-suggested-item {
min-width: calc(50% - 10px);
}
}
@media (max-width: 768px) {
.timeline-container {
padding: 0 15px;
}
.timeline-widget,
.timeline-post-composer,
.timeline-post-card,
.timeline-suggested-friends {
padding: 16px;
border-radius: 12px;
}
.timeline-post-header,
.timeline-post-content,
.timeline-post-actions {
padding: 16px;
}
.timeline-post-media {
margin: 0 16px 16px;
}
.timeline-suggested-item {
min-width: 100%;
}
.timeline-composer-actions {
flex-direction: column;
gap: 16px;
}
.timeline-attachments {
width: 100%;
justify-content: space-between;
}
.timeline-submit-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.timeline-profile-stats {
flex-direction: column;
gap: 16px;
}
.timeline-post-actions {
flex-direction: column;
gap: 8px;
}
.timeline-post-action-btn {
width: 100%;
justify-content: center;
}
}
/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
.timeline-main-container {
background: #121212;
}
.timeline-widget,
.timeline-post-composer,
.timeline-post-card,
.timeline-suggested-friends {
background: #1e1e1e;
border-color: #333;
}
.timeline-widget-title,
.timeline-profile-name,
.timeline-composer-title,
.timeline-section-title,
.timeline-post-username,
.timeline-intro-label,
.timeline-following-name {
color: #ffffff;
}
.timeline-profile-username,
.timeline-composer-subtitle,
.timeline-post-meta,
.timeline-intro-content,
.timeline-friend-btn {
color: #b0b0b0;
}
.timeline-composer-textarea {
background: #2d2d2d;
border-color: #444;
color: #ffffff;
}
.timeline-composer-textarea:focus {
border-color: #3b82f6;
}
.timeline-composer-textarea::placeholder {
color: #888;
}
.timeline-quick-link {
color: #e0e0e0;
border-bottom-color: #333;
}
.timeline-quick-link:hover {
background: #2d2d2d;
color: #3b82f6;
}
.timeline-hashtag-tag {
background: #2d2d2d;
color: #e0e0e0;
border-color: #444;
}
.timeline-hashtag-tag:hover {
background: #3b82f6;
color: white;
}
.timeline-user-item,
.timeline-following-item {
border-bottom-color: #333;
}
.timeline-user-item:hover,
.timeline-following-item:hover {
background: #2d2d2d;
}
.timeline-post-header,
.timeline-post-actions {
border-color: #333;
}
.timeline-post-content {
color: #e0e0e0;
}
.timeline-post-action-btn {
color: #b0b0b0;
}
.timeline-post-action-btn:hover {
background: #2d2d2d;
}
.timeline-comments-section {
background: #2d2d2d;
border-color: #333;
}
.timeline-music-player {
background: #2d2d2d;
border-color: #444;
}
.timeline-music-title {
color: #e0e0e0;
}
.timeline-music-info {
color: #b0b0b0;
}
}
/* viewprofile */
/* Profile Page Styles - Non-conflicting with existing CSS */
.profile-main-container {
width: 100%;
min-height: 100vh;
background: #f5f7fb;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.profile-wrapper {
max-width: 1300px;
margin: 0 auto;
padding: 20px;
}
.profile-container {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
margin-top: 4rem;
}
/* Profile Header */
.profile-header {
position: relative;
margin-bottom: 20px;
}
.profile-cover-container {
position: relative;
height: 300px;
overflow: hidden;
border-radius: 12px 12px 0 0;
}
.profile-cover-wrapper {
position: relative;
height: 100%;
}
.profile-cover-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-cover-upload {
position: absolute;
bottom: 20px;
right: 20px;
}
.profile-upload-btn {
background: rgba(255, 255, 255, 0.95);
color: #333;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
transition: all 0.3s ease;
}
.profile-upload-btn:hover {
background: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.profile-info-section {
padding: 0 30px;
margin-top: -70px;
}
.profile-info-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.profile-picture-wrapper {
position: relative;
z-index: 2;
}
.profile-picture-container {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
border: 5px solid #fff;
background: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 3rem;
}
.profile-picture {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-picture-upload {
position: absolute;
bottom: 10px;
right: 10px;
}
.profile-picture-upload-btn {
width: 36px;
height: 36px;
background: #3b82f6;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 2px solid #fff;
transition: all 0.3s ease;
}
.profile-picture-upload-btn:hover {
background: #2563eb;
transform: scale(1.1);
}
.profile-details {
flex: 1;
margin-left: 30px;
margin-right: 30px;
}
.profile-name-section {
margin-bottom: 20px;
margin-top: 5rem;
}
.profile-name {
font-size: 28px;
font-weight: 700;
color: #1f2937;
margin: 0 0 8px 0;
display: flex;
align-items: center;
gap: 8px;
}
.profile-verified-badge {
color: #3b82f6;
font-size: 20px;
}
.profile-location {
display: flex;
align-items: center;
gap: 12px;
color: #6b7280;
font-size: 14px;
margin-bottom: 10px;
}
.profile-location i {
color: #9ca3af;
}
.profile-country {
display: inline-flex;
align-items: center;
gap: 5px;
}
.profile-bio {
color: #4b5563;
line-height: 1.5;
max-width: 600px;
}
.profile-stats {
display: flex;
gap: 30px;
}
.profile-stat-item {
text-align: center;
}
.profile-stat-number {
font-size: 20px;
font-weight: 700;
color: #1f2937;
}
.profile-stat-label {
font-size: 13px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.profile-actions {
display: flex;
align-items: center;
gap: 12px;
}
.profile-action-btn {
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
transition: all 0.3s ease;
}
.profile-action-add {
background: #3b82f6;
color: white;
}
.profile-action-add:hover {
background: #2563eb;
}
.profile-action-friend {
background: #10b981;
color: white;
}
.profile-action-friend:hover {
background: #059669;
}
.profile-action-follow {
background: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
}
.profile-action-follow:hover {
background: #e5e7eb;
}
.profile-action-following {
background: #10b981;
color: white;
}
.profile-action-following:hover {
background: #059669;
}
.profile-action-message {
background: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
}
.profile-action-message:hover {
background: #e5e7eb;
}
.profile-action-edit {
background: #6366f1;
color: white;
}
.profile-action-edit:hover {
background: #4f46e5;
}
.profile-more-options {
position: relative;
}
.profile-more-btn {
width: 40px;
height: 40px;
border-radius: 8px;
background: #f3f4f6;
border: 1px solid #d1d5db;
color: #6b7280;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.profile-more-btn:hover {
background: #e5e7eb;
}
.profile-more-dropdown {
position: absolute;
top: 100%;
right: 0;
width: 200px;
background: white;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
padding: 8px 0;
display: none;
z-index: 1000;
}
.profile-more-dropdown a {
display: block;
padding: 10px 16px;
color: #374151;
text-decoration: none;
font-size: 14px;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.2s ease;
}
.profile-more-dropdown a:hover {
background: #f3f4f6;
color: #3b82f6;
}
/* Profile Content Layout */
.profile-content-container {
padding: 20px;
}
.profile-row {
display: flex;
gap: 20px;
}
.profile-sidebar {
width: 300px;
flex-shrink: 0;
}
.profile-main-content {
flex: 1;
min-width: 0;
}
.profile-left-sidebar {
order: 0;
}
.profile-right-sidebar {
order: 2;
}
/* Profile Widget */
.profile-widget {
background: var(--bs-warning-bg-subtle);
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.profile-widget-title {
font-size: 18px;
font-weight: 600;
color: #1f2937;
margin: 0 0 20px 0;
padding-bottom: 12px;
border-bottom: 1px solid #f3f4f6;
}
/* Profile Navigation */
.profile-nav {
display: flex;
flex-direction: column;
gap: 8px;
}
.profile-nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: #6b7280;
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
}
.profile-nav-item:hover {
background: #f3f4f6;
color: #3b82f6;
}
.profile-nav-item.active {
background: #3b82f6;
color: white;
}
.profile-nav-item i {
width: 20px;
text-align: center;
}
/* Profile Info List */
.profile-info-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.profile-info-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
.profile-info-item i {
color: #6b7280;
width: 20px;
margin-top: 2px;
}
.profile-info-label {
font-size: 12px;
color: #6b7280;
margin-bottom: 4px;
}
.profile-info-value {
color: #1f2937;
font-size: 14px;
line-height: 1.4;
}
/* Social Links */
.profile-social-links {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.profile-social-link {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.profile-social-link:hover {
transform: translateY(-2px);
}
.profile-social-link.facebook {
background: #3b5998;
}
.profile-social-link.twitter {
background: #1da1f2;
}
.profile-social-link.youtube {
background: #ff0000;
}
.profile-social-link.instagram {
background: #e4405f;
}
.profile-social-link.linkedin {
background: #0077b5;
}
/* Profile Section Card */
.profile-section-card {
background: var(--bs-gray-200);
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.profile-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.profile-section-title {
font-size: 20px;
font-weight: 600;
color: #1f2937;
margin: 0;
}
.profile-section-action {
background: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.profile-section-action:hover {
background: #e5e7eb;
text-decoration: none;
color: #374151;
}
/* About Section */
.profile-about-content {
color: #4b5563;
line-height: 1.6;
font-size: 15px;
}
/* General Info */
.profile-general-info {
margin-top: 20px;
}
.profile-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.profile-info-item-box {
background: #f9fafb;
border-radius: 10px;
padding: 20px;
border: 1px solid #e5e7eb;
}
.profile-info-item-icon {
width: 48px;
height: 48px;
background: #3b82f6;
color: white;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
font-size: 20px;
}
.profile-info-item-content h4 {
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin: 0 0 12px 0;
}
.profile-info-item-content p {
color: #4b5563;
line-height: 1.5;
margin: 0;
}
/* Education & Experience Lists */
.profile-education-list,
.profile-experience-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.profile-education-item,
.profile-experience-item {
padding-bottom: 16px;
border-bottom: 1px solid #e5e7eb;
}
.profile-education-item:last-child,
.profile-experience-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.profile-education-degree,
.profile-experience-title {
font-size: 15px;
font-weight: 600;
color: #1f2937;
margin-bottom: 4px;
}
.profile-education-institution,
.profile-experience-company {
color: #6b7280;
font-size: 14px;
margin-bottom: 6px;
}
.profile-education-field,
.profile-experience-location,
.profile-education-period,
.profile-experience-period {
color: #6b7280;
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
.profile-education-description,
.profile-experience-description {
color: #4b5563;
font-size: 14px;
line-height: 1.5;
margin-top: 8px;
}
/* Photos Grid */
.profile-photos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
margin-top: 20px;
}
.profile-photo-item {
position: relative;
border-radius: 10px;
overflow: hidden;
aspect-ratio: 1;
}
.profile-photo-link {
display: block;
width: 100%;
height: 100%;
}
.profile-photo-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.profile-photo-item:hover .profile-photo-image {
transform: scale(1.05);
}
.profile-photo-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
padding: 16px;
opacity: 0;
transition: opacity 0.3s ease;
}
.profile-photo-item:hover .profile-photo-overlay {
opacity: 1;
}
.profile-photo-caption {
color: white;
font-size: 14px;
margin-bottom: 8px;
line-height: 1.4;
}
.profile-photo-meta {
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
}
/* Videos Grid */
.profile-videos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
margin-top: 20px;
}
.profile-video-item {
position: relative;
border-radius: 10px;
overflow: hidden;
}
.profile-video-thumbnail {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: 8px;
}
.profile-video-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-video-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
transition: all 0.3s ease;
}
.profile-video-item:hover .profile-video-play {
background: rgba(59, 130, 246, 0.9);
transform: translate(-50%, -50%) scale(1.1);
}
.profile-video-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.profile-video-meta {
padding: 12px 0;
text-align: center;
}
.profile-video-date {
color: #6b7280;
font-size: 13px;
}
/* Friends Preview */
.profile-friends-preview {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.profile-friend-item {
text-align: center;
}
.profile-friend-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.profile-friend-item:hover .profile-friend-avatar {
transform: scale(1.05);
}
.profile-friend-name {
font-size: 12px;
color: #374151;
margin-top: 8px;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-view-all {
display: block;
text-align: center;
color: #3b82f6;
text-decoration: none;
font-size: 14px;
font-weight: 500;
padding: 10px;
border-radius: 6px;
transition: all 0.3s ease;
}
.profile-view-all:hover {
background: #f3f4f6;
text-decoration: none;
}
/* Followers List */
.profile-followers-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.profile-follower-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 8px;
transition: background 0.3s ease;
}
.profile-follower-item:hover {
background: #f9fafb;
}
.profile-follower-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.profile-follower-info {
flex: 1;
}
.profile-follower-name {
font-size: 14px;
font-weight: 500;
color: #1f2937;
margin: 0 0 4px 0;
}
.profile-follower-name a {
color: inherit;
text-decoration: none;
}
.profile-follower-name a:hover {
color: #3b82f6;
}
.profile-follower-time {
font-size: 12px;
color: #9ca3af;
}
.profile-follow-btn {
width: 32px;
height: 32px;
border-radius: 6px;
background: #f3f4f6;
border: 1px solid #d1d5db;
color: #6b7280;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.profile-follow-btn:hover {
background: #e5e7eb;
color: #3b82f6;
}
/* Empty States */
.profile-empty-state {
text-align: center;
padding: 40px 20px;
color: #6b7280;
}
.profile-empty-state i {
font-size: 48px;
color: #d1d5db;
margin-bottom: 16px;
}
.profile-empty-state h4 {
font-size: 18px;
font-weight: 600;
color: #4b5563;
margin: 0 0 8px 0;
}
.profile-empty-state p {
margin: 0 0 20px 0;
}
.profile-empty-action {
background: #3b82f6;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.profile-empty-action:hover {
background: #2563eb;
}
.profile-no-friends,
.profile-no-followers {
text-align: center;
padding: 30px 20px;
color: #9ca3af;
}
.profile-no-friends i,
.profile-no-followers i {
font-size: 32px;
margin-bottom: 12px;
opacity: 0.5;
}
.profile-no-friends p,
.profile-no-followers p {
margin: 0;
font-size: 14px;
}
/* Alerts */
.profile-alert {
position: fixed;
top: 20px;
right: 20px;
padding: 16px 20px;
border-radius: 8px;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
min-width: 300px;
max-width: 400px;
z-index: 9999;
animation: slideIn 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.profile-alert-success {
background: #10b981;
border-left: 4px solid #059669;
}
.profile-alert-error {
background: #ef4444;
border-left: 4px solid #dc2626;
}
.profile-alert-info {
background: #3b82f6;
border-left: 4px solid #2563eb;
}
.profile-alert-close {
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
padding: 0;
margin-left: 10px;
opacity: 0.8;
transition: opacity 0.2s ease;
}
.profile-alert-close:hover {
opacity: 1;
}
/* Responsive Design */
@media (max-width: 1200px) {
.profile-row {
flex-direction: column;
}
.profile-sidebar,
.profile-main-content {
width: 100%;
}
.profile-left-sidebar,
.profile-right-sidebar {
order: 2;
}
}
@media (max-width: 768px) {
.profile-wrapper {
padding: 10px;
}
.profile-info-container {
flex-direction: column;
align-items: center;
text-align: center;
margin-top: -120px;
}
.profile-details {
margin: 20px 0;
text-align: center;
}
.profile-actions {
flex-wrap: wrap;
justify-content: center;
}
.profile-stats {
justify-content: center;
}
.profile-cover-container {
height: 200px;
}
.profile-picture-container {
width: 120px;
height: 120px;
}
.profile-info-grid {
grid-template-columns: 1fr;
}
.profile-photos-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.profile-videos-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.profile-friends-preview {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.profile-name {
font-size: 24px;
}
.profile-photos-grid {
grid-template-columns: repeat(2, 1fr);
}
.profile-videos-grid {
grid-template-columns: 1fr;
}
.profile-friends-preview {
grid-template-columns: repeat(3, 1fr);
}
.profile-friend-avatar {
width: 70px;
height: 70px;
}
}
/* blog front design */
/* Blog Styles - Namespaced to avoid conflicts */
.blog-container {
background: #f8f9fa;
min-height: 100vh;
padding: 40px 0;
}
/* Header Styles */
.blog-header {
margin-bottom: 40px;
}
.breadcrumb-nav .breadcrumb {
background: transparent;
padding: 0;
margin-bottom: 20px;
}
.breadcrumb-nav .breadcrumb-item a {
color: #6c757d;
text-decoration: none;
transition: color 0.3s;
}
.breadcrumb-nav .breadcrumb-item a:hover {
color: #0d6efd;
}
.breadcrumb-nav .breadcrumb-item.active {
color: #495057;
font-weight: 500;
}
.blog-title-section {
margin-bottom: 30px;
}
.blog-main-title {
font-size: 2.5rem;
font-weight: 700;
color: #212529;
margin-bottom: 10px;
}
.blog-subtitle {
font-size: 1.1rem;
color: #6c757d;
margin-bottom: 0;
}
/* Filters Section */
.blog-filters-section {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 1px solid #e9ecef;
}
.blog-stats {
display: flex;
align-items: center;
gap: 20px;
}
.total-posts-badge {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
}
.total-count {
color: #6c757d;
font-size: 0.95rem;
}
.search-wrapper .input-group {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border-radius: 8px;
overflow: hidden;
}
.search-wrapper .input-group-text {
background: white;
border: none;
color: #6c757d;
}
.search-wrapper .search-input {
border: none;
padding: 12px;
font-size: 0.95rem;
}
.search-wrapper .search-input:focus {
box-shadow: none;
outline: none;
}
.sort-wrapper .sort-select {
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 10px 15px;
font-size: 0.95rem;
color: #495057;
background: white;
cursor: pointer;
transition: all 0.3s;
width: 100%;
}
.sort-wrapper .sort-select:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
outline: none;
}
/* Sidebar Styles */
.blog-sidebar {
position: sticky;
top: 20px;
}
.sidebar-widget {
background: white;
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 1px solid #e9ecef;
}
.sidebar-widget .widget-title {
font-size: 1.1rem;
font-weight: 600;
color: #212529;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #f8f9fa;
display: flex;
align-items: center;
gap: 10px;
}
/* Categories Widget */
.category-list {
list-style: none;
padding: 0;
margin: 0;
}
.category-list li {
margin-bottom: 12px;
}
.category-list li:last-child {
margin-bottom: 0;
}
.category-list li a {
display: flex;
justify-content: space-between;
align-items: center;
color: #495057;
text-decoration: none;
padding: 10px 0;
border-radius: 6px;
transition: all 0.3s;
}
.category-list li a:hover {
color: #667eea;
background: #f8f9fa;
padding-left: 10px;
}
.category-count {
background: #e9ecef;
color: #6c757d;
font-size: 0.85rem;
padding: 2px 8px;
border-radius: 10px;
}
/* Popular Posts Widget */
.popular-posts-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.popular-post-item {
display: flex;
gap: 12px;
align-items: flex-start;
}
.popular-post-image {
width: 70px;
height: 70px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.popular-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.popular-post-item:hover .popular-post-image img {
transform: scale(1.05);
}
.popular-post-content h5 {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 6px;
line-height: 1.4;
}
.popular-post-content h5 a {
color: #212529;
text-decoration: none;
transition: color 0.3s;
}
.popular-post-content h5 a:hover {
color: #667eea;
}
.post-meta-small {
display: flex;
gap: 12px;
font-size: 0.85rem;
color: #6c757d;
}
.post-meta-small span {
display: flex;
align-items: center;
gap: 4px;
}
/* Tags Widget */
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #f8f9fa;
color: #495057;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.9rem;
text-decoration: none;
border: 1px solid #e9ecef;
transition: all 0.3s;
}
.tag-badge:hover {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.tag-count {
background: rgba(255, 255, 255, 0.2);
color: inherit;
font-size: 0.8rem;
padding: 1px 6px;
border-radius: 10px;
}
/* Newsletter Widget */
.newsletter-widget {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
}
.newsletter-content {
text-align: center;
}
.newsletter-icon {
font-size: 2.5rem;
margin-bottom: 15px;
display: block;
}
.newsletter-content h5 {
font-size: 1.2rem;
margin-bottom: 10px;
color: white;
}
.newsletter-content p {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 20px;
font-size: 0.95rem;
}
.newsletter-form .input-group {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.newsletter-form .form-control {
border: none;
padding: 12px 15px;
font-size: 0.95rem;
}
.newsletter-form .form-control:focus {
box-shadow: none;
outline: none;
}
.newsletter-form .btn-subscribe {
background: #4a6cf7;
color: white;
border: none;
padding: 12px 20px;
transition: background 0.3s;
}
.newsletter-form .btn-subscribe:hover {
background: #3a5ce5;
}
/* Blog Posts Grid */
.blog-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 24px;
margin-bottom: 40px;
}
.blog-post-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
transition: all 0.3s;
display: flex;
flex-direction: column;
}
.blog-post-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
/* Post Header */
.post-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 20px 20px 0;
margin-bottom: 15px;
}
.post-author-info {
display: flex;
gap: 12px;
align-items: flex-start;
}
.author-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #f8f9fa;
}
.author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-details {
flex: 1;
}
.author-name {
font-size: 1rem;
font-weight: 600;
margin-bottom: 4px;
}
.author-name a {
color: #212529;
text-decoration: none;
transition: color 0.3s;
}
.author-name a:hover {
color: #667eea;
}
.post-date {
font-size: 0.85rem;
color: #6c757d;
display: flex;
align-items: center;
gap: 6px;
}
.post-actions-dropdown {
position: relative;
}
.post-action-btn {
background: none;
border: none;
color: #6c757d;
font-size: 1.1rem;
cursor: pointer;
padding: 5px;
border-radius: 6px;
transition: all 0.3s;
}
.post-action-btn:hover {
background: #f8f9fa;
color: #212529;
}
.post-actions-dropdown .dropdown-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
display: none;
min-width: 160px;
background: white;
border: 1px solid #e9ecef;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
padding: 8px 0;
}
.post-actions-dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
color: #495057;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s;
}
.dropdown-item:hover {
background: #f8f9fa;
color: #667eea;
}
/* Post Content */
.post-content {
padding: 0 20px;
margin-bottom: 20px;
}
.post-image-link {
display: block;
text-decoration: none;
margin-bottom: 20px;
}
.post-image-container {
position: relative;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 16/9;
}
.post-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.post-image-container:hover .post-image {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
}
.post-image-container:hover .image-overlay {
opacity: 1;
}
.read-more-btn {
background: rgba(255, 255, 255, 0.9);
color: #212529;
padding: 10px 24px;
border-radius: 20px;
font-weight: 500;
font-size: 0.95rem;
}
.post-details {
margin-top: 15px;
}
.post-title {
text-decoration: none;
color: inherit;
display: block;
margin-bottom: 12px;
}
.post-title h2 {
font-size: 1.4rem;
font-weight: 700;
color: #212529;
margin: 0;
line-height: 1.4;
transition: color 0.3s;
}
.post-title:hover h2 {
color: #667eea;
}
.post-excerpt {
color: #6c757d;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 15px;
}
.post-meta {
display: flex;
gap: 20px;
font-size: 0.9rem;
color: #6c757d;
}
.post-meta span {
display: flex;
align-items: center;
gap: 6px;
}
.category-badge {
background: #f0f7ff;
color: #4a6cf7;
padding: 4px 12px;
border-radius: 15px;
font-weight: 500;
}
/* Post Footer */
.post-footer {
padding: 20px;
border-top: 1px solid #e9ecef;
background: #f8f9fa;
margin-top: auto;
}
.post-stats {
display: flex;
gap: 20px;
margin-bottom: 15px;
}
.stat-item .stat-btn {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: none;
color: #6c757d;
font-size: 0.9rem;
cursor: pointer;
padding: 6px 12px;
border-radius: 6px;
transition: all 0.3s;
text-decoration: none;
}
.stat-item .stat-btn:hover {
background: white;
color: #4a6cf7;
}
.stat-item .like-btn.liked {
color: #ff4757;
}
.post-share {
display: flex;
justify-content: space-between;
align-items: center;
}
.share-dropdown {
position: relative;
display: inline-block;
}
.share-btn {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
border: none;
padding: 8px 20px;
border-radius: 20px;
font-size: 0.9rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
}
.share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.share-options {
position: absolute;
bottom: 100%;
left: 0;
background: white;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 10px;
display: flex;
gap: 10px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s;
z-index: 100;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.share-dropdown:hover .share-options {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.share-option {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: transform 0.3s;
}
.share-option.facebook { background: #3b5998; }
.share-option.twitter { background: #1da1f2; }
.share-option.linkedin { background: #0077b5; }
.share-option.whatsapp { background: #25d366; }
.share-option:hover {
transform: scale(1.1);
}
.read-full-btn {
background: transparent;
color: #4a6cf7;
border: 2px solid #4a6cf7;
padding: 8px 20px;
border-radius: 20px;
font-weight: 500;
font-size: 0.9rem;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
}
.read-full-btn:hover {
background: #4a6cf7;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(74, 108, 247, 0.3);
}
/* Pagination */
.blog-pagination-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 1px solid #e9ecef;
}
.pagination-info {
color: #6c757d;
font-size: 0.95rem;
}
.custom-pagination .pagination {
margin: 0;
}
.custom-pagination .page-link {
border: none;
color: #495057;
margin: 0 2px;
border-radius: 6px;
transition: all 0.3s;
}
.custom-pagination .page-link:hover {
background: #f8f9fa;
color: #4a6cf7;
}
.custom-pagination .page-item.active .page-link {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
}
.btn-load-more {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s;
}
.btn-load-more:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.btn-load-more.loading .fa-spinner {
display: inline-block !important;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Empty State */
.empty-blog-state {
background: white;
border-radius: 12px;
padding: 60px 20px;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
border: 2px dashed #e9ecef;
}
.empty-state-content i {
font-size: 4rem;
color: #dee2e6;
margin-bottom: 20px;
}
.empty-state-content h3 {
font-size: 1.8rem;
color: #495057;
margin-bottom: 10px;
}
.empty-state-content p {
color: #6c757d;
margin-bottom: 25px;
font-size: 1.1rem;
}
.btn-create-post {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
transition: all 0.3s;
}
.btn-create-post:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
color: white;
}
/* Responsive Design */
@media (max-width: 1200px) {
.blog-posts-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
}
@media (max-width: 992px) {
.blog-content-row {
flex-direction: column-reverse;
}
.blog-sidebar {
position: static;
margin-bottom: 30px;
}
.blog-posts-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
@media (max-width: 768px) {
.blog-main-title {
font-size: 2rem;
}
.blog-filters-section .row {
flex-direction: column;
gap: 20px;
}
.blog-stats {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.blog-pagination-section {
flex-direction: column;
gap: 20px;
text-align: center;
}
.post-share {
flex-direction: column;
gap: 15px;
align-items: stretch;
}
.read-full-btn {
justify-content: center;
}
}
@media (max-width: 576px) {
.blog-posts-grid {
grid-template-columns: 1fr;
}
.blog-container {
padding: 20px 0;
}
.blog-title-section {
margin-bottom: 20px;
}
.sidebar-widget {
padding: 20px;
}
}
/* blog details design */
/* Blog Detail Page Styles - Non-conflicting with existing CSS */
.blogdetail-main-container {
width: 100%;
min-height: 100vh;
background: #f5f7fb;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.blogdetail-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.blogdetail-container {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
/* Blog Header */
.blogdetail-header {
padding: 30px;
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
}
.blogdetail-breadcrumb {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
font-size: 14px;
}
.blogdetail-breadcrumb a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
transition: color 0.3s ease;
}
.blogdetail-breadcrumb a:hover {
color: white;
text-decoration: underline;
}
.blogdetail-breadcrumb span {
color: white;
font-weight: 500;
}
.blogdetail-breadcrumb i {
opacity: 0.7;
font-size: 12px;
}
.blogdetail-title {
font-size: 36px;
font-weight: 700;
margin: 0 0 30px 0;
line-height: 1.3;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.blogdetail-meta {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.blogdetail-author {
display: flex;
align-items: center;
gap: 15px;
}
.blogdetail-author-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.3);
object-fit: cover;
}
.blogdetail-author-info {
display: flex;
flex-direction: column;
}
.blogdetail-author-name {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
}
.blogdetail-date {
font-size: 14px;
opacity: 0.9;
display: flex;
align-items: center;
gap: 8px;
}
.blogdetail-stats {
display: flex;
gap: 25px;
}
.blogdetail-stat-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
background: rgba(255, 255, 255, 0.1);
padding: 8px 16px;
border-radius: 20px;
backdrop-filter: blur(10px);
cursor: pointer;
transition: all 0.3s ease;
}
.blogdetail-stat-item:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* Blog Content */
.blogdetail-content-container {
padding: 30px;
}
.blogdetail-row {
display: flex;
gap: 30px;
}
.blogdetail-main-content {
flex: 1;
min-width: 0;
}
.blogdetail-sidebar {
width: 350px;
flex-shrink: 0;
}
/* Featured Image */
.blogdetail-featured-image {
position: relative;
border-radius: 12px;
overflow: hidden;
margin-bottom: 30px;
}
.blogdetail-image {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
}
.blogdetail-image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 50%);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 20px;
}
.blogdetail-featured-image:hover .blogdetail-image-overlay {
opacity: 1;
}
.blogdetail-image-actions {
display: flex;
gap: 10px;
}
.blogdetail-action-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: none;
color: #333;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.blogdetail-action-btn:hover {
background: white;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Content Section */
.blogdetail-content-section {
background: #fff;
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.blogdetail-content {
line-height: 1.8;
color: #333;
font-size: 16px;
}
.blogdetail-content p {
margin-bottom: 20px;
}
.blogdetail-quote {
margin: 30px 0;
padding: 30px;
background: #f8f9ff;
border-left: 4px solid #667eea;
border-radius: 8px;
position: relative;
}
.blogdetail-quote i {
position: absolute;
top: 20px;
left: 20px;
font-size: 24px;
color: #667eea;
opacity: 0.3;
}
.blogdetail-quote blockquote {
margin: 0;
padding-left: 40px;
font-style: italic;
font-size: 18px;
color: #444;
line-height: 1.6;
}
.blogdetail-quote cite {
display: block;
margin-top: 15px;
font-size: 14px;
color: #666;
font-weight: 600;
font-style: normal;
}
/* Tags */
.blogdetail-tags {
margin: 40px 0 30px 0;
padding-top: 20px;
border-top: 1px solid #eee;
}
.blogdetail-tags h4 {
font-size: 18px;
color: #333;
margin: 0 0 15px 0;
}
.blogdetail-tags-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.blogdetail-tag {
background: #f0f2ff;
color: #667eea;
padding: 8px 16px;
border-radius: 20px;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
}
.blogdetail-tag:hover {
background: #667eea;
color: white;
transform: translateY(-2px);
text-decoration: none;
}
/* Social Share */
.blogdetail-social-share {
margin: 40px 0;
padding: 25px;
background: #f8f9ff;
border-radius: 12px;
}
.blogdetail-social-share h4 {
font-size: 18px;
color: #333;
margin: 0 0 20px 0;
}
.blogdetail-share-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
}
.blogdetail-share-btn {
padding: 12px 15px;
border: none;
border-radius: 8px;
color: white;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
}
.blogdetail-share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.blogdetail-share-btn.facebook {
background: #3b5998;
}
.blogdetail-share-btn.twitter {
background: #1da1f2;
}
.blogdetail-share-btn.whatsapp {
background: #25d366;
}
.blogdetail-share-btn.linkedin {
background: #0077b5;
}
/* Comments Section */
.blogdetail-comments-section {
margin-top: 50px;
padding-top: 30px;
border-top: 2px solid #eee;
}
.blogdetail-comments-header {
margin-bottom: 30px;
}
.blogdetail-comments-header h3 {
font-size: 24px;
color: #333;
margin: 0 0 15px 0;
}
.blogdetail-alert {
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.blogdetail-alert.success {
background: #d1fae5;
color: #065f46;
border: 1px solid #a7f3d0;
}
.blogdetail-alert.error {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
}
/* Comments List */
.blogdetail-comments-list {
margin-bottom: 40px;
}
.blogdetail-comment-item {
display: flex;
gap: 15px;
padding: 20px 0;
border-bottom: 1px solid #f0f0f0;
}
.blogdetail-comment-item:last-child {
border-bottom: none;
}
.blogdetail-comment-avatar {
flex-shrink: 0;
}
.blogdetail-comment-avatar img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.blogdetail-comment-content {
flex: 1;
}
.blogdetail-comment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.blogdetail-comment-header h5 {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
}
.blogdetail-comment-time {
font-size: 12px;
color: #999;
}
.blogdetail-comment-text {
color: #555;
line-height: 1.6;
margin-bottom: 15px;
}
.blogdetail-comment-actions {
display: flex;
gap: 20px;
}
.blogdetail-comment-action {
background: none;
border: none;
color: #666;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
padding: 5px 0;
transition: color 0.3s ease;
}
.blogdetail-comment-action:hover {
color: #667eea;
}
/* Replies */
.blogdetail-replies {
margin-top: 20px;
padding-left: 30px;
border-left: 2px solid #f0f0f0;
}
.blogdetail-reply-item {
display: flex;
gap: 12px;
padding: 15px 0;
border-bottom: 1px solid #f5f5f5;
}
.blogdetail-reply-item:last-child {
border-bottom: none;
}
.blogdetail-reply-avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.blogdetail-reply-content {
flex: 1;
}
.blogdetail-reply-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.blogdetail-reply-header h6 {
font-size: 14px;
font-weight: 600;
color: #333;
margin: 0;
}
.blogdetail-reply-time {
font-size: 11px;
color: #999;
}
.blogdetail-reply-text {
color: #666;
font-size: 14px;
line-height: 1.5;
margin-bottom: 10px;
}
.blogdetail-reply-actions {
display: flex;
gap: 15px;
}
.blogdetail-no-comments {
text-align: center;
padding: 40px 20px;
color: #999;
}
.blogdetail-no-comments i {
font-size: 48px;
margin-bottom: 15px;
opacity: 0.3;
}
.blogdetail-no-comments p {
margin: 0;
font-size: 16px;
}
/* Add Comment */
.blogdetail-add-comment {
display: flex;
gap: 15px;
margin-top: 30px;
}
.blogdetail-comment-form {
flex: 1;
}
.blogdetail-comment-form textarea {
width: 100%;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
resize: vertical;
font-family: inherit;
font-size: 14px;
min-height: 100px;
transition: border 0.3s ease;
}
.blogdetail-comment-form textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.blogdetail-comment-submit {
margin-top: 15px;
}
.blogdetail-comment-submit button {
background: var(--bs-gray-400);
color: white;
border: none;
padding: 12px 25px;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
}
.blogdetail-comment-submit button:hover {
background: #5a6fd8;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
/* Sidebar Widgets */
.blogdetail-widget {
background: #fff;
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.blogdetail-widget-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 20px 0;
padding-bottom: 15px;
border-bottom: 2px solid #f0f2ff;
}
/* Search Widget */
.blogdetail-search-form {
position: relative;
}
.blogdetail-search-input {
width: 100%;
padding: 12px 15px;
padding-right: 45px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
transition: all 0.3s ease;
}
.blogdetail-search-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.blogdetail-search-btn {
position: absolute;
right: 5px;
top: 5px;
background: #667eea;
color: white;
border: none;
width: 35px;
height: 35px;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease;
}
.blogdetail-search-btn:hover {
background: #5a6fd8;
}
/* Related Posts */
.blogdetail-related-posts {
display: flex;
flex-direction: column;
gap: 20px;
}
.blogdetail-related-post {
display: flex;
gap: 15px;
padding-bottom: 20px;
border-bottom: 1px solid #f0f0f0;
}
.blogdetail-related-post:last-child {
padding-bottom: 0;
border-bottom: none;
}
.blogdetail-related-image {
flex-shrink: 0;
}
.blogdetail-related-image img {
width: 80px;
height: 80px;
border-radius: 8px;
object-fit: cover;
}
.blogdetail-related-content {
flex: 1;
}
.blogdetail-related-title {
margin: 0 0 8px 0;
font-size: 15px;
line-height: 1.4;
}
.blogdetail-related-title a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.blogdetail-related-title a:hover {
color: #667eea;
text-decoration: underline;
}
.blogdetail-related-meta {
font-size: 12px;
color: #999;
display: flex;
align-items: center;
gap: 5px;
}
/* Categories */
.blogdetail-categories {
list-style: none;
padding: 0;
margin: 0;
}
.blogdetail-categories li {
padding: 12px 0;
border-bottom: 1px solid #f5f5f5;
}
.blogdetail-categories li:last-child {
border-bottom: none;
}
.blogdetail-categories a {
display: flex;
justify-content: space-between;
align-items: center;
color: #555;
text-decoration: none;
transition: all 0.3s ease;
}
.blogdetail-categories a:hover {
color: #667eea;
transform: translateX(5px);
}
.blogdetail-category-count {
background: #f0f2ff;
color: #667eea;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
/* Contact Form */
.blogdetail-contact-form {
margin-top: 10px;
}
.blogdetail-form-group {
margin-bottom: 15px;
}
.blogdetail-form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
transition: all 0.3s ease;
}
.blogdetail-form-control:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* Force larger captcha container */
.blogdetail-captcha-container {
margin: 25px 0;
background: #fff;
padding: 20px;
border-radius: 10px;
border: 1px solid #e0e0e0;
}
/* Make the input field larger too */
#blogdetail-captchaInput {
font-size: 18px;
padding: 15px;
text-align: center;
letter-spacing: 3px;
font-weight: bold;
height: 50px;
}
.blogdetail-captcha-row {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 10px;
}
.blogdetail-captcha-display {
background: #f8f9fa;
border-radius: 8px;
border: 2px solid rgba(212, 175, 55, 0.3);
padding: 25px;
text-align: center;
margin-bottom: 20px;
font-size: 32px;
font-weight: bold;
letter-spacing: 15px;
color: #d4af37;
font-family: 'Courier New', monospace;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.blogdetail-captcha-display img {
width: 100%; /* Make image responsive */
height: 120px;
max-height: 95px; /* Limit maximum height */
object-fit: contain;
font-size: 120px !important;
}
.blogdetail-captcha-refresh {
padding: 12px 20px; /* Slightly larger */
background: #667eea;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
transition: background 0.3s ease;
white-space: nowrap;
}
.blogdetail-captcha-refresh:hover {
background: #5a6fd8;
}
.blogdetail-captcha-refresh i {
font-size: 16px;
}
/* If captcha is text (not image) */
.blogdetail-captcha-display:not(:has(img)) {
font-family: 'Courier New', monospace; /* Use monospace for text captcha */
font-size: 32px; /* Larger font for text captcha */
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.blogdetail-error-message {
color: #dc3545;
font-size: 13px;
margin-top: 5px;
}
.blogdetail-submit-btn {
width: 100%;
padding: 14px;
background: #667eea;
color: white;
border: none;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
}
.blogdetail-submit-btn:hover {
background: #5a6fd8;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
/* Banner */
.blogdetail-banner {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
border-radius: 12px;
padding: 30px;
text-align: center;
color: white;
}
.blogdetail-banner-content i {
font-size: 48px;
margin-bottom: 15px;
opacity: 0.9;
}
.blogdetail-banner-content h5 {
font-size: 20px;
font-weight: 600;
margin: 0 0 10px 0;
}
.blogdetail-banner-content p {
font-size: 14px;
opacity: 0.9;
margin: 0 0 20px 0;
}
.blogdetail-banner-btn {
display: inline-block;
background: white;
color: #667eea;
padding: 12px 25px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.blogdetail-banner-btn:hover {
background: #f8f9ff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
text-decoration: none;
}
/* Modal Styles */
.blogdetail-modal-footer {
display: flex;
justify-content: flex-end;
gap: 15px;
margin-top: 20px;
}
.blogdetail-btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.blogdetail-btn.primary {
background: #667eea;
color: white;
}
.blogdetail-btn.primary:hover {
background: #5a6fd8;
transform: translateY(-2px);
}
.blogdetail-btn.secondary {
background: #f8f9fa;
color: #666;
border: 1px solid #ddd;
}
.blogdetail-btn.secondary:hover {
background: #e9ecef;
}
/* Responsive Design */
@media (max-width: 1200px) {
.blogdetail-row {
flex-direction: column;
}
.blogdetail-sidebar {
width: 100%;
}
}
@media (max-width: 768px) {
.blogdetail-wrapper {
padding: 10px;
}
.blogdetail-header {
padding: 20px;
}
.blogdetail-title {
font-size: 28px;
}
.blogdetail-meta {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.blogdetail-stats {
width: 100%;
justify-content: space-between;
gap: 10px;
}
.blogdetail-stat-item {
flex: 1;
justify-content: center;
}
.blogdetail-image {
height: 300px;
}
.blogdetail-content-container {
padding: 20px;
}
.blogdetail-share-buttons {
grid-template-columns: repeat(2, 1fr);
}
.blogdetail-replies {
padding-left: 20px;
}
}
@media (max-width: 480px) {
.blogdetail-title {
font-size: 24px;
}
.blogdetail-stat-item span {
display: none;
}
.blogdetail-share-buttons {
grid-template-columns: 1fr;
}
.blogdetail-add-comment {
flex-direction: column;
}
.blogdetail-widget {
padding: 20px;
}
}
/* ============================================
REDESIGNED HEADER STYLES - FIXED VERSION
============================================ */
/* Reset some conflicting styles */
.site-header-new,
.site-header-new * {
box-sizing: border-box;
}
/* Header Container */
.site-header-new {
position: relative;
z-index: 99999 !important;
width: 100%;
background: #ffffff;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
font-family: 'Poppins', sans-serif;
}
/* Container fix */
.site-header-new .container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Top Bar */
.header-top-bar {
background: #020d26;
color: #ffffff;
padding: 8px 0;
font-size: 14px;
}
.header-top-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.contact-info span {
margin-right: 20px;
display: inline-block;
}
.contact-info i {
margin-right: 5px;
color: #4a90e2;
}
.top-right-menu a {
color: #ffffff;
text-decoration: none;
margin-left: 15px;
transition: color 0.3s;
}
.top-right-menu a:hover {
color: #4a90e2;
}
.welcome-text {
color: #4a90e2;
margin-right: 15px;
}
/* Main Navigation Area */
.header-main-nav {
padding: 15px 0;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
/* Logo */
.header-logo {
flex-shrink: 0;
}
.header-logo .main-logo {
max-height: 50px;
width: auto;
transition: transform 0.3s;
}
.header-logo .main-logo:hover {
transform: scale(1.05);
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
width: 30px;
height: 25px;
position: relative;
cursor: pointer;
padding: 0;
z-index: 10001;
}
.mobile-menu-toggle span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #020d26;
border-radius: 3px;
transition: all 0.3s;
}
.mobile-menu-toggle span:nth-child(1) {
top: 0;
}
.mobile-menu-toggle span:nth-child(2) {
top: 11px;
}
.mobile-menu-toggle span:nth-child(3) {
top: 22px;
}
.mobile-menu-toggle.active span:nth-child(1) {
transform: rotate(45deg);
top: 11px;
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg);
top: 11px;
}
/* Search */
.header-search {
position: relative;
margin-right: 15px;
}
.search-toggle {
background: none;
border: none;
font-size: 20px;
color: #020d26;
cursor: pointer;
padding: 5px;
transition: color 0.3s;
}
.search-toggle:hover {
color: #4a90e2;
}
.search-form-container {
position: absolute;
top: 100%;
right: 0;
width: 300px;
background: white;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
border-radius: 8px;
padding: 20px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s;
z-index: 1000;
}
.search-form-container.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.search-input {
width: 100%;
padding: 10px 15px;
border: 1px solid #e0e0e0;
border-radius: 6px;
font-size: 14px;
outline: none;
transition: border-color 0.3s;
}
.search-input:focus {
border-color: #4a90e2;
}
.search-submit {
position: absolute;
right: 35px;
top: 20px;
background: none;
border: none;
color: #020d26;
cursor: pointer;
font-size: 16px;
}
.search-close {
position: absolute;
right: 20px;
top: 20px;
background: none;
border: none;
color: #666;
cursor: pointer;
font-size: 16px;
}
/* Main Navigation */
.main-navigation {
flex: 1;
display: flex;
justify-content: flex-end;
}
.nav-menu {
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.nav-item {
position: relative;
margin-left: 20px;
}
.nav-link {
color: #020d26;
text-decoration: none;
font-weight: 500;
font-size: 16px;
padding: 10px 0;
position: relative;
transition: color 0.3s;
display: flex;
align-items: center;
white-space: nowrap;
}
.nav-link:hover {
color: #4a90e2;
}
.nav-item.active .nav-link {
color: #4a90e2;
}
.nav-item.active .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #4a90e2;
}
/* Dropdown Styles - FIXED */
.dropdown-menu {
position: absolute !important;
top: 100% !important;
left: 0;
min-width: 220px;
background: white;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
border-radius: 8px;
padding: 10px 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 1000;
display: block !important;
pointer-events: none;
}
.nav-item.dropdown:hover .dropdown-menu,
.dropdown-menu.show {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
.dropdown-menu li {
list-style: none;
}
.dropdown-menu a {
display: block;
padding: 10px 20px;
color: #333;
text-decoration: none;
font-size: 14px;
transition: all 0.3s;
}
.dropdown-menu a:hover {
background: #f8f9fa;
color: #4a90e2;
padding-left: 25px;
}
/* User Dropdown - FIXED */
.user-dropdown .nav-link {
padding: 5px 12px !important;
border-radius: 50px;
background: #f8f9fa;
transition: all 0.3s;
border: none !important;
}
.user-dropdown .nav-link:hover {
background: #4a90e2 !important;
color: white !important;
}
.user-avatar {
width: 35px;
height: 35px;
border-radius: 50%;
object-fit: cover;
margin-right: 8px;
border: 2px solid #e0e0e0;
}
.avatar-placeholder {
width: 35px;
height: 35px;
border-radius: 50%;
background: #4a90e2;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 8px;
}
.user-name {
margin-right: 5px;
font-size: 14px;
}
.dropdown-arrow {
font-size: 14px;
transition: transform 0.3s;
margin-left: 5px;
}
.user-dropdown:hover .dropdown-arrow {
transform: rotate(180deg);
}
/* User Menu - FIXED */
.user-menu {
min-width: 280px !important;
right: 0 !important;
left: auto !important;
}
.user-info {
padding: 20px;
background: linear-gradient(135deg, #4a90e2, #63b3ed);
border-radius: 8px 8px 0 0;
color: white;
}
.user-details {
display: flex;
align-items: center;
}
.user-avatar-large {
margin-right: 15px;
}
.user-avatar-large img {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.3);
object-fit: cover;
}
.avatar-placeholder-large {
width: 60px;
height: 60px;
border-radius: 50%;
background: white;
color: #4a90e2;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
border: 3px solid rgba(255, 255, 255, 0.3);
}
.user-text h6 {
margin: 0 0 5px 0;
font-size: 16px;
}
.user-text p {
margin: 0 0 8px 0;
font-size: 12px;
opacity: 0.9;
}
.user-badge {
display: inline-block;
padding: 3px 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.divider {
height: 1px;
background: #e0e0e0;
margin: 8px 0;
border: none;
}
.menu-item {
display: flex;
align-items: center;
padding: 12px 20px;
color: #333;
text-decoration: none;
transition: all 0.3s;
width: 100%;
}
.menu-item:hover {
background: #f8f9fa;
color: #4a90e2;
padding-left: 25px;
}
.menu-item i {
width: 20px;
margin-right: 10px;
font-size: 16px;
text-align: center;
}
.logout {
color: #e74c3c;
}
.logout:hover {
background: #ffeaea;
}
/* Notifications - FIXED */
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .submenu {
display: none;
position: absolute;
left: 100%;
top: 0;
min-width: 320px;
background: white;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
border-radius: 8px;
z-index: 1001;
}
.dropdown-submenu:hover > .submenu {
display: block;
}
.notification-toggle {
position: relative;
}
.notification-count {
position: absolute;
top: -5px;
right: -5px;
background: #e74c3c;
color: white;
font-size: 10px;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.notification-dropdown {
min-width: 320px;
max-height: 400px;
overflow-y: auto;
}
.notification-header {
padding: 15px 20px;
background: #f8f9fa;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
}
.notification-header h6 {
margin: 0;
font-size: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.notification-header .badge {
background: #e74c3c;
color: white;
padding: 2px 6px;
border-radius: 10px;
font-size: 11px;
}
.mark-all-read {
background: none;
border: none;
color: #4a90e2;
font-size: 12px;
cursor: pointer;
padding: 0;
}
.notification-item.unread {
background: #f0f7ff;
}
.notification-item a {
display: flex;
align-items: center;
padding: 12px 20px;
border-bottom: 1px solid #f0f0f0;
text-decoration: none;
color: #333;
width: 100%;
}
.notification-content {
flex: 1;
}
.notification-text {
margin: 0 0 5px 0;
font-size: 13px;
line-height: 1.4;
}
.notification-time {
font-size: 11px;
color: #666;
}
.notification-dot {
width: 8px;
height: 8px;
background: #4a90e2;
border-radius: 50%;
margin-left: 10px;
flex-shrink: 0;
}
.no-notifications {
padding: 30px 20px;
text-align: center;
color: #666;
}
.notification-footer {
text-align: center;
padding: 12px 20px;
background: #f8f9fa;
border-top: 1px solid #e0e0e0;
}
.notification-footer a {
color: #4a90e2;
font-size: 12px;
text-decoration: none;
}
/* Auth Buttons */
.auth-buttons {
display: flex;
gap: 10px;
margin-left: 15px;
}
.btn-register,
.btn-login {
padding: 8px 20px;
border-radius: 6px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s;
font-size: 14px;
border: 2px solid;
cursor: pointer;
}
.btn-register {
background: #4a90e2;
color: white;
border-color: #4a90e2;
}
.btn-register:hover {
background: #357ae8;
border-color: #357ae8;
}
.btn-login {
background: white;
color: #4a90e2;
border-color: #4a90e2;
}
.btn-login:hover {
background: #4a90e2;
color: white;
}
/* Search Overlay */
.search-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.search-overlay.active {
opacity: 1;
visibility: visible;
}
/* Ensure icons show properly */
.la {
font-family: 'Line Awesome Free' !important;
font-weight: 900;
}
/* Responsive Styles */
@media (max-width: 991px) {
.mobile-menu-toggle {
display: block;
order: 2;
}
.header-search {
order: 1;
margin-right: 15px;
}
.header-logo {
order: 0;
}
.header-inner {
flex-wrap: wrap;
}
.main-navigation {
position: fixed;
top: 0;
right: -100%;
width: 300px;
height: 100vh;
background: white;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
transition: right 0.3s;
overflow-y: auto;
z-index: 10000;
flex: none;
display: block;
}
.main-navigation.active {
right: 0;
}
.nav-menu {
flex-direction: column;
align-items: flex-start;
padding: 80px 20px 20px;
width: 100%;
}
.nav-item {
margin: 10px 0;
width: 100%;
}
.dropdown-menu {
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none;
padding-left: 20px;
display: none !important;
width: 100%;
background: #f8f9fa;
border-radius: 6px;
margin-top: 5px;
}
.nav-item.dropdown.active .dropdown-menu {
display: block !important;
}
.user-menu {
position: static !important;
min-width: auto !important;
width: 100%;
}
.auth-buttons {
flex-direction: column;
width: 100%;
margin-left: 0;
}
.header-top-content {
flex-direction: column;
text-align: center;
gap: 10px;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 10px;
}
.contact-info span {
margin-right: 0;
}
.search-form-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
width: 90%;
max-width: 500px;
}
}
@media (max-width: 576px) {
.header-logo .main-logo {
max-height: 40px;
}
.user-name {
display: none;
}
.dropdown-arrow {
display: none;
}
.user-dropdown .nav-link {
padding: 5px !important;
}
.nav-item {
margin-left: 10px;
}
}
/* contact us code */
/* ============================================
DHYANAKOTI CONTACT PAGE STYLES
============================================ */
/* Contact Page Base Styles */
.contact-hero-section {
/* background: linear-gradient(rgba(10, 20, 40, 0.85), rgba(5, 15, 30, 0.95)),
url('../images/contact-bg.jpg') no-repeat center center; */
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
background-size: cover;
min-height: 60vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.contact-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
z-index: 1;
}
.contact-hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: 60px 0;
}
.contact-hero-content h1 {
font-size: 3.5rem;
height: 39px;
font-weight: 700;
background: linear-gradient(45deg, #d4af37, #f5e6c8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px;
font-family: 'Playfair Display', serif;
}
.contact-hero-content p {
font-size: 1.2rem;
color: #e0e6ed;
max-width: 800px;
margin: 0 auto 30px;
line-height: 1.8;
}
/* Contact Information Cards */
.contact-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin: 60px 0;
}
.contact-info-card {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
transition: all 0.4s ease;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.contact-info-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #d4af37, #f5e6c8);
}
.contact-info-card:hover {
transform: translateY(-10px);
border-color: rgba(212, 175, 55, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.contact-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #2c3e50, #4a6278);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 32px;
color: #d4af37;
transition: all 0.3s ease;
}
.contact-info-card:hover .contact-icon {
background: linear-gradient(135deg, #d4af37, #f5e6c8);
color: #2c3e50;
transform: scale(1.1);
}
.contact-info-card h3 {
color: #f5e6c8;
font-size: 1.5rem;
margin-bottom: 15px;
font-family: 'Playfair Display', serif;
}
.contact-info-card p {
color: #d4af37;
/* color: rgba(30, 28, 5, 0.95); */
font-size: 1rem;
line-height: 1.6;
margin-bottom: 10px;
}
.contact-info-card a {
color: #d4af37;
/* color: rgba(30, 28, 5, 0.95); */
display:center;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-info-card a:hover {
color: #f5e6c8;
text-decoration: underline;
}
/* Contact Form */
.contact-form-section {
padding: 80px 0;
background: linear-gradient(rgba(10, 20, 40, 0.8), rgba(5, 15, 30, 0.9));
}
.form-container {
max-width: 800px;
margin: 0 auto;
}
.contact-form-box {
background: linear-gradient(145deg, rgb(159 138 27 / 58%), rgb(122 119 13));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 25px;
padding: 50px;
backdrop-filter: blur(10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.form-title {
text-align: center;
margin-bottom: 40px;
}
.form-title h2 {
font-size: 2.5rem;
color: #f5e6c8;
font-family: 'Playfair Display', serif;
margin-bottom: 15px;
}
.form-title p {
color: #b0c4d4;
font-size: 1.1rem;
}
/* Form Inputs */
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: 500;
font-size: 14px;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 15px;
transition: all 0.3s ease;
background: white;
}
.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
outline: none;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
color: #d4af37 !important;
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}
/* Textarea */
textarea.form-control {
min-height: 150px !important;
resize: vertical;
}
/* Captcha Section */
.captcha-container {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 25px;
margin: 30px 0;
}
.captcha-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.captcha-header h5 {
color: #f5e6c8;
margin: 0;
font-size: 1.1rem;
}
.captcha-display {
background: rgba(0, 0, 0, 0.3);
border: 2px solid rgba(212, 175, 55, 0.3);
border-radius: 12px;
padding: 25px;
text-align: center;
margin-bottom: 20px;
font-size: 32px;
font-weight: bold;
letter-spacing: 15px;
color: #d4af37;
font-family: 'Courier New', monospace;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.captcha-actions {
display: flex;
align-items: center;
gap: 15px;
justify-content: space-between;
}
.btn-refresh-captcha {
background: linear-gradient(135deg, #2c3e50, #4a6278);
border: 1px solid rgba(212, 175, 55, 0.3);
color: #d4af37;
padding: 12px 25px;
border-radius: 10px;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.btn-refresh-captcha:hover {
background: linear-gradient(135deg, #d4af37, #f5e6c8);
color: #2c3e50;
transform: translateY(-2px);
}
/* Submit Button */
.btn-submit {
background: linear-gradient(135deg, #d4af37, #f5e6c8);
color: #2c3e50;
border: none;
padding: 18px 40px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 12px;
width: 100%;
margin-top: 20px;
transition: all 0.3s ease;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-submit:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}
.btn-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
/* FAQ Section */
.faq-section {
padding: 80px 0;
background: rgba(5, 15, 30, 0.95);
}
.faq-title {
text-align: center;
margin-bottom: 50px;
}
.faq-title h2 {
font-size: 2.5rem;
color: #f5e6c8;
font-family: 'Playfair Display', serif;
margin-bottom: 15px;
}
.faq-title p {
color: #b0c4d4;
font-size: 1.1rem;
}
.faq-accordion {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
margin-bottom: 15px;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-header {
padding: 25px 30px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.faq-header:hover {
background: rgba(212, 175, 55, 0.1);
}
.faq-question {
display: flex;
align-items: center;
gap: 15px;
font-size: 1.1rem;
color: #f5e6c8;
font-weight: 500;
}
.faq-question i {
color: #d4af37;
font-size: 1.2rem;
}
.faq-toggle {
color: #d4af37;
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.faq-item.active .faq-toggle {
transform: rotate(180deg);
}
.faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 30px;
}
.faq-item.active .faq-content {
max-height: 300px;
padding: 0 30px 30px;
}
.faq-answer {
color: #b0c4d4;
line-height: 1.8;
font-size: 1rem;
}
/* Map Section */
.map-section {
padding: 80px 0;
background: linear-gradient(rgba(10, 20, 40, 0.8), rgba(5, 15, 30, 0.9));
}
.map-title {
text-align: center;
margin-bottom: 50px;
}
.map-title h2 {
font-size: 2.5rem;
color: #f5e6c8;
font-family: 'Playfair Display', serif;
margin-bottom: 15px;
}
.map-title p {
color: #b0c4d4;
font-size: 1.1rem;
}
.map-container {
max-width: 1000px;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(212, 175, 55, 0.2);
}
.map-placeholder {
background: var(--bs-gray-600);
min-height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #f5e6c8;
}
.map-placeholder i {
font-size: 4rem;
color: #d4af37;
margin-bottom: 20px;
}
/* Error Messages */
.error-message {
color: #ff6b6b;
font-size: 0.875rem;
margin-top: 5px;
display: none;
font-weight: 500;
}
.has-error .form-control {
border-color: #ff6b6b !important;
}
.has-error .form-control:focus {
box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2) !important;
}
/* Success Message */
.success-message {
background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(32, 201, 151, 0.1));
border: 1px solid rgba(40, 167, 69, 0.3);
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
text-align: center;
}
.success-message i {
color: #28a745;
font-size: 2rem;
margin-bottom: 15px;
}
.success-message p {
color: #28a745;
font-weight: 500;
margin: 0;
}
/* Floating Contact Button */
.floating-contact-btn {
position: fixed;
bottom: 30px;
right: 30px;
width: 70px;
height: 70px;
background: linear-gradient(135deg, #d4af37, #f5e6c8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #2c3e50;
font-size: 24px;
box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);
z-index: 1000;
cursor: pointer;
transition: all 0.3s ease;
border: none;
}
.floating-contact-btn:hover {
transform: scale(1.1) rotate(10deg);
box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4);
}
/* Alert Messages */
.alert {
border-radius: 12px;
border: none;
padding: 20px;
margin-bottom: 30px;
backdrop-filter: blur(10px);
}
.alert-success {
background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(32, 201, 151, 0.1));
border: 1px solid rgba(40, 167, 69, 0.3);
color: #28a745;
}
.alert-danger {
background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(253, 126, 20, 0.1));
border: 1px solid rgba(220, 53, 69, 0.3);
color: #dc3545;
}
/* Responsive Design */
@media (max-width: 992px) {
.contact-hero-content h1 {
font-size: 2.8rem;
height: 39px;
}
.contact-form-box {
padding: 30px;
}
.contact-info-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (max-width: 768px) {
.contact-hero-content h1 {
font-size: 2.2rem;
}
.contact-hero-content p {
font-size: 1rem;
}
.contact-form-box {
padding: 25px;
}
.captcha-actions {
flex-direction: column;
align-items: stretch;
}
.faq-header {
padding: 20px;
}
.faq-question {
font-size: 1rem;
}
}
@media (max-width: 576px) {
.contact-hero-section {
min-height: 50vh;
}
.contact-hero-content {
padding: 40px 0;
}
.form-title h2 {
font-size: 2rem;
}
.faq-title h2,
.map-title h2 {
font-size: 2rem;
}
.floating-contact-btn {
width: 60px;
height: 60px;
bottom: 20px;
right: 20px;
font-size: 20px;
}
}
/* Animation Classes */
.fade-in {
animation: fadeIn 0.8s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
}
70% {
box-shadow: 0 0 0 15px rgba(212, 175, 55, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
}
}
/* ============================================
DHYANAKOTI ABOUT PAGE STYLES - YOGAZONE THEME
============================================ */
/* Page Header Banner */
.page-header-banner {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%),
url('../images/about-bg.jpg') no-repeat center center;
background-size: cover;
min-height: 50vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.page-header-banner::before {
content: 'ॐ';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20rem;
color: var(--bs-border-color-translucent);
font-family: 'Arial', sans-serif;
z-index: 1;
}
.banner-content {
position: relative;
z-index: 2;
text-align: center;
padding: 60px 0;
}
.banner-content h1 {
font-size: 3.5rem;
font-weight: 700;
color: #f5e6c8;
margin-bottom: 20px;
font-family: 'Playfair Display', serif;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.banner-content p {
font-size: 1.2rem;
color: #b0c4d4;
max-width: 700px;
margin: 0 auto;
line-height: 1.8;
}
/* Breadcrumb */
.breadcrumb-section {
background: rgba(255, 255, 255, 0.05);
padding: 15px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.breadcrumb-nav {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.breadcrumb-nav a {
color: #d4af37;
text-decoration: none;
font-size: 0.95rem;
transition: color 0.3s ease;
position: relative;
padding-right: 20px;
}
.breadcrumb-nav a:hover {
color: #f5e6c8;
}
.breadcrumb-nav a::after {
content: '/';
position: absolute;
right: 5px;
color: rgba(212, 175, 55, 0.5);
}
.breadcrumb-nav span {
color: #f5e6c8;
font-size: 0.95rem;
font-weight: 500;
}
/* Content Tabs */
.content-tabs-section {
padding: 80px 0;
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
}
.tabs-container {
max-width: 1200px;
margin: 0 auto;
}
.tabs-navigation {
background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
margin-bottom: 30px;
backdrop-filter: blur(10px);
}
.tabs-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}
.tab-item {
flex: 1;
min-width: 150px;
}
.tab-link {
display: block;
padding: 15px 20px;
background: rgba(44, 62, 80, 0.5);
color: #b0c4d4;
text-decoration: none;
border-radius: 10px;
font-weight: 500;
text-align: center;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.tab-link:hover {
background: rgba(212, 175, 55, 0.1);
color: #f5e6c8;
border-color: rgba(212, 175, 55, 0.3);
}
.tab-link.active {
background: linear-gradient(135deg, #d4af37, #f5e6c8);
color: #2c3e50;
border-color: #d4af37;
font-weight: 600;
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}
/* Tabs Content */
.tabs-content {
background: linear-gradient(145deg, var(--bs-focus-ring-color),#b39438, var(--bs-focus-ring-color));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
backdrop-filter: blur(10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.tab-pane {
display: none;
animation: fadeIn 0.5s ease;
}
.tab-pane.active {
display: block;
}
.tab-header {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid rgba(212, 175, 55, 0.3);
}
.tab-header h2 {
font-size: 2.2rem;
color: #f5e6c8;
font-family: 'Playfair Display', serif;
margin-bottom: 10px;
}
.tab-header p {
color: #b0c4d4;
font-size: 1.1rem;
}
/* Summernote Content Styles */
.summernote-content-wrapper {
color: #e0e6ed;
line-height: 1.8;
font-size: 1.05rem;
}
/* Style the summernote content */
.summernote-content-wrapper h1,
.summernote-content-wrapper h2,
.summernote-content-wrapper h3,
.summernote-content-wrapper h4,
.summernote-content-wrapper h5,
.summernote-content-wrapper h6 {
color: #f5e6c8;
margin-top: 25px;
margin-bottom: 15px;
font-family: 'Playfair Display', serif;
}
.summernote-content-wrapper h1 {
font-size: 2.2rem;
border-bottom: 2px solid rgba(212, 175, 55, 0.3);
padding-bottom: 10px;
}
.summernote-content-wrapper h2 {
font-size: 1.8rem;
}
.summernote-content-wrapper h3 {
font-size: 1.5rem;
}
.summernote-content-wrapper p {
margin-bottom: 20px;
color: #b0c4d4;
}
.summernote-content-wrapper strong,
.summernote-content-wrapper b {
color: #f5e6c8;
font-weight: 600;
}
.summernote-content-wrapper em,
.summernote-content-wrapper i {
color: #d4af37;
font-style: italic;
}
.summernote-content-wrapper ul,
.summernote-content-wrapper ol {
margin: 20px 0;
padding-left: 30px;
}
.summernote-content-wrapper li {
margin-bottom: 10px;
color: #b0c4d4;
}
.summernote-content-wrapper ul li::marker {
color: #d4af37;
}
.summernote-content-wrapper ol {
counter-reset: item;
}
.summernote-content-wrapper ol li {
counter-increment: item;
}
.summernote-content-wrapper ol li::before {
content: counter(item) ". ";
color: #d4af37;
font-weight: bold;
margin-right: 10px;
}
.summernote-content-wrapper blockquote {
border-left: 4px solid #d4af37;
padding: 20px 30px;
margin: 30px 0;
background: rgba(212, 175, 55, 0.05);
border-radius: 0 10px 10px 0;
font-style: italic;
color: #f5e6c8;
}
.summernote-content-wrapper blockquote p {
margin: 0;
color: #f5e6c8;
}
.summernote-content-wrapper img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 20px 0;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.summernote-content-wrapper table {
width: 100%;
margin: 25px 0;
border-collapse: collapse;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
overflow: hidden;
}
.summernote-content-wrapper table th {
background: linear-gradient(135deg, #d4af37, #f5e6c8);
color: #2c3e50;
padding: 15px;
text-align: left;
font-weight: 600;
}
.summernote-content-wrapper table td {
padding: 12px 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #b0c4d4;
}
.summernote-content-wrapper table tr:hover {
background: rgba(212, 175, 55, 0.05);
}
.summernote-content-wrapper a {
color: #d4af37;
text-decoration: none;
border-bottom: 1px dashed rgba(212, 175, 55, 0.5);
transition: all 0.3s ease;
}
.summernote-content-wrapper a:hover {
color: #f5e6c8;
border-bottom: 1px solid #f5e6c8;
}
.summernote-content-wrapper code {
background: rgba(0, 0, 0, 0.3);
padding: 2px 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
color: #d4af37;
font-size: 0.9em;
}
.summernote-content-wrapper pre {
background: rgba(0, 0, 0, 0.3);
padding: 20px;
border-radius: 10px;
overflow-x: auto;
margin: 20px 0;
border-left: 3px solid #d4af37;
}
.summernote-content-wrapper pre code {
background: none;
padding: 0;
color: #e0e6ed;
}
.summernote-content-wrapper hr {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
margin: 30px 0;
}
/* Contact Link */
.contact-link {
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.contact-link p {
color: #b0c4d4;
margin-bottom: 15px;
font-size: 1.1rem;
}
.contact-link a {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #2c3e50, #4a6278);
color: #d4af37;
text-decoration: none;
padding: 12px 30px;
border-radius: 10px;
font-weight: 500;
transition: all 0.3s ease;
border: 1px solid rgba(212, 175, 55, 0.3);
}
.contact-link a:hover {
background: linear-gradient(135deg, #d4af37, #f5e6c8);
color: #2c3e50;
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
}
/* Yoga Features Section */
.yoga-features-section {
padding: 80px 0;
background: linear-gradient(135deg, #d4af37, #f5e6c8);
}
.section-header {
text-align: center;
margin-bottom: 50px;
}
.section-header h2 {
font-size: 2.5rem;
color: var(--bs-secondary-text-emphasis);
font-family: 'Playfair Display', serif;
margin-bottom: 15px;
}
.section-header p {
color: var(--bs-info-border-subtle);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.feature-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 30px;
}
.feature-card {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 40px 30px;
text-align: center;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.feature-card:hover {
transform: translateY(-10px);
border-color: rgba(212, 175, 55, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #2c3e50, #4a6278);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 32px;
color: #d4af37;
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
background: linear-gradient(135deg, #d4af37, #f5e6c8);
color: #2c3e50;
transform: scale(1.1);
}
.feature-card h3 {
color: #f5e6c8;
font-size: 1.5rem;
margin-bottom: 15px;
font-family: 'Playfair Display', serif;
}
.feature-card p {
color: #b0c4d4;
line-height: 1.6;
font-size: 1rem;
}
/* Testimonials Section */
.testimonials-section {
padding: 80px 0;
background: linear-gradient(rgba(10, 20, 40, 0.9), rgba(5, 15, 30, 0.95)),
url('../images/testimonial-bg.jpg') no-repeat center center;
background-size: cover;
background-attachment: fixed;
position: relative;
color: #fff;
}
.testimonial-slider {
max-width: 800px;
margin: 0 auto;
}
.testimonial-item {
text-align: center;
padding: 40px;
}
.testimonial-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto 25px;
border: 3px solid rgba(212, 175, 55, 0.5);
overflow: hidden;
}
.testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-text {
font-size: 1.1rem;
line-height: 1.8;
color: #e0e6ed;
font-style: italic;
margin-bottom: 20px;
position: relative;
padding: 0 20px;
}
.testimonial-text::before,
.testimonial-text::after {
content: '"';
font-size: 4rem;
color: rgba(212, 175, 55, 0.5);
position: absolute;
font-family: serif;
}
.testimonial-text::before {
top: -20px;
left: 0;
}
.testimonial-text::after {
bottom: -40px;
right: 0;
}
.testimonial-author {
margin-top: 30px;
}
.testimonial-author h4 {
color: #f5e6c8;
font-size: 1.2rem;
margin-bottom: 5px;
}
.testimonial-author span {
color: #d4af37;
font-size: 0.9rem;
}
/* Stats Section */
.stats-section {
padding: 80px 0;
background: linear-gradient(135deg, #2c3e50, #4a6278);
}
.stat-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.stat-card {
text-align: center;
padding: 30px 20px;
}
.stat-icon {
font-size: 3rem;
color: #d4af37;
margin-bottom: 20px;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: #f5e6c8;
margin-bottom: 10px;
font-family: 'Playfair Display', serif;
}
.stat-label {
color: #b0c4d4;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Gallery Section */
.gallery-section {
padding: 80px 0;
background: rgba(5, 15, 30, 0.95);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.gallery-item {
position: relative;
border-radius: 15px;
overflow: hidden;
aspect-ratio: 1;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(212, 175, 55, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
.gallery-icon {
font-size: 2rem;
color: #2c3e50;
}
/* Responsive Design */
@media (max-width: 992px) {
.banner-content h1 {
font-size: 2.8rem;
}
.tabs-content {
padding: 30px;
}
.tabs-list {
flex-direction: column;
}
.tab-item {
min-width: 100%;
}
}
@media (max-width: 768px) {
.banner-content h1 {
font-size: 2.2rem;
}
.banner-content p {
font-size: 1rem;
}
.tabs-content {
padding: 25px;
}
.section-header h2 {
font-size: 2rem;
}
.feature-cards {
grid-template-columns: 1fr;
}
.stat-cards {
grid-template-columns: repeat(2, 1fr);
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.banner-content {
padding: 40px 0;
}
.tab-header h2 {
font-size: 1.8rem;
}
.stat-cards {
grid-template-columns: 1fr;
}
.gallery-grid {
grid-template-columns: 1fr;
}
}
/* Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.8s ease-out;
}
/* articles list style */
.article-header {
background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px 25px;
backdrop-filter: blur(10px);
margin-bottom: 30px;
}
.article-header h4 {
color: #f5e6c8;
font-family: 'Playfair Display', serif;
}
.article-header .badge {
background: linear-gradient(135deg, #d4af37, #f5e6c8);
color: #2c3e50;
font-size: 0.8rem;
padding: 5px 10px;
border-radius: 10px;
}
.search-box {
position: relative;
min-width: 250px;
}
.search-box form {
position: relative;
}
.search-box input {
width: 100%;
padding: 10px 15px 10px 40px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
color: #fff;
font-size: 14px;
}
.search-box input:focus {
outline: none;
border-color: #d4af37;
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}
.search-box button {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #d4af37;
cursor: pointer;
font-size: 16px;
}
.sort-options select {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
color: #fff;
padding: 10px 15px;
min-width: 150px;
cursor: pointer;
}
.sort-options select:focus {
outline: none;
border-color: #d4af37;
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}
.sort-options select option {
background: #2c3e50;
color: #fff;
}
/* Blog Post Customizations */
.blog-post.blog-grid {
background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
backdrop-filter: blur(10px);
}
.blog-post.blog-grid:hover {
transform: translateY(-5px);
border-color: rgba(212, 175, 55, 0.3);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.dez-post-media {
height: 200px;
overflow: hidden;
}
.dez-post-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-post:hover .dez-post-media img {
transform: scale(1.05);
}
.dez-post-info {
padding: 25px;
}
.dez-post-meta {
margin-bottom: 15px;
}
.dez-post-meta ul {
display: flex;
gap: 15px;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
.dez-post-meta ul li {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: #b0c4d4;
}
.dez-post-meta ul li i {
color: #d4af37;
}
.dez-post-title {
margin-bottom: 15px;
}
.dez-post-title h3 {
margin: 0;
font-size: 18px;
line-height: 1.4;
}
.dez-post-title h3 a {
color: #9f832c;
text-decoration: none;
transition: color 0.3s ease;
font-family: 'Playfair Display', serif;
}
.dez-post-title h3 a:hover {
color: #d4af37;
}
.dez-post-text {
margin-bottom: 20px;
}
.dez-post-text p {
color: #b0c4d4;
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.dez-post-readmore {
margin-bottom: 20px;
}
.site-button-link {
color: #d4af37;
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 5px;
transition: all 0.3s ease;
}
.site-button-link:hover {
color: #f5e6c8;
gap: 10px;
}
.dez-post-tags {
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.post-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.post-tags a {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(212, 175, 55, 0.1);
color: #d4af37;
padding: 5px 10px;
border-radius: 15px;
font-size: 11px;
text-decoration: none;
transition: all 0.3s ease;
}
.post-tags a:hover {
background: rgba(212, 175, 55, 0.2);
}
/* Pagination */
.pagination-bx {
background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 25px;
margin-top: 40px;
backdrop-filter: blur(10px);
}
.pagination-info {
color: #b0c4d4;
font-size: 14px;
}
.items-per-page select {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
color: #fff;
padding: 8px 15px;
min-width: 120px;
cursor: pointer;
font-size: 14px;
}
.items-per-page select:focus {
outline: none;
border-color: #d4af37;
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}
.row.dez-blog-grid-3{
position: relative !important;
height: 5000px !important;
}
.pagination {
margin: 0;
gap: 5px;
}
.pagination li a,
.pagination li span {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #b0c4d4;
border-radius: 8px;
padding: 8px 15px;
text-decoration: none;
transition: all 0.3s ease;
}
.pagination li a:hover {
background: rgba(212, 175, 55, 0.1);
color: #d4af37;
border-color: rgba(212, 175, 55, 0.3);
}
.pagination li.active a {
background: linear-gradient(135deg, #d4af37, #f5e6c8);
color: #2c3e50;
border-color: #d4af37;
}
.pagination li.previous a,
.pagination li.next a {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
}
/* Responsive Design */
@media (max-width: 992px) {
.article-header {
flex-direction: column;
gap: 20px;
text-align: center;
}
.search-box {
min-width: 100%;
}
.dez-blog-grid-3 .col-lg-3 {
width: 50%;
}
}
@media (max-width: 768px) {
.dez-blog-grid-3 .col-lg-3 {
width: 100%;
}
.pagination-bx > div {
flex-direction: column;
gap: 20px;
text-align: center;
}
.items-per-page {
width: 100%;
}
.items-per-page select {
width: 100%;
}
}
@media (max-width: 576px) {
.article-header .d-flex {
flex-direction: column;
gap: 15px;
width: 100%;
}
.search-box {
min-width: 100%;
}
.sort-options select {
min-width: 100%;
}
.dez-post-media {
height: 180px;
}
.empty-state {
padding: 40px 20px;
}
}
/* ============================================
SPIRITUAL ARTICLE DETAIL STYLES
All classes prefixed with 'sp-' to avoid conflicts
============================================ */
/* --------------------------------------------
1. ROOT VARIABLES & RESET
-------------------------------------------- */
:root {
--sp-primary: #8B5CF6;
--sp-primary-dark: #7C3AED;
--sp-secondary: #10B981;
--sp-accent: #F59E0B;
--sp-dark: #1F2937;
--sp-light: #F9FAFB;
--sp-gray: #6B7280;
--sp-gray-light: #E5E7EB;
--sp-success: #10B981;
--sp-danger: #EF4444;
--sp-warning: #F59E0B;
--sp-info: #3B82F6;
--sp-border-radius: 12px;
--sp-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
--sp-transition: all 0.3s ease;
}
/* Reset for article specific elements */
.sp-article-detail-wrapper * {
box-sizing: border-box;
}
/* --------------------------------------------
2. HERO SECTION
-------------------------------------------- */
.sp-article-hero {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
padding: 40px 0;
position: relative;
overflow: hidden;
}
.sp-article-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: cover;
opacity: 0.3;
}
.sp-breadcrumb-nav {
margin-bottom: 30px;
}
.sp-breadcrumb {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.sp-breadcrumb-item {
font-size: 0.9rem;
color: var(--sp-gray-light);
}
.sp-breadcrumb-item + .sp-breadcrumb-item::before {
content: '/';
margin: 0 10px;
color: var(--sp-gray);
}
.sp-breadcrumb-item a {
color: var(--sp-gray-light);
text-decoration: none;
transition: var(--sp-transition);
}
.sp-breadcrumb-item a:hover {
color: white;
}
.sp-breadcrumb-item.active {
color: var(--sp-primary);
}
.sp-article-header {
position: relative;
z-index: 2;
}
.sp-article-category-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(139, 92, 246, 0.2);
color: var(--sp-primary);
padding: 8px 16px;
border-radius: 20px;
font-weight: 500;
margin-bottom: 20px;
border: 1px solid rgba(139, 92, 246, 0.3);
}
.sp-article-title {
font-size: 3rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 15px;
color: white;
font-family: 'Playfair Display', serif;
}
.sp-article-subtitle {
font-size: 1.2rem;
color: var(--sp-gray-light);
margin-bottom: 30px;
opacity: 0.9;
}
.sp-article-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
flex-wrap: wrap;
gap: 20px;
}
.sp-author-info {
display: flex;
align-items: center;
gap: 15px;
}
.sp-author-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--sp-primary);
}
.sp-author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sp-author-details h4 {
margin: 0 0 5px 0;
color: white;
font-size: 1.2rem;
}
.sp-post-date {
color: var(--sp-gray-light);
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 5px;
}
.sp-article-stats {
display: flex;
gap: 20px;
}
.sp-stat-item {
display: flex;
align-items: center;
gap: 8px;
color: var(--sp-gray-light);
font-size: 0.9rem;
}
.sp-stat-item i {
color: var(--sp-primary);
}
/* --------------------------------------------
3. GALLERY SLIDER
-------------------------------------------- */
.sp-article-gallery {
margin: 40px 0;
border-radius: var(--sp-border-radius);
overflow: hidden;
box-shadow: var(--sp-box-shadow);
}
.sp-gallery-slider {
position: relative;
}
.sp-slider-container {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
background: var(--sp-dark);
}
.sp-slides {
position: relative;
width: 100%;
height: 100%;
}
.sp-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
z-index: 1;
}
.sp-slide.active {
opacity: 1;
z-index: 2;
}
.sp-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sp-image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.5));
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 20px;
opacity: 0;
transition: var(--sp-transition);
}
.sp-slide:hover .sp-image-overlay {
opacity: 1;
}
.sp-fullscreen-btn {
background: rgba(255, 255, 255, 0.9);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--sp-transition);
color: var(--sp-dark);
}
.sp-fullscreen-btn:hover {
background: white;
transform: scale(1.1);
}
.sp-slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.9);
border: none;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: var(--sp-transition);
color: var(--sp-dark);
}
.sp-slider-btn:hover {
background: white;
transform: translateY(-50%) scale(1.1);
}
.sp-prev-btn {
left: 20px;
}
.sp-next-btn {
right: 20px;
}
.sp-slider-dots {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 10px;
z-index: 10;
}
.sp-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
transition: var(--sp-transition);
padding: 0;
}
.sp-dot.active {
background: white;
transform: scale(1.2);
}
/* --------------------------------------------
4. ARTICLE CONTENT
-------------------------------------------- */
.sp-article-container {
padding: 60px 0;
}
.sp-article-content {
background: white;
border-radius: var(--sp-border-radius);
padding: 40px;
box-shadow: var(--sp-box-shadow);
}
.sp-article-body {
font-size: 1.1rem;
line-height: 1.8;
color: var(--sp-dark);
margin-bottom: 40px;
}
.sp-article-body h1,
.sp-article-body h2,
.sp-article-body h3,
.sp-article-body h4,
.sp-article-body h5,
.sp-article-body h6 {
color: var(--sp-dark);
margin-top: 30px;
margin-bottom: 15px;
font-family: 'Playfair Display', serif;
}
.sp-article-body p {
margin-bottom: 20px;
}
.sp-article-body img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 20px 0;
}
.sp-article-body ul,
.sp-article-body ol {
padding-left: 30px;
margin-bottom: 20px;
}
.sp-article-body li {
margin-bottom: 10px;
}
.sp-article-body blockquote {
border-left: 4px solid var(--sp-primary);
padding: 20px 30px;
margin: 30px 0;
background: var(--sp-light);
border-radius: 0 var(--sp-border-radius) var(--sp-border-radius) 0;
font-style: italic;
color: var(--sp-dark);
}
.sp-no-content {
text-align: center;
color: var(--sp-gray);
font-style: italic;
padding: 40px 20px;
}
/* Additional Insights */
.sp-additional-insights {
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
border-radius: var(--sp-border-radius);
padding: 30px;
margin: 40px 0;
border: 1px solid rgba(245, 158, 11, 0.2);
}
.sp-section-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--sp-dark);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.sp-insights-content {
font-size: 1.05rem;
line-height: 1.7;
color: var(--sp-dark);
}
/* Tags Section */
.sp-article-tags {
margin: 40px 0;
padding: 30px;
background: var(--sp-light);
border-radius: var(--sp-border-radius);
}
.sp-tags-title {
font-size: 1.3rem;
font-weight: 600;
color: var(--sp-dark);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.sp-tags-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.sp-tag {
display: inline-block;
background: white;
color: var(--sp-primary);
padding: 8px 16px;
border-radius: 20px;
text-decoration: none;
font-weight: 500;
border: 1px solid var(--sp-gray-light);
transition: var(--sp-transition);
}
.sp-tag:hover {
background: var(--sp-primary);
color: white;
border-color: var(--sp-primary);
transform: translateY(-2px);
}
/* Share Section */
.sp-article-share {
display: flex;
align-items: center;
justify-content: space-between;
padding: 25px;
background: var(--sp-light);
border-radius: var(--sp-border-radius);
margin: 40px 0;
flex-wrap: wrap;
gap: 20px;
}
.sp-share-label {
font-weight: 600;
color: var(--sp-dark);
font-size: 1.1rem;
}
.sp-share-buttons {
display: flex;
gap: 10px;
}
.sp-share-btn {
width: 45px;
height: 45px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--sp-transition);
color: white;
font-size: 1.1rem;
}
.sp-facebook { background: #1877F2; }
.sp-twitter { background: #1DA1F2; }
.sp-whatsapp { background: #25D366; }
.sp-linkedin { background: #0A66C2; }
.sp-copy { background: var(--sp-gray); }
.sp-share-btn:hover {
transform: translateY(-3px) scale(1.1);
}
/* --------------------------------------------
5. COMMENTS SECTION
-------------------------------------------- */
.sp-comments-section {
margin: 60px 0;
}
.sp-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.sp-view-all {
color: var(--sp-primary);
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
transition: var(--sp-transition);
}
.sp-view-all:hover {
color: var(--sp-primary-dark);
gap: 10px;
}
/* Alerts */
.sp-alert {
padding: 15px 20px;
border-radius: var(--sp-border-radius);
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
.sp-alert-success {
background: #D1FAE5;
color: #065F46;
border: 1px solid #10B981;
}
.sp-alert-danger {
background: #FEE2E2;
color: #7F1D1D;
border: 1px solid #EF4444;
}
.sp-alert-close {
background: none;
border: none;
color: inherit;
cursor: pointer;
margin-left: auto;
opacity: 0.7;
transition: var(--sp-transition);
}
.sp-alert-close:hover {
opacity: 1;
}
/* Comments List */
.sp-comments-list {
margin-bottom: 40px;
}
.sp-comment-item {
background: white;
border-radius: var(--sp-border-radius);
padding: 25px;
margin-bottom: 25px;
border: 1px solid var(--sp-gray-light);
transition: var(--sp-transition);
}
.sp-comment-item:hover {
border-color: var(--sp-primary);
box-shadow: 0 5px 15px rgba(139, 92, 246, 0.1);
}
.sp-comment-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.sp-comment-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--sp-gray-light);
}
.sp-comment-info {
flex: 1;
}
.sp-comment-author {
margin: 0 0 5px 0;
color: var(--sp-dark);
font-size: 1.1rem;
}
.sp-comment-date {
color: var(--sp-gray);
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 5px;
}
.sp-comment-reply-btn {
background: var(--bs-gray-400);
border: 1px solid var(--sp-primary);
color: var(--sp-primary);
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
transition: var(--sp-transition);
}
.sp-comment-reply-btn:hover {
background: var(--sp-primary);
color: white;
}
.sp-comment-body p {
margin: 0;
color: var(--sp-dark);
line-height: 1.6;
}
.sp-comment-replies {
margin-top: 25px;
padding-left: 40px;
border-left: 2px solid var(--sp-gray-light);
}
.sp-reply-item {
background: var(--sp-light);
border-radius: 10px;
padding: 20px;
margin-bottom: 15px;
}
.sp-reply-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.sp-reply-avatar {
width: 35px;
height: 35px;
border-radius: 50%;
object-fit: cover;
}
.sp-reply-author {
margin: 0;
color: var(--sp-dark);
font-size: 1rem;
}
.sp-reply-date {
color: var(--sp-gray);
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 5px;
}
.sp-reply-body p {
margin: 0;
color: var(--sp-dark);
font-size: 0.95rem;
line-height: 1.5;
}
.sp-no-comments {
text-align: center;
padding: 60px 20px;
color: var(--sp-gray);
}
.sp-no-comments i {
font-size: 3rem;
color: var(--sp-gray-light);
margin-bottom: 20px;
display: block;
}
.sp-no-comments h4 {
color: var(--sp-dark);
margin-bottom: 10px;
}
/* Comment Form */
.sp-comment-form {
background: white;
border-radius: var(--sp-border-radius);
padding: 30px;
border: 1px solid var(--sp-gray-light);
}
.sp-form-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--sp-dark);
margin-bottom: 25px;
}
.sp-comment-form-inner .sp-form-group {
margin-bottom: 20px;
}
.sp-comment-form-inner textarea {
width: 100%;
padding: 15px;
border: 1px solid var(--sp-gray-light);
border-radius: 10px;
resize: vertical;
min-height: 120px;
font-family: inherit;
font-size: 1rem;
transition: var(--sp-transition);
}
.sp-comment-form-inner textarea:focus {
outline: none;
border-color: var(--sp-primary);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.sp-submit-btn {
background: var(--bs-gray-400);
color: white;
border: none;
padding: 12px 30px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: var(--sp-transition);
}
.sp-submit-btn:hover {
background: var(--sp-primary-dark);
transform: translateY(-2px);
}
/* --------------------------------------------
6. RELATED ARTICLES
-------------------------------------------- */
.sp-related-articles {
margin-top: 60px;
}
.sp-related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-top: 20px;
}
/* Placeholder for related articles */
.sp-article-placeholder {
background: var(--sp-light);
border-radius: var(--sp-border-radius);
padding: 30px;
text-align: center;
color: var(--sp-gray);
font-style: italic;
}
/* --------------------------------------------
7. SIDEBAR STYLES
-------------------------------------------- */
.sp-article-sidebar {
position: sticky;
top: 20px;
}
.sp-sidebar-card {
background: white;
border-radius: var(--sp-border-radius);
margin-bottom: 25px;
box-shadow: var(--sp-box-shadow);
overflow: hidden;
}
.sp-card-header {
padding: 20px;
border-bottom: 1px solid var(--sp-gray-light);
background: var(--sp-light);
}
.sp-card-title {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--sp-dark);
display: flex;
align-items: center;
gap: 10px;
}
.sp-card-body {
padding: 25px;
}
/* Author Card */
.sp-author-card .sp-author-avatar-lg {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto 20px;
position: relative;
border: 3px solid var(--sp-primary);
}
.sp-author-avatar-lg img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.sp-verified-badge {
position: absolute;
bottom: 5px;
right: 5px;
background: var(--sp-primary);
color: white;
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
border: 2px solid white;
}
.sp-author-details-lg {
text-align: center;
}
.sp-author-details-lg h4 {
margin: 0 0 5px 0;
color: var(--sp-dark);
font-size: 1.2rem;
}
.sp-author-bio {
color: var(--sp-gray);
font-size: 0.9rem;
margin-bottom: 20px;
}
.sp-author-stats {
display: flex;
justify-content: center;
gap: 30px;
margin: 20px 0;
}
.sp-author-stat {
text-align: center;
}
.sp-author-stat strong {
display: block;
font-size: 1.5rem;
color: var(--sp-dark);
}
.sp-author-stat span {
font-size: 0.85rem;
color: var(--sp-gray);
}
.sp-follow-btn {
width: 100%;
background: var(--sp-primary);
color: white;
border: none;
padding: 12px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: var(--sp-transition);
}
.sp-follow-btn:hover {
background: var(--sp-primary-dark);
}
/* Stats Card */
.sp-stats-list {
list-style: none;
padding: 0;
margin: 0;
}
.sp-stats-list li {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--sp-gray-light);
}
.sp-stats-list li:last-child {
border-bottom: none;
}
.sp-stats-list li i {
color: var(--sp-primary);
width: 20px;
margin-right: 10px;
}
.sp-stats-list li span {
flex: 1;
color: var(--sp-gray);
}
.sp-stats-list li strong {
color: var(--sp-dark);
font-weight: 600;
}
/* Newsletter Card */
.sp-newsletter-card {
background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-dark) 100%);
color: white;
text-align: center;
}
.sp-newsletter-icon {
font-size: 2.5rem;
margin-bottom: 15px;
opacity: 0.9;
}
.sp-newsletter-card h4 {
color: white;
margin-bottom: 10px;
font-size: 1.3rem;
}
.sp-newsletter-card p {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 20px;
font-size: 0.95rem;
}
.sp-newsletter-form .sp-form-group {
margin-bottom: 15px;
}
.sp-newsletter-form input {
width: 100%;
padding: 12px 15px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 1rem;
transition: var(--sp-transition);
}
.sp-newsletter-form input:focus {
outline: none;
border-color: white;
background: rgba(255, 255, 255, 0.2);
}
.sp-newsletter-form input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.sp-subscribe-btn {
width: 100%;
background: white;
color: var(--sp-primary);
border: none;
padding: 12px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: var(--sp-transition);
}
.sp-subscribe-btn:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
}
.sp-privacy-note {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.7);
margin-top: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
/* Tags Card */
.sp-popular-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* Banner Card */
.sp-banner-card {
background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
color: white;
text-align: center;
padding: 30px;
}
.sp-banner-content i {
font-size: 2.5rem;
color: var(--sp-accent);
margin-bottom: 15px;
display: block;
}
.sp-banner-content h4 {
color: white;
margin-bottom: 10px;
font-size: 1.3rem;
}
.sp-banner-content p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 20px;
font-size: 0.95rem;
}
.sp-banner-btn {
display: inline-block;
background: var(--sp-primary);
color: white;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: var(--sp-transition);
}
.sp-banner-btn:hover {
background: var(--sp-primary-dark);
transform: translateY(-2px);
color: white;
}
/* --------------------------------------------
8. MODALS
-------------------------------------------- */
.sp-fullscreen-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
justify-content: center;
align-items: center;
}
.sp-fullscreen-content {
position: relative;
width: 90%;
max-width: 1200px;
height: 90vh;
}
.sp-close-fullscreen {
position: absolute;
top: -50px;
right: 0;
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
z-index: 10;
}
.sp-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
justify-content: center;
align-items: center;
padding: 20px;
}
.sp-modal-content {
background: white;
border-radius: var(--sp-border-radius);
max-width: 500px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
animation: spModalSlideIn 0.3s ease;
}
@keyframes spModalSlideIn {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.sp-modal-header {
padding: 20px;
border-bottom: 1px solid var(--sp-gray-light);
display: flex;
justify-content: space-between;
align-items: center;
}
.sp-modal-header h4 {
margin: 0;
color: var(--sp-dark);
}
.sp-modal-close {
background: none;
border: none;
color: var(--sp-gray);
cursor: pointer;
font-size: 1.2rem;
transition: var(--sp-transition);
}
.sp-modal-close:hover {
color: var(--sp-dark);
}
.sp-modal-body {
padding: 20px;
}
.sp-reply-to {
background: var(--sp-light);
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
}
.sp-reply-to strong {
display: block;
margin-bottom: 5px;
color: var(--sp-dark);
}
.sp-reply-to p {
margin: 0;
color: var(--sp-gray);
font-style: italic;
}
.sp-modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.sp-btn {
padding: 10px 20px;
border-radius: 8px;
border: none;
cursor: pointer;
font-weight: 500;
transition: var(--sp-transition);
}
.sp-btn-primary {
background: var(--sp-primary);
color: white;
}
.sp-btn-primary:hover {
background: var(--sp-primary-dark);
}
.sp-btn-secondary {
background: var(--sp-gray-light);
color: var(--sp-dark);
}
.sp-btn-secondary:hover {
background: var(--sp-gray);
color: white;
}
/* --------------------------------------------
9. RESPONSIVE STYLES
-------------------------------------------- */
@media (max-width: 1200px) {
.sp-article-title {
font-size: 2.5rem;
}
}
@media (max-width: 992px) {
.sp-article-title {
font-size: 2.2rem;
}
.sp-article-meta {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.sp-related-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
@media (max-width: 768px) {
.sp-article-hero {
padding: 30px 0;
}
.sp-article-title {
font-size: 1.8rem;
}
.sp-article-content {
padding: 25px;
}
.sp-article-body {
font-size: 1rem;
}
.sp-slider-btn {
width: 40px;
height: 40px;
}
.sp-share-buttons {
flex-wrap: wrap;
}
.sp-comment-replies {
padding-left: 20px;
}
}
@media (max-width: 576px) {
.sp-article-title {
font-size: 1.5rem;
}
.sp-article-subtitle {
font-size: 1rem;
}
.sp-article-content {
padding: 20px;
}
.sp-slider-container {
aspect-ratio: 4/3;
}
.sp-author-info {
flex-direction: column;
text-align: center;
}
.sp-comment-header {
flex-wrap: wrap;
}
.sp-comment-reply-btn {
margin-left: auto;
}
.sp-section-header {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
}
/* --------------------------------------------
10. UTILITIES
-------------------------------------------- */
.sp-text-center { text-align: center; }
.sp-text-right { text-align: right; }
.sp-mt-0 { margin-top: 0 !important; }
.sp-mb-0 { margin-bottom: 0 !important; }
.sp-mt-20 { margin-top: 20px !important; }
.sp-mb-20 { margin-bottom: 20px !important; }
.sp-mt-30 { margin-top: 30px !important; }
.sp-mb-30 { margin-bottom: 30px !important; }
.sp-mt-40 { margin-top: 40px !important; }
.sp-mb-40 { margin-bottom: 40px !important; }
.sp-hidden { display: none !important; }
.sp-visible { display: block !important; }
/* Animation classes */
.sp-fade-in {
animation: spFadeIn 0.5s ease;
}
@keyframes spFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.sp-slide-up {
animation: spSlideUp 0.4s ease;
}
@keyframes spSlideUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* edit profile styles*/
/* Edit Profile Specific Styles - Can be moved to style.css */
.profile-edit-container {
background: #f8f9fa;
min-height: 100vh;
padding: 20px 0;
}
.profile-edit-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.profile-edit-header {
background: white;
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}
.profile-edit-title {
color: #2c3e50;
font-size: 1.8rem;
margin-bottom: 10px;
font-weight: 600;
}
.profile-edit-subtitle {
color: #7f8c8d;
font-size: 1rem;
margin-bottom: 0;
}
/* Profile Completion Banner */
.profile-completion-banner {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.profile-completion-info h4 {
color: white;
margin-bottom: 8px;
font-weight: 600;
}
.profile-completion-info p {
color: rgba(255,255,255,0.9);
margin-bottom: 0;
font-size: 0.9rem;
}
.profile-completion-progress {
display: flex;
align-items: center;
gap: 20px;
}
.progress-circle-edit {
width: 80px;
height: 80px;
position: relative;
}
.progress-circle-edit svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.progress-circle-edit circle {
fill: none;
stroke-width: 8;
stroke-linecap: round;
}
.progress-circle-bg {
stroke: rgba(255,255,255,0.2);
}
.progress-circle-fill {
stroke: #4cd964;
transition: stroke-dashoffset 0.5s ease;
}
.progress-circle-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
font-size: 1.2rem;
}
.complete-profile-btn {
background: white;
color: #667eea;
border: none;
padding: 10px 25px;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.complete-profile-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
color: #764ba2;
}
/* Edit Form Container */
.profile-edit-form-container {
background: white;
border-radius: 12px;
box-shadow: 0 2px 15px rgba(0,0,0,0.08);
overflow: hidden;
}
/* Form Tabs */
.profile-edit-tabs {
display: flex;
border-bottom: 1px solid #e9ecef;
overflow-x: auto;
padding: 0 20px;
}
.profile-edit-tab {
padding: 18px 25px;
background: none;
border: none;
color: #6c757d;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
display: flex;
align-items: center;
gap: 8px;
}
.profile-edit-tab:hover {
color: #667eea;
}
.profile-edit-tab.active {
color: #667eea;
border-bottom-color: #667eea;
}
/* Form Content */
.profile-edit-form-content {
padding: 30px;
}
.profile-edit-form {
max-width: 800px;
margin: 0 auto;
}
/* Tab Content Visibility */
.profile-edit-form-tab {
display: none;
animation: fadeIn 0.3s ease;
}
.profile-edit-form-tab.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Form Sections */
.form-section {
margin-bottom: 40px;
}
.form-section-title {
color: #2c3e50;
font-size: 1.3rem;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f2f5;
font-weight: 600;
}
/* Form Grid */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.form-group-edit {
margin-bottom: 20px;
}
.form-group-edit label {
display: block;
color: #2c3e50;
margin-bottom: 8px;
font-weight: 500;
}
.form-group-edit .required {
color: #e74c3c;
}
.form-control-edit {
width: 100%;
padding: 12px 15px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 0.95rem;
transition: all 0.3s ease;
background: white;
}
.form-control-edit:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-control-edit.error {
border-color: #e74c3c;
}
textarea.form-control-edit {
min-height: 100px;
resize: vertical;
}
.gender-div {
display: flex;
align-items: center;
gap: 20px;
margin-top: 8px;
}
/*
.gender-div input[type="radio"] {
margin: 0;
width: 5px;
height: 5px;
position: relative;
cursor: pointer;
}
.gender-div input[type="radio"] + label {
margin: 0;
padding-left: 5px;
cursor: pointer;
font-weight: normal;
display: inline;
} */
.form-radio .radio input[type=radio] {
display: block;
/* opacity: 0; */
margin-left: 1px !important;
}
/* Custom radio button styling */
/* Profile Image Upload */
.profile-image-upload {
display: flex;
align-items: center;
gap: 25px;
margin-bottom: 30px;
}
.profile-image-preview {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
border: 4px solid white;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.profile-image-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-image-upload-controls {
flex: 1;
}
.upload-btn {
background: #667eea;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 500;
transition: all 0.3s ease;
}
.upload-btn:hover {
background: #5a6fd8;
transform: translateY(-2px);
}
.upload-btn input[type="file"] {
display: none;
}
.upload-hint {
color: #6c757d;
font-size: 0.85rem;
margin-top: 8px;
}
/* Dynamic Fields */
.dynamic-field-group {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
border: 1px solid #e9ecef;
}
.dynamic-field-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.dynamic-field-title {
color: #2c3e50;
font-weight: 600;
}
.btn-remove {
background: #e74c3c;
color: white;
border: none;
padding: 6px 15px;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.btn-remove:hover {
background: #c0392b;
}
.btn-add {
background: #2ecc71;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-add:hover {
background: #27ae60;
transform: translateY(-2px);
}
/* Form Actions */
.form-actions {
display: flex;
gap: 15px;
justify-content: flex-end;
padding-top: 30px;
border-top: 1px solid #e9ecef;
margin-top: 30px;
}
.btn-cancel {
background: #6c757d;
color: white;
border: none;
padding: 12px 30px;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-cancel:hover {
background: #5a6268;
}
.btn-submit {
background: #667eea;
color: white;
border: none;
padding: 12px 30px;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.btn-submit:hover:not(:disabled) {
background: #5a6fd8;
transform: translateY(-2px);
}
.btn-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
}
/* Messages */
.message-container {
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
display: none;
}
.message-success {
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
}
.message-error {
background: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}
.message-warning {
background: #fff3cd;
border: 1px solid #ffeaa7;
color: #856404;
}
.field-error {
color: #e74c3c;
font-size: 0.85rem;
margin-top: 5px;
display: none;
}
/* Password Strength */
.password-strength {
margin-top: 10px;
}
.strength-meter {
height: 5px;
background: #e9ecef;
border-radius: 3px;
margin-top: 5px;
overflow: hidden;
}
.strength-meter-fill {
height: 100%;
width: 0%;
transition: width 0.3s ease, background-color 0.3s ease;
}
.strength-0 { background-color: #e74c3c; width: 20%; }
.strength-1 { background-color: #e74c3c; width: 40%; }
.strength-2 { background-color: #f39c12; width: 60%; }
.strength-3 { background-color: #f1c40f; width: 80%; }
.strength-4 { background-color: #2ecc71; width: 100%; }
.strength-text {
font-size: 0.85rem;
color: #6c757d;
}
/* Responsive Design */
@media (max-width: 768px) {
.profile-edit-tabs {
padding: 0 10px;
}
.profile-edit-tab {
padding: 15px;
font-size: 0.9rem;
}
.profile-edit-form-content {
padding: 20px;
}
.form-grid {
grid-template-columns: 1fr;
}
.profile-completion-banner {
flex-direction: column;
text-align: center;
gap: 20px;
}
.profile-image-upload {
flex-direction: column;
text-align: center;
}
.form-actions {
flex-direction: column;
}
.btn-cancel, .btn-submit {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.profile-edit-header {
padding: 20px;
}
.profile-edit-title {
font-size: 1.5rem;
}
.radio-group {
flex-direction: column;
gap: 15px;
}
}
/* Password Toggle */
.password-toggle {
position: relative;
}
.password-toggle-btn {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #6c757d;
cursor: pointer;
}
/* Custom Select */
.custom-select-wrapper {
position: relative;
}
.custom-select-arrow {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: #6c757d;
}
/* enrollment-form styling */
/* Enrollment Form with Bootstrap Select Plugin */
.enrollment-bootstrap-select .registration-container {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 40px 0;
display: flex;
align-items: center;
}
.enrollment-bootstrap-select .registration-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.enrollment-bootstrap-select .registration-card {
background: white;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
min-height: 700px;
}
.enrollment-bootstrap-select .registration-left {
flex: 1;
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.enrollment-bootstrap-select .registration-left-content {
position: relative;
z-index: 2;
}
.enrollment-bootstrap-select .registration-left img.logo {
max-width: 200px;
margin-bottom: 30px;
}
.enrollment-bootstrap-select .registration-left h1 {
font-size: 32px;
background: linear-gradient(135deg, #d4af37, #f5e6c8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.3;
}
.enrollment-bootstrap-select .registration-left p {
font-size: 16px;
line-height: 1.6;
opacity: 0.9;
margin-bottom: 30px;
}
.enrollment-bootstrap-select .registration-right {
flex: 1;
padding: 60px 40px;
overflow-y: auto;
max-height: 700px;
}
.enrollment-bootstrap-select .registration-header {
margin-bottom: 40px;
}
.enrollment-bootstrap-select .registration-header h2 {
font-size: 28px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
}
.enrollment-bootstrap-select .registration-header p {
color: #7f8c8d;
font-size: 16px;
}
.enrollment-bootstrap-select .registration-form {
margin-bottom: 30px;
}
.enrollment-bootstrap-select .form-row {
display: flex;
gap: 20px;
margin-bottom: 25px;
}
.enrollment-bootstrap-select .form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.enrollment-bootstrap-select .form-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50;
font-size: 14px;
}
.enrollment-bootstrap-select .form-input {
width: 100%;
padding: 14px 16px;
border: 2px solid #e8f5e9;
border-radius: 12px;
font-size: 15px;
background: #f8f9fa;
transition: all 0.3s;
color: #2c3e50;
}
.enrollment-bootstrap-select .form-input:focus {
outline: none;
border-color: #083a80;
background: white;
box-shadow: 0 0 0 3px rgba(139, 195, 74, 0.1);
}
.enrollment-bootstrap-select .form-input::placeholder {
color: #95a5a6;
}
.enrollment-bootstrap-select .form-error {
color: #e74c3c;
font-size: 13px;
margin-top: 5px;
display: block;
min-height: 20px;
}
.enrollment-bootstrap-select .required {
color: #e74c3c;
font-weight: bold;
}
.enrollment-bootstrap-select .gender-div {
display: flex;
gap: 30px;
margin-top: 10px;
}
.enrollment-bootstrap-select .radio-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-weight: normal;
color: #2c3e50;
}
.enrollment-bootstrap-select .form-radio {
width: 18px;
height: 18px;
accent-color: #083a80;
}
.enrollment-bootstrap-select textarea.form-input {
min-height: 100px;
resize: vertical;
}
.enrollment-bootstrap-select .submit-btn {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
border: none;
padding: 16px 32px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.enrollment-bootstrap-select .submit-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(139, 195, 74, 0.3);
}
.enrollment-bootstrap-select .submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.enrollment-bootstrap-select .spinner-border {
width: 20px;
height: 20px;
border-width: 2px;
}
/* Bootstrap Select Custom Styling */
.enrollment-bootstrap-select .bootstrap-select.form-input .dropdown-toggle {
background-color: #f8f9fa !important;
border: 2px solid #e8f5e9 !important;
border-radius: 12px !important;
padding: 14px 16px !important;
color: #2c3e50 !important;
font-size: 15px !important;
height: auto !important;
min-height: 48px !important;
}
.enrollment-bootstrap-select .bootstrap-select.form-input .dropdown-toggle:focus {
outline: none !important;
border-color: #083a80 !important;
background: white !important;
box-shadow: 0 0 0 3px rgba(139, 195, 74, 0.1) !important;
}
.enrollment-bootstrap-select .bootstrap-select.form-input .dropdown-toggle.is-invalid {
border-color: #dc3545 !important;
background-color: #fff5f5 !important;
}
.enrollment-bootstrap-select .bootstrap-select.form-input .dropdown-toggle.is-valid {
border-color: #28a745 !important;
background-color: #f5fff7 !important;
}
.enrollment-bootstrap-select .bootstrap-select .dropdown-menu {
border: 2px solid #e8f5e9 !important;
border-radius: 12px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
margin-top: 5px !important;
padding: 10px 0 !important;
max-height: 300px !important;
overflow-y: auto !important;
}
.enrollment-bootstrap-select .bootstrap-select .dropdown-item {
padding: 10px 20px !important;
color: #2c3e50 !important;
font-size: 14px !important;
}
.enrollment-bootstrap-select .bootstrap-select .dropdown-item:hover {
background-color: #f8f9fa !important;
color: #083a80 !important;
}
.enrollment-bootstrap-select .bootstrap-select .dropdown-item.active {
background-color: #083a80 !important;
color: white !important;
}
/* Hide original select */
.enrollment-bootstrap-select select.form-input {
display: none !important;
}
/* Alerts */
.enrollment-bootstrap-select .alert {
border-radius: 12px;
padding: 16px;
margin-bottom: 20px;
border: none;
}
.enrollment-bootstrap-select .alert-danger {
background-color: #f8d7da;
color: #721c24;
border-left: 4px solid #dc3545;
}
.enrollment-bootstrap-select .alert-success {
background-color: #d4edda;
color: #155724;
border-left: 4px solid #28a745;
}
/* Responsive */
@media (max-width: 992px) {
.enrollment-bootstrap-select .registration-card {
flex-direction: column;
}
.enrollment-bootstrap-select .registration-left,
.enrollment-bootstrap-select .registration-right {
padding: 40px 30px;
}
.enrollment-bootstrap-select .registration-left {
min-height: 400px;
}
.enrollment-bootstrap-select .registration-right {
max-height: none;
}
}
@media (max-width: 768px) {
.enrollment-bootstrap-select .form-row {
flex-direction: column;
gap: 25px;
}
.enrollment-bootstrap-select .gender-div {
flex-direction: column;
gap: 15px;
}
}
/* ============================================
ENROLLMENT FORM WITH NATIVE SELECT ELEMENTS
============================================ */
.enrollment-form-simple .registration-container {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 40px 0;
display: flex;
align-items: center;
}
.enrollment-form-simple .registration-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.enrollment-form-simple .registration-card {
background: white;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
min-height: 700px;
}
.enrollment-form-simple .registration-left {
flex: 1;
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.enrollment-form-simple .registration-left-content {
position: relative;
z-index: 2;
}
.enrollment-form-simple .registration-left img.logo {
max-width: 200px;
margin-bottom: 30px;
}
.enrollment-form-simple .registration-left h1 {
font-size: 32px;
background: linear-gradient(135deg, #d4af37, #f5e6c8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.3;
}
.enrollment-form-simple .registration-left p {
font-size: 16px;
line-height: 1.6;
opacity: 0.9;
margin-bottom: 30px;
}
.enrollment-form-simple .registration-right {
flex: 1;
padding: 60px 40px;
overflow-y: auto;
max-height: 700px;
}
.enrollment-form-simple .registration-header {
margin-bottom: 40px;
}
.enrollment-form-simple .registration-header h2 {
font-size: 28px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
}
.enrollment-form-simple .registration-header p {
color: #7f8c8d;
font-size: 16px;
}
.enrollment-form-simple .registration-form {
margin-bottom: 30px;
}
.enrollment-form-simple .form-row {
display: flex;
gap: 20px;
margin-bottom: 25px;
}
.enrollment-form-simple .form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.enrollment-form-simple .form-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50 !important;
font-size: 14px;
}
/* Native Select Styling */
.enrollment-form-simple .select-wrapper {
position: relative;
width: 100%;
}
.enrollment-form-simple .select-wrapper .form-input {
width: 100%;
padding: 14px 16px;
border: 2px solid #e8f5e9;
border-radius: 12px;
font-size: 15px;
background: #f8f9fa;
transition: all 0.3s;
color: #2c3e50;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
.enrollment-form-simple .select-arrow {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: #7f8c8d;
pointer-events: none;
font-size: 12px;
transition: transform 0.3s;
}
.enrollment-form-simple .select-wrapper .form-input:focus + .select-arrow {
transform: translateY(-50%) rotate(180deg);
}
.enrollment-form-simple .form-input:focus {
outline: none;
border-color: #083a80;
background: white;
box-shadow: 0 0 0 3px rgba(139, 195, 74, 0.1);
}
.enrollment-form-simple .form-input::placeholder {
color: #95a5a6;
}
/* Input fields styling */
.enrollment-form-simple input.form-input {
width: 100%;
padding: 14px 16px;
border: 2px solid #e8f5e9;
border-radius: 12px;
font-size: 15px;
background: #f8f9fa;
transition: all 0.3s;
color: #2c3e50;
}
.enrollment-form-simple textarea.form-input {
min-height: 100px;
resize: vertical;
width: 100%;
padding: 14px 16px;
border: 2px solid #e8f5e9;
border-radius: 12px;
font-size: 15px;
background: #f8f9fa;
transition: all 0.3s;
color: #2c3e50;
}
/* Validation styles */
.enrollment-form-simple .form-input.is-invalid {
border-color: #e74c3c !important;
background-color: #fff5f5 !important;
}
.enrollment-form-simple .form-input.is-valid {
border-color: #28a745 !important;
background-color: #f5fff7 !important;
}
.enrollment-form-simple .form-error {
color: #e74c3c;
font-size: 13px;
margin-top: 5px;
display: block;
min-height: 20px;
}
.enrollment-form-simple .required {
color: #e74c3c;
font-weight: bold;
}
/* Radio buttons */
.enrollment-form-simple .gender-div {
display: flex;
gap: 30px;
margin-top: 10px;
}
.enrollment-form-simple .radio-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-weight: normal;
color: #2c3e50;
}
.enrollment-form-simple .form-radio {
width: 18px;
height: 18px;
accent-color: #083a80;
}
/* Submit button */
.enrollment-form-simple .submit-btn {
background: linear-gradient(135deg, #083a80 0%, #082b63 100%);
color: white;
border: none;
padding: 16px 32px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.enrollment-form-simple .submit-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(139, 195, 74, 0.3);
}
.enrollment-form-simple .submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.enrollment-form-simple .spinner-border {
width: 20px;
height: 20px;
border-width: 2px;
}
/* Alerts */
.enrollment-form-simple .alert {
border-radius: 12px;
padding: 16px;
margin-bottom: 20px;
border: none;
}
.enrollment-form-simple .alert-danger {
background-color: #f8d7da;
color: #721c24;
border-left: 4px solid #dc3545;
}
.enrollment-form-simple .alert-success {
background-color: #d4edda;
color: #155724;
border-left: 4px solid #28a745;
}
/* Responsive */
@media (max-width: 992px) {
.enrollment-form-simple .registration-card {
flex-direction: column;
}
.enrollment-form-simple .registration-left,
.enrollment-form-simple .registration-right {
padding: 40px 30px;
}
.enrollment-form-simple .registration-left {
min-height: 400px;
}
.enrollment-form-simple .registration-right {
max-height: none;
}
}
@media (max-width: 768px) {
.enrollment-form-simple .form-row {
flex-direction: column;
gap: 25px;
}
.enrollment-form-simple .gender-div {
flex-direction: column;
gap: 15px;
}
/* Mobile select improvements */
.enrollment-form-simple .select-wrapper .form-input {
font-size: 16px; /* Prevent iOS zoom */
padding: 16px 20px;
}
.enrollment-form-simple .select-arrow {
right: 20px;
font-size: 14px;
}
.enrollment-form-simple input.form-input,
.enrollment-form-simple textarea.form-input {
font-size: 16px;
padding: 16px 20px;
}
}
/* Time slot dropdown improvements */
.enrollment-form-simple #timeslot {
max-height: 200px; /* Show more options */
}
/* Multiple select styling */
.enrollment-form-simple .select-wrapper .form-input[multiple] {
height: auto;
min-height: 100px;
padding-right: 40px;
}
.enrollment-form-simple .form-input[multiple] option {
padding: 8px 12px;
border-bottom: 1px solid #e8f5e9;
}
.enrollment-form-simple .form-input[multiple] option:checked {
background-color: #083a80;
color: white;
}
.enrollment-form-simple .form-hint {
font-size: 12px;
color: #7f8c8d;
margin-top: 5px;
font-style: italic;
}
/* Mobile adjustments for multiple select */
@media (max-width: 768px) {
.enrollment-form-simple .select-wrapper .form-input[multiple] {
min-height: 120px;
font-size: 16px;
}
}
/* Error styling */
#formError ul {
margin-left: 20px;
}
#formError li {
margin-bottom: 5px;
}
/* Time slot hint styling */
.form-hint {
font-size: 12px;
color: #6c757d;
margin-top: 5px;
font-style: italic;
padding: 5px 0;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.form-hint {
font-size: 11px;
}
}
/* // Alert System */
/* =============================================
FRIENDS PAGE STYLES - COMPLETELY NAMESPACED
All classes prefixed with 'friends-' to avoid conflicts
============================================= */
/* Main Container */
.friends-main-container {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
position: relative;
}
.friends-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
.friends-container {
display: flex;
min-height: calc(100vh - 40px);
background: white;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
/* Header Section */
.friends-header-section {
margin-bottom: 30px;
}
.friends-header-info {
margin-bottom: 25px;
}
.friends-main-title {
font-size: 32px;
font-weight: 800;
color: #1a365d;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 12px;
}
.friends-main-title i {
color: #3a6b58;
font-size: 28px;
}
.friends-count-badge {
background: linear-gradient(135deg, #3a6b58, #4a8c6d);
color: white;
font-size: 18px;
font-weight: 600;
padding: 4px 16px;
border-radius: 20px;
margin-left: 12px;
}
.friends-subtitle {
color: #718096;
font-size: 16px;
margin: 0;
}
/* Controls Section */
.friends-controls-section {
background: #f8fafc;
padding: 25px;
border-radius: 16px;
border: 1px solid #e2e8f0;
}
.friends-controls-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
align-items: start;
}
/* Search Container */
.friends-search-container {
flex: 1;
}
.friends-search-form {
display: flex;
gap: 12px;
}
.friends-search-input-group {
flex: 1;
position: relative;
display: flex;
align-items: center;
}
.friends-search-icon {
position: absolute;
left: 18px;
color: #a0aec0;
font-size: 16px;
}
.friends-search-input {
width: 100%;
padding: 16px 52px 16px 52px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 15px;
transition: all 0.3s;
background: white;
color: #2d3748;
}
.friends-search-input:focus {
outline: none;
border-color: #3a6b58;
box-shadow: 0 0 0 3px rgba(58, 107, 88, 0.1);
}
.friends-clear-search {
position: absolute;
right: 16px;
background: none;
border: none;
color: #a0aec0;
cursor: pointer;
padding: 4px;
transition: color 0.2s;
}
.friends-clear-search:hover {
color: #e53e3e;
}
.friends-search-btn {
background: linear-gradient(135deg, #3a6b58, #4a8c6d);
color: white;
border: none;
padding: 16px 28px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
}
.friends-search-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(58, 107, 88, 0.3);
}
/* Actions Container */
.friends-actions-container {
display: flex;
gap: 12px;
align-items: center;
}
.friends-sort-dropdown {
position: relative;
}
.friends-sort-select {
appearance: none;
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 12px 40px 12px 16px;
font-size: 14px;
font-weight: 500;
color: #2d3748;
cursor: pointer;
min-width: 200px;
}
.friends-sort-select:focus {
outline: none;
border-color: #3a6b58;
}
.friends-sort-arrow {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: #a0aec0;
pointer-events: none;
}
.friends-actions-dropdown {
position: relative;
}
.friends-actions-btn {
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 12px 20px;
font-size: 14px;
font-weight: 500;
color: #2d3748;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
}
.friends-actions-btn:hover {
border-color: #3a6b58;
color: #3a6b58;
}
.friends-actions-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
min-width: 220px;
z-index: 1000;
overflow: hidden;
}
.friends-actions-menu.show {
display: block;
}
.friends-action-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
color: #4a5568;
text-decoration: none;
transition: all 0.2s;
border-bottom: 1px solid #f7fafc;
}
.friends-action-item:last-child {
border-bottom: none;
}
.friends-action-item:hover {
background: #f7fafc;
color: #3a6b58;
}
.friends-action-divider {
height: 1px;
background: #e2e8f0;
margin: 8px 0;
}
/* Search Summary */
.friends-search-summary {
margin-top: 20px;
padding: 16px;
background: linear-gradient(135deg, #ebf8ff, #e6fffa);
border: 1px solid #bee3f8;
border-radius: 12px;
}
.friends-search-summary-content {
display: flex;
align-items: center;
gap: 12px;
color: #2c5282;
}
.friends-search-result-count {
margin-left: auto;
font-weight: 600;
color: #2b6cb0;
}
/* Loading Indicator */
.friends-loading-indicator {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
background: white;
border-radius: 16px;
margin: 20px 0;
}
.friends-spinner {
width: 50px;
height: 50px;
border: 3px solid #f3f3f3;
border-top: 3px solid #3a6b58;
border-radius: 50%;
animation: friends-spin 1s linear infinite;
margin-bottom: 16px;
}
@keyframes friends-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Friends Grid */
.friends-grid-container {
margin: 30px 0;
}
.friends-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
/* Friend Card */
.friends-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
transition: all 0.3s;
position: relative;
}
.friends-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.friends-card-cover {
position: relative;
height: 120px;
overflow: hidden;
}
.friends-cover-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.friends-card:hover .friends-cover-image {
transform: scale(1.05);
}
.friends-cover-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
}
.friends-followers-badge {
position: absolute;
bottom: 16px;
right: 16px;
background: rgba(255, 255, 255, 0.95);
padding: 6px 12px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: #4a5568;
}
.friends-followers-badge i {
color: #3a6b58;
}
/* Profile Section */
.friends-profile-section {
padding: 0 24px;
margin-top: -40px;
position: relative;
z-index: 1;
}
.friends-avatar-container {
position: relative;
width: 80px;
height: 80px;
margin-bottom: 16px;
}
.friends-profile-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
border: 4px solid white;
object-fit: cover;
background: white;
}
.friends-online-status {
position: absolute;
bottom: 8px;
right: 8px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid white;
}
.friends-online {
background: #48bb78;
box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.2);
}
.friends-offline {
background: #cbd5e0;
}
.friends-profile-info {
margin-bottom: 16px;
}
.friends-profile-name {
font-size: 18px;
font-weight: 700;
color: #2d3748;
margin-bottom: 4px;
}
.friends-profile-link {
color: inherit;
text-decoration: none;
transition: color 0.2s;
}
.friends-profile-link:hover {
color: #3a6b58;
}
.friends-profile-location {
color: #718096;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.friends-since-badge {
background: #f7fafc;
padding: 8px 16px;
border-radius: 12px;
font-size: 13px;
color: #4a5568;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
}
/* Stats Section */
.friends-stats-section {
padding: 0 24px 24px;
border-bottom: 1px solid #e2e8f0;
}
.friends-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.friends-stat-item {
text-align: center;
padding: 12px;
background: #f7fafc;
border-radius: 12px;
transition: all 0.2s;
}
.friends-stat-item:hover {
background: #edf2f7;
transform: translateY(-2px);
}
.friends-stat-number {
font-size: 20px;
font-weight: 700;
color: #3a6b58;
margin-bottom: 4px;
}
.friends-stat-label {
font-size: 12px;
color: #718096;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Actions Section */
.friends-actions-section {
padding: 20px 24px;
display: flex;
gap: 12px;
}
.friends-message-btn {
flex: 1;
background: linear-gradient(135deg, #3a6b58, #4a8c6d);
color: white;
border: none;
padding: 14px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.3s;
}
.friends-message-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(58, 107, 88, 0.3);
}
.friends-more-actions {
position: relative;
}
.friends-more-btn {
width: 48px;
height: 48px;
background: #f7fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
color: #718096;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.friends-more-btn:hover {
background: #edf2f7;
color: #3a6b58;
}
.friends-more-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
min-width: 200px;
z-index: 1000;
overflow: hidden;
}
.friends-menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
color: #4a5568;
text-decoration: none;
transition: all 0.2s;
border-bottom: 1px solid #f7fafc;
font-size: 14px;
}
.friends-menu-item:last-child {
border-bottom: none;
}
.friends-menu-item:hover {
background: #f7fafc;
color: #3a6b58;
}
.friends-menu-item i {
width: 20px;
text-align: center;
}
.friends-menu-divider {
height: 1px;
background: #e2e8f0;
margin: 8px 0;
}
/* Empty State */
.friends-empty-state {
text-align: center;
padding: 80px 40px;
background: white;
border-radius: 20px;
border: 2px dashed #e2e8f0;
}
.friends-empty-icon {
font-size: 64px;
color: #cbd5e0;
margin-bottom: 24px;
}
.friends-empty-title {
font-size: 24px;
font-weight: 700;
color: #2d3748;
margin-bottom: 12px;
}
.friends-empty-message {
color: #718096;
font-size: 16px;
max-width: 500px;
margin: 0 auto 32px;
line-height: 1.6;
}
.friends-empty-actions {
display: flex;
gap: 16px;
justify-content: center;
}
.friends-find-friends-btn,
.friends-explore-btn {
padding: 14px 32px;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s;
}
.friends-find-friends-btn {
background: linear-gradient(135deg, #3a6b58, #4a8c6d);
color: white;
}
.friends-find-friends-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(58, 107, 88, 0.3);
color: white;
}
.friends-explore-btn {
background: white;
color: #3a6b58;
border: 2px solid #3a6b58;
}
.friends-explore-btn:hover {
background: #3a6b58;
color: white;
transform: translateY(-3px);
}
/* Pagination */
.friends-pagination-section {
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid #e2e8f0;
}
.friends-pagination-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.friends-pagination-info {
font-size: 14px;
color: #718096;
}
.friends-pagination-text strong {
color: #2d3748;
}
.friends-pagination-controls {
display: flex;
align-items: center;
gap: 12px;
}
.friends-pagination-btn {
padding: 10px 20px;
border: 1px solid #e2e8f0;
border-radius: 8px;
color: #4a5568;
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
.friends-pagination-btn:hover {
background: #f7fafc;
border-color: #3a6b58;
color: #3a6b58;
}
.friends-pagination-numbers {
display: flex;
align-items: center;
gap: 4px;
}
.friends-pagination-number {
padding: 8px 16px;
border: 1px solid #e2e8f0;
border-radius: 8px;
color: #4a5568;
text-decoration: none;
font-weight: 500;
transition: all 0.2s;
}
.friends-pagination-number:hover {
background: #f7fafc;
border-color: #3a6b58;
color: #3a6b58;
}
.friends-pagination-active {
background: linear-gradient(135deg, #3a6b58, #4a8c6d);
color: white;
border-color: #3a6b58;
}
.friends-pagination-ellipsis {
padding: 8px;
color: #a0aec0;
}
.friends-per-page-selector {
display: flex;
align-items: center;
gap: 12px;
}
.friends-per-page-label {
color: #718096;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.friends-per-page-select {
padding: 8px 16px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: white;
color: #4a5568;
font-size: 14px;
cursor: pointer;
}
.friends-per-page-select:focus {
outline: none;
border-color: #3a6b58;
}
/* Modal */
.friends-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(4px);
}
.friends-modal-content {
background: white;
border-radius: 24px;
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15);
animation: friends-modal-appear 0.3s ease;
}
@keyframes friends-modal-appear {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.friends-modal-header {
padding: 24px;
border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.friends-modal-title {
font-size: 20px;
font-weight: 700;
color: #2d3748;
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
.friends-modal-close {
width: 40px;
height: 40px;
border: none;
background: #f7fafc;
border-radius: 12px;
color: #718096;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.friends-modal-close:hover {
background: #edf2f7;
color: #e53e3e;
}
.friends-modal-body {
padding: 24px;
overflow-y: auto;
max-height: calc(90vh - 140px);
}
/* Message Form */
.friends-message-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.friends-form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.friends-form-label {
font-size: 14px;
font-weight: 600;
color: #4a5568;
}
.friends-recipient-info {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: #f7fafc;
border-radius: 12px;
}
.friends-recipient-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
}
.friends-recipient-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.friends-recipient-details h4 {
margin: 0 0 4px 0;
font-size: 16px;
font-weight: 600;
color: #2d3748;
}
.friends-recipient-details span {
font-size: 13px;
color: #718096;
}
.friends-message-textarea {
width: 100%;
padding: 16px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 15px;
resize: none;
font-family: inherit;
transition: all 0.3s;
background: #fafbfc;
color: #2d3748;
}
.friends-message-textarea:focus {
outline: none;
border-color: #3a6b58;
background: white;
box-shadow: 0 0 0 3px rgba(58, 107, 88, 0.1);
}
.friends-attachments {
display: flex;
flex-direction: column;
gap: 12px;
}
.friends-attachment-btn {
align-self: flex-start;
background: #f7fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 10px 20px;
color: #4a5568;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
.friends-attachment-btn:hover {
background: #edf2f7;
border-color: #3a6b58;
color: #3a6b58;
}
.friends-attachments-preview {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 12px;
}
.friends-attachment-preview {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #f7fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.friends-attachment-thumb {
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.friends-attachment-thumb img,
.friends-attachment-thumb video {
width: 100%;
height: 100%;
object-fit: cover;
}
.friends-attachment-info {
flex: 1;
min-width: 0;
}
.friends-attachment-name {
font-size: 14px;
font-weight: 500;
color: #2d3748;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.friends-attachment-size {
font-size: 12px;
color: #718096;
}
.friends-attachment-remove {
width: 32px;
height: 32px;
border: none;
background: #fed7d7;
border-radius: 8px;
color: #c53030;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.friends-attachment-remove:hover {
background: #fc8181;
color: white;
}
.friends-modal-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
padding-top: 24px;
border-top: 1px solid #e2e8f0;
}
.friends-cancel-btn {
padding: 12px 24px;
background: #f7fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
color: #4a5568;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.friends-cancel-btn:hover {
background: #edf2f7;
}
.friends-send-btn {
padding: 12px 24px;
background: linear-gradient(135deg, #3a6b58, #4a8c6d);
border: none;
border-radius: 12px;
color: white;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
}
.friends-send-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(58, 107, 88, 0.3);
}
.friends-send-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
/* Alerts */
.friends-alert {
position: fixed;
top: 20px;
right: 20px;
min-width: 300px;
max-width: 400px;
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
z-index: 99999;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
animation: friends-slide-in 0.3s ease;
border-left: 4px solid;
}
@keyframes friends-slide-in {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.friends-alert-success {
border-left-color: #48bb78;
}
.friends-alert-error {
border-left-color: #f56565;
}
.friends-alert-info {
border-left-color: #4299e1;
}
.friends-alert-content {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.friends-alert-content i {
font-size: 20px;
}
.friends-alert-success .friends-alert-content i {
color: #48bb78;
}
.friends-alert-error .friends-alert-content i {
color: #f56565;
}
.friends-alert-content span {
flex: 1;
font-size: 14px;
font-weight: 500;
color: #2d3748;
}
.friends-alert-close {
width: 32px;
height: 32px;
border: none;
background: transparent;
color: #a0aec0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: all 0.2s;
}
.friends-alert-close:hover {
background: #f7fafc;
color: #e53e3e;
}
/* Responsive Design */
@media (max-width: 1200px) {
.friends-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
@media (max-width: 992px) {
.friends-controls-grid {
grid-template-columns: 1fr;
}
.friends-actions-container {
justify-content: space-between;
}
.friends-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
}
@media (max-width: 768px) {
.friends-wrapper {
padding: 10px;
}
.friends-container {
border-radius: 16px;
}
.friends-main-title {
font-size: 24px;
}
.friends-search-form {
flex-direction: column;
}
.friends-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.friends-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.friends-empty-actions {
flex-direction: column;
align-items: center;
}
.friends-find-friends-btn,
.friends-explore-btn {
width: 100%;
justify-content: center;
}
.friends-pagination-container {
flex-direction: column;
align-items: stretch;
}
.friends-pagination-controls {
justify-content: center;
}
.friends-per-page-selector {
justify-content: center;
}
}
@media (max-width: 480px) {
.friends-modal-content {
margin: 10px;
max-height: 80vh;
}
.friends-modal-header {
padding: 16px;
}
.friends-modal-body {
padding: 16px;
max-height: calc(80vh - 110px);
}
.friends-modal-actions {
flex-direction: column;
}
.friends-cancel-btn,
.friends-send-btn {
width: 100%;
justify-content: center;
}
}
/* Print Styles */
@media print {
.friends-actions-section,
.friends-more-menu,
.friends-modal,
.friends-alert {
display: none !important;
}
.friends-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
}
/* eventdetails page */
/* Event Details Specific Styles */
.event-description-section,
.event-location-section,
.event-response-section {
margin-bottom: 2rem;
padding: 1.5rem;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.event-description-section h3,
.event-location-section h3,
.event-response-section h3 {
color: #2d3748;
margin-bottom: 1rem;
font-size: 1.25rem;
display: flex;
align-items: center;
gap: 10px;
}
.event-description-content {
line-height: 1.8;
color: #4a5568;
}
.location-details-content {
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #4a6ee0;
}
.map-info h5 {
color: #2d3748;
margin-bottom: 0.5rem;
}
.map-info p {
color: #6b7280;
line-height: 1.6;
}
/* Event Details Widget */
.event-details-widget {
display: flex;
flex-direction: column;
gap: 1rem;
}
.event-detail-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
transition: all 0.3s ease;
}
.event-detail-item:hover {
background: #edf2f7;
transform: translateY(-2px);
}
.event-detail-icon {
background: #4a6ee0;
color: white;
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.event-detail-content h5 {
color: #2d3748;
margin-bottom: 0.25rem;
font-size: 0.95rem;
}
.event-detail-content p {
color: #6b7280;
font-size: 0.875rem;
line-height: 1.5;
}
.calendar-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: #4a6ee0;
text-decoration: none;
font-size: 0.875rem;
margin-top: 0.5rem;
transition: color 0.3s ease;
}
.calendar-link:hover {
color: #3a56c0;
}
/* Response Section */
.response-section-content {
padding: 1.5rem;
background: #f8f9fa;
border-radius: 10px;
}
.response-buttons {
display: flex;
gap: 10px;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.response-btn {
flex: 1;
min-width: 120px;
padding: 10px 15px;
border: 2px solid #e5e7eb;
background: white;
border-radius: 8px;
color: #6b7280;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.3s ease;
}
.response-btn:hover {
border-color: #4a6ee0;
color: #4a6ee0;
}
.response-btn.active {
border-color: #4a6ee0;
background: #4a6ee0;
color: white;
}
.response-counts {
display: flex;
justify-content: space-around;
padding-top: 1rem;
border-top: 1px solid #e5e7eb;
}
.response-count-item {
text-align: center;
}
.response-count-number {
display: block;
font-size: 1.25rem;
font-weight: 600;
color: #2d3748;
}
.response-count-label {
font-size: 0.875rem;
color: #6b7280;
}
/* User Cards */
.users-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.user-card {
background: white;
border-radius: 10px;
padding: 1rem;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
transition: transform 0.3s ease;
}
.user-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.user-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 10px;
}
.user-avatar-placeholder {
width: 60px;
height: 60px;
border-radius: 50%;
background: #4a6ee0;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin: 0 auto 10px;
}
.user-name {
color: #2d3748;
font-size: 0.95rem;
margin-bottom: 5px;
}
.user-location,
.user-response-time {
color: #6b7280;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-bottom: 3px;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 3rem 1rem;
color: #6b7280;
}
.empty-state i {
font-size: 3rem;
margin-bottom: 1rem;
color: #d1d5db;
}
.empty-state h4 {
color: #4b5563;
margin-bottom: 0.5rem;
}
.empty-state p {
font-size: 0.95rem;
}
/* Share Options */
.blogdetail-share-options {
margin: 1rem 0;
padding: 1.5rem;
background: #f8f9fa;
border-radius: 10px;
animation: fadeIn 0.3s ease;
}
.blogdetail-share-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.blogdetail-share-btn {
flex: 1;
min-width: 120px;
padding: 10px 15px;
border: none;
border-radius: 8px;
color: white;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
transition: opacity 0.3s ease;
}
.blogdetail-share-btn:hover {
opacity: 0.9;
color: white;
}
.blogdetail-share-btn.facebook { background: #1877f2; }
.blogdetail-share-btn.twitter { background: #1da1f2; }
.blogdetail-share-btn.linkedin { background: #0a66c2; }
.blogdetail-share-btn.whatsapp { background: #25d366; }
/* View All Button */
.view-all-container {
text-align: center;
margin-top: 1.5rem;
}
.view-all-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #4a6ee0;
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
transition: background 0.3s ease;
}
.view-all-btn:hover {
background: #3a56c0;
color: white;
}
/* Back Button */
.back-btn-small {
display: inline-flex;
align-items: center;
gap: 5px;
color: #6b7280;
text-decoration: none;
font-size: 0.875rem;
padding: 5px 10px;
border: 1px solid #e5e7eb;
border-radius: 6px;
transition: all 0.3s ease;
}
.back-btn-small:hover {
background: #f3f4f6;
color: #4b5563;
}
/* Event Image Placeholder */
.blogdetail-image-placeholder,
.event-image-placeholder {
width: 100%;
height: 300px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
border-radius: 10px;
}
.blogdetail-image-placeholder i,
.event-image-placeholder i {
font-size: 4rem;
margin-bottom: 1rem;
}
/* Login Prompt */
.login-prompt {
text-align: center;
padding: 2rem;
background: #fefce8;
border: 1px solid #fde68a;
border-radius: 10px;
}
.login-prompt p {
margin: 0;
color: #92400e;
}
.login-prompt .btn-primary {
background: #4a6ee0;
border: none;
padding: 5px 15px;
font-size: 0.875rem;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Responsive Design */
@media (max-width: 768px) {
.users-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.response-buttons {
flex-direction: column;
}
.blogdetail-share-buttons {
flex-direction: column;
}
.blogdetail-share-btn {
min-width: 100%;
}
}
/* ============================================
EVENTS LISTING PAGE SPECIFIC STYLES
All classes prefixed with 'events-' to avoid conflicts
============================================ */
/* Events Container */
.events-grid {
margin: -5px;
}
.events-grid-card {
padding: 15px;
}
/* Events Card */
.events-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.events-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
/* Events Image */
.events-post-media {
position: relative;
overflow: hidden;
height: 200px;
}
.events-post-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.events-card:hover .events-post-media img {
transform: scale(1.05);
}
/* Date Overlay */
.events-date-overlay {
position: absolute;
top: 15px;
left: 15px;
background: rgba(255, 255, 255, 0.95);
width: 60px;
height: 60px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.events-date-day {
font-size: 20px;
font-weight: 700;
color: #333;
line-height: 1;
}
.events-date-month {
font-size: 12px;
color: #4a6ee0;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Status Badge */
.events-status {
position: absolute;
top: 15px;
right: 15px;
padding: 5px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.events-status-upcoming {
background: #10b981;
color: white;
}
.events-status-ongoing {
background: #f59e0b;
color: white;
}
.events-status-completed {
background: #6b7280;
color: white;
}
/* Events Content */
.events-post-info {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
/* Events Meta */
.events-post-meta {
margin-bottom: 15px;
}
.events-post-meta ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.events-post-meta li {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: #6b7280;
}
.events-post-meta li i {
color: #4a6ee0;
}
.events-post-date {
background: #f8f9fa;
padding: 5px 10px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 8px;
}
.events-post-date strong {
color: #333;
font-size: 18px;
}
.events-post-date span {
color: #6b7280;
font-size: 12px;
}
/* Events Title */
.events-post-title {
margin-bottom: 15px;
}
.events-post-title-text {
font-size: 18px;
font-weight: 600;
line-height: 1.4;
margin: 0;
}
.events-post-title-text a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.events-post-title-text a:hover {
color: #4a6ee0;
}
/* Events Description */
.events-post-text {
margin-bottom: 15px;
flex: 1;
}
.events-post-text p {
color: #6b7280;
font-size: 14px;
line-height: 1.6;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.events-post-text i {
color: #4a6ee0;
}
/* Events Details */
.events-post-details {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding: 10px 0;
border-top: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
}
.events-post-time,
.events-post-price {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: #6b7280;
}
.events-post-time i,
.events-post-price i {
color: #4a6ee0;
}
.events-post-price {
background: #f0f7ff;
padding: 3px 8px;
border-radius: 4px;
color: #4a6ee0;
font-weight: 500;
}
/* Events Read More */
.events-post-readmore {
margin-top: auto;
}
.events-post-readmore .site-button-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #4a6ee0;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
font-size: 14px;
}
.events-post-readmore .site-button-link:hover {
color: #3a56c0;
gap: 12px;
}
/* Events Header */
.events-header {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
}
/* Empty State */
.events-empty-state {
background: #f8f9fa;
border-radius: 15px;
padding: 60px 20px;
margin: 30px 0;
}
.events-empty-state i {
color: #9ca3af;
}
.events-empty-state h3 {
color: #374151;
font-weight: 600;
}
.events-empty-state p {
color: #6b7280;
max-width: 400px;
margin: 0 auto 20px;
}
/* Events Message Container */
.events-message-container {
margin-bottom: 20px;
}
.events-message {
padding: 12px 20px;
border-radius: 8px;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
animation: slideDown 0.3s ease;
}
.events-message-success {
background: #d1fae5;
color: #065f46;
border-left: 4px solid #10b981;
}
.events-message-error {
background: #fee2e2;
color: #991b1b;
border-left: 4px solid #ef4444;
}
.events-message i {
font-size: 20px;
}
/* Events Pagination */
.events-pagination {
margin-top: 40px;
}
/* Animation Keyframes */
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 1199px) {
.events-grid-card {
width: 33.333%;
}
}
@media (max-width: 991px) {
.events-grid-card {
width: 50%;
}
.events-post-media {
height: 180px;
}
}
@media (max-width: 767px) {
.events-header {
flex-direction: column;
gap: 15px;
text-align: center;
}
.events-header .d-flex {
flex-direction: column;
gap: 15px;
width: 100%;
}
.search-box,
.sort-options {
width: 100%;
}
.search-box input {
width: 100%;
}
}
@media (max-width: 575px) {
.events-grid-card {
width: 100%;
}
.events-post-media {
height: 160px;
}
.events-post-title-text {
font-size: 16px;
}
.events-post-meta ul {
flex-direction: column;
gap: 10px;
}
.events-post-details {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
}
/* Portfolio Detail CSS - All prefixed with pd- to avoid conflicts */
/* Base Styles */
.pd-wrapper {
background: #f8f9fa;
}
/* Hero Section */
.pd-hero {
background: linear-gradient(135deg, #4a6ee0 0%, #3a5ecf 100%);
color: white;
padding: 60px 0 40px;
margin-bottom: 40px;
}
.pd-breadcrumb-nav {
margin-bottom: 20px;
}
.pd-breadcrumb {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 10px;
font-size: 0.9rem;
}
.pd-breadcrumb-item a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.pd-breadcrumb-item a:hover {
color: white;
}
.pd-breadcrumb-item.active {
color: white;
opacity: 0.9;
}
.pd-breadcrumb-item::after {
content: "›";
margin-left: 10px;
opacity: 0.7;
}
.pd-breadcrumb-item:last-child::after {
display: none;
}
.pd-header {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.pd-category-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
margin-bottom: 20px;
backdrop-filter: blur(10px);
}
.pd-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.2;
}
.pd-subtitle {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 30px;
}
.pd-meta {
display: flex;
justify-content: center;
align-items: center;
}
.pd-stats {
display: flex;
gap: 30px;
flex-wrap: wrap;
justify-content: center;
}
.pd-stat-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
}
.pd-stat-item i {
color: rgba(255, 255, 255, 0.7);
}
/* Main Container */
.pd-container {
padding-bottom: 60px;
}
/* Gallery Section */
.pd-gallery {
margin-bottom: 40px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.pd-slider {
position: relative;
background: #fff;
}
.pd-slides-container {
position: relative;
overflow: hidden;
border-radius: 12px;
}
.pd-slides {
display: flex;
transition: transform 0.5s ease;
}
.pd-slide {
min-width: 100%;
position: relative;
opacity: 0;
transition: opacity 0.5s ease;
}
.pd-slide.active {
opacity: 1;
}
.pd-slide img {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
}
.pd-image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.pd-slide:hover .pd-image-overlay,
.pd-single-image:hover .pd-image-overlay {
opacity: 1;
}
.pd-fullscreen-btn {
background: rgba(255, 255, 255, 0.9);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
}
.pd-fullscreen-btn:hover {
background: white;
transform: scale(1.1);
color: #4a6ee0;
}
.pd-slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.9);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 0.3s ease;
z-index: 10;
}
.pd-slides-container:hover .pd-slider-btn {
opacity: 1;
}
.pd-prev-btn {
left: 20px;
}
.pd-next-btn {
right: 20px;
}
.pd-slider-btn:hover {
background: white;
transform: translateY(-50%) scale(1.1);
}
.pd-slider-dots {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 10px;
z-index: 10;
}
.pd-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid white;
background: transparent;
cursor: pointer;
opacity: 0.5;
transition: all 0.3s ease;
padding: 0;
}
.pd-dot.active,
.pd-dot:hover {
opacity: 1;
background: white;
transform: scale(1.2);
}
.pd-image-counter {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
}
/* Single Image */
.pd-single-image {
position: relative;
overflow: hidden;
border-radius: 12px;
}
.pd-single-image img {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
}
/* Description */
.pd-description {
background: white;
border-radius: 12px;
padding: 40px;
margin-bottom: 40px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}
.pd-description-content {
line-height: 1.8;
color: #555;
}
.pd-description-content h2,
.pd-description-content h3,
.pd-description-content h4 {
color: #333;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
.pd-description-content p {
margin-bottom: 1rem;
}
.pd-no-content {
color: #6c757d;
font-style: italic;
text-align: center;
padding: 20px;
}
/* Tabs */
.pd-tabs {
background: white;
border-radius: 12px;
margin-bottom: 40px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.pd-nav-tabs {
display: flex;
list-style: none;
padding: 0;
margin: 0;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
}
.pd-nav-item {
flex: 1;
}
.pd-nav-link {
width: 100%;
padding: 20px;
border: none;
background: transparent;
color: #6c757d;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.pd-nav-link:hover {
color: #4a6ee0;
background: rgba(74, 110, 224, 0.05);
}
.pd-nav-link.active {
color: #4a6ee0;
background: white;
}
.pd-nav-link.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 3px;
background: #4a6ee0;
}
.pd-tab-content {
padding: 30px;
}
.pd-tab-pane {
display: none;
}
.pd-tab-pane.active {
display: block;
}
.pd-tab-content-inner {
line-height: 1.8;
color: #555;
}
/* Tags */
.pd-tags {
background: white;
border-radius: 12px;
padding: 30px;
margin-bottom: 40px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}
.pd-section-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
color: #333;
}
.pd-tags-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pd-tag {
background: #e9ecef;
color: #495057;
padding: 6px 15px;
border-radius: 20px;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.pd-tag:hover {
background: #4a6ee0;
color: white;
transform: translateY(-2px);
}
/* Share Section */
.pd-share {
background: white;
border-radius: 12px;
padding: 30px;
margin-bottom: 40px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.pd-share-label {
font-weight: 500;
color: #333;
}
.pd-share-buttons {
display: flex;
gap: 10px;
}
.pd-share-btn {
width: 45px;
height: 45px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
.pd-share-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.pd-facebook { background: #3b5998; }
.pd-twitter { background: #1da1f2; }
.pd-whatsapp { background: #25d366; }
.pd-linkedin { background: #0077b5; }
.pd-copy { background: #6c757d; }
/* Call to Action */
.pd-cta {
background: linear-gradient(135deg, #4a6ee0 0%, #3a5ecf 100%);
border-radius: 12px;
padding: 50px;
margin-bottom: 40px;
text-align: center;
color: white;
box-shadow: 0 5px 20px rgba(74, 110, 224, 0.3);
}
.pd-cta-content h4 {
font-size: 1.75rem;
margin-bottom: 15px;
font-weight: 600;
}
.pd-cta-content p {
opacity: 0.9;
margin-bottom: 25px;
font-size: 1.1rem;
}
.pd-cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: white;
color: #4a6ee0;
padding: 12px 30px;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.pd-cta-btn:hover {
background: #f8f9fa;
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
/* Related Projects */
.pd-related {
background: white;
border-radius: 12px;
padding: 40px;
margin-bottom: 40px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}
.pd-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
flex-wrap: wrap;
gap: 15px;
}
.pd-view-all {
color: #4a6ee0;
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.pd-view-all:hover {
gap: 12px;
color: #3a5ecf;
}
.pd-related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
}
.pd-related-card {
background: #f8f9fa;
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease;
}
.pd-related-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.pd-related-card a {
text-decoration: none;
color: inherit;
display: block;
}
.pd-related-image {
height: 200px;
overflow: hidden;
}
.pd-related-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.pd-related-card:hover .pd-related-image img {
transform: scale(1.05);
}
.pd-related-content {
padding: 20px;
}
.pd-related-content h5 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 10px;
color: #333;
line-height: 1.4;
}
.pd-related-category {
display: inline-block;
background: #e9ecef;
color: #495057;
padding: 4px 12px;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 500;
}
/* Sidebar */
.pd-sidebar {
position: sticky;
top: 20px;
width: 325px;
}
.pd-sidebar-card {
background: white;
border-radius: 12px;
margin-bottom: 25px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.pd-card-header {
padding: 20px;
border-bottom: 1px solid #e9ecef;
background: #f8f9fa;
}
.pd-card-title {
font-size: 1.1rem;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
color: #333;
}
.pd-card-body {
padding: 20px;
}
/* Stats List */
.pd-stats-list {
list-style: none;
padding: 0;
margin: 0;
}
.pd-stats-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #e9ecef;
}
.pd-stats-list li:last-child {
border-bottom: none;
}
.pd-stats-list li i {
color: #4a6ee0;
width: 24px;
}
.pd-stats-list li span {
flex: 1;
margin-left: 10px;
color: #6c757d;
}
.pd-stats-list li strong {
color: #333;
font-weight: 600;
}
/* URL Share */
.pd-input-group {
display: flex;
gap: 10px;
}
.pd-url-input {
flex: 1;
padding: 10px 15px;
border: 1px solid #ced4da;
border-radius: 8px;
font-size: 0.9rem;
background: #f8f9fa;
color: #495057;
}
.pd-copy-btn {
background: #4a6ee0;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
min-width: 45px;
}
.pd-copy-btn:hover {
background: #3a5ecf;
}
/* Social Share */
.pd-social-share {
display: flex;
gap: 10px;
justify-content: center;
}
.pd-social-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
.pd-social-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.pd-fb { background: #3b5998; }
.pd-tw { background: #1da1f2; }
.pd-in { background: #0077b5; }
.pd-wa { background: #25d366; }
.pd-em { background: #6c757d; }
/* Contact Info */
.pd-contact-item {
display: flex;
gap: 15px;
padding: 15px 0;
border-bottom: 1px solid #e9ecef;
align-items: flex-start;
}
.pd-contact-item:last-child {
border-bottom: none;
}
.pd-contact-icon {
width: 40px;
height: 40px;
background: #f8f9fa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #4a6ee0;
flex-shrink: 0;
}
.pd-contact-info p {
margin: 0;
color: #495057;
line-height: 1.5;
}
/* Banner Card */
.pd-banner-card {
background: linear-gradient(135deg, #4a6ee0 0%, #3a5ecf 100%);
color: white;
text-align: center;
padding: 30px;
}
.pd-banner-content i {
font-size: 2.5rem;
margin-bottom: 15px;
opacity: 0.8;
}
.pd-banner-content h4 {
font-size: 1.25rem;
margin-bottom: 10px;
font-weight: 600;
}
.pd-banner-content p {
opacity: 0.9;
margin-bottom: 20px;
}
.pd-banner-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 10px 25px;
border-radius: 30px;
text-decoration: none;
font-weight: 500;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
}
.pd-banner-btn:hover {
background: white;
color: #4a6ee0;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Fullscreen Modal */
.pd-fullscreen-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.95);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 20px;
}
.pd-fullscreen-content {
position: relative;
width: 100%;
max-width: 1200px;
height: 90vh;
}
.pd-close-fullscreen {
position: absolute;
top: -50px;
right: 0;
background: rgba(255, 255, 255, 0.1);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
color: white;
font-size: 1.25rem;
cursor: pointer;
z-index: 100;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.pd-close-fullscreen:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.pd-fullscreen-slider {
width: 100%;
height: 100%;
position: relative;
}
.pd-fullscreen-slider img {
width: 100%;
height: 100%;
object-fit: contain;
display: none;
}
.pd-fullscreen-slider img.active {
display: block;
}
/* Toast Notifications */
.pd-toast {
position: fixed;
bottom: 20px;
right: 20px;
background: white;
border-radius: 8px;
padding: 15px 20px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
transform: translateY(100px);
opacity: 0;
transition: all 0.3s ease;
z-index: 9999;
max-width: 350px;
}
.pd-toast.show {
transform: translateY(0);
opacity: 1;
}
.pd-toast i {
font-size: 1.25rem;
}
.pd-toast-success i {
color: #28a745;
}
.pd-toast-error i {
color: #dc3545;
}
.pd-toast span {
flex: 1;
color: #333;
}
.pd-toast-close {
background: none;
border: none;
color: #6c757d;
font-size: 1.5rem;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.3s ease;
}
.pd-toast-close:hover {
color: #333;
}
/* Responsive Design */
@media (max-width: 992px) {
.pd-hero {
padding: 40px 0 30px;
}
.pd-title {
font-size: 2rem;
}
.pd-slide img,
.pd-single-image img {
height: 400px;
}
.pd-related-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
@media (max-width: 768px) {
.pd-hero {
padding: 30px 0 20px;
}
.pd-title {
font-size: 1.75rem;
}
.pd-subtitle {
font-size: 1rem;
}
.pd-stats {
gap: 20px;
}
.pd-stat-item {
font-size: 0.9rem;
}
.pd-slide img,
.pd-single-image img {
height: 300px;
}
.pd-description,
.pd-tab-content,
.pd-tags,
.pd-share,
.pd-cta,
.pd-related {
padding: 25px;
}
.pd-cta {
padding: 30px;
}
.pd-nav-tabs {
flex-direction: column;
}
.pd-nav-item {
width: 100%;
}
.pd-nav-link {
justify-content: flex-start;
}
.pd-section-header {
flex-direction: column;
align-items: flex-start;
}
.pd-view-all {
align-self: flex-end;
}
.pd-share {
flex-direction: column;
align-items: flex-start;
}
.pd-share-buttons {
width: 100%;
justify-content: center;
}
}
@media (max-width: 576px) {
.pd-title {
font-size: 1.5rem;
}
.pd-category-badge {
font-size: 0.8rem;
padding: 6px 12px;
}
.pd-slide img,
.pd-single-image img {
height: 250px;
}
.pd-description,
.pd-tab-content,
.pd-tags,
.pd-share,
.pd-cta,
.pd-related {
padding: 20px;
}
.pd-cta {
padding: 25px;
}
.pd-cta-content h4 {
font-size: 1.5rem;
}
.pd-related-grid {
grid-template-columns: 1fr;
}
.pd-fullscreen-content {
height: 80vh;
}
}
/* portfolio or part_org list */
/* Portfolio List Page Styling - Consistent with Detail Page */
/* Base Styles */
.page-header {
background: linear-gradient(135deg, #4a6ee0 0%, #3a5ecf 100%);
padding: 40px 0;
color: white;
}
.page-header h1 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 10px;
}
.page-header .lead {
opacity: 0.9;
font-size: 1.1rem;
}
.breadcrumb {
background: transparent;
padding: 0;
margin: 0;
}
.breadcrumb-item a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
}
.breadcrumb-item a:hover {
color: white;
}
.breadcrumb-item.active {
color: white;
opacity: 0.9;
}
.breadcrumb-item + .breadcrumb-item::before {
color: rgba(255, 255, 255, 0.5);
}
/* Filter Tabs */
.filter-tabs-container {
background: white;
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}
.projects-count .badge {
background: linear-gradient(135deg, #4a6ee0 0%, #3a5ecf 100%);
font-size: 0.9rem;
padding: 8px 16px;
border-radius: 20px;
font-weight: 500;
}
#portfolioFilter .nav-pills {
gap: 8px;
}
#portfolioFilter .nav-link {
padding: 8px 20px;
border-radius: 20px;
color: #6c757d;
font-weight: 500;
border: 1px solid transparent;
transition: all 0.3s ease;
}
#portfolioFilter .nav-link:hover {
background: rgba(74, 110, 224, 0.1);
color: #4a6ee0;
border-color: rgba(74, 110, 224, 0.2);
}
#portfolioFilter .nav-link.active {
background: #4a6ee0;
color: white;
border-color: #4a6ee0;
box-shadow: 0 4px 12px rgba(74, 110, 224, 0.3);
}
/* Portfolio List Items */
.portfolio-list-item {
background: white;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
opacity: 0;
transform: translateY(20px);
}
.portfolio-list-item.animate-in {
opacity: 1;
transform: translateY(0);
}
.portfolio-list-item:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
/* Image Carousel */
.portfolio-image-carousel {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
height: 300px;
}
.carousel-container {
border-radius: 10px;
overflow: hidden;
}
.carousel-inner {
border-radius: 10px;
}
.portfolio-list-img {
width: 100%;
height: 300px;
object-fit: cover;
transition: transform 0.5s ease;
}
.carousel-item.active .portfolio-list-img {
transform: scale(1.02);
}
/* Image Overlay */
.image-overlay {
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity 0.3s ease;
}
.image-wrapper:hover .image-overlay {
opacity: 1;
}
.lightbox-btn {
background: rgba(255, 255, 255, 0.9);
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
color: #333;
text-decoration: none;
transition: all 0.3s ease;
}
.lightbox-btn:hover {
background: white;
transform: scale(1.1);
color: #4a6ee0;
}
/* Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: all 0.3s ease;
}
.carousel-control-prev {
left: 15px;
}
.carousel-control-next {
right: 15px;
}
.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next {
opacity: 1;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
background: white;
transform: translateY(-50%) scale(1.1);
}
/* Carousel Indicators */
.carousel-indicators-wrapper {
bottom: 15px;
}
.carousel-indicators {
gap: 8px;
margin-bottom: 0;
}
.carousel-indicators button {
width: 8px;
height: 8px;
border-radius: 50%;
background: transparent;
border: 2px solid white;
opacity: 0.5;
transition: all 0.3s ease;
margin: 0;
}
.carousel-indicators button.active {
opacity: 1;
background: white;
transform: scale(1.2);
}
/* Image Counter */
.image-counter .badge {
background: rgba(0, 0, 0, 0.7);
color: white;
font-size: 0.8rem;
padding: 4px 10px;
border-radius: 15px;
font-weight: 500;
}
/* Project Number */
.project-number .badge {
background: rgba(74, 110, 224, 0.1);
color: #4a6ee0;
font-size: 0.8rem;
padding: 4px 12px;
border-radius: 15px;
font-weight: 600;
}
/* Portfolio Title */
.portfolio-list-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.3;
}
.portfolio-list-title a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.portfolio-list-title a:hover {
color: #4a6ee0;
}
/* Portfolio Description */
.portfolio-list-description p {
color: #666;
line-height: 1.6;
font-size: 0.95rem;
margin-bottom: 15px;
}
/* Action Buttons */
.portfolio-actions .btn {
border-radius: 8px;
padding: 10px 20px;
font-weight: 500;
transition: all 0.3s ease;
border: none;
}
.portfolio-actions .btn-primary {
background: linear-gradient(135deg, #4a6ee0 0%, #3a5ecf 100%);
color: white;
}
.portfolio-actions .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(74, 110, 224, 0.3);
}
.portfolio-actions .btn-success {
background: linear-gradient(135deg, #28a745 0%, #218838 100%);
color: white;
}
.portfolio-actions .btn-success:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
}
/* Divider */
.portfolio-divider {
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* Empty State */
.empty-state {
background: white;
border-radius: 12px;
padding: 50px 20px;
text-align: center;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}
.empty-icon {
color: #dee2e6;
margin-bottom: 20px;
}
.empty-state h4 {
color: #333;
font-weight: 600;
margin-bottom: 10px;
}
.empty-state p {
color: #6c757d;
margin-bottom: 25px;
}
.empty-state .btn {
border-radius: 8px;
padding: 10px 25px;
font-weight: 500;
}
.empty-state .btn-primary {
background: linear-gradient(135deg, #4a6ee0 0%, #3a5ecf 100%);
border: none;
}
.empty-state .btn-outline-primary {
border-color: #4a6ee0;
color: #4a6ee0;
}
.empty-state .btn-outline-primary:hover {
background: #4a6ee0;
color: white;
}
/* Pagination */
.pagination-wrapper {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}
.pagination {
justify-content: center;
gap: 5px;
}
.page-link {
border: none;
background: #f8f9fa;
color: #6c757d;
border-radius: 8px !important;
padding: 8px 16px;
transition: all 0.3s ease;
}
.page-link:hover {
background: rgba(74, 110, 224, 0.1);
color: #4a6ee0;
}
.page-item.active .page-link {
background: linear-gradient(135deg, #4a6ee0 0%, #3a5ecf 100%);
color: white;
border: none;
}
/* Call to Action Section */
.bg-primary.text-white.py-4 {
background: linear-gradient(135deg, #4a6ee0 0%, #3a5ecf 100%);
color: white;
padding: 40px 0;
}
.bg-primary.text-white.py-4 h4 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 10px;
}
.bg-primary.text-white.py-4 p {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 0;
}
.bg-primary.text-white.py-4 .btn {
background: white;
color: #4a6ee0;
border-radius: 8px;
padding: 12px 30px;
font-weight: 600;
transition: all 0.3s ease;
}
.bg-primary.text-white.py-4 .btn:hover {
background: #f8f9fa;
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
/* Lightbox Styles */
.lightbox-container {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.95);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 20px;
}
.lightbox-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.lightbox-content {
position: relative;
width: 100%;
max-width: 1200px;
height: 90vh;
display: flex;
align-items: center;
}
.lightbox-close {
position: absolute;
top: -50px;
right: 0;
background: rgba(255, 255, 255, 0.1);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
color: white;
font-size: 1.25rem;
cursor: pointer;
z-index: 100;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-close:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.lightbox-nav {
background: rgba(255, 255, 255, 0.1);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
color: white;
font-size: 1.25rem;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 100;
}
.lightbox-prev {
left: 20px;
}
.lightbox-next {
right: 20px;
}
.lightbox-nav:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-50%) scale(1.1);
}
.lightbox-image-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.lightbox-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.lightbox-caption {
position: absolute;
bottom: -40px;
left: 0;
right: 0;
text-align: center;
color: white;
font-size: 1rem;
padding: 10px;
}
/* Animation Delay */
.portfolio-list-item:nth-child(1) { transition-delay: 0.05s; }
.portfolio-list-item:nth-child(2) { transition-delay: 0.1s; }
.portfolio-list-item:nth-child(3) { transition-delay: 0.15s; }
.portfolio-list-item:nth-child(4) { transition-delay: 0.2s; }
.portfolio-list-item:nth-child(5) { transition-delay: 0.25s; }
.portfolio-list-item:nth-child(6) { transition-delay: 0.3s; }
/* Responsive Design */
@media (max-width: 992px) {
.portfolio-list-img {
height: 280px;
}
.portfolio-image-carousel {
height: 280px;
}
.portfolio-list-title {
font-size: 1.3rem;
}
.page-header h1 {
font-size: 1.8rem;
}
}
@media (max-width: 768px) {
.portfolio-list-item {
padding: 15px;
}
.portfolio-list-img {
height: 250px;
}
.portfolio-image-carousel {
height: 250px;
margin-bottom: 20px;
}
.portfolio-actions .btn {
padding: 8px 15px;
font-size: 0.9rem;
}
.filter-tabs-container {
flex-direction: column;
gap: 15px;
}
#portfolioFilter .nav-pills {
flex-wrap: wrap;
justify-content: center;
}
.page-header {
padding: 30px 0 !important;
}
.page-header h1 {
font-size: 1.5rem;
}
}
@media (max-width: 576px) {
.portfolio-list-img {
height: 200px;
}
.portfolio-image-carousel {
height: 200px;
}
.portfolio-list-title {
font-size: 1.2rem;
}
.portfolio-list-description p {
font-size: 0.9rem;
}
.portfolio-actions {
flex-direction: column;
gap: 10px !important;
}
.portfolio-actions .btn {
width: 100%;
justify-content: center;
}
.page-header h1 {
font-size: 1.3rem;
}
.page-header .lead {
font-size: 0.95rem;
}
.projects-count .badge {
font-size: 0.8rem;
padding: 6px 12px;
}
#portfolioFilter .nav-link {
padding: 6px 15px;
font-size: 0.85rem;
}
}
/* jobs page */
/* ===========================================
Careers Page Specific Styles
=========================================== */
/* Page Structure */
.page-content.careers-page {
min-height: calc(100vh - 200px);
padding-bottom: 50px;
}
/* Careers Search Box */
.careers-search-box {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
border: 1px solid #eaeaea;
}
.careers-search-box .input-group-text {
background: #f8f9fa;
border-color: #dee2e6;
color: #495057;
}
.careers-search-box .form-control,
.careers-search-box .form-select {
/* color:#0079FC !important; */
border-left: 0 !important;
height: 50px !important;
}
.careers-search-box .form-control:focus,
.careers-search-box .form-select:focus {
/* color:#0079FC !important; */
box-shadow: none;
border-color: #007bff;
}
/* Job Grid Layout */
#job-grid {
min-height: 400px;
}
.row-cols-1.row-cols-md-2 .col {
margin-bottom: 30px;
}
/* Job Cards */
.job-card {
border: 1px solid #eaeaea;
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
background: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.job-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
border-color: #007bff;
}
.job-card-header {
padding: 25px;
background: #f8f9fa;
border-bottom: 1px solid #eaeaea;
}
.job-card-body {
padding: 25px;
flex-grow: 1;
}
.job-card-footer {
padding: 20px 25px;
background: #fafafa;
border-top: 1px solid #eaeaea;
}
/* Company Logo */
.company-logo img {
width: 70px;
height: 70px;
object-fit: contain;
border-radius: 8px;
border: 1px solid #eee;
padding: 5px;
background: white;
}
.logo-placeholder {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-size: 24px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
/* Badges */
.verified-badge {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
font-size: 12px;
padding: 4px 10px;
border-radius: 20px;
font-weight: 500;
}
.tag-badge {
background: #e9ecef;
color: #495057;
font-size: 12px;
padding: 5px 12px;
margin-right: 8px;
margin-bottom: 8px;
border-radius: 20px;
display: inline-block;
transition: all 0.2s ease;
}
.tag-badge:hover {
background: #007bff;
color: white;
transform: translateY(-1px);
}
/* Job Stats */
.stat-item {
padding: 10px 5px;
cursor: default;
transition: all 0.3s ease;
}
.stat-item:hover {
transform: translateY(-2px);
}
.stat-item i {
font-size: 20px;
margin-bottom: 8px;
display: block;
color: #6c757d;
}
.stat-item .small {
font-size: 13px;
font-weight: 500;
color: #495057;
}
/* Pagination Styles */
.pagination-top {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
border: 1px solid #eaeaea;
display: flex;
justify-content: space-between;
align-items: center;
}
.job-count-info h5 {
margin: 0;
color: #333;
font-weight: 600;
}
/* Pagination Components */
.page-link {
color: #495057;
border: 1px solid #dee2e6;
padding: 8px 15px;
font-size: 14px;
border-radius: 5px;
margin: 0 3px;
transition: all 0.3s ease;
}
.page-link:hover {
color: #007bff;
background-color: #f8f9fa;
border-color: #007bff;
transform: translateY(-2px);
}
.page-item.active .page-link {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
color: white;
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}
.page-item.disabled .page-link {
color: #adb5bd;
background-color: #f8f9fa;
border-color: #e9ecef;
opacity: 0.7;
}
/* Form Select Styling */
#perPageSelect {
background-color: white;
border: 1px solid #dee2e6;
color: #495057;
padding: 8px 15px;
font-size: 14px;
border-radius: 5px;
min-width: 130px;
}
#perPageSelect:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* Sidebar Widgets */
.sidebar-widget {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
border: 1px solid #eaeaea;
}
.widget-title {
color: #333;
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #007bff;
position: relative;
}
.widget-title:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 40px;
height: 2px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Recent Jobs List */
.recent-jobs-list .recent-job-item {
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid #eee;
}
.recent-jobs-list .recent-job-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.recent-job-item h6 {
font-size: 14px;
line-height: 1.4;
margin-bottom: 5px;
}
.recent-job-item h6 a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.recent-job-item h6 a:hover {
color: #007bff;
}
/* Form Elements */
.form-check-input:checked {
background-color: #007bff;
border-color: #007bff;
}
.form-check-label {
cursor: pointer;
user-select: none;
color: #495057;
}
/* Deadline Text */
.deadline-text {
font-size: 13px;
font-weight: 500;
}
.deadline-text.text-danger {
color: #dc3545 !important;
}
.deadline-text.text-muted {
color: #6c757d !important;
}
/* Action Buttons */
.action-buttons .btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
padding: 8px 20px;
font-size: 14px;
border-radius: 5px;
transition: all 0.3s ease;
}
.action-buttons .btn-primary:hover {
opacity: 0.9;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
/* Search Results Summary */
.search-results-summary {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 8px;
padding: 20px;
}
.search-results-summary .badge {
font-size: 13px;
padding: 6px 12px;
margin: 0 5px;
border-radius: 20px;
}
/* Empty State */
.empty-state-icon {
opacity: 0.6;
}
.empty-state h3 {
color: #333;
font-weight: 600;
margin-bottom: 15px;
}
.empty-state p {
max-width: 500px;
margin: 0 auto 20px;
color: #6c757d;
}
/* Responsive Design */
@media (max-width: 991px) {
.pagination-top {
flex-direction: column;
gap: 20px;
text-align: center;
}
.job-count-info h5 {
margin-bottom: 15px;
}
.pagination-top .d-flex {
flex-direction: column;
gap: 15px;
width: 100%;
}
.pagination-top nav {
width: 100%;
}
.pagination-top .pagination {
justify-content: center;
flex-wrap: wrap;
}
}
@media (max-width: 768px) {
.job-card {
margin-bottom: 25px;
}
.job-card-footer .d-flex {
flex-direction: column;
gap: 15px;
text-align: center;
}
.deadline-info {
margin-bottom: 10px;
}
.action-buttons {
width: 100%;
}
.action-buttons .btn {
width: 100%;
max-width: 200px;
}
.company-logo {
margin-bottom: 15px;
}
}
@media (max-width: 576px) {
.careers-search-box {
padding: 20px;
}
.job-card-header .d-flex {
flex-direction: column;
align-items: flex-start;
}
.job-card-header .dropdown {
align-self: flex-end;
margin-top: -40px;
margin-bottom: 15px;
}
.job-stats .row {
gap: 15px;
}
.job-stats .col-3 {
flex: 0 0 calc(50% - 15px);
margin-bottom: 15px;
}
.job-tags {
text-align: center;
}
.tag-badge {
margin: 5px;
}
}
/* Animation for Job Cards */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.job-card {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
}
.job-card:nth-child(1) { animation-delay: 0.1s; }
.job-card:nth-child(2) { animation-delay: 0.2s; }
.job-card:nth-child(3) { animation-delay: 0.3s; }
.job-card:nth-child(4) { animation-delay: 0.4s; }
.job-card:nth-child(5) { animation-delay: 0.5s; }
.job-card:nth-child(6) { animation-delay: 0.6s; }
/* Loading State */
.loading-spinner {
display: inline-block;
width: 40px;
height: 40px;
border: 3px solid #f3f3f3;
border-top: 3px solid #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Clear Fix */
.clearfix {
clear: both;
}
/* Utility Classes */
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cursor-pointer {
cursor: pointer;
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.job-card,
.careers-search-box,
.sidebar-widget,
.pagination-top {
background: #2d3748;
border-color: #4a5568;
color: #e2e8f0;
}
.job-card-header {
background: #4a5568;
border-color: #718096;
}
.job-card-footer {
background: #4a5568;
border-color: #718096;
}
.text-dark,
.job-card h5 a,
.recent-job-item h6 a {
color: #e2e8f0 !important;
}
.text-muted {
color: #a0aec0 !important;
}
.form-control,
.form-select,
#perPageSelect {
background: #4a5568;
border-color: #718096;
color: #e2e8f0;
}
.page-link {
background: #4a5568;
border-color: #718096;
color: #e2e8f0;
}
.page-link:hover {
background: #667eea;
border-color: #667eea;
color: white;
}
.search-results-summary {
background: #4a5568;
}
.tag-badge {
background: #718096;
color: #e2e8f0;
}
}
/* ===========================================
Job Details Page Specific Styles
=========================================== */
/* Job Details Page Structure */
.job-details-page .content-inner {
padding-bottom: 50px;
}
/* Job Header Section */
.job-header-section {
border-radius: 10px;
border: 1px solid #eaeaea;
}
.job-header-section .company-logo img {
width: 100px;
height: 100px;
object-fit: contain;
border-radius: 8px;
border: 1px solid #eee;
padding: 8px;
background: white;
}
.job-header-section .logo-placeholder {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
}
.job-header-info h2 {
color: #333;
font-weight: 600;
font-size: 28px;
}
.job-type-badge {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
}
.urgent-badge {
background: linear-gradient(135deg, #ff5e3a 0%, #ff2a68 100%);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
.job-meta span {
color: #666;
font-size: 14px;
}
.job-meta i {
color: #007bff;
width: 16px;
}
.salary-display h3 {
font-weight: 600;
color: #007bff;
}
/* Share Job Section */
.share-job-section {
border-radius: 8px;
border: 1px solid #eaeaea;
}
.social-share {
display: flex;
gap: 10px;
}
.social-btn {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.social-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.social-btn.facebook { background: #3b5998; }
.social-btn.twitter { background: #1da1f2; }
.social-btn.linkedin { background: #0077b5; }
.social-btn.whatsapp { background: #25d366; }
.social-btn.email { background: #ea4335; }
/* Job Details Card */
.job-details-card {
border-radius: 10px;
border: 1px solid #eaeaea;
}
.section-title {
color: #333;
font-weight: 600;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
position: relative;
}
.section-title:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 40px;
height: 2px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.job-content {
color: #555;
line-height: 1.8;
font-size: 16px;
}
.job-content p {
margin-bottom: 15px;
}
.job-content ul,
.job-content ol {
padding-left: 20px;
margin-bottom: 15px;
}
.job-content li {
margin-bottom: 8px;
}
/* Requirements List */
.requirements-list {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
}
.requirement-item {
display: flex;
align-items: flex-start;
margin-bottom: 12px;
padding: 10px;
background: white;
border-radius: 5px;
border-left: 3px solid #28a745;
animation: slideInRight 0.5s ease forwards;
opacity: 0;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.requirement-item i {
margin-top: 3px;
}
.requirement-item span {
flex: 1;
color: #555;
}
/* Job Tags */
.job-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag-badge {
background: #e9ecef;
color: #495057;
padding: 6px 15px;
border-radius: 20px;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid #dee2e6;
}
.tag-badge:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
border-color: transparent;
text-decoration: none;
}
/* Related Jobs */
.related-jobs-section {
border-radius: 10px;
border: 1px solid #eaeaea;
}
.related-job-card {
border: 1px solid #eaeaea;
border-radius: 8px;
padding: 15px;
transition: all 0.3s ease;
background: white;
}
.related-job-card:hover {
transform: translateX(5px);
border-color: #007bff;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.related-job-logo img {
width: 50px;
height: 50px;
object-fit: contain;
border-radius: 5px;
padding: 4px;
border: 1px solid #eee;
background: white;
}
.logo-placeholder-small {
width: 50px;
height: 50px;
background: #f8f9fa;
border-radius: 5px;
}
.related-job-info h6 a {
color: #333;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.related-job-info h6 a:hover {
color: #007bff;
text-decoration: none;
}
/* Sidebar Widgets */
.sidebar-widget {
border-radius: 10px;
border: 1px solid #eaeaea;
}
.widget-title {
color: #333;
font-weight: 600;
padding-bottom: 15px;
border-bottom: 2px solid #eaeaea;
margin-bottom: 20px;
position: relative;
}
.widget-title:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 40px;
height: 2px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Job Overview */
.job-overview-list {
list-style: none;
padding: 0;
margin: 0;
}
.job-overview-list li {
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
}
.job-overview-list li:last-child {
border-bottom: none;
}
.icon-circle {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.job-overview-list small {
color: #888;
font-size: 13px;
display: block;
}
.job-overview-list p {
color: #333;
font-size: 16px;
margin: 5px 0 0;
}
/* Apply CTA */
.apply-cta .btn {
padding: 12px 20px;
font-weight: 500;
border-radius: 5px;
transition: all 0.3s ease;
}
.apply-cta .btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* Company Information */
.company-info .company-logo-large {
max-width: 150px;
max-height: 150px;
object-fit: contain;
margin: 0 auto;
border-radius: 8px;
padding: 10px;
border: 1px solid #eee;
background: white;
}
.company-info h5 {
color: #333;
font-weight: 600;
margin-bottom: 10px;
}
.company-info p {
color: #666;
line-height: 1.6;
}
/* Job Location Map */
.job-location-map {
border-radius: 8px;
overflow: hidden;
}
.map-placeholder {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: 1px solid #dee2e6;
}
.map-placeholder i {
color: #007bff;
}
.map-placeholder h5 {
color: #333;
margin-bottom: 10px;
}
.map-placeholder p {
color: #666;
font-size: 14px;
}
/* Bookmark Button State */
.bookmark-btn.bookmarked {
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
color: white;
border: none;
}
.bookmark-btn.bookmarked:hover {
background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}
/* Responsive Design */
@media (max-width: 991px) {
.job-header-section .d-flex {
flex-direction: column;
align-items: flex-start !important;
}
.job-header-section .company-logo {
margin-bottom: 20px;
}
.job-header-info h2 {
font-size: 24px;
}
}
@media (max-width: 768px) {
.job-header-actions {
text-align: left !important;
}
.share-job-section .d-flex {
flex-direction: column;
align-items: flex-start !important;
gap: 15px;
}
.social-share {
width: 100%;
justify-content: center;
}
.apply-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.apply-section .btn {
width: 100%;
margin: 0 !important;
}
.related-jobs-section .d-flex {
flex-direction: column;
align-items: flex-start !important;
gap: 10px;
}
.related-jobs-section .btn-link {
margin-left: 0 !important;
}
}
@media (max-width: 576px) {
.job-header-section {
padding: 20px !important;
}
.job-header-info h2 {
font-size: 20px;
}
.job-meta {
flex-direction: column;
gap: 5px;
}
.section-title {
font-size: 18px;
}
.job-content {
font-size: 14px;
}
.tag-badge {
font-size: 12px;
padding: 4px 12px;
}
.icon-circle {
width: 35px;
height: 35px;
}
}
/* Animation for Page Load */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.job-header-section,
.share-job-section,
.job-details-card,
.sidebar-widget {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
}
.job-header-section { animation-delay: 0.1s; }
.share-job-section { animation-delay: 0.2s; }
.job-details-card { animation-delay: 0.3s; }
.sidebar-widget:nth-child(1) { animation-delay: 0.4s; }
.sidebar-widget:nth-child(2) { animation-delay: 0.5s; }
.sidebar-widget:nth-child(3) { animation-delay: 0.6s; }
/* Print Styles */
@media print {
.job-header-actions,
.share-job-section,
.social-share,
.apply-section,
.sidebar-widget,
.related-jobs-section {
display: none !important;
}
.job-details-card {
border: none !important;
box-shadow: none !important;
}
.job-content {
font-size: 14px;
}
}
/* Utility Classes for Job Details */
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cursor-pointer {
cursor: pointer;
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.job-header-section,
.share-job-section,
.job-details-card,
.related-jobs-section,
.sidebar-widget {
background: #2d3748;
border-color: #4a5568;
color: #e2e8f0;
}
.job-header-info h2,
.related-job-info h6 a,
.widget-title,
.section-title,
.company-info h5,
.map-placeholder h5 {
color: #e2e8f0 !important;
}
.text-muted,
.job-meta span,
.job-overview-list small,
.company-info p,
.map-placeholder p {
color: #a0aec0 !important;
}
.job-content,
.requirement-item span {
color: #cbd5e0 !important;
}
.requirements-list {
background: #4a5568;
}
.requirement-item {
background: #2d3748;
border-left-color: #48bb78;
}
.tag-badge {
background: #4a5568;
border-color: #718096;
color: #e2e8f0;
}
.related-job-card {
background: #2d3748;
border-color: #4a5568;
}
.related-job-card:hover {
border-color: #667eea;
}
.icon-circle {
background: #4a5568;
}
.map-placeholder {
background: #4a5568;
border-color: #718096;
}
.map-placeholder i {
color: #667eea;
}
}
/* ===========================================
Application Form Page Specific Styles
=========================================== */
/* Application Form Page Structure */
.application-form-page .content-inner {
padding-bottom: 50px;
}
/* Job Application Header */
.job-application-header {
border-radius: 10px;
border: 1px solid #eaeaea;
}
.job-application-header .company-logo img {
width: 80px;
height: 80px;
object-fit: contain;
border-radius: 8px;
border: 1px solid #eee;
padding: 5px;
background: white;
}
.job-application-header .logo-placeholder {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
color: white;
}
.job-header-info h2 {
color: #333;
font-weight: 600;
font-size: 24px;
}
.job-type-badge {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
}
.urgent-badge {
background: linear-gradient(135deg, #ff5e3a 0%, #ff2a68 100%);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
.job-meta span {
color: #666;
font-size: 14px;
}
.job-meta i {
color: #007bff;
width: 16px;
}
.job-salary-info h3 {
font-weight: 600;
color: #007bff;
font-size: 28px;
}
.deadline-info {
color: #666;
font-size: 14px;
}
/* Application Form Container */
.application-form-container {
border-radius: 10px;
border: 1px solid #eaeaea;
}
.form-header h2 {
color: #333;
font-weight: 600;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
.form-header p {
font-size: 16px;
}
/* Form Sections */
.form-section {
padding-bottom: 30px;
border-bottom: 1px solid #eaeaea;
}
.form-section:last-child {
border-bottom: none;
}
.section-title {
color: #333;
font-weight: 600;
font-size: 20px;
padding-bottom: 10px;
position: relative;
}
.section-title:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
.section-title i {
color: #007bff;
}
/* Form Elements */
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: 500;
font-size: 14px;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 15px;
transition: all 0.3s ease;
background: white;
}
.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
outline: none;
}
.form-control.is-valid {
border-color: #28a745;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.is-invalid {
border-color: #dc3545;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.invalid-feedback {
display: none;
width: 100%;
margin-top: 0.25rem;
font-size: 0.875em;
color: #dc3545;
}
.form-control.is-invalid ~ .invalid-feedback {
display: block;
}
/* File Upload Section */
.file-upload-section {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
}
.file-upload-box {
text-align: center;
padding: 30px 20px;
border: 2px dashed #dee2e6;
border-radius: 8px;
background: white;
transition: all 0.3s ease;
}
.file-upload-box:hover {
border-color: #007bff;
background: #f8f9fa;
}
.upload-icon {
font-size: 48px;
color: #007bff;
margin-bottom: 15px;
}
.upload-content h5 {
color: #333;
font-weight: 600;
margin-bottom: 5px;
}
.upload-content p {
color: #666;
font-size: 14px;
}
.upload-button .btn {
padding: 10px 25px;
font-weight: 500;
}
.file-name-display {
padding: 15px;
background: white;
border-radius: 6px;
border: 1px solid #eaeaea;
}
.file-info {
display: flex;
align-items: center;
gap: 15px;
}
.file-info i {
font-size: 24px;
color: #6c757d;
}
.file-info.valid i {
color: #28a745;
}
.file-info.invalid i {
color: #dc3545;
}
.file-name {
font-weight: 500;
color: #333;
display: block;
}
.file-size {
font-size: 12px;
color: #6c757d;
}
.additional-files input {
margin-bottom: 10px;
}
.additional-files small {
display: block;
margin-top: 5px;
}
/* Terms & Agreement */
.terms-agreement {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
}
.form-check {
margin-bottom: 15px;
}
.form-check-input {
margin-right: 10px;
cursor: pointer;
}
.form-check-input:checked {
background-color: #007bff;
border-color: #007bff;
}
.form-check-label {
cursor: pointer;
color: #333;
line-height: 1.5;
}
.form-check-label a {
color: #007bff;
text-decoration: none;
}
.form-check-label a:hover {
text-decoration: underline;
}
/* Submit Section */
.submit-section {
padding-top: 20px;
}
.submit-section .btn {
padding: 15px 30px;
font-weight: 500;
font-size: 16px;
border-radius: 6px;
transition: all 0.3s ease;
}
.submit-section .btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
}
.submit-section .btn-primary:hover {
opacity: 0.9;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}
.submit-section .btn-primary:disabled {
opacity: 0.65;
cursor: not-allowed;
transform: none;
}
.submit-section .btn-outline-secondary:hover {
background: #6c757d;
color: white;
}
/* Sidebar Widgets */
.sidebar-widget {
border-radius: 10px;
border: 1px solid #eaeaea;
}
.widget-title {
color: #333;
font-weight: 600;
font-size: 18px;
padding-bottom: 15px;
border-bottom: 2px solid #eaeaea;
margin-bottom: 20px;
position: relative;
}
.widget-title:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 40px;
height: 2px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.widget-title i {
color: #007bff;
}
/* Application Progress */
.application-progress {
padding: 10px 0;
}
.progress-steps {
display: flex;
flex-direction: column;
gap: 20px;
}
.step-item {
display: flex;
align-items: flex-start;
gap: 15px;
}
.step-circle {
position: relative;
flex-shrink: 0;
}
.step-number {
width: 36px;
height: 36px;
background: #e9ecef;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: #6c757d;
font-size: 14px;
z-index: 1;
position: relative;
}
.step-line {
position: absolute;
top: 36px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: calc(100% + 20px);
background: #e9ecef;
z-index: 0;
}
.step-item:last-child .step-line {
display: none;
}
.step-item.completed .step-number {
background: #28a745;
color: white;
}
.step-item.completed .step-line {
background: #28a745;
}
.step-item.active .step-number {
background: #007bff;
color: white;
animation: pulse-step 2s infinite;
}
@keyframes pulse-step {
0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}
.step-content h6 {
color: #333;
font-weight: 500;
font-size: 14px;
margin-bottom: 5px;
}
.step-content p {
color: #6c757d;
font-size: 13px;
margin: 0;
}
/* Required Documents */
.required-documents {
display: flex;
flex-direction: column;
gap: 15px;
}
.doc-item {
display: flex;
align-items: center;
gap: 15px;
padding: 10px;
background: #f8f9fa;
border-radius: 6px;
border: 1px solid #eaeaea;
}
.doc-icon {
width: 40px;
height: 40px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #6c757d;
border: 2px solid #eaeaea;
}
.doc-icon.completed {
background: #d4edda;
color: #28a745;
border-color: #c3e6cb;
}
.doc-content h6 {
color: #333;
font-weight: 500;
font-size: 14px;
margin-bottom: 5px;
}
.doc-content p {
color: #6c757d;
font-size: 13px;
margin: 0;
}
/* Contact Support */
.contact-support {
display: flex;
flex-direction: column;
gap: 15px;
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
}
.contact-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
flex-shrink: 0;
}
.contact-content h6 {
color: #333;
font-weight: 500;
font-size: 14px;
margin-bottom: 5px;
}
.contact-content a,
.contact-content p {
color: #007bff;
text-decoration: none;
font-size: 13px;
margin: 0;
}
.contact-content a:hover {
text-decoration: underline;
}
/* Job Information & Tips */
.job-information,
.application-tips {
display: flex;
flex-direction: column;
gap: 15px;
}
.info-item,
.tip-item {
display: flex;
align-items: flex-start;
gap: 15px;
}
.info-icon,
.tip-icon {
width: 36px;
height: 36px;
background: #e9ecef;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #007bff;
font-size: 14px;
flex-shrink: 0;
}
.info-content h6 {
color: #6c757d;
font-weight: 500;
font-size: 13px;
margin-bottom: 5px;
}
.info-content p {
color: #333;
font-weight: 500;
font-size: 14px;
margin: 0;
}
.tip-content p {
color: #333;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* Status Messages */
.status-message-container {
margin-bottom: 20px;
}
.status-message {
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.status-success {
background: #d4edda;
border: 1px solid #c3e6cb;
}
.status-error {
background: #f8d7da;
border: 1px solid #f5c6cb;
}
.status-info {
background: #d1ecf1;
border: 1px solid #bee5eb;
}
.status-message .alert {
margin-bottom: 0;
}
/* Summernote Customization */
.note-editor {
border-radius: 6px !important;
border: 1px solid #ddd !important;
}
.note-editor:focus-within {
border-color: #007bff !important;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}
/* Responsive Design */
@media (max-width: 991px) {
.job-application-header .d-flex {
flex-direction: column;
align-items: flex-start !important;
text-align: center;
}
.job-application-header .company-logo {
margin-bottom: 20px;
margin-right: 0 !important;
}
.job-header-info {
text-align: left;
}
.job-salary-info {
text-align: left !important;
margin-top: 20px;
}
.submit-section .d-flex {
flex-direction: column;
}
}
@media (max-width: 768px) {
.application-form-container {
padding: 20px !important;
}
.section-title {
font-size: 18px;
}
.form-control {
font-size: 14px;
padding: 10px 12px;
}
.upload-content h5 {
font-size: 16px;
}
.upload-content p {
font-size: 13px;
}
.sidebar-widget {
padding: 20px !important;
}
.widget-title {
font-size: 16px;
}
}
@media (max-width: 576px) {
.job-header-info h2 {
font-size: 20px;
}
.job-type-badge,
.urgent-badge {
font-size: 12px;
padding: 4px 10px;
}
.job-meta {
flex-direction: column;
gap: 10px;
}
.form-header h2 {
font-size: 22px;
}
.step-item {
gap: 12px;
}
.step-number {
width: 30px;
height: 30px;
font-size: 12px;
}
.step-content h6 {
font-size: 13px;
}
}
/* Animation for Form Sections */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-section,
.sidebar-widget {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
}
.form-section:nth-child(1) { animation-delay: 0.1s; }
.form-section:nth-child(2) { animation-delay: 0.2s; }
.form-section:nth-child(3) { animation-delay: 0.3s; }
.form-section:nth-child(4) { animation-delay: 0.4s; }
.sidebar-widget:nth-child(1) { animation-delay: 0.5s; }
.sidebar-widget:nth-child(2) { animation-delay: 0.6s; }
.sidebar-widget:nth-child(3) { animation-delay: 0.7s; }
/* Print Styles */
@media print {
.sidebar-widget,
.submit-section,
.status-message-container {
display: none !important;
}
.application-form-container {
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.form-control {
background: none !important;
border: 1px solid #000 !important;
color: #000 !important;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.job-application-header,
.application-form-container,
.sidebar-widget {
background: #2d3748;
border-color: #4a5568;
color: #e2e8f0;
}
.job-header-info h2,
.section-title,
.form-header h2,
.widget-title,
.upload-content h5,
.info-content p,
.tip-content p,
.file-name,
.form-label,
.form-check-label {
color: #e2e8f0 !important;
}
.text-muted,
.job-meta span,
.deadline-info,
.upload-content p,
.additional-files small,
.doc-content p,
.step-content p,
.contact-content p,
.info-content h6 {
color: #a0aec0 !important;
}
.form-control {
background: #4a5568;
border-color: #718096;
color: #e2e8f0;
}
.form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
.file-upload-box,
.terms-agreement,
.file-name-display {
background: #4a5568;
border-color: #718096;
}
.doc-item,
.step-number {
background: #4a5568;
border-color: #718096;
}
.step-number {
color: #a0aec0;
}
.step-item.completed .step-number {
background: #38a169;
color: white;
}
.step-item.active .step-number {
background: #667eea;
color: white;
}
.doc-icon {
background: #4a5568;
border-color: #718096;
color: #a0aec0;
}
.contact-icon {
background: #667eea;
}
.info-icon,
.tip-icon {
background: #4a5568;
color: #a0aec0;
}
}
/* ===========================================
Thank You / Confirmation Page Specific Styles
=========================================== */
/* Thank You Page Structure */
.application-thankyou-page .content-inner {
padding-bottom: 50px;
}
/* Success Header */
.success-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 60px 30px;
border-radius: 10px;
margin-bottom: 40px;
position: relative;
overflow: hidden;
}
.success-icon {
font-size: 80px;
margin-bottom: 20px;
animation: bounce 2s ease infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
.success-title {
font-size: 42px;
font-weight: 700;
margin-bottom: 15px;
}
.success-subtitle {
font-size: 20px;
opacity: 0.9;
max-width: 800px;
margin: 0 auto;
}
.success-subtitle strong {
color: #ffcc00;
}
/* Thank You Cards */
.thankyou-card {
border-radius: 10px;
border: 1px solid #eaeaea;
margin-bottom: 30px;
}
.thankyou-card:last-child {
margin-bottom: 0;
}
.card-title {
color: #333;
font-weight: 600;
font-size: 22px;
padding-bottom: 15px;
border-bottom: 2px solid #eaeaea;
position: relative;
}
.card-title:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 40px;
height: 2px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-title i {
color: #007bff;
}
/* Application Summary */
.application-summary {
background: #f8f9fa;
padding: 25px;
border-radius: 8px;
margin-top: 20px;
}
.summary-item {
background: white;
padding: 15px;
border-radius: 8px;
border: 1px solid #eaeaea;
height: 100%;
}
.summary-label {
color: #666;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
display: flex;
align-items: center;
}
.summary-label i {
color: #007bff;
font-size: 16px;
width: 20px;
}
.summary-value {
color: #333;
font-size: 18px;
font-weight: 600;
}
.application-id {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 8px 20px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
}
/* Process Timeline */
.process-timeline {
position: relative;
padding-left: 30px;
margin-top: 20px;
}
.process-timeline:before {
content: '';
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, #667eea, #764ba2);
}
.timeline-step {
position: relative;
margin-bottom: 30px;
display: flex;
align-items: flex-start;
}
.timeline-step:last-child {
margin-bottom: 0;
}
.step-indicator {
position: absolute;
left: -35px;
top: 0;
z-index: 1;
}
.step-number {
width: 40px;
height: 40px;
background: white;
border: 3px solid #007bff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #007bff;
font-size: 16px;
box-shadow: 0 3px 10px rgba(0, 123, 255, 0.2);
}
.timeline-step.animated .step-number {
animation: pulse-step 1.5s infinite;
}
@keyframes pulse-step {
0% {
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
transform: scale(1);
}
70% {
box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
transform: scale(1.05);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
transform: scale(1);
}
}
.step-content {
flex: 1;
padding-left: 20px;
}
.step-title {
color: #333;
font-weight: 600;
font-size: 18px;
margin-bottom: 8px;
}
.step-description {
color: #666;
line-height: 1.6;
margin-bottom: 10px;
}
.step-meta {
display: flex;
align-items: center;
color: #007bff;
font-size: 14px;
font-weight: 500;
}
.step-meta i {
margin-right: 5px;
}
/* Info Alerts */
.info-alerts {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 20px;
}
.alert {
border-radius: 8px;
border: none;
padding: 20px;
}
.alert-info {
background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
border-left: 4px solid #17a2b8;
}
.alert-warning {
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
border-left: 4px solid #ffc107;
}
.alert-light {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-left: 4px solid #6c757d;
}
.alert-secondary {
background: linear-gradient(135deg, #e2e3e5 0%, #d6d8db 100%);
border: none;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.alert-icon {
font-size: 24px;
color: inherit;
margin-right: 15px;
flex-shrink: 0;
}
.alert-content {
flex: 1;
}
.alert-content h5 {
color: inherit;
font-weight: 600;
margin-bottom: 5px;
font-size: 16px;
}
.alert-content p {
color: inherit;
opacity: 0.9;
margin-bottom: 0;
font-size: 14px;
}
.alert-link {
color: inherit;
text-decoration: underline;
font-weight: 500;
}
.alert-link:hover {
opacity: 0.8;
}
/* Download Receipt */
.receipt-icon {
color: #28a745;
}
/* Quick Actions */
.quick-actions {
display: flex;
flex-direction: column;
gap: 15px;
}
.action-link {
display: flex;
align-items: center;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
border: 1px solid #eaeaea;
}
.action-link:hover {
background: white;
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
text-decoration: none;
color: #333;
}
.action-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
flex-shrink: 0;
margin-right: 15px;
}
.action-content {
flex: 1;
}
.action-content h6 {
font-weight: 600;
margin-bottom: 5px;
color: #333;
}
.action-content p {
color: #666;
font-size: 14px;
margin-bottom: 0;
}
.action-arrow {
color: #007bff;
font-size: 18px;
opacity: 0.5;
transition: opacity 0.3s ease;
}
.action-link:hover .action-arrow {
opacity: 1;
}
/* Social Sharing */
.social-sharing {
display: flex;
flex-direction: column;
gap: 10px;
}
.social-share-btn {
display: flex;
align-items: center;
padding: 12px 15px;
border-radius: 8px;
text-decoration: none;
color: white;
font-weight: 500;
transition: all 0.3s ease;
}
.social-share-btn i {
font-size: 18px;
margin-right: 10px;
width: 24px;
text-align: center;
}
.social-share-btn span {
flex: 1;
}
.social-share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
text-decoration: none;
color: white;
}
.social-share-btn.facebook {
background: linear-gradient(135deg, #3b5998 0%, #2d4373 100%);
}
.social-share-btn.twitter {
background: linear-gradient(135deg, #1da1f2 0%, #0c85d0 100%);
}
.social-share-btn.linkedin {
background: linear-gradient(135deg, #0077b5 0%, #005582 100%);
}
.social-share-btn.whatsapp {
background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}
.social-share-btn.email {
background: linear-gradient(135deg, #ea4335 0%, #c23321 100%);
}
/* Confetti Animation */
.confetti-particle {
position: fixed;
width: 10px;
height: 10px;
background: #007bff;
top: -20px;
opacity: 0.8;
animation: fall 5s linear infinite;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
}
@keyframes fall {
0% {
transform: translateY(0) rotate(0deg) scale(1);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(720deg) scale(0);
opacity: 0;
}
}
/* Countdown Timer */
#countdown {
font-weight: 700;
color: #007bff;
}
/* Responsive Design */
@media (max-width: 991px) {
.success-title {
font-size: 32px;
}
.success-subtitle {
font-size: 18px;
}
.process-timeline {
padding-left: 25px;
}
.step-indicator {
left: -30px;
}
.step-number {
width: 35px;
height: 35px;
font-size: 14px;
}
}
@media (max-width: 768px) {
.success-header {
padding: 40px 20px;
}
.success-icon {
font-size: 60px;
}
.success-title {
font-size: 28px;
}
.success-subtitle {
font-size: 16px;
}
.application-summary {
padding: 15px;
}
.summary-value {
font-size: 16px;
}
.card-title {
font-size: 20px;
}
.step-title {
font-size: 16px;
}
.step-description {
font-size: 14px;
}
.social-share-btn {
font-size: 14px;
padding: 10px 12px;
}
}
@media (max-width: 576px) {
.process-timeline {
padding-left: 20px;
}
.step-indicator {
left: -25px;
}
.step-number {
width: 30px;
height: 30px;
font-size: 12px;
}
.step-content {
padding-left: 15px;
}
}
/* ===========================================
FAQ Page Specific Styles
=========================================== */
/* FAQ Page Structure */
.faq-page .content-inner {
padding-bottom: 50px;
}
/* FAQ Header */
.faq-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 40px;
border-radius: 10px;
margin-bottom: 40px;
}
.faq-header h2 {
color: #333;
font-weight: 600;
font-size: 32px;
}
.faq-header .lead {
font-size: 18px;
max-width: 600px;
margin: 0 auto;
}
/* FAQ Search */
.faq-search {
max-width: 600px;
margin: 0 auto;
}
.faq-search .input-group {
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}
.faq-search .input-group-text {
background: white;
border: none;
color: #6c757d;
padding-left: 20px;
}
.faq-search .form-control {
border: none;
padding: 15px;
font-size: 16px;
}
.faq-search .form-control:focus {
box-shadow: none;
outline: none;
}
.faq-search .btn {
padding: 15px 30px;
font-weight: 500;
border-radius: 0 8px 8px 0;
}
/* FAQ Categories Sidebar */
.faq-categories-sidebar {
border-radius: 10px;
border: 1px solid #eaeaea;
position: sticky;
top: 100px;
z-index: 100;
}
.sidebar-title {
color: #333;
font-weight: 600;
font-size: 18px;
padding-bottom: 15px;
border-bottom: 2px solid #eaeaea;
position: relative;
}
.sidebar-title:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 40px;
height: 2px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.sidebar-title i {
color: #007bff;
}
.categories-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.category-item {
display: flex;
align-items: center;
padding: 15px;
border: 1px solid #eaeaea;
border-radius: 8px;
background: white;
transition: all 0.3s ease;
text-align: left;
width: 100%;
cursor: pointer;
}
.category-item:hover {
border-color: #007bff;
background: #f8f9fa;
transform: translateX(5px);
}
.category-item.active {
border-color: #007bff;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}
.category-item.active .category-icon {
background: white;
color: #007bff;
}
.category-item.active .category-content h6 {
color: white;
}
.category-item.active .category-content .category-count {
color: rgba(255, 255, 255, 0.8);
}
.category-icon {
width: 50px;
height: 50px;
background: #f8f9fa;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #007bff;
font-size: 20px;
margin-right: 15px;
flex-shrink: 0;
transition: all 0.3s ease;
}
.category-content {
flex: 1;
}
.category-content h6 {
color: #333;
font-weight: 600;
font-size: 16px;
margin-bottom: 5px;
transition: color 0.3s ease;
}
.category-count {
color: #6c757d;
font-size: 12px;
font-weight: 500;
transition: color 0.3s ease;
}
.help-section {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
}
.help-section h6 {
color: #333;
font-weight: 600;
font-size: 16px;
}
.help-section i {
color: #007bff;
}
/* Category Header */
.category-header {
padding-bottom: 20px;
border-bottom: 2px solid #eaeaea;
}
.category-icon-large {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 30px;
}
.category-header h3 {
color: #333;
font-weight: 600;
font-size: 28px;
}
/* FAQ Accordion */
.faq-accordion {
margin-top: 20px;
}
.accordion-item {
border: 1px solid #eaeaea;
border-radius: 8px;
margin-bottom: 15px;
overflow: hidden;
background: white;
transition: all 0.3s ease;
}
.accordion-item:hover {
border-color: #007bff;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.accordion-button {
padding: 25px;
background: white;
color: #333;
font-weight: 500;
font-size: 17px;
border: none;
width: 100%;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.accordion-button:not(.collapsed) {
background: #f8f9fa;
color: #007bff;
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
border-color: #007bff;
}
.accordion-button:hover {
background: #f8f9fa;
}
.accordion-button::after {
display: none;
}
.question-content {
display: flex;
align-items: flex-start;
gap: 15px;
flex: 1;
}
.question-number {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
flex-shrink: 0;
}
.question-text {
flex: 1;
line-height: 1.5;
padding-right: 20px;
}
.accordion-icon {
color: #007bff;
font-size: 14px;
transition: transform 0.3s ease;
}
.accordion-button:not(.collapsed) .accordion-icon {
transform: rotate(180deg);
}
.accordion-collapse {
border-top: 1px solid #eaeaea;
}
.accordion-body {
padding: 25px;
}
.answer-content {
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #28a745;
}
.answer-label {
display: flex;
align-items: center;
margin-bottom: 15px;
color: #333;
font-weight: 600;
font-size: 16px;
}
.answer-label i {
font-size: 18px;
}
.answer-text {
color: #555;
line-height: 1.8;
font-size: 16px;
}
/* FAQ Helpful Section */
.faq-helpful {
font-size: 14px;
}
.helpful-buttons .btn {
padding: 8px 20px;
font-size: 14px;
font-weight: 500;
border-radius: 20px;
}
.thank-you-msg {
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
/* Search Highlight */
.search-highlight {
background: #fff3cd;
padding: 2px 4px;
border-radius: 3px;
font-weight: 600;
color: #856404;
}
/* No Results Message */
.no-results-message,
.empty-state {
padding: 40px;
background: #f8f9fa;
border-radius: 10px;
border: 1px dashed #dee2e6;
}
.no-results-icon,
.empty-icon {
opacity: 0.6;
}
.no-results-message h4,
.empty-state h4 {
color: #333;
font-weight: 600;
}
/* Contact CTA */
.contact-cta {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
}
.contact-cta h4 {
color: white;
font-weight: 600;
}
.contact-cta p {
color: rgba(255, 255, 255, 0.9);
}
.contact-cta .btn {
background: white;
color: #667eea;
border: none;
font-weight: 600;
}
.contact-cta .btn:hover {
background: #f8f9fa;
transform: translateY(-2px);
}
/* Animation for FAQ Items */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
}
.accordion-item:nth-child(1) { animation-delay: 0.1s; }
.accordion-item:nth-child(2) { animation-delay: 0.2s; }
.accordion-item:nth-child(3) { animation-delay: 0.3s; }
.accordion-item:nth-child(4) { animation-delay: 0.4s; }
.accordion-item:nth-child(5) { animation-delay: 0.5s; }
.accordion-item:nth-child(6) { animation-delay: 0.6s; }
.accordion-item:nth-child(7) { animation-delay: 0.7s; }
.accordion-item:nth-child(8) { animation-delay: 0.8s; }
/* Responsive Design */
@media (max-width: 991px) {
.faq-categories-sidebar {
position: static;
margin-bottom: 30px;
}
.category-header h3 {
font-size: 24px;
}
.accordion-button {
padding: 20px;
font-size: 16px;
}
.question-number {
width: 35px;
height: 35px;
font-size: 13px;
}
}
@media (max-width: 768px) {
.faq-header {
padding: 30px 20px;
}
.faq-header h2 {
font-size: 28px;
}
.faq-header .lead {
font-size: 16px;
}
.category-header {
flex-direction: column;
text-align: center;
gap: 20px;
}
.category-icon-large {
margin: 0 auto;
}
.question-content {
flex-direction: column;
gap: 10px;
}
.question-number {
align-self: flex-start;
}
.contact-cta .row {
flex-direction: column;
text-align: center;
gap: 20px;
}
.contact-cta .text-lg-end {
text-align: center !important;
}
}
@media (max-width: 576px) {
.accordion-button {
padding: 15px;
font-size: 15px;
}
.accordion-body {
padding: 20px;
}
.answer-content {
padding: 15px;
}
.answer-text {
font-size: 15px;
}
.helpful-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
.helpful-buttons .btn {
width: 100%;
}
}
/* Print Styles */
@media print {
.faq-categories-sidebar,
.faq-search,
.help-section,
.faq-helpful,
.contact-cta {
display: none !important;
}
.accordion-button {
background: none !important;
color: #000 !important;
font-weight: bold;
}
.accordion-collapse.collapse:not(.show) {
display: block !important;
}
.accordion-body {
display: block !important;
padding: 10px 0 !important;
}
.answer-content {
background: none !important;
border-left: none !important;
padding: 0 !important;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.faq-header {
background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
}
.faq-header h2,
.faq-header .lead {
color: #e2e8f0;
}
.faq-search .input-group-text {
background: #4a5568;
border-color: #718096;
color: #e2e8f0;
}
.faq-search .form-control {
background: #4a5568;
border-color: #718096;
color: #e2e8f0;
}
.faq-categories-sidebar,
.accordion-item,
.category-item,
.help-section,
.contact-cta {
background: #2d3748;
border-color: #4a5568;
color: #e2e8f0;
}
.sidebar-title,
.category-content h6,
.help-section h6,
.category-header h3,
.accordion-button,
.answer-label,
.contact-cta h4 {
color: #e2e8f0 !important;
}
.text-muted,
.category-count,
.contact-cta p,
.answer-text {
color: #a0aec0 !important;
}
.category-item:hover,
.accordion-button:hover {
background: #4a5568;
}
.category-item.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.answer-content {
background: #4a5568;
border-left-color: #48bb78;
}
.no-results-message,
.empty-state {
background: #4a5568;
border-color: #718096;
}
}