/* ==========================================================================
Table of Contets
==========================================================================
1.0 Common Styles
2.0 Header Section
3.0 About Section
3.1 About Style 2
3.2 About Style 3
3.3 About Style 4
4.0 Service Section
4.1 Service Style 2
4.2 Service Style 3
5.0 Projects Section
5.1 Project Style 2
6.0 Projects Single Section
7.0 Counter Section
8.0 Team Section
9.0 Testimonial Section
10.0 CTA Section
11.0 Hero Section
11.1 Video Hero
12.0 Page Header Section
13.0 404 Error Section
14.0 Contact Section
14.1 Form Style
14.2 Google Map
15.0 Blog Section
15.1 Pagination
15.2 Sidebar Style
15.3 Search Form Style
15.4 Thumbnails Post Style
15.5 Tag Cloud Style
16.0 Blog Single Section
16.1 Blog Quote
16.2 Post Tags Style
16.3 Author Box Style
16.4 Post Navigation
16.5 Comments Style
17.0 Sponsor Section
18.0 Widget Section
19.0 Footer Section
20.0 Scroll To Top
==========================================================================
Arkit By DynamicLayers
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* ==========================================================================
Common Styles
========================================================================== */
*{
padding: 0;
margin: 0;
}
body{
background-color: #fff;
font-size: 16px;
line-height: 1.5;
color: #8d9aa8;
font-weight: 400;
letter-spacing: -0.2px;
position: relative;
overflow-x: hidden;
}
::selection {
background-color: #bfca02;
color: #fff
}
-webkit-::selection {
background-color: #bfca02;
color: #fff
}
::-moz-selection {
background-color: #bfca02;
color: #fff
}
h1, h2, h3, h4, h5, h6{
font-family: 'Poppins';
-webkit-font-smoothing:antialiased;
color: #263a4f;
}
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5{
color: #fff;
}
.bg-dark p,
.bg-dark span{
color: #999;
}
h1{
font-size: 45px;
font-weight: 400;
line-height: 55px;
margin: 0 0 10px;
color: #171e25;
}
h2{
font-size: 32px;
line-height: 42px;
color: #171e25;
margin: 0 0 10px;
font-weight: 600;
letter-spacing: -1px;
}
h3,h4{
margin: 0 0 10px;
font-weight: 400;
line-height: 1.7;
color: #171e25;
letter-spacing: -0.5px;
}
h3{
font-size: 20px;
}
h4{
font-size: 18px;
}
h5,h6{
font-size: 14px;
margin: 0 0 10px;
}
img{
border: none;
outline:none;
max-width: 100%;
}
ul{
display: block;
list-style: none;
padding: 0;
margin: 0;
}
p, li, a, span{}
p{
font-size: 16px;
line-height: 1.5;
margin-bottom: 0px;
color: #171e25;
}
a, a:hover{
text-decoration: none;
}
a:focus{
outline: 0;
text-decoration: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
color: #ddd !important;
}
input:-moz-placeholder,
textarea:-moz-placeholder{ /* Firefox 18- */
color: #ddd !important;
}
input::-moz-placeholder,
textarea::-moz-placeholder{ /* Firefox 19+ */
color: #ddd !important;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder{
color: #ddd !important;
}
button{
border: none;
background: none;
}
/* Helper Class */
.padding{
padding: 10px 0;
}
.no-padding{
padding: 0;
}
.padding-15{padding: 15px;}
.padding-20{padding: 20px;}
.box-padding{padding: 0 50px;}
.bg-white{ background-color: #fff; }
.bg-grey{ background-color: #f9fafa;}
.bg-dark{ background-color: #242323!important;}
.bd-top{ border-top: 1px solid #e5e5e5;}
.bd-bottom{ border-bottom: 1px solid #e5e5e5;}
.mb-10{ margin-bottom: 10px; }
.mb-15{ margin-bottom: 15px; }
.mb-20{ margin-bottom: 20px; }
.mb-25{ margin-bottom: 25px; }
.mb-30{ margin-bottom: 30px; }
.mb-35{ margin-bottom: 35px; }
.mb-40{ margin-bottom: 40px; }
.mb-45{ margin-bottom: 45px; }
.mb-50{ margin-bottom: 50px; }
.ml-15{ margin-left: 15px; }
.ml-20{ margin-left: 20px; }
.ml-25{ margin-left: 25px; }
.ml-30{ margin-left: 30px; }
.ml-35{ margin-left: 35px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }
.mt-40{ margin-top: 40px; }
.mt-50{ margin-top: 50px; }
.fz-28{ font-size: 28px; }
.fz-24{ font-size: 24px; }
.fz-22{ font-size: 22px; }
.fz-20{ font-size: 20px; }
.fz-18{ font-size: 18px; }
.fz-16{ font-size: 16px; }
.text-black{
color: #333;
}
.text-white{
color: #ffffff;
}
.align-left{
text-align: left;
}
.align-right{
text-align: right;
}
.align-center{
text-align: center;
}
.fl-right{
float: right;
}
.fl-left{
float: left;
}
.display-table{
width: 100%;
height: 100%;
display: table;
}
.table-cell{
display: table-cell;
vertical-align: middle;
}
.overlay{
width: 100%;
position: relative;
z-index: 1;
}
.overlay:before{
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
/* Preloader Styles */
/*
.loaded .site-preloader-wrap {
opacity: 0;
visibility: hidden;
}
.site-preloader-wrap {
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
background: #fff;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.site-preloader-wrap .logo {
margin-bottom: 20px;
width: 120px;
height: auto;
}
.site-preloader-wrap .spinner {
background-color: #e3cd20;
width: 40px;
height: 40px;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}*/
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
/*///////////////////////////////////// site preloader//////////////////////////////////*/
.site-preloader-wrap .logo {
margin-bottom: 20px;
width: 120px;
height: auto;
}
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #fff;
background-repeat: no-repeat ;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
justify-items: center;
z-index: 99999; /* Ensure preloader is on top */
}
#loading img {
margin-bottom: 20px;
width: 120px;
height: auto;
}
@media (min-width: 760px) and (max-width: 800px) {
#loading {
position: fixed;
width: 100%;
height: 70vh;
background: #fff;
background-repeat: no-repeat ;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
justify-items: center;
z-index: 99999; /* Ensure preloader is on top */
}
#loading img {
margin-bottom: 20px;
width: 120px;
height: auto;
}
}
@media (min-width: 800px) and (max-width: 850px) {
#loading {
position: fixed;
width: 100%;
height: 60vh;
background: #fff;
background-repeat: no-repeat ;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
justify-items: center;
z-index: 99999; /* Ensure preloader is on top */
}
#loading img {
margin-bottom: 20px;
width: 120px;
height: auto;
}
}
@media (min-width: 1000px) and (max-width: 1024px) {
#loading {
position: fixed;
width: 100%;
height: 50vh;
background: #fff;
background-repeat: no-repeat ;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
justify-items: center;
z-index: 99999; /* Ensure preloader is on top */
}
#loading img {
margin-bottom: 20px;
width: 120px;
height: auto;
}
}
/* Button Style */
.btn_group{}
.btn_group a{
margin: 5px;
}
.btn_group_left a{
margin-right: 15px;
margin-bottom: 15px;
}
.default-btn{
background-color: #eec762;
text-transform: uppercase;
color: #fff;
font-size: 12px;
border-radius: 2px;
line-height: 50px;
font-weight: 600;
display: inline-block;
letter-spacing: 0.5px;
padding: 0 30px;
-webkit-box-shadow: 0 3px 10px rgba(71, 44, 173, 0.2);
box-shadow: 0 3px 10px rgba(71, 44, 173, 0.2);
}
.default-btn:hover{
background-color: #263a4f;
color: #fff;
}
/*section-heading*/
.section-heading h2{
font-size: 32px;
display: block;
}
.section-heading span{
display: inline-block;
text-transform: uppercase;
font-size: 12px;
color: #263a4f;
font-weight: 600;
letter-spacing: 0;
position: relative;
margin-bottom: 10px;
z-index: 1;
}
.section-heading span:before{
background-color: transparent;
position: absolute;
content: "";
width: 30px;
height: 30px;
left: -15px;
/* top: -10px; */
border: 3px solid #eec762;
opacity: 0.5;
z-index: -1;
}
/*Section Heading For Dark Background*/
.bg-dark .section-heading span{
color: #ddd;
}
.bg-dark .section-heading h2{
color: #fff;
}
/* Transition Effect */
a,a:hover, .overlay, img, .form-control, .form-control:hover, button{
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
/* ==========================================================================
Header Section
========================================================================== */
/* Default styling for desktop */
.ser {
font-size: 14px;
margin-left: 180px;
text-decoration: none;
color: #000; /* Adjust color as needed */
}
/* Mobile styling */
@media (max-width: 768px) {
.ser {
font-size: 10px; /* Further reduce font size for very small screens */
padding: 10px; /* Add padding for touch-friendly tap areas */
margin-left: 0px;
text-align: start;
}
/* Optionally adjust the element itself */
}/* Responsive styling for small screens of laptops */
@media screen and (max-width: 1495px) {
.ser {
font-size: 12px; /* Reduce font size for mobile */
margin-left: 100px; /* Reset margin for better positioning on smaller screens */
display: block; /* Ensure it takes up full width if needed */
text-align: center; /* Center the link text */
}
/* Optionally adjust the element itself */
li {
margin: 10px 0; /* Add vertical margin for spacing */
text-align: start; /* Center align the list item content */
}
}
/* Very small screens (e.g., less than 480px) */
@media (max-width: 480px) {
.ser {
font-size: 10px; /* Further reduce font size for very small screens */
padding: 10px; /* Add padding for touch-friendly tap areas */
margin-left: 0px;
text-align: start;
}
}
/*///// second menu /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.careers-link {
font-size: 14px;
margin-left: 20px;
text-decoration: none;
color: #000; /* Adjust color as needed */
}
/* Mobile styling */
@media (max-width: 768px) {
.careers-link {
font-size: 10px; /* Further reduce font size for very small screens */
padding: 10px; /* Add padding for touch-friendly tap areas */
margin-left: 0px;
text-align: start;
}
/* Optionally adjust the element itself */
}/* Responsive styling for small screens of laptops */
@media screen and (max-width: 1495px) {
.careers-link {
font-size: 12px; /* Reduce font size for mobile */
margin-left: 20px; /* Reset margin for better positioning on smaller screens */
display: block; /* Ensure it takes up full width if needed */
}
/* Optionally adjust the element itself */
li {
margin: 10px 0; /* Add vertical margin for spacing */
text-align: start; /* Center align the list item content */
}
}
/* Very small screens (e.g., less than 480px) */
@media (max-width: 480px) {
.careers-link {
font-size: 10px; /* Further reduce font size for very small screens */
padding: 10px; /* Add padding for touch-friendly tap areas */
margin-left: 0px;
text-align: start;
}
}
.header-section{
background-color: aliceblue;
width: 100%;
height: 90px;
z-index: 99;
position:sticky;
left: 0;
top: 0;
padding: 0;
margin-bottom: 0;
}
.navbar-fixed-top.header-section{
background-color: aliceblue;
-moz-box-shadow: 0 2px 5px rgba(16, 16, 16, 0.688);
-webkit-box-shadow: 0 2px 5px rgba(16, 16, 16, 0.182);
box-shadow: 0 2px 5px rgba(16,16,16,.08);
height: 90px;
border-bottom: 0;
padding: 0;
}
.navbar-fixed-top ul.nav > li > a{
color: #263a4f;
}
.navbar-fixed-top ul.nav > li > a:hover,
.navbar-fixed-top ul.nav > li > a:focus,
.navbar-fixed-top ul.nav > li.active > a{
color: #263a4f;
}
.logo-light,
.navbar-fixed-top .logo-light,
.logo-dark,
.navbar-fixed-top .logo-dark,
.navbar-fixed-top.header-section,
.header-section{
transition: all 0.3s ease-in-out;
}
.navbar{
border: medium none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
margin: 0;
position: relative;
padding: 0;
}
.navbar-header {
padding: 17px 0;
}
.navbar-header .brand{
font-size: 25px;
color: #333;
font-family: 'Poppins';
letter-spacing: -1px;
font-weight: 600;
margin-left: 13px;
}
.navbar-header .nav-btn{
padding: 8px;
border-radius: 1px;
}
.navbar-header .nav-btn .icon-bar{
background-color: #fff;
width: 18px;
}
.navbar-fixed-top .navbar-header .nav-btn .icon-bar{
background-color: #777;
}
.navbar-header .nav-btn:hover,
.navbar-header .nav-btn:focus{
opacity: 0.8;
}
/*Dropdown Style
==================*/
#mainmenu li ul{
background-color: #fff;
width: 200px;
height: auto;
position: absolute;
left: 0;
top: 140%;
visibility: hidden;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
z-index: 999;
}
#mainmenu li:hover > ul{
visibility: visible;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
top: 100%;
}
#mainmenu li ul li{
border-bottom: 1px solid #e5e5e5;
display: block;
position: relative;
padding: 0;
}
#mainmenu li ul li:last-child{
border: none;
}
#mainmenu li ul li a{
line-height: 45px;
display: block;
padding: 0 15px;
font-size: 16px;
font-weight: 400;
letter-spacing: -0.2px;
color: #8d9aa8;
-webkit-transition: color 0.3s ease 0s, padding 0.3s ease 0s;
transition: color 0.3s ease 0s, padding 0.3s ease 0s;
}
#mainmenu li > ul > li:hover a{
background-color: #eec762;
color: #fff;
}
#mainmenu li > ul ul{
background-color: #fff;
left: 200px;
}
#mainmenu li > ul li:hover > ul li a{
color: #777;
}
#mainmenu li ul li:hover > ul{
top: 0;
opacity: 1;
visibility: visible;
}
#mainmenu li > ul li:hover > ul li > a:hover{
background-color: transparent;
color: #fff;
}
#mainmenu li ul li li a:hover{
color: #eec762 !important;
}
/* Nav Menu */
#navbar{
z-index: 999;
padding: 0 15px;
}
ul.nav{}
ul.nav > li{
position: relative;
}
ul.nav > li > a{
color: #263a4f;
display: inline-block;
vertical-align: middle;
padding: 0 20px;
letter-spacing: 0;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
line-height: 80px;
z-index: 1;
font-family: Poppins;
}
ul.nav li.phone{
font-size: 14px;
font-family: "Poppins";
color: #263a4f;
font-weight: 600;
line-height: 80px;
padding-left: 50px;
}
ul.nav li.phone i{
color: #eec762;
margin-right: 5px;
}
ul.nav > li > a:hover,
ul.nav > li > a:focus,
ul.nav > li > a.active{
background: none;
color: #eec762;
opacity: 1;
}
.menu-btn{
margin-left: 10px;
margin-top: 10px;
}
/* /////////////////////////////////////////// career and faq small size/////////////////////////////////////////*/
#s-menu{
font-size: 14px;
}
/*Mobile Menu */
.slicknav_menu {
background: none;
padding: 4px 0;
display:none;
z-index: 999;
}
.slicknav_nav {
background-color: #fff;
font-size: 16px;
padding: 20px 15px;
padding-right: 800px;
position: relative;
top: 12px;
}
@media only screen and (max-width: 800px) {
.slicknav_nav {
background-color: #fff;
font-size: 16px;
padding: 20px 15px;
padding-right: 300px;
position: relative;
top: 12px;
}
}
@media (min-width: 800px) and (max-width: 1000px) {
.slicknav_nav {
background-color: #fff;
font-size: 16px;
padding: 20px 15px;
padding-right: 500px;
position: relative;
top: 12px;
}
}
@media only screen and (max-width: 450px) {
.slicknav_nav {
background-color: #fff;
font-size: 16px;
padding: 20px 15px;
padding-right: 150px;
position: relative;
top: 12px;
}
}
.js .slicknav_menu {
width: 100%;
position: absolute;
right: 0;
top: 0;
}
.slicknav_btn{
background-color: transparent;
margin: 15px 10px 27px;
}
.slicknav_menu .slicknav_icon-bar {
width: 25px;
height: 5px;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.5);
-moz-box-shadow: 0 2px 0 rgba(0,0,0,.5);
box-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav .slicknav_row,
.slicknav_nav a,
.slicknav_nav a:hover{
-moz-border-radius: 0;
-webkit-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
.slicknav_nav .slicknav_row,
.slicknav_nav a {
padding: 10px 15px;
margin: 0;
color: #333;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
}
/* Set initial arrow pointing down */
.slicknav_nav .slicknav_arrow {
/* float: right; */
font-size: 1.2em; /* Adjust the size of the arrow */
content: "\25BC"; /* Unicode for down arrow */
transition: transform 0.3s ease; /* Smooth transition for arrow rotation */
}
/* When menu item is open, change arrow to up */
.slicknav_nav .slicknav_open .slicknav_arrow {
content: "\25B2"; /* Unicode for up arrow */
transform: rotate(0deg); /* Optional for smooth effect */
}
.slicknav_nav a .caret{
display: none;
}
.slicknav_nav ul{
margin: 0;
}
.slicknav_nav ul li a{
padding-left: 30px;
font-size: 14px;
color: #444;
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover{
background-color: transparent;
color: #333;
}
/* scrolling bar*/
.custom-dropdown {
background-color: #3498db00;
color: rgb(247, 242, 242);
padding: 16px;
font-size: 40px;
border: none;
cursor: pointer;
/* padding-top: 150px; */
}
@media only screen and (max-width: 600px) {
/* Your CSS styles for small screens go here */
.custom-dropdown {
background-color: #3498db00;
color: rgb(247, 242, 242);
padding: 16px;
font-size: 30px;
border: none;
cursor: pointer;
/* padding-top: 150px; */
}
}
/* The container div for the dropdown content */
/* The container div for the dropdown content */
.home-hero__dropdown {
position: relative;
display: inline-block;
z-index: 10; /* Ensure it appears above other containers */
}
/* The dropdown content (hidden by default) */
.custom-dropdown__list {
display: none;
position: relative;
background-color: #f1f1f1;
min-width: 200px;
max-height: 200px; /* Set the maximum height */
overflow-y: auto; /* Enable vertical scrolling */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100; /* Ensure dropdown is above other containers */
list-style-type: none;
padding: 0;
margin: 0;
border-radius: 6px;
opacity: 0;
/* transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateY(0px); */
}
/* Dropdown scrollable animation (fade in and drop down) */
.home-hero__dropdown:hover .custom-dropdown__list {
display: block;
opacity: 1;
/* transform: translateY(0); */
}
/* Custom fancy scrollbar for the dropdown */
.custom-dropdown__list::-webkit-scrollbar {
width: 8px;
}
.custom-dropdown__list::-webkit-scrollbar-track {
background: #f1f1f1; /* Scrollbar track background */
}
.custom-dropdown__list::-webkit-scrollbar-thumb {
background-color: #3498db; /* Scrollbar handle color */
border-radius: 10px; /* Round handle */
border: 2px solid #f1f1f1; /* Optional: Border around handle */
}
.custom-dropdown__list::-webkit-scrollbar-thumb:hover {
background-color: #2980b9; /* Darker color on hover */
}
/* Links inside the dropdown */
.custom-dropdown__link {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.custom-dropdown__link:hover {
background-color: #ddd;
}
/* Change background color of the dropdown button when dropdown content is shown */
.home-hero__dropdown:hover .custom-dropdown {
background-color: #297fb900;
}
/* Arrow-down styling */
.arrow-down {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
margin-left: 5px;
vertical-align: middle;
}
.arrow-down::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgb(244, 236, 236); /* Change color as needed */
transition: transform 0.3s;
}
/* Change the arrow direction on hover */
.dropdown-arrow {
height: 0;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
/* position: relative; */
/* top: 45px;
left: 350px; */
}
/* .user-id:hover .dropdown-arrow {
top: 35px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #333;
border-top: 10px solid transparent;
} */
/*/////////////////////////////////////////////////// expertise section //////////////////////////////////////////////////*/
.sidebar {
display: flex;
margin-top: 0px;
}
.side-navbar {
height: 100vh;
width: 30%;
position:sticky;
overflow: visible;
top: 0;
left: 0;
bottom: 0;
background-color: #11111105;
padding-top: 30px;
box-shadow: 2px 0 5px rgba(184, 147, 147, 0);
overflow-y: auto;
padding-left: 0px;
margin-left: 0px;
justify-content: end;
}
.side-navbar h3 {
margin-left: 50px;
}
.side-navbar a {
position: relative;
padding-top: 20px;
text-decoration: none;
font-size: 20px;
display: block;
margin-left: 50px;
text-transform: none;
color: #0c0b0b;
transition: color 0.3s ease, background-color 0.3s ease;
font-family: "Poppins";
font-optical-sizing: auto;
font-weight:400;
font-style: normal;
letter-spacing: 1px;
}
.side-navbar a :hover{
color: #eec762;
text-decoration: #eec762;
}
.side-navbar a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0px;
left: 0;
background-color: #eec762;
transition: width 0.3s ease;
}
.side-navbar a:hover::after {
width: 42%;
}
.side-navbar a:hover {
color: #eec762;
}
.side-navbar a.current::after {
width: 42%;
}
.side-navbar a.current {
color: #eec762;
}
.container-area {
margin-left:0px;
width:70%;
}
.wrapper {
margin: 0 auto;
min-height: 90vh;
}
.banner,
.about-area,
.service-area,
.portfolio-area,
.contact-area {
min-height: 100vh;
display: flex;
justify-content:center;
padding: 20px;
padding-top: 40px;
background-size:cover ;
box-sizing: border-box;
}
.banner {
background-image: url('../img/expertise/expertise-1.jpg');
background-size: cover;
background-position: center center;
}/* Container with background */
#about {
position: relative;
background-image: url('../img/expertise/expertise-2.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-color: rgba(0, 0, 255, 0.5);
padding: 60px 20px; /* Adjust padding as needed */
}
/* Overlay to blur the background */
#about::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* backdrop-filter: blur(2px); */
background-color: rgba(0, 0, 0, 0.108); /* Semi-transparent black layer for readability */
z-index: 1;
}
/* Text content that stays above the blurred layer */
.text-content {
position: relative;
z-index: 2; /* Ensures text stays above the blur layer */
padding-left: 80px;
padding-right: 80px;
color: white;
/* padding-top: 40px; */
}
.text-content h3 {
text-transform: none;
text-align: start;
font-size: 30px;
margin: 0;
color: white;
font-family: "Poppins";
font-optical-sizing: auto;
font-weight:600;
font-style: normal;
letter-spacing: 1px;
}
@media only screen and (max-width:990px){
.text-content h3 {
text-transform: none;
text-align: start;
font-size: 25px;
margin: 0;
color: white;
font-family: "Poppins";
font-optical-sizing: auto;
font-weight:400;
font-style: normal;
letter-spacing: 1px;
}
}
.text-content p {
padding-top: 40px;
color: white;
font-size: 18px;
padding-bottom: 20px;
font-family: "Poppins";
font-optical-sizing: auto;
font-weight:300;
font-style: normal;
}
@media only screen and (max-width:1200px){
.text-content p {
padding-top: 40px;
color: white;
font-size: 16px;
padding-bottom: 20px;
font-family: "Poppins";
font-optical-sizing: auto;
font-weight:350;
font-style: normal;
text-align: justify;
}
}
#service {
background-image: url('../img/expertise/expertise-3.webp');
background-size: cover;
background-position: center center;
}
#portfolio::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* backdrop-filter: blur(2px); */
background-color: rgba(0, 0, 0, 0.108); /* Semi-transparent black layer for readability */
z-index: 1;
}
#portfolio {
position: relative;
background-image: url('../img/expertise/expertise-4.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-color: rgba(0, 0, 255, 0.5);
padding: 60px 20px; /* Adjust padding as needed */
}
/*
#contact {
background-image: url('../img/s\ 5\ \(2\).jpg');
background-size: cover;
background-position: center center;
} */
html {
scroll-behavior: smooth;
}
@media only screen and (max-width:990px){
.container-area{
width: 100%;
}
.side-navbar {
display: none;
}
.text-content{
padding-left: 10px;
padding-right: 10px;
}
}
/* button */
.custom-btn {
width: 15%;
height: 40px;
color: #fdfcfc;
border-radius: 50px; /* Circular edges */
padding: 10px 10px;
font-weight: 500;
background: linear-gradient(0deg, rgba(255, 153, 0, 0.068) 0%, rgba(251, 77, 2, 0) 100%);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
border: 2px solid transparent;
z-index: 1;
overflow: hidden;
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
7px 7px 20px 0px rgba(0, 0, 0, .1),
4px 4px 5px 0px rgba(0, 0, 0, .1);
outline: none;
}
.custom-btn span {
position: relative;
z-index: 2;
}
.custom-btn::before {
content: "";
position: absolute;
top: 50%;
left: 0%;
width: 0;
height: 0;
background: none;
border: 5px solid rgb(91, 90, 85);
border-radius: 50%;
transform: translate(-1%, -50%);
transition: width 0.5s ease, height 0.5s ease;
z-index: 1;
}
.custom-btn:hover::before {
width: 200%;
height: 200%;
}
.custom-btn:hover {
color: rgb(219, 215, 213);
background: rgba(251, 77, 2, 0.225);
}
/* ///////////////////////////////////// Mobile view//////////////////////////////////*/
/* Media query for mobile devices with max-width 480px */
@media only screen and (max-width: 480px) {
.container-area {
width: 100%; /* Make the container full-width */
}
/* Hide the side-navbar initially */
.side-navbar {
display: none; /* Initially hide the sidebar */
width: 100%; /* Sidebar takes up the full width on mobile */
position: relative;
padding: 20px;
background-color: #111111; /* Set background color for visibility */
margin-top: 0;
top: 0;
height: auto; /* Allow the height to adjust based on content */
}
/* Show a button to toggle the sidebar */
.dropdown-btn {
display: flex; /* Show dropdown button */
justify-content: center;
align-items: center;
background-color: #eec762;
padding: 10px;
width: 100%;
cursor: pointer;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
}
/* Dropdown icon for mobile */
.dropdown-icon {
display: inline-block;
margin-left: 10px;
font-size: 18px;
transform: rotate(0deg);
transition: transform 0.3s ease;
}
/* Rotate arrow icon when sidebar is open */
.dropdown-btn.active .dropdown-icon {
transform: rotate(180deg);
}
/* Display sidebar content when dropdown button is clicked */
.side-navbar.active {
display: block; /* Show the sidebar when active */
}
/* Ensure the sidebar links look good on mobile */
.side-navbar a {
margin-left: 0; /* Remove extra margin on mobile */
text-align: center; /* Center the links on mobile */
padding: 15px 0;
font-size: 16px;
color: #fff;
border-bottom: 1px solid #eec762;
}
.side-navbar a:hover {
background-color: #eec762;
color: #111;
}
.text-content {
padding-left: 10px;
padding-right: 10px;
}
/* Adjust button styles for mobile */
.custom-btn {
width: 80%; /* Increase button width on mobile */
height: 45px;
font-size: 18px;
padding: 12px;
}
}
/* Sidebar and Button Visibility */
/* Project slider section */
.project-slider {
display:contents;
justify-content: center;
width: 100%;
max-width: 800px;
margin: auto;
height: auto;
justify-items: center;
}
.project-slider .slide-info h3{
font-size: 30px;
align-items: center;
margin-left: 0%;
justify-items: center;
color: black;
}
.slide-info{
justify-items: center;
align-items: center;
width: 100%;
background-color: #f0f7fa;
}
.slide-container {
position: relative;
width: 100%;
height: 600px;
border: 3px solid #ede6d600;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.015);
background-color: #f0f7fa;
transition: transform 0.5s ease-in-out; /* Smooth slide animation */
}
@media (max-width: 768px) {
.slide-container {
position: relative;
width: 100%;
height: 600px;
border: 3px solid #ede6d600;
padding-left: 4px;
padding-right: 4px;
padding-top: 50px;
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.015);
background-color: #f0f7fa;
}
.action-btn {
width: 10rem;
height: auto;
margin-bottom: 10px;
padding-left: 0px;
}
}
.project-slider .slide-info p{
margin-left: 80px;
margin-right: 80px;
align-items: center;
text-align: justify;
font-size: 18px;
color: black;
}
@media only screen and (max-width: 600px) {
/* Your CSS styles for small screens go here */
.project-slider .slide-info p{
margin-left: 20px;
margin-right: 20px;
align-items: center;
text-align: justify;
font-size: 13px;
font-weight: 300;
font-style: normal;
}
}
.slide-container .slides {
width: 100%;
height: calc(100% - 40px);
position: relative;
overflow: hidden;
}
.slide-container .slides .slide {
width: 100%;
height: 100%;
position: absolute;
background-size: cover;
background-position: center;
display: none;
animation: none;
}
.slide-container .slides .slide h4{
justify-content: end;
text-align: center;
color: white;
font-size: 30px;
padding-top: 350px;
}
.slide-container .slides .slide .button-container{
width: 100%;
justify-items: center;
padding-left: 42%;
}
@media (min-width:1000px) and (max-width: 1050px) {
/* Your CSS styles for small screens go here */
.slide-container .slides .slide .button-container{
width: 100%;
justify-items: center;
padding-left: 35%;
}
}
@media only screen and (max-width: 1000px) {
/* Your CSS styles for small screens go here */
.slide-container .slides .slide .button-container{
width: 100%;
justify-items: center;
padding-left: 32%;
}
}
@media only screen and (max-width: 600px) {
/* Your CSS styles for small screens go here */
.slide-container .slides .slide h4{
justify-content: end;
text-align: center;
color: white;
font-size: 20px;
padding-top: 350px;
}
.slide-container .slides .slide .button-container{
width: 100%;
justify-items: center;
padding-left: 20%;
}
}
@media only screen and (max-width: 480px) {
/* Your CSS styles for small screens go here */
.slide-container .slides .slide h4{
justify-content: end;
text-align: center;
color: white;
font-size: 20px;
padding-top: 350px;
}
.slide-container .slides .slide .button-container{
width: 100%;
justify-items: center;
padding-left:18%;
}
}
/* buttons*/
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
left: 5px;
right: 40px;
font-size: 14px;
vertical-align: middle;
text-decoration: none;
background: transparent;
justify-content: center;
padding: 0;
}
.action-btn {
width: 10rem;
height: auto;
margin-bottom: 10px;
}
.action-btn .circle-effect {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
display: block;
margin: 0;
width: 2.4rem;
height: 2.4rem;
background: #0000007e; /* Adjust color if needed */
border-radius: 1.625rem;
}
.action-btn .circle-effect .icon-arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff; /* Adjust color if needed */
}
.action-btn .circle-effect .icon-arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.3rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
.action-btn .circle-effect .icon-arrow::before {
position: absolute;
content: '';
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff; /* Adjust color if needed */
border-right: 0.125rem solid #fff; /* Adjust color if needed */
transform: rotate(45deg);
}
.action-btn .btn-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.50rem 0;
margin: 0 0 0 1.4rem;
color: #000; /* Adjust color if needed */
font-weight: 700;
line-height: 1.6;
text-align: start;
padding-left: 25px;
font-family: "Poppins";
font-optical-sizing: auto;
font-weight:400;
font-style: normal;
}
.action-btn:hover .circle-effect {
width: 100%;
}
.action-btn:hover .circle-effect .icon-arrow {
background: #fff; /* Adjust color if needed */
transform: translate(1rem, 0);
}
.action-btn:hover .btn-text {
color: #fff; /* Adjust color if needed */
}
.slide-container .slides .active {
display: block;
/* animation: slide-in 1s ease-in-out forwards;*/
}
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
span.next, span.prev {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 14px;
color: #1d1919;
font-size: 24px;
font-weight: bold;
transition: 0.5s;
border-radius: 3px;
user-select: none;
cursor: pointer;
z-index: 1;
}
span.next {
right: 50px;
}
span.prev {
left: 50px;
}
@media (max-width: 480px) {
span.next {
right: 10px;
}
span.prev {
left: 10px;
}
}
span.next:hover, span.prev:hover {
background-color: #ede6d6;
opacity: 0.8;
color: #fff6f6;
}
.dotsContainer {
position: absolute;
bottom: 5px;
z-index: 3;
left: 50%;
transform: translateX(-50%);
}
.dotsContainer .dot {
width: 15px;
height: 15px;
margin: 0px 2px;
border: 3px solid #bbb;
border-radius: 50%;
display: inline-block;
cursor: pointer;
transition: background-color 0.6s ease;
}
.dotsContainer .dot.active {
background-color: #555;
}
@keyframes next1 {
from { left: 0%; }
to { left: -100%; }
}
@keyframes next2 {
from { left: 100%; }
to { left: 0%; }
}
@keyframes prev1 {
from { left: 0%; }
to { left: 100%; }
}
@keyframes prev2 {
from { left: -100%; }
to { left: 0%; }
}
/* ==========================================================================
About Section
========================================================================== */
.about-section{}
.about-wrap{}
.about-content{}
.about-content h2{
margin-bottom: 30px;
font-family: "Poppins";
font-weight: 400;
font-style: normal;
font-size: 26px;
}
.about-content .default-btn{
margin-top: 40px;
}
.about-bg{
background-image: url(../img/about2.jpg);
background-position: top right;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 500px;
top: 0;
right: 0;
position: relative;
}
@media (max-width: 600px) {
.about-bg{
background-image: url(../img/about2.jpg);
background-position: top right;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 400px;
top: 0;
right: 0;
position: relative;
}
.year-content{
position: absolute;
width: auto;
height: auto;
left: 80px;
top: 40px;
}
}
@media only screen and (min-width: 770px) and (max-width: 1200px) {
.about-bg {
background-image: url("../img/about2.jpg");
background-position: top right;
background-repeat: no-repeat;
width: 100%;
height: 400px;
top: 0;
right: 0;
position: relative;
}
}
.dots{
position: absolute;
left: -80px;
top: 150px;
width: 50%;
height: 50%;
background: url(../img/dots.png) 0 0 repeat;
z-index: -1;
}
.year-content{
position: absolute;
width: auto;
height: auto;
left: 80px;
top: 150px;
}
.year-content h2{
color: #fff;
font-size: 90px;
position: relative;
/* margin-bottom: 20px; */
/* bottom: 100px; */
z-index: 1;
}
.year-content h2:before{
background-color: transparent;
position: absolute;
content: "";
width: 110px;
height: 90px;
border: 5px solid #eabd0a;
left: -10px;
bottom: -1px;
z-index: -1;
}
.year-content span{
font-family: "Poppins";
font-style: normal;
color: #fff;
text-transform: uppercase;
font-weight: 400;
font-size: 13px;
}
.grid-container1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 60px;
margin-bottom: 10px;
}
.grid-container1 .grid-item {
display: flex;
align-items: center;
}
.grid-container1 .grid-item i {
color: #d5b139;
font-size: 24px;
margin-right: 10px;
}
.grid-container1 .grid-item p {
font-size: 16px;
margin: 0;
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
.grid-container1 .grid-item .email{
font-size: 14px;
}
.grid-container1 .grid-item #email{
width: fit-content;
padding-left: 0px;
gap: 0px;
}
}
/* About Style 2
===============*/
.about-wrap{
display: flex;
/* align-items: center; */
}
.section-2 .about-content{}
.section-2 .about-content h4{
font-size: 18px;
font-weight: 500;
margin-bottom: 20px;
}
.about-list{}
.about-list li{
display: flex;
align-items: center;
line-height: 30px;
color: #263a4f;
}
.about-list li i{
font-size: 10px;
color: #e0bf19;
margin-right: 10px;
}
.year-box{
padding-left: 150px;
}
.year-text-inner{
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
text-align: center;
}
.year-bg{
padding: 60px;
background-size: 100%;
background-position: top center;
width: auto;
position: relative;
}
.year-bg:before {
content: '';
position: absolute;
z-index: 1;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
background: #fff;
}
.year-info{
color: #263a4f;
font-size: 30px;
text-transform: uppercase;
position: relative;
z-index: 2;
text-align: center;
}
.year-tittle{
background: inherit;
font-size: 200px;
line-height: 1;
font-family: 'Poppins', sans-serif;
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
z-index: 2;
font-weight: 700;
letter-spacing: -2px;
}
.year-description{
font-family: 'Poppins';
color: #263a4f;
font-size: 22px;
line-height: 28px;
letter-spacing: -1px;
font-weight: 600;
position: relative;
z-index: 2;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 0px;
}
.grid-item {
padding: 20px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 0px;
text-align: left;
}
.grid-item h4 {
font-size: 18px;
margin-bottom: 10px;
}
.grid-item p {
font-size: 14px;
line-height: 1.4;
}
@media (max-width: 768px) {
.grid-container {
display: grid;
grid-template-columns: none;
gap: 20px;
margin-top: 20px;
}
}
/* About Syle 3*/
.about-section.bg-dark{}
.about-section.bg-dark .about-list li{
color: #fff;
}
/* Video Box
=============*/
.about-section.bg-dark .video-play-bg{
background-image: url(../img/video-bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 350px;
border-radius: 5px;
}
.about-section.bg-dark .play-icon{
background-color: #f8e119;
color: #fff;
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
border-radius: 50%;
font-size: 20px;
}
.about-section.bg-dark .play-icon:hover{
transform: scale(1.1);
color: #fff;
}
/* About Style 4*/
.about-section .about-slider-wrap{
background-image: url(../img/about-slider-bg.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: 80%;
padding-right: 30px;
}
.about-carousel{
width: 400px;
height: auto;
padding: 100px 0;
margin-left: auto;
}
/* Nav Style
=============*/
.about-carousel.carousel-nav .owl-nav div{
background-color: #fff;
width: 80px;
}
.carousel-nav .owl-nav{
position: absolute;
width: auto;
height: auto;
right: 0;
bottom: 100px;
z-index: 1;
display: inline-block;
}
.carousel-nav .owl-nav div{
background-color: #f2f2f2;
display: inline-block;
color: #999;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
}
.carousel-nav .owl-nav div:hover{
color: #222;
}
/* why choose us section */
.why-choose-us-section {
display: flex;
flex-wrap: nowrap;
padding-left: 120px;
padding-right: 120px;
}
.why-choose-us-section .container {
width: 33%;
padding: 0 15px;
box-sizing: border-box;
}
.why-choose-us-section .container1 {
width: 90%;
padding: 0 15px;
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap:wrap;
margin: 0 -15px;
}
.row1{
display: flex;
flex-wrap: nowrap;
margin: 0 -15px;
}
@media (max-width: 768px) {
.row {
display: flex;
flex-wrap: wrap;
margin: 0px;
padding-top: 20px;
flex-direction: column;
}
.row1 {
display: flex;
flex-wrap: wrap;
margin: 0px;
flex-direction: column;
}
}
@media (max-width: 980px) {
.row1 {
display: flex;
flex-wrap: nowrap;
margin: 0px;
flex-direction: column;
}
}
.col-md-6 {
flex: 1;
padding: 0 15px;
max-width: 100%;
box-sizing: border-box;
}
h2 {
font-size: 36px;
margin-bottom: 10px;
color: #333;
}
h3 {
font-size: 18px;
margin-bottom: 10px;
font-weight: 600;
color: #000000;
}
.test-container .my-carousel h3{
font-size: 20px;
margin-bottom: 0px;
font-weight: 400;
color: #ffffff;
}
.test-container .my-carousel p{
font-size: 14px;
}
p {
font-size: 16px;
line-height: 1.6;
color: #666;
font-family: "Poppins";
font-weight: 400;
font-style: normal;
}
.about-content {
margin-bottom: 40px;
margin-top: 0px;
padding-left: 25px;
padding-right: 25px;
}
.grid-container1 {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.grid-item {
flex: 1 1 calc(50% - 20px);
display: flex;
align-items: flex-start;
gap: 0px;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
}
.grid-item i {
font-size: 15px;
color: #ffffff;
}
.grid-container1 .grid-item {
flex: 1 1 calc(50% - 20px);
display: flex;
align-items: flex-start;
gap: 10px;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
}
.default-btn {
display: inline-block;
padding: 0px 10px;
background-color: #f7b04c;
color: #fff;
text-decoration: none;
border-radius: 5px;
margin-top: 20px;
font-family: Poppins;
}
.sections-wrapper {
display: flex;
flex-wrap: nowrap;
gap: 40px;
}
.section {
flex: 1 1 33%;
padding: 0 15px;
box-sizing: border-box;
}
.why-choose-us-section .container p{
color: white;
}
.why-choose-us-section .container .grid-container1 .grid-item {
background-color: rgba(255, 255, 255, 0);
flex: 1 1 calc(50% - 20px);
display: flex;
align-items: flex-start;
gap: 10px;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
}
@media screen and (max-width:990px){
.why-choose-us-section .container {
width: 99%;
padding: 4px;
box-sizing: border-box;
}
.why-choose-us-section {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: space-around;
justify-content: center;
align-items: center;
}
.why-choose-us-section .container .grid-container1 .grid-item {
background-color: rgba(255, 255, 255, 0);
flex: 1 1 calc(50% - 20px);
display: flex;
align-items: flex-start;
gap: 10px;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
}
}
/* ==========================================================================
Service Section
========================================================================== */
.service-section{
position: relative;
z-index: 1;
}
.service-section .dots{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(../img/bg-dots.png) 0 0 repeat;
z-index: -1;
}
.service-wrap{}
.service-item{
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.service-thumb{
overflow: hidden;
z-index: -1;
}
.service-item:hover{
cursor: pointer;
}
.service-content{
padding: 0 30px 30px 30px;
margin-top: -30px;
}
.service-content i{
color: #fff;
display: inline-block;
margin-bottom: 10px;
z-index: 1;
}
.service-content i:before{
background-color: #db960c;
border-radius: 2px;
padding: 10px;
}
.service-item a{
color: #f3b712;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
}
/* Service Style 2
====================*/
.section-2 .service-item{
background-color: #fff;
padding: 40px;
padding-top: 30px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease-in-out;
}
.section-2 .service-item:hover{
background-color: #e3b911;
transition: all 0.2s ease-in-out;
cursor: pointer;
}
.section-2 .service-item:hover i,
.section-2 .service-item:hover h3,
.section-2 .service-item:hover p,
.section-2 .service-item:hover a{
color: #fff;
}
.section-2 .service-item i{
color: #f2c40d;
margin-bottom: 10px;
display: block;
}
.section-2 .service-item h3{
font-size: 18px;
line-height: 26px;
letter-spacing: -1px;
}
/*Dark Background*/
.bg-dark .service-item{
background-color: #242323;
border: 1px solid rgba(255,255,255,0.05);
border-bottom: 3px solid #e3bf0a;
}
/* Service Style 3
====================*/
.service-box{
display: flex;
align-items: center;
}
.service-box i{}
.service-box i:before{
background-color: #edb80c;
padding: 15px;
color: #fff;
border-radius: 2px;
}
.service-box .service-info{
padding-left: 20px;
}
.service-box .service-info h3{
margin-bottom: 5px;
}
.service-box .service-info p{
margin-bottom: 0;
}
/* ==========================================================================
Projects Section
========================================================================== */
.projects-section{}
.projects-section .container-fluid{
padding: 0;
}
.projects-carousel{}
.project-item{
position: relative;
overflow: hidden;
z-index: 1;
}
.project-item .overlay{
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: block;
visibility: hidden;
opacity: 0;
z-index: 1;
}
.project-item:hover .overlay{
visibility: visible;
opacity: 1;
transition: all 300ms ease;
}
.projects-content{
position: absolute;
width: 100%;
height: auto;
/* left: 100px; */
align-items: end;
bottom: 1px;
text-align: center;
align-items: center;
padding: 1px;
z-index: 1;
background-color: #13131337;
/* transform: translateY(20px);
-webkit-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease; */
}
@media only screen and (max-width: 1200px) {
/* Your CSS styles for small screens go here */
.projects-content{
position: absolute;
width: 100%;
height: auto;
text-align: center;
align-items: center;
top: 140px;
bottom: 1px;
padding: 50px;
z-index: 1;
/* transform: translateY(20px);
-webkit-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease; */
}
}
@media only screen and (max-width: 770px) {
/* Your CSS styles for small screens go here */
.projects-content{
position: absolute;
width: 100%;
height: auto;
text-align: center;
align-items: center;
top:130px;
bottom: 1px;
padding: 50px;
z-index: 1;
background-color: #13131300;
/* transform: translateY(20px);
-webkit-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease; */
}
}
@media only screen and (max-width: 600px) {
/* Your CSS styles for small screens go here */
.projects-content{
position: absolute;
width: 100%;
height: auto;
text-align: center;
align-items: center;
top:130px;
bottom: 1px;
padding: 50px;
z-index: 1;
background-color: #13131300;
/* transform: translateY(20px);
-webkit-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease; */
}
}
@media only screen and (max-width: 400px) {
/* Your CSS styles for small screens go here */
.projects-content{
position: absolute;
width: 100%;
height: auto;
text-align: center;
align-items: center;
top:120px;
bottom: 1px;
padding: 50px;
z-index: 1;
background-color: #13131300;
/* transform: translateY(20px);
-webkit-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease; */
}
}
.project-item:hover .projects-content{
transform: translateY(0);
}
.projects-content .category{
font-family: "Poppins";
text-transform: uppercase;
font-weight: 500;
font-size: 12px;
margin-bottom: 15px;
color: #fff;
display: block;
}
.projects-content .tittle{
font-size: 20px;
color: #fff;
line-height: 28px;
font-weight: 600;
letter-spacing: 0;
display: block;
font-family:"Poppins";
}
.project-item .view-icon{
position: absolute;
width: auto;
height: auto;
right: 40px;
top: 30px;
display: block;
font-size: 25px;
color: #fff;
visibility: hidden;
opacity: 0;
-webkit-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}
.project-item:hover .view-icon{
cursor: pointer;
right: 20px;
visibility: visible;
opacity: 1;
z-index: 1;
}
/* Project Style 2
===================*/
.project-2 {
position: relative;
z-index: 1;
}
.project-2 .dots{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(../img/bg-dots.png) 0 0 repeat;
z-index: -1;
}
.project-2 .project-item{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.project-2 .project-item .project-thumb{
width: 100%;
height: 100%;
}
.project-2 .project-item .project-content{
padding: 50px;
}
.project-2 .project-item .project-content h3 a{
color: #263a4f;
}
.project-2 .project-item .project-content h3 a:hover{
text-decoration: underline;
color: #e2a60e;
}
.project-2 .project-item .project-content p{
margin-bottom: 30px;
}
/* ==========================================================================
Projects Single Section
========================================================================== */
.project-single-section{
position: relative;
z-index: 1;
}
.project-single-section .dots{
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(../img/bg-dots.png) 0 0 repeat;
z-index: -1;
}
.project-single-content{
background-color: #fff;
padding: 50px 30px;
}
.project-single-content p,
.project-single-content h2{
margin-bottom: 20px;
}
.project-single-content .project-details li{
line-height: 40px;
}
.project-single-content .project-details span{
text-transform: uppercase;
font-weight: 600;
color: #263a4f;
font-size: 14px;
letter-spacing: 0;
width: 150px;
display: inline-block;
}
/* ==========================================================================
Counter Section
========================================================================== */
.counter-content{
text-align: center;
}
.counter-content h2{
font-size: 48px;
position: relative;
display: inline-block;
z-index: 1;
}
.counter-content h2:before{
background-color: transparent;
position: absolute;
content: "";
width: 110px;
height: 110px;
left: -55px;
top: -20px;
border: 5px solid #d6970f;
opacity: 0.5;
z-index: -1;
}
.counter-content span{
font-family: "Poppins";
font-style: 12px;
color: #263a4f;
font-weight: 600;
padding-left: 20px;
display: block;
}
.counter-section.bg-dark{}
.counter-section.bg-dark span{
color: #fff;
}
/* ==========================================================================
Team Section
========================================================================== */
.team-section{}
.bg-dark{
position: relative;
z-index: 1;
}
.team-section.bg-dark .dots{
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(../img/bg-dots.png) 0 0 repeat;
z-index: -1;
}
.team-item{
position: relative;
overflow: hidden;
z-index: 1;
}
.team-item img{
width: 100%;
}
.team-item .team-content{
display: block;
}
.team-item .team-content h3{
position: absolute;
width: auto;
height: auto;
left: 0;
bottom: -58px;
background-color: #fff;
box-shadow: 0px 14px 70px -10px rgba(0,0,0,.15);
transform: rotate(-90deg);
transform-origin: 0 0;
padding: 10px 15px;
font-size: 16px;
z-index: 2;
}
/*Dark Background*/
.bg-dark .team-item .team-content h3{
color: #263a4f;
}
.team-item .team-content span{
position: absolute;
width: auto;
height: auto;
right: 20px;
bottom: 20px;
color: #fff;
font-size: 10px;
letter-spacing: 1px;
padding: 5px 10px;
background-color: #cc960d;
box-shadow: 0px 14px 70px -10px rgba(0,0,0,.15);
text-transform: uppercase;
font-weight: 600;
z-index: 2;
}
.team-item .team-social{
position: absolute;
width: auto;
height: auto;
right: 20px;
top: 20px;
visibility: hidden;
opacity: 0;
z-index: 2;
transition: all 0.3s linear;
}
.team-item .team-social li{
transform: translateX(100px);
transition: all 0.3s linear;
}
.team-item .team-social li:nth-child(1){
transition-delay: 0ms;
}
.team-item .team-social li:nth-child(2){
transition-delay: 100ms;
}
.team-item .team-social li:nth-child(3){
transition-delay: 150ms;
}
.team-item .team-social li:nth-child(4){
transition-delay: 200ms;
}
.team-item:hover .team-social li{
transform: translateX(0);
}
.team-item .team-social li a{
color: #fff;
margin-bottom: 10px;
display: block;
}
.team-item:hover img{
transform: scale(1.08);
cursor: pointer;
}
.team-item:hover .team-social{
visibility: visible;
opacity: 1;
}
.team-item .overlay{
background-color: rgba(0,0,0,0.2);
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
visibility: hidden;
opacity: 0;
}
.team-item:hover .overlay{
visibility: visible;
opacity: 1;
}
/* ==========================================================================
Testimonial Section
========================================================================== */
.test {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding-bottom: 20px;
/* Make the parent container full height */
text-align: center; /* Center text inside the div */
}
.test h4, .test h2 {
margin: 0; /* Remove default margins */
}
.testimonial-section{
position: relative;
z-index: 1;
}
.testimonial-section .dots{
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(../img/bg-dots.png) 0 0 repeat;
z-index: -1;
}
/*Dark Background*/
.bg-dark .dots{
opacity: 0.1;
}
.testi-item img{
width: 100px!important;
height: 100px;
line-height: 100px;
border-radius: 50%;
}
.testi-content{
padding-left: 20px;
}
.testi-content h3{
font-size: 16px;
display: inline-block;
font-weight: 600;
margin: 0;
}
.testi-content span{
display: block;
font-size: 12px;
text-transform: uppercase;
}
.testi-item{
background-color: #fff;
position: relative;
padding: 30px;
border-left: 4px solid #d48611;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.testi-item .fa-quote-right{
position: absolute;
right: 30px;
bottom: 25px;
font-size: 50px;
color: #e6a611;
opacity: 0.5;
}
/*Rattings*/
.testi-content .rattings{
display: inline-block;
margin-left: 5px;
}
.testi-content .rattings li{
display: inline-block;
}
.testi-content .rattings li i{
font-size: 10px;
color: #e8b212;
display: inline-block;
}
/*Boolets*/
.owl-controls .owl-dots{
width: 100%;
height: auto;
position: absolute;
left: 0;
bottom: -50px;
text-align: center;
}
.owl-controls .owl-dots .owl-dot{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 1px;
background-color: #555;
margin: 0 3px;
position: relative;
text-align: center;
}
.owl-controls .owl-dots .owl-dot.active{
background-color: #d7a10c;
}
/*new testimonial css*/
.test-container {
height: 70vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
flex-direction: column;
}
.test-container h2{
font-size: 28px;
}
.test-container h3{
color: white;
}
.testimonial {
position: relative;
max-width: 900px;
width: 100%;
padding: 50px 0;
overflow: hidden;
}
.testimonial .image {
height: 60px;
width: 60px;
object-fit: cover;
border-radius: 50%;
}
.testimonial .slide {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
row-gap: 30px;
height: 100%;
width: 100%;
}
.slide p {
text-align: center;
padding: 0 160px;
font-size: 14px;
font-weight: 400;
color: #333;
}
.slide .quote-icon {
font-size: 30px;
color: #4070f4;
}
.slide .test-details {
display: flex;
flex-direction: column;
align-items: center;
}
.details .name {
font-size: 14px;
font-weight: 600;
color: #333;
}
.test-details .job {
font-size: 12px;
font-weight: 400;
color: #333;
}
/* swiper button css */
.nav-btn {
height: 40px;
width: 40px;
border-radius: 50%;
transform: translateY(30px);
background-color: rgba(0, 0, 0, 0.1);
transition: 0.2s;
}
.nav-btn:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.nav-btn::after,
.nav-btn::before {
font-size: 20px;
color: #fff;
}
.swiper-pagination-bullet {
background-color: rgba(0, 0, 0, 0.8);
}
.swiper-pagination-bullet-active {
background-color: #4070f4;
}
@media screen and (max-width: 768px) {
.slide p {
padding: 0 20px;
}
.nav-btn {
display: none;
}
.test-container h4{
font-size: 16px;
}
}
/* ==========================================================================
CTA Section
========================================================================== */
.cta-section{
background-image: url(../img/cta-bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100%;
}
.cta-content h2{
color: #fff;
}
.cta-content p{
color: #ddd;
}
/* ==========================================================================
Hero Section
========================================================================== */
.hero-section{
background-image: url(../img/home-classic-background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 650px;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.hero-content h1{
font-size: 62px;
color: #fff;
letter-spacing: -2px;
margin-bottom: 20px;
}
.hero-content p{
color: #ddd;
}
.hero-section .scroll-down{
width: 2px;
height: 80px;
position: absolute;
left: calc(50% - 1px);
bottom: 100px;
overflow: hidden;
}
.hero-section .scroll-down:before{
background-color: #fff;
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
-webkit-animation: scroll-down 2.0s ease-in-out forwards infinite;
animation: scroll-down 2.0s ease-in-out forwards infinite;
}
@-webkit-keyframes scroll-down {
0% {top:-100%; }
100% {
top: 100%;
}
}
@keyframes scroll-down {
0% {
top: -100%;
} 100% {
top: 100%;
}
}
/*Video Hero
=============*/
.hero-section.video-hero{}
.hero-section.video-hero{
background-image: url(../img/home-video-background.jpg);
}
.hero-section.video-hero:before{
background-color: rgba(0,0,0,0.2);
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
.video-hero h1{
font-size: 42px;
}
.hero-section .video-bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/* ==========================================================================
Page Header Section
========================================================================== */
.page-header{
background-image: url(../img/about1.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 400px;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.page-header:before{
background-color: rgba(0,0,0,0.5);
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
.page-header1{
background-image: url(../img/about\ 1.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 400px;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.page-header1:before{
background-color: rgba(0,0,0,0.5);
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
.page-header2{
background-image: url(../img/contact\ 1.webp);
background-repeat: no-repeat;
background-position:left;
background-size:cover;
width: 100%;
height: 400px;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.page-header2:before{
background-color: rgba(0,0,0,0.5);
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
.page-content{}
.page-content h2{
color: #fff;
font-size: 45px;
font-family: "Poppins";
font-weight: 600;
font-style: normal;
}
.page-content p{
color: #ddd;
margin: 0;
}
/* ==========================================================================
404 Error Section
========================================================================== */
.error-section{}
.error-content{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
justify-content: center;
}
.error-content img{
max-width: 100%;
}
.error-content .error-info{
padding-left: 50px;
text-align: center;
}
.error-content .error-info h2{
font-size: 200px;
line-height: 200px;
letter-spacing: -10px;
}
.error-content .error-info a{
color: #263a4f;
font-weight: 600;
text-decoration: underline;
}
.error-content .error-info a:hover{
color: #bfca02;
}
/* ==========================================================================
Contact Section
========================================================================== */
.contact-section{
position: relative;
z-index: 1;
}
.contact-section .dots{
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(../img/bg-dots.png) 0 0 repeat;
z-index: -1;
}
.contact-info h3{
line-height: 28px;
}
.contact-info h4{
font-size: 15px;
line-height: 28px;
}
.contact-info span{
text-transform: uppercase;
margin-right: 5px;
}
/* Form Style
===============*/
.form-control{
background-color: #fff;
border-radius: 0;
padding: 15px 10px;
box-shadow: none;
}
.form-control:focus{
border-color: #bfca02;
box-shadow: none;
outline: none;
}
#form-messages{
display: none;
}
#form-messages.alert-danger,
#form-messages.alert-success{
display: block;
}
/* Google Map*/
#google-map{
width: 100%;
height: 400px;
}
/* ==========================================================================
Blog Section
========================================================================== */
.blog-section{}
.blog-section.bg-dark .dots{
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(../img/bg-dots.png) 0 0 repeat;
z-index: -1;
}
.blog-wrap{}
.blog-item{
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.blog-item .blog-thumb{
position: relative;
}
.blog-item .blog-thumb .category{
background-color: #e3bf0a;
padding: 5px 15px;
text-align: center;
color: #fff;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
position: absolute;
width: auto;
height: auto;
left: 0;
bottom: 0;
margin-bottom: -14px;
}
.blog-item .blog-thumb .category a{
color: #fff;
}
.blog-item .blog-thumb img{
width: 100%;
margin: 0;
}
.blog-content{
background-color: #f9fafa;
padding: 30px;
}
/*Bg-dark*/
.bg-dark .blog-content{
background-color: #242323;
border: 1px solid rgba(255,255,255,0.1);
border-bottom: 5px solid #bfca02;
}
.bg-dark .blog-content h3 a{
color: #fff;
}
.bg-dark .blog-content p{
color: #999;
}
.bg-dark .blog-content .read-more{
color: #fff;
}
.blog-content h3{
line-height: 24px;
}
.blog-content h3 a{
color: #263a4f;
font-size: 18px;
line-height: 24px;
}
.blog-content h3 a:hover{
color: #e3bf0a;
}
.blog-content .read-more{
color: #263a4f;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
position: relative;
padding-left: 40px;
}
.blog-content .read-more:hover{
color: #e3bf0a;
}
.blog-content .read-more:before{
background-color: #e3bf0a;
position: absolute;
content: "";
width: 30px;
height: 4px;
left: 0;
top: calc(50% - 2px);
}
/* Pagination
=============== */
.pagination-wrap{}
.pagination-wrap li{
display: inline-block;
margin: 0 5px;
}
.pagination-wrap.text-left li {
margin: 0 10px 0 0;
}
.pagination-wrap li a{
border: 1px solid #e5e5e5;
display: inline-block;
width: 40px;
height: 40px;
line-height: 38px;
text-align: center;
color: #263a4f;
font-weight: 600;
border-radius: 2px;
}
.pagination-wrap li a:hover{
background-color: #bfca02;
color: #fff;
opacity: 1;
text-decoration: none;
}
.pagination-wrap li a.active{
background-color: #bfca02;
border: 1px solid #bfca02;
color: #fff;
}
/* Sidebar Style
===============*/
.sidebar-wrap{
padding-left: 40px;
}
.sidebar-wrap .widget-content{
margin-bottom: 40px;
}
.sidebar-wrap .widget-content h4{
position: relative;
margin-bottom: 30px;
}
.sidebar-wrap .widget-content h4:before{
background-color: #bfca02;
position: absolute;
content: "";
width: 20%;
height: 3px;
left: 0;
bottom: -5px;
}
.sidebar-wrap .widget-content .widget-links li a:hover{
text-decoration: underline;
}
/* Search Form Style
===================*/
.search-form{
position: relative;
margin-left: -2px;
}
.search-form .form-control{
background-color: #f5f5f5;
box-shadow: none;
width: 100%;
display: block;
border: 1px solid #e5e5e5;
color: #263a4f;
height: auto;
padding: 15px 20px;
border-radius: 2px;
padding-right: 60px;
}
.search-form .search-btn{
background-color: transparent;
font-size: 15px;
color: #263a4f;
width: 60px;
height: 100%;
position: absolute;
top: 0;
right: 0;
display: block;
padding: 10px 0;
opacity: 0.6;
}
.search-form .search-btn:focus,
.search-form .search-btn:hover{
opacity: 1;
cursor: pointer;
}
.search-form input::-webkit-input-placeholder{
color: #8d9aa8 !important;
}
.search-form input:-moz-placeholder{ /* Firefox 18- */
color: #8d9aa8 !important;
}
.search-form input::-moz-placeholder{ /* Firefox 19+ */
color: #8d9aa8 !important;
}
.search-form input:-ms-input-placeholder{
color: #8d9aa8 !important;
}
/* Thumbnails Post Style
========================*/
.thumb-post{}
.thumb-post li{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: top;
margin-bottom: 20px;
}
.thumb-post li:last-child{
margin-bottom: 0;
}
.thumb-post li img{
width: 100px;
display: block;
}
.thumb-post li a{
font-family: "Poppins";
font-size: 15px;
font-weight: 600;
color: #263a4f;
padding-left: 15px;
letter-spacing: -0.5px;
}
.thumb-post li a:hover{
color: #bfca02;
text-decoration: underline;
}
/* Tag Cloud Style
==================*/
.widget-content .tags{}
.widget-content .tags li{
display: inline-block;
}
.widget-content .tags li a{
display: inline-block;
background-color: #bfca02;
padding: 5px 10px;
border-radius: 2px;
font-size: 12px;
color: #fff;
margin: 3px;
}
.widget-content .tags li a:hover{
background-color: #263a4f;
color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* ==========================================================================
Blog Single Section
========================================================================== */
.blog-thumb{}
.blog-thumb img{
margin-bottom: 20px;
}
.blog-single-content{}
.blog-single-content h2 a{
font-size: 28px;
color: #263a4f;
}
.blog-single-content h2 a:hover{
color: #bfca02;
}
.single-post-meta{
margin-bottom: 20px;
}
.single-post-meta li{
display: inline-block;
margin-right: 20px;
}
.single-post-meta li i{
font-size: 12px;
color: #bfca02;
margin-right: 5px;
}
.single-post-meta li a{
display: inline-block;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
color: #263a4f;
}
/* Blog Quote
===============*/
blockquote{
background-color: #f5f5f5;
padding: 40px;
border-left: 4px solid #bfca02;
margin: 30px 0;
position: relative;
z-index: 1;
}
blockquote .dots{
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(../img/bg-dots.png) 0 0 repeat;
z-index: -1;
}
blockquote p{
color: #263a4f;
font-size: 20px;
}
blockquote span{
display: block;
margin-top: 20px;
color: #263a4f;
}
/* Post Tags Style
==================*/
.post-tags{
margin-top: 30px;
}
.post-tags li{
display: inline-block;
}
.post-tags li a{
display: inline-block;
background-color: #bfca02;
padding: 5px 10px;
border-radius: 2px;
font-size: 12px;
color: #fff;
margin: 3px;
}
.post-tags li a:hover{
background-color: #263a4f;
color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Author Box Style
====================*/
.author-box{
display: flex;
align-items: center;
padding: 30px;
margin-top: 30px;
border-left: 4px solid #bfca02;
}
.author-box img{
border-radius: 50%;
}
.author-info{
padding-left: 30px;
}
.author-info h3{
font-size: 18px;
line-height: 28px;
margin-bottom: 5px;
}
.author-box .social-icon{}
.author-box .social-icon li{
display: inline-block;
margin-right: 8px;
}
.author-box .social-icon li a{
font-size: 14px;
color: #263a4f;
}
.author-box .social-icon li a:hover{
color: #bfca02;
}
/* Post Navigation
====================*/
.post-navigation {
border: 1px solid #e5e5e5;
margin-top: 40px;
margin-left: 0;
margin-right: 0;
}
.post-navigation .col{
padding: 20px;
}
.post-navigation .col:not(:last-of-type){
border-right: 1px solid rgba(17,17,17,0.04);
}
.post-navigation .col a{
color: #263a4f;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
display: flex;
align-items: center;
}
.post-navigation .col.next-post a{
justify-content: flex-end;
}
.post-navigation .col i{
display: inline-block;
font-size: 14px;
}
.post-navigation .ti-arrow-left{
margin-right: 10px;
}
.post-navigation .ti-arrow-right{
margin-left: 10px;
}
.post-navigation .col a:hover{
color: #bfca02;
}
.post-navigation .col.prev-post .fa{
margin-right: 10px;
}
.post-navigation .col.next-post .fa{
margin-left: 10px;
}
/* Comments Style
==================*/
.blog-single-wrap .comments-area {
margin-top: 40px;
}
.blog-single-wrap .comments-area .comments {
border-bottom: 0;
}
.blog-single-wrap .comments-area li > div {
border-bottom: 1px solid rgba(17,17,17,0.05);
padding: 35px;
}
.blog-single-wrap .comments-area ol {
list-style-type: none;
padding-left: 0;
}
.blog-single-wrap .comments-area ol ul {
padding-left: 30px;
list-style-type: none;
margin: 0;
}
.blog-single-wrap .comments-area ol > li:last-child div {
border-bottom: 0;
}
.blog-single-wrap .comments-area .comments-title{
font-size: 22px;
font-weight: 600;
}
.blog-single-wrap .comments-area li > div{
position: relative;
}
.blog-single-wrap .comments-area .comment-thumb{
position: absolute;
left: 35px;
}
.blog-single-wrap .comments-area .comment-thumb .comment-img{
width: 80px;
height: 80px;
border-radius: 50%;
}
.blog-single-wrap .comments-area .comment-thumb .comment-img img{
border-radius: 50%;
}
.blog-single-wrap .comments-area .comment-main-area{
padding-left: 100px;
}
.blog-single-wrap .comments-area .comment-main-area p {
margin-bottom: 20px;
}
.blog-single-wrap .comments-area .comments-meta h4{
font-family: "Poppins";
font-size: 18px;
font-weight: 600;
letter-spacing: -1px;
}
.blog-single-wrap .comments-area .comments-meta h4 span{
font-weight: 600;
text-transform: none;
display: inline-block;
font-size: 12px;
text-transform: uppercase;
margin-left: 5px;
}
.blog-single-wrap .comments-area .comment-reply-link {
font-size: 12px;
font-weight: 600;
color: #bfca02;
display: inline-block;
text-transform: uppercase;
padding-left: 35px;
position: relative;
}
.blog-single-wrap .comments-area .comment-reply-link:before{
background-color: #bfca02;
position: absolute;
content: "";
width: 30px;
height: 2px;
left: 0;
top: calc(50% - 1px);
}
.blog-single-wrap .comments-area .comment-reply-link:hover{
text-decoration: underline;
}
.blog-single-wrap .comment-respond {}
.blog-single-wrap .comment-respond .comment-reply-title{
font-size: 22px;
font-weight: 600;
letter-spacing: -1px;
margin-bottom: 20px;
}
.blog-single-wrap .comment-respond form input,
.blog-single-wrap .comment-respond form textarea {
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
width: 100%;
height: 50px;
padding: 6px 15px;
margin-bottom: 15px;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
transition: all 0.3s;
}
.blog-single-wrap .comment-respond form input:focus,
.blog-single-wrap .comment-respond form textarea:focus {
border-color: #bfca02;
}
.blog-single-wrap .comment-respond form textarea {
height: 200px;
padding: 15px;
}
.blog-single-wrap .comment-respond .form-inputs {
overflow: hidden;
}
.blog-single-wrap .comment-respond .form-inputs > input:nth-child(2) {
width: 49%;
float: left;
}
.blog-single-wrap .comment-respond .form-inputs > input:nth-child(3) {
width: 49%;
float: right;
}
.blog-single-wrap .comment-respond .form-submit input{
max-width: 180px;
background-color: #bfca02;
color: #fff;
font-weight: 600;
font-size: 12px;
letter-spacing: 1px;
margin-bottom: 0;
border: 0;
outline: 0;
cursor: pointer;
border-radius: 0;
text-transform: uppercase;
}
.blog-single-wrap .comment-respond .form-submit input:hover {
opacity: 0.9;
}
/* ==========================================================================
Sponsor Section
========================================================================== */
.sponsor-section{
padding: 50px 0;
position: relative;
z-index: 1;
}
.sponsor-section .dots{
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(../img/bg-dots.png) 0 0 repeat;
z-index: -1;
}
.sponsor-item{}
.sponsor-item img{
opacity: ;
}
.sponsor-item:hover img{
opacity: 1;
cursor: pointer;
}
/* FAQ S*/
.box{
width: 80%;
margin: 0px auto;
background: #fff;
border-radius: 7px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}
.box h1{
background: rgb(215, 223, 239);
border-radius: 7px 7px 0px 0px;
padding: 0px;
color: #34568B;
text-align: center;
font-weight: 300;
font-size: 20px;
}
.faqs{
padding: 0px 20px 20px;
}
details{
background: #f6f6f6;
padding: 10px 10px;
border-radius: 7px;
margin-top: 10px;
font-size: 14px;
cursor: pointer;
}
details summary{
outline: none;
font-size: 16px;
padding: 8px;
color: rgb(34, 33, 35);
font-weight: 600;
}
details p{
font-size: 16px;
line-height: 24px;
color: #888;
padding: 8px;
}
@media (max-width: 768px){
.box{
width: 90%;
margin: 100px auto;
background: #fff;
border-radius: 7px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}
details summary{
outline: none;
font-size: 12px;
padding: 8px;
color: rgb(34, 33, 35);
font-weight: 600;
}
}
/* ==========================================================================
Widget Section
========================================================================== */
.widget-section {
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
margin-left: 0px;
margin-right: 0px;
padding-right: 0px;
width: 100%; /* Ensure section is full width */
padding-top: 40px; /* Reduced padding */
padding-bottom: 20px; /* Reduced padding */
background-color: aliceblue;
}
@media (max-width: 768px) {
.widget-section {
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
margin-left: 0px;
margin-right: 0px;
padding-right: 0px;
}
}
@media (max-width: 480px) {
.widget-section {
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
margin-left: 0px;
margin-right: 0px;
padding-right: 0px;
}
}
/* Dark Background */
.widget-section.bg-dark {
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.widget-content img {
margin-bottom: 10px; /* Reduced margin */
}
.widget-content h4 {
font-family: "Poppins";
}
.widget-content p {
margin-bottom: 10px; /* Reduced margin */
}
.widget-content span {
display: block;
margin-bottom: 5px; /* Reduced margin */
color: rgb(87, 86, 86);
}
.widget-content .widget-links {}
.widget-content .widget-links li {}
.widget-content .widget-links li a {
color: #8d9aa8;
line-height: 1.5; /* Reduced line height */
}
/* social icons*/
.social-icons {
margin-top: 10px;
}
.social-icon {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background-color: #8d9aa8;
color: #fff;
text-align: center;
margin-right: 10px;
transition: background-color 0.3s;
}
.social-icon:hover {
background-color: #bfca02;
}
.subscribe-form {
position: relative;
display: grid;
gap: 5px;
}
.subscribe-form .form-input {
border: 1px solid #e5e5e5;
width: 100%;
height: 40px;
padding: 5px;
padding-right: 120px;
border-radius: 2px;
}
.subscribe-form .submit-btn {
background-color: #eec762;
text-transform: uppercase;
color: #fff;
font-size: 12px;
border-radius: 2px;
line-height: 40px;
font-weight: 600;
display: inline-block;
letter-spacing: 0.5px;
padding: 0 20px;
position:static;
top: 0;
right: 0;
cursor: pointer;
}
/* Map Section */
.map {
width: 80%;
height: 150px; /* Adjusted height */
overflow: hidden;
border: solid 1px;
}
@media (max-width: 768px) {
.map {
width: 70%; /* Adjust width for smaller screens */
height: 150px; /* Adjust height for smaller screens */
border: unset;
}
}
@media (max-width: 480px) {
.map {
width: 70%; /* Full width for very small screens */
height: 150px; /* Further adjust height for very small screens */
}
}
/* ==========================================================================
Footer Section
========================================================================== */
.footer-section{
background-color: #f0f7fa;
display: block;
color: #fff;
text-align: center;
padding: 10px 0;
}
.footer-section p{
font-size: 12px;
color: #ababc7;
margin: 0;
}
@media (min-width: 768px) {
#footer1{
padding-left: 30px;
}
#footer2{
padding-left: 20px;
}
}
/* ==========================================================================
Scroll To Top
========================================================================== */
#scroll-to-top{
background-color: #eec762;
display: none;
width: 45px;
height: 45px;
text-align: center;
font-size: 14px;
border-radius: 50%;
line-height: 45px;
color: #fff;
position: fixed;
bottom: 50px;
right: 50px;
z-index: 999;
}
#scroll-to-top:hover{
background-color: #bfca02;
color: #fff;
opacity: 0.8;
}
/* ////////////////////////////////////// search button ///////////////////////////////////////*/
/* Initial state of the search box: shows only the search icon */
.ser .search-box {
position: absolute;
top: 50%;
left: 90%;
transform: translate(-50%, -50%);
background:aliceblue;
height: 35px;
padding: 0px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid rgba(52, 52, 52, 0);
width: 35px; /* Initially only the search icon is visible */
transition: width 0.4s ease; /* Smooth expansion */
overflow: hidden; /* Hide the text input initially */
}
@media (max-width: 768px) {
.ser .search-box {
position: absolute;
top: 90%;
left: 70%;
transform: translate(-50%, -50%);
background:aliceblue;
height: 35px;
padding: 0px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid rgba(52, 52, 52, 0);
width: 35px; /* Initially only the search icon is visible */
transition: width 0.4s ease; /* Smooth expansion */
overflow: hidden; /* Hide the text input initially */
}
}
@media (max-width: 1260px) {
.ser .search-box {
position: absolute;
top: 90%;
left: 70%;
transform: translate(-50%, -50%);
background:aliceblue;
height: 35px;
padding: 0px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid rgba(52, 52, 52, 0);
width: 35px; /* Initially only the search icon is visible */
transition: width 0.4s ease; /* Smooth expansion */
overflow: hidden; /* Hide the text input initially */
}
}
.ser .loupe-white {
display: none;
width: 12px;
height: 12px;
}
.ser .loupe-blue {
width: 20px;
height: 20px;
}
/* Initially hide the search text input */
.ser .search-text {
background: none;
border: 0;
outline: 0;
padding: 0;
transition: width 0.4s ease; /* Smooth expansion of the input field */
font-size: 16px;
width: 0; /* Hidden initially */
padding-left: 0; /* No padding initially */
opacity: 0; /* Invisible initially */
}
/* Search button styling */
.ser .search-btn {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
overflow: hidden;
background: none; /* Initial state */
transition: background 0.4s ease; /* Transition for background change */
}
/* On hover, expand the search box */
.ser .search-box:hover {
width: 25vw; /* Expand the container */
padding-left: 20px; /* Add padding for the input */
overflow: visible; /* Show the full input */
background-color: white;
z-index: 100;
}
/* On hover, expand the search input field */
.ser .search-box:hover .search-text {
width: 100%; /* Expand input field */
padding-left: 10px;
opacity: 1; /* Make input visible */
}
/* Prevent shrinking back when input is focused */
.ser .search-text:focus {
width: 100%; /* Keep expanded */
opacity: 1;
}
/* Change the button color when hovered */
.ser .search-box:hover > .search-btn {
background: #447ce7; /* Button color on hover */
outline: none;
}
/* Hide the blue loupe icon and show the white one when hovered */
.ser .search-box:hover > .search-btn .loupe-blue {
display: none; /* Hide blue loupe */
}
.ser .search-box:hover .search-btn .loupe-white {
display: block; /* Show white loupe */
}
/* Reset background to transparent when not hovered */
.ser .search-box:not(:hover) > .search-btn {
background: none; /* Reset background */
}
/* Styling for suggestions box (if applicable) */
.suggestions-box {
position: absolute;
top: 50px; /* Adjust based on search box height */
left: 0;
right: 0;
background-color: white;
border: 1px solid #ccc;
z-index: 1000;
display: none; /* Hidden initially */
}
.suggestions-box ul {
list-style: none;
margin: 0;
padding: 0;
}
.suggestions-box ul li {
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #eee;
}
.suggestions-box ul li:hover {
background-color: #f0f0f0;
}
/* /////////////////////////////////////////////General styles for the carousel ///////////////////////////////////////////////////////*/
.my-carousel {
position: relative;
width: 910px;
/* Default width to display two cards */
height: 350px;
overflow: hidden;
}
.my-carousel-inner {
display: flex;
transition: transform 0.5s ease;
width: calc(300px * 7);
/* 5 original + 2 duplicates */
}
.my-card {
position: relative;
width: 290px;
height: 350px;
transform-style: preserve-3d;
transition: transform 0.8s;
flex-shrink: 0;
cursor: pointer;
margin-right: 20px;
/* Gap between cards */
}
.my-card-inner {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s;
}
.my-card-front,
.my-card-back {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, #eba517, #34b2e9);
color: #fcf5f5;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
backface-visibility: hidden;
border-radius: 10px;
}
.my-card-front img {
width: 70px;
height: 70px;
border-radius: 50%;
margin-bottom: 10px;
}
.my-card-back {
transform: rotateY(180deg);
padding: 20px;
text-align: center;
}
.my-card.flipped .my-card-inner {
transform: rotateY(180deg);
}
/* Media Query for tablets and small devices */
@media (max-width: 768px) {
.my-carousel {
position: relative;
width: 250px;
/* Default width to display two cards */
height: 350px;
overflow: hidden;
}
.my-card-inner {
position: absolute;
width: 80%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s;
}
.my-carousel-inner {
display: flex;
width: 80%;
transition: transform 0.5s ease;
width: calc(200px * 7);
/* 5 original + 2 duplicates */
}
}
@media (min-width: 786px) and (max-width: 1024px) {
.my-carousel {
position: relative;
width: 800px;
/* Default width to display two cards */
height: 350px;
overflow: hidden;
}
.my-card-inner {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s;
}
.my-card {
position: relative;
width: 250px;
height: 350px;
transform-style: preserve-3d;
transition: transform 0.8s;
flex-shrink: 0;
cursor: pointer;
margin-right: 20px;
/* Gap between cards */
}
.my-carousel-inner {
display: flex;
width: 80%;
transition: transform 0.5s ease;
width: calc(180px * 7);
/* 5 original + 2 duplicates */
}
}
/* ////////////////////////////////////////////////////for faq slider////////////////////////////////////////////////////////////// */
.container-row {
display: flex;
justify-content: space-around;
/* Space between the containers */
gap: 0px;
/* Add gap between sections */
padding: 10px;
padding-left: 160px;
padding-right: 160px;
flex-wrap: wrap;
background-color: #f0f7fa;
/* Allows wrapping on smaller screens */
}
.swiper-container {
width: 100%;
justify-content: center;
align-items: center;
justify-items: center;
margin-left: 0px;
margin-right: 0px;
margin-left: 0px;
overflow: hidden;
}
#faq{
margin-left: 100px;
}
@media (max-width: 1400px) {
#faq{
margin-left: 0px;
}
}
@media (max-width: 480px) {
#faq{
padding-left: 25px;
}
}
.section {
width: 70%;
/* The section inside the anchor should take full width */
height: 200px;
/* Adjust the height as needed */
background-size: cover;
/* Ensures background images cover the entire section */
background-position: center;
cursor: pointer;
position: relative;
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s ease;
}
.section:hover {
transform: translateY(-10px);
/* Moves the section 10px upwards */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
/* Optional: Adds a shadow for a floating effect */
}
/* Background images for each section */
/* Optional content styling inside each section */
.section .content {
position: absolute;
bottom: 10px;
left: 10px;
color: rgb(15, 15, 15);
font-size: 20px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.section .content h3 {
color: rgb(255, 255, 255);
font-size: 35px;
font-family: Poppins;
}
/* Responsive Styles */
/* For tablets (width between 768px and 1024px) */
@media (max-width: 1024px) {
.swiper-container {
margin-left: 0px;
margin-right: 0px;
}
.section {
height: 180px;
/* Slightly reduce height for tablets */
}
.section .content h3 {
font-size: 30px;
/* Decrease font size for headings */
}
}
/* For mobile devices (width below 768px) */
@media (max-width: 768px) {
.swiper-container {
margin-left: 0px;
margin-right: 0px;
width: 100%;
/* Set the Swiper container width to 100% */
}
.section {
width: 100%;
/* Full width for mobile */
height: 160px;
/* Reduce height for mobile */
}
.section .content h3 {
font-size: 24px;
/* Adjust font size for mobile */
}
}
@media (max-width: 480px) {
.swiper-container {
margin-left: 0px;
margin-right: 0px;
width: 100%;
/* Set the Swiper container width to 100% */
}
.section {
width: 90%;
/* Full width for mobile */
height: 160px;
/* Reduce height for mobile */
}
.section .content h3 {
font-size: 24px;
/* Adjust font size for mobile */
}
}
/* ////////////////////////////////////for the logo slider //////////////////////////////////////////////////////////////////////////////// */
.container5 h2 {
text-align: center;
padding: 20px;
font-size: 27px;
/* Adjust font size if needed */
color: #333;
/* Optional: Set the color of the heading */
}
/* Container styling */
.container5 {
max-width: 1200px;
/* Set the max width of the container */
margin: 0 auto;
/* Center the container */
padding: 20px;
/* Add some padding around the container */
padding-bottom: 40px;
}
/* Slider section styling */
.customer-logos {
display: flex;
/* Use flexbox to align items horizontally */
align-items: center;
/* Align items vertically in the center */
justify-content: center;
/* Center items horizontally */
overflow: hidden;
/* Hide any overflow content to keep a clean look */
}
/* Slide styling */
.slide2 {
flex: 0 0 auto;
/* Prevent flex items from shrinking */
margin: 0 10px;
/* Add margin to create space between slides */
transition: transform 0.3s ease-in-out;
/* Smooth transition for slider effect */
}
/* Image styling */
.slide2 img {
max-width: 100%;
/* Ensure images are responsive */
height: auto;
/* Maintain aspect ratio */
display: block;
/* Remove any inline spacing issues */
transition: transform 0.3s ease;
/* Smooth transition effect on hover */
padding: 0 20px;
aspect-ratio: 4/3;
object-fit: contain;
mix-blend-mode: color-burn;
}
/* Hover effect for logos */
.slide2:hover img {
transform: scale(1.1);
/* Slightly enlarge the image on hover for a subtle effect */
}
/* Responsive adjustments */
@media (max-width: 768px) {
.slide2 {
margin: 0 5px;
/* Reduce margin for smaller screens */
}
h2 {
font-size: 20px;
/* Reduce font size on smaller screens */
}
}
/* i am intersted tab
/* Dropdown Menu Styles */
.dropdowntitle {
font-size: 25px;
color: white;
}
.dropdown {
position: relative; /* Ensure that the dropdown is positioned relative to the container */
top: 50px;
z-index: 9999; /* Ensure that the dropdown has a high z-index to be on top */
}
.dropdown-menu {
display: none; /* Hide the dropdown initially */
position: absolute;
top: 100%;
left: 0;
background-color: white;
border: 1px solid #ccc;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
list-style-type: none;
padding: 0;
margin: 0;
min-width: 200px;
z-index: 99999; /* Ensure that the dropdown menu appears above other content */
border-radius: 5px;
max-height: 180px; /* Limit the max height */
overflow-y: auto; /* Enable vertical scrolling */
}
.dropdown-menu li {
padding: 10px;
}
.dropdown-menu a {
text-decoration: none;
color: #333;
display: block;
font-size: 14px;
}
.dropdown-menu a:hover {
background-color: #f0f0f0;
}
/* Show dropdown when active */
.dropdown-menu.show {
display: block;
}
/* Custom scrollbar styling for modern browsers */
.dropdown-menu::-webkit-scrollbar {
width: 8px; /* Width of the scrollbar */
}
.dropdown-menu::-webkit-scrollbar-thumb {
background: #1da9ef; /* Color of the scrollbar thumb */
border-radius: 10px; /* Rounded corners for the scrollbar thumb */
}
.dropdown-menu::-webkit-scrollbar-thumb:hover {
background: #d59321; /* Color of the thumb on hover */
}
.dropdown-menu::-webkit-scrollbar-track {
background: #f1f1f1; /* Background of the scrollbar track */
border-radius: 10px; /* Rounded corners for the scrollbar track */
}
/* Popup form styles */
/* Popup form styles */
.popup {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1000;
/* Sit on top */
left: 0;
top: 50px;
width: 100%;
/* Full width */
height: auto;
/* Full height */
overflow: hidden;
/* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
line-height: 0.2;
overscroll-behavior: inherit;
}
.popup-content {
background-color: #fefefe;
margin: 7% auto;
/* Centered with margin */
padding: 20px;
border: 1px solid #888;
width: 90%;
/* Width relative to screen size */
max-width: 400px;
/* Maximum width of the form */
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
/* Optional shadow */
border-radius: 10px;
/* Rounded corners */
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
form {
display: flex;
flex-direction: column;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="option"],
input[type="select"],
textarea {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-right: 15px;
width: 90%;
/* Full width of the form */
}
textarea {
resize: vertical;
/* Allow vertical resizing only */
}
input[type="submit"] {
padding: 20px;
background-color: #1da9ef;
color: white;
border: none;
border-radius: 5px;
margin-right: 20px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #d59321;
}
/* Button styles */
.button {
text-align: center;
margin: 20px;
}
.button button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #e4b311;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button button:hover {
background-color: #333637;
}
/* Styling for select element */
select {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-right: 15px;
width: 90%; /* Full width of the form */
background-color: #fff; /* Ensure a white background */
font-size: 16px;
color: #333;
cursor: pointer;
}
/* Optional: Add hover and focus effects */
select:hover {
border-color: #aaa;
background-color: #f9f9f9;
}
select:focus {
outline: none;
border-color: #1da9ef;
box-shadow: 0 0 5px rgba(29, 169, 239, 0.5);
}
/* Style for the disabled default option */
select option[disabled] {
color: #999;
background-color: #f3f3f3;
}