@import url("https://fonts.googleapis.com");
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600;800&family=Roboto+Mono:ital,wght@1,200;1,300&display=swap');
html,
body { margin: 0;padding: 0;height: 100%;text-align: center;scroll-behavior: smooth;font-family: Poppins, Arial, Helvetica, sans-serif;}
ul {list-style: none}
ul,
li {margin: 0;padding: 0}
a {text-decoration: none;color: inherit;transition: 0.5s;
outline: none}
* {margin: 0;padding: 0;box-sizing: border-box;letter-spacing: 0;-webkit-font-smoothing: antialiased}
h1{margin: 20px auto 0 auto;text-decoration: underline;font-size: 1.5em;}
button{cursor: pointer;display: block;border: none}
.mobile-menu,
.top-nav {display: none;}
.overflow {overflow: hidden}
img{object-fit: cover;}

nav {margin: 0 auto;padding: 50px 0;}
nav ul {text-align: center;} 
nav ul li {display: inline-block;}
nav ul li a {display: block;text-decoration: none;color: #aaa;font-weight: 800;margin: 0 10px;}
nav ul li a,
nav ul li a:after,
nav ul li a:before {transition: all .5s;}
nav ul li a:hover {color: #555;}
hr{width: 80%;margin: auto;}
.lists {display: flex;margin: 0 0 0 20px !important;justify-content: space-between;}
.lists li{padding: 0 10px !important;}
.header-container{display: flex;align-items: center;justify-content: space-between;max-width: 80%;margin: 40px auto;}
.box-menu{padding: 0;}
.fa-regular, .far{font-size: 25px;}
 h1 {text-align: center;font-size: 30px;font-weight: 300;color: #222;letter-spacing: 1px;text-transform: uppercase;text-decoration: none;display: grid;grid-template-columns: 1fr max-content 1fr;grid-template-rows: 27px 0;grid-gap: 20px; align-items: center;}
 h1:after,
 h1:before {content: " ";display: block;border-bottom: 1px solid #c50000;border-top: 1px solid #c50000;height: 5px;background-color: #f8f8f8;}


/* menus page */
/*  */
nav .navbar li {margin: 10px;}
nav .navbar li a {text-decoration: none;color: #8f8f8f;font-size: 20px;font-weight: 400;transition: all 0.5s ease-in-out;position: relative;text-transform: uppercase;}
nav .navbar li a:before {content: attr(data-item);transition: 0.5s;color: #8254ff;position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 0;overflow: hidden;}
nav .navbar li a:hover:before {width: 100%;transition: all 0.5s ease-in-out;}

/*  */
nav.menu_navbar ul li a{position: relative;padding: 15px;}
nav.menu_navbar ul li a:after{position: absolute; bottom: 0;left: 0;right: 0;margin: auto;width: 0%;content: '.';color: transparent;background: #333;height: 1px;}
nav.menu_navbar ul li a:hover:after {width: 100%;}

/*  */
nav.menu_items ul li a {position: relative;z-index: 1;padding: 15px;}
nav.menu_items ul li a:hover {color: #91640F;}
nav.menu_items ul li a:after {display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 100%;height: 1px;content: '.';color: transparent;background: #F1C40F;visibility: none;opacity: 0;z-index: -1;}
nav.menu_items ul li a:hover:after {opacity: 1;visibility: visible;height: 100%;}

/*  */
nav.container_navbar {background: #333;}
nav.container_navbar ul {margin: 0 auto;}
nav.container_navbar li {display: inline-block;padding: 0 20px;color: #fff;font-size: 20px;}
nav.container_navbar span {position: relative;cursor: pointer;}
nav.container_navbar span:before,
nav.container_navbar span:after {content: '';position: absolute;width: 0%;height: 2px;top: 50%;margin-top: -0.5px;background: #fff;}
nav.container_navbar span:before {left: -2.5px;}
nav.container_navbar span:after {right: 2.5px;background: #fff;transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);}
nav.container_navbar span:hover:before {background: #fff;width: 100%;transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);}
nav.container_navbar span:hover:after {background: transparent;width: 100%;transition: 0s;}

/*  */
nav.navbar_items {max-width: 960px;mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);margin: 0 auto;}
nav.navbar_items ul {text-align: center;background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);}
nav.navbar_items ul li {display: inline-block;}
nav.navbar_items ul li a {padding: 18px;font-family: "Open Sans";text-transform: uppercase;color: rgba(0, 35, 122, 0.5);font-size: 18px;text-decoration: none;display: block;padding: 15px;}
nav.navbar_items ul li a:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);background: rgba(255, 255, 255, 0.1);color: rgba(0, 35, 122, 0.7);}

/*  */
nav.header_menu {font-family: 'Raleway', Arial, sans-serif;text-align: center;text-transform: uppercase;font-weight: 500;
letter-spacing: 1px;box-shadow: 0px 5px 0px #dedede;}
nav.header_menu * {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
nav.header_menu li {display: inline-block;list-style: outside none none;margin: 0 1em;padding: 0;}
nav.header_menu a {padding: 0.5em 0.8em;margin: 0.2em 0;display: block;
/* color: rgba(255, 255, 255, 0.5); */position: relative;text-decoration: none;}
nav.header_menu a:before,
nav.header_menu a:after {height: 14px;width: 14px;position: absolute;content: '';-webkit-transition: all 0.35s ease;transition: all 0.35s ease;opacity: 0;}
nav.header_menu a:before {left: 0;top: 0;border-left: 3px solid #c0392b;border-top: 3px solid #c0392b;-webkit-transform: translate(100%, 50%);transform: translate(100%, 50%);}
nav.header_menu a:after {right: 0;bottom: 0;border-right: 3px solid #c0392b;border-bottom: 3px solid #c0392b;-webkit-transform: translate(-100%, -50%);transform: translate(-100%, -50%);}
nav.header_menu a:hover:before,
nav.header_menu .current a:before,
nav.header_menu a:hover:after,
nav.header_menu .current a:after {-webkit-transform: translate(0%, 0%);transform: translate(0%, 0%);opacity: 1;}

/*  */
nav.header_nav {font-family: 'Raleway', Arial, sans-serif;font-weight: 500;letter-spacing: 1px;background-color: #212121;}
nav.header_nav * {-webkit-box-sizing: border-box;box-sizing: border-box; -webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
nav.header_nav li {display: inline-block;list-style: outside none none;margin: 0.5em 1.5em;padding: 0;}
nav.header_nav a {padding: 0.3em 0;color: rgba(255, 255, 255, 0.5);position: relative;text-decoration: none;display: inline-block;}
nav.header_nav a:before,
nav.header_nav a:after {height: 3px;position: absolute;content: '';-webkit-transition: all 0.35s ease;transition: all 0.35s ease;
background-color: #9b59b6;width: 0;}
nav.header_nav a:before {top: 0;left: 0;}
nav.header_nav a:after {bottom: 0;right: 0;}
nav.header_nav a:hover,
nav.header_nav .current a {color: #ffffff;}
nav.header_nav a:hover:before,
nav.header_nav .current a:before,
nav.header_nav a:hover:after,
nav.header_nav .current a:after {width: 100%;}

/*  */
nav.header_navbar{height: 150px;display: flex;align-items: center;justify-content: center;}
nav.header_navbar .menu-1{display: flex;}
nav.header_navbar .menu-1 li {margin: 5px;width: 100px;color: #1700ED;}
nav.header_navbar .menu-1 a {padding: 15px 0;display: block;background-color: #fff;position: relative;width: 100px;}
nav.header_navbar .menu-1 li a:before {content: "";position: absolute;left: 0;bottom: 0;height: 15px;width: 15px;border-left: 3px solid #000;border-bottom: 3px solid #000;transition: linear .3s;}
nav.header_navbar .menu-1 li a:after {content: "";position: absolute;right: 0;top: 0;height: 15px;width: 15px;border-right: 3px solid #000;border-top: 3px solid #000;transition: linear .3s;}
nav.header_navbar .menu-1 li a:hover:after,
nav.header_navbar .menu-1 li a:hover:before {width: calc(100% - 3px);height: calc(100% - 3px);}
nav.header_navbar .menu-1 li.current-menu-item a:before {width: calc(100% - 3px);height: calc(100% - 3px);}
nav.header_navbar .menu-1 li.current-menu-item a:after {width: calc(100% - 3px);height: calc(100% - 3px);}

/*  */
nav.header_navbar.menu-4{display: flex;justify-content: space-between;}
nav.header_navbar .menu-4 li{width: 150px;position: relative;}
nav.header_navbar .menu-4 li:before {content: "";position: absolute;right: 0;bottom: 0;height: 3px;
width: 0;background-color: white;transition: linear .5s;}
nav.header_navbar .menu-4 li a {background-color: darkred;color: #fff;padding: 15px 0;margin: 0 0 0 -5px;}
nav.header_navbar .menu-4 li.current-menu-item2:before {height: 3px;width: 100%;right: 0;}
nav.header_navbar .menu-4 li:hover:before {width: 100% !important;left: 0 !important;}
nav.header_navbar .menu-4 li:hover a{color: #ffff !important;}


/*  */
.header{width: 100%;height: 60px;width: 100%;height: 100px;display: flex;align-items: center;background-color: #8e54ff;}
.menu {height: 100%;width: 100%;display: flex;align-items: center;padding: 0 100px;justify-content: center;}
.menu li{display: block;height: 70%;font-size: 20px;position: relative;display: flex;align-items: center;justify-content: center;color: #fff;text-transform: uppercase;text-shadow: 0 0 15px #8e54e9;transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);text-align: center;padding: 0 10px;margin-right: 30px;cursor: pointer;}
.menu li:after,
.menu li:before {content: "";position: absolute;display: block;border: 0px solid transparent;}
.menu li:after {width: 0%;height: 75%;border-top: 2px solid #fff;border-bottom: 2px solid #fff;transition: all 0.3s ease;}
.menu li:before {width: 120%;height: 0%;border-left: 2px solid #fff;border-right: 2px solid #fff;transition: all 0.5s ease;}
.menu li:hover::before {height: 80%;}
.menu li:hover::after {width: 120%;}

/*  */
nav.menu_list{display: flex;justify-content: center;padding: 20px 0;}
nav.menu_list ul li a {position: relative;display: block;text-transform: uppercase;margin: 20px 0;padding: 10px 20px;text-decoration: none;color: #262626;font-family: sans-serif;font-size: 18px;font-weight: 600;transition: 0.5s;z-index: 100 !important;}
nav.menu_list ul li a:before { content: ''; position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-top: 2px solid #262626;border-bottom: 2px solid #262626;transform: scaleY(2);opacity: 0;transition: 0.3s;}
.nav.menu_list ul li a:after {content: '';position: absolute;top: 2px;left: 0;width: 100%;height: 100%;background-color: #262626;transform: scale(0);opacity: 0;transition: 0.3s;z-index: -1;color: #fff !important}
nav.menu_list ul li a:hover:before {transform: scaleY(1);opacity: 1;background-color: #262626;z-index: -10}
nav.menu_list ul li a:hover:after {transform: scaleY(1);opacity: 1;background-color: #262626;z-index: -10;}
nav.menu_list ul li a:hover {color: #fff;z-index: 100 ;}

/*  */
nav.container_menu{width: 100%;min-height: 50vh;display: flex;justify-content: center;align-items: center;background: #252839;}
nav.container_menu ul {position: relative;display: flex;flex-direction: column;gap: 30px;text-align: left;}
nav.container_menu ul li {position: relative}
nav.container_menu ul li a {position: relative;font-size: 2em;line-height: 1em;letter-spacing: 2.5px;text-transform: uppercase;text-decoration: none;color: transparent;-webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);}
nav.container_menu ul li a::before {content: attr(data-text); position: absolute;width: 0;color: var(--color);overflow: hidden;transition: 1s;border-right: 4px solid var(--color);-webkit-text-stroke: 1px var(--color);}
nav.container_menu ul li a:hover::before {width: 100%;filter: drop-shadow(0 0 25px var(--color));}

/*  */
.nav_wrapper li a{color: #ffff;}
.nav_wrapper li a:hover{color: #ffff;}
.nav_wrapper {width: 100%;padding: 20px 0 ;}
.nav_wrapper nav {position: relative;}
.nav_wrapper ul {list-style-type: none;position: relative;}
.nav_wrapper li {margin: 0 30px;position: relative;}
.nav_wrapper_4 {background-color: #466C95;}
.nav_wrapper nav a:before {content: "[";left: -5px;}
.nav_wrapper nav a:after {content: "]";right: -5px;}
.nav_wrapper nav a:before,
.nav_wrapper nav a:after {position: absolute;opacity: 0;color: #fff;top: -1px;transition: all .5s;}
.nav_wrapper nav a:hover:before,
.nav_wrapper nav a:hover:after {opacity: 0.7;}
.nav_wrapper nav a:hover:before {left: -20px;}
.nav_wrapper nav a:hover:after {right: -20px;}

/*  */
.snip1155 {font-family: 'Raleway', Arial, sans-serif;text-align: center;text-transform: uppercase;font-weight: 500;}
.snip1155 * {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
.snip1155 li {display: inline-block;list-style: outside none none;margin: 0 2em;padding: 0;}
.snip1155 a {display: inline-block;padding: 0.5em 17px;color: rgba(255, 255, 255, 0.5);position: relative;letter-spacing: 1px;text-decoration: none;}
.snip1155 a:before {left: 20%;right: 20%;top: 50%;content: '';border-left: 12px solid #9b59b6;border-right: 12px solid #9b59b6;-webkit-transform: translateY(-50%);transform: translateY(-50%);height: 3px;opacity: 0;position: absolute;-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
.snip1155 a:hover,
.snip1155 .current a {color: #ffffff;}
.snip1155 a:hover:before,
.snip1155 .current a:before {left: 0;right: 0;opacity: 1;}
.snip1155{background-color: #212121;display: flex;justify-content: center;align-items: center;flex-flow: wrap;margin: 0;height: 100px;}

/*  */
.snip1211 {font-family: 'Raleway', Arial, sans-serif;text-align: center;text-transform: uppercase;font-weight: 500;letter-spacing: 1px;background-color: #212121;height: 100px;display: flex;align-items: center;justify-content: center;}
.snip1211 * {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
.snip1211 li {display: inline-block;list-style: outside none none;margin: 0.5em 1.5em;padding: 0;}
.snip1211 a {padding: 0.4em 0;color: rgba(255, 255, 255, 0.5);position: relative;text-decoration: none;display: inline-block;}
.snip1211 a:before {position: absolute;content: '';-webkit-transition: all 0.35s ease;transition: all 0.35s ease;opacity: 0;top: 25%;bottom: 25%;left: 0;right: 0;border-top: 3px solid #34495e;border-bottom: 3px solid #34495e;}
.snip1211 a:hover, 
.snip1211 .current a {color: #ffffff;}
.snip1211 a:hover:before,
.snip1211 .current a:before {opacity: 1;top: 0;bottom: 0;}

/* buttons */
.btn-grid{display: grid;grid-template-columns: repeat(4,25%);align-items: center;margin: 20px 0 0 0;}
.buttons-section {margin: 0px auto;}

/*  */
button.btn_hover {margin: 50px 50% 0;transform: translate(-50%, -50%);background-color: transparent;color: #f80;border: 2px solid #f80;border-radius: 5px;font-size: 1rem;font-weight: bold;overflow: hidden;transition: .5s;width: 100px !important;line-height: 40px;}
button.btn_hover::after {content: "";position: absolute;width: 0;height: 0;background-color: #f80;border-radius: 50% 0 0 50%;bottom: 0px;right: 0px;z-index: -1000;transition: 1s;}
button.btn_hover:hover::after {width: 200px;height: 200px;padding: 0;margin: 0;}
button.btn_hover:hover {color: #fff;}

/*  */
button.glow_on_hover {width: 120px;height: 50px;color: #fff;
background: #111; position: relative;border-radius: 10px;margin: auto;}
button.glow_on_hover:before {content: '';background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;top: -2px;left: -2px;background-size: 400%;z-index: -1;filter: blur(5px);width: calc(100% + 4px);height: calc(100% + 4px);animation: glowing 20s linear infinite;opacity: 0;transition: opacity .3s ease-in-out;border-radius: 10px;}
button.glow_on_hover:hover:before {opacity: 1;}
button.glow_on_hover:after {z-index: -1;content: '';position: absolute;width: 100%;height: 100%;background: #111;left: 0;top: 0;border-radius: 10px;}
@keyframes glowing {
    0% {background-position: 0 0;}
    50% {background-position: 400% 0;}
    100% {background-position: 0 0;}}

/*  */
button.btn {line-height: 50px;height: 50px;text-align: center;width: 200px;cursor: pointer;background-color: #66A182;margin: 30px auto;color: #FFF;transition: all 0.3s;position: relative;font-size: 15px;}
button.btn span {transition: all 0.3s;}
button.btn:before {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 1;opacity: 0;transition: all 0.3s;border-top-width: 1px;border-bottom-width: 1px;border-top-style: solid;border-bottom-style: solid;border-top-color: rgba(255, 255, 255, 0.5);border-bottom-color: rgba(255, 255, 255, 0.5);transform: scale(0.1, 1);}
button.btn:hover span {letter-spacing: 2px;}
button.btn:hover:before {opacity: 1;transform: scale(1, 1);}
button.btn:after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 1;transition: all 0.3s;background-color: rgba(255, 255, 255, 0.1);}
button.btn:hover:after {opacity: 0;transform: scale(0.1, 1);}

/*  */
.button_wrapper a {margin: auto;display: block;width: 200px;line-height: 40px;font-size: 18px;font-family: sans-serif;color: #333;border: 2px solid #333;letter-spacing: 2px;text-align: center;position: relative;transition: all .35s;}
.button_wrapper a span{position: relative;z-index: 2;}
.button_wrapper a:after {position: absolute;content: "";top: 0;left: 0;width: 0;height: 100%;background: #ff003b;transition: all .35s;}
.button_wrapper a:hover {color: #fff;}
.button_wrapper a:hover:after {width: 100%;}

/*  */
button.hover { --c: #229091;box-shadow: 0 0 0 .1em inset var(--c);--_g: linear-gradient(var(--c) 0 0) no-repeat;background:
var(--_g) calc(var(--_p, 0%) - 100%) 0%,
var(--_g) calc(200% - var(--_p, 0%)) 0%,
var(--_g) calc(var(--_p, 0%) - 100%) 100%,
var(--_g) calc(200% - var(--_p, 0%)) 100%;background-size: 50.5% calc(var(--_p, 0%)/2 + .5%); outline-offset: .1em;transition: background-size .4s, background-position 0s .4s;margin: 40px auto;font-family: system-ui, sans-serif;font-size: 1.5rem;cursor: pointer;padding: .5em 1.6em;font-weight: bold;}
.hover:hover {--_p: 100%;transition: background-position .4s, background-size 0s;}

/*  */
:root {
--first-color: hsl(231, 44%, 56%);
--first-color-alt: hsl(231, 44%, 51%);
--text-color: hsl(231, 12%, 98%);
--body-color: hsl(231, 100%, 94%);}
button.button_loader {margin: auto;outline: none;position: relative;padding: 1.25rem 2.5rem;background-color: var(--first-color);color: var(--text-color);font-size: 1rem;font-family: 'Poppins', sans-serif;border-radius: .5rem;box-shadow: 0 18px 40px hsla(231, 56%, 56%, .3);overflow: hidden;cursor: wait;}
button.button_loader::before {content: '';position: absolute;top: 0;left: 0;width: 150%;
height: 100%;background: repeating-linear-gradient(60deg,transparent,transparent 0.75rem,var(--first-color-alt) 0.75rem,var(--first-color-alt) 1.5rem);
 animation: load 1s infinite linear;}
button.button_loader span {position: relative;}

/*  */
.btn_animate{margin: 30px auto;align-items: center;justify-content: center;padding: 0.7rem 2rem;font-family: "Poppins", sans-serif;font-weight: 700;font-size: 18px;text-align: center;text-decoration: none;color: #fff;backface-visibility: hidden;border: 0.3rem solid transparent;border-radius: 3rem;display: block;width: 150px;}
.btn_animate{border-color: transparent;background-color: red;color: #FFF;transition: transform 0.2s cubic-bezier(0.235, 0, 0.05, 0.95);}
.btn_animate:hover {transform: perspective(1px) scale3d(1.044, 1.044, 1) translateZ(0) !important;}

/*  */
.Btn_blue {display: inline-block;outline: 0;box-sizing: border-box;
border: 0;padding: 0;margin: auto;width: 150px;background-image: linear-gradient(-180deg, #648cff 4%, #4172fa 100%);border: 1px solid rgba(51, 100, 237, 0.35);-webkit-box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.32), inset 0 -2px 0 0 #3262e6;
box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.32), inset 0 -2px 0 0 #3262e6;border-radius: 3px;font-family: system;font-size: 13px;color: #ffffff;letter-spacing: 0.7px;text-align: center;line-height: 46px;transform: translateZ(0);backface-visibility: hidden;transition-duration: 0.3s;transition-property: transform;transition-timing-function: ease-out;cursor: pointer;}
.Btn_blue:hover {transform: translateY(-8px);}
.Btn_blue:active {-webkit-box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.32),
inset 0 0px 0 0 #3262e6;box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.32), inset 0 0px 0 0 #3262e6;;background-image: linear-gradient(0deg, #527ffc 0%, #4172fa 96%);-webkit-transform: scale(0.98);transform: scale(1);}

/*  */
button.hover_button{border-radius: 4px;background-color: #dd7973;color: #FFFFFF;text-align: center;font-size: 20px;padding: 10px 20px;width: 130px;transition: all 0.5s;margin: 30px auto;}
button.hover_button span {cursor: pointer;display: inline-block;position: relative;transition: 0.5s;}
button.hover_button span:after {content: '\00bb';position: absolute;opacity: 0;top: 0;right: -20px;transition: 0.5s;}
button.hover_button:hover span {padding-right: 25px;}
button.hover_button:hover span:after {opacity: 1;right: 0;}

/*  */
button.button_load {margin: auto;background-color: #04AA6D;color: white;padding: 12px 16px;font-size: 16px}
button.button_load i{margin: 0 5px 0 0 ;}

/*  */
button.button_shadow {margin: 50px auto;align-items: center;background-color: #fee6e3;border: 2px solid #111;border-radius: 8px;box-sizing: border-box;color: #111;display: flex;font-family: Inter, sans-serif;font-size: 16px;height: 48px;justify-content: center;line-height: 24px;max-width: 100%;padding: 0 25px;position: relative;text-align: center;text-decoration: none;user-select: none;-webkit-user-select: none;touch-action: manipulation;}
button.button_shadow:after {background-color: #111;border-radius: 8px;content: "";display: block;height: 48px;left: 0;width: 100%;position: absolute;top: -2px;transform: translate(8px, 8px);transition: transform .2s ease-out;z-index: -1;}
button.button_shadow:hover:after {transform: translate(0, 0);}
button.button_shadow:active {background-color: #ffdeda;outline: 0;}
button.button_shadow:hover {outline: 0;}

/*  */
button.button_navbar {margin: 50px auto;padding: 15px 30px;text-align: center;text-transform: uppercase;transition: 0.5s;background-size: 200% auto;color: white;border-radius: 10px;display: block;border: 0px;font-weight: 700;box-shadow: 0px 0px 14px -7px #f09819;background-image: linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%);cursor: pointer;user-select: none;-webkit-user-select: none;touch-action: manipulation;}
button.button_navbar:hover {background-position: right center;color: #fff;text-decoration: none;}
button.button_navbar:active {transform: scale(0.95);}

/*  */
button.border_btn{position: relative;font-weight: bold;letter-spacing: 1.5px;background: none;border: 1px solid #face0d;margin: 0.5em;padding: 1em 2em;color: #face0d;margin: auto;height: 50px;}
button.border_btn span:nth-child(1) {content: '';display: block;position: absolute;
width: 1px;background-color: #ff7c01;left: 0;bottom: 0;}
button.border_btn span:nth-child(2) {content: '';display: block;position: absolute;height: 1px;background-color:#ff7c01;left: 0;top: 0;}
button.border_btn span:nth-child(3) {content: '';display: block;position: absolute;width: 1px;background-color:#ff7c01;right: 0;top: 0;}
button.border_btn span:nth-child(4) {content: '';display: block;position: absolute;height: 1px;background-color:#ff7c01;right: 0;bottom: 0;}
button.border_btn:hover,
button.border_btn:focus {border: none;}
button.border_btn:hover span:nth-child(1),
button.border_btn:focus span:nth-child(1) {animation: move1 1250ms infinite ease;}
button.border_btn:hover span:nth-child(2),
button.border_btn:focus span:nth-child(2) {animation: move2 1250ms infinite ease;}
button.border_btn:hover span:nth-child(3),
button.border_btn:focus span:nth-child(3) {animation: move3 1250ms infinite ease;}
button.border_btn:hover span:nth-child(4),
button.border_btn:focus span:nth-child(4) {animation: move4 1250ms infinite ease;}
@keyframes move1 {
0% {height: 100%;bottom: 0;}
54% {height: 0;bottom: 100%;}
55% {height: 0;bottom: 0;}
100% {height: 100%;bottom: 0;}}
@keyframes move2 {
0% {width: 0;left: 0;}
50% {width: 100%;left: 0;}
100% {width: 0;left: 100%;}}
@keyframes move3 {
0% {height: 100%;top: 0;}
54% {height: 0;top: 100%;}
55% {height: 0;top: 0;}
100% { height: 100%;top: 0;}}
@keyframes move4 {
0% {width: 0;right: 0;}
50% {width: 100%;right: 0;}
100% {width: 0;right: 100%;}}

/*  */
a.button_shine {width: 200px;height: 50px;background: #333;display: block;position: relative;margin: auto;overflow: hidden;border: 1px solid #333333;color: white;text-decoration: none;}
a.button_shine span.text {position: absolute;top: 16px;left: 65px;font: 15px Arial;}
a.button_shine span.shine {content: '';position: absolute;height: 400px;width: 20px;background: white;top: -100px;left: -200px;display: block;opacity: 0.8;-webkit-box-shadow: 0px 0px 20px 10px white;
-moz-box-shadow: 0px 0px 20px 10px white;box-shadow: 0px 0px 20px 10px white;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-ms-transition: all 0.8s ease;-o-transition: all 0.8s ease;transition: all 0.8s ease;}
a.button_shine:hover span.shine {left: 400px;top: -100px;}

/*  */
button.learn_more_btn{position: relative;display: inline-block;cursor: pointer;outline: none;border: 0;vertical-align: middle;text-decoration: none;background: transparent;padding: 0;font-size: inherit;font-family: inherit;width: 210px;height: auto;margin: 40px auto;}
button.learn_more_btn .circle {transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);position: relative;display: block;margin: 0;width: 3rem;height: 3rem;background: #282936;border-radius: 1.625rem;}
button.learn_more_btn .circle .icon {transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute;top: 0;bottom: 0;margin: auto;background: #fff;}
button.learn_more_btn .circle .icon.arrow {transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);left: 0.625rem;width: 1.125rem;height: 0.125rem;background: none;}
button.learn_more_btn .circle .icon.arrow::before {position: absolute;content: '';top: -0.25rem;right: 0.0625rem;width: 0.625rem;height: 0.625rem;border-top: 0.125rem solid #fff;border-right: 0.125rem solid #fff;transform: rotate(45deg);}
button.learn_more_btn .button-text {transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);position: absolute;top: 0;left: 0;right: 0;bottom: 0;padding: 0.75rem 0;margin: 0 0 0 1.85rem;color: #282936;font-weight: 700;line-height: 25px;text-align: center;text-transform: uppercase;}
button:hover .circle {width: 100%;}
button:hover .circle .icon.arrow {background: #fff;transform: translate(1rem, 0);}
button:hover .button-text {color: #fff;}

/*  */
button.button_hover{width: 120px;line-height: 35px;text-align: center;color: #000;text-transform: uppercase;font-weight: 600;margin: auto;cursor: pointer;color: #fff;
border: 3px solid #c266d3;background-image: -webkit-linear-gradient(30deg, #c266d3 50%, transparent 50%);background-image: linear-gradient(30deg, #c266d3 50%, transparent 50%);background-size: 500px;background-repeat: no-repeat;background-position: 0%;transition: background 300ms ease-in-out;}
button.button_hover:hover {background-position: 100%;color: #c266d3;}

/*  */
.click_me_btn{margin: auto;background: #171618;height: 30vh;display: grid;place-items: center;}
.click_me_btn a {position: relative;padding: 20px 40px;box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);color: #999;text-decoration: none;text-transform: uppercase;letter-spacing: 4px;font: 700 15px consolas;overflow: hidden;}
.click_me_btn a span:nth-child(1) {position: absolute;top: 0;right: 0;width: 100%;height: 3px;background: linear-gradient(to right, #171618, #3bff3b);animation: animate1 2s linear infinite;}
@keyframes animate1 {
0% {transform: translateX(-100%);}
100% {transform: translateX(100%);}}
.click_me_btn a span:nth-child(2) {position: absolute;top: 0;right: 0;height: 100%;width: 3px;background: linear-gradient(to bottom, #171618, #3bff3b);animation: animate2 2s linear infinite;animation-delay: 1s;}
@keyframes animate2 {
0% {transform: translateY(-100%);}
100% {transform: translateY(100%);}}
.click_me_btn a span:nth-child(3) {position: absolute;bottom: 0;right: 0;width: 100%;height: 3px;background: linear-gradient(to left, #171618, #3bff3b);animation: animate3 2s linear infinite;}
@keyframes animate3 {
0% {transform: translateX(100%);}
100% {transform: translateX(-100%);}}
.click_me_btn a span:nth-child(4) {position: absolute;top: 0;left: 0;height: 100%;width: 3px;background: linear-gradient(to top, #171618, #3bff3b);animation: animate4 2s linear infinite;animation-delay: 1s;}
@keyframes animate4 {
0% {transform: translateY(100%);}
100% {transform: translateY(-100%);}}

/*  */
.btn_hover_animate{justify-content: center;align-items: center;display: flex;height: 30vh;background-color: white;}
.btn_hover_animate button {background-color: offwhite;font-size: 20px;padding: 15px 20px;text-transform: capitalize;cursor: pointer;transform: all 0.3s;position: relative;}
.btn_hover_animate button:before {content: "";position: absolute;width: 24px;height: 24px;top: -5px;left: -5px;border-top: 2px solid tomato;border-left: 2px solid tomato;transition: all 0.25s;}
.btn_hover_animate button:hover:before,
.btn_hover_animate button:hover:after {width: 104%;height: 110%;}
.btn_hover_animate button:after {content: "";position: absolute;width: 24px;height: 24px;bottom: -5px;right: -5px;border-bottom: 2px solid tomato;border-right: 2px solid tomato;transition: all 0.30s;}

/*  */
.share_button{background: #fafafa;height: 50px;width: 280px;border-radius: 40px;cursor: pointer;position: relative;overflow: hidden;justify-content: center;align-items: center;display: flex;box-shadow: 0 0 20px rgba(0.2, 0, 0.2, 0.1);border: none;margin: auto;font-size: 30px;}
.share_button span {position: absolute;background: #002651;width: 100%;height: 100%;justify-content: center;align-items: center;display: flex;color: #fff;font-size: 20px;
font-weight: bold;transition: 0.3s linear;z-index: 999;border-radius: 40px;}
.share_button span .fa-share-alt {margin-right: 5px;font-size: 16px;}
.share_button:hover span {transform: translateX(-100%);}
.share_button a { margin: 5px;}
.share_button a:hover {transform: translateY(-10%);}
.share_button a .fa-facebook {color: #3b5998;}
.share_button a .fa-pinterest {color: #E60023;}
.share_button a .fa-whatsapp {color: #075e54;}
.share_button a .fa-twitter {color: #00acee;}

/*  */
.buttons {margin: auto;}
.buttons button {padding: 0 25px;border-radius: 4px;min-width: 140px;height: 50px;font-family: "Montserrat", sans-serif;font-weight: 600;font-size: 12px;letter-spacing: 0.15em;text-transform: uppercase;display: flex;align-items: center;justify-content: center;margin: 0 10px;position: relative;overflow: hidden;border: solid 1px #69cec2;cursor: pointer;}
.buttons button:after,
.buttons button:before {width: 0%;height: 0%;content: "";position: absolute;border-radius: 100%;}
.buttons button:after {transition: all 0.5s ease;background-color: white;}
.buttons button:before {transition: all 0.5s ease-out;background: #7de1c2;}
.buttons button span {z-index: 1;transition: all 0.3s ease-out;}
.buttons button{background: linear-gradient(90deg, #69cec2 0%, #41bbac 100%);color: white;}
.buttons button:hover{color: #69cec2;}
.buttons button:hover:after,
.buttons button:hover:before {width: 200px;height: 200px;border-radius: 4px;}
.buttons button:hover:after {transition: all 0.7s ease-in;}
.buttons button:hover:before {transition: all 0.5s ease-in;}

/*  */
.background_btn a {color: #000;text-decoration: none;text-transform: uppercase;font-family: Helvetica;}
.background_btn a{font-size: 20px;}
svg {width: 130px;height: 40px;}
.background_btn{max-width: 960px;margin: 0 auto;text-align: center;}
.background_btn .button {text-decoration: none;color: #fff;position: relative;display: inline-block;width: 130px;height: 40px;margin: 20px;overflow: hidden;}
.background_btn .button:nth-child(3) {overflow: visible;position: relative;top: -20px;}
.background_btn .button rect {position: absolute;top: 0;left: 0;stroke-width: 4px;stroke-dashoffset: 400px;stroke: #E97451;}
.background_btn .button span {color: #E97451;width: 130px;height: 40px;display: inline-block;text-align: center;position: absolute;left: 0;top: 0;line-height: 40px;transition: all .2s linear;}
.background_btn .button span:hover {color: #fff;background: #E97451;transition: all 1s cubic-bezier(1.25s 0, 1.15, 1, 1);transition-delay: .5s;}
.background_btn .button:nth-child(1):hover rect {animation: draw1 .75s linear forwards;}
.background_btn .button:nth-child(2):hover rect {animation: draw2 .75s linear forwards;}
.background_btn .button:nth-child(3) span {border: 3px solid #E97451;transform: scale(1);width: 125px;height: 35px;line-height: 37px;}
.background_btn .button:nth-child(3):hover span {animation: draw3 .75s linear forwards;}
@keyframes draw1 {
    0% {stroke-dasharray: 300;stroke-dashoffset: 700;stroke-width: 4px;}
    75% {stroke-dasharray: 900;stroke-width: 1px;}
    100% {stroke-dasharray: 900; stroke-width: 1px;}}
@keyframes draw2 {
    0% {stroke-dashoffset: 350;stroke-dasharray: 350;}
    50% {stroke-dashoffset: 600;stroke-dasharray: 400;stroke-width: 1px;}
    100% {stroke-dashoffset: 900;stroke-dasharray: 400;stroke-width: 1px;}}
@keyframes draw3 {
    100% {transform: scale(1.35); }}

/* articles  */
/*  */
.articles_page_container{max-width: 1200px;margin: 50px auto;}
.articles_page_grid{display: grid;grid-template-columns: repeat(3,30%);align-items: center;gap: 3.3%;justify-content: center;margin: 50px auto;}
.content_article {margin-top: 50px;margin-bottom: 30px;width: 100%;overflow: hidden;display: flex;justify-content: center;cursor: pointer;margin: 1%;overflow: hidden;position: relative;}
.content_article p {line-height: 25px;margin: 0;color: #ffffff;font-size: 20px;text-align: left;opacity: 0;}
.content_article h3 {letter-spacing: 1px;line-height: 25px;margin: 0;color: #ffffff;text-align: left;font-size: 35px;}
.content_article img {max-width: 100%;display: block;transition: all 0.5s ease;-webkit-filter: grayscale(85%);filter: grayscale(85%);transition: all 0.3s ease;}
.content_article .text {position: absolute;bottom: 5%;left: 20px;color: #ffffff;transition: all 0.5s ease;cursor: pointer;}
.content_article:hover img {-webkit-filter: grayscale(0%);filter: grayscale(0%);}
.content_article:hover .text {position: absolute;bottom: 18%;}
.content_article:hover p {opacity: 1;}

/*  */
.article_figure p {text-align: center;padding: 15px 0 0 0;transition: 0.3s;}
.media-image-container {overflow: hidden;border-radius: 20px;}
.media-image-overlay {font-size: 0;position: relative;transition: 0.3s;}
.media-grid-img {width: 100%;transition: 0.2s;}
.media-grid-img:hover {transform: scale(1.1);}

/*  */
.container-article {width: fit-content; margin: 2rem auto;padding-inline: 1rem;}
.container-article p{color: #fff !important;}
.container-article h2{color: #fff !important;}
@media only screen and (min-width: 767px) {.container {padding-inline: 2rem;}}
.grid-article {display: grid;grid-template-columns: repeat(1, 1fr);grid-gap: 1rem;}
@media only screen and (min-width: 767px) {.grid {grid-template-columns: repeat(2, 1fr);grid-gap: 1.5rem;}}
.article {position: relative;cursor: pointer;}
.article:hover:before {opacity: 1;}
.article:hover .article__cover {transform: translateX(-2rem) scale(1.05);}
.article:hover .article__title,
.article:hover .article__info {opacity: 1;transform: translateX(0);}
.article:hover .article__title {transition-delay: 0s;}
.article:hover .article__info {transition-delay: 0.1s;}
.article:before {content: "";opacity: 0;position: absolute;top: 0;left: 0;right: 0;bottom: 0;box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.47);transition: opacity 0.3s ease-in-out;}
.article__figure {position: relative;overflow: hidden;margin: 0;height: 0;padding-bottom: 100%;height: 250px !important;width: 400px;}
@media only screen and (min-width: 500px) {.article__figure {padding-bottom: 50%;}}
.article__cover {position: absolute;top: 0;bottom: 0;left: 0;right: -2rem;width: calc(100% + 2rem);height: 100%;object-fit: cover;transform: translateX(0);transition: transform 0.55s ease-in-out;}
.article__caption {position: absolute;top: 0;bottom: 0;right: 0;display: flex;flex-direction: column;justify-content: space-evenly;max-width: 90%;}
.article__title,
.article__info {opacity: 0;max-width: 25rem;padding: 0.85rem 1rem;transform: translateX(50%);transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;}
.article__title {background-color: rgba(51, 51, 51, 0.5);font-weight: 300;transition-delay: 0.1s;}
.article__info {background-color: rgba(51, 51, 51, 0.7);font-size: 0.75rem;letter-spacing: 2px;}


/*  */
.news-image {margin: auto;}
.news-img {border-radius: 50%;vertical-align: middle;width: 200px;height: 200px;border-radius: 50%;transition: all 0.3s;margin: 0 0 20px 0;}
.news-img:hover {transform: translateY(-15px);}

/*  */
.image-container {width: fit-content;display: flex;justify-content: center;flex-wrap: wrap;perspective: 500px;margin:auto;}
.image-container .box{position: relative;width: 275px;height: 275px;background: #000;transition: 0.5s;overflow: hidden;}
.image-container:hover .box {transform: rotateY(25deg);}
.image-container .box:hover~.box {transform: rotateY(-25deg);}
.image-container .box:hover {transform: rotateY(0deg) scale(1.10);z-index: 1;box-shadow: 0 25px 40px rgba(0, 0, 0, 0.5);}
.image-container .box .imgBx {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.image-container .box .imgBx:before {content: '';position: absolute;
top: 0;left: 0;width: 100%;height: 100%;z-index: 1;opacity: 0;transition: 0.5s;mix-blend-mode: multiply;}
.image-container .box:hover .imgBx:before {opacity: 1;}
.image-container .box .imgBx img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.image-container .box .content {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;display: flex;padding: 20px;align-items: flex-end;box-sizing: border-box;}
.image-container .box .content h2 {color: #fff;transition: 0.5s;text-transform: uppercase;margin-bottom: 5px;font-size: 20px;transform: translateY(200px);transition-delay: 0.3s;}
.image-container .box:hover .content h2 {transform: translateY(0px);}
.image-container .box .content p {color: #fff;transition: 0.5s;font-size: 14px;transform: translateY(200px);transition-delay: 0.4s;}
.image-container .box:hover .content p {transform: translateY(0px);}

/*  */
.container-image {position: relative;max-width: 350px;margin: 0 auto;display: inline-block;}
.container-image .image {display: block;width: 100%;height: auto;}
.overlay {position: absolute;bottom: 0;background: rgb(0, 0, 0);background: rgba(0, 0, 0, 0.5);color: #f1f1f1;width: 100%;transition: .5s ease;opacity: 0;color: white;font-size: 20px;padding: 20px;
text-align: center;}
.container-image:hover .overlay {opacity: 1;}

/*  */
.image-6{max-width: 100%;transition: all 0.5s;}
.article-5:hover img{transform: scale(0.9);opacity: 0.7;}

/*  */
.view-grid{display: grid;grid-template-columns: 25% 25% 25% 25%;margin: 50px auto;}
.view {width: 300px;height: 200px;margin:auto;border: 10px solid #fff;overflow: hidden;position: relative;text-align: center;box-shadow: 1px 1px 2px #e6e6e6;cursor: default;}
.view .mask,
.view .content {width: 300px;height: 200px;position: absolute;overflow: hidden;top: 0;left: -8px}
.view img {display: block;position: relative}
.view h2 {text-transform: uppercase;color: #fff;text-align: center;position: relative;font-size: 17px;padding: 10px;background: rgba(0, 0, 0, 0.8);margin: 20px 0 0 0}
.view p {font-family: Georgia, serif;font-style: italic;font-size: 12px;position: relative;color: #fff;padding: 10px 20px 20px;text-align: center}
.view a.info {display: inline-block;text-decoration: none;padding: 7px 14px;background: #000;color: #fff;text-transform: uppercase;box-shadow: 0 0 1px #000}
.view a.info:hover {box-shadow: 0 0 5px #000}
.view-second img {transition: all 0.2s ease-in;}
.view-second .mask {background-color: rgba(115, 146, 184, 0.7);width: 400px;padding: 60px;height: 400px;opacity: 0;transform: translate(265px, 145px) rotate(45deg);transition: all 0.2s ease-in-out;}
.view-second h2 {border-bottom: 1px solid rgba(0, 0, 0, 0.3);background: transparent;margin: 20px 40px 0px 40px;transform: translate(200px, -200px);transition: all 0.2s ease-in-out;}
.view-second p {transform: translate(-200px, 200px);transition: all 0.2s ease-in-out;}
.view-second a.info {transform: translate(0px, 100px);transition: all 0.2s 0.1s ease-in-out;}
.view-second:hover .mask {opacity: 1;transform: translate(-80px, -125px) rotate(45deg);}
.view-second:hover h2 {transform: translate(0px, 0px);transition-delay: 0.3s;}
.view-second:hover p {transform: translate(0px, 0px);transition-delay: 0.4s;}
.view-second:hover a.info {transform: translate(0px, 0px);transition-delay: 0.5s;}

/*  */
.view-eighth .mask {background-color: rgba(255, 255, 255, 0.7);top: -200px;opacity: 0;transition: all 0.3s ease-out 0.5s;}
.view-eighth h2 {transform: translateY(-200px);transition: all 0.2s ease-in-out 0.1s;}
.view-eighth p {color: #333;transform: translateY(-200px);transition: all 0.2s ease-in-out 0.2s;}
.view-eighth a.info {transform: translateY(-200px);transition: all 0.2s ease-in-out 0.3s;}
.view-eighth:hover .mask {opacity: 1;top: 0px;transition-delay: 0s;animation: bounceY 0.9s linear;}
.view-eighth:hover h2 {transform: translateY(0px);transition-delay: 0.4s;}
.view-eighth:hover p {transform: translateY(0px);transition-delay: 0.2s;}
.view-eighth:hover a.info {transform: translateY(0px);transition-delay: 0s;}

/*  */
.view-tenth img {transform: scaleY(1);transition: all 0.7s ease-in-out;}
.view-tenth .mask {background-color: rgba(255, 231, 179, 0.3);transition: all 0.5s linear;opacity: 0;}
.view-tenth h2 {border-bottom: 1px solid rgba(0, 0, 0, 0.3);background: transparent;margin: 20px 40px 0px 40px;transform: scale(0);color: #333;transition: all 0.5s linear;opacity: 0;}
.view-tenth p {color: #333;opacity: 0;transform: scale(0);transition: all 0.5s linear;}
.view-tenth a.info {opacity: 0;transform: scale(0);transition: all 0.5s linear;}
.view-tenth:hover img {transform: scale(10);opacity: 0;}
.view-tenth:hover .mask { opacity: 1;}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info {transform: scale(1);opacity: 1;}

/*  */
.view-fifth img {transition: all 0.3s ease-in-out;}
.view-fifth .content {transform: translateX(400px);transition-delay: 0.2s;}
.view-fifth .mask {background-color: rgba(215, 211, 210, 0.3);transform: translateX(-300px);opacity: 1;transition: all 0.4s ease-in-out;}
.view-fifth h2 {background: rgba(255, 255, 255, 0.5);color: #000;box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);}
.view-fifth p {opacity: 0;color: #333;transition: all 0.2s linear;}
.view-fifth:hover .mask {transform: translateX(0px);}
.view-fifth:hover img {transform: translateX(300px);transition-delay: 0.1s;}
.view-fifth:hover p {opacity: 1;transition-delay: 0.4s;}
.view-fifth:hover .content{transform: translateX(0px);}

/*  */
.gallery img {height: 400px;width: 250px;border-radius: 5px;transition: .5s;}
.gallery {height: 500px;display: inline-flex;justify-content: center;}
.card {height: 280px;margin: 50px;box-shadow: 5px 5px 20px black;overflow: hidden;position: relative;}
.description {height: 60px;width: 250px;padding: 6px;box-sizing: border-box;position: absolute;bottom: 10px;color: #FFF;transition: .5s;}
.gallery h1 {margin: 10px;font-size: 30px;color: #ffff;}
.gallery h1::before,.gallery h1::after{height: 0;border: none;}
.gallery p {font-size: 14px;margin: 10px;visibility: hidden;opacity: 0;}
.card:hover {cursor: pointer;}
.card:hover .description {height: 180px;bottom: -4px;background: black;}
.card:hover p {opacity: 1;visibility: visible;}
.card:hover img {transform: scale(1.1);}
.display-flex{display: flex;}

/*  */
.hover14 figure {position: relative;}
.hover14 figure::before {position: absolute;top: 0;left: -75%;z-index: 2;display: block;content: '';width: 50%;height: 100%;background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);-webkit-transform: skewX(-25deg);transform: skewX(-25deg);}
.hover14 figure:hover::before {-webkit-animation: shine .75s;animation: shine .75s;}
@-webkit-keyframes shine {100% {left: 125%;}}
@keyframes shine {100% {left: 125%;}}
.column {margin: 50px auto;display: flex;justify-content: center;}
.column:last-child {padding-bottom: 60px;}
.column::after {content: '';clear: both;display: block;}
.column div {position: relative;float: left;width: 300px;height: 200px;margin: 0 0 0 25px;padding: 0;}
.column div:first-child {margin-left: 0;}
.column div span {position: absolute;bottom: -20px;left: 0;z-index: -1;display: block;width: 300px;margin: 0;padding: 0;color: #444;font-size: 18px;text-decoration: none;text-align: center;-webkit-transition: .3s ease-in-out;transition: .3s ease-in-out;opacity: 0;}
figure {width: 300px;height: 200px;margin: 0;padding: 0;background: #fff;overflow: hidden;}
figure:hover+span {bottom: -36px;opacity: 1;}

/*  */
.grid {position: relative;margin: 0 auto;padding: 1em 0 4em;max-width: fit-content;text-align: center;}
.grid figure {position: relative;float: left;overflow: hidden;margin: 10px 1%;min-width: 320px;max-width: 480px;max-height: 360px;width: 48%;
background: #3085a3;text-align: center;cursor: pointer;height: fit-content !important;}
.grid figure img {position: relative;display: block;min-height: 100%;max-width: 100%;opacity: 0.8;}
.grid figure figcaption {padding: 2em;color: #fff;text-transform: uppercase;font-size: 1.25em;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.grid figure figcaption::before,
.grid figure figcaption::after {pointer-events: none;}
.grid figure figcaption,
.grid figure figcaption>a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.grid figure figcaption>a {z-index: 1000;text-indent: 200%;white-space: nowrap;font-size: 0;opacity: 0;}
.grid figure h2 {word-spacing: -0.15em;font-weight: 300;}
.grid figure h2 span {font-weight: 800;}
.grid figure h2,
.grid figure p {margin: 0;}
.grid figure p {letter-spacing: 1px;font-size: 68.5%;}
figure.effect-dexter {background: -webkit-linear-gradient(top, rgba(37, 141, 200, 1) 0%, rgba(104, 60, 19, 1) 100%);background: linear-gradient(to bottom, rgba(37, 141, 200, 1) 0%, rgba(104, 60, 19, 1) 100%);}
figure.effect-dexter img {-webkit-transition: opacity 0.35s;transition: opacity 0.35s;}
figure.effect-dexter:hover img {opacity: 0.4;}
figure.effect-dexter figcaption::after {position: absolute;right: 30px;bottom: 30px;left: 30px;height: -webkit-calc(50% - 30px);height: calc(50% - 30px);border: 7px solid #fff;content: '';-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
figure.effect-dexter:hover figcaption::after {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
figure.effect-dexter figcaption {padding: 3em;text-align: left;}
figure.effect-dexter p {position: absolute;right: 60px;bottom: 60px;left: 60px;opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(0, -100px, 0);transform: translate3d(0, -100px, 0);}
figure.effect-dexter:hover p {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}

/*  */
.effect-marley {position: relative;overflow: hidden;margin: 100px auto;max-width: 400px;max-height: 360px;width: 48%;background: #3085a3;text-align: center;cursor: pointer;}
.effect-marley img {position: relative;display: block;min-height: 100%;max-width: 100%;opacity: 0.8;}
.effect-marley figcaption {padding: 2em;color: #fff;text-transform: uppercase;font-size: 1.25em;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
 .effect-marley figcaption::before,
.effect-marley figcaption::after {pointer-events: none;}
.effect-marley figcaption,
.effect-marley figcaption>a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.effect-marley figcaption>a {z-index: 1000;text-indent: 200%;white-space: nowrap;font-size: 0;opacity: 0;}
 .effect-marley h2 {word-spacing: -0.15em;font-weight: 300;}
.effect-marley h2 span {font-weight: 800;}
 .effect-marley h2,
 .effect-marley p {margin: 0;}
.effect-marley p {letter-spacing: 1px;font-size: 68.5%;position: absolute;right: 30px;
left: 30px;padding: 10px 0;bottom: 30px;line-height: 1.5;
-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
.effect-marley.effect-marley figcaption { text-align: right;}
.effect-marley.effect-marley h2 {top: 30px;-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(0, 20px, 0);transform: translate3d(0, 20px, 0);text-align: left;}
.effect-marley.effect-marley:hover h2 {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.effect-marley.effect-marley h2::after {position: absolute;top: 100%;left: 0;width: 100%;height: 4px;background: #fff;content: '';-webkit-transform: translate3d(0, 40px, 0);transform: translate3d(0, 40px, 0);}
.effect-marley.effect-marley h2::after,
.effect-marley.effect-marley p {opacity: 0;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;text-align: left;}
.effect-marley.effect-marley:hover h2::after,
figure.effect-marley:hover p {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}

/*  */
figure.effect-sarah {background: #42b078;}
figure.effect-sarah img {max-width: none;width: -webkit-calc(100% + 20px);width: calc(100% + 20px);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(-10px, 0, 0);transform: translate3d(-10px, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;}
figure.effect-sarah:hover img {opacity: 0.4;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
figure.effect-sarah figcaption {text-align: left;}
figure.effect-sarah h2 {position: relative;overflow: hidden;padding: 0.5em 0;}
figure.effect-sarah h2::after {position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;background: #fff;content: '';-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
figure.effect-sarah:hover h2::after {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
figure.effect-sarah p {padding: 1em 0;opacity: 0;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
figure.effect-sarah:hover p {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}

/*  */
figure.effect-lily img {max-width: none;width: -webkit-calc(100% + 50px);
width: calc(100% + 50px);opacity: 0.7;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(-40px, 0, 0);transform: translate3d(-40px, 0, 0);}
figure.effect-lily figcaption {text-align: left;}
figure.effect-lily figcaption>div {position: absolute;bottom: 0;left: 0;padding: 2em;width: 100%;height: 50%;}
figure.effect-lily h2,
figure.effect-lily p {-webkit-transform: translate3d(0, 40px, 0);transform: translate3d(0, 40px, 0);}
figure.effect-lily h2 {-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;}
figure.effect-lily p {color: rgba(255, 255, 255, 0.8);opacity: 0;-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;transition: opacity 0.2s, transform 0.35s;}
figure.effect-lily:hover img,
figure.effect-lily:hover p {opacity: 1;}
figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
figure.effect-lily:hover p {-webkit-transition-delay: 0.05s;transition-delay: 0.05s;-webkit-transition-duration: 0.35s;transition-duration: 0.35s;}

/*  */
.container-cards {display: flex;flex-wrap: wrap;justify-content: space-evenly;
align-items: center;height: 400px;background: linear-gradient(#1434A4, #1434A4 50%, #FFF 50%, #FFF 100%);}
.container-cards .box {max-width: 320px;position: relative;background: #FFF;padding: 100px 40px 60px;box-shadow: 0 15px 45px rgba(0, 0, 0, .1);text-align: left;cursor: pointer;}
.container-cards .box::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #0096FF;transform: scaleY(0);transform-origin: top;transition: transform 0.5s;}
.container-cards .box:hover::before {transform: scaleY(1);transform-origin: bottom;transition: transform 0.5s;}
.container-cards .box h2 {position: absolute;left: 40px;top: 60px;font-size: 4em;font-weight: 800;z-index: 1;opacity: 0.1;transition: 0.5s;}
.container-cards .box:hover h2 {opacity: 1;color: #FFF;transform: translateY(-40px);}
.container-cards .box h3 {position: relative;font-size: 1.5em;z-index: 2;color: #333;transition: 0.5s;}
.container-cards .box p {position: relative;z-index: 2;color: #555;transition: 0.5s;}
.container-cards .box:hover h3,
.container-cards .box:hover p {color: #FFF;}

/* component animation */
#components{margin-top: 100px;}

/*  */
.component-1 {text-align: center;background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);color: #555;font-family: 'Roboto';font-weight: 300;font-size: 40px;padding-top: 20vh;height: 50vh;overflow: hidden;-webkit-backface-visibility: hidden;-webkit-perspective: 1000;-webkit-transform: translate3d(0, 0, 0);}
.component-1 div {display: inline-block;overflow: hidden;white-space: nowrap;}
.component-1 div:first-of-type {animation: showup 7s infinite;}
.component-1 div:last-of-type {width: 0px;animation: reveal 7s infinite;}
.component-1 div:last-of-type span {margin-left: -355px;animation: slidein 7s infinite;font-size: 28px;}
@keyframes showup {
    0% {opacity: 0;}
    20% {opacity: 1;}
    80% {opacity: 1;}
    100% { opacity: 0;}}
@keyframes reveal {
    0% {opacity: 0;width: 0px;}
    20% {opacity: 1;width: 0px;}
    30% { width: 320px;}
    80% {opacity: 1;}
    100% {opacity: 0;width: 320px;}}
@keyframes slidein {
    0% {margin-left: -800px;}
    20% { margin-left: -800px;}
    35% {margin-left: 0px;}
    100% {margin-left: 0px;}}

/* compoent 2 */
.component-2{margin: 0 auto;text-align: start;position: relative;}
.component-2 img{width: 100%;height: 500px;}
.component-container{position: absolute;top: 20%;left: 10%;}
.title{font-size: 2em;margin: 0 0 30px 0;display: none;font-family: 'Courier New', Courier, monospace;}
.paragraph{display: none;font-size: 20px; max-width: 50%;font-family: 'Courier New', Courier, monospace;}
.display{display: block;animation: 2s anim-lineUp ease-out;}
.display-paragraph{display: block;animation: 2s anim-lineUp ease-out;font-size: 20px;max-width: 50%;}
   @keyframes anim-lineUp {
       0% {opacity: 0;transform: translateY(80%);}
       20% {opacity: 0;}
       50% {opacity: 1;transform: translateY(0%);}
       100% {opacity: 1;transform: translateY(0%);}}

/*  */
.component-3 {height: 50vh;display: flex;align-items: center;justify-content: center;background: #d08f8f;}
.text-typing {padding: 20px 30px;background: #f5f5f5;font-size: 35px;font-family: monospace;border-radius: 50px;}
.text-typing p {margin: 0px;white-space: nowrap;overflow: hidden;animation: typing 4s steps(22, end) forwards infinite, blink 1s infinite;}
@keyframes typing {
    0% { width: 0%}
    100% {width: 100% }}
@keyframes blink {
    0%,
    100% {border-right: 2px solid transparent;}
    50% {border-right: 2px solid #222;}}

/*  */
.component-4{display: flex;align-items: center;justify-content: center;overflow: hidden;width: 100vw;height: 500px;color: #000;background-color: #D8D8D8;font-family: 'Poppins', serif;}
.component-4 h2{font-size: 3em;}
.component-4 span{font-size: 40px;}
.home-text {position: relative;overflow: hidden;display: block;}
.home-text-after::after {content: '';position: absolute;top: 0;right: 0;width: 100%;height: 100%;background: white;animation: a-ltr-after 2s cubic-bezier(.77, 0, .18, 1) forwards;transform: translateX(-101%);animation-delay: 0s;}
.home-text-before::before {content: '';position: absolute;top: 0;right: 0;width: 100%;
height: 100%;background: #D8D8D8;animation: a-ltr-before 2s cubic-bezier(.77, 0, .18, 1) forwards;transform: translateX(0);}
.home-text:nth-of-type(1)::before,
.home-text:nth-of-type(1)::after {animation-delay: 1s;}
.home-text:nth-of-type(2)::before,
.home-text:nth-of-type(2)::after {animation-delay: 1.5s;}
@keyframes a-ltr-after {
    0% {transform: translateX(-100%)}
    100% {transform: translateX(101%)}}
@keyframes a-ltr-before {
    0% {transform: translateX(0)}
    100% {transform: translateX(200%)}}

 /*  */
.component-5 {height: 50vh;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #FCEDDA;}
.component-5-title{font-family: "Roboto Mono"; max-width: 40ch;text-align: center;transform: scale(0.94);animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);font-size: 2em;color: #EE4E34;}
 @keyframes scale {100% {transform: scale(1);}}
 .component-5-span {display: inline-block;opacity: 0;filter: blur(4px);font-family: "Roboto Mono";}
 .component-5-span-animation:nth-child(1) {animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(2) {animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(3) {animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(4) {animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(5) {animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(6) {animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(7) {animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(8) {animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(9) {animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(10) {animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(11) {animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(12) {animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(13) {animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(14) {animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(15) {animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(16) {animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(17) {animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 .component-5-span-animation:nth-child(18) {animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);}
 @keyframes fade-in {100% {opacity: 1;filter: blur(0);}}

 /* component 6 */
.component-6 {display: flex;align-items: center;justify-content: center;height: 50vh;width: 100vw;
text-align: initial !important;}
.component-6 h2 {color: #333;font-family: tahoma;font-size: 3rem;font-weight: 100;line-height: 1.5;text-transform: uppercase;white-space: nowrap;overflow: hidden;position: relative;width: 550px;text-decoration: none !important;}
.component-6 h2 span {font-size: 40px;margin-left: 40px;}
.message {background-color: yellow;color: #333;display: block;font-weight: 900;overflow: hidden;position: absolute;padding-left: 0.5rem;top: 0.2rem;left: 270px;animation: openclose 5s ease-in-out infinite;}
.word1,
.word2,
.word3 {font-family: tahoma;}
@keyframes openclose {
    0% {top: 0.2rem;width: 0;}
    5% {width: 0;}
    15% {width: 230px;}
    30% {top: 0.2rem;width: 230px;}
    33% {top: 0.2rem;width: 0;}
    35% {top: 0.2rem;width: 0;}
    38% {top: -4.5rem;}
    48% {top: -4.5rem;width: 190px;}
    62% {top: -4.5rem;width: 190px;}
    66% {top: -4.5rem;width: 0;text-indent: 0;}
    71% {top: -9rem;width: 0;text-indent: 5px;}
    86% {top: -9rem;width: 285px;}
    95% {top: -9rem; width: 285px;}
    98% {top: -9rem;width: 0;text-indent: 5px;}
    100% {top: 0;width: 0;text-indent: 0;}}

/*  */
.div-animation-1{color: #fff;background-color: #F2EBDD;height: 400px;align-items: center;display: flex;justify-content: center;font-size: 2em;}
.div-animation-1.fixed{position: fixed !important;margin: 0 auto;top: 0px;right: 0;left: 0;padding: 0}
.div-animation-2{color: #fff;background-color: #EEEEFF;height: 400px;font-size: 2em;align-items: center;display: flex;justify-content: center;position: relative;z-index: 2;}
.div-animation-2.fixed{position: fixed !important;margin: 0 auto;top: 0;right: 0;left: 0}
.div-animation-3{color: #fff;background-color: #ffe4e1;height: 400px;font-size: 2em;align-items: center;display: flex;justify-content: center}
.parallax-container {position: relative;}
.parallax-container-fallback {position: relative;margin-top: 0;z-index: 4;background: white;}

/*  */
.pill{height: 300px;border-radius: 149px 149px 0 0;overflow: hidden;width: 200px;}
.pill img {height: 100%;transition: 0.5s ease-in-out all !important;width: 100%;}
.categories-cards h2{margin-bottom: 50px;}
.categories-cards{max-width: 1000px;margin: 100px auto;}
.categories{display: flex;justify-content: space-between;margin: auto;}
.margin-top{margin-top: 50px;}
.categories_link{transform: translateY(50%);opacity: 0;transition: all  1s;}
.categories_link_animate{transform: translateY(0%);opacity: 1;}
.animation-delay-1{transition-delay: 0.1s;}
.animation-delay-2{transition-delay: 0.2s;}
.animation-delay-3{transition-delay: 0.3s;}

/*  */
.g-container {position: relative;font-family:'Courier New',Courier, monospace;color: #fff;font-size: 4em;filter: contrast(15);z-index: 100;}
.color-container{background-color: rgb(58, 48, 106 );padding: 100px 0;position: relative;z-index: 10;}
.word {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);animation: switch 8s infinite ease-in-out;min-width: 100%;margin: auto;}
.word:nth-child(1) {animation-delay: -7s;}
.word:nth-child(2) {animation-delay: -6s;}
.word:nth-child(3) {animation-delay: -5s;}
@keyframes switch {
    0%,
    5%,
    100% {filter: blur(0px);opacity: 1;}
    50%,
    80% {filter: blur(180px);opacity: 0;}}

/*  */
.reveal {display: flex;height: 30vh;justify-content: center;align-items: center;text-align: center;background: #222;position: relative;color: #6ee1f5;font-size: 30px ;font-family: Raleway, sans-serif;letter-spacing: 3px;text-transform: uppercase;white-space: pre;}
.reveal span {opacity: 0;transform: scale(0);animation: fadeIn 2.4s forwards;}
.reveal::before,
.reveal::after {position: absolute;content: "";top: 0;bottom: 0;width: 2px;height: 100%;background: white;opacity: 0;transform: scale(0);}
.reveal::before {left: 50%;animation: slideLeft 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;}
.reveal::after {right: 50%;animation: slideRight 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;}
@keyframes fadeIn {
    to {opacity: 1;transform: scale(1);}}
@keyframes slideLeft {
    to {left: 38%;opacity: 1;transform: scale(0.3);}}
@keyframes slideRight {
    to {right: 38%;opacity: 1;transform: scale(0.3);}}

/*  */
.container-box {width: 100%;height: 30vh;background: #232323;display: flex;justify-content: center;align-items: center;overflow: hidden;}
.container-box .new-box {width: 250px;height: 250px;position: relative;display: flex;justify-content: center;flex-direction: column;}
.container-box .new-box .title-box{width: 100%;position: relative;display: flex;align-items: center;height: 50px;margin: 0 0 10px 0;}
.container-box .new-box .title-box .block {width: 0%;height: inherit;background: #ffb510;position: absolute;display: flex;}
.title-block-animation{animation: mainBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;}
.container-box .new-box .role .block {width: 0%;height: inherit;background: #e91e63;position: absolute;animation-delay: 2s;display: flex;}
.role-block-animation {
animation: secBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;}
.container-box .new-box .title-box h2 {font-family: 'Poppins';color: #fff;font-size: 32px;animation-delay: 1.6s;opacity: 0;display: flex;align-items: baseline;position: relative;margin: 20px 0 0 0;text-decoration: none;}
.box-header-animation{-webkit-animation: mainFadeIn 2s forwards;-o-animation: mainFadeIn 2s forwards;animation: mainFadeIn 2s forwards;}
.container-box .new-box .title-box h1 span {width: 0px;height: 0px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;background: #ffb510;animation-delay: 2s;margin-left: 5px;margin-top: -10px;position: absolute;bottom: 13px;right: -12px;}
.dot-animation{-webkit-animation: load 0.6s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;animation: popIn 0.8s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;}
.container-box .new-box .role {width: 100%;position: relative;display: flex;align-items: center;height: 30px;margin-top: -10px;}
.container-box .new-box .role p {animation-delay: 3.2s;opacity: 0;font-weight: 400;font-family: 'Lato';color: #fff;font-size: 12px;text-transform: uppercase;letter-spacing: 5px;}
.box-p-aniamtion{animation: secFadeIn 2s forwards;}
footer {width: 350px;height: 80px;background: #ffb510;position: absolute;right: 0;/* bottom: -80px; */display: flex;justify-content: center;align-items: center;animation-delay: 4s;}
.footer-animation{animation: top 0.8s forwards;}
footer span {display: flex;align-items: center;justify-content: center;font-size: 12px;color: #232323;font-family: 'Poppins';}
footer span i {margin-right: 25px;font-size: 22px;color: #232323;animation-delay: 4s;opacity: 0;animation: icon 2s forwards;}
@keyframes load {
    0% {transform: translateX(0);}
    100% {transform: translateX(-1.75rem);}}
@keyframes top {
    0% {opacity: 0;bottom: -80px;}
    100% {opacity: 1;bottom: -200px;}}
@keyframes icon {
    0% {opacity: 0;transform: scale(0);}
    50% {opacity: 1;transform: scale(1.3) rotate(-2deg);}
    100% {opacity: 1;bottom: 0px;}}
@keyframes mainBlock {
    0% {width: 0%;left: 0;}
    50% {width: 100%;left: 0;}
    100% {width: 0;left: 100%;}}
@keyframes secBlock {
    0% {width: 0%;left: 0;}
    50% {width: 100%;left: 0;}
    100% {width: 0;left: 100%;}}
@keyframes mainFadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}}
@keyframes popIn {
    0% {width: 0px;height: 0px;background: #e9d856;border: 0px solid #ddd;opacity: 0;}
    50% {width: 10px;height: 10px;background: #e9d856;opacity: 1;bottom: 45px;}
    65% {width: 7px;height: 7px;bottom: 0px;width: 15px;}
    80% {width: 10px;height: 10px;bottom: 20px;}
    100% {width: 7px;height: 7px;background: #e9d856;border: 0px solid #222;bottom: 13px;}}
@keyframes secFadeIn {
    0% {opacity: 0;}
    100% {opacity: 0.5;}}

/*  */
.services{z-index: 100;position: relative;background-color: #fff;padding: 50px;overflow-x: hidden;}
.services-title{text-decoration: none !important;color: orange;text-align: start;opacity: 0;transition: all 1.5s;transform: translateY(100%);}
.services hr{width: 100%;}
.services h3{margin-bottom: 30px;font-size: 20px;color: orange;}
.case-study{display: flex;align-items: center;gap: 20px;margin: 50px 0;}
.case-study img{max-width: 300px;}
.case-study-subsection{text-align: start;}
.services-grid{display: grid;grid-template-columns: 30% auto;}
.case-study-1 {opacity: 0;transition: all 1.5s;transform: translateX(20%);}
.case-study-2 {opacity: 0;transition: all 1.5s;transform: translateX(-20%);}
.case-study-animate {opacity: 1;transform: translateX(0%);}
.case-study-animate-2 {opacity: 1;transform: translateX(0%);}
.case-study-animate-title{opacity: 1;transform: translateY(0%);}
/*  */

/*  */
/*  */
.articles_grid{display: grid;grid-template-columns: 49% 44%;grid-column-gap: 5%;position: relative;z-index: 10;background-color: #ffff;margin: 0 auto ;padding: 100px 10%;font-family: 'GEMedium', Tahoma;}
.articles_grid img{width: 100%; object-fit: contain;}
.articles_subgrid_container{position: relative;width: 100%;height: 850px;display: inline-block;}
.articles_container{display: flex;}
.articles_subgrid_item{margin:0 0 30px 0;text-align: right;height: fit-content;}
.articles_subgrid_item a{color: #E03C4A;border: 2px solid #E03C4A;display: inline-block;border-radius: 2px;line-height: 20px;padding: 0 15px;margin: 15px 0;font-size: 14px;}
.fixed_container{position: fixed !important;width: 35.2% !important;top: 15px}
.pinned{position: absolute !important;bottom: -15px;left: 0;}
.articles_grid_item:first-child{margin: 0 20px 0 0;}
.articles_grid_item p{text-align: right;margin: 0 0 5px 0;font-weight: bold;}
.articles_subgrid{width: 100%;height: 400px;position: relative;}
.articles_subgrid img{object-fit: cover;height: 100%;}
.articles_subgrid_item .caption,
.articles_subgrid_item date{color: grey;font-size: 13px;font-weight: bold;}
.articles_subgrid button{background-color: #ffff;width: 30px;height: 30px;border-radius: 20px;}
.image_captions{display: flex;justify-content: space-between;position: absolute;bottom: 30px;margin: 0 40px;text-align: right;color: #ffff;}
.image_captions div{max-width: 80%;}
.image_captions h2{font-size: 22px;}
.image_captions a{background-color: #ffff;display: inline-block;border-radius: 2px;line-height: 20px;padding: 0 15px;margin: 0 0 15px 0;font-size: 14px;color: #000;}
.articles_subgrid_item button{background-color: #000;width: 30px;height: 30px;border-radius: 20px;display: inline-block;}
.articles_subgrid_item button i{color: #ffff;}
.articles_subgrid_item .play_btn{display: flex;justify-content: space-between;align-items: baseline;}


/*  */

/* social media buttons */
/* option 1 */
.height250 {height: 250px;}
.badge-info {background-color: rgba(23, 160, 184, 0.17);color: #17a2b8;}
.section-title .badge { margin: 0 0 8px;}
.badge {border-radius: 100px;font-size: 12px;font-stretch: normal;font-style: normal;font-weight: 500;
letter-spacing: 1px;line-height: normal;padding: 4px 14px;text-transform: uppercase;}
.social-overlap {position: absolute;width: 100%;transform: translateY(-50%);}
.justify-content-center { -ms-flex-pack: center !important;justify-content: center !important;}
.justify-content-center {-webkit-box-pack: center !important;-ms-flex-pack: center !important;justify-content: center !important;}
.social-bar {display: flex;border-radius: 10px;background: #fff;box-shadow: 0 0 60px rgba(93, 70, 232, 0.15);border: 1px solid#ebe9e9;}
.iconpad {padding: 12px 0;width: 100%;}
.mb-3,
.my-3 {margin-bottom: 1rem !important;}
.process-scetion .slider-nav-item {position: relative;flex-grow: 0;flex-shrink: 0;border-radius: 50%;text-align: center;background: #fff;cursor: pointer;transition: all .4s ease;}
.socialicons a {border-radius: 50px;color: #3f345f;display: inline-block;line-height: 52px;height: 50px;width: 50px;box-shadow: 0 5px 25px rgba(93, 70, 232, 0.15);margin: 15px 15px;font-size: 22px;}
.trial-block a {text-decoration: none !important;color: #3f345f;transition: all 0.3s ease 0s;}
.slider-nav-item:before {position: absolute;content: "";height: calc(100% + 16px);width: calc(100% + 16px);top: -8px;left: -8px;border-radius: 50%;border: 1px solid rgba(132, 132, 164, 0.35);animation: 1.5s linear 0s normal none infinite focuse;}
.slider-nav { display: flex;}
.process-scetion .slider-nav-item {position: relative;flex-grow: 0;flex-shrink: 0;border-radius: 50%;text-align: center;background: #fff;cursor: pointer;transition: all .4s ease;}
.slider-nav-item:before {position: absolute;content: "";height: calc(100% + 16px);width: calc(100% + 16px);top: -8px;left: -8px;border-radius: 50%;border: 1px solid rgba(132, 132, 164, 0.35);animation: 1.5s linear 0s normal none infinite focuse;}
.process-scetion .slider-nav-item:nth-child(2) {color: #40beff;}
.process-scetion .slider-nav-item:nth-child(3) {color: #311f9b;}
.process-scetion .slider-nav-item:nth-child(4) {color: #ff9259;}
.process-scetion .slider-nav-item:nth-child(5) {color: #38385f;}
.process-scetion .slider-nav-item:after {position: absolute;top: 50%;left: 100%;height: 2px;content: '';width: 100%;background: url(http://demo.themenio.com/ico/assets/images/line.png) repeat 0 0;z-index: 0;animation: slide 1s linear infinite;}
.process-scetion .slider-nav-item:last-child:after {display: none;}
.process-scetion .slider-nav-item .ikon {font-size: 50px;line-height: 80px;}
.process-scetion .slider-nav-item.active:before {position: absolute;content: "";height: calc(100% + 16px);width: calc(100% + 16px);top: -8px;left: -8px;border-radius: 50%;border: 1px solid rgba(132, 132, 164, 0.35);animation: 1.5s linear 0s normal none infinite focuse;}
@keyframes focuse {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    75% {
        transform: scale(1.2);
        opacity: 0;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes slide {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 40px 0;
    }
}
.slider-nav-item:after {position: absolute;top: 50%;left: 100%;height: 2px;content: '';width: 100%;background: url(https://1.bp.blogspot.com/--Btu5p654jU/XYmrVd5IcYI/AAAAAAAATQ0/4bX8aZyFBgApbJUf90KrpCfO6RvAaZ6LgCLcBGAsYHQ/s1600/line.png) repeat 0 0;z-index: 0;animation: slide 1s linear infinite;}
.mt100 {margin-top: 100px;}
@-webkit-keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
.social-bar a:hover i {-webkit-animation: jello-horizontal 0.9s both;animation: jello-horizontal 0.9s both;}
.social_media {background: white;z-index: 100;position: relative;}

/* option 2 */
.social-media-list{justify-content: center;display: flex}
.social-media-list li a {display: block;position: relative;width: 70px;height: 70px;line-height: 75px;font-size: 25px;text-align: center;text-decoration: none;color: #404040;margin: 0 30px;transition: .5s;}
.social-media-list li a span {position: absolute;transition: transform .5s;}
.social-media-list li a span:nth-child(1),
.social-media-list li a span:nth-child(3) {width: 100%;height: 3px;background: #404040;}
.social-media-list li a span:nth-child(1) {top: 0;left: 0;transform-origin: right;}
.social-media-list li a:hover span:nth-child(1) {transform: scaleX(0);transform-origin: left;transition: transform .5s;}
.social-media-list li a span:nth-child(3) {bottom: 0;left: 0;transform-origin: left;}
.social-media-list li a:hover span:nth-child(3) {transform: scaleX(0);transform-origin: right;transition: transform .5s;}
.social-media-list li a span:nth-child(2),
.social-media-list li a span:nth-child(4) {width: 3px;height: 100%;background: #404040;}
.social-media-list li a span:nth-child(2) {top: 0;left: 0;transform: scale(0);transform-origin: bottom;}
.social-media-list li a:hover span:nth-child(2) {transform: scale(1);transform-origin: top;transition: transform .5s;}
.social-media-list li a span:nth-child(4) {top: 0;right: 0;transform: scale(0);transform-origin: top;}
.social-media-list li a:hover span:nth-child(4) {transform: scale(1);transform-origin: bottom;transition: transform .5s;}
.facebook:hover {color: #3b5998;}
.facebook:hover span {background: #3b5998;}
.twitter:hover {color: #1da1f2;}
.twitter:hover span {background: #1da1f2;}
.instagram:hover {color: #c32aa3;}
.instagram:hover span {background: #c32aa3;}
.google:hover {color: #dd4b39;}
.google:hover span {background: #dd4b39;}
.social-media-list li a .twitter {color: #1da1f2;}
.social-media-list li a:hover:nth-child(3) {color: #c32aa3;}
.social-media-list li a:hover:nth-child(4) {color: #dd4b39;}

/* option 3 */
.social-icons-btn {display: flex;justify-content: center;margin: 100px 0;}
.icons { width: 50px;height: 50px;font-size: 1.5rem;font-weight: 500;text-decoration: none;background: #111;margin: 1rem;display: flex;justify-content: center;align-items: center;border-radius: 50%;
box-shadow:0 2px 2px #d1d1d1;color: #fff;cursor: pointer;transition:all 0.15s ease;}
.twitter-2:hover { background: #00ECEE;}
.facebook-2:hover {background: #4267B2;}
.instagram-2:hover {background-image:linear-gradient(#8a3ab9, #e95950, #bc2a8d, #fccc63);}
.linkedin-2:hover {background: #0A66C2;}

/* option 4 */
.option-4 {margin: 0;height: 30vh;background: #2c698d;display: flex;justify-content: center;align-items: center;}
.option-4 {display: flex;}
.option-4 li {margin: 0 5px;height: 50px;width: 50px;color: #bae8e8;border: 2px solid #bae8e8;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 20px;transition: all ease 0.3s;}
.option-4 li:hover {color: #2c698d;background: #bae8e8;cursor: pointer;}

/* option 5 */
.social-buttons {border-radius: 5px;display: flex;flex-wrap: wrap;justify-content: center;background-color: #ddd;padding: 50px 0;}
.social-buttons__button {margin: 5px;}
.social-button {border-radius: 50%;position: relative;display: flex;justify-content: center;align-items: center;outline: none;width: 70px;height: 70px;text-decoration: none;}
.social-icons {width: 100%;}
.social-button__inner {font-size: 2.3rem;position: relative;display: flex;align-items: center;justify-content: center;width: calc(100% - 2px);height: calc(100% - 2px);border-radius: 100%;background: #fff;text-align: center;}
.social-button i,
.social-button svg {position: relative;z-index: 1;transition: 0.3s;}
.social-button i {font-size: 28px;}
.social-button svg {height: 40%;width: 40%;}
.social-button::after {content: "";position: absolute;top: 0;left: 50%;display: block;width: 0;height: 0;border-radius: 100%;transition: 0.3s;}
.social-button:focus,
.social-button:hover {color: #fff;text-decoration: none;}
.social-button:focus::after,
.social-button:hover::after {width: 100%;height: 100%;margin-left: -50%;}
.social-button--facebook {color: #3b5999;}
.social-button--facebook::after {background: #3b5999;}
.social-button--linkedin {color: #0077b5;}
.social-button--linkedin::after {background: #0077b5;}
.social-button--github {color: #6e5494;}
.social-button--github::after {background: #6e5494;}
.social-button--codepen {color: #212121;}
.social-button--codepen::after {background: #212121;}
.social-button--instagram {color: #e4405f;}
.social-button--instagram::after {background: #e4405f;}

/* option 6 */
.icons-container {height: 30vh;width: 100%;display: flex;align-items: center;justify-content: center;background-color: #f2f2fe;}
.social-icon a {display: inline-flex;width: 50px;height: 50px;align-items: center;justify-content: center;text-decoration: none;font-size: 30px;margin: 10px;box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);background-size: 100% 200%;background-position: 0% 5%;transition: background-position 0.5s, color 0.5s;}
.social-icon a:nth-child(1) {color: #1976d3;background-image: linear-gradient(#fff 50%, #1976d3 50%);}
.social-icon a:nth-child(2) {color: #db6f44;background-image: linear-gradient(#fff 50%, #db6f44 50%);}
.social-icon a:nth-child(3) {color: #000;background-image: linear-gradient(#fff 50%, #000 50%);}
.social-icon a:nth-child(4) {color: #03a9f5;background-image: linear-gradient(#fff 50%, #03a9f5 50%);}
.social-icon a:hover {background-position: 0% 100%;color: #fff;}

/* option 7 */
.icon-social {display: flex;justify-content: center;align-items: center;padding: 50px 0;}
.social { margin: 20px;height: 80px;width: 80px;border-radius: 40px;box-shadow: -5px 5px 15px #333;text-align: center;transition: all 0.3s;overflow: hidden;}
.social:hover {cursor: pointer;transition: all 0.3s;}
.socialIcon {text-decoration: none;color: #e7e7e7;padding: 22px;margin-left: -18px;font-size: 35px;}
.socialIcon:hover {animation: slide 1s ease;}
.social>a {padding: 20px;}
.social:nth-child(1) {background: #3b5999;}
.social:nth-child(2) {background: #38A1F3;}
.social:nth-child(3) {background: #db4a39;}
.social:nth-child(4) {background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);}
.social:nth-child(5) {background: #0077B5;}
@keyframes slide {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(20px);
        opacity: 0;
    }

    51% {
        transform: translateX(-20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
    }
}

/* option 8 */
.container_social {padding-top: 30px;min-height: 100%;text-align: center;background: linear-gradient(0deg, rgba(34, 195, 104, 1) 0%, rgba(45, 77, 253, 1) 100%);}
.social_buttons {display: inline-block;background: rgba(256, 256, 256, 0.5);padding: 20px;padding-bottom: 5px;border-radius: 10px;text-align: center;margin: 20px 10px;box-shadow: 0px 0px 32px -7px #00199f;}
.social-margin {margin-right: 15px;}
.social_icon {margin-bottom: 15px;box-sizing: border-box;-moz-border-radius: 138px;-webkit-border-radius: 138px;border-radius: 138px;border: 5px solid;text-align: center;width: 50px;height: 50px;display: inline-block;line-height: 1px;padding-top: 11px;transition: all 0.5s;}
.social_icon:hover {transform: rotate(360deg)scale(1.3);}
.facebook-icon {font-size: 22px;padding-top: 9px;border-color: #3b5998;background-color: #3b5998;color: #ffffff;}
.facebook-icon:hover {background-color: #ffffff;color: #3b5998;}
.twitter-icon{font-size: 22px;padding-top: 10px;padding-left: 2px;border-color: #55acee;background-color: #55acee;color: #ffffff;}
.twitter-icon:hover {background-color: #ffffff;color: #55acee;}
.google-plus {font-size: 22px;padding-top: 9px;padding-left: 2px;background-color: #dd4b39;color: #ffffff;border-color: #dd4b39;}
.google-plus :hover {background-color: #ffffff;color: #dd4b39;}
.linkedin {font-size: 24px;padding-top: 8px;padding-left: 1px;background-color: #0976b4;color: #ffffff;border-color: #0976b4;}
.linkedin:hover {background-color: #ffffff;color: #0976b4;}
.pinterest {font-size: 22px;padding-top: 9px;background-color: #cb2027;color: #ffffff;border-color: #cb2027;}
.pinterest:hover {background-color: #ffffff;color: #cb2027;}
.github {font-size: 22px;padding-top: 9px;background-color: #4183c4;color: #ffffff;border-color: #4183c4;}
.github:hover {background-color: #ffffff;color: #4183c4;}
.youtube {font-size: 22px;padding-top: 9px;padding-left: 0px;background-color: #bb0000;color: #ffffff;border-color: #bb0000;}
.youtube:hover { background-color: #ffffff; color: #bb0000;}

/* input animation */
/* option 1 */
.form__container {font-family: Arial, Helvetica, sans-serif;max-width: 400px;padding: 3rem;margin: 50px auto 0 auto;}
.form_group {position: relative;margin-bottom: 30px;}
.form__input {position: realtive;display: block;width: 100%;padding: 10px;border: 1px solid #f3f3f3;border-radius: 10px;outline: none;box-shadow: 0 16px 16px -5px rgba(0, 0, 0, .1);background: transparent;}
.form__input:focus {border: 1px solid #5294F7;}
.form__label {position: absolute;top: 9px;left: 15px;transition: all 300ms ease-in-out;pointer-events: none;}
.form__input:focus~label,
.form__input:not(:placeholder-shown)~label {color: #5294F7;top: -20px;left: 0;font-size: 14px;z-index: 1;}
.form__input::-webkit-input-placeholder {color: transparent;}
.form__input::-moz-placeholder {color: transparent;}

/* option 2 */
.form-main {display: flex;justify-content: center;}
.form-main .main-wrapper {padding: 45px;width: 40%;box-shadow: 0 0 5px 5px #000 20;backdrop-filter: blur(5px);background-color: #fff 85;}
.form-main .main-wrapper .form-head {font-size: 30px;;margin: 0px 0 25px;}
.form-main .main-wrapper .form-wrapper {display: flex;flex-direction: column;gap: 15px;}
.form-main .main-wrapper .form-wrapper .form-card {position: relative;width: 100%;}
.form-main .main-wrapper .form-wrapper .form-card .form-input {padding: 20px 25px 15px;width: 100%;border: 1px solid black;border-radius: 5px;background: transparent;outline: none;font-size: 20px;line-height: 30px;font-weight: 400;box-sizing: border-box;}
.form-main .main-wrapper .form-wrapper .form-card .form-input:valid,
.form-main .main-wrapper .form-wrapper .form-card .form-input:focus {border: 1px solid gray;}
.form-main .main-wrapper .form-wrapper .form-card .form-input:valid~.form-label,
.form-main .main-wrapper .form-wrapper .form-card .form-input:focus~.form-label {color: gray;top: 30%;transform: translateY(-70%);font-size: 13px;line-height: 23px;}
.form-main .main-wrapper .form-wrapper .form-card .form-input:-webkit-autofill,
.form-main .main-wrapper .form-wrapper .form-card .form-input:-webkit-autofill:hover,
.form-main .main-wrapper .form-wrapper .form-card .form-input:-webkit-autofill:focus,
.form-main .main-wrapper .form-wrapper .form-card .form-input:-webkit-autofill:active {transition: background-color 9999s ease-in-out 0s;}
.form-main .main-wrapper .form-wrapper .form-card .form-input::-webkit-outer-spin-button,
.form-main .main-wrapper .form-wrapper .form-card .form-input::-webkit-inner-spin-button {
-webkit-appearance: none;margin: 0;}
.form-main .main-wrapper .form-wrapper .form-card .form-label {position: absolute;left: 25px;top: 50%;transform: translateY(-50%);pointer-events: none;transition: 0.3s;margin: 0;font-size: 18px;line-height: 28px;font-weight: 500;}
.form-main .main-wrapper .form-wrapper .form-card .form-textarea {padding: 20px 25px 15px;width: 100%;border: 1px solid black;border-radius: 5px;background: transparent;outline: none;font-size: 20px;line-height: 30px;font-weight: 400;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;resize: none;box-sizing: border-box;}
.form-main .main-wrapper .form-wrapper .form-card .form-textarea:valid,
.form-main .main-wrapper .form-wrapper .form-card .form-textarea:focus {border: 1px solid gray;}
.form-main .main-wrapper .form-wrapper .form-card .form-textarea:valid~.form-textarea-label,
.form-main .main-wrapper .form-wrapper .form-card .form-textarea:focus~.form-textarea-label {color: gray;top: 18%;transform: translateY(-82%);font-size: 13px;line-height: 23px;}
.form-main .main-wrapper .form-wrapper .form-card .form-textarea:-webkit-autofill,
.form-main .main-wrapper .form-wrapper .form-card .form-textarea:-webkit-autofill:hover,
.form-main .main-wrapper .form-wrapper .form-card .form-textarea:-webkit-autofill:focus,
.form-main .main-wrapper .form-wrapper .form-card .form-textarea:-webkit-autofill:active { transition: background-color 9999s ease-in-out 0s;}
.form-main .main-wrapper .form-wrapper .form-card .form-textarea-label {position: absolute;left: 25px;top: 30%;transform: translateY(-70%);pointer-events: none;transition: 0.3s;margin: 0;font-size: 18px;
line-height: 28px;font-weight: 500;}
.btn-wrap {display: flex;justify-content: center;align-items: center;padding: 16px 0 0;}
.btn-wrap button {padding: 0 32px;font-size: 18px;line-height: 48px;border: 1px solid transparent;font-weight: 600;border-radius: 6px;transition: all 0.5s ease;cursor: pointer;box-shadow: 0 0 5px 5px #000 20;}
.btn-wrap button:hover { border: 1px solid #000;background: transparent;}
#container {grid-area: main;align-self: center;justify-self: center }

/* option 3 */
.holder h2 {font-family: 'Damion', cursive;font-weight: 400;color: #4caf50;font-size: 35px;text-align: center;position: relative;}
.holder h2:before {position: absolute;content: '';width: 100%;left: 0;top: 22px;background: #4caf50; height: 1px;}
.holder h2 i {font-style: normal;background: #fff;position: relative; padding: 10px;}
:focus {outline: none;}
.holder input[type="text"] {font: 15px/24px 'Muli', sans-serif;color: #333;width: 100%;box-sizing: border-box;letter-spacing: 1px;}
:focus {outline: none;}
.col-3 {float: left;width: 27.33%;margin: 40px 3%;position: relative;text-align: left;}
.holder input[type="text"] {font: 15px/24px "Lato", Arial, sans-serif;color: #333;width: 100%;box-sizing: border-box;letter-spacing: 1px;}
.effect-18 {border: 0;padding: 4px 0;border-bottom: 1px solid #ccc;background-color: transparent;}
.effect-18~.focus-border {position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;z-index: 99;}
.effect-18~.focus-border:before,
.effect-18~.focus-border:after {content: "";position: absolute;bottom: 0;left: 0;width: 0;height: 100%;background-color: #4caf50;transition: 0.4s;}
.effect-18~.focus-border:after {left: auto;right: 0;}
.effect-18:focus~.focus-border:before,
.effect-18:focus~.focus-border:after,
.has-content.effect-18~.focus-border:before,
.has-content.effect-18~.focus-border:after {width: 50%;transition: 0.4s;}
.effect-18~label {position: absolute;left: 0;width: 100%;top: 9px;color: #aaa;transition: 0.3s;z-index: -1;letter-spacing: 0.5px;}
.effect-18:focus~label,
.has-content.effect-18~label {top: -16px;font-size: 12px;color: #4caf50;transition: 0.3s;}
.effect-19,
.effect-20,
.effect-21 {border: 1px solid #ccc;padding: 7px 14px;transition: 0.4s;background: transparent;}
.effect-19~.focus-border:before,
.effect-19~.focus-border:after {content: "";position: absolute;top: -1px;left: 50%;width: 0;height: 2px;background-color: #4caf50;transition: 0.4s;}
.effect-19~.focus-border:after {top: auto;bottom: 0;}
.effect-19~.focus-border i:before,
.effect-19~.focus-border i:after {content: "";position: absolute;top: 50%;left: 0;width: 2px;height: 0;background-color: #4caf50;transition: 0.6s;}
.effect-19~.focus-border i:after {left: auto;right: 0;}
.effect-19:focus~.focus-border:before,
.effect-19:focus~.focus-border:after,
.has-content.effect-19~.focus-border:before,
.has-content.effect-19~.focus-border:after {left: 0;width: 100%;transition: 0.4s;}
.effect-19:focus~.focus-border i:before,
.effect-19:focus~.focus-border i:after,
.has-content.effect-19~.focus-border i:before,
.has-content.effect-19~.focus-border i:after {top: -1px;height: 100%;transition: 0.6s;}
.effect-19~label {position: absolute;left: 14px;width: 100%;top: 10px;color: #aaa;transition: 0.3s;z-index: -1;letter-spacing: 0.5px;}
.effect-19:focus~label,
.has-content.effect-19~label {top: -18px;left: 0;font-size: 12px;color: #4caf50;transition: 0.3s;}
.effect-20~.focus-border:before,
.effect-20~.focus-border:after {content: "";position: absolute;top: 0;left: 0;width: 0;height: 2px;background-color: #4caf50;transition: 0.3s;}
.effect-20~.focus-border:after {top: auto;bottom: 0;left: auto;right: 0;}
.effect-20~.focus-border i:before,
.effect-20~.focus-border i:after {content: "";position: absolute;top: 0;left: 0;width: 2px;height: 0;background-color: #4caf50;transition: 0.4s;}
.effect-20~.focus-border i:after {left: auto;right: 0;top: auto;bottom: 0;}
.effect-20:focus~.focus-border:before,
.effect-20:focus~.focus-border:after,
.has-content.effect-20~.focus-border:before,
.has-content.effect-20~.focus-border:after {width: 100%;transition: 0.3s;}
.effect-20:focus~.focus-border i:before,
.effect-20:focus~.focus-border i:after,
.has-content.effect-20~.focus-border i:before,
.has-content.effect-20~.focus-border i:after {height: 100%;transition: 0.4s;}
.effect-20~label {position: absolute;left: 14px;width: 100%;top: 10px;color: #aaa;transition: 0.3s;z-index: -1;letter-spacing: 0.5px;}
.effect-20:focus~label,
.has-content.effect-20~label {top: -18px;left: 0;font-size: 12px;color: #4caf50;transition: 0.3s;}
.effect-21~.focus-border:before,
.effect-21~.focus-border:after { content: "";position: absolute;top: 0;
right: 0;width: 0;height: 2px;background-color: #4caf50;transition: 0.2s;transition-delay: 0.2s;}
.effect-21~.focus-border:after {top: auto;bottom: 0;right: auto;left: 0;transition-delay: 0.6s;}
.effect-21~.focus-border i:before,
.effect-21~.focus-border i:after {content: "";position: absolute;top: 0;left: 0;width: 2px;height: 0;background-color: #4caf50;transition: 0.2s;}
.input-hr{border: none;height: 1px;background-color: #4caf50;width: 100% !important;}
.effect-21~.focus-border i:after {left: auto;right: 0;top: auto;bottom: 0;transition-delay: 0.4s;}
.effect-21:focus~.focus-border:before,
.effect-21:focus~.focus-border:after,
.has-content.effect-21~.focus-border:before,
.has-content.effect-21~.focus-border:after {width: 100%;transition: 0.2s;transition-delay: 0.6s;}
.effect-21:focus~.focus-border:after,
.has-content.effect-21~.focus-border:after {transition-delay: 0.2s;}
.effect-21:focus~.focus-border i:before,
.effect-21:focus~.focus-border i:after,
.has-content.effect-21~.focus-border i:before,
.has-content.effect-21~.focus-border i:after {height: 100%;transition: 0.2s;}
.effect-21:focus~.focus-border i:after,
.has-conten.effect-21~.focus-border i:after {transition-delay: 0.4s;}
.effect-21~label {position: absolute;left: 14px;width: 100%;top: 10px;color: #aaa;transition: 0.3s;z-index: -1;letter-spacing: 0.5px;}
.effect-21:focus~label,
.has-content.effect-21~label {top: -18px;left: 0;font-size: 12px;color: #4caf50;transition: 0.3s;}
.effect-22{border: 0;padding: 7px 15px;border: 1px solid #ccc;position: relative;background: transparent;}
.effect-22~.focus-bg {position: absolute;left: 0;top: 0;width: 0;height: 100%;background-color: transparent;transition: 0.4s;z-index: -1;}
.effect-22:focus~.focus-bg,
.has-content.effect-22~.focus-bg {transition: 0.4s;width: 100%;background-color: #ededed;}
.effect-22~label {position: absolute;left: 14px;width: 100%;top: 10px;color: #aaa;transition: 0.3s;z-index: -1;letter-spacing: 0.5px;}
.effect-22:focus~label,
.has-content.effect-22~label {top: -18px;left: 0;font-size: 12px;color: #333;transition: 0.3s;}

/*  */
.ha-screen-reader {width: var(--ha-screen-reader-width, 1px);height: var(--ha-screen-reader-height, 1px);padding: var(--ha-screen-reader-padding, 0);border: var(--ha-screen-reader-border, none);position: var(--ha-screen-reader-position, absolute);clip: var(--ha-screen-reader-clip, rect(1px, 1px, 1px, 1px));overflow: var(--ha-screen-reader-overflow, hidden);}
.field__input {--uiFieldPlaceholderColor: var(--fieldPlaceholderColor, #767676);background-color: transparent;border-radius: 0;border: none;
-webkit-appearance: none;-moz-appearance: none;font-family: inherit;font-size: inherit;}
.field__input:focus::-webkit-input-placeholder {color: var(--uiFieldPlaceholderColor);}
.field__input:focus::-moz-placeholder {color: var(--uiFieldPlaceholderColor);}
.field { --uiFieldBorderWidth: var(--fieldBorderWidth, 2px);
    --uiFieldPaddingRight: var(--fieldPaddingRight, 1rem);
    --uiFieldPaddingLeft: var(--fieldPaddingLeft, 1rem);
    --uiFieldBorderColorActive: var(--fieldBorderColorActive, rgba(22, 22, 22, 1));
    display: var(--fieldDisplay, inline-flex);position: relative;font-size: var(--fieldFontSize, 1rem)}
.field__input {box-sizing: border-box;width: var(--fieldWidth, 100%);
height: var(--fieldHeight, 3rem);padding: var(--fieldPaddingTop, 1.25rem) var(--uiFieldPaddingRight) var(--fieldPaddingBottom, .5rem) var(--uiFieldPaddingLeft);
border-bottom: var(--uiFieldBorderWidth) solid var(--fieldBorderColor, rgba(0, 0, 0, .25));}
.field__input:focus {outline: none;}
.field__input::-webkit-input-placeholder {opacity: 0;transition: opacity .2s ease-out;}
.field__input::-moz-placeholder {opacity: 0;transition: opacity .2s ease-out;}
.field__input:focus::-webkit-input-placeholder {opacity: 1;transition-delay: .2s;}
.field__input:focus::-moz-placeholder {opacity: 1;transition-delay: .2s;}
.field__label-wrap {box-sizing: border-box;pointer-events: none;cursor: text;position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.field__label-wrap::after {content: "";box-sizing: border-box;width: 100%;height: 0;opacity: 0;position: absolute;bottom: 0;left: 0;}
.field__input:focus~.field__label-wrap::after {opacity: 1;}
.field__label {position: absolute;left: var(--uiFieldPaddingLeft);top: calc(50% - .5em);line-height: 1;font-size: var(--fieldHintFontSize, inherit);transition: top .2s cubic-bezier(0.9, -0.15, 0.1, 1.15), opacity .2s ease-out, font-size .2s ease-out;}
.field__input:focus~.field__label-wrap .field__label,
.field__input:not(:placeholder-shown)~.field__label-wrap .field__label {
    --fieldHintFontSize: var(--fieldHintFontSizeFocused, .75rem);top: var(--fieldHintTopHover, .25rem);}
.field_v3 .field__label-wrap::after {border: var(--uiFieldBorderWidth) solid var(--uiFieldBorderColorActive);transition: height .2s ease-out, opacity .2s ease-out;}
.field_v3 .field__input:focus~.field__label-wrap::after {height: 100%;}
.field {--fieldBorderColor: #D1C4E9;--fieldBorderColorActive: #673AB7;}
.page {box-sizing: border-box;width: 100%;max-width: 480px;margin: auto;padding: 1rem;display: grid;grid-gap: 30px;}

/*  */
.input-group {margin-bottom: 20px;position: relative;width: 30%;margin: 50px auto;}
.input-group__label {display: block;position: absolute;top: 0;line-height: 40px;color: #aaa;left: 5px;padding: 0 5px;transition: line-height 200ms ease-in-out, font-size 200ms ease-in-out, top 200ms ease-in-out;pointer-events: none;}
.input-group__input {width: 100%;height: 40px;border: 1px solid #ddd;border-radius: 3px;padding: 0 10px;margin-bottom: 50px;}
.input-group__input:not(:placeholder-shown)+label,
.input-group__input:focus+label {background-color: white;line-height: 10px;opacity: 1;font-size: 10px;top: -5px;}
.input-group__input:focus {outline: none;border: 1px solid #0086e4;}
.input-group__input:focus+label {color: #0086e4;}

/*  */
.row-input {margin: 0 auto;padding: 60px 30px;background: #032429;position: relative;z-index: 1;text-align: center;}
.row-input:before {position: absolute;content: "";display: block;top: 0;left: -5000px;height: 100%;z-index: -1;background: inherit;}
.row-input:first-child {padding: 40px 30px;}
.row-input{background: #134a46;}
.row-input span {position: relative;display: inline-block;margin: 30px 10px;}
.basic-slide {display: inline-block;width: 215px;padding: 10px 0 10px 15px;font-family: "Open Sans", sans;font-weight: 400;color: #377d6a;background: #efefef;border: 0;border-radius: 3px;outline: 0;text-indent: 70px;transition: all 0.3s ease-in-out;}
.basic-slide::-webkit-input-placeholder {color: #efefef;text-indent: 0;font-weight: 300;}
.basic-slide+label {display: inline-block;position: absolute;top: 0;left: 0;height: 100%;padding: 6px 15px;text-shadow: 0 1px 0 rgba(19, 74, 70, .4);background: #7ab893;transition: all 0.3s ease-in-out;border-top-left-radius: 3px;border-bottom-left-radius: 3px;color: #fff;}
.basic-slide:focus,
.basic-slide:active {color: #377d6a;text-indent: 0;background: #fff;border-top-left-radius: 0;border-bottom-left-radius: 0;}
.basic-slide:focus::-webkit-input-placeholder,
.basic-slide:active::-webkit-input-placeholder {color: #aaa;}
.basic-slide:focus+label,
.basic-slide:active+label {transform: translateX(-100%);}

/*  */
.checkbox-animate {display: flex;justify-content: center;align-items: center;width: 100%;height: 20vh;font-family: arial;font-size: 25px;}
.checkbox-animate label {position: relative;cursor: pointer;}
.checkbox-animate label input {opacity: 0;position: absolute;left: 0;top: 0;z-index: -1;}
.input-check {display: inline-block;width: 30px;height: 30px;border-radius: 4px;border: 2px solid #ccc;position: relative;top: 6px;margin-right: 7px;transition: 0.4s;}
.input-check::before {content: '';display: inline-block;width: 15px;height: 6px;border-bottom: 4px solid #fff;border-left: 4px solid #fff;transform: scale(0) rotate(-45deg);position: absolute;top: 6px;left: 4px;transition: 0.4s;}
.checkbox-animate label input:checked~.input-check {background-color: #06b1c5;border-color: #06b1c5;animation-name: input-animate;animation-duration: 0.7s;}
.checkbox-animate label input:checked~.input-check::before {transform: scale(1) rotate(-45deg);animation-name: input-check;animation-duration: 0.2s;animation-delay: 0.3s;}

@keyframes input-animate {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.3, 0.7);
    }

    55% {
        transform: scale(1);
    }

    70% {
        transform: scale(1.2, 0.8);
    }

    80% {
        transform: scale(1);
    }

    90% {
        transform: scale(1.1, 0.9);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes input-check {
    0% {
        transform: scale(0) rotate(-45deg);
    }

    100% {
        transform: scale(1) rotate(-45deg);
    }
}

/* page speed */
section.page-speed .main-container{max-width: 1200px;margin: auto;padding: 0 0 50px 0;}
section.page-speed .main-container p{font-size: 20px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 30px;text-align: left;}
section.page-speed ul{text-align: left;}
section.page-speed ul li{list-style-type: decimal;font-size: 20px;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 30px;list-style-position: inside;}
section.page-speed h2{text-align: left;margin: 25px 0;}
section.page-speed ul.speed-page-submenu li{list-style-type:circle !important}
section.page-speed .page-speed-images{max-width: 100%;max-height: 20rem;}
section.page-speed h3{margin: 20px 0;font-size: 20px;}
xmp{color: #c50000;font-weight: bold;}

/* media querries */
@media screen and (max-width : 960px) {
    header{box-shadow: #cecece 0px 4px 12px;}
    .header-container{margin: 0 auto 20px auto;}
    .articles_page_grid {display: block;}
    .lists{display: none;}
    nav{padding: 30px 0;}
    section.page-speed h1,
    .animation-title{font-size: 20px;}
    .mobile-menu{position: absolute;width: 100%;background-color: #fff;top: 61px;padding: 0;height: 100%;z-index: 3;}
    .mobile-menu ul li{display: block;height: 60px;border-bottom: 1px solid #cecece;display: flex;align-items: center;justify-content: center;background-color: #fff;z-index: 10;position: relative;}

    /* menu */
    .top-nav {display: flex;}
    .top-nav {align-items: center;justify-content: space-between;color: rgb(208, 205, 205);}
    .top-nav li {width: fit-content;}
    .menu-button-container {display: none;height: 100%;width: 30px;cursor: pointer;flex-direction: column;justify-content: center;align-items: center;}
    #menu-toggle {display: none}
    .menu-button,
    .menu-button::before,
    .menu-button::after {display: block;background-color: #1B3364;position: absolute;height: 2.5px;width: 30px;transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);border-radius: 2px;}
    .menu-button::before {content: '';margin-top: -8px;}
    .menu-button::after {content: '';margin-top: 8px;}
    #menu-toggle:checked+.menu-button-container .menu-button::before {margin-top: 0px;transform: rotate(405deg);}
    #menu-toggle:checked+.menu-button-container .menu-button {background: #ffffff;}
    #menu-toggle:checked+.menu-button-container .menu-button::after { margin-top: 0px;transform: rotate(-405deg);}

    /* menu page */
    nav .menuItems li{margin: 0;}
    nav .menuItems li a{font-size: 12px;}
    nav.stroke ul li a,
    nav.fill ul li a{padding: 0;font-size: 12px;}
    nav.shift ul li a{padding: 0;font-size: 12px;}
    .container li{padding: 0 10px;font-size: 12px;}
    nav.fade{padding: 0;}
    nav.fade ul li a{font-size: 12px;}
    nav.fade ul li a{padding: 20px 0;}
    .menu-1 a{font-size: 12px;padding: 10px 0;margin: 0;}
    .menu-1 li{width: 65px;}
    .snip1211 li,
    .snip li,
    .nav_wrapper li,
    .header_nav li{margin: 0;font-size: 12px;}
    .menu-4 li{width: 80px;}
    .menu li{font-size: 12px;margin-right: 0;}
    .snip1155 a{margin: 0;}
    .my-list li a{padding: 10px 15px;font-size: 12px;}
    .snip1155 li{font-size: 12px;}
    .container-menu ul li a{font-size: 20px;}
    .first-menu{height: fit-content;}
    .block-strike{padding: 0;}
    .inline-strike{padding: 0;}

    /* button page */
    .menu-button-container {display: flex;}
    .display-flex,
    .view-grid,
    .btn-grid{display: block;}
    .buttons{display: flex;justify-content: center;}
    a.button-shine{display: block;margin: 20px auto;}
    .buttons button,
    .button-2{margin: 20px auto;}

    /* article page */
    .articles_page_container{max-width: 70%;margin: auto;}
    .container-image,
    .item{width: 100%;}
    .article__figure,
    .container-article,
    .article-1{max-width: 100%;}
    .grid-article{display: block;}
    .gallery{height: fit-content;width: 100%;}
    .container-cards .box{margin-bottom: 30px;}
    .article-5,
    .content_article,
    .article_figure{max-width: 50%;margin: 50px auto;}
    
    /* component page */
    .reveal span{font-size: 20px;}
    @keyframes slideLeft {to {left: 20%;opacity: 1;transform: scale(0.3);} }
    @keyframes slideRight {to {right: 20%;opacity: 1;transform: scale(0.3);}}
    .component-1 div{font-size: 30px;}
    .component-1 div:last-of-type span{font-size: 20px;}

        @keyframes reveal {
            0% {
                opacity: 0;
                width: 0px;
            }
    
            20% {
                opacity: 1;
                width: 0px;
            }
    
            30% {
                width: 230px;
            }
    
            80% {
                opacity: 1;
            }
    
            100% {
                opacity: 0;
                width: 230px;
            }
        }
                @keyframes top {
                    0% {
                        opacity: 0;
                        bottom: -80px;
                    }
        
                    100% {
                        opacity: 1;
                        bottom: -290px;
                    }
                }
    .container-box{height: 60vh;}
    .text-typing p,
    .container-box .box .title h1{font-size: 30px !important;}
    .footer{width: 180px;height: 40px;}
    .display-paragraph{max-width: 100%;}
    .text-typing{max-width: 80%;}
    .component-4{height: 300px;}
    .component-4 span{font-size: 25px;}
    .component-6 h1 span{font-size: 30px;}
    .message{left: 200px;}
    .word{font-size: 40px;}
    .pill{height: 120px;width: 80px;}
    .categories-cards{margin: 30px auto;max-width: 90%;}
    .component-5-span{font-size: 20px;}
    .word1,.word2,.word3{font-size: 30px !important;}
    .div-animation-1,.div-animation-2,.div-animation-3{height: 200px;}
    .component-2 img{height: 400px;}
    .component-5-title{max-width: 90%;}
    .case-study img{max-width: 250px;margin: 20px auto;}
    .services{padding: 0;}
    .case-study{display: block;}
    .case-study-animate-title{text-align: center;}
    .services-grid-first-section{display: none;}
    .services-grid-second-section{max-width: 80%;margin: auto;}
    .services-grid{display: block;}

    /* input page */
    .form__container{margin: auto;}
    .form-main .main-wrapper{width: 100%;}
    .col-3{width: 80%;float: initial;margin: 40px auto;}
    .input-group{width: 80%;margin:40px  auto;}
    .field{width: 100%;margin: auto;}
    .page{max-width: 80%;padding: 20px 0 0 0;}

    /* social media buttons page */
    .social-media-list li a{width: 60px;height: 60px;margin: 0 15px;align-items: center;
    display: flex;justify-content: center;}
    .social-icons-btn{margin: 50px 0;}
    .social-button__inner{width: calc(100% - 12px);height: calc(100% - 12px);}
    .social{margin: 10px;height: 50px;width: 50px;display: flex;justify-content: center;align-items: center;}
    .social i{font-size: 25px !important;display: flex;justify-content: center;align-items: center;}
    .socialIcon{padding: 0;margin-left: 0;}
}