@font-face {
    font-family: 'Wotfard';
    src: url('/fonts/Wotfard-Regular.otf') format('opentype');
    font-weight: 400;
}

/* Wotfard Light (300) */
@font-face {
    font-family: 'Wotfard';
    src: url('/fonts/Wotfard-Light.otf') format('opentype');
    font-weight: 300;
}

/* Wotfard ExtraLight (200) */
@font-face {
    font-family: 'Wotfard';
    src: url('/fonts/Wotfard-ExtraLight.otf') format('opentype');
    font-weight: 200;
}




* {
    box-sizing: border-box;
}

body {
    background:transparent;
    font-family: 'Wotfard', sans-serif;
    margin:0;
}


/************* ELLIPSES *************/

.ellipse-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55%;
    height: 200px;
    position: relative;
}

.ellipse {
    position: absolute;
    width: 80px;
    height: 280px;
    border: 3px solid #333;
    border-radius: 50%;
    opacity: 1;
    transition: transform 1.5s ease-in-out, opacity 2s ease-in-out;
}

.ellipse-1 {
    border-color: white;
}

.ellipse-2 {
    border-color: white;
}

.ellipse-3 {
    border-color: white;
}

/* Initial State for Animation */
.ellipse.animate {
    opacity: 1;
}

/* Additional Animation States */
.ellipse.animate-1 {
    transform: rotate(51deg);
}

.ellipse.animate-2 {
    transform: rotate(-51deg);
}

.aiAnimationTexts{
position:absolute;
color:white;
font-size:26px;
font-weight:100;
opacity: 0;
transition: opacity 1.7s ease-in-out;

}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#aiAnimationText1{
margin-top:-140%;
animation: fadeIn 1.7s ease-in-out 3s forwards; /* 0.5s delay */
}

#aiAnimationText2{
margin-top:-40%;
margin-left: 139%;
animation: fadeIn 1.7s ease-in-out 3s forwards; /* 1s delay */
}

#aiAnimationText3{
margin-top:42%;
margin-left: 151%;
animation: fadeIn 1.7s ease-in-out 3s forwards; /* 1.5s delay */
}

#aiAnimationText4{
margin-top:152%;
animation: fadeIn 1.7s ease-in-out 3s forwards; /* 2s delay */
}

#aiAnimationText5{
margin-top:42%;
margin-left: -152%;
animation: fadeIn 1.7s ease-in-out 3s forwards; /* 2.5s delay */
}

#aiAnimationText6{
margin-top:-40%;
margin-left: -156%;
animation: fadeIn 1.7s ease-in-out 3s forwards; /* 3s delay */
}
#squareInAnimation{
width:17px;
height:17px;
background:#e8194e;
opacity:0;
transition: opacity 2s ease-in-out; /* Smooth transition for opacity */

}

#squareInAnimation {
    animation: fadeIn 1.5s ease-in-out 1.7s forwards; /* 3.5s delay */
}

/************SECTION SECOND PART ****************************************/

.section1{
    padding-top:3%;
}

#denkemImgContainer{
    width:100%;
    display:flex;
    justify-content:left;
}

#denklem{
    width:80%;
    margin-left:0px;
}

#secondPart{
    display:flex;
    flex-direction:column;
    background:#333;
    width:100%;
    margin:auto;
    padding-bottom:2%;
}

.secondPartContainers{
    width:70%;
    margin:auto;
}

#secondPartFirstContainer{

    margin:auto;

}


p{
    color:white;
    font-size:22px;
    line-height:40px;
}

#secondPartSecondContainer {
    display: flex;
    flex-direction: row;
    margin: auto;
    justify-content:center;
    text-align:center;
}

#secondPartSecondInnerContainer {
    display: flex;
    flex-direction: row;
    margin: auto;
    align-items: center; /* Align all items vertically */
    justify-content:space-around;
    text-align:center;
    width:80%;
}

.brackets {
    color: #3366ff;
    font-size: 120px;
    
}

.mathSymbols {
    color: #3366ff;
    font-size: 70px;
    font-weight:900;
    margin-top:100px;
    
}

.equationText {
    font-size: 40px;
    margin-top:70px;

}

#secondParthThirdInnerContainer{
    margin:auto;
    padding-top:2%;
}

.secondPartTitles{
    color:#3366ff;
    font-size:40px;
    padding-top:1%;
}

.secondPartLeftRightContainers{
    width:50%;
}

#secondPartThirdInnerContainerSecondContainer{
    width:100%;
    display:flex;
    flex-direction:row;
    padding-top:2%;
}
#secondPartThirdInnerContainerLeftContainer{
    width:50%;
    margin-top:-6%;
   
}

#secondPartThirdInnerContainerRightContainer{
    width:50%;
    display:flex;
    align-items: center;
    text-align:left;
        margin-top:-6%;

}
#vitruvian{
    display:block;
    width:80%;
    left:0;
    margin-top:10%;
}
 #aIText{
    font-size:30px;
    color:white;
    align-items: center;   
    line-height:40px;
}

