:root {
    --main-text-color : white;
    --background-color : black;
    --service-card-bg : #12151A;
    --service-cart-border : #333333;
    --icon-color : grey;
    --first-box-bg : #12151A;
    --second-box-bg : black;
    --third-box-bg : #12151a63;
    --first-box-title : rgb(255, 217, 0);
    --second-box-title : red;
    --third-box-title : #36dbe7;
    --content-box-border : #333333;
    --total-number-gradient-1 : rgba(255,255,255,0.5);
    --total-number-gradient-2 : rgba(180,180,180,0.3);
    --total-number-gradient-3 :rgba(83,83,83,0.3);
    --map-color : #888888;
    --card-text : white;
    --background-image : url("/static/images/background-ombre.e25967135c3c.svg");
    --card-text-hover : #333333;
}

[data-bs-theme="light"] {
    --main-text-color : #4E4E4E;
    --background-color : #F0F4F4;
    --service-card-bg : var(--main-color);
    --service-cart-border : #888888;
    --icon-color : grey;
    --first-box-bg : var(--main-color-20) ;
    --second-box-bg : var(--main-color-20) ;
    --third-box-bg : var(--main-color-20) ;
    --first-box-title :  var(--main-color);
    --second-box-title :  var(--main-color);
    --third-box-title : var(--main-color);
    --content-box-border : var(--main-color);
    --total-number-gradient-1 : rgba(255,255,255,0.5);
    --total-number-gradient-2 : rgba(180,180,180,0.3);
    --total-number-gradient-3 :rgba(83,83,83,0.3);
    --map-color : #12131A;
    --card-text : white;
    --background-image : none;
     --card-text-hover : #333333;
}
.landing-page {
    display: flex;
    flex-direction: column;
    gap: 8rem;
    padding-top: 4rem;
    width: 100vw;
    color: var(--main-text-color);
    background-color: var(--background-color);
    background-image: var(--background-image);
    background-attachment: fixed;
    background-size: cover; 
    background-repeat: no-repeat;
}

/* content */
.landing-page h1 {
    font-size: 4rem;
    margin: 0;
    font-family: 'Oswald', sans-serif;
}

.landing-page h3 {
    margin-bottom: 0;
}

.landing-page .small-title {
    font-size: 2rem;
}

.background-image {
    position: fixed ;
    display: block; 
    z-index: -5; 
    bottom: 0;
}

.large-image img {
    width: 100vw;
}
.large-image{
    z-index: -4;
}

.intro-content{
    padding: 0 5% ;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin:auto;
    min-height: 80vh;
    gap:2rem;
    overflow: hidden;
}

.intro-group {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    width: 100%;
}

.intro-text-group{
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    flex:1;
}
.intro-text{
    display:flex;
    flex-direction: column;
    gap: 1rem;
    white-space: nowrap;
    width: fit-content;

}

.intro-image>svg {
    fill : var(--map-color);
    width: 100%;
    height: auto;
}

#logo {
    display: none !important;
    z-index: -5;
}

.intro-button-group {
    display: flex;
    gap: 2rem;
}

.service-card{
    background-color: var(--service-card-bg);
    border:var(--service-cart-border) 2px solid;
    padding: 1rem;
    width: 220px;
    height:220px;
    position: relative;
    overflow: hidden;
    border-radius: 10px; 
    cursor: pointer;
}

.service-card .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    height: 100%;
    width: 100%;
    gap: 0.5rem;
}

.service-icons {
    display: flex;
    width: 100%;
    justify-content: space-between;
    color : var(--card-text);
}

.main-icon {
    font-size: 2rem;
}

.service-card .title {
    opacity: 1;
    position: absolute;
    display: block;
    bottom:0;
    right: 0;
    padding:1rem;
    text-align: right;
    font-size: 1.2rem;
}


.service-card a {
    all:unset;
}

.service-card:hover {
    background-color: #d4d4d4;
    color: black;
}

.service-card .content {
    opacity: 0;
    transform: translateY(100%);
    position: absolute;
    display: block;
    bottom:0;
    right: 0;
    padding:1rem;
    font-size: 0.9rem;
}

.service-card:hover .content {
  opacity: 1;
  transform: translateY(0);
    transition: opacity 0.5s, transform 0.5s;
}

.service-card:hover .title {
    opacity: 0;
    transition: opacity 0.2s;
}

.service-section {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.service-section>div {
    display: flex;
    gap:0.5rem;
    flex-direction: column;
}

.service-group {
    display: flex;
    gap :1rem;
    flex-wrap: wrap;
}

.total-scan-div {
    flex: 2;
}

#figure-section {
    padding: 0 5%;
}

.figure-text {
    color: white;
    font-family: 'Ubuntu Condensed', sans-serif;
    margin: 0;
}

.total-scan-div .figure-text{
    text-align: center;
    margin-bottom: 2rem;
}

.figure-number-size {
    font-size: 1.5rem ;
}

.total-scan-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.total-scan {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

}
/* end of content */

/* api */
#apiIntro {
    padding: 0 5%
}

