/* Font-Family */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* devanagari */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* devanagari */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* devanagari */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* devanagari */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }



body{
    font-family: 'Poppins' !important;
}

section{
    padding: 84px 0;
}

.egg-shape{
    width: 100%;
    position: absolute;
    left: 0;
    top: 30;
}

.color-palette {
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0px 0px 50px 0px rgb(0 0 0 / 10%);
    position: relative;
    margin-bottom: 5px;
    background: #ffffff;
    visibility: visible;
    animation-name: fadeInUp;
}

.color-palette:hover {
    background: transparent;
}

.color-palette:before, .sox-services:before{
    border-radius: 4px;
    content: "";
    width: 100%;
    /* height: 150%; */
    transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
}

.color-palette.six-Storage h3{
    background: -webkit-linear-gradient(0deg, #343af7 0%, #5f9cf3e3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.color-palette.six-Security h3{
    background: -webkit-linear-gradient(0deg, #5989e5 0%, #37cfdc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.color-palette.six-Recokoner h3{
    background: -webkit-linear-gradient(0deg, #4ed491 0%, #2fbdcc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.color-palette.Website-Service h3{
    background: -webkit-linear-gradient(61deg, #a05de9 17%, #00a9fb 83%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.color-palette.Digital h3{
    background: -webkit-linear-gradient(233deg, #f34447 24%, #ae1689cf 72%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.color-palette:hover h3{
    -webkit-text-fill-color: #fff;
}

.color-palette.six-Storage ul li::marker{
    color: #343af7;
}

.color-palette.six-Security ul li::marker{
    color: #3b7cf4;
}

.color-palette.six-Recokoner ul li::marker{
    color: #4ed491;
}

.color-palette.Website-Service ul li::marker{
    color: #00a9fb;
}

.color-palette.Digital ul li::marker{
    color: #f34447;
}


.color-palette{
    transition: all 0.7s ease-in-out;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.color-palette:hover{
    transition-duration : 500ms;
    transition-delay : 100ms;
    --tw-translate-y: -1rem;    
    transform: translateY(var(--tw-translate-y));
}

.media1{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.media1-body{
    -ms-flex: 1;
    flex: 1;
}

.media1-body ul li{
    font-size: 14px;
    color: #4c4c4c;
    margin-bottom: 5px;
}

.color-palette .media:after{
    content: "";
    background: url(./images/01.png);
    display: inline-block;
    position: absolute;
    right: 10px;
    width: 95px;
    height: 95px;
    bottom: 10px;
}

.content1-title h3{
    text-align: center;
    margin-bottom: 20px;
    color: #007bff;
}

.color-palette:hover .content1-title h3, 
.color-palette:hover .media1-body ul li,
.color-palette:hover ul li::marker{
    color: rgb(255, 255, 255);
    transition: all .1s ease-in-out;
}

.dots{
    content: "";
    background: url(./images/01.png);
    display: inline-block;
    position: absolute;
    right: 10px;
    width: 80px;
    height: 80px;
    bottom: 10px;
    transition: all .1s ease-in-out;
}

.cc-marker ul li::marker{
    content:"\2713\0020";
    /* color: rgb(110, 229, 110); */
    font-size: 15px;
    font-weight: 500;
}

.content1-title h3{
    font-size:18px;
    font-weight: 600;
}

.cc-title h2{
    font-size: 20px;
    line-height: 30px;
}

.cc-title h5{
    font-size: 16px;
}

.media1 .media1-body ul{
    padding-inline-start: 25px;
}

.color-palette a:hover{
    text-decoration: none;
}

a{
    font-size: 14px !important;
    padding: 0.375rem 0.25rem !important;
}

.main-render-section{
    min-height: auto !important;
}

@media (max-width : 991px){

    .btn-link{
        text-decoration: underline !important;
    }

    .color-palette .content1-title h3, .color-palette .media1-body ul li, .color-palette ul li::marker {
        color: rgb(255, 255, 255) !important;
        transition: all .1s ease-in-out;
    }

    .color-palette h3 {
        -webkit-text-fill-color: #fff !important;
        text-decoration: underline;
    }


    .color-palette.six-Storage{
        background-image: -moz-linear-gradient(0deg, #343af7 0%, #5f9cf3e3 100%);
        background-image: -webkit-linear-gradient(0deg, #343af7 0%, #5f9cf3e3 100%);
        box-shadow: 0px 10px 20px 0px rgb(139 118 246 / 40%);
    }
    
    .color-palette.six-Security{
        background-image: -moz-linear-gradient(0deg, #5989e5 0%, #37cfdc 100%);
        background-image: -webkit-linear-gradient(0deg, #5989e5 0%, #37cfdc 100%);
        background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 1px,transparent 1px, transparent 13px),repeating-linear-gradient(45deg, transparent 0px, transparent 1px,transparent 1px, transparent 13px),linear-gradient(90deg, #5989e5,rgb(55 207 220));
        box-shadow: 0px 10px 20px 0px rgba(89, 137, 229, 0.458);
    }
    
    .color-palette.six-Recokoner{
        background-image: -moz-linear-gradient(0deg, #4ed491 0%, #2fbdcc 100%);
        background-image: -webkit-linear-gradient(0deg, #4ed491 0%, #2fbdcc 100%);
        background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 1px,transparent 1px, transparent 13px),repeating-linear-gradient(45deg, transparent 0px, transparent 1px,transparent 1px, transparent 13px),linear-gradient(90deg, #4ed491,rgb(47 189 204));
        box-shadow: 0px 10px 20px 0px rgba(118, 246, 131, 0.458);
    }
    
    .color-palette.Website-Service{
        /* background-image: -moz-linear-gradient(0deg, #a05de9 0%, #00a9fb 100%);
        background-image: -webkit-linear-gradient(0deg, #a05de9 0%, #00a9fb 100%); */
        background-image: -moz-linear-gradient(61deg, #a05de9 17%, #00a9fb 83%);
        background-image: -webkit-linear-gradient(61deg, #a05de9 17%, #00a9fb 83%);
        box-shadow: 0px 10px 20px 0px rgb(139 118 246 / 40%);
    }
    
    .color-palette.Digital{
        /* background-image: -moz-linear-gradient(0deg, #f34447 0%, #ae1689cf 100%);
        background-image: -webkit-linear-gradient(0deg, #f34447 0%, #ae1689cf 100%); */
        background-image: -moz-linear-gradient(233deg, #f34447 24%, #ae1689cf 72%);
        background-image: -webkit-linear-gradient(233deg, #f34447 24%, #ae1689cf 72%);
        box-shadow: 0px 10px 20px 0px rgba(240, 118, 246, 0.4);
    }
}

@media (min-width: 768px){
    .content1-title h3{
        font-size: 20px;
    }

    .h-md-575{
        height: 575px;
    }

    .h-md-624{
        height: 624px;
    }

    .cc-title h2{
        font-size: 24px;
        line-height: 32px;
    }

    .cc-title h5{
        font-size: 18px;
    }

    .cc-max-width{
        max-width: 640px;
        margin: 0 auto;
    }    
}

@media (min-width: 992px){
    .container{
        max-width: 100% !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    .media1-body ul li{
        font-size: 11px;
        color: #4c4c4c;
        margin-bottom: 5px;
    }

     .content1-title h3{
        font-size: 18px;
    }

    .h-md-575{
        height: auto;
    }

    .h-md-624{
        height: auto;
    }

    a{
        font-size: 13px !important;
        padding : 0.25rem !important;
    }

    .cc-title h2{
        font-size: 22px;
        line-height: 36px;
    }

    .cc-title h5{
        font-size: 20px;
    }
    

    .cc-max-width{
        max-width: 990px;
        margin: 0 auto;
    }

    .color-palette.six-Storage:hover{
        background-image: -moz-linear-gradient(0deg, #343af7 0%, #5f9cf3e3 100%);
        background-image: -webkit-linear-gradient(0deg, #343af7 0%, #5f9cf3e3 100%);
        box-shadow: 0px 10px 20px 0px rgb(139 118 246 / 40%);
    }
    
    .color-palette.six-Security:hover{
        background-image: -moz-linear-gradient(0deg, #5989e5 0%, #37cfdc 100%);
        background-image: -webkit-linear-gradient(0deg, #5989e5 0%, #37cfdc 100%);
        background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 1px,transparent 1px, transparent 13px),repeating-linear-gradient(45deg, transparent 0px, transparent 1px,transparent 1px, transparent 13px),linear-gradient(90deg, #5989e5,rgb(55 207 220));
        box-shadow: 0px 10px 20px 0px rgba(89, 137, 229, 0.458);
    }
    
    .color-palette.six-Recokoner:hover{
        background-image: -moz-linear-gradient(0deg, #4ed491 0%, #2fbdcc 100%);
        background-image: -webkit-linear-gradient(0deg, #4ed491 0%, #2fbdcc 100%);
        background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 1px,transparent 1px, transparent 13px),repeating-linear-gradient(45deg, transparent 0px, transparent 1px,transparent 1px, transparent 13px),linear-gradient(90deg, #4ed491,rgb(47 189 204));
        box-shadow: 0px 10px 20px 0px rgba(118, 246, 131, 0.458);
    }
    
    .color-palette.Website-Service:hover{
        /* background-image: -moz-linear-gradient(0deg, #a05de9 0%, #00a9fb 100%);
        background-image: -webkit-linear-gradient(0deg, #a05de9 0%, #00a9fb 100%); */
        background-image: -moz-linear-gradient(61deg, #a05de9 17%, #00a9fb 83%);
        background-image: -webkit-linear-gradient(61deg, #a05de9 17%, #00a9fb 83%);
        box-shadow: 0px 10px 20px 0px rgb(139 118 246 / 40%);
    }
    
    .color-palette.Digital:hover{
        /* background-image: -moz-linear-gradient(0deg, #f34447 0%, #ae1689cf 100%);
        background-image: -webkit-linear-gradient(0deg, #f34447 0%, #ae1689cf 100%); */
        background-image: -moz-linear-gradient(233deg, #f34447 24%, #ae1689cf 72%);
        background-image: -webkit-linear-gradient(233deg, #f34447 24%, #ae1689cf 72%);
        box-shadow: 0px 10px 20px 0px rgba(240, 118, 246, 0.4);
    }
    
}

@media (min-width: 1200px) {
    .container{
        max-width: 1500px !important;
        padding-left: 45px !important;
        padding-right: 45px !important;
    }

    .content1-title h3{
        font-size: 24px;
    }

    .cc-title h2{
        font-size: 24px;
        line-height: 40px;
    }

    a{
        font-size: 15px !important;
    }
    .media1-body ul li{
        font-size: 12px;
    }
}

@media (min-width: 1400px){
    .container{
        padding: 0px 80px !important;
    }
}