.btn-outline-primary,

.btn-outline-primary:hover {

    background-color: #011A41;

    border-color: #011A41;

    color: #fff;

    font-weight: 500;

    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

}



.heading-1 {

    position: relative;

    padding: 0;

    margin: 0;

    font-family: "Raleway", sans-serif;

    font-weight: 300;

    font-size: 40px;

    color: #080808;

    -webkit-transition: all 0.4s ease 0s;

    -o-transition: all 0.4s ease 0s;

    transition: all 0.4s ease 0s;

}



/* === HEADING STYLE #3 === */

.three .heading-1 {

    font-size: 28px;

    font-weight: 500;

    letter-spacing: 0;

    line-height: 1.5em;

    padding-bottom: 15px;

    position: relative;

}



.three .heading-1:before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    height: 5px;

    width: 55px;

    background-color: #111;

}



.three .heading-1:after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 2px;

    height: 1px;

    width: 95%;

    max-width: 255px;

    background-color: #333;

}



/* pricing box */



/* standard */



.pricing-table {

    background: #fff;

    box-shadow: 0px 1px 10px -6px rgba(0, 0, 0, .15);

    padding: 2rem;

    border-radius: 4px;

    transition: .3s;

}



.pricing-table:hover {

    box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, .15);

}



.pricing-table .pricing-label {

    border-radius: 2px;

    padding: .25rem .5rem;

    margin-bottom: 1rem;

    display: inline-block;

    font-size: 12px;

    font-weight: 500;

}



.pricing-table h2 {

    color: #3b3b3b;

    font-size: 24px;

    font-weight: 500;

}



.pricing-table h5 {

    color: #B3B3B3;

    font-size: 14px;

    font-weight: 400;

}



.pricing-table .pricing-features {

    margin-top: 2rem;

}



.pricing-table .pricing-features .feature {

    font-size: 14px;

    margin: .5rem 0;

    color: #000000;

}



.pricing-table .pricing-features .feature span {

    display: inline-block;

    float: right;

    color: #3b3b3b;

    font-weight: 900;

}



.pricing-table .price-tag {

    margin-top: 2rem;

    text-align: center;

    font-weight: 500;

}



.pricing-table .price-tag .symbol {

    font-size: 24px;

}



.pricing-table .price-tag .amount {

    letter-spacing: -2px;

    font-size: 64px;

}



.pricing-table .price-tag .after {

    color: #3b3b3b;

    font-weight: 500;

}



.pricing-table .price-button {

    display: block;

    color: #fff;

    margin-top: 2rem;

    padding: .75rem;

    border-radius: 2px;

    text-align: center;

    font-weight: 500;

    transition: .3s;

}



.pricing-table .price-button:hover {

    text-decoration: none;

}



.purple .pricing-label {

    background: #546dfe;

    color: #ffffff;

}



.purple .price-tag {

    color: #627afe;

}



.purple .price-button {

    background: #627afe;

}



.purple .price-button:hover {

    background: #546dfe;

}



.font-family {

    font-family: 'poppins,sans-serif';

}



.appendApp>li {

    list-style: none;

    font-family: "poppins,sans-serif";

}



.whc_item_price_list li {

    padding: 7px 0

}



.fa-check {

    color: #2d50d6;

    padding-right: 5px;

}



#pricing .card {

    box-shadow: 0 2px 30px -5px #282d33;

}





/* new pricing block desing */

.switch-container {

    width: 70px;

    height: 37px;

    margin: 0 20px;

    border: 2px solid #333;

    border-radius: 100px;

    display: flex;

    align-items: center;

    cursor: pointer;

}



.switch-container--box {

    width: 30px;

    height: 30px;

    background: #355EFC;

    border-radius: 50%;

    margin: 0 3px;

    transition: transform 300ms;

}



.switch-container--box--move {

    transform: translateX(100%);

}



.price-switch {

    height: 100px;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}



