html,
body {
font-family: "Mulish", sans-serif;
font-optical-sizing: auto;
font-style: normal;
} ::-webkit-scrollbar {
width: 10px;
}
.active-menus{
color: #ea550f;
} input,
textarea {
border-width: 1px;
border-radius: 0.5rem;
width: 100%;
padding: 1rem !important;
font-size: 1.125rem !important; 
line-height: 1.75rem !important;
}
.g-recaptcha {
width: 100% !important; max-width: 250px; display: block; }
.wpcf7 input[type="submit"] {
background-color: #ea550f; color: white;
padding: 0.75rem 1.25rem;
font-size: 1.125rem;
border-radius: 0.75rem;
cursor: pointer;
width: 200px;
}
.wpcf7 input[type="submit"]:hover {
background-color: #a6c626; } ::-webkit-scrollbar-track {
background: #f1f1f1;
} ::-webkit-scrollbar-thumb {
background: #888;
} ::-webkit-scrollbar-thumb:hover {
background: #555;
} .ham_nav_btn {
border: none;
background: none;
cursor: pointer;
}
.hamburger {
width: 40px;
height: 40px;
}
.hamburger__bar {
transition-property: transform;
transition-duration: 0.3s;
transform-origin: center;
stroke: rgb(0, 0, 0);
stroke-width: 15%; }
.hamburger__bar_top {
transform: translateY(-40%);
}
.hamburger__bar_bot {
transform: translateY(40%);
}
.is-opened .hamburger__bar_top {
transform: rotate(45deg);
}
.is-opened .hamburger__bar_mid {
transform: scaleX(0.1);
}
.is-opened .hamburger__bar_bot {
transform: rotate(-45deg);
} .hamburger_main_menu {
position: fixed;
top: 20px;
right: -50px;
padding: 0rem;
height: 0;
width: 0;
background-color: white;
z-index: 30;
transition: all;
transition-duration: 0.5s;
border-bottom-left-radius: 1000px;
}
.hamburger_navigation .hamburger_nav_item {
transition: all;
transition-duration: 0.3s;
opacity: 0;
margin-left: -60px;
}
.hamburger_navigation .hamburger_nav_item_2 {
transition-delay: 0.05s;
}
.hamburger_navigation .hamburger_nav_item_3 {
transition-delay: 0.1s;
}
.hamburger_navigation .hamburger_nav_item_4 {
transition-delay: 0.15s;
}
.hamburger_navigation .hamburger_nav_item_5 {
transition-delay: 0.2s;
}
.hamburger_navigation .hamburger_nav_item_6 {
transition-delay: 0.35s;
}
.hamburger_navigation .hamburger_nav_item_7 {
transition-delay: 0.4s;
}
.hamburger_nav_about,
.hamburger_nav_services,
.hamburger_nav_solutions {
width: 100vw;
height: 100vh;
background-color: white;
top: 0;
right: 0;
z-index: 40;
transform: translateX(1000px);
transition: all;
transition-duration: 0.6s;
}  .hero_title_text_one {
transition: all;
transition-duration: 0.8s;
}
.hero_title_text_two {
transition: all;
transition-duration: 0.8s;
}
#hero_description_text:after {
content: "";
animation: blink 0.7s infinite;
color: black;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
} .arrow_know_more_one_animate #arrow_know_more_one_path_one {
stroke-dasharray: 1000;
stroke-dashoffset: -1000;
animation: drawPath 1.5s ease forwards;
animation-delay: 0.5s;
}
#arrow_know_more_one_line {
opacity: 0;
}
.arrow_know_more_one_animate #arrow_know_more_one_line {
stroke-dasharray: 300;
stroke-dashoffset: -300;
animation: drawLine 2s ease forwards 1s;
transition: all;
transition-duration: 0.5s;
}
#arrow_know_more_one_path_two {
opacity: 0;
}
.arrow_know_more_one_animate #arrow_know_more_one_path_two {
animation: fadeInArrowHead 1s ease forwards 2s;
transition: all;
transition-duration: 0.5s;
}
.arrow_know_more_one_animate #arrow_know_more_one_circle {
transition: all;
transition-duration: 0.3s;
}
@keyframes drawLine {
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
@keyframes fadeInArrowHead {
to {
opacity: 1; }
}
.know_more_one_text {
transition: all;
transition-duration: 0.5s; margin-right: -20px;
opacity: 0;
}  .side_arrow_btn .side_arrow_circle {
fill: #ea550f;
transition: all;
transition-duration: 0.5s;
}
.side_arrow_top {
fill: white;
transition: all;
transition-duration: 0.5s;
}
.side_arrow_bottom {
stroke: white;
transition: all;
transition-duration: 0.5s;
}
.side_arrow_btn:hover .side_arrow_circle {
fill: #a6c626;
}
.side_arrow_btn:hover .side_arrow_top {
fill: black;
transform: translate(200px, -200px);
}
.side_arrow_btn:hover .side_arrow_bottom {
stroke: black;
transform: translate(200px, -200px);
}  .social_media_svg_hero_rect_one {
transition: all;
transition-duration: 2s;
transform: translateX(-70px);
opacity: 0;
}
.social_media_svg_hero_animate .social_media_svg_hero_rect_one {
transform: translateX(0px);
opacity: 1;
}
.social_media_svg_hero_animate #social_media_svg_hero_rect_one_line_one {
stroke-dasharray: 64;
stroke-dashoffset: -64;
animation: drawPath 1.5s ease forwards;
animation-delay: 1.5s;
}
.social_media_svg_hero_animate #social_media_svg_hero_rect_one_line_two {
stroke-dasharray: 64;
stroke-dashoffset: -64;
animation: drawPath 1.5s ease forwards;
animation-delay: 2s;
}
.social_media_svg_hero_animate #social_media_svg_hero_graph_line_one {
stroke-dasharray: 64;
stroke-dashoffset: -64;
animation: drawPath 1.5s ease forwards;
animation-delay: 2s;
}
.social_media_svg_hero_animate #social_media_svg_hero_graph_line_two {
stroke-dasharray: 64;
stroke-dashoffset: -64;
animation: drawPath 1.5s ease forwards;
animation-delay: 3.1s;
}
.social_media_svg_hero_animate #social_media_svg_hero_graph_line_three {
stroke-dasharray: 64;
stroke-dashoffset: -64;
animation: drawPath 1.5s ease forwards;
animation-delay: 4s;
}
.social_media_svg_hero_animate #social_media_svg_hero_graph_line_four {
stroke-dasharray: 64;
stroke-dashoffset: -64;
animation: drawPath 1.5s ease forwards;
animation-delay: 5.2s;
}
.social_media_svg_hero_animate #social_media_svg_hero_graph_line_five {
stroke-dasharray: 64;
stroke-dashoffset: -64;
animation: drawPath 1.5s ease forwards;
animation-delay: 6.4s;
}
.social_media_svg_hero_animate #social_media_svg_hero_graph_line_six {
stroke-dasharray: 64;
stroke-dashoffset: -64;
animation: drawPath 1.5s ease forwards;
animation-delay: 7s;
}
.social_media_svg_hero_animate #social_media_svg_hero_graph_line_seven {
stroke-dasharray: 64;
stroke-dashoffset: 64;
animation: drawPath 1.5s ease forwards;
animation-delay: 7s;
}
#social_media_svg_hero_rect_two_text {
transition: all;
transition-duration: 2s;
transition-delay: 6s;
transform: translateX(-20px);
opacity: 0;
}
.social_media_svg_hero_animate #social_media_svg_hero_rect_two_text {
opacity: 1;
transform: translateX(0px);
}
.social_media_svg_hero_rect_two {
transition: all;
transition-duration: 2s;
transition-delay: 1s;
transform: translateX(-70px);
opacity: 0;
}
.social_media_svg_hero_animate .social_media_svg_hero_rect_two {
transform: translateX(0px);
opacity: 1;
}
#social_media_svg_hero_one_instagram {
transition: all;
transition-duration: 1s;
transition-delay: 2s;
opacity: 0;
}
.social_media_svg_hero_animate #social_media_svg_hero_one_instagram {
opacity: 1;
}
#social_media_svg_hero_one_linkedin {
transition: all;
transition-duration: 1s;
transition-delay: 2.2s;
opacity: 0;
}
.social_media_svg_hero_animate #social_media_svg_hero_one_linkedin {
opacity: 1;
}
#social_media_svg_hero_one_youtube {
transition: all;
transition-duration: 1s;
transition-delay: 2.4s;
opacity: 0;
}
.social_media_svg_hero_animate #social_media_svg_hero_one_youtube {
opacity: 1;
}
.social_media_svg_hero_animate #social_media_svg_hero_instagram_gray {
stroke-dasharray: 64;
stroke-dashoffset: -64;
animation: drawPath 1.5s ease forwards;
animation-delay: 3s;
}
.social_media_svg_hero_animate #social_media_svg_hero_instagram_green {
stroke-dasharray: 49;
stroke-dashoffset: -49;
animation: drawPath 1.5s ease-in-out forwards;
animation-delay: 4s;
}
.social_media_svg_hero_animate #social_media_svg_hero_linkedin_gray {
stroke-dasharray: 64;
stroke-dashoffset: -64;
animation: drawPath 1.5s ease forwards;
animation-delay: 3.5s;
}
.social_media_svg_hero_animate #social_media_svg_hero_linkedin_green {
stroke-dasharray: 64;
stroke-dashoffset: -64;
animation: drawPath 1.5s ease-in-out forwards;
animation-delay: 4.5s;
}
.social_media_svg_hero_animate #social_media_svg_hero_youtube_gray {
stroke-dasharray: 64;
stroke-dashoffset: -64;
animation: drawPath 1.5s ease forwards;
animation-delay: 4s;
}
.social_media_svg_hero_animate #social_media_svg_hero_youtube_green {
stroke-dasharray: 64;
stroke-dashoffset: -64;
animation: drawPath 1.5s ease-in-out forwards;
animation-delay: 5s;
}
#social_media_svg_hero_instagram_text {
transition: all;
transition-duration: 2s;
transition-delay: 4s;
transform: translateX(-15px);
opacity: 0;
}
.social_media_svg_hero_animate #social_media_svg_hero_instagram_text {
opacity: 1;
transform: translateX(0px);
}
#social_media_svg_hero_linkedin_text {
transition: all;
transition-duration: 2s;
transition-delay: 4.5s;
transform: translateX(-15px);
opacity: 0;
}
.social_media_svg_hero_animate #social_media_svg_hero_linkedin_text {
opacity: 1;
transform: translateX(0px);
}
#social_media_svg_hero_youtube_text {
transition: all;
transition-duration: 2s;
transition-delay: 5s;
transform: translateX(-15px);
opacity: 0;
}
.social_media_svg_hero_animate #social_media_svg_hero_youtube_text {
opacity: 1;
transform: translateX(0px);
}  #web_design_hero_rect_main {
transition: all;
transition-duration: 2s;
transition-delay: 0.8s;
transform: translateX(-90px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_main {
opacity: 1;
transform: translateX(0px);
}
#web_design_hero_rect_green_one {
transition: all ease-in-out;
transition-duration: 1.5s;
transition-delay: 1.2s;
opacity: 0;
width: 0;
height: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_green_one {
width: 111px;
height: 109px;
opacity: 1;
}
#web_design_hero_rect_green_two {
transition: all ease-in-out;
transition-duration: 2s;
transition-delay: 2s;
transform: scale(0, 0);
transform-origin: center center;
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_green_two {
opacity: 1;
transform: scale(1, 1);
}
#web_design_hero_circle_black {
transition: all ease-in-out;
transition-duration: 2s;
transition-delay: 2s;
transform: scale(0, 0);
transform-origin: center center;
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_circle_black {
opacity: 1;
transform: scale(1, 1);
}
#web_design_hero_circle_orange {
transition: all ease-in-out;
transition-duration: 1.5s;
transition-delay: 3.5s;
transform: translateX(-50px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_circle_orange {
transform: translateX(0px);
opacity: 1;
} #web_design_hero_rect_front_one {
transition: all ease-out;
transition-duration: 2s;
transition-delay: 4.5s;
opacity: 0;
transform: translateX(-40px);
width: 0;
height: 160px;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_one {
opacity: 1;
width: 90px;
transform: translateX(0px);
}
#web_design_hero_rect_front_one_head {
transition: all ease-out;
transition-duration: 2s;
transition-delay: 5.5s;
transform: translateX(-40px);
width: 0;
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_one_head {
opacity: 1;
transform: translateX(0px);
width: 100%;
}
#web_design_hero_rect_front_one_head_el_one {
transition: all ease-out;
transition-duration: 2s;
transition-delay: 6.5s;
width: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_one_head_el_one {
width: 25px;
}
#web_design_hero_rect_front_one_head_el_two {
transition: all ease-out;
transition-duration: 2s;
transition-delay: 6.5s;
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_one_head_el_two {
opacity: 1;
}
#web_design_hero_rect_front_one_body_btn {
transition: all ease-out;
transition-duration: 2s;
transition-delay: 7.5s;
width: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_one_body_btn {
width: 57px;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_one_body_rect {
stroke-dasharray: 64;
stroke-dashoffset: -64;
animation: drawPath 1.5s ease-in-out forwards;
animation-delay: 6.5s;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_one_body_rect_bl_tr {
stroke-dasharray: 100;
stroke-dashoffset: -100;
animation: drawPath 1.5s ease-in-out forwards;
animation-delay: 7.5s;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_one_body_rect_br_tl {
stroke-dasharray: 100;
stroke-dashoffset: -100;
animation: drawPath 1.5s ease-in-out forwards;
animation-delay: 7.5s;
}
#web_design_hero_rect_front_one_body_c_one {
transition: all ease-out;
transition-duration: 2s;
transition-delay: 8s;
transform: translateX(-30px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_one_body_c_one {
transform: translateX(0px);
opacity: 1;
}
#web_design_hero_rect_front_one_body_c_two {
transition: all ease-out;
transition-duration: 2s;
transition-delay: 8.5s;
transform: translateX(-30px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_one_body_c_two {
transform: translateX(0px);
opacity: 1;
}
#web_design_hero_rect_front_one_body_c_three {
transition: all ease-out;
transition-duration: 2s;
transition-delay: 9s;
transform: translateX(-30px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_one_body_c_three {
transform: translateX(0px);
opacity: 1;
} #web_design_hero_rect_front_two {
transition: all ease-out;
transition-duration: 2s;
transition-delay: 5s;
transform: translateX(60px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_two {
transform: translateX(0px);
opacity: 1;
}
#web_design_hero_rect_front_two_rect_one {
transition: all ease;
transition-duration: 2s;
transition-delay: 6s;
transform: translateX(-30px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_two_rect_one {
opacity: 1;
transform: translateX(0px);
}
#web_design_hero_rect_front_two_head {
transition: all ease-out;
transition-duration: 2s;
transition-delay: 5.5s;
transform: translateX(50px);
width: 0;
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_two_head {
opacity: 1;
transform: translateX(0px);
width: 100%;
}
#web_design_hero_rect_front_two_rect_two {
transition: all ease;
transition-duration: 2s;
transition-delay: 6.5s;
transform: translateX(-30px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_two_rect_two {
opacity: 1;
transform: translateX(0px);
}
#web_design_hero_rect_front_two_rect_three {
transition: all ease;
transition-duration: 2s;
transition-delay: 7s;
transform: translateX(-30px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_two_rect_three {
opacity: 1;
transform: translateX(0px);
}
#web_design_hero_rect_front_two_rect_four {
transition: all ease;
transition-duration: 2s;
transition-delay: 7.5s;
transform: translateX(-30px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_two_rect_four {
opacity: 1;
transform: translateX(0px);
}
#web_design_hero_rect_front_two_head_el_one {
transition: all ease;
transition-duration: 2s;
transition-delay: 7.5s;
width: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_two_head_el_one {
width: 55px;
}
#web_design_hero_rect_front_two_head_el_two {
transition: all ease;
transition-duration: 2s;
transition-delay: 7.5s;
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_two_head_el_two {
opacity: 1;
}
#web_design_hero_rect_front_two_head_el_three {
transition: all ease;
transition-duration: 2s;
transition-delay: 7.5s;
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_two_head_el_three {
opacity: 1;
}
#web_design_hero_rect_front_two_body_search_one {
transition: all ease;
transition-duration: 2s;
transition-delay: 8s;
transform: translateX(-50px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_two_body_search_one {
transform: translateX(0px);
opacity: 1;
}
#web_design_hero_rect_front_two_body_search_two {
transition: all ease;
transition-duration: 2s;
transition-delay: 8s;
transform: translateX(50px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_front_two_body_search_two {
transform: translateX(0px);
opacity: 1;
}
#web_design_hero_rect_line_one {
transition: all ease;
transition-duration: 2s;
transition-delay: 5s;
width: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_line_one {
width: 69px;
}
#web_design_hero_rect_line_two {
transition: all ease;
transition-duration: 2s;
transition-delay: 5.5s;
width: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_line_two {
width: 56px;
}
#web_design_hero_rect_line_three {
transition: all ease;
transition-duration: 2s;
transition-delay: 6s;
width: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_line_three {
width: 32px;
}
#web_design_svg_hero_color_palette_one {
transition: all ease;
transition-duration: 2s;
transition-delay: 5s;
width: 0;
}
.web_design_svg_hero_animate #web_design_svg_hero_color_palette_one {
width: 128px;
}
#web_design_svg_hero_color_palette_two {
transition: all ease;
transition-duration: 2s;
transition-delay: 5.5s;
opacity: 0;
transform: translateY(30px);
}
.web_design_svg_hero_animate #web_design_svg_hero_color_palette_two {
opacity: 1;
transform: translateY(0px);
}
#web_design_svg_hero_color_palette_three {
transition: all ease;
transition-duration: 2s;
transition-delay: 6s;
opacity: 0;
transform: translateY(30px);
}
.web_design_svg_hero_animate #web_design_svg_hero_color_palette_three {
opacity: 1;
transform: translateY(0px);
}
#web_design_svg_hero_color_palette_four {
transition: all ease;
transition-duration: 2s;
transition-delay: 6.5s;
opacity: 0;
transform: translateY(30px);
}
.web_design_svg_hero_animate #web_design_svg_hero_color_palette_four {
opacity: 1;
transform: translateY(0px);
}
#web_design_svg_hero_color_palette_five {
transition: all ease;
transition-duration: 2s;
transition-delay: 7s;
opacity: 0;
transform: translateY(30px);
}
.web_design_svg_hero_animate #web_design_svg_hero_color_palette_five {
opacity: 1;
transform: translateY(0px);
}
#web_design_hero_react_icon_edit {
transition: all ease;
transition-duration: 2s;
transition-delay: 8s;
opacity: 0;
transform: translateY(30px);
}
.web_design_svg_hero_animate #web_design_hero_react_icon_edit {
opacity: 1;
transform: translateY(0px);
}
#web_design_hero_react_icon_edit_rect_one {
transition: all ease;
transition-duration: 2s;
transition-delay: 8s;
opacity: 0;
transform: translateX(-20px);
}
.web_design_svg_hero_animate #web_design_hero_react_icon_edit_rect_one {
opacity: 1;
transform: translateX(0px);
}
#web_design_hero_react_icon_edit_rect_two {
transition: all ease;
transition-duration: 2s;
transition-delay: 8.6s;
opacity: 0;
transform: translateX(-20px);
}
.web_design_svg_hero_animate #web_design_hero_react_icon_edit_rect_two {
opacity: 1;
transform: translateX(0px);
}
#web_design_hero_react_icon_edit_rect_three {
transition: all ease;
transition-duration: 2s;
transition-delay: 8.3s;
opacity: 0;
transform: translateX(20px);
}
.web_design_svg_hero_animate #web_design_hero_react_icon_edit_rect_three {
opacity: 1;
transform: translateX(0px);
}
#web_design_hero_react_icon_edit_rect_four {
transition: all ease;
transition-duration: 2s;
transition-delay: 8.9s;
opacity: 0;
transform: translateX(20px);
}
.web_design_svg_hero_animate #web_design_hero_react_icon_edit_rect_four {
opacity: 1;
transform: translateX(0px);
}
#web_design_svg_hero_circle_one {
transition: all ease;
transition-duration: 2s;
transition-delay: 6s;
transform: translateY(-40px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_svg_hero_circle_one {
transform: translateY(0px);
opacity: 1;
}
#web_design_svg_hero_circle_two {
transition: all ease;
transition-duration: 2s;
transition-delay: 6.5s;
transform: translateY(-40px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_svg_hero_circle_two {
transform: translateY(0px);
opacity: 1;
}
#web_design_svg_hero_circle_three {
transition: all ease;
transition-duration: 2s;
transition-delay: 7s;
transform: translateY(-40px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_svg_hero_circle_three {
transform: translateY(0px);
opacity: 1;
}
#web_design_svg_hero_circle_four {
transition: all ease;
transition-duration: 2s;
transition-delay: 7.5s;
transform: translateY(-40px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_svg_hero_circle_four {
transform: translateY(0px);
opacity: 1;
}
#web_design_hero_rect_black_cross {
transition: all ease;
transition-duration: 2s;
transition-delay: 6s;
transform: translateX(-30px);
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_rect_black_cross {
transform: translateX(0px);
opacity: 1;
}
.web_design_svg_hero_animate #web_design_hero_rect_black_cross_line_one {
stroke-dasharray: 80;
stroke-dashoffset: -80;
animation: drawPath 1.5s ease forwards;
animation-delay: 7s;
}
.web_design_svg_hero_animate #web_design_hero_rect_black_cross_line_two {
stroke-dasharray: 80;
stroke-dashoffset: -80;
animation: drawPath 1.5s ease forwards;
animation-delay: 7.5s;
}
#web_design_hero_switch_back {
transition: all ease;
transition-duration: 2s;
transition-delay: 6s;
width: 0px;
}
.web_design_svg_hero_animate #web_design_hero_switch_back {
width: 32px;
}
#web_design_hero_switch_circle {
transition: all ease;
transition-duration: 2s;
transition-delay: 7s;
opacity: 0;
}
.web_design_svg_hero_animate #web_design_hero_switch_circle {
opacity: 1;
}
.web_design_svg_hero_animate #web_design_hero_search_circle {
stroke-dasharray: 80;
stroke-dashoffset: -80;
animation: drawPath 1.5s ease forwards;
animation-delay: 6s;
}
.web_design_svg_hero_animate #web_design_hero_search_stick {
stroke-dasharray: 80;
stroke-dashoffset: 80;
animation: drawPath 1.5s ease forwards;
animation-delay: 7.2s;
}  #crm_dash_svg_hero_react_main {
transition: all ease;
transition-duration: 2s;
transition-delay: 2s;
transform: translateY(-90px);
opacity: 0;
height: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_react_main {
transform: translateY(0px);
opacity: 1;
height: 100%;
}
#crm_dash_svg_hero_black_sidebar {
transition: all ease;
transition-duration: 1.5s;
transition-delay: 3.5s;
transform: translateX(-50px);
opacity: 0;
width: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_black_sidebar {
transform: translateX(0px);
opacity: 1;
width: 100%;
}
#crm_dash_svg_hero_black_sidebar_el_one {
transition: all ease;
transition-duration: 1s;
transition-delay: 4s;
transform: translateX(-30px);
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_black_sidebar_el_one {
transform: translateX(0px);
opacity: 1;
width: 67px;
}
#crm_dash_svg_hero_black_sidebar_el_two,
#crm_dash_svg_hero_black_sidebar_el_two_text {
transition: all ease;
transition-duration: 1s;
transition-delay: 4.5s;
transform: translateX(-30px);
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_black_sidebar_el_two,
.crm_dash_svg_hero_animate #crm_dash_svg_hero_black_sidebar_el_two_text {
transform: translateX(0px);
opacity: 1;
width: 67px;
}
#crm_dash_svg_hero_black_sidebar_el_three {
transition: all ease;
transition-duration: 1s;
transition-delay: 5s;
transform: translateX(-30px);
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_black_sidebar_el_three {
transform: translateX(0px);
opacity: 1;
width: 67px;
}
#crm_dash_svg_hero_black_sidebar_el_four {
transition: all ease;
transition-duration: 1s;
transition-delay: 5.5s;
transform: translateX(-30px);
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_black_sidebar_el_four {
transform: translateX(0px);
opacity: 1;
width: 67px;
}
#crm_dash_svg_hero_black_sidebar_el_five {
transition: all ease;
transition-duration: 1s;
transition-delay: 6s;
transform: translateX(-30px);
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_black_sidebar_el_five {
transform: translateX(0px);
opacity: 1;
width: 67px;
}
#crm_dash_svg_hero_black_sidebar_el_six {
transition: all ease;
transition-duration: 1s;
transition-delay: 6.5s;
transform: translateX(-30px);
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_black_sidebar_el_six {
transform: translateX(0px);
opacity: 1;
width: 67px;
}
#crm_dash_svg_hero_header {
transition: all ease;
transition-duration: 1s;
transition-delay: 4s;
transform: translateY(-30px);
height: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_header {
transform: translateY(0px);
height: 100%;
opacity: 1;
}
#crm_dash_svg_hero_header_circle {
transition: all ease;
transition-duration: 2s;
transition-delay: 4.3s;
scale: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_header_circle {
transform: translateY(0px);
scale: 1;
opacity: 1;
}
#crm_dash_svg_hero_header_rect {
transition: all ease;
transition-duration: 2s;
transition-delay: 4.5s;
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_header_rect {
width: 113px;
opacity: 1;
}
#crm_dash_svg_hero_card_one {
transition: all ease;
transition-duration: 2s;
transition-delay: 4.5s;
transform: translateY(-30px);
height: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_one {
transform: translateY(0px);
height: 141px;
opacity: 1;
}
#crm_dash_svg_hero_card_one_line_one, #crm_dash_svg_hero_card_one_line_two, #crm_dash_svg_hero_card_one_line_three, #crm_dash_svg_hero_card_one_line_four {
transition: all ease;
transition-duration: 2s;
transition-delay: 6s;
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_one_line_one, .crm_dash_svg_hero_animate #crm_dash_svg_hero_card_one_line_two, .crm_dash_svg_hero_animate #crm_dash_svg_hero_card_one_line_three, .crm_dash_svg_hero_animate #crm_dash_svg_hero_card_one_line_four {
width: 50px;
opacity: 1;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_circle_one {
stroke-dasharray: 280;
stroke-dashoffset: -280;
animation: drawPath 1.5s ease forwards;
animation-delay: 6s;
}
#crm_dash_svg_hero_card_two {
transition: all ease;
transition-duration: 2s;
transition-delay: 4.5s;
transform: translateY(-30px);
height: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_two {
transform: translateY(0px);
height: 92px;
opacity: 1;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_two_line_one {
stroke-dasharray: 100;
stroke-dashoffset: -100;
animation: drawPath 1.5s ease forwards;
animation-delay: 8s;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_two_line_three, .crm_dash_svg_hero_animate #crm_dash_svg_hero_card_two_line_five, .crm_dash_svg_hero_animate #crm_dash_svg_hero_card_two_line_seven, .crm_dash_svg_hero_animate #crm_dash_svg_hero_card_two_line_nine {
stroke-dasharray: 100;
stroke-dashoffset: -100;
animation: drawPath 1.5s ease forwards;
animation-delay: 8s;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_two_line_two, .crm_dash_svg_hero_animate #crm_dash_svg_hero_card_two_line_four, .crm_dash_svg_hero_animate #crm_dash_svg_hero_card_two_line_six, .crm_dash_svg_hero_animate #crm_dash_svg_hero_card_two_line_eight, .crm_dash_svg_hero_animate #crm_dash_svg_hero_card_two_line_ten {
stroke-dasharray: 100;
stroke-dashoffset: -100;
animation: drawPath 1.5s ease forwards;
animation-delay: 9s;
}
#crm_dash_svg_hero_card_three {
transition: all ease;
transition-duration: 2s;
transition-delay: 6s;
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_three {
width: 89px;
opacity: 1;
}
#crm_dash_svg_hero_card_three_line {
transition: all ease;
transition-duration: 2s;
transition-delay: 7s;
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_three_line {
width: 42px;
opacity: 1;
}
#crm_dash_svg_hero_card_three_circle {
transition: all ease;
transition-duration: 2s;
transition-delay: 7.5s;
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_three_circle {
width: 42px;
opacity: 1;
}
#crm_dash_svg_hero_card_four {
transition: all ease;
transition-duration: 2s;
transition-delay: 6s;
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_four {
width: 89px;
opacity: 1;
}
#crm_dash_svg_hero_card_four_line {
transition: all ease;
transition-duration: 2s;
transition-delay: 7s;
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_four_line {
width: 42px;
opacity: 1;
}
#crm_dash_svg_hero_card_four_circle {
transition: all ease;
transition-duration: 2s;
transition-delay: 7.5s;
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_four_circle {
width: 42px;
opacity: 1;
}
#crm_dash_svg_hero_card_five {
transition: all ease;
transition-duration: 2s;
transition-delay: 3s;
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five {
width: 320px;
opacity: 1;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_dark_line_one {
stroke-dasharray: 80;
stroke-dashoffset: -80;
animation: drawPath 1.5s ease forwards;
animation-delay: 6s;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_dark_line_two {
stroke-dasharray: 120;
stroke-dashoffset: -120;
animation: drawPath 1.5s ease forwards;
animation-delay: 7.2s;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_dark_line_three {
stroke-dasharray: 100;
stroke-dashoffset: -100;
animation: drawPath 1.5s ease forwards;
animation-delay: 8.3s;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_dark_line_four {
stroke-dasharray: -100;
stroke-dashoffset: 100;
animation: drawPath 1.5s ease forwards;
animation-delay: 9s;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_dark_line_five {
stroke-dasharray: -100;
stroke-dashoffset: 100;
animation: drawPath 1.5s ease forwards;
animation-delay: 10s;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_dark_line_six {
stroke-dasharray: -100;
stroke-dashoffset: 100;
animation: drawPath 1.5s ease forwards;
animation-delay: 10.5s;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_dark_line_seven {
stroke-dasharray: -100;
stroke-dashoffset: 100;
animation: drawPath 1.5s ease forwards;
animation-delay: 11.8s;
} .crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_light_line_one {
stroke-dasharray: 80;
stroke-dashoffset: 80;
animation: drawPath 1.5s ease forwards;
animation-delay: 6s;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_light_line_two {
stroke-dasharray: 120;
stroke-dashoffset: 120;
animation: drawPath 1.5s ease forwards;
animation-delay: 6.8s;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_light_line_three {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: drawPath 1.5s ease forwards;
animation-delay: 7.2s;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_light_line_four {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: drawPath 1.5s ease forwards;
animation-delay: 8s;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_light_line_five {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: drawPath 1.5s ease forwards;
animation-delay: 8.6s;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_light_line_six {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: drawPath 1.5s ease forwards;
animation-delay: 9.5s;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_light_line_seven {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: drawPath 1.5s ease forwards;
animation-delay: 10.3s;
}
#crm_dash_svg_hero_card_five_deposit_block {
transition: all ease;
transition-duration: 2s;
transition-delay: 7s;
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_deposit_block {
width: 5px;
opacity: 1;
}
#crm_dash_svg_hero_card_five_deposit_block_text {
transition: all ease;
transition-duration: 2s;
transition-delay: 7.5s;
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_deposit_block_text {
width: 100%;
opacity: 1;
}
#crm_dash_svg_hero_card_five_withdraw_block {
transition: all ease;
transition-duration: 2s;
transition-delay: 7.5s;
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_withdraw_block {
width: 5px;
opacity: 1;
}
#crm_dash_svg_hero_card_five_withdraw_block_text {
transition: all ease;
transition-duration: 2s;
transition-delay: 8s;
width: 0;
opacity: 0;
}
.crm_dash_svg_hero_animate #crm_dash_svg_hero_card_five_withdraw_block_text {
width: 100%;
opacity: 1;
}  #seo_svg_hero_main_bg {
transition: all ease;
transition-duration: 2s;
transition-delay: 1s;
width: 0;
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_main_bg {
width: 100%;
opacity: 1;
}
#seo_svg_hero_google_bg {
transition: all ease;
transition-duration: 2s;
transition-delay: 2s;
width: 0;
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_google_bg {
width: 31px;
opacity: 1;
}
#seo_svg_hero_google_logo {
transition: all ease;
transition-duration: 2s;
transition-delay: 3s;
height: 0;
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_google_logo {
height: 2000px;
opacity: 1;
}
#seo_svg_hero_google_search {
transition: all ease;
transition-duration: 2.5s;
transition-delay: 3s;
width: 0;
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_google_search {
width: 173px;
opacity: 1;
}
#seo_svg_hero_google_search_text {
transition: all ease;
transition-duration: 2s;
transition-delay: 3.5s;
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_google_search_text {
opacity: 1;
} #seo_svg_hero_up_success_card {
transition: all ease;
transition-duration: 1.5s;
transition-delay: 4s;
transform: translateY(30px);
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_up_success_card {
transform: translateY(0px);
opacity: 1;
}
#seo_svg_hero_up_success_text {
transition: all ease;
transition-duration: 1.5s;
transition-delay: 4.5s;
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_up_success_text {
opacity: 1;
}
#seo_svg_hero_up_success_line_one {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: drawPath 2.5s ease forwards;
animation-delay: 6.5s;
} 
#seo_svg_hero_up_success_line_two {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: drawPath 2.5s ease forwards;
animation-delay: 7s;
} 
#seo_svg_hero_up_success_line_three {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: drawPath 2.5s ease forwards;
animation-delay: 7.5s;
} 
#seo_svg_hero_up_success_box {
transition: all ease;
transition-duration: 2s;
transition-delay: 5s;
transform: translateY(40px);
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_up_success_box {
transform: translateY(0px);
opacity: 1;
}
#seo_svg_hero_up_success_arrow {
transition-duration: 1.5s;
transition-delay: 5.5s;
transform: translateY(40px);
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_up_success_arrow {
transform: translateY(0px);
opacity: 1;
} #seo_svg_hero_down_danger_card_one {
transition: all ease;
transition-duration: 1.5s;
transition-delay: 4s;
transform: translateY(30px);
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_down_danger_card_one {
transform: translateY(0px);
opacity: 1;
}
#seo_svg_hero_up_danger_text_one {
transition: all ease;
transition-duration: 1.5s;
transition-delay: 4.5s;
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_up_danger_text_one {
opacity: 1;
}
#seo_svg_hero_up_danger_line_one_one {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: drawPath 2.5s ease forwards;
animation-delay: 6.5s;
} 
#seo_svg_hero_up_danger_line_one_two {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: drawPath 2.5s ease forwards;
animation-delay: 7s;
} 
#seo_svg_hero_up_danger_line_one_three {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: drawPath 2.5s ease forwards;
animation-delay: 7.5s;
} 
#seo_svg_hero_up_danger_arrow_one {
transition-duration: 1.5s;
transition-delay: 6s;
transform: translateY(-40px);
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_up_danger_arrow_one {
transform: translateY(0px);
opacity: 1;
}
#seo_svg_hero_down_danger_box_one {
transition: all ease;
transition-duration: 2s;
transition-delay: 7s;
transform: translateY(-40px);
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_down_danger_box_one {
transform: translateY(0px);
opacity: 1;
} #seo_svg_hero_down_danger_card_two {
transition: all ease;
transition-duration: 1.5s;
transition-delay: 4s;
transform: translateY(30px);
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_down_danger_card_two {
transform: translateY(0px);
opacity: 1;
}
#seo_svg_hero_up_danger_text_two {
transition: all ease;
transition-duration: 1.5s;
transition-delay: 4.5s;
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_up_danger_text_two {
opacity: 1;
}
#seo_svg_hero_up_danger_line_two_one {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: drawPath 2.5s ease forwards;
animation-delay: 6.5s;
} 
#seo_svg_hero_up_danger_line_two_two {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: drawPath 2.5s ease forwards;
animation-delay: 7s;
} 
#seo_svg_hero_up_danger_line_two_three {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: drawPath 2.5s ease forwards;
animation-delay: 7.5s;
} 
#seo_svg_hero_up_danger_arrow_two {
transition-duration: 1.5s;
transition-delay: 7s;
transform: translateY(-40px);
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_up_danger_arrow_two {
transform: translateY(0px);
opacity: 1;
}
#seo_svg_hero_down_danger_box_two {
transition: all ease;
transition-duration: 2s;
transition-delay: 8s;
transform: translateY(-40px);
opacity: 0;
}
.seo_svg_hero_animate #seo_svg_hero_down_danger_box_two {
transform: translateY(0px);
opacity: 1;
}  .accordion-item {
background-color: transparent;
}
.accordion-item .accordion-body {
opacity: 0;
height: 0;
padding: 0;
transition: all;
transition-duration: 0.5s;
}
.accordion-item .accordion-body p {
display: none;
}
.accordion-item .accordion-btn {
transform: rotateX("0deg");
}
.accordion-item.active {
background-color: white;
}
.accordion-item.active .accordion-btn {
transform: rotateX("180deg");
}
.accordion-item.active .accordion-body {
height: auto;
opacity: 100;
padding: 2rem;
}
.accordion-item.active .accordion-body p {
display: block;
} .btn_arrow_circle .btn_arrow_circle_line,
.btn_arrow_circle .btn_arrow_circle_text,
.btn_arrow_circle .btn_arrow_circle_path_two {
transition: all;
transition-duration: 0.6s;
}
.btn_arrow_circle_path_one,
.btn_arrow_circle_circle {
stroke: #ea550f;
fill: #ea550f;
}
.btn_arrow_circle_line,
.btn_arrow_circle_path_two {
stroke: #fff;
fill: #fff;
}
.btn_arrow_circle:hover .btn_arrow_circle_line {
transform: translateX(230px);
stroke: #1c1c1c;
}
.btn_arrow_circle:hover .btn_arrow_circle_path_two {
transform: translateX(230px);
fill: #1c1c1c;
}
.btn_arrow_circle:hover .btn_arrow_circle_path_one {
stroke: #a6c626;
}
.btn_arrow_circle:hover .btn_arrow_circle_circle {
fill: #a6c626;
}
.btn_arrow_circle:hover .btn_arrow_circle_text {
transform: translateX(12px);
}  .blog_card {
transition: all;
transition-duration: 0.5s;
}
.blog_card:hover {
cursor: pointer;
scale: 1.01;
box-shadow: 
rgba(255, 255, 255, 0.05) 0px 1px 1px inset,
rgba(50, 50, 93, 0.1) 0px 10px 20px -10px,
rgba(0, 0, 0, 0.1) 0px 5px 10px -5px;
}
.blog_card .blog_card_side_arrow_btn .side_arrow_circle {
fill: #ea550f;
transition: all;
transition-duration: 0.5s;
}
.blog_card .blog_card_side_arrow_btn .side_arrow_top {
fill: white;
transition: all;
transition-duration: 0.5s;
}
.blog_card .blog_card_side_arrow_btn .side_arrow_bottom {
stroke: white;
transition: all;
transition-duration: 0.5s;
}
.blog_card:hover .blog_card_side_arrow_btn .side_arrow_circle {
fill: #a6c626;
}
.blog_card:hover .blog_card_side_arrow_btn .side_arrow_top {
fill: black;
transform: translate(200px, -200px);
}
.blog_card:hover .blog_card_side_arrow_btn .side_arrow_bottom {
stroke: black;
transform: translate(200px, -200px);
} @keyframes drawPath {
to {
stroke-dashoffset: 0;
}
}
@keyframes drawPathCustom {
from {
stroke-dashoffset: 52; }
to {
stroke-dashoffset: 0; }
}
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes bounce {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}  @media screen and (max-width: 350px) {
.hero_text_2,.hero_text{
font-size: 30px;
}
.hero_description{
margin-top: 20px;
}
.hero_btn{
margin-top: 90px;
width: 120px !important;
}
.simplehero_btn{
width: 120px !important;
}
.forex_btn{
width: 120px !important;
}
.hero_btn_text{
right: -70px;
}
.grow_your_bussiness{
height: 870px !important;
}
.grow_your_bussiness_earth{
top: 32rem !important;
}
.grow_your_bussiness_palne{
top: 45rem ;
right: 4rem;
}
.grow_your_bussiness_right,.grow_your_bussiness_left{
top: 37rem !important;
}
.btn_right{
right:0;
}
.service_btn{
width: 100px !important;
}
.service_btn_text{
right:-73px;
}
.forex_btn_text{
right: -27px;
}
.box-hight{
height: 600px;
}
.service_btn_text_new{
right:-125px;
}
}
.video-container {
position: fixed;
bottom: 20px;
left: 20px;
width: 130px;
height: 180px;
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease-in-out;
background-color: #000;
z-index: 1000;
border: 2px solid #A6C73A;
}
.video-container:hover #closeIcon {
opacity: 1;
pointer-events: auto;
}
.video-container.fullscreen {
width: 300px;
height: 400px;
left: 10px;
bottom: 10px;
border-radius: 20px;
transition: all 0.5s ease-in-out;
}
.small-video {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}
.hidden {
display: none;
}
#closeIcon,
#minimizeIcon {
position: absolute;
top: 10px;
right: 10px;
background: transparent;
border: none;
font-size: 20px;
color: white;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in-out;
}
#closeIcon:hover,
#minimizeIcon:hover {
color: #e95734;
}
#minimizeIcon {
display: none; }
.video-container.fullscreen #minimizeIcon {
display: block; opacity: 1;
pointer-events: auto;
}
#actionButton {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
background-color: #E95734;
color: #fff;
border: none; font-size: 16px;
cursor: pointer;
z-index: 2000;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
#actionButton:not(.hidden) {
opacity: 1;
}
.tap-gif {
position: absolute;
width: 60px;
height: auto;
left: 50%;
top: 50%;
margin-left: -30px;
margin-top: -60px;
transform: translateY(2em);
transition: .5s ease-in-out;
}
.gif-box {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #ffffff6e;
z-index: 900;
opacity: 0;
transition: .4s ease-in-out;
}