#apiIntro .apiIntro-box {
    background-color: #12151A80;
    padding: 2rem;
    border: #333333 2px solid;
    width: 100%;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.apiIntro-box >div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#apiIntro .title {
    padding: 0 4rem;
    gap: 2rem;
}

#apiIntro .content {
    padding: 2rem;
    gap: 2rem;
}

h3 {
    font-family: 'Oswald', sans-serif;
}

#apiIntro .item-group {
    display: flex;
    gap : 2rem;
    flex-wrap: wrap;
}


#apiIntro .item-group >div {
    width: 150px;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#apiIntro .item-group img {
    width: 80px;
}
/* new figure */
.content-box {
    width: 100%;
    max-width: 600px;
    padding: 2rem;
    border-radius: 10px;
    border:var(--content-box-border) 1px solid;
}

.content-box h3 {
    text-align: center;
    margin-bottom: 1rem;
}

.content-box .number {
    width: 130px;
    display: inline-block;
    font-size: 1.2rem;
}


#surface{
    background-color: var(--first-box-bg);
}
#darkweb{
    background-color: var(--second-box-bg);
}

#blockchain{
    background-color: var(--third-box-bg);
}

#surface h3 {
    color:  var(--first-box-title);
}

#darkweb h3 {
    color: var(--second-box-title);
}

#blockchain h3 {
    color: var(--third-box-title);
}

#total h3 {
    color: var(--main-text-color);
    font-family: 'Ubuntu Condensed', sans-serif;
    text-align: center;
}

#total {
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.numberDisplay {
    display: flex;
    gap: 0.5rem;
    color: var(--main-text-color);
    align-items: flex-end;
    font-family: 'Montserrat', sans-serif;
    margin: auto;
}

.total-scan-number {
    display: flex;
    align-items: center;
    justify-content: center;
    background:  linear-gradient(0deg, var(--total-number-gradient-1 ) 0%, var(--total-number-gradient-2 ) 35%,  var(--total-number-gradient-3 ) 100%); 
    border-radius: 10px;
    width: 2.7rem;
    font-size: 2.7rem;
}

.network-logo-wrapper {
    display: flex;
    gap : 2rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin : 2rem auto;
    max-width: 1000px;
    
}

.network-logo {
    width: 80px;
}

.card-text .title {
    color : var(--card-text);
}

.service-card .service-icons, .service-card .content , .service-card:hover .title {
    color : var(--card-text);
}

.service-card:hover .service-icons, .service-card:hover .content , .service-card:hover .title {
    color : var(--card-text-hover);
}

@media screen  and (max-width:1600px){
    .landing-page {
        padding-top: 2rem;
        gap: 4rem;
    }
    .landing-page h1 {
        font-size: 2.5rem;
    }
    .small-title {
        font-size: 1.5rem;
    }
    .service-card{
        width: 190px;
        height:190px;
    }
}  

/*iPads and Tablets */
@media screen and (max-width: 768px) {
    .intro-text{
        white-space: unset;
    }

    .service-item-content {
        gap: 0.5rem;
    }
    
    .service-card .title {
        opacity: 1;
        position: static;
        display: block;
        bottom:0;
        right: 0;
        padding:0;
    }

    .service-card .content {
        opacity: 1;
        transform: unset;
        position: static;
        display: none;
        bottom:0;
        right: 0;
        padding:0; 
    }
    
    .service-card .card-content {
        justify-content: unset;
        gap: 2rem;
    }

    .service-card .card-content .card-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.5rem;
        height: 100%;
    }
    .service-card:hover .content {
        opacity: 1;
        transform: unset;
    }
    .service-card .title {
        text-align: left;
    }
    .service-card:hover .title {
        opacity: 1; 
    }
    .service-card{
        width: 150px;
        height: 150px;
    }

    .main-icon {
        font-size: 1.5rem;
    }
      
    .intro-group {
        grid-template-columns: auto;
    }

    .service-card {
        padding : 0.5rem;
    }

    .service-card .title {
        font-size: 1rem;
    }

    .service-card .service-icons {
        display: none;
    }

    .network-logo-wrapper {
        gap: 1rem;
    }

    .network-logo {
        width: 40px;
    }

}

@media screen and (max-width: 480px) {
    .landing-page h1 {
        font-size: 1.5rem;
    }
    .landing-page .small-title {
        font-size: 1rem;
    }
    .content-box {
        padding: 1rem;
    }

    .service-section>div {
        flex-grow: 1 ;
    }

    .service-card {
        width: 100%;
        height: fit-content;
    }

    .numberDisplay {
        gap: 0.2rem;
    }
    .total-scan-number {
        border-radius: 5px;
        width: 1.5rem;
        font-size: 1.5rem;
    }

    .content-box .number {
        width: 100px;
        display: inline-block;
        font-size: 1rem;
    }

}

@keyframes appear {
    0% {
        opacity: 1; 
    }
    30% {
        opacity: 0.8; 
    }
    60% {
        opacity: 0; 
    }
    100% {
        opacity: 1;
    }
}