File: /var/www/html/spion/public/assets/front/website/css/style.css
html,
body {
overflow-x: hidden;
}
body {
color: #475467;
}
h1,
h2,
h3,
h4 {
color: #101828;
}
@media screen and (max-width: 575px) {
h2 {
font-size: 22px;
}
h4 {
font-size: 20px;
}
p {
font-size: 15px;
}
}
/* HEADER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-header {
position: absolute;
top: 0;
right: 0;
left: 0;
/* padding: 3px 0; */
z-index: 1;
background-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
background-color: white;
/* backdrop-filter: blur(10px); */
animation: slideDown 0.35s ease-out;
}
.page-header nav {
display: flex;
align-items: center;
justify-content: space-between;
}
/* STICKY STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-header.is-sticky {
position: fixed;
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
background-color: white;
/* padding: 8px 0; */
/* backdrop-filter: blur(10px); */
animation: slideDown 0.35s ease-out;
}
/* .page-header.is-sticky img {
max-width: 80%;
} */
.page-header.is-sticky button {
font-size: 14px;
padding: 7px 10px;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
/* NAV LIST STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
justify-content: end;
}
.navbar-dark .navbar-nav a.nav-link {
color: #252734;
font-size: 18px;
padding: 8px 16px;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
color: #ff5a94;
}
.dropdown-menu {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border: none;
border-radius: 0;
padding: 0.7em;
}
.dropdown-menu ul {
list-style: none;
padding: 0;
}
.dropdown-menu li .dropdown-item {
color: #191d27;
font-size: 1em;
padding: 0.5em 1em;
}
.dropdown-menu {
border-radius: 0;
border: none;
padding: 0.5em;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}
.dropdown-menu ul {
list-style: none;
padding: 0;
width: 25%;
}
.dropdown-menu li a {
color: gray;
padding: 0.5em 1em;
}
.dropdown-item.active,
.dropdown-item:active {
color: #fff;
text-decoration: none;
/*background-color: #0d6efd;*/
}
.dropdown-item:focus,
.dropdown-item:hover {
color: #1e2125;
background-color: #e9ecef;
width: 170px;
}
.dropdown-menu li .dropdown-item {
color: #252734;
font-size: 1em;
padding: 0.5em 1em;
}
h4.dropdown-item {
border-bottom: 1px solid #2f6e77;
width: 8rem;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
width: 100%;
left: 0;
right: 0;
top: 57px;
padding: 2rem 4rem;
}
.navbar-expand-lg .navbar-nav .dropp {
width: 300px;
top: 44px;
}
.btn-000 {
border: 2px dotted #101828;
color: #101828;
border-radius: 50px;
width: 35px;
height: 35px;
font-size: 14px;
display: inline-flex;
justify-content: center;
align-items: center;
/* margin: 0 10px; */
margin-right: 20px;
}
.btn-000:hover {
color: #ff5a94;
border: 2px dotted #ff5a94;
}
.btn1 {
/* padding: 8px 16px; */
padding: 8px 15px 8px 30px;
font-size: 16px;
border-radius: 5px;
background-color: #101828;
color: white;
}
.btn1:hover {
background-color: #ff5a94;
color: white;
}
.btn2 {
padding: 8px 16px;
/* padding: 8px 15px 8px 30px; */
font-size: 16px;
border-radius: 5px;
border-color: #101828;
background-color: transparent;
color: #101828;
}
.profile_dropdown .btn {
padding: 0px;
}
.profile_dropdown .btn img {
height: 35px;
width: 35px;
border: 1px solid #dedede;
border-radius: 100%;
background-color: #dedede;
object-fit: cover;
}
.profile_dropdown .btn::after {
display: none;
}
.profile_dropdown .dropdown-menu {
flex-direction: column;
right: 0px;
}
.profile_dropdown .dropdown-menu li {
display: block;
width: 100%;
float: left;
}
.btn2:hover {
background-color: #ff5a94;
color: white;
border-color: #ff5a94;
}
.around {
position: relative;
}
.around:before {
box-shadow: 0 0 0 rgba(255, 255, 255, .4);
animation: pulso 2s infinite;
transition: .5s;
content: "";
width: 10px;
height: 10px;
border: 3px solid white;
position: absolute;
left: 13px;
border-radius: 50%;
top: 0;
bottom: 0;
margin: auto;
}
@keyframes pulso {
0% {
-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8)
}
70% {
-moz-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0)
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0)
}
}
/* MEDIA QUERY NAV LIST STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1399px) {
.navbar-dark .navbar-nav a.nav-link {
font-size: 18px;
padding: 8px 12px;
}
}
@media screen and (max-width: 1199px) {
.navbar-dark .navbar-nav a.nav-link {
font-size: 16px;
padding: 4px 6px;
}
.btn-000 {
width: 32px;
height: 32px;
font-size: 13px;
margin: 0 0;
margin-right: 0;
display: flex;
justify-content: center;
align-items: center;
}
}
@media screen and (max-width: 991px) {
.navbar-dark .navbar-nav a.nav-link {
font-size: 17px;
padding: 10px 0px;
}
.buttons {
margin-top: 15px;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
padding: 0rem 2rem;
}
.dropdown-menu {
box-shadow: none;
}
h4.dropdown-item {
border-bottom: none;
width: 0;
}
.btn-000 {
margin: 5px 0px;
width: 35px;
height: 35px;
font-size: 14px;
}
}
@media only screen and (min-width: 992px) {
.dropdown:hover .dropdown-menu {
display: flex;
}
.dropdown-menu.show {
display: flex;
}
}
@media only screen and (max-width: 992px) {
.dropdown-menu.show {
flex-wrap: wrap;
max-height: 350px;
overflow-y: scroll;
}
}
@media only screen and (min-width: 992px) and (max-width: 1140px) {
.dropdown:hover .dropdown-menu {
width: 100%;
flex-wrap: wrap;
}
.navbar-expand-lg .navbar-nav .dropp {
width: 300px;
}
}
@media screen and (min-width: 993px) {
.dropdown:hover .dropdown-menu {
display: flex;
}
.dropdown-menu.show {
display: flex;
}
}
@media screen and (max-width: 992px) {
.dropdown-menu.show {
max-height: 60vh;
overflow-y: scroll;
}
}
@media screen and (max-width: 575px) {
.buttons {
text-align: center;
}
}
/* BANNER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.banner {
background-color: white;
background-size: cover;
padding-top: 8rem;
padding-bottom: 3rem;
}
.banner_text {
/* margin: 4rem 0; */
padding-top: 3rem;
}
.banner_text h1 {
margin-bottom: 2rem;
}
.banner_text p {
margin-bottom: 3rem;
font-size: 18px;
}
.banner_img img {
border-radius: 50rem;
height: 550px;
max-width: 100%;
}
.list-0 {
margin-top: 3rem;
display: flex;
align-items: center;
gap: 40px
}
.list-0 i {
font-weight: 900;
box-sizing: border-box;
font-size: 15px;
margin-right: 5px;
}
.banner-wrap {
position: relative;
}
/* .banner-div1 h4 {
font-size: 20px;
padding-top: 12px;
} */
.banner-div1 {
position: absolute;
top: 3rem;
left: 25rem;
/* background-color: #f8f8f8f0;
padding: 15px;
border-radius: 5px;
padding-bottom: 0;
font-size: 15px; */
}
.banner-div1 img {
width: 100%;
border-radius: 5px;
}
.banner-div2 {
position: absolute;
top: 23rem;
left: -50px;
background-color: #f8f8f8f0;
padding: 10px;
padding-bottom: 0;
border-radius: 5px;
font-size: 15px;
font-weight: bold;
}
.banner-div3 {
position: absolute;
top: 27rem;
left: 20rem;
background-color: #f8f8f8f0;
padding: 10px;
padding-bottom: 0;
border-radius: 5px;
font-size: 15px;
font-weight: bold;
}
.small-text {
color: #ff5a94;
font-size: 15px;
font-weight: bold;
border-bottom: 1px solid;
}
/* MEDIA QUERY BANNER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1399px) {
.banner {
padding-bottom: 2rem;
}
}
@media screen and (max-width: 1199px) {
.banner {
padding-top: 5rem;
padding-bottom: 1rem;
}
.list-0 {
margin-top: 3rem;
display: flex;
align-items: center;
gap: 15px;
}
.banner_text {
margin: 2rem 0;
padding-top: 2rem;
}
.banner_text h1 {
margin-bottom: 1rem;
}
.banner_text p {
margin-bottom: 1rem;
font-size: 16px;
}
.list i {
font-size: 10px;
padding: 5px;
margin-right: 0px;
border-radius: 12px;
}
.banner-div2 {
top: 19rem;
left: -10px;
}
.banner-div1 {
left: 17rem;
}
.banner-div3 {
position: absolute;
top: 26rem;
left: 9rem;
}
}
@media screen and (max-width: 991px) {
.banner_text {
margin: 1rem 0;
padding-top: 2rem;
}
.banner_img img {
height: 435px;
}
.list-0 {
display: inline-block;
}
.list i {
font-size: 8px;
padding: 5px;
margin-right: 3px;
border-radius: 12px;
}
.banner-div1 {
left: 13rem;
}
.banner-div2 {
top: 23rem;
left: 0px;
}
.banner-div3 {
top: 27rem;
left: 2rem;
}
}
@media screen and (max-width: 767px) {
.banner {
padding-top: 4rem;
}
.banner_text {
margin: 1rem 0;
text-align: center;
}
.list-0 {
display: inline-flex;
gap: 40px;
}
.banner_img img {
height: 550px;
}
.banner-div1 {
left: 20rem;
}
.banner-div3 {
left: 13rem;
}
}
@media screen and (max-width: 575px) {
.banner {
padding-top: 2.5rem;
}
.list-0 {
gap: 25px;
}
/* .banner-div1 h4 {
font-size: 17px;
padding-top: 12px;
} */
.banner-div1 {
font-size: 13px;
}
.banner-div2 {
font-size: 13px;
}
.banner-div3 {
font-size: 13px;
}
}
@media screen and (max-width: 456px) {
.banner-div1 {
left: 17rem;
top: 80px;
}
.banner-div3 {
left: 10rem;
}
}
@media screen and (max-width: 436px) {
.list-0 {
gap: 13px;
}
.banner-div3 {
left: 8rem;
}
}
@media screen and (max-width: 423px) {
.banner-div1 {
left: 14rem;
top: 44px;
}
}
@media screen and (max-width: 415px) {
.list-0 {
gap: 10px;
}
.banner_img img {
height: 470px;
}
.banner-div2 {
top: 20rem;
}
.banner-div3 {
top: 24rem;
left: 7rem;
}
}
@media screen and (max-width: 405px) {
.list-0 {
gap: 10px;
display: inline-block;
}
}
@media screen and (max-width: 398px) {
.banner-div3 {
left: 6rem;
}
}
@media screen and (max-width: 382px) {
.banner-div3 {
left: 5rem;
}
}
@media screen and (max-width: 367px) {
.banner-div3 {
left: 4rem;
}
}
/* INFORM STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.inform_text {
/* background-color: #8080802b; */
background-color: #252734;
border-right: 1px solid white;
padding: 59.90px;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
font-size: 18px;
color: white;
}
.inform_text h2 {
color: white;
padding-bottom: 9px;
}
.inform_flex {
display: flex;
/* background-color: #80808021; */
background-color: #252734;
padding: 61px 14px;
text-align: center;
height: 100%;
color: white;
}
.inform_col h4 {
color: white;
font-size: 18px;
}
.inform_col p {
font-size: 15px;
}
.inform_col i {
font-size: 50px;
/* color: #ff5a94; */
color: white;
margin-bottom: 15px;
}
/*.inform_col img {
height: 60px;
margin-bottom: 15px;
}*/
.arrow_main {
position: relative;
}
.arrow_main .arrow {
width: 100%;
position: absolute;
}
.arrow_main .arrow img {
width: 200px;
}
.arrow_main .arrow_1 {
left: -104px;
top: 5px;
}
.arrow_main .arrow_2 {
left: -104px;
top: 40px;
}
/* MEDIA QUERY INFORM STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1199px) {
.arrow_main .arrow img {
width: 140px;
}
.arrow_main .arrow_1 {
left: -80px;
}
.arrow_main .arrow_2 {
left: -75px;
}
.inform_text {
padding: 53.9px;
}
}
@media screen and (max-width: 991px) {
.arrow_main .arrow img {
width: 120px;
}
.arrow_main .arrow_1 {
left: -63px;
}
.arrow_main .arrow_2 {
left: -63px;
}
.inform_text {
padding: 40.9px;
font-size: 16px;
}
.inform_flex {
padding: 45px 18px;
}
}
@media screen and (max-width: 880px) {
.arrow_main .arrow img {
width: 100px;
}
.arrow_main .arrow_1 {
left: -55px;
}
.arrow_main .arrow_2 {
left: -55px;
}
}
@media screen and (max-width: 767px) {
.inform_text {
text-align: center;
align-items: center;
font-size: 16px;
border-bottom: 1px solid white;
}
.arrow_main .arrow img {
width: 140px;
}
.arrow_main .arrow_1 {
left: -70px;
}
.arrow_main .arrow_2 {
left: -70px;
}
}
@media screen and (max-width: 575px) {
.inform_flex {
display: block;
}
.inform_col {
padding-bottom: 12px;
}
.inform_col h4 {
font-size: 20px;
}
.inform_col p {
font-size: 15px;
}
.arrow_main .arrow img {
display: none;
}
}
/* VIDEO-WRAP STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.video-wrap {
margin-top: 4rem;
margin-bottom: 11rem;
}
.video-wrap-clip {
display: flex;
position: relative;
}
.video-img-1 img {
width: 70%;
}
.video-img-2 img {
position: absolute;
width: 50%;
top: 7rem;
right: 0;
left: 17rem;
border: 10px solid white;
}
.overlay_play i {
background-color: #ff5a94;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
position: absolute;
top: 33px;
left: 20rem;
animation-name: ripple;
}
.ripple {
position: relative;
text-decoration: none;
color: #fff;
width: 35px;
height: 35px;
background-color: transparent;
margin: 0 auto;
border-radius: 50%;
-webkit-animation: ripple 1s linear infinite;
animation: ripple 1s linear infinite;
}
@-webkit-keyframes ripple {
0% {
-webkit-box-shadow: 0 0 0 0 #ff5a94, 0 0 0 10px #ff5a94;
box-shadow: 0 0 0 0 #ff5a94, 0 0 0 10px #ff5a94;
}
100% {
-webkit-box-shadow: 0 0 0 10px #ff5a94, 0 0 0 30px #ff5a94;
box-shadow: 0 0 0 10px #ff5a94, 0 0 0 30px #ff5a94;
}
}
@keyframes ripple {
0% {
-webkit-box-shadow: 0 0 0 0 #ff5a94, 0 0 0 10px #ff5a94;
box-shadow: 0 0 0 0 #ff5a94, 0 0 0 10px #ff5a94;
}
100% {
-webkit-box-shadow: 0 0 0 10px #ff5a94, 0 0 0 30px #ff5a94;
box-shadow: 0 0 0 10px transparent, 0 0 0 30px transparent;
}
}
.video-text h2 {
margin-top: 10px;
}
.video-text p {
margin-top: 20px;
border: 1px solid var(--border-color);
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.05);
background-color: var(--white-color);
padding: 17px 28px;
margin-bottom: 20px;
color: #7e8186;
line-height: 26px;
}
.video-list {
border-bottom: 1px solid #a2a4a873;
}
.video-list-1 {
display: flex;
gap: 15px;
}
.video-list-1 li {
list-style: none;
padding: 5px 0;
}
.video-list-1 i {
color: #ff5a94;
}
.video-button {
margin-top: 15px;
}
/* MEDIA QUERY VIDEO-WRAP STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1399px) {
.video-img-2 img {
position: absolute;
width: 50%;
top: 10rem;
right: 0;
left: 17rem;
border: 10px solid white;
}
.overlay_play i {
top: 55px;
left: 20rem;
}
}
@media screen and (max-width: 1199px) {
.video-wrap {
margin-top: 4rem;
margin-bottom: 8rem;
}
.overlay_play i {
top: 60px;
left: 18rem;
}
.video-img-2 img {
position: absolute;
width: 50%;
top: 12rem;
right: 0;
left: 13rem;
border: 10px solid white;
}
.video-text p {
margin-top: 12px;
margin-bottom: 12px;
}
}
@media screen and (max-width: 991px) {
.video-wrap {
margin-top: 4rem;
margin-bottom: 4rem;
}
.video-text {
margin-top: 20px;
}
.video-img-2 img {
position: absolute;
width: 50%;
top: 5rem;
right: 0;
left: 24rem;
border: 10px solid white;
}
.overlay_play i {
top: 70px;
left: 20rem;
}
}
@media screen and (max-width: 767px) {
.video-img-2 img {
position: absolute;
width: 50%;
top: 6rem;
right: 0;
left: 17rem;
border: 10px solid white;
}
.overlay_play i {
top: 30px;
left: 20rem;
}
}
@media screen and (max-width: 575px) {
.video-wrap {
margin-top: 2rem;
margin-bottom: 0rem;
}
.video-img-1 img {
width: 95%;
}
.video-img-2 img {
position: unset;
width: 95%;
top: 0;
right: 0;
left: auto;
border: none;
}
.overlay_play i {
top: 124px;
left: 14rem;
}
.video-text {
text-align: center;
}
.video-list {
display: flex;
justify-content: center;
font-size: 15px;
}
.video-button {
text-align: center;
margin-top: 15px;
}
}
@media screen and (max-width: 499px) {
.overlay_play i {
top: 120px;
left: 13rem;
}
}
@media screen and (max-width: 450px) {
.overlay_play i {
top: 105px;
left: 12rem;
}
}
@media screen and (max-width: 435px) {
.overlay_play i {
top: 105px;
left: 11rem;
}
}
@media screen and (max-width: 380px) {
.overlay_play i {
top: 90px;
left: 9rem;
}
}
/* HH STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hh {
text-align: center;
font-size: 18px;
}
.hh p {
padding: 11px 15rem;
}
/* ABOUT STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.about {
margin-top: 4rem;
padding: 2rem 0;
background-color: #ff5a94;
/* background-color: #252734; */
}
.btn0 {
/* padding: 8px 16px; */
padding: 8px 15px 8px 30px;
font-size: 16px;
border-radius: 5px;
background-color: white;
color: #252734;
;
}
.btn0:hover {
background-color: #ff5a94;
color: #252734;
}
.about-button {
display: flex;
justify-content: end;
margin-bottom: 10px;
}
.about_col {
box-shadow: 0px 0px 60px #00000017;
background-color: white;
border-radius: 8px;
padding: 20px;
margin: 20px;
}
.about_col p {
font-weight: 600;
text-align: center;
margin-top: 25px;
}
.about_col p a {
color: #101828;
text-decoration: none;
}
.about_col p a:hover {
text-decoration: underline;
}
.about_col img {
width: 100%;
}
/* MEDIA QUERY ABOUT STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1199px) {
.about_col {
padding: 10px;
margin: 10px;
height: 90%;
}
.about_col p {
font-size: 14px;
margin-top: 15px;
}
}
@media screen and (max-width: 767px) {
.about_col p {
margin-top: 13px;
padding-bottom: 17px;
}
}
@media screen and (max-width: 575px) {
.about {
margin-top: 2rem;
}
.hh p {
font-size: 15px;
}
.about-button {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
}
/* REFRENCE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.refrence {
/* margin-top: 4rem; */
padding-top: 4rem;
text-align: center;
background-image: linear-gradient(#80808029, transparent);
}
.tick {
display: flex;
justify-content: space-evenly;
list-style: none;
font-size: 20px;
padding: 3rem 0px;
}
.tick i {
box-sizing: border-box;
border: dashed;
border-radius: 2px;
font-size: 18px;
width: 33px;
height: 33px;
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.refrence_pic img {
width: 80%;
}
/* MEDIA QUERY REFRENCE ABOUT STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1199px) {
.tick {
font-size: 18px;
}
}
@media screen and (max-width: 991px) {
.hh p {
font-size: 16px;
padding: 11px 4rem;
}
.tick {
font-size: 15px;
padding: 1rem 0px;
}
.tick i {
width: 25px;
height: 25px;
font-size: 14px;
margin-right: 10px;
}
}
@media screen and (max-width: 767px) {
.tick i {
width: 20px;
height: 20px;
font-size: 10px;
margin-right: 5px;
}
.tick li {
display: inline-block;
padding: 5px 5px;
}
}
@media screen and (max-width: 575px) {
.hh p {
font-size: 15px;
}
.tick {
display: inline-block;
}
.refrence {
padding-top: 2rem;
}
}
/* SKILLS STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* .skills {
margin-top: 4rem;
padding: 2rem 0;
background-color: #252734;
}
.my-skills-img img {
width: 100%;
border-radius: 5px;
}
.my-skills {
color: white;
padding-left: 40px;
}
.my-skills h2 {
margin: 12px 0;
color: white;
}
.skill-col {
padding: 1rem 0px;
}
.progress-wrap {
padding: 5px 0;
}
.progress {
flex-grow: 1;
}
.pbar-mr-1 {
justify-content: space-between;
display: flex;
}
.pbar-mr-2 {
margin: 5px 0;
color: white;
}
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: #ff5a94;
transition: width .6s ease;
} */
/* MEDIA QUERY SKILL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
@media screen and (max-width: 991px) {
.my-skills {
padding-left: 0px;
}
}
@media screen and (max-width: 767px) {
.my-skills {
margin-top: 20px;
}
.my-skills-img img {
height: 500px;
}
}
@media screen and (max-width: 575px) {
.my-skills {
text-align: center;
}
}
@media screen and (max-width: 450px) {
.my-skills-img img {
height: 450px;
}
} */
/* SKILLS-2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.skills-2 {
padding: 4rem 0;
margin-bottom: 2rem;
position: relative;
}
.skills-2-img img {
width: 100%;
}
.skills-2-wrap h2 {
padding: 10px 0;
}
.pbar-mr-11 {
justify-content: space-between;
display: flex;
}
.pbar-mr-22 {
margin: 5px 0;
color: white;
/* color: #101828; */
}
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: #ff5a94;
transition: width .6s ease;
}
/* .bar-1 {
background-color: #ff5a94;
}
.bar-2 {
background-color: #ff5a94;
}
.bar-3 {
background-color: #ff5a94;
} */
.skills-details {
background-color: #252734;
padding: 2.5rem;
position: absolute;
width: 60%;
left: 26rem;
bottom: 2rem;
}
.progress-wrap-1 {
padding: 20px 0;
}
/* MEDIA QUERY SKILLS-2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1399px) {
.skills-details {
padding: 2rem;
width: 60%;
left: 26rem;
bottom: 2rem;
}
.progress-wrap-1 {
padding: 15px 0;
}
}
@media screen and (max-width: 1299px) {
.skills-details {
padding: 2rem;
width: 60%;
left: 22rem;
bottom: 2rem;
}
}
@media screen and (max-width: 1199px) {
.skills-2 {
padding: 4rem 0;
margin-bottom: 4rem;
}
.skills-details {
padding: 1rem 2rem;
width: 60%;
left: 21rem;
bottom: 0rem;
}
.progress-wrap-1 {
padding: 10px 0;
}
}
@media screen and (max-width: 1099px) {
.skills-details {
padding: 2rem;
width: 60%;
left: 19rem;
bottom: 0rem;
}
.progress-wrap-1 {
padding: 5px 0;
}
}
@media screen and (max-width: 1024px) {
.skills-details {
padding: 2rem;
width: 60%;
left: 17rem;
bottom: 0rem;
}
}
@media screen and (max-width: 991px) {
.skills-2 {
padding: 4rem 0;
margin-bottom: 6rem;
}
.skills-details {
padding: 2rem;
width: 60%;
left: 17rem;
bottom: -2rem;
}
}
@media screen and (max-width: 767px) {
.skills-2 {
padding: 4rem 0;
margin-bottom: 0rem;
}
.skills-2-wrap p {
margin-bottom: 25px;
}
.skills-2-wrap {
margin-top: 15px;
}
.skills-details {
position: unset;
width: 100%;
}
}
@media screen and (max-width: 575px) {
.skills-2 {
padding: 2rem 0;
}
.skills-2-wrap {
text-align-last: center;
}
.skills-details {
padding: 1rem;
}
}
/* BLOG STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.blog {
/* margin-top: 4rem; */
padding: 3rem 0px;
padding-bottom: 50rem;
background-image: linear-gradient(#80808029, transparent);
position: relative;
}
.blogging {
padding: 7rem 0px;
}
.blogging h2 {
padding: 20px 0px;
}
.blogging p {
font-weight: 300;
font-size: 18px;
}
.blog-img1 {
position: absolute;
top: 55rem;
width: 35%;
}
.blog-img2 {
position: absolute;
top: 47rem;
width: 35%;
}
.blog-img3 {
position: absolute;
top: 33rem;
}
/* MEDIA QUERY BLOG STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1199px) {
.blog-img3 {
position: absolute;
top: 30rem;
}
.blog-img2 {
position: absolute;
top: 40rem;
width: 33%;
}
.blog-img1 {
position: absolute;
top: 45rem;
width: 33%;
}
.blog {
padding-bottom: 38rem;
}
}
@media screen and (max-width: 991px) {
.blog {
padding-bottom: 0px;
position: unset;
}
.blogging {
padding: 0 0;
}
.blogging h2 {
padding: 15px 0px;
}
.blog-img1 {
position: unset;
width: 100%;
}
.blog-img2 {
position: unset;
/* top: 40rem; */
width: 100%;
}
.blog-img3 {
position: unset;
width: 100%;
}
}
@media screen and (max-width: 767px) {
.blogg {
display: flex;
flex-direction: column-reverse;
}
.blogging {
text-align: center;
padding: 0rem 0px;
}
.blogging h2 {
padding: 4px 0px;
padding-top: 1rem;
}
.blogging p {
font-size: 16px;
}
}
@media screen and (max-width: 575px) {
.blog {
padding: 2rem 0px;
padding-bottom: 0rem;
}
.blogging p {
font-size: 15px;
}
}
/* FAQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.faq {
margin-top: 4rem;
padding: 5rem 0px;
background-image: linear-gradient(#80808029, transparent);
}
.faq-text {
padding: 0px 36px;
font-size: 18px;
}
.faq-text h2 {
padding-bottom: 12px;
}
/* .faq-text img {
width: 100%;
height: auto;
border-radius: 5px;
} */
.faq-text p a {
color: #ff5a94;
text-decoration: none;
}
.dataform {
background-color: #7e7e7e29;
}
.accordion-button::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
transition: all 0.5s;
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}
.accordion-button::after {
transition: all 0.5s;
}
.accordion-button {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 60px;
padding: 1rem 1.25rem;
font-size: 1rem;
color: #252734;
text-align: left;
background-color: white;
border: 0;
}
.accordion-item {
border: none;
background-color: #fff0;
margin-bottom: 12px;
}
.accordion-button:focus {
box-shadow: none;
}
.accordion-button:not(.collapsed) {
color: #ff5a94;
background-color: white;
box-shadow: none;
}
/* MEDIA QUERY FAQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 991px) {
.faq-text {
padding: 0px 1px;
font-size: 18px;
}
}
@media screen and (max-width: 767px) {
.faq {
padding: 2rem 0px;
}
.faq-text {
padding: 0px 0px;
font-size: 16px;
text-align: center;
padding-bottom: 2rem;
}
}
@media screen and (max-width: 575px) {
.faq {
margin-top: 2rem;
}
.accordion-button {
font-size: 15px;
}
.accordion-body {
font-size: 15px;
}
}
/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
background-color: #252734;
color: white;
padding: 2rem 0px;
}
footer h4 {
color: white;
padding: 12px 0px;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover {
color: white;
}
.footer-text {
color: white;
background-color: #1A1C24;
padding-top: 12px;
}
.footer-info i {
margin-right: 5px;
font-size: 17px;
}
.footer-icons i {
padding: 4px;
font-weight: 400;
box-sizing: border-box;
border-style: dotted;
border-radius: 10px;
width: 30px;
height: 30px;
margin: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.footer-icons i:hover {
color: #ff5a94;
border-color: #ff5a94;
}
.footer-bottom {
justify-content: space-between;
display: flex;
}
/* MEDIA QUERY FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 767px) {
footer {
text-align: center;
}
footer h4 {
padding-top: 12px;
}
}
@media screen and (max-width: 575px) {
.footer-bottom {
display: block;
text-align: center;
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
PRICING PAGE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* PRICING STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.plans {
margin-top: 6rem;
}
.our-plans {
margin: 10px;
padding: 20px;
box-shadow: 0px 0px 60px #00000017;
border-radius: 8px;
background-color: white;
}
.our-plans1 {
margin: 10px;
padding: 20px;
box-shadow: 0px 0px 60px #00000017;
border-radius: 8px;
color: white;
background-color: #252734;
}
.our-plans1 h2 {
color: white;
}
.btn3 {
color: #252734;
border-color: #252734;
background-color: transparent;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0px;
margin: 5px;
font-size: 20px;
}
.btn3:hover {
color: white;
border-color: #252734;
background-color: #252734;
}
.btn4 {
color: white;
border-color: white;
background-color: transparent;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0px;
margin: 5px;
font-size: 20px;
}
.btn4:hover {
color: #252734;
border-color: white;
background-color: white;
}
.price p {
font-weight: 600;
/* font-family: emoji; */
font-size: 35px;
}
.ss {
vertical-align: text-top;
font-size: 20px;
}
.mm {
vertical-align: text-bottom;
/* font-weight: 500; */
font-size: 20px;
}
.our-plans h5 {
padding-top: 20px;
font-weight: 400;
color: #000000b5;
}
.our-plans1 h5 {
padding-top: 20px;
font-weight: 400;
color: #ffffff9e;
}
.features,
.features li {
list-style: none;
padding: 10px 0px;
font-size: 18px;
padding-left: 0;
margin-bottom: 0;
margin: 0;
}
.features i {
font-weight: 900;
color: #212529;
font-size: 15px;
margin-right: 10px;
}
.our-plans1 i {
font-weight: 900;
color: white;
font-size: 15px;
}
/* MEDIA QUERY PLANS STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1199px) {
.our-plans {
margin: 2px;
padding: 20px;
}
.our-plans1 {
margin: 2px;
padding: 20px;
}
.price p {
font-weight: bolder;
font-size: 30px;
}
}
@media screen and (max-width: 991px) {
.our-plans {
margin: 0px;
padding: 15px;
}
.our-plans1 {
margin: 0px;
padding: 15px;
}
.price p {
font-weight: bolder;
font-size: 25px;
}
.btn3 {
padding: 5px 0px;
margin: 3px;
font-size: 16px;
}
.btn4 {
padding: 5px 0px;
margin: 3px;
font-size: 16px;
}
.our-plans h4 {
padding-top: 12px;
font-size: 20px;
}
.our-plans1 h4 {
padding-top: 12px;
font-size: 20px;
}
.features,
.features li {
padding: 10px 0px;
font-size: 16px;
}
.features i {
font-size: 12px;
}
.our-plans1 i.features i {
font-size: 12px;
}
}
@media screen and (max-width: 767px) {
.our-plans {
margin: 10px;
padding: 20px;
text-align: center;
}
.our-plans1 {
margin: 10px;
padding: 20px;
text-align: center;
}
.btn3 {
padding: 5px 0px;
margin: 10px 55px;
font-size: 16px;
}
.btn4 {
padding: 5px 0px;
margin: 10px 55px;
font-size: 16px;
}
}
@media screen and (max-width: 575px) {
.plans {
margin-top: 4rem;
}
}
/* FAQ1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.rr {
text-align: center;
font-size: 18px;
padding: 25px 0px;
}
.faq1 {
margin-top: 4rem;
background-image: linear-gradient(#80808029, transparent);
}
/* MEDIA QUERY FAQ1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 575px) {
.faq1 {
margin-top: 2rem;
}
}
/* NEWSLETTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.newsletter {
margin-top: 4rem;
background-color: #80808040;
}
.newsletter-col1 {
padding: 20px;
}
.form-control11 {
padding: 15px;
border-radius: 5px 0px 0px 5px;
width: 100%;
border: none;
}
.formm {
display: flex;
width: 90%;
margin: 3rem 14px;
}
.newsletter-button {
background-color: #252734;
color: white;
border-radius: 0px 5px 5px 0px;
border: none;
align-items: center;
}
.newsletter-button:hover {
color: white;
}
:focus-visible {
outline: -webkit-focus-ring-color 1px;
}
/* MEDIA QUERY NEWSLETTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 991px) {
.newsletter-col1 {
padding: 0;
margin-top: 2rem;
}
}
@media screen and (max-width: 767px) {
.newsletter-col1 {
text-align: center;
}
}
@media screen and (max-width: 575px) {
.newsletter {
margin-top: 2rem;
}
}
/* POPUP FORM STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.form-holder .form-content {
position: relative;
text-align: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
padding: 60px;
}
.form-content .form-items {
/* border: 3px solid #fff2f2; */
/* padding: 40px; */
display: inline-block;
width: 100%;
/* min-width: 540px; */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align: left;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.form-content h3 {
color: #ff5a94;
text-align: center;
font-size: 28px;
font-weight: unset;
margin-bottom: 5px;
}
.form-content h3.form-title {
margin-bottom: 30px;
}
.form-content p {
text-align: center;
font-size: 17px;
font-weight: 300;
line-height: 20px;
margin-bottom: 30px;
}
.form-check {
display: block;
min-height: 1.5rem;
padding-left: 1.5em;
margin: 15px 0px;
margin-bottom: .125rem;
}
.form-content label,
.was-validated .form-check-input:invalid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
color: #ff5a94;
}
.form-content input[type=text],
.form-content input[type=password],
.form-content input[type=email],
.form-content select {
width: 100%;
padding: 15px 20px;
text-align: left;
/*border: 1;*/
outline: 0;
border-radius: 6px;
background-color: #fff;
font-size: 15px;
font-weight: 300;
color: #151414;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-top: 15px;
}
.btn.register {
color: white;
background-color: #252734;
display: block;
width: 100%;
outline: none;
border: 0px;
box-shadow: none;
}
.btn.next {
color: white;
background-color: #ff5a94;
outline: none;
border: 0px;
box-shadow: none;
margin-top: 12px;
float: right;
}
.form-content textarea {
position: static !important;
width: 100%;
padding: 8px 20px;
border-radius: 6px;
text-align: left;
background-color: #fff;
border: 0;
font-size: 15px;
font-weight: 300;
color: #8D8D8D;
outline: none;
resize: none;
height: 120px;
-webkit-transition: none;
transition: none;
margin-bottom: 14px;
}
.form-content textarea:hover,
.form-content textarea:focus {
border: 0;
background-color: #ebeff8;
color: #8D8D8D;
}
.mv-up {
margin-top: -9px !important;
margin-bottom: 8px !important;
}
.invalid-feedback {
color: #ff606e;
}
.valid-feedback {
color: #2acc80;
}
/* POPUP VARIFICATION STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.card {
width: 100%;
border: none;
height: 300px;
box-shadow: 0px 0px 0px 0px #d2dae3;
z-index: 1;
display: flex;
justify-content: center;
align-items: center
}
.card h6 {
color: #ff5a94;
font-size: 20px
}
.inputs input {
width: 45px;
height: 45px;
border: 2px solid grey;
}
.form-control-1 {
padding: 10px;
border-radius: 50px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0
}
.card-2 {
background-color: #fff;
padding: 10px;
width: 350px;
height: 100px;
bottom: -50px;
left: 20px;
position: absolute;
border-radius: 5px
}
.card-2 .content {
color: #252734;
margin-top: 50px
}
.card-2 .content a {
color: #ff5a94;
}
.validate:hover {
color: white;
}
.validate {
border-radius: 20px;
height: 40px;
color: white;
background-color: #252734;
border: #252734;
width: 140px;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
CONTACT PAGE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* CONTACT STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact {
margin-top: 6rem;
}
.contact-us {
background-color: #8080800f;
box-shadow: 0px 0px 60px #00000003;
border-radius: 8px;
margin-bottom: 4rem;
}
.contact-col0 {
padding: 7rem 40px;
}
.contact-wrap {
padding: 10px;
}
.contact-col1 {
padding: 2rem;
}
form.data-form {
padding-top: 25px;
}
/*.contact-wrap img {
float: left;
height: 60px;
padding-right: 25px;
}*/
.contact-icon i {
background-color: #252734;
padding: 6px;
color: white;
border-radius: 5px;
float: left;
font-size: 30px;
margin-right: 15px;
}
/* MEDIA QUERY CONTACT STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1199px) {
.contact-wrap {
padding: 5px;
}
.contact-col0 {
padding: 7rem 20px;
}
}
@media screen and (max-width: 991px) {
.contact-info {
padding-left: 57px;
}
}
@media screen and (max-width: 767px) {
.contact-col0 {
/* text-align: center; */
padding: 0px 0px;
margin-top: 15px;
}
.contact-wrap {
display: flex;
justify-content: left;
align-items: center;
margin: 0 2rem;
}
.contact-icon i {
float: none;
}
.contact-info {
padding-left: 0px;
}
.contact-col1 h2 {
text-align: center;
}
.contact-col1 p {
text-align: center;
}
}
@media screen and (max-width: 575px) {
.contact {
margin-top: 4rem;
}
.contact-us {
margin-bottom: 2rem;
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
CONTACT 2 PAGE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* CONTACT 2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact-us1 {
background-color: #8080800f;
box-shadow: 0px 0px 60px #00000003;
border-radius: 8px;
padding: 2rem;
margin-bottom: 4rem;
}
.contact-wrap-1 {
padding: 3rem;
}
.contact-wrap-1 i {
padding-right: 12px;
}
.contact-wrap-2 {
padding: 8rem 10px;
}
.form-control.form-1 {
border: none;
height: 50px;
}
.form-control.form-2 {
border: none;
}
.form-control:focus {
/* border-color: #86b7fe; */
box-shadow: none;
}
.btn:focus {
outline: 0;
box-shadow: none;
}
.btn.btn-dark.fw-bold {
width: 30%;
height: 60px;
border-radius: 5px;
}
.contact-img {
width: 25%;
float: right;
}
/* MEDIA QUERY CONTACT 2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1199px) {
.contact-wrap-1 {
padding: 0px;
}
}
@media screen and (max-width: 767px) {
.contact-wrap-2 {
padding: 1rem 0px;
}
}
@media screen and (max-width: 575px) {
.contact-us1 {
padding: 2rem;
margin-bottom: 2rem;
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
ABOUT PAGE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ABOUT11 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.about11 {
margin-top: 8rem;
}
.about-us {
background-color: #8080800f;
box-shadow: 0px 0px 60px #00000003;
border-radius: 8px;
margin-top: 4rem;
}
.about-text {
margin: 6rem;
}
.about-text h1 {
margin-bottom: 1rem;
}
.about-text p {
margin-bottom: 1rem;
font-size: 18px;
}
.about-wrap img {
height: auto;
width: 100%;
}
.list {
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 0rem;
}
.list i {
font-size: 15px;
}
/* MEDIA QUERY ABOUT11 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1199px) {
.about-text {
margin: 2rem;
}
.about-text h1 {
margin-bottom: 1rem;
}
.about-text p {
margin-bottom: 1rem;
font-size: 16px;
}
}
@media screen and (max-width: 991px) {
.about11 {
margin-top: 6rem;
}
span.fas.fa-bars {
color: #252734;
background-color: transparent;
font-size: 20px;
}
.about-text {
margin: 1rem;
padding: 0px 0px;
}
}
@media screen and (max-width: 767px) {
.about-text {
margin: 1rem;
text-align: center;
}
}
@media screen and (max-width: 575px) {
.about11 {
margin-top: 5rem;
}
.about-us {
margin-top: 2rem;
}
}
@media screen and (max-width: 440px) {
.list {
display: block;
}
}
/* TIME-LINE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.time-line {
margin-top: 4rem;
}
.work_row {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.work_row .col_left {
width: 50%;
}
.work_row .col_right {
width: 50%;
}
.timeline-panel {
background-color: #f8f8f8;
box-shadow: 0px 0px 60px #00000003;
border-radius: 8px;
padding: 20px;
position: relative;
}
.timeline-panel:hover {
background-color: #252734;
color: white;
}
.timeline-panel:hover h4 {
color: white;
}
.timeline-panel:hover i {
color: #252734;
background-color: white;
}
.timeline-panel:hover .timeline-pin {
border-color: #252734;
}
.timeline-panel:hover .timeline-pin-1 {
border-color: #252734;
}
.timeline-body {
padding: 23px 5rem;
}
h4.timeline-heading {
padding-bottom: 12px;
}
.timeline-panel i {
font-size: 35px;
color: white;
background-color: #252734;
border-radius: 5px;
width: 60px;
height: 60px;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
margin: 2rem 0px;
}
.timeline-panel i :hover {
color: #252734;
background-color: white;
}
.timeline-panel .timeline-pin {
position: absolute;
top: 50%;
right: -20px;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
width: 40px;
height: 40px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
border-style: solid;
border-width: 20px;
z-index: -1;
border-color: #f8f8f8;
}
.timeline-panel .timeline-pin-1 {
position: absolute;
top: 50%;
left: -20px;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
width: 40px;
height: 40px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
border-style: solid;
border-width: 20px;
z-index: -1;
border-color: #f8f8f8;
}
.work_row .col_center {
background-color: #252734;
width: 2px;
height: 20rem;
display: flex;
align-items: center;
justify-content: end;
position: relative;
}
.work_row .col_center span {
border: ridge #252734;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: -12px;
border-radius: 100%;
}
.col_left.div_left {
text-align: right;
padding-right: 8rem;
}
.col_right.text_right {
text-align: left;
padding-left: 8rem;
}
.col_right.text_left {
text-align: right;
padding-right: 8rem;
}
.col_left.div_right {
text-align: left;
padding-left: 8rem;
}
/* MEDIA QUERY ABOUT11 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1199px) {
.timeline-body {
padding: 24px 70px;
}
.timeline-panel i {
margin: 12px 0px;
font-size: 30px;
width: 50px;
height: 50px;
}
.timeline-body {
padding: 20px 60px;
}
.work_row .col_center {
height: 24rem;
}
}
@media screen and (max-width: 991px) {
.work_row {
display: block;
}
.col_left.div_left {
text-align: center;
padding-right: 0rem;
}
.work_row .col_left {
width: 100%;
}
.col_right.text_right {
text-align: center;
padding-left: 0rem;
}
.col_right.text_left {
text-align: center;
padding-right: 0rem;
}
.col_left.div_right {
text-align: center;
padding-left: 0rem;
}
.work_row .col_right {
width: 100%;
}
.work_row .col_center {
display: none;
}
.work-1 {
display: flex;
flex-direction: column-reverse;
margin: 30px 0px
}
}
@media screen and (max-width: 991px) {
.time-line {
margin-top: 2rem;
}
}
/* COMMITMENT STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.commitment {
margin-top: 4rem;
}
.commitment-wrap {
background-color: #8080800f;
box-shadow: 0px 0px 60px #00000003;
border-radius: 8px;
padding: 2rem;
}
.commitment-col {
box-shadow: 0px 0px 60px #00000017;
border-radius: 5px;
background-color: white;
padding: 35px;
margin: 15px;
height: 100%;
}
.commitment-col:hover {
background-color: #252734;
color: white;
}
.commitment-col:hover h3 {
color: white;
}
.commitment-col:hover i {
color: #252734;
background-color: white;
}
.commitment-col h3 {
margin-bottom: 20px;
}
.commitment-col i {
font-size: 35px;
color: white;
background-color: #252734;
border-radius: 5px;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 25px;
}
/* MEDIA QUERY COMMITMENT STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1199px) {
.commitment-col {
height: 90%;
}
}
@media screen and (max-width: 767px) {
.commitment-col {
height: auto;
}
}
@media screen and (max-width: 575px) {
.commitment {
margin-top: 2rem;
}
.commitment-col {
text-align: center;
}
.commitment-col i {
margin: auto;
margin-bottom: 20px;
}
}
/* TEAM STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.team {
margin: 4rem 0px;
}
.team-member {
padding: 18px;
text-align: center;
}
.team-member img {
width: 100%;
height: auto;
border-radius: 5px;
margin-bottom: 20px;
}
.team-member h5 {
font-weight: 300;
margin: 15px 0px;
}
.team-member p {
font-weight: 300;
margin-bottom: 20px;
}
.team-member i {
background-color: #252734;
color: white;
font-size: 14px;
border-radius: 5px;
display: inline-flex;
width: 24px;
height: 24px;
margin: 0px 8px;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 575px) {
.team {
margin: 2rem 0px;
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
BLOG PAGE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* BLOG-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.blog-1 {
margin-top: 6rem;
}
.blog-2 {
margin-bottom: 4rem;
}
.blog-left {
margin: 0px 15px;
}
.blog-left-wrap img {
width: 100%;
height: auto;
border-radius: 5px;
}
.blog-heading a {
color: #101828;
text-decoration: none;
}
.blog-heading a:hover {
text-decoration: underline;
}
.blog-left-col {
padding: 15px;
}
.blog-left-col img {
width: 100%;
border-radius: 5px;
}
.blog-left-col-time {
display: flex;
}
.blog-left-col h4 a {
color: #101828;
text-decoration: none;
}
.blog-left-col h4 a:hover {
text-decoration: underline;
}
.blog-left-col-time p {
padding: 0px 4px;
}
.read {
color: #475467;
text-decoration: none;
}
.read:hover {
color: #f03b30;
}
.blog-right {
margin: 0px 15px;
}
.blog-right-img img {
width: 100px;
height: 100px;
border-radius: 5px;
}
.blog-right-heading {
padding: 12px 0px;
}
.blog-right-heading h4 {
position: relative;
}
.blog-right-heading h4::before {
content: "";
background: #ff5a94;
position: absolute;
right: 30%;
top: 15px;
width: 118px;
height: 2px;
}
.blog-right-body h4 a {
color: #101828;
font-size: 18px;
text-decoration: none;
}
.blog-right-body h4 a:hover {
text-decoration: underline;
}
.blog-right-list li {
padding: 8px;
font-size: 20px;
}
.btn.blog-button {
box-sizing: border-box;
background-color: #101828;
color: white;
margin: 10px;
padding: 8px 16px 8px 30px;
}
.btn.blog-button:hover {
background-color: #ff5a94;
color: white;
}
.blog-right-button {
display: inline-block;
}
/* MEDIA QUERY BLOG-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1399px) {
.blog-right-heading h4::before {
right: 15%;
}
}
@media screen and (max-width: 1199px) {
.blog-right-img img {
width: 90px;
height: 90px;
}
.blog-right-heading h4::before {
right: 0%;
}
}
@media screen and (max-width: 991px) {
.blog-right-heading h4::before {
right: 60%;
}
}
@media screen and (max-width: 767px) {
.blog-right-img img {
width: 100px;
height: 100px;
}
.blog-right-heading h4::before {
right: 45%;
}
.blog-right-list li {
font-size: 18px;
}
}
@media screen and (max-width: 575px) {
.blog-1 {
margin-top: 4rem;
}
.blog-2 {
margin-bottom: 2rem;
}
.blog-left-col-time {
display: flex;
justify-content: center;
}
.blog-left-col {
text-align: center;
}
.blog-right-list {
display: flex;
justify-content: center;
}
.blog-right-list li {
font-size: 15px;
}
.blog-right-button {
text-align: center;
}
}
@media screen and (max-width: 480px) {
.blog-right-heading h4::before {
content: "";
background: #ff5a94;
position: absolute;
right: 30%;
top: 15px;
width: 88px;
height: 2px;
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
BLOG DETAIL PAGE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* BLOG-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
blockquote {
font-size: 16px;
line-height: 30px;
padding: 13px;
font-weight: 400;
display: block;
position: relative;
background-color: #8080800d;
margin: 25px 0;
font-style: italic;
border: 1px solid #BDBDBD;
border-radius: 0px;
}
blockquote p::before {
content: open-quote;
color: #ff5a94;
font-size: 30px;
}
blockquote p::after {
content: close-quote;
color: #ff5a94;
font-size: 30px;
}
cite {
padding: 0 10px;
color: #ff5a94;
}
.blog-left-col h2 a {
color: #101828;
text-decoration: none;
}
.blog-left-col h2 a:hover {
text-decoration: underline;
}
.blog-left-p {
line-height: 30px;
}
.blog-left-follow {
border: 1px solid #bdbdbd;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #8080800d;
}
.blog-left-follow-icon {
display: inline-flex;
}
.blog-left-follow-icon a {
text-decoration: none;
}
.blog-left-follow-icon i {
background-color: #252734;
color: white;
font-size: 14px;
border-radius: 5px;
display: inline-flex;
width: 24px;
height: 24px;
margin: 0px 3px;
align-items: center;
justify-content: center;
}
.blog-left-follow-icon i:hover {
background-color: #ff5a94;
}
.blog-right-contact {
position: relative;
background-image: url(../img/immmggg.jpeg);
padding: 2rem 0;
background-position: center;
background-size: cover;
border-radius: 5px;
}
.blog-right-contact::before {
content: "";
position: absolute;
background-color: #151d2cbf;
border-radius: 5px;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.contact-headingg {
position: relative;
}
.contact-headingg h4 {
color: white;
}
.contact-headingg p {
color: white;
}
.phone a {
color: #ff5a94;
text-decoration: none;
}
.phone a:hover {
text-decoration: underline;
}
/* MEDIA QUERY BLOG-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 767px) {
.blog-left-follow {
display: block;
}
.blog-left-follow-icon {
display: inline-flex;
margin-top: 10px;
}
}
@media screen and (max-width: 575px) {
.rrr {
text-align: center;
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
SEARCH PAGE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ABOUT-11 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.about-11 {
margin-top: 2rem;
background-color: #ff5a94;
padding: 2rem 0;
}
.btn00 {
/* padding: 8px 16px; */
padding: 8px 16px;
font-size: 16px;
border-radius: 5px;
background-color: white;
color: #101828;
}
.btn00:hover {
background-color: #101828;
color: white;
}
/* search-heading style
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.search-heading {
padding-top: 3rem;
display: flex;
/* padding-bottom: 1rem; */
}
.search-heading-gap {
display: inline-block;
position: relative;
min-width: 31px;
right: 2px;
}
.search-heading-gap:after {
display: block;
content: "";
position: absolute;
top: 8px;
left: 13px;
height: 2px;
width: 10px;
background: #ff5a94;
}
.search-heading h6 a {
color: #101828;
text-decoration: none;
}
.search-heading h6 a:hover {
color: blue;
/* text-decoration: underline; */
}
/* media query search-heading style
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 575px) {}
/* FIELDS style
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.fields {
padding-top: 2rem;
padding-bottom: 2rem;
}
.fields-2 {
display: flex;
gap: 10px;
}
.search-form-inner-field {
width: 92%;
height: 50px;
display: flex;
}
.formm1-icon {
background-color: #101828;
color: white;
width: 15%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0 5px 5px 0;
}
.formm1-icon:hover {
background-color: #ff5a94;
color: white;
border-radius: 0 5px 5px 0;
}
.form-control.formm1 {
border-color: #101828;
border-radius: 5px 0 0 5px;
}
.form-control.formm1:focus {
color: #212529;
background-color: #fff;
border-color: #101828;
box-shadow: none;
border-radius: 5px 0 0 5px;
}
.clear-button-1 {
background-color: #ff5a94;
color: white;
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
}
/* media query fields style
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1399px) {
.search-form-inner-field {
width: 90%;
}
}
@media screen and (max-width: 1199px) {
.search-form-inner-field {
width: 88%;
}
}
@media screen and (max-width: 991px) {
.search-form-inner-field {
width: 85%;
}
}
@media screen and (max-width: 767px) {
.formm1-icon {
width: 20%;
}
.search-form-inner-field {
width: 100%;
height: 45px;
}
}
@media screen and (max-width: 575px) {
.search-form-inner-field {
width: 100%;
height: 40px;
}
}
/* search-buttons-section style
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.search-buttons-text {
padding-bottom: 12px;
}
.search-buttons {
float: right;
}
.btn-group {
border-color: #101828;
color: #101828;
}
.btn-group.active {
background-color: #101828;
color: white;
}
.btn-group:hover {
background-color: #ff5a94;
color: white;
}
.search-buttons-text a {
color: #101828;
text-decoration: none;
font-weight: 500;
}
.span-text {
color: #101828;
font-size: 18px;
}
.bttnn {
padding: 0;
}
.search-filters-range {
display: flex;
align-items: center;
gap: 5px;
}
.search-filters-range_component__input {
width: 80%;
}
.search-filters-range_component__button {
background-color: #101828;
color: white;
}
/* Optional styling for the content */
/* Base styles for the page and the dropdown */
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
font-family: Arial, sans-serif;
}
.filter-button-0 {
margin-right: 10px;
padding: 3px 8px;
border-radius: 5px;
display: inline-block;
border: 1px solid;
border-color: #101828;
color: #101828;
text-decoration: none;
}
.filter-button-0 i {
font-size: 13px;
margin-right: 2px;
}
/* Full-page styles for the industry content */
#industry-content {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 9999;
padding: 20px;
overflow-y: auto;
}
/* Styles for buttons */
.buttons-22 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.done-button {
background-color: #4CAF50;
color: white;
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
}
.clear-button {
background-color: #ff5a94;
color: white;
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
}
/* media query search-buttons-section style
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1399px) {
.search-filters-range {
display: flex;
align-items: center;
gap: 1px;
}
}
@media screen and (max-width: 1199px) {
.search-filters-range {
display: block;
}
.search-filters-range_component__input {
width: 100%;
}
.search-filters-range_component__button {
border: 1px solid #767676;
width: 100%;
margin: 15px 0;
}
}
@media screen and (max-width: 767px) {
.fields {
padding-top: 1rem;
padding-bottom: 2rem;
}
.search-filters-range {
display: flex;
align-items: center;
gap: 5px;
}
.search-filters-range_component__input {
width: 90%;
}
.search-filters-range_component__button {
border: 1px solid #767676;
width: 10%;
}
.search-buttons {
float: unset;
display: flex;
justify-content: space-between;
align-items: center;
}
.category {
margin: 20px;
}
.search-buttons-text {
padding-bottom: 0;
}
select#buttons-group {
border: 1px solid #101828;
color: #101828;
padding: 5px;
border-radius: 5px;
}
.clgs {
padding: 0;
height: 0px;
}
}
@media screen and (max-width: 392px) {
.search-filters-range_component__input {
width: 85%;
}
.search-filters-range_component__button {
width: 15%;
}
}
/* search-about style
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.search-about {
padding: 2rem 0;
}
.category a {
color: #101828;
text-decoration: none;
}
.form-check-input:checked {
background-color: #101828;
border-color: #101828;
}
.about_col-0 {
box-shadow: 0px 0px 60px #00000017;
background-color: white;
border-radius: 8px;
padding: 20px;
margin: 20px;
position: relative;
}
.about_col-0 img {
width: 100%;
}
.wishlist i {
color: #ff5a94;
position: absolute;
right: 27px;
top: 27px;
font-size: 23px;
}
.heart-icons .heart_fill {
display: none;
}
.heart-icons:hover .heart_border {
display: none;
}
.heart-icons:hover .heart_fill {
display: block;
}
.about_col-wrap h6 {
padding-top: 10px;
margin-bottom: 0;
}
.about_col-wrap h6 a {
color: #101828;
text-decoration: none;
}
.about_col-wrap h6 a:hover {
color: #101828;
text-decoration: underline;
}
.span-text-1 a {
color: #475467;
text-decoration: none;
font-size: 13px;
}
.span-text-1 a:hover {
text-decoration: underline;
}
.rating-details {
display: flex;
gap: 20px;
}
.rating a {
text-decoration: none;
color: #475467;
}
.rating i {
width: 8px;
font-size: 10px;
color: #f8f806;
}
.rating-no {
font-size: 13px;
}
.prev-1 {
font-size: 12px;
box-sizing: border-box;
border-color: #101828;
padding: 5px 7px;
}
.prev-1:hover {
background-color: #ff5a94;
color: white;
border-color: #ff5a94;
}
.prev-2 {
font-size: 12px;
box-sizing: border-box;
color: white;
border-color: #717376;
background-color: #717376;
padding: 5px 7px;
}
.prev-2:hover {
background-color: #ff5a94;
color: white;
border-color: #ff5a94;
}
/* media query search-about style
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1399px) {
.about_col-0 {
box-shadow: 0px 0px 60px #00000017;
background-color: white;
border-radius: 8px;
padding: 15px;
margin: 5px;
position: relative;
margin-bottom: 20px;
}
}
@media screen and (max-width: 1199px) {
.rating-buttons {
display: inline-flex;
flex-direction: column;
gap: 4px;
}
}
@media screen and (max-width: 575px) {
.rating-buttons {
display: unset;
flex-direction: unset;
gap: 0;
}
.rating-details {
display: flex;
justify-content: space-between;
}
}
/* pagination style
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.pagination {
display: flex;
justify-content: center;
gap: 10px;
list-style: none;
padding-top: 1rem;
margin-bottom: 0;
}
.page-item.active .page-link {
z-index: 3;
background-color: #101828;
color: white;
border: 2px solid #101828;
width: 40px;
height: 40px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.page-item .page-link {
z-index: 3;
background-color: transparent;
color: #101828;
border: 2px solid #101828;
width: 40px;
height: 40px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.page-link:hover {
z-index: 3;
background-color: #101828;
color: white;
border: 2px solid #101828;
width: 40px;
height: 40px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
}
.page-link:focus {
background-color: transparent;
outline: 0;
box-shadow: none;
}
.page-item:first-child .page-link {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
.page-item:last-child .page-link {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.page-item.disabled .page-link {
color: #101828;
pointer-events: none;
background-color: transparent;
border: none;
}
/* media query search-section style
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 767px) {
.pagination {
padding-top: 1rem;
}
.page-item.active .page-link {
width: 35px;
height: 35px;
}
.page-item .page-link {
width: 35px;
height: 35px;
}
}
@media screen and (max-width: 575px) {
.pagination {
padding-top: 0;
}
.page-item.active .page-link {
width: 30px;
height: 30px;
}
.page-item .page-link {
width: 30px;
height: 30px;
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
DEMO PAGE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* search-demo STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.search-demo {
margin-top: 4rem;
padding: 2rem 0;
}
.demo-heading h2 a {
color: #101828;
text-decoration: none;
}
.demo-heading h2 a:hover {
text-decoration: underline;
}
.demo-heading p a {
color: #ff5a94;
text-decoration: none;
font-weight: 500;
}
.demo-heading p a:hover {
text-decoration: underline;
}
.reviews p a {
color: #475467;
}
.reviews p a:hover {
color: #475467;
text-decoration: none;
}
.reviews i {
color: #f8f806;
font-size: 13px;
}
.about_col-00 {
box-shadow: 0px 0px 60px #00000017;
background-color: white;
border-radius: 8px;
padding: 20px;
margin: 0px;
position: relative;
}
.about_col-00 img {
width: 100%;
}
.wishlist-0 {
display: flex;
justify-content: end;
gap: 10px;
margin-top: 15px;
}
.wishlist-0 i {
color: #ff5a94;
font-size: 18px;
}
.about-demo-text {
margin-top: 40px;
}
.about-demo-text i {
color: #f3f306;
}
.about-demo-text-1 {
margin-top: 15px;
}
.about-demo-list li {
padding: 4px 0;
}
.review-list-0 {
padding: 25px 25px;
border: 1px solid #e1e8ed;
border-radius: 4px;
background: white;
border-radius: 5px;
margin-bottom: 20px;
}
.review-list {
padding-left: 0;
}
.review-list li {
list-style: none;
padding: 5px;
}
.review-list i {
color: #ff5a94;
margin-right: 5px;
font-size: 13px;
}
.dollar {
margin-left: 30px;
}
.btn11 {
padding: 8px 16px;
font-size: 16px;
border-radius: 5px;
background-color: #101828;
color: white;
}
.btn11:hover {
background-color: #ff5a94;
color: white;
}
.last-line {
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #0000006b;
}
.btn.blog-button1 {
box-sizing: border-box;
border-color: #101828;
color: #101828;
margin: 4px 0;
font-size: 14px;
padding: 5px 10px;
}
.btn.blog-button1:hover {
background-color: #ff5a94;
border-color: #ff5a94;
color: white;
}
.review-list-01 {
padding: 25px 25px;
background-color: #fafafa;
border: 1px solid #e1e8ed;
border-radius: 4px;
border-radius: 5px;
margin-bottom: 20px;
}
.meta-attributes tr td {
font-size: 14px;
padding-bottom: 15px;
vertical-align: top;
}
.meta-attributes__attr-name {
color: #454545;
font-weight: bold;
padding-right: 10px;
width: 140px;
}
.meta-attributes__attr-detail a {
text-decoration: none;
}
.meta-attributes__attr-detail a:hover {
text-decoration: underline;
}
/* media query search-demo STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 991px) {
.wishlist-0 {
display: inline-flex;
flex-direction: column;
justify-content: end;
gap: 12px;
margin-top: 15px;
}
}
@media screen and (max-width: 767px) {
.about-demo-text-1 {
margin-bottom: 35px;
}
.wishlist-0 {
display: flex;
flex-direction: row;
justify-content: end;
gap: 12px;
margin-top: 15px;
}
}
@media screen and (max-width: 575px) {
.demo-heading {
text-align: center;
}
.about-demo-text {
text-align: center;
}
}
@media screen and (max-width: 446px) {
.about-demo-text-1 h5 {
text-align: center;
}
.review-prev {
text-align: center;
}
.review-tags {
text-align: center;
}
.last-line {
text-align: center;
}
}
@media screen and (max-width: 396px) {
.wishlist-0 {
display: flex;
flex-direction: column;
}
}
/* account page css */
.account_manuLeft {
margin-bottom: 2rem;
background-color: #8080800f;
box-shadow: 0px 0px 60px #00000003;
border-radius: 8px;
padding: 1rem;
}
.account_manuLeft ul {
list-style: none;
padding: 0px 0px 0px;
margin: 0px 0px 0px;
}
.account_manuLeft ul li a {
display: block;
min-height: 1.5rem;
padding-left: 10px;
color: #475467;
list-style: none;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #c9c9c9;
}
.account_manuLeft ul li a.active-link {
background-color: #101828;
color: white;
}
.account_manuLeft ul li:last-child a {
border-bottom: none;
}
.account_manuRight {
margin-bottom: 2rem;
}
.account_manuRight nav .nav-tabs {
column-gap: 10px;
padding-bottom: 1rem;
}
.account_manuRight nav .nav-link {
border-color: #101828;
color: #101828;
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding: .375rem .75rem;
font-size: 1rem;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.account_manuRight nav .nav-link.active {
background-color: #101828;
color: white;
}
.account_manuRight nav .nav-link:hover {
background-color: #101828;
color: white;
}
.profiletab_content p {
font-size: 20px;
text-align: left;
font-weight: 600;
border-bottom: 1px solid #c9c9c9;
padding-bottom: 1rem;
}
.profiletab_content .btn.register {
width: fit-content;
}
@media screen and (max-width: 768px) {
.profiletab_content .btn.register {
width: 100%;
}
}
/* account page css */
#flash-message {
display: none;
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
padding: 10px;
width: 300px;
max-width: 80%;
}
#flash-message .alert {
margin: 0;
padding: 15px;
font-size: 16px;
text-align: center;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* user website page css */
.website-item {
border-radius: 5px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
position: relative;
}
.website_status {
top: 0;
left: 0;
z-index: 999;
width: 90px;
height: 24px;
position: absolute;
background: #717376;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
padding-left: inherit;
}
.website_status::before {
content: "";
position: absolute;
right: -9px;
bottom: 0;
width: 0;
height: 0;
border-left: 10px solid #717376;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
.website_status::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 10px solid white;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
.status_draft {
background: #717376;
}
.status_draft::before {
border-left: 10px solid #717376;
}
.status_Submitted {
background: #009cff;
}
.status_Submitted::before {
border-left: 10px solid #009cff;
}
.status_Unpublished {
background: #ff5a94;
}
.status_Unpublished::before {
border-left: 10px solid #ff5a94;
}
.status_Published {
background: green;
}
.status_Published::before {
border-left: 10px solid green;
}
.website-info img {
width: 80px;
height: 80px;
min-width: 80px;
min-height: 80px;
margin-right: 15px;
object-fit: cover;
}
.website-item h6 {
font-size: 16px;
font-weight: bold;
}
.website-item p a {
display: inline;
font-size: 12px;
font-weight: normal;
color: #d65483;
}
.center_text p {
border: none;
margin-bottom: 0px;
padding-bottom: 0px;
font-size: 15px;
color: #8f8f8f;
font-weight: normal;
}
.website-actions .btn {
font-size: 14px;
padding: 5px 10px;
}
.dynamic-field {
position: relative;
display: flex
;
align-items: flex-end;
}
.dynamic-field .remove-field {
border-radius: 35px;
height: 43px;
width: 43px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 5px;
font-size: 20px;
}
.service-field textarea {
margin-top: 15px;
height: 53px;
margin-bottom: 8px;
border: 1px solid;
resize: auto;
}
.service-field textarea:hover {
border: 1px solid;
}
.service-field .remove-service-field {
border-radius: 35px;
height: 53px;
width: 53px;
display: flex
;
align-items: center;
justify-content: center;
margin-left: 5px;
font-size: 25px;
margin-top: 14px !important;
}
.form-content label {
color: #000000;
}
textarea#instructions {
border: 1px solid;
resize: auto;
}
#businessParagraph {
margin-top: 15px;
height: 53px;
margin-bottom: 0px;
border: 1px solid;
resize: auto;
}
/* Modal Styles */
.modal1 {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.modal-content1 {
background: white;
padding: 20px;
border-radius: 0px;
width: 100%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
position: relative;
height: 100vh;
}
/* .modal-content1 .modal-body {
width: 90%;
margin-left: auto;
margin-right: auto;
} */
.close1 {
position: absolute;
top: -5px;
right: 15px;
font-size: 35px;
cursor: pointer;
}
/* Button Styles */
.btn-primary {
background-color: #ff5a94;
color: white;
border-color: #ff5a94;
}
.btn-primary:hover {
background-color: #ff5a94;
color: white;
border-color: #ff5a94;
}
.btn-secondary {
background-color: #ff5a94;
color: white;
}
.btn:hover {
opacity: 0.9;
}
/* Form Step */
.form-step {
display: none;
}
.form-step.active {
display: block;
}
/* Steps Indicator */
.steps {
display: flex;
align-items: center;
margin-bottom: 45px;
width: 92%;
margin-left: auto;
margin-right: auto;
}
.step {
width: 30px;
height: 30px;
border-radius: 50%;
background: #ccc;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
position: relative;
}
.step span {
position: absolute;
bottom: -25px;
width: max-content;
color: #000;
}
.step.active {
background: #ff5a94;
}
.step.active span {
color: #ff5a94;
}
.line {
height: 2px;
flex-grow: 1;
background: #ccc;
margin: 0 0px;
}
.line.active {
background: #ff5a94;
}
/* Highlight invalid input */
input.error {
border: 1px solid red;
}
/* Error message styling */
.error-message {
color: red;
font-size: 12px;
margin-top: 5px;
}
.text-center {
text-align: center;
margin-top: 20px;
}
.fa-spinner {
color: #ff5a94; /* Adjust the color of the spinner */
}
#spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
.pricing_modalDialog {
max-width: 1100px;
}
/* loader css */
.loader_main {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #000000b0;
z-index: 99999;
}
/* .loader_main .loader {
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} */
.loader_main .loader {
color: #FFF;
display: inline-block;
position: relative;
font-size: 30px;
box-sizing: border-box;
}
.loader_main .loader::after {
content: '';
width: 5px;
height: 5px;
background: currentColor;
position: absolute;
bottom: 10px;
right: -5px;
box-sizing: border-box;
animation: animloader 1s linear infinite;
}
@keyframes animloader {
0% {
box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0);
}
50% {
box-shadow: 10px 0 white, 20px 0 rgba(255, 255, 255, 0);
}
100% {
box-shadow: 10px 0 white, 20px 0 white;
}
}