/******EXPANDABLE BANDS GROUP******************************/

#firstBand{
    
    background:#3366ff;
    

}

#firstBandTitleConainer{
    width:100%;
    height:100px;
    display:flex;
    color:white;
    font-size:30px;
    align-items: center;
     
}


#firstBandTitleConainer{
    width:70%;
    margin:auto;
}

/*** expandable bands****/


.expandable {
    --xy-padding: 14px 14px 14px 0;
    width: 100%;
    background:#0098ff;
    font-size:30px;
    color:white;
    padding-left: 14%;
    padding-right: 15%;
}

#expandable-2{
    background: #00cbff;
}

#expandable-3{
    background: #6666ff;
}

.expandable--open .expandable__content-wrapper{
    grid-template-rows: 1fr;
    padding: 2%;
}

.expandable--open .expandable__arrow{
    transform: rotate(180deg) translateY(-260px);
    transition: 1.3s;
}

.expandable__title-bar{
    display: flex;
    align-items: center;
    user-select: none;
    padding: var(--xy-padding);
    cursor: pointer;
    align-items: center;


}

.expandable__content{
    line-height: 1.8;
    font-size: 0.80em;
    overflow: hidden; /* Prevents overflow during transition */

}

.expandable__content-wrapper{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s ease-in-out;
}

.expandable__circle{
    width: 50px;              
    height: 50px;             
    color: white;             
    font-size: 24px;          
    border-radius: 50%;      
    display: flex;           
    justify-content: center;  
    align-items: center;
    justify-content: center; /* Space out the children evenly */
    border: 1px solid white;
}

.expandable__title{
    padding-left: 1%;
}

.expandable__arrow {
   
    display: flex;              /* Use flexbox for positioning */
    flex-direction: column;     /* Arrange children vertically */
    align-items: center;        /* Center children horizontally */
    margin-left: auto;
    transition: transform 0.5s ease-in-out; /* A longer transition for closing animation */
    transform: rotate(0deg) translateY(0); 
    
}

.arrow-head {
    width: 0;                  /* No width */
    height: 0;                 /* No height */
    border-left: 10px solid transparent;  /* Make the left border transparent */
    border-right: 10px solid transparent; /* Make the right border transparent */
    border-top: 20px solid white;       /* Bottom border for arrow color */
}

.arrow-tail {
    width: 1px;               /* Width of the tail */
    height: 30px;              /* Height of the tail */
    background-color: white; /* Color of the tail */
}



.bulletItemContainers{
    display:flex;
    flex-direction:row;
    align-items: flex-start; /* Align all items vertically */
    
}

.bulletPoints{
    width:15px;
    height:15px;
    border: 1px solid white;
    background:none;
    border-radius: 50%;
    margin-right: 2%;
    flex-shrink: 0 !important;
    margin-top:16px;
}

.itemListings{
    font-weight:200;
}

.arrow-head-hidden {
    width: 0;                  /* No width */
    height: 0;                 /* No height */
    border-left: 10px solid transparent;  /* Left border to create arrow effect */
    border-right: 10px solid transparent; /* Right border to create arrow effect */
    border-bottom: 20px solid white;     /* Bottom border for arrow color */
}

.arrow-tail-hidden {
    width: 1px;               /* Width of the tail */
    height: 30px;              /* Height of the tail */
    background-color: white; /* Color of the tail */
}


@media screen and (max-width:1400px) and (min-width:1000px){
    #vitruvian{
    display:block;
    width:100%;
    left:0;
    margin-top:10%;
}

 #aIText{
    font-size:20px;
    color:white;
    align-items: center;   
    line-height:40px;
}

#secondPartThirdInnerContainerRightContainer{
   padding-left:2%;
}

}


@media screen and (max-width:1000px) and (min-width:300px){



#denkemImgContainer{
    width:100%;
    display:flex;
    justify-content:left;
}


.secondPartContainers{
    width:80%;
    margin:auto;
}


#secondParthThirdInnerContainer{
    margin:auto;
    padding-top:2%;
    width:100%;
}
    
    #secondPartThirdInnerContainerSecondContainer{
    width:100%;
    display:flex;
    flex-direction:column;
}

#secondPartThirdInnerContainerLeftContainer{
    width:100%;
   
}

#secondPartThirdInnerContainerRightContainer{
    width:100%;
    display:flex;
    align-items: center;
    text-align:left;

}
    
    #vitruvian{
    display:block;
    width:100%;
    left:0;
    margin-top:10%;
}

 #aIText{
    font-size:20px;
    color:white;
    align-items: center;   
    line-height:35px;
    padding-top:5%;
}

}

@media screen and (max-width:600px) and (min-width:300px){
    #firstBandTitleConainer{
    font-size:20px;
}
.expandable {
    font-size:20px;
}
.expandable__circle{
    width: 35px;              
    height: 35px;             
}
.bulletPoints{
    width:10px;
    height:10px;
    margin-right: 2%;
    flex-shrink: 0 !important;
    margin-top:8px;
}

}