.main {

    /* height: 800px; */

    min-width: 900px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.main .cards {

    display: flex;

    justify-content: center;

}



.main .price-card {

    width: 250px;

    height: 500px;

    margin: 20px;

    border-radius: 20px;

    background: rgba(232, 234, 246, .6);

    transition: all 300ms;

}



.main .price-card:hover {

    background: #e8eaf6;

    transform: scale(1.05);

}



.main .price-card--top {

    height: 30%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: center;

    color: #355EFC;

    padding: 15px;

    border-bottom: 2px solid;

}



.main .price-card--top h3 {

    font-size: 1.8rem;

    font-weight: 200 !important;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-family: "Poppins", sans-serif;

}



.main .price-card--top h5 {

    font-size: 1.2rem;

    font-weight: 400;

}



.main .price-card--top span {

    font-size: 2.5rem;

    position: relative;

    top: 5px;

    margin: 0 5px;

}



.main .price-card--top hr {

    width: 90%;

    color: rgba(245, 245, 245, .7);

    margin-top: 30px;

}



.main .price-card--bottom {

    height: 70%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.main .price-card--bottom ul {

    list-style: none;

    padding: 50px 0 0 30px;

}



.main .price-card--bottom ul li {

    font-size: 1rem;

    margin-bottom: 5px;

    color: #333;

}



.main .price-card--bottom ul li i {

    font-size: 1rem;

    margin-right: 15px;

    color: #355EFC;

}



.main .price-card--bottom .btn {

    display: block;

    padding: 10px 65px;

    margin: 30px auto;

    font-size: 1.2rem;

    border: none;

    border-radius: 100px;

    color: #fff;

    font-weight: 700;

    text-transform: uppercase;

    background: #355EFC;

    transition: background 500ms;

}



.main .price-card--bottom .btn:hover {

    cursor: pointer;

    background: #011a41;

    /* background: #c235bf; */

}



.ddd:hover img {}



.price-text {

    font-size: 1.2rem !important;

}



@media screen and (max-width: 820px) {

    .main {

        width: 100%;

        height: 80%;

    }



    .main h1 {

        font-size: 2rem;

        margin-top: 30px;

    }



    .main .price-card {

        width: 250px;

        height: 400px;

        margin: 10px;

    }



    .main .price-card h3 {

        font-size: 1.5rem;

    }



    .main .price-card h5 {

        font-size: 1rem;

    }



    .main .price-card span {

        font-size: 2rem;

    }



    .main .price-card ul {

        padding: 30px 0 0 30px;

    }



    .main .price-card ul li {

        font-size: 0.9rem;

    }

}



@media screen and (max-width: 460px) {

    body {

        background-size: contain;

    }



    .main {

        min-height: 100%;

        min-width: 5px;

    }



    .main h1 {

        font-size: 1.2rem;

    }



    .main .cards {

        flex-direction: column;

        align-items: center;

    }



    .main .cards .price-card {

        width: 350px;

        height: 480px;

    }



    .main .cards .price-card h3 {

        font-size: 1.7rem;

    }



    .main .cards .price-card h5 {

        font-size: 1.4rem;

    }



    .main .cards .price-card span {

        font-size: 2rem;

        top: 2px;

    }



    .main .cards .price-card ul {

        padding: 40px;

    }



    .main .cards .price-card ul li {

        font-size: 1.1rem;

    }

}



/* end pricing section */



/* pricing box */



/* new pricing plan */



a,

a:hover,

a:focus,

a:active {

    text-decoration: none;

    outline: none;

}



a,

a:active,

a:focus {

    color: #333;

    text-decoration: none;

    transition-timing-function: ease-in-out;

    -ms-transition-timing-function: ease-in-out;

    -moz-transition-timing-function: ease-in-out;

    -webkit-transition-timing-function: ease-in-out;

    -o-transition-timing-function: ease-in-out;

    transition-duration: .2s;

    -ms-transition-duration: .2s;

    -moz-transition-duration: .2s;

    -webkit-transition-duration: .2s;

    -o-transition-duration: .2s;

}



ul {

    margin: 0;

    padding: 0;

    list-style: none;

}



img {

    max-width: 100%;

    height: auto;

}



/*--blog----*/



.sec-title {

    position: relative;

    margin-bottom: 70px;

}



.sec-title .title {

    position: relative;

    display: block;

    font-size: 16px;

    line-height: 1em;

    color: #ff8a01;

    font-weight: 500;

    background: rgb(247, 0, 104);

    background: -moz-linear-gradient(to left, rgba(247, 0, 104, 1) 0%, rgba(68, 16, 102, 1) 25%, rgba(247, 0, 104, 1) 75%, rgba(68, 16, 102, 1) 100%);

    background: -webkit-linear-gradient(to left, rgba(247, 0, 104, 1) 0%, rgba(68, 16, 102, 1) 25%, rgba(247, 0, 104, 1) 75%, rgba(68, 16, 102, 1) 100%);

    background: linear-gradient(to left, rgba(247, 0, 104) 0%, rgba(68, 16, 102, 1) 25%, rgba(247, 0, 104, 1) 75%, rgba(68, 16, 102, 1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F70068', endColorstr='#441066', GradientType=1);

    color: transparent;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-transform: uppercase;

    letter-spacing: 5px;

    margin-bottom: 15px;

}



.sec-title h2 {

    position: relative;

    display: inline-block;

    font-size: 48px;

    line-height: 1.2em;

    color: #1e1f36;

    font-weight: 700;

}



.sec-title .text {

    position: relative;

    font-size: 16px;

    line-height: 28px;

    color: #888888;

    margin-top: 30px;

}



.sec-title.light h2,

.sec-title.light .title {

    color: #ffffff;

    -webkit-text-fill-color: inherit;

}



.pricing-section {

    position: relative;

    /* padding: 0 0 80px; */

    overflow: hidden;

}



.pricing-section .outer-box {

    max-width: 1100px;

    margin: 0 auto;

}





.pricing-section .row {

    margin: 0 -30px;

}



.pricing-block {

    position: relative;

    padding: 0 30px;

    margin-bottom: 40px;

}



.pricing-block .inner-box {

    position: relative;

    background-color: #ffffff;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);

    padding: 0 0 30px;

    max-width: 370px;

    margin: 0 auto;

    border-bottom: 20px solid #40cbb4;

}



.pricing-block .icon-box {

    position: relative;

    padding: 50px 30px 0;

    background-color: #40cbb4;

    text-align: center;

}



.pricing-block .icon-box:before {

    position: absolute;

    left: 0;

    bottom: 0;

    height: 75px;

    width: 100%;

    border-radius: 50% 50% 0 0;

    background-color: #ffffff;

    content: "";

}





.pricing-block .icon-box .icon-outer {

    position: relative;

    height: 150px;

    width: 150px;

    background-color: #ffffff;

    border-radius: 50%;

    margin: 0 auto;

    padding: 10px;

}



.pricing-block .icon-box i {

    position: relative;

    display: block;

    height: 130px;

    width: 130px;

    line-height: 120px;

    border: 5px solid #40cbb4;

    border-radius: 50%;

    font-size: 50px;

    color: #40cbb4;

    -webkit-transition: all 600ms ease;

    -ms-transition: all 600ms ease;

    -o-transition: all 600ms ease;

    -moz-transition: all 600ms ease;

    transition: all 600ms ease;

}



.pricing-block .inner-box:hover .icon-box i {

    transform: rotate(360deg);

}



.pricing-block .price-box {

    position: relative;

    text-align: center;

    padding: 10px 20px;

}



.pricing-block .title {

    position: relative;

    display: block;

    font-size: 24px;

    line-height: 1.2em;

    color: #222222;

    font-weight: 600;

}



.pricing-block .price {

    display: block;

    font-size: 30px;

    color: #222222;

    font-weight: 700;

    color: #40cbb4;

}





.pricing-block .features {

    position: relative;

    max-width: 200px;

    margin: 0 auto 20px;

}



.pricing-block .features li {

    position: relative;

    display: block;

    font-size: 14px;

    line-height: 30px;

    color: #848484;

    font-weight: 500;

    padding: 5px 0;

    padding-left: 30px;

    border-bottom: 1px dashed #dddddd;

}



.pricing-block .features li:before {

    position: absolute;

    left: 0;

    top: 50%;

    font-size: 16px;

    color: #2bd40f;

    -moz-osx-font-smoothing: grayscale;

    -webkit-font-smoothing: antialiased;

    display: inline-block;

    font-style: normal;

    font-variant: normal;

    text-rendering: auto;

    line-height: 1;

    content: "\f058";

    font-family: "Font Awesome 5 Free";

    margin-top: -8px;

}



.pricing-block .features li.false:before {

    color: #e1137b;

    content: "\f057";

}



.pricing-block .features li a {

    color: #848484;

}



.pricing-block .features li:last-child {

    border-bottom: 0;

}



.pricing-block .btn-box {

    position: relative;

    text-align: center;

}



.pricing-block .btn-box a {

    position: relative;

    display: inline-block;

    font-size: 14px;

    line-height: 25px;

    color: #ffffff;

    font-weight: 500;

    padding: 8px 30px;

    background-color: #40cbb4;

    border-radius: 10px;

    border-top: 2px solid transparent;

    border-bottom: 2px solid transparent;

    -webkit-transition: all 400ms ease;

    -moz-transition: all 400ms ease;

    -ms-transition: all 400ms ease;

    -o-transition: all 400ms ease;

    transition: all 300ms ease;

}



.pricing-block .btn-box a:hover {

    color: #ffffff;

}



.pricing-block .inner-box:hover .btn-box a {

    color: #40cbb4;

    background: none;

    border-radius: 0px;

    border-color: #40cbb4;

}



.pricing-block:nth-child(2) .icon-box i,

.pricing-block:nth-child(2) .inner-box {

    border-color: #1d95d2;

}



.pricing-block:nth-child(2) .btn-box a,

.pricing-block:nth-child(2) .icon-box {

    background-color: #1d95d2;

}



.pricing-block:nth-child(2) .inner-box:hover .btn-box a {

    color: #1d95d2;

    background: none;

    border-radius: 0px;

    border-color: #1d95d2;

}



.pricing-block:nth-child(2) .icon-box i,

.pricing-block:nth-child(2) .price {

    color: #1d95d2;

}



.pricing-block:nth-child(3) .icon-box i,

.pricing-block:nth-child(3) .inner-box {

    border-color: #ffc20b;

}



.pricing-block:nth-child(3) .btn-box a,

.pricing-block:nth-child(3) .icon-box {

    background-color: #ffc20b;

}



.pricing-block:nth-child(3) .icon-box i,

.pricing-block:nth-child(3) .price {

    color: #ffc20b;

}



.pricing-block:nth-child(3) .inner-box:hover .btn-box a {

    color: #ffc20b;

    background: none;

    border-radius: 0px;

    border-color: #ffc20b;

}





/* new pricing plan */



.cloud-hosting-bg {

    background-color: #355efc30

}



.card-border {

    border-top: 6px solid #011A41 !important;

    /* border-top: 6px solid #355EFC !important; */

    border-radius: 4px;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: 'Merriweather' !important;

}



.client-review-stars .fa-star {

    color: #ffc107;

}



.accordion-button {

    color: #000000 !important;

}



/* home list design */

.highlighted {

    background-position: top left;

    background-repeat: no-repeat;

    background-size: 100% auto;

    transition: background-size .5s;

}



.highlighted.yellow {

    /* background-image: linear-gradient(to top, yellow 60%, transparent 0); */

    /* padding: 4px;

    background: blue;

    color: white;

    border-radius: 4px; */

}



.tronix-service-three-icon {

    width: 100px;

    text-align: center;

    border-radius: 100%;

    padding: 25px;

    margin: 0 auto;

    height: 100px;

    position: relative;

    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

}



.close-button {

    float: right;

    /* background: white; */

    border-radius: 100px;

    color: black;

    border: 1px solid;

    position: absolute;

    right: -9px;

    top: -5px;

}



.tronix-service-three-icon-attr {

    position: absolute;

    background: blue;

    border-radius: 100%;

    width: 30px;

    color: white;

    right: 0;

    top: 0;

    height: 30px;

    display: inline-flex;

    align-items: center;

    font-size: 13px;

}



/* home list design */

/* contact us form date picker css */

svg#noise {

    position: absolute;

    top: 0;

    left: 0;

    z-index: -1;

}



.title {

    max-width: 6rem;

    line-height: 1.3;

    cursor: default;

}



.title .highlight {

    display: inline-block;

    position: relative;

}



.title .highlight:before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    transform: perspective(300px) skewX(10deg) rotateX(10deg) rotateY(20deg) scale(1.15);

    background-image: linear-gradient(78deg, #f7d336 30%, #8ae99c);

    z-index: -1;

    transition: all 0.3s;

    border-radius: 0.2rem;

}



.title .highlight:hover:before {

    transform: perspective(300px) skewX(-5deg) rotateX(-10deg) rotateY(-5deg) scale(1.2);

}



.title .text {

    display: inline-block;

    transform: translateZ(100px);

}



/* contact us form date picker css */



.right-arrow {

    position: relative;

}



.ar-second {

    position: absolute;

    left: -50px;

    top: 38px;

}



/* new tabs design */



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



/* *{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: 'Poppins', sans-serif;

}



body{

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;



  background: #494E57;

} */



::selection {

    background: rgba(187, 134, 252, 0.5);

    color: #FFF;

}



.container-box {

    /* max-width: 950px; */

    width: 100%;

    /* padding: 50px 40px; */

    margin: 0px 20px;

    border-radius: 12px;

    /* background: #22272C; */

    box-shadow: 0px 4px 16px rgba(254, 205, 211, 0.1), 0px 8px 24px rgba(254, 205, 211, 0.1), 0px 16px 56px rgba(254, 205, 211, 0.1);

}



.container-box .topic {

    font-size: 30px;

    font-weight: 500;

    /* margin-bottom: 20px; */

    color: rgba(255, 255, 255, 0.7);

}



.content input {

    display: none;

}



.content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: relative;

}



.content .list {

    display: flex;

    flex-direction: column;

    position: relative;

    width: 15%;

    margin-right: 25px;

    top: -150px;

}



.content .list label {

    cursor: pointer;

    height: 45px;

    line-height: 45px;

    /* font-size: 22px; */

    /* font-weight: 500; */

    color: rgba(255, 255, 255, 0.5);

    padding-left: 15px;

    transition: all 0.5s ease;

    z-index: 10;

    margin: 3px 0;

}



#home:checked~.list label.home,

#blog:checked~.list label.blog,

#help:checked~.list label.help,

#code:checked~.list label.code,

#about:checked~.list label.about {

    color: #22272C;

}



.content .slider {

    position: absolute;

    left: 0;

    top: 0;

    height: 60px;

    width: 100%;

    border-radius: 12px;

    transition: all 0.5s ease;



    /* background: #355EFC; */

    /* background: #BB86FC; */

}





#home:checked~.list .slider {

    top: 0;

}



