*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    /*BASE COLOR*/
    --av1 : #003077;
    --av2 : #2f0072;
    /*BASE BG COLOR*/
    --av11 : #003077;
    --av12 : #2f0072;
    /* HEADER COLOR */
    --headl : #001e5a;
    --headr : rgb(33, 0, 74);
    --thead : rgb(255, 0, 72);
    /* ANCHOR HOVER */
    --lia:rgb(255, 4, 63);
    --lis:rgb(255, 255, 255);
    --lih:rgb(132, 0, 255);
    --lik:rgb(0, 247, 255);
    /* SCROLL COLOR */
    --sct:rgb(16, 5, 23);
    --scd:rgb(255, 0, 76);
    --sce:rgb(186, 74, 255);
    --scb:rgb(15, 2, 19);
    /* SIDEPANEL COLORS */
    --sidp:rgb(40, 0, 95);
    --sitp:rgb(0, 36, 81);
    /* PRIMARY COLOR */
    --maia:rgb(255, 255, 242);
    --maib:rgb(255, 246, 252);
    
    /* BOXM COLOR */
    --boxt : #001a3b63;
    --boxh : #ffffff;

    /* BOXC COLOR */
    --bot : #002686;
    --boh : #4100aa;

    /* BUBBLE COLORS */
    --bua : rgb(255, 0, 89);
    --bub : rgb(0, 149, 255);

    /* IMAGES FOR MAIN BACKGROUNDS */
    --aimg : url("../avio/home/A1.jpg");
    --bimg : url("../avio/home/AA11.jpg");

    /* IMAGES FOR CONSULT BACKGROUNDS */
    --cimg : url("../avio/consult/BA1.jpg");

    /* IMAGES FOR MARKET BACKGROUNDS */
    --mimg : url("../avio/market/C1.png");

    /* IMAGES FOR HRM BACKGROUNDS */
    --himg : url("../avio/hrm/HRM.jpg");

    /* IMAGES FOR GRAPHIC BACKGROUNDS */
    --gimg : url("../avio/graphic/G1.jpg");
}

/* ----------------------------------------------- HTML TEXT CLASSES --------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
html
{
/* BOLD FONT */
font-family: 'Anton', sans-serif;
font-family: 'Playfair Display', serif;
/* DIGI FONT */
font-family: 'Audiowide', cursive;
/* CURSIVE CALLIGRAPHY */
font-family: 'Tangerine', cursive;
font-family: 'Great Vibes', cursive;
/* BRUSH FONT */
font-family: 'Kolker Brush', cursive;
/* LINE RING FONT */
font-family: 'Monoton', cursive;
/* ROUND AND BOLD */
font-family: 'Righteous', cursive;
/* MAIN FONT */
font-family: 'Quicksand', sans-serif;
}


html h1 {font-size: 45px;}
html h2 {font-size: 30px;}
html h3 {font-size: 26px;}
html h4 {font-size: 22px;}
html h5 {font-size: 18px;}
html h6 {font-size: 16px;}
html p  {font-size: 14px;}
html a {text-decoration: none;}

@media(max-width: 1200px)
{
html h1 {font-size: 40px;}
html h2 {font-size: 26px;}
html h3 {font-size: 22px;}
html h4 {font-size: 18px;}
html h5 {font-size: 16px;}
html h6 {font-size: 14px;}
html p  {font-size: 13px;}
}

@media(max-width: 700px)
{
html h1 {font-size: 38px;}
html h2 {font-size: 25px;}
html h3 {font-size: 22px;}
html h4 {font-size: 20px;}
html h5 {font-size: 16px;}
html h6 {font-size: 14px;}
html p  {font-size: 12px;}
}

/* SCROLLBAR ---------------------------*/
/* ------------------------------------ */
/* ------------------------------------ */
/* ------------------------------------ */
/* width */
::-webkit-scrollbar {width: 10px;}

/* Track */
::-webkit-scrollbar-track {background: var(--scb);}

/* Handle */
::-webkit-scrollbar-thumb {border-radius: 20px; background: linear-gradient(to bottom, var(--scd), var(--sce), var(--sct));}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: linear-gradient(to top,  var(--scd), var(--sct));}

