/*
Template Name: Flower
*/
/*
Table Of Content
1. header top area
2. main menu area
3. slider area
4. video slider area
5. breadcum area
6. video slider area
7. feature area
8. shop area
9. testimonial area
10. offer area
11. choose area
12. brand area
13. call to action
14. pricing area
15. team area
16. contact service
17. contact area
18. faq area
19. map area
20. blog area
21. subscribe area
22. img area
23. footer area
*/
/* ======= site font family ==========*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200..900&family=Roboto:wght@400;500;700;900&display=swap');
:root{
--blackc: #000;
--whitec: #fff;
--bgcolor: #333333;
--brcolor: #673ab7;
--paracolor: #555;
--titlecolor: #333;
}
/* defult css */
body{
font-size: 16px;
font-weight: 400;
line-height: 1.6;
font-family: "Roboto", sans-serif;
color: var(--paracolor);
}
h1,h2,h3,h4,h5,h6,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
font-size: 20px;
font-weight: 700;
color: var(--titlecolor);
line-height: 1.2;
font-family: "Roboto Slab", serif;
padding: 0;
margin-bottom: 10px;
}
h1{
font-size: 30px;
}
h2{
font-size: 22px;
}
h3{
font-size: 20px;
}
h4{
font-size: 18px;
}
h5{
font-size: 16px;
}
h6{
font-size: 15px;
}
a{
font-size: 15px;
font-weight: 500;
text-decoration: none !important;
color: var(--blackc);
transition: .5s;
}
a:hover{
color: var(--brcolor);
}
/* highlight color css */
.highlight{
color: var(--brcolor);
}
/*======= header top area start =====*/
.header_top_area {
padding: 10px 115px;
background-color: var(--brcolor);
}
/* header left */
.header_left span, .header_right span, .header_left a{
font-size: 15px;
font-weight: 500;
color: var(--whitec);
}
.header_left span, .header_left a {
margin: 0 22px 0 0;
}
.header_left span i,
.header_left a i{
color: var(--whitec);
margin-right: 6px;
}
/* header top middle css */
.header_top_middle{
text-align: center;
}
/* header right */
.header_right a {
font-size: 15px;
font-weight: 600;
margin-left: 12px;
color: var(--whitec);
}
.header_right a:hover{
color: var(--brcolor);
}
.header_right span i{
margin-right: 5px;
}
/*======= header top area end ======*/
/*======= home 2 menu top start ======*/
.h2_menu_top {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 0 0;
z-index: 11;
}
.menu_top_border {
align-items: center;
border-bottom: 1px dashed var(--bgcolor);
}
.h2_top_menu_icons a{
display: inline-block;
height: 42px;
width: 42px;
text-align: center;
line-height: 42px;
background-color: #ffffff5e;
color: var(--brcolor);
font-size: 17px;
font-weight: bold;
border-radius: 30px;
box-shadow: 0 0 65px 0 #00000029;
}
.h2_top_menu_icons a:hover{
background-color: var(--brcolor);
color: var(--whitec);
}
.h2_menu_top .site_logo_area{
margin: 0 0;
}
/*======= home 2 menu top end ======*/
/*======= main menu area start =======*/
.main_menu_area {
padding: 0px 115px;
}
.main_menu_area.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
background: rgb(0 0 0 / 70%);
}
.main_menu_area .sticky_logo{
display: none;
}
.main_menu_area.sticky .main_logo{
display: none;
}
.main_menu_area.sticky .sticky_logo{
display: block;
}
.main_menu_area.sticky .inner_main_nav_area >ul >li >a{
color: var(--whitec);
}
.main_menu_area.sticky .inner_main_nav_area >ul >li >a:hover{
color: var(--brcolor);
}
.main_menu_area.sticky .inner_main_nav_area >ul >li >a i{
color: var(--whitec);
}
.main_menu_area.sticky .main_nav_icons >i{
color: var(--whitec);
}
.main_menu_area.sticky .main_nav_right_text h3,
.main_menu_area.sticky .main_nav_right_text h3 a{
color: var(--whitec);
}
.site_logo_area{
margin-right: 15px;
}
/* main nav area css */
.main_nav_area {
display: flex;
align-items: center;
justify-content: space-between;
}
.main_menu_all_item {
position: relative;
align-items: center;
}
/* inner main nav area css */
.inner_main_nav_area ul {
list-style: none;
margin: 0;
padding: 0;
}
.inner_main_nav_area >ul >li {
display: inline-block;
position: relative;
}
.inner_main_nav_area >ul >li >a {
display: inline-block;
margin: 35px 18px;
font-size: 16px;
font-weight: 500;
}
.inner_main_nav_area >ul >li >a>i {
font-size: 14px;
font-weight: 700;
margin-left: 5px;
}
.inner_main_nav_area >ul> li> a:hover{
color: var(--brcolor);
}
/* main nav icons together */
.main_nav_right_together {
display: flex;
align-items: center;
}
/* drop down menu css */
.inner_main_nav_area ul li .sub_menu{
position: absolute;
top: 130%;
left: 0;
width: 200px;
text-align: left;
margin: 0;
padding: 15px 5px 14px;
z-index: 9999;
box-shadow: 0 0 30px rgb(0 0 0 / 9%);
background-color: var(--whitec);
opacity: 0;
visibility: hidden;
transition: .5s;
}
.inner_main_nav_area ul li .sub_menu li{
position: relative;
}
.inner_main_nav_area ul li .sub_menu li a {
display: inline-block;
font-size: 15px;
padding: 8px 17px;
}
.inner_main_nav_area ul li .sub_menu li a:hover{
color: var(--brcolor);
margin-left: 5px;
}
.inner_main_nav_area >ul >li:hover .sub_menu{
top: 100%;
opacity: 1;
visibility: visible;
}
.inner_main_nav_area .sub_menu >li > ul.sub_menu{
top: 130%;
left: 100%;
opacity: 0;
visibility: hidden;
transition: .5s;
}
.inner_main_nav_area ul li .sub_menu li:hover ul.sub_menu{
top: 0;
opacity: 1;
visibility: visible;
}
/* main menu socail css */
.main_menu_socail a{
display: inline-block;
font-size: 22px;
height: 35px;
line-height: 35px;
margin: 0 3px;
width: 35px;
border-radius: 100%;
text-align: center;
background-color: var(--brcolor);
color: var(--whitec);
}
.main_menu_socail a:hover{
background-color: var(--bgcolor);
color: var(--whitec);
}
/* main nav icons together */
.gogrin_right_area {
display: flex;
align-items: center;
}
.main_nav_icons_together {
display: flex;
align-items: center;
}
/* main nav icons */
.main_nav_icons {
margin-left: 10px;
}
.main_nav_icons >i {
display: inline-block;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 100%;
background-color: var(--brcolor);
color: var(--whitec);
font-size: 17px;
cursor: pointer;
transition: .5s;
}
.main_nav_icons >i:hover{
background-color: var(--bgcolor);
color: var(--whitec);
}
/* nav icon popup css */
.nav_icon_popup {
position: fixed;
top: -110%;
left: 0%;
background: #000000f0;
display: flex;
align-items: center;
width: 100%;
height: 100%;
z-index: 999;
opacity: 0;
visibility: hidden;
transition: 1s;
}
.nav_icon_popup.icon_popup {
opacity: 1;
visibility: visible;
top: 0;
}
/* inner nav icon popup */
.inner_nav_icon_popup {
width: 47%;
margin: 0 auto;
position: relative;
}
.inner_nav_icon_popup input{
font-size: 30px;
font-weight: 500;
padding: 17px 40px 15px 15px;
width: 100%;
border: none;
outline: none;
box-shadow: 0px 0px 30px 0px #dddddd45;
background: var(--whitec);
border-radius: 10px;
}
.inner_nav_icon_popup input::placeholder{
font-size: 30px;
}
/* inner nav popup form icons css */
.inner_nav_popup_form_icons {
position: absolute;
top: 35%;
right: 10px;
transform: translateY(-50%);
}
.inner_nav_popup_btnicon{
font-size: 40px;
border: none;
outline: none;
background: none;
}
.inner_nav_icon_popup i{
display: inline-block;
margin-top: 10px;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 100%;
background-color: var(--whitec);
color: var(--blackc);
font-size: 25px;
cursor: pointer;
transition: 1s;
}
/* main nav icons middle css */
.main_nav_icons_middle {
margin-left: 18px;
position: relative;
}
.main_nav_icons_middle a {
position: relative;
font-size: 20px;
cursor: pointer;
padding: 8px;
display: inline-flex;
background: var(--whitec);
box-shadow: 0 0 5px #64333338;
border-radius: 100%;
}
.main_nav_icons_middle a span {
position: absolute;
top: 0;
right: -5px;
width: 18px;
height: 20px;
font-size: 12px;
line-height: 20px;
text-align: center;
background-color: var(--brcolor);
border-radius: 100%;
color: var(--whitec);
}
.main_nav_middle_box_item {
overflow: scroll;
position: absolute;
right: 0;
top: 130%;
width: 300px;
height: 300px;
z-index: 999;
opacity: 0;
visibility: hidden;
background-color: var(--whitec);
transition: .5s;
}
.main_nav_icons_middle:hover .main_nav_middle_box_item{
top: 180%;
opacity: 1;
visibility: visible;
}
.main_nav_middle_box_item p{
padding: 20px;
}
/* main nav btn css */
.main_nav_btn {
margin-left: 20px;
}
.main_nav_btn a {
display: inline-block;
font-size: 16px;
padding: 11px 25px;
background-color: var(--brcolor);
color: var(--whitec);
}
.main_nav_btn a:hover{
background-color: var(--bgcolor);
color: var(--whitec);
}
/* absolute menu css */
.absolute_menu {
position: absolute;
left: 0;
right: 0;
z-index: 999;
background: transparent;
padding: 0 115px;
border: none;
}
.h2_main_menu{
top: 90px;
}
.h2_main_menu .main_nav_area{
justify-content: center;
}
/*======== main menu area end ==========*/
/*======== mobile menu area start ==========*/
.mobile_logo_area{
padding: 20px 0;
display: none !important;
}
.mean-container a.meanmenu-reveal {
display: none !important;
}
.mean-container .mean-nav > ul {
padding: 0;
margin: 0;
width: 100%;
list-style-type: none;
display: block !important;
}
.mean-container .mean-bar {
background: var(--whitec);
padding: 0;
}
.mean-container .mean-nav ul li {
border-top: 0px solid #ddd;
}
.mean-container .mean-nav ul li li a,
.mean-container .mean-nav ul li a {
color: #444;
}
.mean-container .mean-nav ul li li a {
border-top: 1px solid #ddd;
}
.mean-container .mean-nav ul li a:hover {
color: #ff4a17;
}
.mobile_p {
position: fixed;
right: 0;
width: 300px;
padding: 80px 20px 0px;
overflow-y: scroll;
top: 0;
height: 100%;
z-index: 9999;
display: block;
transition: 0.5s all;
box-shadow: 0 0 30px rgb(0 0 0 / 7%);
transform: translateX(100%);
background: var(--whitec);
}
.tx-s-open {
transform: translateX(0);
}
.mobile_p .tuetion_theme_widget > div.widget_block {
padding: 0;
}
.mobile_p .tuetion_theme_widget > div {
padding: 20px 0px 20px;
box-shadow: none;
}
.mean-container .mean-nav ul li a {
border: 0;
width: 100%;
border-top: 1px solid #ddd;
font-size: 14px;
padding: 12px 5px;
font-weight: 500;
display: block;
}
.mean-container .mean-nav ul li a.mean-expand {
width: auto;
}
.mobile_opicon {
text-align: right;
padding: 4px 0;
}
.mean-container .mean-nav > ul > li:first-child > a {
border-top: 0;
}
.mobilemenu_con {
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile_menu_o i {
font-size: 26px;
}
.mobile_menu_content .mobile_menu_logo {
margin-bottom: 20px;
}
.mobile_cicon {
position: absolute;
right: 30px;
top: 50px;
}
.mobile_overlay {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 0;
z-index: 999;
width: 100vw;
height: 100vh;
visibility: hidden;
position: fixed;
background: rgba(0, 0, 0, 0.8);
transition: all 0.3s ease-out 0s;
}
.mobile_overlay.mactive {
opacity: 1;
visibility: visible;
}
/*======== mobile menu area end ==========*/
/*======== slider area start ==========*/
.inner_slider_area {
height: 950px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: flex !important;
align-items: center;
position: relative;
}
.inner_slider_content {
width: 69%;
margin: 0 auto 0;
text-align: left;
}
.inner_slider_content p {
width: 55%;
font-size: 18px;
margin: 20px 0 40px;
}
.slider_side_img {
position: absolute;
top: 105px;
right: 340px;
}
.h2_inner_slider{
height: 1088px;
}
.h2_inner_slider .inner_slider_content{
text-align: center;
}
.h2_inner_slider .inner_slider_content h1{
font-size: 24px;
color: var(--whitec);
margin: 0;
}
.h2_inner_slider .inner_slider_content h2{
font-size: 100px;
color: var(--whitec);
margin: 0;
}
.h2_inner_slider .inner_slider_content p {
color: var(--whitec);
margin: 5px auto 40px;
}
/* golobal btn css */
.g_btn a {
display: inline-block;
padding: 20px 50px;
font-size: 16px;
background-color: var(--brcolor);
color: var(--whitec);
margin-right: 15px;
overflow: hidden;
z-index: 1;
}
.g_btn a.active{
background-color: var(--bgcolor);
color: var(--whitec);
}
.g_btn a.active:hover{
background-color: var(--brcolor);
color: var(--whitec);
}
.g_btn.mar_top{
margin-top: 30px;
}
.h2_inner_slider .g_btn a{
border-radius: 0px 20px 0px 20px;
}
.h2_inner_slider .g_btn a.active{
background: transparent;
border: 1px solid var(--whitec);
}
.h2_inner_slider .g_btn a:hover{
background-color: var(--bgcolor);
color: var(--whitec);
}
.h2_inner_slider .g_btn a.active:hover{
border: 1px solid transparent;
background-color: var(--brcolor);
color: var(--whitec);
}
/* golobal slick defult arrow css */
.slick-prev , .slick-next{
position: absolute;
top: 50%;
width: 55px;
height: 55px;
line-height: 55px;
z-index: 9999;
outline: none;
border: none;
font-size: 0;
background: none;
transform: translateY(-50%);
transition: 1s;
z-index: 1;
opacity: 0;
visibility: hidden;
}
.slick-prev{
left: -60px;
}
.slick-next{
right: -40px;
}
.slick-prev::before ,.slick-next::before{
content: '\ea93';
font-family: IcoFont;
display: inline-block;
width: 55px;
height: 55px;
line-height: 55px;
font-size: 40px;
background-color: var(--brcolor);
color: var(--whitec);
transition: 1s;
}
.slick-next::before{
content: '\ea94';
}
.slick-prev:hover::before ,.slick-next:hover::before{
background-color: var(--bgcolor);
color: var(--whitec)
}
/* slider defult arrow css */
.slider_area:hover .slick-prev, .slider_area:hover .slick-next {
background: none;
width: 55px;
height: 55px;
line-height: 55px;
border-radius: 0;
opacity: 1;
visibility: visible;
}
.slider_area .slick-prev{
left: 0;
}
.slider_area .slick-next{
right: 10px;
}
.slider_area .slick-prev::before ,.slider_area .slick-next::before{
content: '\eac9';
font-family: IcoFont;
color: var(--blackc);
display: inline-block;
background: 0 0;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 0;
font-size: 50px;
font-weight: 700;
}
.slider_area .slick-next::before{
content: '\eaca';
}
.slider_area .slick-prev:hover::before ,.slider_area .slick-next:hover::before{
color: var(--blackc);
}
/*======== slider area end ==========*/
/*======= home 3 inner slider start ======*/
.h3_inner_slider {
display: flex;
height: 785px;
align-items: flex-end;
background-position: center center;
background-size: cover;
}
.h3_inner_slider.h3_slider_style2{
align-items: flex-start;
}
.h3_inner_slide_content {
padding: 20px 35px 50px;
}
.h3_inner_slider.h3_slider_style2 .h3_inner_slide_content{
padding: 50px 35px 20px;
}
.h3_inner_slide_content h2{
font-size: 30px;
font-weight: 800;
margin-bottom: 20px;
}
.h3_inner_slide_content a{
font-size: 16px;
font-weight: 700;
color: var(--brcolor);
}
/* home 3 middle slider css */
.h3_middle_slider{
height: 785px;
background-position: center center;
background-size: cover;
display: flex;
align-items: center;
}
.h3_middle_slider_content{
text-align: center;
}
.h3_middle_slider_content h2{
font-size: 48px;
margin: 0;
}
.h3_middle_slider_content p {
font-size: 18px;
width: 70%;
margin: 10px auto 40px;
}
.h3_middle_slider .g_btn a{
border-radius: 0px 20px 0px 20px;
}
.h3_middle_slider .g_btn a.active{
background: transparent;
color: var(--titlecolor);
border: 1px solid var(--blackc);
}
.h3_middle_slider .g_btn a:hover{
background-color: var(--bgcolor);
color: var(--whitec);
}
.h3_middle_slider .g_btn a.active:hover{
border: 1px solid transparent;
background-color: var(--brcolor);
color: var(--whitec);
}
/*======= home 3 inner slider end ======*/
/*======== breadcum area start ==========*/
.breadcum_area {
background-size: cover;
background-position: center center;
padding: 100px 0 50px;
}
.inner_breadcum_area h1{
font-size: 30px;
}
.inner_breadcum_area ul{
list-style: none;
margin: 0;
padding: 0;
}
.inner_breadcum_area ul li{
display: inline-block;
}
.inner_breadcum_area ul li a{
display: inline-block;
font-size: 16px;
font-weight: 400;
}
.inner_breadcum_area ul li i, .inner_breadcum_area ul li a i {
font-size: 22px;
}
/*======== breadcum area end ==========*/
/*======== video slider area start ==========*/
.video_slider_area{
position: relative;
height: 100%;
overflow: hidden;
}
.video_slider_area::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background-color: #00000057;
}
.witr_youtube_video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -99;
transform: scale(1.2);
}
.witr_youtube_video iframe {
width: 100%;
height: 100%;
border: none;
}
.video_slider_area .inner_slider_content h1,
.video_slider_area .inner_slider_content h2,
.video_slider_area .inner_slider_content h3,
.video_slider_area .inner_slider_content p{
color: var(--whitec);
}
/*======== video slider area end =======*/
/*======= feature area start =======*/
.feature_area {
padding: 120px 0 20px;
position: relative;
}
/* about feature css */
.about_feature{
padding: 50px 0 20px;
}
.single_feature {
display: flex;
margin-bottom: 20px;
}
.sin_feature_img{
margin-right: 20px;
}
.sin_feature_content {
width: 60%;
}
.sin_feature_content h3 a{
font-size: 18px;
color: var(--brcolor);
}
.sin_feature_content p{
font-size: 14px;
}
/* feature shap css */
.feature_left_shap,
.feature_right_shap{
position: absolute;
top: 0;
}
.feature_left_shap{
left: 0;
}
.feature_right_shap{
right: 0;
}
/*======= feature area end =======*/
/*======= home 2 feature start =======*/
.h2_feature_area {
margin: 55px 150px 50px;
padding: 80px 0 40px;
background-position: center center;
background-size: cover;
}
.h2_feature_area .sin_feature_img img{
color: var(--whitec);
}
.h2_feature_area .sin_feature_content h3 a,
.h2_feature_area .sin_feature_content p{
color: var(--whitec);
}
/*======= home 2 feature end =======*/
/*======= shop area start =======*/
.shop_area {
padding: 40px 0 50px;
}
.section_border {
margin-bottom: 45px;
}
.section_title_area {
position: relative;
margin-bottom: 55px;
}
.section_title_area.margin_00{
margin-bottom: 0;
}
.section_title_area h2{
font-size: 18px;
font-weight: 500;
color: var(--brcolor);
}
.section_title_area h3{
font-size: 48px;
}
.section_title_area p{
padding: 10px 0 0;
}
.section_btn a{
font-size: 16px;
color: var(--brcolor);
}
.witr_title_shap {
position: absolute;
top: -20px;
left: 0;
right: 0;
z-index: -1;
}
/* shop isotope css */
.shop_area .portfolio_nav ul li {
padding: 0px 0px 0 25px;
font-size: 18px;
font-weight: 300;
font-family: "Roboto Slab", sans-serif;
border: none;
background: transparent;
}
.shop_area .portfolio_nav ul li:hover{
background: transparent;
color: var(--brcolor);
}
.shop_area .portfolio_nav ul li.current_menu_item{
background: transparent;
color: var(--brcolor);
}
/* inner shop area css */
.inner_shop_area {
padding: 0 0px 0;
margin-bottom: 20px;
background: var(--whitec);
}
.inner_shop_img{
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0);
padding: 30px 10px 30px 10px;
border: 3px solid #EFF0F1;
transition: .5s;
}
.inner_shop_img:hover{
border: 3px solid var(--brcolor);
}
.inner_shop_content {
padding: 30px 0 0px;
}
/* shop style 2 css */
.shop_style2{
padding: 60px 0 50px;
}
.shop_style2 .inner_shop_img{
border: none;
padding: 0 0;
box-shadow: none;
}
.shop_style2 .inner_shop_area{
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.09);
padding: 30px 10px 20px;
}
.shop_style2 .inner_shop_area:hover{
background: #EFF0F1;
}
/* single page shop */
.single_page_shop, .single_shop_page{
padding: 120px 0 100px;
}
/*======= shop area end =======*/
/*======= home 2 shop start =======*/
.h2_shop_area {
margin-top: -85px;
padding: 0 0 30px;
}
.h2_shop_width {
max-width: 1640px;
}
.h2_shop_area .slick-prev, .h2_shop_area .slick-next {
opacity: 0;
visibility: hidden;
top: 50%;
}
.h2_shop_area:hover .slick-prev,
.h2_shop_area:hover .slick-next {
opacity: 1;
visibility: visible;
}
.h2_shop_area .slick-prev {
left: -60px;
}
.h2_shop_area .slick-next {
right: -40px;
}
/* home 2 shop style 2 css */
.h2_shop_style2{
padding: 55px 0 30px;
}
.h2_shop_style2 .portfolio_nav {
padding: 15px 0 25px;
}
.h2_shop_style2 .portfolio_nav ul li{
padding: 0px 25px 0px;
}
/* home 2 shop style 3 css */
.h2_shop_style3{
margin: 0 0;
padding: 70px 0 10px;
}
/*======= home 2 shop end =======*/
/*======= testimonial area start =======*/
.testimonial_area{
padding: 40px 0 50px;
position: relative;
}
.h2_testimonial_area{
padding: 60px 0 50px;
}
.inner_testi_img img{
margin: auto;
}
.inner_testi_para {
padding: 10px 0 25px;
}
.inner_testi_para p {
width: 90%;
margin: 0 auto;
font-size: 30px;
font-family: "Roboto Slab", Sans-serif;
font-weight: 600;
}
.inner_testi_title h2{
font-size: 18px;
font-weight: 500;
color: var(--brcolor);
}
.inner_testi_title h2 span{
color: var(--titlecolor);
}
.testimonial_area:hover .slick-prev ,.testimonial_area:hover .slick-next{
opacity: 1;
visibility: visible;
}
/* testimonial shap css */
.testi_left_shap, .testi_right_shap {
position: absolute;
top: -100px;
z-index: -1;
animation: witr_movelr_box45 5s linear 1s infinite alternate running;
}
.testi_left_shap{
left: 100px;
}
.testi_right_shap{
right: 100px;
}
@keyframes witr_movelr_box45 {
0%{
transform: translateX(0px);
}
100%{
transform: translateX(45px);
}
}
@keyframes witr_movelr_box46 {
0%{
transform: translateY(0px);
}
100%{
transform: translateY(45px);
}
}
/* home 3 testimonial area */
.h3_testimonial_area {
padding: 40px 0 30px;
}
.h3_testimonial_area .testi_left_shap,
.h3_testimonial_area .testi_right_shap {
top: 0;
}
.h3_testimonial_area .testi_left_shap{
left: -60px;
}
.h3_testimonial_area .testi_right_shap{
right: -20px;
}
.single_page_testi{
padding: 120px 0 50px;
}
/*====== testimonial area end =====*/
/*===== home 4 testimonial area start ====*/
.h4_testimonial_area {
padding: 50px 0 95px;
}
.h4_testi_content{
position: relative;
box-shadow: 0 0 20px 0 rgb(0 0 0 / 6%);
background: var(--whitec);
border-radius: 5px;
padding: 50px 20px 50px;
}
.h4_testi_content p{
margin: 0;
}
.h4_testi_content i {
font-size: 100px;
color: #be5f1930;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.h4_testi_box{
position: absolute;
content: '';
left: 50%;
bottom: -36px;
border-radius: 15px;
width: 50px;
height: 50px;
background: var(--whitec);
transform: rotate(45deg) translateX(-50%);
z-index: -1;
box-shadow: 0 2px 29px 0 rgb(0 0 0 / 8%);
}
/* testi title css */
.h4_testi_title{
margin-top: 30px;
}
.h4_testi_title img{
border-radius: 50%;
width: 59px;
margin: 0 auto 10px;
}
.h4_testi_title h2{
margin: 0;
}
.h4_testimonial_area:hover .slick-prev ,.h4_testimonial_area:hover .slick-next{
opacity: 1;
visibility: visible;
}
/*===== home 4 testimonial area end ====*/
/*====== offer area start ======*/
.offer_area{
padding: 55px 0 30px;
}
.inner_offer_area {
padding: 40px 30px 35px;
background-position: center center;
background-size: cover;
margin-bottom: 20px;
}
.inner_offer_title {
padding: 0px 210px 0px 0px;
}
.inner_offer_title h2 a{
font-size: 24px;
font-weight: 800;
}
/* inner offer btn css */
.inner_offer_btn {
margin-top: 110px;
}
.inner_offer_btn a{
font-size: 16px;
font-weight: 700;
color: var(--brcolor);
}
.inner_offer_btn a:hover{
color: var(--bgcolor);
}
/* home 2 offer area css */
.h2_offer_area{
padding: 65px 0 30px;
}
.h2_offer_area .inner_offer_title h2 a,
.h2_offer_area .inner_offer_btn a{
color: var(--whitec);
}
.h2_offer_area .inner_offer_title h2 a:hover,
.h2_offer_area .inner_offer_btn a:hover{
color: var(--brcolor);
}
/*====== offer area end ======*/
/*====== choose area start ======*/
.choose_area{
padding: 55px 0 50px;
position: relative;
}
/* about choose css */
.about_choose_area{
padding: 110px 0 50px;
}
.inner_choose_area{
margin-bottom: 20px;
}
.inner_choose_area .section_title_area {
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 1px dashed var(--bgcolor);
}
.inner_choose_list ul{
list-style: none;
padding: 0;
margin: 0;
}
.inner_choose_list ul li{
padding: 0 0 10px;
}
.inner_choose_list ul li img{
margin-right: 10px;
}
.choose_left_shap {
position: absolute;
top: -25%;
left: 20px;
z-index: -1;
animation: witr_movelr_box45 5s linear 1s infinite alternate running;
}
/* home 3 choose css */
.h3_choose_area{
padding: 20px 0 50px;
}
.h3_choose_area .inner_choose_area{
padding: 50px 0 0;
}
/*====== choose area end ======*/
/*======== brand area start ==========*/
.brand_area {
padding: 80px 0 50px;
}
/* about brand css */
.about_brand{
padding: 70px 0 115px;
}
.inner_brand_area img{
margin: 0 auto;
}
.brand_area:hover .slick-prev ,.brand_area:hover .slick-next{
opacity: 1;
visibility: visible;
}
/*======== brand area end ==========*/
/* cart area css */
.cart_area{
padding: 120px 0 120px;
}
/* product checkout css */
.product_checkout {
padding: 110px 0 105px;
}
/* my account area css */
.my_accout_area {
padding: 110px 0 100px;
}
/* portfolio area css */
.portfolio_area {
padding: 115px 0 120px;
}
/*======= call to action start ====*/
.call_to_action{
padding: 40px 0 50px;
}
.inner_call_action{
position: relative;
}
.inner_call_action h2{
font-size: 72px;
}
.inner_call_action p {
width: 85%;
margin: 20px auto 35px;
font-size: 18px;
letter-spacing: 0.7px;
}
.call_shap {
position: absolute;
top: -90px;
right: 0;
left: 0;
z-index: -1;
animation: witr_movelr_box45 5s linear 1s infinite alternate running;
}
/*======= call to action end ====*/
/*======== pricing area start ==========*/
.pricing_area{
padding: 110px 0 100px;
}
.inner_pricing_area {
position: relative;
background-color: var(--whitec);
box-shadow: 0 0 30px 0 rgb(0 0 0 / 8%);
padding: 25px 20px 40px;
border-radius: 5px;
margin-bottom: 20px;
z-index: 1;
transition: .5s;
}
.inner_pricing_area:hover{
transform: translateY(-10px);
}
.inner_pri_sm_title{
text-align: center;
}
.inner_pri_sm_title h3{
font-size: 30px;
}
/* inner pricing big title css */
.inner_pri_big_title {
padding: 25px 0 0px;
}
.inner_pri_big_title h2 {
display: inline-block;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
border-radius: 100%;
background-color: var(--brcolor);
color: var(--whitec);
font-size: 40px;
}
/* inner pricing list css */
.inner_pricing_list {
padding: 5px 0 20px;
}
.inner_pricing_list ul{
list-style: none;
padding: 0;
}
.inner_pricing_list ul li {
padding: 15px 0 0;
}
.inner_pricing_list ul li i{
font-size: 20px;
margin-right: 6px;
color: var(--brcolor);
}
/* inner pricing btn css */
.inner_pricing_btn {
margin-top: 20px;
}
.inner_pricing_btn a {
display: inline-block;
padding: 15px 45px;
font-size: 14px;
font-weight: 600;
font-family: Rajdhani, sans-serif;
background-color: var(--brcolor);
color: var(--whitec);
}
.inner_pricing_btn a:hover{
background-color: var(--bgcolor);
color: var(--whitec);
}
/*======== pricing area end ==========*/
/*======== team area start ==========*/
.team_area {
padding: 110px 0 100px;
}
.inner_team_area{
position: relative;
margin-bottom: 20px;
}
.team_img_area{
position: relative;
overflow: hidden;
}
.team_img_area img{
width: 100%;
transition: .5s;
}
.inner_team_area:hover .team_img_area img{
transform: scale(1.2);
}
/* team socail css */
.team_socail {
position: absolute;
bottom: -300px;
left: 20px;
display: grid;
transition: .5s;
}
.inner_team_area:hover .team_socail{
bottom: 70px;
}
.team_socail a{
display: inline-block;
margin: 5px 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
background-color: var(--brcolor);
color: var(--whitec);
}
.team_socail a:hover{
background-color: var(--bgcolor);
color: var(--whitec);
}
/* team overlay css */
.team_overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0%;
transition: .5s;
background-color: #00051e9b;
}
.inner_team_area:hover .team_overlay{
top: 0;
height: 100%;
}
/* inner team content css */
.inner_team_content {
text-align: center;
background-color: var(--whitec);
padding: 22px 30px;
box-shadow: 0 0 30px 0 rgba(42, 67, 113, .15);
}
.inner_team_content p
,.inner_team_content h2 a{
margin: 0;
}
.inner_team_content p{
color: var(--brcolor);
}
/* inner team absoute icon css */
.inner_team_absol_icon {
position: absolute;
bottom: 135px;
left: 20px;
transition: .5s;
}
.inner_team_absol_icon a {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
background-color: var(--brcolor);
color: var(--whitec);
}
/*======== team area end ==========*/
/*======= contact service start ====*/
.contact_service_area {
padding: 120px 0 50px;
}
.inner_contact_service {
padding: 50px 30px 65px 30px;
margin-bottom: 20px;
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
}
.inner_contact_service i {
font-size: 30px;
height: 80px;
width: 80px;
text-align: center;
border-radius: 5px;
line-height: 80px;
display: inline-block;
background-color: var(--brcolor);
color: var(--whitec);
transition: .5s;
}
.inner_contact_service:hover i{
background-color: var(--bgcolor);
color: var(--whitec);
border-radius: 50%;
}
.inner_contact_service h3 a {
display: inline-block;
font-size: 22px;
margin: 12px 0 10px;
}
.inner_contact_service p{
margin: 0;
}
.inner_contact_area p.form-messege{
color: var(--brcolor);
}
/*======= contact service end ======*/
/*======== contact area start ==========*/
.contact_area {
padding: 50px 0 120px;
}
.inner_contact_area {
padding: 60px 30px 50px 30px;
box-shadow: 0 0 30px rgb(0 0 0 / 6%);
}
.inner_contact_area .section_title_area{
margin-bottom: 40px;
}
/* inner contact form */
.inner_contact_form input {
border: 1px solid #ddddddcc;
outline: none;
width: 100%;
height: 45px;
border-radius: 5px;
padding: 0 20px;
margin-bottom: 23px;
}
.inner_contact_form textarea {
width: 100%;
border: 1px solid #ddddddcc;
outline: none;
padding: 20px 20px;
}
textarea::placeholder {
color: var(--paracolor);
}
.inner_contact_form button {
margin-top: 18px;
padding: 15px 30px;
font-size: 18px;
font-weight: 600;
border: none;
outline: none;
background-color: var(--brcolor);
color: var(--whitec);
transition: .5s;
}
.inner_contact_form button:hover{
background-color: var(--bgcolor);
color: var(--whitec);
}
.inner_contact_map{
width: 100%;
height: 100%;
}
.inner_contact_map iframe {
width: 100%;
height: 100%;
}
/*======== contact area end ==========*/
/*===== faq area start ====*/
.faq_area{
padding: 110px 0 100px;
}
.inner_faq_img {
margin-bottom: 20px;
}
.accordion-item {
margin-bottom: 20px;
}
.accordion-button:focus{
box-shadow: none;
}
.accordion-button:not(.collapsed) {
background-color: var(--brcolor);
color: var(--whitec);
}
.accordion-item .accordion-button {
border-radius: 0;
font-size: 17px;
font-weight: 600;
border: none;
box-shadow: 0 0 5px #dddddd7d;
}
/*===== faq area end ====*/
/*======== map area start ==========*/
.map_area {
margin: 75px 0 55px;
}
.inner_map_area {
width: 100%;
height: 500px;
}
.inner_map_area iframe {
width: 100%;
height: 100%;
border: none;
outline: none;
}
/*======== map area end ==========*/
/*======== blog area start ==========*/
.blog_area {
padding: 80px 0 30px;
position: relative;
}
/* inner blog area css */
.inner_blog_area {
overflow: hidden;
margin-bottom: 20px;
background-color: var(--whitec);
box-shadow: 0 5px 10px 0 rgba(50, 65, 141, .07);
transition: .5s;
}
.inner_blog_area:hover {
background: transparent;
}
.blog_main_all {
padding: 35px 25px 20px;
}
.inner_blog_thumb{
position: relative;
overflow: hidden;
}
.inner_blog_img img{
width: 100%;
transition: .5s;
}
.inner_blog_area:hover .inner_blog_img img{
transform: scale(1.2);
}
/* blog overlay css */
.blog_overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 50%);
transform: scale(0);
transition: .5s;
}
.inner_blog_area:hover .blog_overlay{
transform: scale(1.2);
}
/* inner blog text css */
.inner_blog_text {
padding: 0 0 10px;
}
.inner_blog_text span {
margin-right: 5px;
color: var(--brcolor);
}
.inner_blog_text span i{
margin-right: 6px;
color: var(--brcolor);
}
/*inner blog content css */
.inner_blog_content h2 a:hover{
color: var(--brcolor);
}
.inner_blog_content p {
font-size: 14px;
padding-top: 10px;
}
.blog_btn a{
font-size: 16px;
color: var(--brcolor);
}
.blog_btn a:hover{
color: var(--bgcolor);
}
.blog_right_shap{
position: absolute;
top: 0;
right: -50px;
z-index: -1;
animation: witr_movelr_box45 5s linear 1s infinite alternate running;
}
/* blog area defult arrow css */
.blog_area .slick-prev, .blog_area .slick-next {
opacity: 1;
visibility: visible;
top: -90px;
}
.blog_area .slick-prev {
left: 89%;
}
.blog_area .slick-next{
right: 20px;
}
.h2_blog_area{
padding: 50px 0 30px;
}
.h2_blog_area .blog_main_all {
padding: 25px 25px 20px;
}
.h2_blog_area .inner_blog_text span{
font-size: 15px;
}
/* site page blog */
.yblog_left {
padding: 120px 0 100px;
}
.yblog_left_inner{
margin-bottom: 30px;
}
.yblog_left_sub p{
font-size: 16px;
}
/*======== blog area end ==========*/
/*======== subscribe area start =======*/
.subscribe_area {
padding: 50px 0 80px;
}
.subscribe_area .section_title_area {
padding: 6px 0px 0px 20px;
border-left: 8px solid var(--brcolor);
}
.inner_subscribe_form {
position: relative;
overflow: hidden;
}
.inner_subscribe_form input{
width: 100%;
font-size: 16px;
line-height: 28px;
border-radius: 0px;
border: none;
outline: none;
padding: 15px 30px;
height: 50px;
background: var(--bgcolor);
color: var(--whitec);
}
.inner_subscribe_form input::placeholder{
color: var(--whitec);
}
.inner_subscribe_form button {
position: absolute;
top: 0;
right: 0;
display: inline-block;
padding: 13px 35px 12px;
font-size: 16px;
border: none;
outline: none;
background-color: var(--brcolor);
color: var(--whitec);
}
/*======== subscribe area end ========*/
/*======== img area start ==========*/
.img_area{
padding: 20px 0 0;
}
.inner_img_area{
position: relative;
}
.inner_img_area img{
width: 100%;
}
.inner_img_area a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
font-size: 20px;
border-radius: 30px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: var(--whitec);
background: var(--brcolor);
opacity: 0;
visibility: hidden;
transition: .5s;
}
.inner_img_area:hover a{
opacity: 1;
visibility: visible;
}
.inner_img_area a:hover{
background-color: var(--bgcolor);
color: var(--whitec);
}
.img_area:hover .slick-prev ,.img_area:hover .slick-next{
opacity: 1;
visibility: visible;
}
/*======== img area end ==========*/
/*======== footer area start ==========*/
.footer_area {
padding: 90px 0 80px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.footer_widget img {
margin-bottom: 25px;
}
/* footer address area css */
.footer_address {
margin-top: 25px;
}
.footer_address ul{
list-style: none;
padding-left: 0;
}
.footer_address ul li {
padding: 0 0 9px;
}
.footer_address ul li i{
margin-right: 10px;
color: var(--blackc);
}
/* footer nav css */
.footer_nav {
margin-top: 25px;
}
.footer_nav ul{
list-style: none;
margin: 0;
padding: 0;
}
.footer_nav ul li a{
display: inline-block;
font-size: 16px;
font-weight: 400;
padding: 0 0 9px;
}
.footer_nav ul li a:hover{
color: var(--brcolor);
}
.footer_widget2 p {
margin-top: 30px;
}
/* footer socail icon css */
.footer_socail_icons {
padding: 10px 0 0;
}
.footer_socail_icons a {
display: inline-block;
color: var(--bgcolor);
border: 1px solid var(--titlecolor);
font-size: 20px;
height: 35px;
width: 35px;
line-height: 35px;
text-align: center;
margin-right: 5px;
}
.footer_socail_icons a:hover{
background-color: var(--brcolor);
color: var(--whitec);
}
/*======== footer area end ==========*/
/*======== copyright area start ==========*/
.copy_right_area {
padding: 25px 0 25px;
background-color: var(--brcolor);
}
.inner_copy_right_area p{
color: var(--whitec);
margin: 0;
}
.copy_right_menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.copy_right_menu ul li {
display: inline-block;
margin-left: 15px;
}
.copy_right_menu ul li a{
font-size: 16px;
font-weight: 400;
color: var(--whitec);
}
/*======== copyright area end ==========*/
/*======== scroll top btn css ==========*/
#scrollUp {
bottom: 40px;
font-size: 30px;
height: 40px;
line-height: 40px;
right: 40px;
text-align: center;
border-radius: 5px;
width: 40px;
background: var(--brcolor);
color: var(--whitec);
box-shadow: 0 0 10px #0000002e;
}
/* blog and portfolio all color css */
.portfolio_nav ul li.current_menu_item,
.portfolio_nav ul li:hover,
.port_content_center a:hover,
.inner_portfolio_lower_nav ul li a.current,
.inner_portfolio_lower_nav ul li a:hover,
.ycalender_inner h5,
.ycalender_inner td.active,
.inner_project_in_icon a:hover,
.inner_sin_com_btn button,
.pay_sub_btn button,
.inner_my_accout_form_btn a ,
.inner_cart_btn a,
.shop_quenty button,
.shop_btn_area a {
background-color: var(--brcolor);
color: var(--whitec);
}
.pay_sub_btn button:hover,
.inner_my_accout_form_btn a:hover,
.inner_cart_btn a:hover,
.tab_list_socail_icon a:hover,
.shop_btn_area a:hover,
.inner_shop_icons a:hover {
background-color: var(--bgcolor);
color: var(--whitec);
}
.port_content_center h2 a:hover{
background: none;
color: var(--brcolor);
}
.port_content_center p{
color: var(--whitec);
}
.yblog_left_text_sub span i{
color: var(--brcolor);
}