@font-face {
    font-family: "Neue Machina";
    src: url("../../public/assets/fonts/neue-machina-free-for-personal-use/NeueMachina-Light.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Tiempos Headline";
    src: url("../../public/assets/fonts/Tiempos-Font/TiemposHeadline-Light.otf") format("opentype");
    font-style: normal;
}

@font-face {
    font-family: "Tiempos Headline bold";
    src: url("../../public/assets/fonts/Tiempos-Font/TiemposHeadline-Bold.otf") format("opentype");
    font-style: normal;
}

@font-face {
    font-family: "Neue Haas Grotesk Text Pro";
    src: url("../../public/assets/fonts/Neue-Haas-Grotesk-Font/NHaasGroteskTXPro-55Rg.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Neue Haas Grotesk Text Pro";
    src: url("../../public/assets/fonts/Neue-Haas-Grotesk-Font/NHaasGroteskTXPro-65Md.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Neue Haas Grotesk Text Pro";
    src: url("../../public/assets/fonts/Neue-Haas-Grotesk-Font/NHaasGroteskTXPro-75Bd.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Grotesk";
    src: url("../../public/assets/fonts/Neue-Haas-Grotesk-Font/NHaasGroteskTXPro-65Md.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}
.philosophy-section {
    min-height: 85vh;
    background: #ffffff;
    padding: 80px 60px 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.philosophy-container {
    max-width: 1600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
}

/* .philosophy-left {
    position: relative;
} */

.philosophy-title {
    font-family: "Neue Haas Grotesk Text Pro";
    font-size: 48px;
    font-weight: 300;
    /* line-height: 1.2; */
    color: #363638;
    /* margin-bottom: 60px; */
    opacity: 1;
    transform: translateY(-50px);
    will-change: transform, filter, opacity;
}

.philosophy-highlight {
    background: var(--Gradient-06, linear-gradient(0deg, #40C9FF, #3586f7));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Tiempos Headline";
    font-style: italic;
    font-weight: 600;
    padding-right: 5px;
    width: inline-block;
}

.philosophy-globe-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.philosophy-globe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: rotateGlobe 20s linear infinite;
}

.philosophy-top-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: auto;
    z-index: 2;
}

@keyframes rotateGlobe {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.philosophy-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 200px;
}

.philosophy-points {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.philosophy-point {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 5px 0;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Neue Machina";
}

.point-number {
    font-family: "Neue Machina"; /* font-family: "Neue Haas Grotesk Text Pro"; */
    font-size: 14px;
    font-weight: 400;
    color: #C4A7FF;
    min-width: 28px;
}

.point-text {
    /* font-family: "Neue Machina"; */
        font-family: 'Space Grotesk';
        font-size: 18px;
    font-weight: 400;
    color: #4a4a4a;
    flex: 1;
    transition: color 0.3s ease;
    max-width: 400px;
}

.point-arrow {
    width: 40px;
    height: 40px;
    opacity: 0;
    transform: translateX(-10px) rotate(-45deg);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(0) saturate(100%) invert(67%) sepia(48%) saturate(3179%) hue-rotate(211deg) brightness(101%) contrast(101%);
}

.philosophy-point:hover .point-arrow {
    opacity: 1;
    transform: translateX(0) rotate(-45deg);
}

.philosophy-point:hover .point-text {
    color: #2d2d2d;
    font-weight: 500;
}

.philosophy-point:hover {
    transform: translateX(5px);
}

.philosophy-point[data-point="1"]:hover .point-arrow {
    filter: brightness(0) saturate(100%) invert(67%) sepia(48%) saturate(3179%) hue-rotate(211deg) brightness(101%) contrast(101%);
}

.philosophy-point[data-point="2"]:hover .point-arrow {
    filter: brightness(0) saturate(100%) invert(67%) sepia(48%) saturate(3179%) hue-rotate(211deg) brightness(101%) contrast(101%);
}

.philosophy-point[data-point="3"]:hover .point-arrow {
    filter: brightness(0) saturate(100%) invert(67%) sepia(48%) saturate(3179%) hue-rotate(211deg) brightness(101%) contrast(101%);
}

.philosophy-point[data-point="4"]:hover .point-arrow {
    filter: brightness(0) saturate(100%) invert(78%) sepia(48%) saturate(3179%) hue-rotate(211deg) brightness(101%) contrast(101%);
}

.philosophy-point[data-point="5"]:hover .point-arrow {
    filter: brightness(0) saturate(100%) invert(78%) sepia(48%) saturate(3179%) hue-rotate(211deg) brightness(101%) contrast(101%);
}

.philosophy-point[data-point="6"]:hover .point-arrow {
    filter: brightness(0) saturate(100%) invert(78%) sepia(48%) saturate(3179%) hue-rotate(211deg) brightness(101%) contrast(101%);
}

@media (max-width:1024px){

    .philosophy-right{
        flex-direction:column;
        gap:60px;
    }

    .philosophy-globe-container{
        width:300px;
        height:300px;
    }

    .philosophy-title{
        font-size:40px;
        text-align:center;
    }
     .point-arrow{
        width: 30px;
    }
    /* .point-arrow{
        opacity:1;
        transform:translateX(0) rotate(-45deg);
    } */

}

@media (max-width:768px){

    .philosophy-section{
        padding:60px 24px;
    }

    .philosophy-title{
        font-size:32px;
        text-align:center;
    }

    .philosophy-right{
        flex-direction:column;
        align-items:center;
        gap:40px;
    }

    .philosophy-points{
        order:1;
        max-width:100%;
        width:100%;
        line-height: 38px;
    }

    .philosophy-globe-container{
        order:2;
        width:240px;
        height:240px;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-top:10px;
    }

    .point-text{
        font-size:16px;
    }
    .point-arrow{
        width: 30px;
    }

    /* .point-arrow{
        opacity:1;
        transform:translateX(0) rotate(-45deg);
    } */

}
@media (max-width:480px){

    .philosophy-title{
      font-size:28px;
    }

    .point-text{
      font-size:15px;
    }
    .point-arrow{
        width:26px;
    }
     /* .point-arrow{
        opacity:1;
        transform:translateX(0) rotate(-45deg);
    } */

}