/* NAVBAR    ---------------------------*/
/* ------------------------------------ */
/* ------------------------------------ */
/* ------------------------------------ */
/* HEADER */
.header {display: flex; padding: 4px 15px; align-items: center; position: relative; background: linear-gradient(to right,var(--headl),var(--headr));}
.header img { width: 50px; height: 50px; margin-top: 5px; margin-left: 50px;}
.header h4 { flex-basis: 60%; color: var(--thead);padding: 20px 5px; font-family: 'Audiowide', cursive;}
/* NAVBAR */
nav ul {text-decoration: none; display: flex;}
nav ul li { list-style: none;}
nav ul li a {text-decoration: none; color: var(--lia); margin-left: 10px; padding: 10px 15px; font-size: 16px; font-weight: 900;}
nav ul li a span {color: var(--lis); font-weight: 500;}
nav a:hover { color: var(--lih); transition: 300ms ease-in;}
nav a:hover span { color: var(--lik); font-weight: 900;}
/* OPEN AND CLOSE BUTTON */
.openbtn, .closebtn { font-family: 'Cinzel', serif; display: none;}

/* MEDIA QUERY */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
@keyframes anim  
{0% {font-size: 15.5px; font-weight: 500; opacity: 1; color: white;}
40% {font-size: 16px; font-weight: 600; opacity: 0.7; color: cornsilk;}
100% {font-size: 15.5px; font-weight: 700; opacity: 0.9; color: bisque;}}

