#servicesDropdownContainer {
    width: 100%;
    max-height: 0; /* Collapsed initially */
    height: 500px; /* This is the final height when expanded */
    position: absolute;
    flex-direction: row;
    opacity: 0; /* Start with hidden opacity */
    transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
    overflow: hidden; 
    margin-top:630px;
}
.servicesMainTitlesContainer {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.linkContainer{
    display:flex;
    width:350px;
    height:450px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.mainTitleWrapper {
    display: flex;
    width: 30%;
    height: 100%;
    justify-content: space-around;
    transition: transform 0.3s ease;
    background-color: blue;
    align-items: center;
    text-align: center;
    margin: auto;
    position: absolute;  
    z-index: 1;
    font-weight:200;
}
#servicesTitle1{
    width: 30%;
    margin-left: -62%;
    transition: margin-left 0.5s ease; /* Adjust duration and easing as needed */
    background: #6666ff;
    z-index: 100;
}
#servicesTitle2{
    margin-left:-2.6%;
    width: 30%;
    transition: margin-left 0.5s ease; /* Adjust duration and easing as needed */
    background: #33cc99;
        z-index: 1;
}
#servicesTitle3{
    margin-left:56%;
    width: 30%;
    transition: margin-left 0.5s ease; /* Adjust duration and easing as needed */
    background: #fd6868;
}
.mainTitle {
    width: 80%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Optional for better readability */
    font-size: 36px; /* big menu titles */
    margin-top:13%;
}
.servicesIcons{
    position:absolute;
    width:13%;
    margin-top:-20%;
}
.servicesLinks{
    line-height: 35px;
    color: white;
    font-weight: 100;
    font-size: 15px;
    letter-spacing: 0.3px;
    z-index: 1;
}
.blues a{
    color:#d3d3e2 !important;
}
.blues a:hover{
    color:white !important;
    font-weight:400 !important;
}
.hoverKriz, .hoverSosyalKriz, .hoverKulturelKurumsal, .hoverkurumsalCevik, .hoverCevikDonusum, .hoverIletisim, .hoverGaye, .hoverSurdur, .hoverMarka, .hoverCevikPaz, .hoverSosyalMed, .hoverYapay, .hoverVeri{
    font-weight:400 !important;
    color: white !important;
}
.greenish a{
    color:#d7eae4;
}
.greenish a:hover{
    color:white !important;
    font-weight:400 !important;
}
.redish a{
    color:#e7d6d6;
}
.redish {
    color:#e7d6d6;
}
.redish:hover {
    color:white;
}
.redish a:hover{
    color:white !important;
    font-weight:400 !important;
}
#servicesContent1 {
    flex-direction: column;
    width: 350px;
    height: 100%;
    background: #5050c9;
    text-align: left;
    align-items: left;
    justify-content: center;
    padding-left: 1%;
    margin-left: -31.3%; 
    display: flex;
    opacity: 0;
    position: absolute;
    transition: opacity 0.5s ease;
    z-index: 1;
}
#servicesContent2 {
    flex-direction: column;
    width: 350px;
    height: 100%;
    background: #2baa80;
    text-align: left;
    align-items: left;
    justify-content: center;
    padding-left: 1%;
    margin-left: 22.2%; 
    display: flex;
    opacity: 0;
    position: absolute;
    transition: opacity 0.5s ease;
}
#servicesContent3 {
    flex-direction: column;
    width: 350px;
    height: 100%;
    background: #b85c5c;
    text-align: left;
    align-items: left;
    justify-content: center;
    padding-left: 1%;
    margin-left: 82%; 
    display: flex;
    opacity: 0;
    position: absolute;
    transition: opacity 0.5s ease;
}
/*****servicesDropdownContainerFirst***************/
#servicesDropdownContainerFirst {
    width: 100%;
    max-height: 0; /* Collapsed initially */
    height: 500px; /* This is the final height when expanded */
    position: absolute;
    flex-direction: row;
    opacity: 0; /* Start with hidden opacity */
    transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
    overflow: hidden; 
}
.servicesMainTitlesContainerFirst {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.mainTitleWrapperFirst {
    display: flex;
    width: 30%;
    height: 100%;
    justify-content: space-around;
    transition: transform 0.3s ease;
    background-color: blue;
    align-items: center;
    text-align: center;
    margin: auto;
    position: absolute;  
    z-index: 1;
}
#servicesTitle1First{
    width: 30%;
    margin-left: -62%;
    transition: margin-left 0.5s ease; /* Adjust duration and easing as needed */
    background: #999;
    z-index: 100;
}
#servicesTitle2First{
    margin-left:-2.6%;
    width: 30%;
    transition: margin-left 0.5s ease; /* Adjust duration and easing as needed */
    background: #ff3366;
        z-index: 1;
}
#servicesTitle3First{
    margin-left:56%;
    width: 30%;
    transition: margin-left 0.5s ease; /* Adjust duration and easing as needed */
    background: #9933ff;
}
.mainTitleFirst {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Optional for better readability */
    font-size: 36px; /* big menu titles */
    margin-top:20%;
}
@media screen and (max-width:5001px) and (min-width:2550px){
.dropdownOld{
    padding-left:60px;
    padding-right:60px;
}
#arrow-up31,#arrow-up32 {
    margin-left: 125%; /* Space between text and arrow */
}
}
@media screen and (max-width:2551px) and (min-width:1851px){
.dropdownOld{
    padding-left:20px;
    padding-right:20px;
}
#arrow-up31,#arrow-up32 {
    margin-left: 125%; /* Space between text and arrow */
}
}
/*****responsive arrows up for the big menu desktop icon*******/
@media screen and (max-width:1850px) and (min-width:1451px){

#arrow-up31,#arrow-up32 {
    margin-left: 145%; /* Space between text and arrow */
}
}
@media screen and (max-width:1450px) and (min-width:1250px){
#arrow-up31,#arrow-up32 {
    margin-left: 150%; /* Space between text and arrow */
}
}
/*******************/
@media screen and (max-width:2500px) and (min-width:2100px) {
    
#servicesContent1,#servicesContent2,#servicesContent3 {
    flex-direction: column;
    width: 480px;
}
}
@media screen and (max-width: 1850px) and (min-width: 1450px) {

.dropdownOld{
    padding-left:10px;
    padding-right: 10px;
}
.servicesLinks{
    font-size: 15px;
}
.mainTitle, .mainTitleFirst {
    width: 80%;
    font-size: 32px; /* big menu titles */
}
}
@media screen and (max-width: 1450px) and (min-width: 1250px) {
#servicesDropdownContainer {
    width: 100%;
    max-height: 0; /* Collapsed initially */
    height: 500px; /* This is the final height when expanded */
    position: absolute;
    flex-direction: row;
    opacity: 0; /* Start with hidden opacity */
    transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
    overflow: hidden;
}
.servicesMainTitlesContainer {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
#services:hover{
    pointer:cursor;
}
.servicesLinks a{
    font-size: 14px;
}
.dropdownOld{
    padding-left:5px;
    padding-right: 5px;
    background:none;
}
.mainTitle, .mainTitleFirst {
    width: 80%;
    font-size: 32px; /* big menu titles */
    margin-top:25%;
}
.servicesIcons{
    position:absolute;
    width:15%;
    margin-top:-20%;
}
.servicesLinks{
    font-size: 15px;
}
#servicesContent1 {
    flex-direction: column;
    width: 450px;
}
#servicesContent2 {
    flex-direction: column;
    width: 350px;
    height: 100%;
    background: #2baa80;
    text-align: left;
    align-items: left;
    justify-content: center;
    padding-left: 1%;
    margin-left: 22.2%; /* Initially hidden off-screen */
    display: flex;
    opacity: 0;
    position: absolute;
    transition: opacity 0.5s ease;
}
#servicesContent3 {
    flex-direction: column;
    width: 350px;
    height: 100%;
    background: #b85c5c;
    text-align: left;
    align-items: left;
    justify-content: center;
    padding-left: 1%;
    margin-left: 82%; /* Initially hidden off-screen */
    display: flex;
    opacity: 0;
    position: absolute;
    transition: opacity 0.5s ease;
}
}