/*==================controll=================*/
                                :root{
                                --text: #6c757d;
                                --gap:2rem;
                                --col:1;
                                --colwidth:1fr;
                                --p: 16px;
                                }
                                :root{
                                --black:#000000;
                                --white:#ffffff;
                                --dark:#212121;
                                --gray:#313131;
                                --smoke:#9c9696;
                                --shadow:#ada2a2ad;
                                --crimson:#dc143c;
                                --skyblue:#00bffffb;
                                --deepblue: #4054B2;
                                /*custom*/
                                --o-primary: #6EC1E4;
                                --o-secondary: #54595F;
                                --o-accent: #61CE70;
                                --o-violet: #8040FF;
                                --o-coral: #FF6276;
                                --o-bluish: #313656;
                                --o-cyan: #37C2CC;
                                --o-darkblue: #031D3C;
                                --o-sky: #4A63ED;
                                --o-gray: #586982;
                                --o-roboto: "Roboto";
                                --o-h-font-weight: 600;
                                --o-p-roboto: "Roboto Slab";
                                --o-p-font-weight: 400;
                                --ff: "Roboto";
                                }
                                /*color end;*/
                                /*=================new==================*/
                                .fixed-top{
                                position: fixed;
                                top: 0;
                                left: 0;
                                right: 0;
                                }
                                .h100{
                                height: 100vh;
                                }
                                .center{
                                display: grid;
                                place-items: center;
                                }
                                .tt{
                                text-transform: uppercase;
                                }
                                .tl{
                                text-transform: lowercase;
                                }
                                .tc{
                                text-transform: capitalize;
                                }
                                .dnone{
                                display: none;
                                }
                                .m0{
                                margin: -0.45rem!important;
                                }
                                .w80{
                                width: 80%;
                                }
                                /*===============================reset===============================*/
                                /*reset*/
                                *,::after,::before{
                                margin: 0;
                                padding: 0;
                                box-sizing: border-box;
                                }
                                html{
                                scroll-behavior: smooth;
                                }
                                body{
                                font-family: sans-serif;
                                overflow-x: hidden!important;
                                line-height: 1.5;
                                }
                                li,ul{
                                list-style-type: none;
                                }
                                a{
                                text-decoration: none;
                                color: inherit;
                                }
                                button{
                                border: 0;
                                outline: none;
                                }
                                h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
                                font-weight: 350;
                                margin-top: 0;
                                margin-bottom: 0.5rem;
                                }
                                p{
                                color: var(--text);
                                font-size: var(--p);
                                }
                                
                                h1, .h1 {
                                font-size: 2.47rem;
                                }
                                
                                h2, .h2 {
                                font-size: 2rem;
                                }
                                
                                h3, .h3 {
                                font-size: 1.8rem;
                                }
                                
                                h4, .h4 {
                                font-size: 1.5rem;
                                }
                                
                                h5, .h5 {
                                font-size: 1.25rem;
                                }
                                
                                h6, .h6 {
                                font-size: 1rem;
                                }
                                
                                p, .p{
                                font-weight: 300;
                                }
                                /*reset*/
                                /*=======================end reset=================================*/
                                /*===========================main==================================*/
                                /*container*/
                                .container{
                                width: 100%;
                                padding: 0 15px;
                                margin: 0 auto;
                                }
                                
                                @media (min-width: 576px) {
                                .container {
                                max-width: 540px;
                                }
                                }
                                
                                @media (min-width: 768px) {
                                .container {
                                max-width: 720px;
                                }
                                }
                                
                                @media (min-width: 990px) {
                                .container {
                                max-width: 960px;
                                }
                                }
                                
                                @media (min-width: 1200px) {
                                .container {
                                max-width: 1160px;
                                }
                                }
                                
                                /*end here*/
                                
                                /*img*/
                                .img,.max{
                                max-width: 100%;
                                height: auto;
                                vertical-align: middle;
                                }
                                /*position*/
                                .p-r{
                                position: relative;
                                }
                                .p-a{
                                position: absolute;
                                }
                                .p-f{
                                position: fixed;
                                }
                                .p-s{
                                position: sticky;
                                }
                                /*z-index*/
                                .z-top{
                                z-index: 100;
                                }
                                .z-nav{
                                z-index: 1000;
                                }
                                .z-back{
                                z-index: -1;
                                }
                                .z-tooltip{
                                z-index: 900;
                                }
                                /*end*/
                                /*coloring*/
                                .bg-dark{
                                background: #000000;
                                color: #f5f5f5;
                                }
                                .bg-light{
                                background: #f5f5f5;
                                color: #181818;
                                }
                                
                                .o50{
                                opacity: .7;
                                }
                                /*font*/
                                .text-1 {
                                font-size: 6rem;
                                }
                                
                                .text-2 {
                                font-size: 5.5rem;
                                }
                                
                                .text-3 {
                                font-size: 4.5rem;
                                }
                                
                                .text-4 {
                                font-size: 3.5rem;
                                }
                                .text-5{
                                font-size: 2.5rem;
                                }
                                /*font weight*/
                                .bold{
                                font-weight: 700;
                                }
                                .semi-bold{
                                font-weight: 500;
                                }
                                .normal{
                                font-weight: 400;
                                }
                                .thin{
                                font-weight: 200;
                                }
                                
                                
                                /*===width===*/
                                .w25{
                                width: 25%;
                                }
                                .w33{
                                width: 33%;
                                }
                                .w50{
                                width: 50%;
                                }
                                .w75{
                                width: 75%;
                                }
                                .w100{
                                width: 100%;
                                }
                                /*width end*/
                                /*margin*/
                                .auto{
                                margin: auto;
                                }
                                .m-1{
                                margin: 0.5rem;
                                }
                                .m-2{
                                margin: 1rem;
                                }
                                .m-3{
                                margin: 1.5rem;
                                }
                                .m-4{
                                margin: 2rem;
                                }
                                .m-5{
                                margin: 2.5rem;
                                }
                                .m-6{
                                margin: 3rem;
                                }
                                /*====margin top & bottom====*/
                                .my-1{
                                margin: 0.5rem 0;
                                }
                                .my-2{
                                margin: 1rem 0;
                                }
                                .my-3{
                                margin: 1.5rem 0;
                                }
                                .my-4{
                                margin: 2rem 0;
                                }
                                .my-5{
                                margin: 2.5rem 0;
                                }
                                .my-6{
                                margin: 3rem 0;
                                }
                                .my-7{
                                margin: 4rem 0;
                                }
                                /*====padding====*/
                                .p-1{
                                padding: 0.5rem;
                                }
                                .p-2{
                                padding: 1rem;
                                }
                                .p-3{
                                padding: 1.5rem;
                                }
                                .p-4{
                                padding: 2rem;
                                }
                                .p-5{
                                padding: 2.5rem;
                                }
                                .p-6{
                                padding: 3rem;
                                }
                                
                                /*====padding top & bottom====*/
                                .py-1{
                                padding: 0.5rem 0;
                                }
                                .py-2{
                                padding: 1rem 0;
                                }
                                .py-3{
                                padding: 1.5rem 0;
                                }
                                .py-4{
                                padding: 2rem 0;
                                }
                                .py-5{
                                padding: 2.5rem 0;
                                }
                                .py-6{
                                padding: 3rem 0;
                                }
                                .py-7{
                                padding: 4rem 0;
                                }
                                /*======padding ends======*/
                                
                                /*=========================---end main---==========================-*/
                                
                                /*------------------------------------------------------grid-------------------------------------------------*/
                                /*==============grid system===================*/
                                .grid{
                                display: grid;
                                grid-template-columns: repeat(var(--col),var(--colwidth));
                                }
                                .grid-2{
                                grid-template-columns: repeat(2,1fr);
                                }
                                .grid-3{
                                grid-template-columns: repeat(3,1fr);
                                }
                                .grid-4{
                                grid-template-columns: repeat(4,1fr);
                                }
                                .grid-5{
                                grid-template-columns: repeat(5,1fr);
                                }
                                .grid,.grid-2,.grid-3,.grid-4,.grid-5{
                                display: grid;
                                align-items: center;
                                justify-content: center;
                                gap: var(--gap);
                                }
                                /*media*/
                                
                                @media screen and (max-width:768px){
                                .grid,.grid-2,.grid-3{
                                grid-template-columns: 1fr;
                                justify-content: center;
                                align-items:center;
                                }
                                }
                                
                                @media screen and (max-width:768px){
                                .grid-3,.grid-4,.grid-5{
                                grid-template-columns: repeat(2,1fr);
                                justify-content: center;
                                align-items:center;
                                }
                                }
                                
                                @media screen and (max-width: 576px){
                                .grid,.grid-2,.grid-3,.grid-4,.grid-5{
                                grid-template-columns: 1fr;
                                justify-content: center;
                                align-items:center;
                                }
                                
                                }
                                
                                /*grid system ends*/
                                
                                /*flex-box*/
                                .dflex{
                                display: flex;
                                }
                                .flex{
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: center;
                                }
                                .flex-c{
                                display: flex;
                                flex-direction: column;
                                }
                                .wrap{
                                flex-wrap: wrap;
                                }
                                
                                /*==============order=============*/
                                .order-1{
                                order: -1;
                                }
                                .order-2{
                                order: 2;
                                }
                                .order-3{
                                order: 3;
                                }
                                .order-4{
                                order: 4;
                                }
                                .order-5{
                                order: 5;
                                }
                                .order-6{
                                order: 6;
                                }
                                
                                /*===============align================*/
                                .aic{
                                align-items: center;
                                }
                                .aifs{
                                align-items: flex-start;
                                }
                                .aife{
                                align-items: flex-end;
                                }
                                .ais{
                                align-items: stretch!important;
                                }
                                .asfe{
                                align-self: flex-end;
                                }
                                .asc{
                                align-self: center;
                                }
                                .ass{
                                align-self: stretch;
                                }
                                .asfs{
                                align-self: flex-start;
                                }
                                /*align ends*/
                                
                                /*text alignment*/
                                .tac{
                                text-align: center;
                                }
                                .tar{
                                text-align: right;
                                }
                                .taj{
                                text-align: justify;
                                }
                                .tal{
                                text-align: left;
                                }
                                /*end text align*/
                                
                                
                                /*======justify======*/
                                .jcc{
                                justify-content: center;
                                }
                                .jcsb{
                                justify-content: space-between;
                                }
                                .jcfe{
                                justify-content: flex-end;
                                }
                                .jcfs{
                                justify-content: flex-start;
                                }
                                .jsc{
                                justify-self: center!important;
                                }
                                .jsfe{
                                justify-self: flex-end;
                                }
                                
                                /*end justify*/
                                
                                
                                
                                /*=====================End grid===========================-*/
                                
                                /*-----------------------------------------------------components------------------------------------------------*/
                                /*end here*/
                                /*card*/
                                .card{
                                border-radius: 2px;
                                }
                                /*btn*/
                                .btn-b {
                                display: inline-block;
                                font-weight: 400;
                                line-height: 1.5;
                                color: #212529;
                                text-align: center;
                                text-decoration: none;
                                vertical-align: middle;
                                cursor: pointer;
                                -webkit-user-select: none;
                                -moz-user-select: none;
                                user-select: none;
                                background-color: transparent;
                                border: 1px solid transparent;
                                padding: 0.75rem 1.75rem;
                                font-size: 1rem;
                                border-radius: 0.25rem;
                                margin-top: 1rem;
                                transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow
                                0.15s ease-in-out;
                                }
                                .btn-primary {
                                color: #fff;
                                background-color: #0d6efd;
                                border-color: #0d6efd;
                                }
                                .btn-primary:hover {
                                color: #fff;
                                background-color: #0b5ed7;
                                border-color: #0a58ca;
                                }
                                .btn-check:focus + .btn-primary, .btn-primary:focus {
                                color: #fff;
                                background-color: #0b5ed7;
                                border-color: #0a58ca;
                                box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
                                }
                                .btn-secondary {
                                color: #fff;
                                background-color: #6c757d;
                                border-color: #6c757d;
                                }
                                .btn-secondary:hover {
                                color: #fff;
                                background-color: #5c636a;
                                border-color: #565e64;
                                }
                                .btn-check:focus + .btn-secondary, .btn-secondary:focus {
                                color: #fff;
                                background-color: #5c636a;
                                border-color: #565e64;
                                box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
                                }
                                /*form*/
                                .form-controll{
                                width: 100%;
                                display: block;
                                padding: 1rem;
                                background: rgb(226, 225, 225);
                                outline: none;
                                border: none;
                                margin-bottom: .75rem;
                                resize: vertical;
                                }
                                ::placeholder,textarea::placeholder{
                                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                                font-size: .8rem!important;
                                }
                                /*---------------------------------------------------end components------------------------------------------------*/
                                @media screen and (max-width: 576px){
                                .flex{
                                flex-wrap: wrap;
                                flex-direction: column;
                                text-align: center;
                                }
                                }