#blog:checked~.list .slider {

    top: 60px;

}



#help:checked~.list .slider {

    top: 120px;

}



#code:checked~.list .slider {

    top: 180px;

}



#about:checked~.list .slider {

    top: 240px;

}



.content .text-content {

    width: 85%;

    height: 100%;

    color: rgba(255, 255, 255, 0.7);

}



.nav-tabs .nav-link {

    background: #011a41;

    color: white;

    margin-right: 5px;

}



.content .text {

    display: none;

}



.content .text .title {

    font-size: 25px;

    margin-bottom: 10px;

    font-weight: 500;

}



.container-box .text p {

    text-align: justify;

}



.content .text-content .home {

    display: block;

}



#home:checked~.text-content .home,

#blog:checked~.text-content .blog,

#help:checked~.text-content .help,

#code:checked~.text-content .code,

#about:checked~.text-content .about {

    display: block;

}



#blog:checked~.text-content .home,

#help:checked~.text-content .home,

#code:checked~.text-content .home,

#about:checked~.text-content .home {

    display: none;

}



.content .list label:hover {

    color: #BB86FC;

}



/* new tabs design */

.main-block
{
  border: 1px solid #c1c1c1;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);
  -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
  -o-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  margin-bottom: 20px;
  min-height: 435px;
}

