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: .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: #fff;
padding: .75rem 1.25rem;
font-size: 1.125rem;
border-radius: .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: #000;
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(.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: #fff;
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: #fff;
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: #000
}
@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: #fff;
transition: all;
transition-duration: 0.5s
}
.side_arrow_bottom {
stroke: #fff;
transition: all;
transition-duration: 0.5s
}
.side_arrow_btn:hover .side_arrow_circle {
fill: #a6c626
}
.side_arrow_btn:hover .side_arrow_top {
fill: #000;
transform: translate(200px, -200px)
}
.side_arrow_btn:hover .side_arrow_bottom {
stroke: #000;
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(0);
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(0)
}
.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(0);
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(0)
}
#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(0)
}
#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(0)
}
#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(0)
}
#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(0);
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(0)
}
#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(0);
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(0);
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(0);
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(0);
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(0);
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(0)
}
#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(0);
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(0)
}
#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(0)
}
#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(0)
}
#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(0);
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(0);
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(0)
}
#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(0)
}
#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(0)
}
#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(0)
}
#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(0)
}
#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(0)
}
#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(0)
}
#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(0)
}
#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(0)
}
#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(0);
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(0);
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(0);
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(0);
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(0);
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: 0
}
.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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
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(0);
opacity: 1
}
.accordion-item {
background-color: #fff0
}
.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: #fff
}
.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: rgb(255 255 255 / .05) 0 1px 1px inset, rgb(50 50 93 / .1) 0 10px 20px -10px, rgb(0 0 0 / .1) 0 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: #fff;
transition: all;
transition-duration: 0.5s
}
.blog_card .blog_card_side_arrow_btn .side_arrow_bottom {
stroke: #fff;
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: #000;
transform: translate(200px, -200px)
}
.blog_card:hover .blog_card_side_arrow_btn .side_arrow_bottom {
stroke: #000;
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(.8, 0, 1, 1)
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(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: #fff0;
border: none;
font-size: 20px;
color: #fff;
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
}
main a {
color: rgb(234 85 15 / var(--tw-text-opacity, 1))
}