@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --primary_font: 'Poppins', sans-serif;

    /*colors */
	--light-black: #545454;
    --light-s1: #878787;
    --light-s2: #EFEFEF;
       
	--primary_color: #60B8DE;
	--secondary_color: #F0FAFC;
	--blue_color: #1276F0;
    --blue_color_secondry: #0096D8;
    --lightred_color: #F71685;
    --lightred_color: #F71685;
    --lightblue_color: #239AEE;
    --lightbluesemi_color: #A3F0FF;
    --dark-black: #212A4C;
    --gradient-border:linear-gradient(45deg, #002DFF,#60B8DE) 10;
    --line-gray:#C9C9C9;
    --dark-s1:#20294A;
    --box-shadow-items:0px 0px 86px rgba(52, 65, 124, 0.18);
    /* border-radis */
    --border-radius-5:5px;
}

/* sticy navbar strat */
.navigation.fixed {
    background: var(--secondary_color);
    transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
/* sticy navbar End */

/* social icon filter start */
.fb-color:hover{
    filter: invert(41%) sepia(40%) saturate(5751%) hue-rotate(197deg) brightness(95%) contrast(95%);
}
.google-color:hover{
    filter: invert(30%) sepia(94%) saturate(1402%) hue-rotate(196deg) brightness(86%) contrast(86%);
}
.insta-color:hover{
    filter: invert(79%) sepia(94%) saturate(1032%) hue-rotate(315deg) brightness(102%) contrast(97%);
}
.twitter-color:hover{
    filter: invert(50%) sepia(78%) saturate(2227%) hue-rotate(180deg) brightness(97%) contrast(92%);
}
/* social icon filter ENd */


@layer base{
    [type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
        outline: 0px !important;
        outline-offset: 0px !important;
        box-shadow: none !important;
        border-bottom: solid 1px var(--primary_color);
    }
    input, button, a,.tra-animate {
        transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        -ms-transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease;
    }
    button:hover,.btm-hvr:hover{
        background: rgb(96, 184, 222,0.2);
        transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        -ms-transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease;
    }
    
    body{
        font-family:var(--primary_font);
    }
    p{
        color: var(--light-black);
    }
    .box-shadow{
        border: 2px solid var(--secondary_color);
    }
    .second-primary-bg{
        background-color:var(--secondary_color);
    }
    .line-gray{
        border-color: var(--line-gray);
    }
    .dark-color{
        color: var(--dark-s1);
    }
    .border-color-s1{
        border-color: var(--light-s2) !important;
    }
    .light-s1{
        color: var(--light-s1);
    }
    .border-width{
        border-width: 1px;
    }
    .lightbluesemi_color{
        border-color: var(--lightbluesemi_color);
    }
    .blue_color_secondry{
        background:var(--blue_color_secondry);
    }
    .linebox:before {
        content: "";
        position: absolute;
        width: calc(100% + 2%);
        height: 1px;
        background-color: var(--line-gray);
        bottom: 0;
        top: 0;
        margin-top: auto;
        margin-bottom: auto;
    }
    .line-border:before{
        content: "";
        position: absolute;
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: 0.5rem;

    }
    .line-border:before {
        content: "";
        position: absolute;
        top: -10px;
        left: -10px;
        right: 0;
        bottom: 0;
        background: rebeccapurple;
        z-index: -1;
    }
    .text-filter{
        background: linear-gradient(106deg, #002DFF -21.43%, #60B8DE 92.7%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }
    .border-filter{
        background: linear-gradient(106deg, #002DFF -21.43%, #60B8DE 92.7%) !important;
    }
    .width-250{
        width: 100%;
        width: 250px;
    }
    .border-1{
        border: solid 1px;
    }
    .box-shadow-items{
        box-shadow:var(--box-shadow-items);
    }

    .menu-show:hover .munu-hide.invisible{
        visibility: visible !important;
    }
    .border-indigo-300:hover{
        border-color: var(--primary_color) !important;
    }
    .before-bg-shape:before {
        position: absolute;
        content: "";
        background: var(--secondary_color);
        background-image: url(../image/dotted-bg.svg);
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 0;
        height: 50%;
        border-radius: 0 0 80px 0;
    }
    .before-abstract-psn:after {
        position: absolute;
        content: "";
        background-image: url(../image/abstract_polygone.svg);
        left: 0;
        right: 0;
        background-repeat: no-repeat;
        top: auto;
        margin-top: 40px;
        width: 100%;
        background-position: left;
        height: 120px;
    }
   
}




/* margin */
.margin-left-7{
    margin-left: 7rem;
}
.margin-right-7{
    margin-right: 7rem;
}

.blue_color{border-color: var(--blue_color);}

.primary-color{
    background-color:var(--primary_color) !important;
}

.border-gradient{
    border-image: var(--gradient-border);
}
.border-color{
    border-color:var(--primary_color) !important;
}

.h-10vh{
    height: 100vh;
}

.color-transparent{
color: transparent;
}
.light-black{
    color: var(--light-black);
}
.dark-black{
    color: var(--dark-black);
}

.bg-abstract{
    background-image: url(../image/bg-polygone.svg);
    background-position:top center;
}

.bg-dotted{
    background-image: url(../image/dotted-bg.svg);
    background-position:top center;
}

.sub-banner-bg{
    background-image: url(../image/sub-banner.svg);
    background-position:bottom;
}
.hvr-circle-bx:hover .append-hvr-circle-bx{
    background: var(--secondary_color);
}


/* accordition start */
.custom-accordition label:after {
    content: '+';
    position: absolute;
    right: 30px;
    color: #000;
    font-size: 40px;
    top: 17px;
    font-weight: normal;
}
  .custom-accordition input:checked + label:after {
    content: '-';
    line-height: .8em;
  }
  
.custom-accordition .accordion__content{
    max-height: 0em;
    transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
  }
  .custom-accordition input[name='panel']:checked ~ .accordion__content {
 /* Get this as close to what height you expect */
    max-height: 50em;
  }
/* accordition End */



/* text animation start*/
.bridging {
    text-transform: uppercase;
    font-weight: bold;
    color: transparent;
}

.bridging::before {
    content: 'Bridging';
    position: absolute;
    width: 100%;
    height: auto;
    color: #fff;
    overflow: hidden;
    border-right: 1px solid #fff;
    white-space: nowrap;
    animation: type 5s infinite;
    background: -webkit-linear-gradient(#5cacff, #4b93dd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: -4px 0px #bfdefe;
}
.hover_bg_box:hover {
    background: rgb(96, 184, 222,0.2);
    transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

@keyframes type {
  0% {
    width: 0;
  }
  
  50% {
    width: 100%;
  }
  
  100% {
    width: 0;
  }
}
/* text animation End*/

.fixed .sub_bliss_navbar{
    background-color:transparent;
}
.height_auto{
    height: auto !important;
}

/* media start */
@media(max-width:1024px){
        .linebox:before{
            display: none;
        }
        .margin-right-7 {
            margin-right:30px;
        }
        .br-none br {
            display:none;
        }
        .bliss_navbar {
            background: #fff;
        }
        .bliss_navbar a {
            border-bottom: solid 1px #e9e9e9;
            margin-left: 0 !important;
            padding-left: 12px;
            width: 100%;
        }
    }

    @media(max-width:767px){
        .xs-ml-5{
            margin-left:0.5rem;
    }
   
}
/* media End */