.main-block:hover
{
  -webkit-box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
  box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
}


.blog-date{font-family: 'Poppins', sans-serif;
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 12px;
  color: #006ba7;
  font-weight: 600;
}

.blog-heading h2
{
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  color: #2b2c7c;
  line-height: 1.2em;
  margin-bottom: 1em;
  font-weight: 700;
  text-decoration: underline;
}

.content-blog
{
  padding: 0.5em;

}

.image-block img
{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
  height: auto;
}

.blog-cat{list-style: none;}
.blog-cat li{padding: 0;margin: 0;margin: 0 0 10px;}
.blog-cat li a{text-decoration: underline;
  color: #122047;
  /*background: #122047;*/
  padding: 4px;
  font-size: 18px;
  border-radius: 4px;
  font-weight: 900;}
  .cat-section{
    background: #eee;
  padding: 25px 20px;
  }


/*banner css*/

.header-banner {
  height: 30vh;
  background-image: linear-gradient(
    rgba(0,0,0,0.8),
    rgba(0,0,0,0.8)
    ),
    url('../images/Header.webp');
  background-size: cover;
  background-position: top;
  position: relative;  
}

.page-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #aaa;
  white-space: nowrap;
}

.page-heading-primary {
  display: block;
  font-size: 3.125rem;
  font-weight: 300;
  color: #fff;
}

.page-heading-secondary {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4.5px;
}
/*banner css*/