@media(max-width: 700px)
{
.openbtn {  display: block;}
.closebtn { display: flex; }
/* LOGO */
.header img {margin-left: 20px;}
/* NAVBAR */
nav ul {  margin: 10px auto; display: block;}
nav ul li { margin: 30px auto;}
nav ul li a { padding: 10px 10px;}
nav ul li a span { animation: anim 2s linear infinite;}
/* SIDEPANEL */
.sidepanel {width: 0px; border: none; position: fixed; z-index: 5; height: 100vh; top: 0; left: 0;
    background: linear-gradient(220deg, var(--sidp), var(--sitp)); overflow-x: hidden; transition:all 0.5s; right: 2px; padding-top: 60px;}

.sidepanel a {padding: 15px 80px 15px 50px; text-decoration: none; color: var(--lia);  width: 190px; transition: 0.3s;}
.sidepanel a:hover {color: var(--lih);}
.sidepanel .closebtn { position: absolute; top: 0; right: 0px; font-size: 36px;}

.openbtn {font-size: 20px; cursor: pointer; background-color: rgb(26, 0, 68); color: white; padding: 10px 15px; border: none; border-radius: 5px; }
.openbtn:hover {background-color:#444;}
.show {display: none;}
}
/* ENDS HERE */



/* ----------------------------------------------- HTML A-Z CLASSES --------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
 
/* A ANCHOR CLASS */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/ 
/*ANIMATION CLASS*/
@keyframes imgsan {
    0% {transform: translateY(5px);}
    40% {transform: translateY(0px);}
    70% {transform: translateY(-5px);}
    100% {transform: translateY(0px);}
}
.imgsan {transition: all 200ms ease-in-out;}
.imgsan:hover img {animation: imgsan 1s linear infinite;}

@keyframes opa {
    0% {opacity: 0; transform: translateY(-10px);}
    40% {opacity: 1; transform: translateY(0px);}
    70% {opacity: 0.6; transform: translateY(10px);}
    100% {opacity: 0.3; transform: translateY(0px);}
}

@keyframes opt {
    0% {opacity: 0; transform: scale(1.2);}
    40% {opacity: 1; transform: translateY(0px);}
    60% {opacity: 0.6; transform: translateY(10px);}
    70% {opacity: 0.3; transform: scale(0.9);}
    90% {opacity: 0.6; transform: translateY(4px);}
    100% {opacity: 0.3; transform: scale(1.2);}
}

@keyframes ops {
    0% {opacity: 0; transform: scale(0.6);}
    40% {opacity: 1; transform: translateY(0px);}
    60% {opacity: 0.6; transform: translateY(10px);}
    70% {opacity: 0.1; transform: scale(0.4);}
    90% {opacity: 0.6; transform: translateY(-15px);}
    100% {opacity: 0.1; transform: scale(1.2);}
}

@keyframes opz {
    0% {transform-origin: center; transform: scale(1) translateY(15px);}
    30% {transform-origin: center; transform: scale(0.9) translateY(-10px);}
    50% {transform-origin: center; transform: scale(0.7) translateY(2px);}
    70% {transform-origin: center; transform: scale(0.9) translateY(7px);}
    100% {transform-origin: center; transform: scale(1) translateY(20px);}
}

@keyframes expa {
    0% {transform-origin: center; transform: scale(0); opacity: 0;}
    30% {transform-origin: center; transform: scale(0.3); opacity: 0.3;}
    50% {transform-origin: center; transform: scale(0.6); opacity: 0.9;}
    70% {transform-origin: center; transform: scale(0.9); opacity: 0.4;}
    100% {transform-origin: center; transform: scale(1.1); opacity: 0.1;}
}


@keyframes textanim {
    0% {opacity: 0; color: #7300ff;}
    40% {opacity: 0.5; color: #0077ff;}
    70% {opacity: 1; color: #00e1ff;}
    100% {opacity: 0,5; color: #7300ff;}
}

@keyframes tsh {
    0% {opacity: 0; color: #7300ff; letter-spacing: 10px;}
    40% {opacity: 0.5; color: #0077ff;}
    70% {opacity: 1; color: #00e1ff;letter-spacing: 5px;}
    100% {opacity: 0,5; color: #7300ff;}
}

@keyframes up5 {
    0% {transform: translate(-120%,-130%); scale: 0.45;}
    40% {transform: translate(-90%,-40%); scale: 0.25;}
    100% {transform: translate(-120%,-130%); scale: 0.005;}
}
@keyframes up15 {
    0% {transform: translate(-320%,-130%); scale: 0.25;}
    40% {transform: translate(-90%,-140%); scale: 0.75;}
    100% {transform: translate(-320%,-90%); scale: 0.15;}
}
@keyframes dw5 {
    0% {transform: translate(120%,130%); scale: 0.95;}
    40% {transform: translate(-90%,-40%); scale: 0.25;}
    100% {transform: translate(120%,130%); scale: 0.5;}
}


/*ANCHOR CLASS*/
html a {text-decoration: none; color: #00ff95;}

.ac a {font-weight: 600; font-size: 14px; color: aquamarine; transition: all 0.2s ease; text-decoration: none; }
.ac a:hover {color: rgb(255, 0, 85);}

.am {width: fit-content; border-radius: 15px; padding: 16px 20px; background: linear-gradient(to right,rgb(0, 152, 149),rgb(0, 123, 84)); transition: all 200ms ease-in;}
.am a {color: #98f3ff; font-size: 15px; font-weight: 900;}
.am span {opacity: 0; transition: all 2s ease-in;}
.am:hover {background: linear-gradient(220deg,var(--sct),var(--scd));}
.am:hover a {color: white;}
.am:hover span {opacity: 1;transform: scale(1.1); transform-origin: center;}

/* BIGGER ANCHOR */
.au {width: fit-content; border-radius: 7px; padding: 1rem 5rem; background: linear-gradient(220deg,aqua,blue); transition: all 200ms ease-in;}
.au a {font-size: 12px; color: white;}
.au:hover {background: linear-gradient(220deg,rgba(0, 21, 255, 0.549),rgba(255, 47, 147, 0.495));}

/* SMALLER ANCHOR */
.az {width: fit-content; border-radius: 7px; padding: 0.5rem 1rem; background: linear-gradient(220deg,aqua,blue); transition: all 200ms ease-in;}
.az a {font-size: 12px; color: white;}
.az:hover {background: linear-gradient(220deg,rgba(0, 21, 255, 0.549),rgba(255, 47, 147, 0.495));}

/* ABSOLUTE CLASSES */
.ab1 {position: absolute; top: 40%; right: 0;}
.ab2 {position: absolute; bottom: 10%; right: 0;} 
.ab3 {position: absolute; top: 10%; left: -10px;}
.ab4 {position: absolute; bottom: 10%; left: 20px;}
.ab5 {position: absolute; top: -10px; left: 10px;}
.ab6 {position: absolute; top: 15px; left: 15px;}
.ab7 {position: absolute; transform: translate(-50%,-50%);}

.leftbar {color: white; position: fixed; transform: rotate(-90deg); bottom: 70px; right: 90%;}
.rightbar {color: white; position: fixed; transform: rotate(-90deg); bottom: 70px; right: 1%;}

/* B BASE CLASS */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/ 
.homa {background: linear-gradient(to bottom,var(--av1),var(--av2));}
.homb {background: linear-gradient(to top,var(--av1),var(--av2));} 

/* ---------------------- */
/* BASE COLOR CLASSES */
.bca {background: linear-gradient(220deg,#F48134,#E0255E);}
.bcb {background: linear-gradient(220deg,#EC3648,#A32174);}
.bcc {background: linear-gradient(220deg,#124C97,#219ABF);}
.bcd {background: linear-gradient(220deg,#7AC492,#37B7BD);}
.bce {background: linear-gradient(220deg,#EB2C5D,#69ACDD);}
.bcf {background: linear-gradient(220deg,#F0432A,#EDAD29);}
.bcg {background: linear-gradient(220deg,#93D4CD,#F0A7CA);}
.bch {background: linear-gradient(220deg,#F8A280,#EE2E75);}
.bci {background: linear-gradient(220deg,#1E3D84,#EB2C5D);}
.bcj {background: linear-gradient(220deg,#5A4891,#EA146F);}
.bck {background: linear-gradient(220deg,#DDC93A,#A1CD72);}
.bcl {background: linear-gradient(220deg,#7855A3,#196EB2);}
.bcm {background: linear-gradient(220deg,#15002e,#001525);}


/* BORDER CLASS */
.bb {border: 2px solid greenyellow;}

.bf {border: 1px solid rgb(0, 36, 81);}
.avior:hover .bf {border: 1px solid rgb(0, 123, 84);}

/* BOX CLASSES */
.bax {background: var(--boxt); transition: all 2s ease;}
.bax:hover {background: var(--boxh);}

.sebox {background: var(--bot); transition: all 2s ease;}
.sebox:hover {background: var(--boh);}

.box {background-color: #ffffff; width: 80%; overflow-wrap: break-word;}

.sbox {border-radius: 10px; border: 1px solid rgb(113, 0, 195);}
.sbox img {transform: scale(1); transition: all 900ms ease-in-out;}
.sbox:hover {border: 1px solid #00e1ff;}
.sbox:hover img {transform: scale(1.2);}

/* TRANSPARENT BOX */
.cbox {background-color: rgba(0, 3, 25, 0);}
.cbox:hover {background-color: rgba(25, 32, 89, 0.195);}

.abox {border-radius: 10px; background: linear-gradient(130deg,rgb(15, 0, 56),rgb(33, 0, 39)); padding: 1rem 1rem; transition: all 400ms ease-in-out;}
.avior:hover .abox {border-radius: 7px; background: linear-gradient(130deg,rgb(162, 0, 255),rgb(81, 0, 255)); border: none; transform: scale(1.02);}

.dbox {border-radius: 5px; border-left: 4px solid rgb(0, 134, 192); background: linear-gradient(220deg,rgb(38, 0, 84),rgb(0, 0, 68));}
.avior:hover .dbox {border-left: 4px solid rgb(0, 255, 149); background: linear-gradient(220deg,rgba(56, 0, 124, 0.468),rgba(0, 0, 155, 0.419));}

.tbox {border-radius: 10px; background: linear-gradient(130deg,rgba(15, 0, 56, 0.166),rgba(33, 0, 39, 0.166)); border: 2px solid rgb(0, 44, 49); padding: 1rem 1rem; transition: all 400ms ease-in-out;}
.tbox:hover {border-radius: 7px; background: linear-gradient(130deg,rgb(162, 0, 255),rgb(81, 0, 255)); border: none; transform: scale(1.02);}

.mbox {padding: 0.5rem 0.5rem; border-radius: 10px; background-color: #0026733a; transform:scale(1);}

/* COLOR CHANGING BOXES */
.bc {border-radius: 10px; padding: 2rem 1rem; transition: all 400ms ease-in-out;}
.bc1 {background: #001b59; transition: all 1s cubic-bezier(0.895, 0.03, 0.685, 0.22);}
.bc2 {background: #001e4f; transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1);}
.bc3 {background: #004440; transition: all 1s cubic-bezier(0.55, 0.055, 0.675, 0.19);}
.bc4 {background: #00492f; transition: all 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);}
.avior:hover .bc1 {background: #002373; transform: scale(1.02);}
.avior:hover .bc2 {background: #003385; transform: scale(1.02);}
.avior:hover .bc3 {background: #00655e; transform: scale(1.02);}
.avior:hover .bc4 {background: #007a50; transform: scale(1.02);}
 

/* BUTTON CLASS */
.bn {padding: 9px 15px; border: none; border-radius: 10px; cursor: pointer; color: #a9fff8;}
.bn {background: linear-gradient(to right,rgb(0, 0, 43),rgba(24, 0, 51, 0.238));}



/* C COLOR CLASS */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
.cc:hover h2 {color: #5900ff;} 
.cc:hover h3 {color: #5900ff;}
.cc:hover h4 {color: #5900ff;}
.cc:hover h5 {color: #5900ff;}
.cc:hover h6 {color: #5900ff;}
.cc p {font-size: 12px;}
.cc:hover p {color: #402d54; font-weight: 700;}

.ct h2 {color: #2c007d;} 
.ct h3 {color: #2c007d;} 
.ct h4 {color: #2c007d;} 
.ct h5 {color: #2c007d;} 
.ct h6 {color: #2c007d;} 
.ct p {color: #16003f;} 

/* CIRCLE CLASS */
.crb {position: absolute; top: 20px; left: 10px;}
.crs {position: absolute; top: 30px; left: 240px;}
.crx {position: absolute; top: 70px; right: 20px;}
.crp {position: absolute; bottom: 20px; right: 10px;}
.crq {position: absolute; bottom: 30px; left: 140px;}
.crr {position: absolute; bottom: 70px; right: 120px;}
.crb,.crp {width: 35px; height: 35px; border-radius: 50%;}
.crs,.crq {width: 25px; height: 25px; border-radius: 50%;}
.crx,.crr {width: 15px; height: 15px; border-radius: 50%;}
.crb,.crp {animation: up5 2s linear infinite; animation-delay: 500ms;}
.crs,.crq {animation: up15 2s linear infinite; animation-delay: 900ms;}
.crx,.crr {animation: dw5 2s linear infinite; animation-delay: 1200ms;}
.crb,.crs,.crx,.crp,.crq,.crr {background: linear-gradient(220deg,var(--bua),var(--bub));}

/* F FLEX CLASS */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/ 
.fe {display: flex; flex-direction: row;}/*.fe {flex-direction: column;}*/
.ff {display: flex; flex-direction: row !important;}
.fg {display: flex; flex-direction: column;}
.fr {display: flex; flex-direction: row-reverse;}

.fy {flex-basis: auto;}
.fs {flex: 1;}
.f1 {flex-basis: 10%;}
.f1z {flex-basis: 15%;}
.f2 {flex-basis: 20%;}
.f3 {flex-basis: 30%;}
.f3z {flex-basis: 32%;}
.f4 {flex-basis: 40%;}
.f5 {flex-basis: 50%;}
.f6 {flex-basis: 60%;}
.f7 {flex-basis: 70%;}
.f8 {flex-basis: 80%;}
.f9 {flex-basis: 90%;}

.ff5 {flex-basis: 48%;}
.ff2 {flex-basis: 20%;}/*.ff2 {flex-basis: 32.99%;}*/
.f25 {flex-basis: 24%;}/*.f25 {flex-basis: 49%;}*/
.ff3 {flex-basis: 30%;}/*.ff3 {flex-basis: 49.99%;}*/
.ff4 {flex-basis: 24%;}/*.ff4 {flex-basis: 49.99%;}*/

/* FOR IMAGES */
.f12 {flex-basis: 12%;} /*.f12 {flex-basis: 24%;} */
.f23 {flex-basis: 20%;} /*.f13 {flex-basis: 30%;} */
.f22 {flex-basis: 23.5%;} /*.f22 {flex-basis: 22%;}*/
.f47 {flex-basis: 40%;} /*.f47 {flex-basis: 70%;} */

/* FORM CLASSES */
.mcash fieldset {padding: 10px 10px; margin: 5px 2px; border: 1px solid rgb(0, 84, 136); border-radius: 5px;}
.mcash fieldset:hover {border: 1px solid rgb(0, 255, 149); color: greenyellow; font-weight: 700;}
.mcash fieldset input {padding: 5px 5px; border-radius: 16px; background: linear-gradient(to right,cyan,white);}
.mcash fieldset input {border: none; outline: none; width: max-content;}
.mcash fieldset input[type=text]:focus {border: none; color: rgb(9, 103, 61);}
.mcash legend {font-size: 12px; padding: 2px 10px;}
.mcash fieldset select {padding: 7px 5px; border-radius: 10px; background: linear-gradient(to right,cyan,white);}
.mcash fieldset select option {font-size: 1rem; padding: 7px 5px; border-radius: 10px; background: linear-gradient(to right,cyan,white);}
.mcash .btp {padding: 10px 0px;}
.mcash .btp i {font-size: 12px; color: cyan;}
.mcash .btp button {padding: 10px 50px; border-radius: 7px; background: linear-gradient(to right,rgb(0, 0, 103),rgb(0, 40, 86)); transition: all 400ms ease-in;}
.mcash .btp button:hover {padding: 10px 50px; background: linear-gradient(to right,rgb(0, 245, 208),rgb(0, 255, 123));}
.mcash .btp button {color: white; border: 10px;}

/* G GO CLASS */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/ 
.gd {transform: translateY(15px);}
.gu {transform: translateY(-15px);}
.gc {transform: translate(-50%,-50%);}

/* I IMAGE CLASS */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/ 
.ima,.imi,.ime,.imr,.ims,.imt {width: 100%; overflow: hidden; pointer-events: none;}
.ima img {width: 100%; display: block; object-fit: cover;}
.imi img {width: 50px; height: 50px; display: block; object-fit: cover;}/*.imi img {width: 30px; height: 30px;}*/
.ime img {width: 30px; height: 30px; display: block; object-fit: cover;}
.imr img {width: 85px; height: 85px; display: block; object-fit: cover;} /*.imr img {width: 85px; height: 85px;}*/
.imt img {width: 70px; height: 70px; display: block; object-fit: cover;}
.ims img {width: 70px; height: 70px; display: block; object-fit: cover;} /*.ims img {width: 40px; height: 40px;}*/

.opa img {animation: opa 2s linear infinite; transition: all 2s linear ease;}
.opt img {animation: opt 2s linear infinite; transition: all 2s linear ease;}
.ops img {animation: ops 2s linear infinite; transition: all 2s linear ease;}
.opz img {animation: opz 2s linear infinite; transition: all 2s linear ease;}
.expa img {animation: expa 2s linear infinite; transition: all 2s linear ease;}

/* SPecial Image Effect */
.imgg {overflow: hidden;}
.imgg img {width: 50%; object-fit: cover; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.514)); display: block;}
.imgg:hover img {filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.123)); transition: invert 2s ease-in-out; display: block;}
.imgg:hover img {transform: scale(1.2);}
.imgg:hover img {transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);}

/* SPecial Image OVERLAY */
.imac::after
{
    content: '';
    position: absolute;  top: 0; left: 0;
    width: 100%; height: 100%;  
    background-color: #00101da2;
    z-index: -1;  
    transition:transform 200ms ease-in;
}
.imab::after {transform: scaleX(0); transform-origin: right;z-index: 4;}
.imab:hover:after {transform: scaleX(1); transform-origin: left;}
.imac .imas {z-index: 5; display: none; transition: all 3s ease-in-out;}
.imac:hover .imas {display: block;}
.imac:hover .imah {display: none;}

/* INPUT CLASS */
.minp input {padding: 4px 10px; outline: none; border-radius: 20px;}
.minp input:focus {background-color: rgba(255, 255, 255, 0.286); outline: none; border: none; color: white;}

/* KEYWORD CLASSES */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/ 
.kw {border-radius: 15px; padding: 0.2rem 0.5rem;}
.kw {background: linear-gradient(220deg,#4900a3,#005092);}
.kw h6 {font-size: 12px; color: white;}

/* M MAIN CLASS */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/ 
.avior {width: 100%; overflow: hidden; color: white;}
.avior {background: linear-gradient(to bottom,var(--av1),var(--av2));}

.aia {align-content: center; justify-items: center;}
.aib {border-radius: 10px;}
.aic {text-align: center;}
.aid {justify-content: space-around;}
.aie {justify-content: space-between;}
.aif {justify-content: space-evenly;}
.aig {line-height: 1.5rem;}
.aih {line-height: 2rem;}
.ail {position: relative;}
.ahh {height: 100vh;}
.aip {letter-spacing: 4px;}
.aiq {letter-spacing: 2.5rem;}
.air {text-align: right;}
.ais {border-radius: 50%;}
.ait {transform: rotate(-90deg);}
.aiu {gap: 20px;}
.aiv {gap: 10px;}
.aiw {width: fit-content;}
.afw {flex-wrap: wrap;}

/* MARGIN CLASSES */
.m0 {margin: 0.1rem 0rem;}
.m1 {margin: 0.1rem 0.1rem;}
.m2 {margin: 0.2rem 0rem;}

.m22 {margin: 0.2rem 0.2rem;}

/* P PADDING CLASS */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
.pa {padding: 10rem 10rem;}
.pb {padding: 2rem 2rem;}
.pc {padding: 3rem 3rem;}
.pd {padding: 4rem 4rem;}
.pe {padding: 5rem 5rem 1rem 5rem;} /*.pe {padding: 3.5rem 1rem 1rem 1rem;}*/
.pf {padding: 0.5rem 0.5rem;}
.pg {padding: 2rem 10rem 2rem 10rem;} /*.pg {padding: 2rem 3rem 1rem 1rem;}*/
.ph {padding: 1rem 5rem 1rem 5rem;} /*.ph {padding: 1rem 1rem 1rem 1rem;}*/
.pj {padding: 5rem 5rem 5rem 5rem;} /*.pj {padding: 1rem 1rem 1rem 1rem;}*/
.pl {padding: 0.5rem 5.5rem 0.5rem 0.5rem;} /*.pl {padding: 1rem 1rem 1rem 1rem;}*/

.pr {padding: 1.5rem 1rem;}
.ps {padding: 0.4rem 0;}
.pt {padding: 0rem 1rem;}
.pv {padding: 0.7rem 0.7rem;}
.pw {padding: 0.4rem 0.4rem;}
.p0 {padding: 1rem 0;}
.p1 {padding: 1rem 1rem;}
.p12 {padding: 1rem 2rem;}
.p31 {padding: 3rem 1rem;}
.p72 {padding: 7rem 2rem;}
.p2x {padding: 2rem 2rem;} /*.p2x {padding: 0;}*/

.p1h {padding: 1rem 2rem;} /*.p1h {padding: 0.5rem 0.5rem;} */
.p4h {padding: 2rem 6rem;} /*.p4h {padding: 1.5rem 1.5rem;} */

 
/* T TEXT CLASS */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
.th h1 {font-family: 'Righteous', cursive;}

/* LIGHT AND DARK  */
.tl h2 {font-family: 'Righteous', cursive; color: white;}
.tl h2 span {color: #00518f;}
.tl h5 {color: #00518f;}
.tl h6 {font-size: 13px; color: white;}
.tlz:hover .tl h2 {color: #00335b;}
.tlz:hover .tl h5 {color: #00518f;}
.tlz:hover .tl h6{color: #00335a;}

.ta {animation: textanim 2s linear infinite;}

.tb h2 {font-size: 120px; font-weight: 500;}
.tb h2 {font-family: 'Playfair Display', serif;}

.tb h6 {font-size: 15px;}
.tb p {font-size: 13px;}
.tb h6 span {font-size: 13px; color: #00e1ff;}

/* Animation on hover extending length */
.ts h2 {font-size: 120px; font-weight: 500; color: #2f0095;}
.ts h2 {font-family: 'Playfair Display', serif;}
.avior:hover .ts h2 span {color: #00e1ff; animation: tsh 2s linear infinite;}

.tt h2 {font-size: 150px; font-weight: 500; color: #002863;}
.tt h2 {font-family: 'Playfair Display', serif; transition: all 5s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.avior:hover .tt h2 {color: #00e1ff; animation: tsh 2s linear infinite;}

.tm h2 {font-size: 50px; font-weight: 500;}
.tm h2 {font-family: 'Playfair Display', serif;}
.tm h2 span {color: #00ffe1;}

.tsp h4 {font-size: 14px; font-weight: 500; color: white;}
.tsp h6 {font-size: 12px; color: aquamarine;}
.tsp p {font-size: 12px;}

.tp {line-height: 3vh;}
.tp h6 {font-size: 13px; font-weight: 400;}
.tp h6 span {font-size: 13px; color: #00e1ff;}

.bn h5 {font-size: 14px; color: #0077ff; font-weight: 600;}
.bn h5 span {font-size: 13px; color: #00ffe1; font-weight: 400; transition: all 400ms ease-in;}
.bn:hover h5 span {letter-spacing: 2px; color: orange;}

.tzbox h3 {font-size: 15px; color: cyan;}
.tzbox h6 {font-size: 11px; color: coral;}
.tzbox p {font-size: 12px; color: white;}
.tzbox h5 {font-size: 14px; color: orange;}
.tzbox p span {font-size: 12px; color: aquamarine;}

/* W WIDTH CLASS */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
.w2 {width: 20%; margin: auto;}
.w4 {width: 40%; margin: auto;}
.w6 {width: 60%; margin: auto;}
.w7 {width: 70%; margin: auto;}
.w8 {width: 80%; margin: auto;}

.w79 {width: 70%;} /*.w79 {width: 80%;}*/
.w18 {width: 18%;} 

/* FOR BOXES FOUR */
.w35 {width: 25%; margin: auto;} /*.w25 {width: 50%; margin: auto;}*/

/* X NONE CLASS */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
.nx {pointer-events: none;}
.nb {border: none;}

#E2,#E3,#E4,#E5 {display: none;}
#M2,#M3,#M4,#M5 {display: none;}
#V2,#V3 {display: none;}

.hidx {display: none; transition:all 5s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.hidv:hover .hidx {display: block;}


/* Z INDEX CLASS */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
.zi {z-index: 5;} 
.zz {z-index: 15;}
.zp {z-index: 50;}

/* OTHER CLASS */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
.circles {width: 900px; height: 900px; background-color: #4f0aa8c3; border-radius: 50%;}
.circles {position: absolute; left: -250px; top: 0; z-index: 1;}

.asl {position: absolute; top: 330px; left: 150px;}
.asr {position: absolute; top: 530px; left: 90px;}

/* FOOTER CLASS */
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
footer {background-color: #000f2e; color: white;}
.fcop {background-color: #00091b;}

.lh {line-height: 4vh;}
.fm {flex-basis: 25%;}
.fn {flex-basis: 75%;}
.fp {flex-basis: 24%;}

.fcop h6{color: #00ffe1; font-size: 14px; text-align: right;}

.fm h4 {font-size: 45px; color: rgb(61, 197, 202);}
.fm h6 span {font-size: 14px; color: #9ac9ff;}
.fp h6 {font-size: 20px;}

.qq h6 span {font-size: 60px; color: orange;}
.qq h6 {font-size: 45px;}
.qq h6 {font-family: 'Tangerine', cursive;}

.fp a {font-size: 13px; color: #00e1ff; line-height: 1vh; transition: all 300ms ease-in-out;}
.fp a:hover {color: #fff75f; font-weight: 700;}

footer .imi {border: 2px solid cyan; border-radius: 10px; margin-right: 3px;}
footer .imi:hover {border: 2px solid #00ffb3;}
footer .imi:hover img {transform: scale(1.3);}


/* ----------------------------------------------- MOBILE CLASSES --------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
@media(max-width: 700px)
{/*STARTS HERE*/
 /*FLEX CLASS*/
 .fe {flex-direction: column;}
 .fr {flex-direction: row;}
 .ff2 {flex-basis: 32.99%;}
 .f25 {flex-basis: 49%;}
 .f22 {flex-basis: 22%;}
 .ff3 {flex-basis: 49.99%;}
 .ff4 {flex-basis: 49.99%;}
 .f12 {flex-basis: 20%;}
 .f13 {flex-basis: 30%;}
 .f47 {flex-basis: 70%;}

  /*PADDING CLASS*/
 .pe {padding: 3.5rem 1rem 1rem 1rem;}
 .pg {padding: 0.5rem 0.5rem 1.5rem 3rem;}
 .ph {padding: 1rem 1rem 1rem 1rem;}
 .pj {padding: 1rem 1rem 1rem 1rem;}
 .pl {padding: 1rem 1rem 1rem 1rem;}
 .p2x {padding: 0;}
 .p72 {padding: 16rem 2rem 4rem 2rem;}
 .p1h {padding: 0.5rem 0.5rem;}
 .p4h {padding: 1.5rem 1.5rem;} 

 /* MAIN CLASSES */
 .aiq {letter-spacing: 0.5rem;}

 /* IMAGE CLASS */
 .imi img {width: 30px; height: 30px;}
 .ims img {width: 40px; height: 40px;}
 .imr img {width: 85px; height: 85px;}

 /* K CLASSES */
 .kw h6 {font-size: 11px; color: rgb(146, 255, 215);}

 /*FONT SIZE*/
 .cc p {font-size: 10.5px;}
 .ts h2 {font-size: 90px; font-weight: 500;}
 .tb h6 {font-size: 13px;}
 .tb p {font-size: 11px;}
 .bn h5 {font-size: 12px; font-weight: 600;}
 .bn h5 span {font-size: 11px; font-weight: 600;}

 /*CIRCLE*/
 .circles {width: 900px; height: 900px;} 

 .asl {position: absolute; top: 300px; left: 70px;}
 .asr {position: absolute; top: 495px; left: 20px;}
  
 /* WIDTH CLASS */
 .w79 {width: 80%;}
 .w35 {width: 60%; margin: auto;}

 /* NONE CLASS */
 .mhid {display: none;}

 /* FOOTER CLASS */
 .fm {flex-basis: 95%;}
 .fn {flex-basis: 99%;}
 .fp {flex-basis: 49%;}
}