.view-all a:hover {
        text-decoration: none;
        color: green;
        }

        .box-2{
            box-shadow: -8px 8px 0px rgba(246, 96, 24, 0.6);
            border-radius: 5px;
        }

/* Custom buttom for Mistion section */
        .button-33 {
        background-color: rgba(246, 96, 24, .2);
        border-radius: 100px;
        box-shadow: rgba(246, 96, 24, .2) 0 -25px 18px -14px inset,rgba(246, 96, 24, .15) 0 1px 2px,rgba(246, 96, 24, .15) 0 2px 4px,rgba(246, 96, 24, .15) 0 4px 8px,rgba(246, 96, 24, .15) 0 8px 16px,rgba(246, 96, 24, .15) 0 16px 32px;
        color: #000;
        cursor: pointer;
        display: inline-block;
        font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
        padding: 7px 20px;
        text-align: center;
        text-decoration: none;
        transition: all 250ms;
        border: 0;
        font-size: 16px;
        font-weight: bold;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        }

        .button-33:hover {
        box-shadow: rgba(246, 96, 24,.35) 0 -25px 18px -14px inset,rgba(246, 96, 24,.25) 0 1px 2px,rgba(246, 96, 24,.25) 0 2px 4px,rgba(246, 96, 24,.25) 0 4px 8px,rgba(246, 96, 24,.25) 0 8px 16px,rgba(246, 96, 24,.25) 0 16px 32px;
        transform: scale(1.05) rotate(-1deg);
        }
        
/*start back to top */
        ::-webkit-scrollbar{width:10px}
        ::-webkit-scrollbar-track{background-color: #8559A5}
        ::-webkit-scrollbar-thumb{background-color: #323232}

        .fa {
            display: none;
            position: fixed;
            bottom: 8px;
            right: 8px;
            cursor: pointer;
            color: #f89267;
            font-size: xx-large;
            font-weight: bold;
        }

        .fa:hover {
            animation: icon 1s ease-in-out
        }

        @-webkit-keyframes icon {
            0%{
                bottom: 8px
            }
            25%{
                bottom: 15px   
            }
            50% {
                bottom: 8px
            }
            75%{
                bottom: 15px   
            }
            100% {
                bottom: 8px
            }
        }
        @keyframes icon {
            0%{
                bottom: 8px
            }
            25%{
                bottom: 15px   
            }
            50% {
                bottom: 8px
            }
            75%{
                bottom: 15px   
            }
            100% {
                bottom: 8px
            }
        }


/* ===== Cercle item =====  */
        .item_center{
            padding-top: 15px;
            display: flex;
            justify-content: center;
        }
        .circle-container {
            width: 25em; height: 25em;
            border-radius: 50%;
            /* border:2px solid red; */
            display:grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(6, 1fr);

        }
        .circle-container .circle-item {
            display: block;
            margin: 0.5em;
            /* border:2px solid grey; */
            background:white;
            border-radius:50%;
            text-align:center;

            border-color: #3950af;
            box-shadow: 0 0 10px 0 #3950af inset, 0 0 10px 4px #3950af;
            transition: all 150ms ease-in-out;            
        }
        .circle-container .circle-item:hover {
            box-shadow: 0 0 40px 40px #3950af inset, 0 0 0 0 #3950af;
        }
        
        .circle-container .circle-item a{
            text-decoration: none;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-weight: bold;
            color: #000;
        }
        .circle-container .circle-item a:hover{
            color: #fff;
        }
        
        .circle-container .center-cercle {
            display: block;
            margin: 0.3em;
            /* bordrgb(255, 255, 255)px solid grey; */
            background:white;
            border-radius:50%;
            text-align:center; 
            
            border-color: #131e4a;
            box-shadow: 0 0 10px 0 #131e4a inset, 0 0 10px 4px #131e4a;
            transition: all 150ms ease-in-out;
        }
        .circle-container .center-cercle:hover {
            box-shadow: 0 0 40px 40px #131e4a inset, 0 0 0 0 #131e4a;
        }

        .circle-container .center-cercle a{
            text-decoration: none;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-weight: bold;
            color: #F66018;
        }
        .circle-container .center-cercle a:hover{
            color: #fff;
        }

        .deg1 {grid-column:3 / span 2; grid-row: 1 /span 2} /* 1 */
        .deg2 {grid-column:1 / span 2; grid-row: 2 /span 2} /* 2 */
        .deg3 {grid-column:5 / span 2; grid-row: 2 /span 2} /* 3 */
        .deg4 {grid-column:3 / span 2; grid-row: 3 /span 2} /* 4 */
        .deg5 {grid-column:1 / span 2; grid-row: 4 /span 2} /* 5 */
        .deg6 {grid-column:5 / span 2; grid-row: 4 /span 2} /* 6 */
        .deg7 {grid-column:3 / span 2; grid-row: 5 /span 2} /* 7 */

        /*bring the lateral circles closer to the center*/
        .deg2, .deg5{margin:0 -1em 0 1em;}
        .deg3, .deg6{margin: 0 1em 0 -1em}
    
/* Text Animation  */
        .container-box {
            color: rgb(255, 255, 255);
            /* color: #e5e5e5; */
            font-size: 25px;
            font-weight: bold;
            text-transform: uppercase;
            /* height: 100vh; */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .animation {
            height:50px;
            overflow:hidden;
            margin-left: 1rem;
        }

        .animation > div > div {
            padding: 0.25rem 0.75rem;
            height:2.81rem;
            margin-bottom: 2.91rem;
            display:inline-block;
            text-shadow: 0 0 7px rgba(90, 90, 90, 0.5), 0 0 3px rgba(90,90,90,.3);
        }

        .animation div:first-child {
            animation: text-animation 8s infinite;
        }

        /* .first div {
            background-color:#20a7d8;
            } 
        .second div {
            background-color:#CD921E;
        } 
        .third div {
            background-color:#c10528;
        } */

        @keyframes text-animation {
            0% {margin-top: 0;}
            10% {margin-top: 0;}
            20% {margin-top: -5.62rem;}
            30% {margin-top: -5.62rem;}
            40% {margin-top: -11.24rem;}
            60% {margin-top: -11.24rem;}
            70% {margin-top: -5.62rem;}
            80% {margin-top: -5.62rem;}
            90% {margin-top: 0;}
            100% {margin-top: 0;}
        }