/* Importing Fonts to be used in the WebPage */
/* I styled this CSS a little strange i wrapped some content that will be difficult
to style/make responsive inside of a media query before styling it like the section one,
instead of typing the css i created to separate media queries and nested the styling inside
Then for others that are easy to make responsive typed the css styling without nesting
it inside a media query, then created the media query within the styling like the contact 
modal and section two */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.6em;
    font-family: 'Jost', sans-serif;
}

body.loading {
    overflow: hidden;
}

/* ================== CODE FOR THE LOADING SCREEN ================================= */
.loadingScreen{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    max-width: 100vw;
    width: 100%;
    background-color: #130951;
    z-index: 2000;
}

.loader {
width: 100px;
aspect-ratio: 1;
border-radius: 50%;
border: 5px solid #3c00ff;
animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}

.loaderLogo{
    position: absolute;
    width: 50px;
    color: #3c00ff;
    animation: loaderIcon 1s ease-in-out 0s infinite normal forwards;
}

@keyframes l20-1{
0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
0%    {transform:scaleY(1)  rotate(0deg)}
49.99%{transform:scaleY(1)  rotate(135deg)}
50%   {transform:scaleY(-1) rotate(0deg)}
100%  {transform:scaleY(-1) rotate(-135deg)}
}

@keyframes loaderIcon{
    0%{
        transform: scale(100%);
    }
    50%{
        transform: scale(75%);
    }
    100%{
        transform: scale(100%);
    }
}

.textCopied{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    width: 160px;
    color: white;
    z-index: 10000;
    left: 50%;
    top: 20px;
    transform: translate(-50%, -150%);
    background-color: #00000060;
    backdrop-filter: blur(10px);
    color: #54d465;
    transition: 0.5s ease;
}

.textCopied.active{
    transform: translate(-50%, 0%);
}

.tickerContainer{
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 25px;
    width: 25px;
    padding: 3px;
    color: white;
    background-color: #54d465;
    border-radius: 50%;
}

.tickerContainer::before{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '';
    width: 0;
    height: 0;
    background-color: #00000000;
    border: 2px solid #54d465;
    animation: checkmarkCirle 0.8s ease forwards;
    opacity: 1;
    border-radius: 50%;
}

.tickerDots{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style: none; /* Remove default list styling */
    padding: 0;
    margin: 0;
}

.tickerDot{
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: #54d465;
    border-radius: 50%; /* Make the dots circular */
    opacity: 0; /* Start hidden */
    animation: spreadOut 0.8s ease forwards; /* Apply the animation */
}

@keyframes spreadOut {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0); /* Start at the center */
    }
    50% {
        opacity: 1;
        transform: translate(var(--x), var(--y)) scale(1); /* Move to unique positions */
    }
    100% {
        opacity: 0;
        transform: translate(var(--x), var(--y)) scale(1); /* Move to unique positions */
    }
}

/* Assign unique positions to each dot using CSS variables */
.tickerDot:nth-child(1) { --x: -10px; --y: -10px; }
.tickerDot:nth-child(2) { --x: 10px; --y: -10px; }
.tickerDot:nth-child(3) { --x: -10px; --y: 10px; }
.tickerDot:nth-child(4) { --x: 13px; --y: 10px; }
.tickerDot:nth-child(5) { --x: -18px; --y: 0; }
.tickerDot:nth-child(6) { --x: 18px; --y: 0; }


@keyframes checkmarkCirle {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
        
    }
    50% {
        width: 130%;
        height: 130%;
        opacity: 1;
    }
    100% {
        width: 130%;
        height: 130%;
        opacity: 0;
    }
    
}

.tickerSvg {
    width: 100%;
    margin: 1px 0px 0px 1px;
}

.tickerLine{
    stroke-dasharray: 52.5; /* Total length of the path */
    stroke-dashoffset: 52.5; /* Start with the path hidden */
    animation: drawCheckmark 1s ease 0.2s forwards;
}

@keyframes drawCheckmark {
    to {
        stroke-dashoffset: 0;
    }
}

/* =============================== END OF CODE FOR THE LOADING SCREEN ======================= */


@media (min-width: 801px) {
    /* Styling for the first section to make it occupy the screen */
    .sectionOne{
        position: relative;
        max-width: 100vw;
        width: 100%;
        min-height: 100vh;
        height: 100%;
        overflow: hidden;
    }


    /* Nav bar styling */
    nav.navBar{
        position: fixed; 
        display: flex;
        width: 100vw;
        justify-content: space-between;
        align-items: center;
        padding: 20px 80px 20px 20px;
        z-index: 100;
        /* background-color:rgba(0, 0, 0, 0.122) ; */

    }

    nav.navBar img.logo{
        width: 150px; /* To adjust the logo Size*/
        margin-right: 20px;
    }

    .navItems{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    

    nav.navBar ul{
        display: flex;
        justify-content: space-evenly;
        min-width: 500px; /*Adjust nav bar links spacing*/
        width: 100%;
    }

    /* navbar links styling */
    nav.navBar ul li{
        display: flex;
        margin-right: 10px;
        list-style: none;
        font-weight: bold;
    }

    .mobNavIcons{
        display: none;
        color: white;
        width: 25px;
    }

    nav.navBar ul li a{
        /* This position relative is necessary to make the :after hover effects function properly */
        position: relative;
        text-decoration: none;
        color: #ffffff;
    }
    nav ul li a.navActive {
        transition: 0.3s ease;
        color: #3c00ff; /* active text color */
    }
    /* nav bar links hover effect */
    nav ul li a::after{
        content: '';
        width: 0;
        height: 3px;
        position: absolute;
        /* border-radius: 5px; */
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        transition: width 0.5s;
    }

    nav ul li a:hover::after{
        width: 100%;
    }
    nav ul li a.navActive::after {
        width: 100%;
        background-color: #3c00ff; /* active after element color */
      }



    .share-icon{
        position: relative;
        color: #ffffff;
        width: 25px;
        cursor: pointer;
        transition: color 0.2s;
    }

    .share-icon:hover{
        color: #3c00ff;
    }

    .svgIcons{
        position: relative;
    }
    /* Share icon dropdown menu */
    .navShareExpanded{
        position: absolute;
        display: none;
        align-items: center;
        justify-content: space-between;
        width: 140px;
        padding: 20px 10px;
        border-radius: 5px;
        top: 40px;
        right: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.425);
        box-shadow: 1px 1px 5px black;
        backdrop-filter: blur(10px);
        cursor:default;
    }

    .navSocialsLink{
        opacity: 0;
    }

    .navSocialsLink:nth-child(1).shareIconsAnimate{
        animation: SocialsSlideInAnim 0.2s linear 0.1s 1 normal forwards;
    }.navSocialsLink:nth-child(2).shareIconsAnimate{
        animation: SocialsSlideInAnim 0.2s linear 0.3s 1 normal forwards;
    }.navSocialsLink:nth-child(3).shareIconsAnimate{
        animation: SocialsSlideInAnim 0.2s linear 0.5s 1 normal forwards;
    }

    @keyframes SocialsSlideInAnim {
        0%{
            opacity: 0;
            transform: translateX(20px);
        }
        100%{
            opacity: 100;
            transform: translateX(0px);
        }
        
    }

    /* Individual Social Media Icon */
    .navSocialsIcon{
        position: relative;;
        width: 25px;
        color: #fff;
        margin: 4px 5px 0px 5px;
        transition: 0.2s ease-in-out;
    }

    .navSocialsIcon:hover{
        color: #3c00ff;
    }


    /* Section slider styling */
    .sectOnePageSlider{
        position: relative;
        width: 100vw;
        height: 100vh;
        display: block;
        text-align: center;
        top: 100px;
    }

    .pageSliderItem h1{
        margin-top: 100px;
        font-family: 'Orbitron', monospace;
        font-size: 60px;
        color: white;
    }

    .pageSliderItem p{
        font-size: 20px;
        font-family: 'Oxanium', monospace;
        max-width: 800px;
        margin: 20px 0px 60px 0px;
        color: white;
    }

    /* .slideShow img{
        display: block;
        position:absolute;
        top: -0;
        left: 0;
        z-index: -1;
        object-fit: cover;
        width: 1600px;
    } */

    /* This style goes for all the buttons with this effect */
    .pageSliderButton{
        cursor: pointer;
        position: relative;
        display: flex;
        align-items: center;
        justify-self: center;
        /* width: 10%; */
        background-color: #3c00ff;
        color: white;
        padding: 15px 20px;
        width: 200px;
        font-size: 17px;
        text-decoration: none;
        text-align: center;
        /* overflow: hidden; */
        border: 2px solid #00000000;
        transition: border 0.3s ease ;
    }

    .pageSliderItem.animate h1{
        animation: headSlidein 0.4s linear 0.6s 1 normal forwards;
        opacity: 0;

    }

    .pageSliderItem.animate p{
        animation: pSlideIn 0.4s linear 0.4s 1 normal forwards;
        opacity: 0;
    }

    .pageSliderButton.animate{
        animation: ButtonSlideIn 0.4s linear 0.6s 1 normal forwards;
        opacity: 0;
    }

    @keyframes headSlidein {
        0%{
            opacity: 0;
            transform: translate(20px, -20px);
        }
        100%{
            opacity: 100;
            transform: translate(0px, 0px);
        }
        
    }


    @keyframes pSlideIn {
        0%{
            opacity: 0;
            transform: translateX(-40px);
        }
        100%{
            opacity: 100;
            transform: translateX(0px);
        }
        
    }


    @keyframes ButtonSlideIn {
        0%{
            opacity: 0;
            transform: translateY(30px);
        }
        100%{
            opacity: 100;
            transform: translateX(0px);
        }
        
    }

    .pageSliderButton:hover{
        border: 2px solid #000000;
    }

    .pageSliderButton span{
        width: 100%;
        z-index: 5;
    }

    .pageSliderButton::before{
        content: '';
        width: 0;
        height: 90%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        background: #000000;
        transition: width 0.5s, opacity 0.5s linear, height 0.3s linear;
    }

    .pageSliderButton:hover::before{
        width: 100%;
        opacity: 1;
        height: 100%;
    }


    .slider{
        width: 1600px;
        height: 100vh;
        margin: auto;
        position: absolute;
        top: -100px;
        overflow: hidden;
    }
    .slider .list{
        position: absolute;
        width: 100%;
        min-height: 100vh;
        /* height: auto; */
        left: 0;
        display: flex;
        flex-direction: column;
        transition: 1s;
    }
    .slider .list img{
        margin-top: -150px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .Mb-SectionOneBG{
        display: none;
    }

    .slider .item{
        position: relative;
        width: inherit;
        height: inherit;
    }

    .slider .pageSliderItem {
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 30%;
        left: 50vw;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .slider .buttons{
        position: absolute;
        top: 50%;
        left: 5vw;
        width: 90vw;
        display: flex;
        justify-content: space-between;
    }
    .slider .buttons button{
        cursor: pointer;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #220d67;
        color: #fff;
        border: none;
        font-family: monospace;
        font-size: 20px;
        font-weight: bold;
        transition: transform 0.1s ease;
    }
    .slider .buttons button:active{
        transform: translate(2px, 2px);
    }
    .slider .dots{
        position: absolute;
        bottom: 10px;
        left: 0;
        color: #fff;
        width: 100vw;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
    }
    .slider .dots li{
        list-style: none;
        width: 10px;
        height: 10px;
        background-color: #fff;
        margin: 10px;
        border-radius: 20px;
        transition: 0.5s;
    }
    .slider .dots li.active{
        width: 30px;
    }
/*===================End of styling for section one=================================== */
    
}

/* -------------------------Contact Us Modal Styling-------------------------- */
.modal{
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.61);
}

.modalContent{
    display: block;
    position: fixed;
    z-index: 200;
    background-color: #160844;
    color: white;
    height: 600px;
    width: 450px;
    font-size: 17px;
    font-weight: 600;
    transform: translateY(0%);
    opacity: 1;
    border-radius: 5px;
    transition: transform 0.5s;
}

.modalContent.animateModal{
    animation: modalSlideIn 0.3s linear 0s 1 normal forwards;
    opacity: 0;
}

@keyframes modalSlideIn {
    0%{
        opacity: 0;
        transform: translateY(20px);
    }
    100%{
        opacity: 100;
        transform: translateY(0px);
    }
    
}

.modalTitle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(31, 0, 135, 0.507);
    padding: 20px 30px;
}

.modalTitle p{
    font-size: 20px;
    transition: color 0.2s ease;
    cursor: pointer;
}
.modalTitle p:hover{
    color: #3c00ff;
}
.modalTitle p:active{
    color: #3c00ff;
    transform: translate(-1px,1px);
}

.modalBody{
    display: flex;
    flex-direction: column;
    padding: 20px 30px;
}

.modalBody input{
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    margin: 10px 0px;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.305);
    color: white;
    outline: none;
    border: 1px solid #cb373700;
    font-weight: bold;
}

.phoneAndCountryCode{
    display: flex;
    gap: 10px;
}

.phoneAndCountryCode .countryCode{
    max-width: 100px;
    flex-grow: 0;
}


.contactInputfield{
    position: relative;
}
.contactInputfield label{
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 12px;
    color: #cb3737;
}

.modalBody textarea{
    position: relative;
    width: 100%;
    margin: 10px 0px;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.305);
    border: 1px solid #cb373700;
    color: white;
    outline: none;
    border: none;
    height: 150px;
    resize: none;
    font-weight: bold;
}

.modalBody input::placeholder,
.modalBody textarea::placeholder{
    color: #40457d;
    font-weight: bold;
}
.modalBody textarea::-webkit-scrollbar {
    position: relative;
    width: 7px;
    /* padding: 25px; */
} 
.modalBody textarea::-webkit-scrollbar-track {
    background-color: none;
    border-radius: 10px;
}
.modalBody textarea::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 10px;

}
.modalBody textarea::-webkit-scrollbar-thumb:hover {
    background: #989898;
}

.modalBody button,.buttonStyle2{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin: 10px 0px;
    padding: 10px 15px;
    color: white;
    outline: none;
    border: 2px solid #00000000;
    background-color: #3c00ff;
    font-size: 17px;
    cursor: pointer;
    /* overflow: hidden; */
    transition: background-color 0.3s linear 0.1s;
}

.modalBody button:hover,.buttonStyle2:hover{
    background-color: #3c00ff00;
}

.modalBody button span,.buttonStyle2 span{
    width: 100%;
    z-index: 5;
}

.modalBody button::before, .buttonStyle2::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    background: #3c00ff;
    transition: width 0.5s, opacity 0.5s linear 0.2s, height 0.3s linear 0.2s, background 0.2s linear 0.2s;
    pointer-events: none;
}

.modalBody button::after, .buttonStyle2::after{
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(110%, 150%);
    position: absolute;
    border: 2px solid #ffffff00;
    transition: 0.4s ease .03s;
    pointer-events: none;
}

.modalBody button:hover::before, .buttonStyle2:hover::before{
    width: 80%;
    opacity: 1;
    height: 80%;
    background: #3c00ff05;
}

.modal button:hover::after,.buttonStyle2:hover::after{
    transform: scale(100%, 100%);
    border: 2px solid #ffffff;
    left: 0;
}

.modalBody input:-webkit-autofill,
.modalBody input:-webkit-autofill:hover, 
.modalBody input:-webkit-autofill:focus,
.modalBody textarea:-webkit-autofill,
.modalBody textarea:-webkit-autofill:hover,
.modalBody textarea:-webkit-autofill:focus,
.modalBody select:-webkit-autofill,
.modalBody select:-webkit-autofill:hover,
.modalBody select:-webkit-autofill:focus {
  /* border: 1px solid #43434600; */
  -webkit-text-fill-color: #F1F1F1;
  -webkit-box-shadow: 0 0 0px 1000px  #0F062F inset;
  background-clip: padding-box; /* Ensures background color does not bleed */
  background-color:  rgba(0, 0, 0, 0.305);
  transition: background-color 5000s ease-in-out 0s;
}


.shake {
    animation: shake 0.5s;
  }
  
  @keyframes shake {
    0% {
      transform: translateX(0);
    }
    20% {
      transform: translateX(-5px);
    }
    40% {
      transform: translateX(5px);
    }
    60% {
      transform: translateX(-5px);
    }
    80% {
      transform: translateX(5px);
    }
    100% {
      transform: translateX(0);
    }
  }

@media (max-width:800px) {
    .modal{
        align-items: center;
        justify-content: center;
    }
    .modalContent{
        display: block;
        height: auto;
        width: 300px;
    }

    .modalTitle{
        border-bottom: 1px solid rgba(31, 0, 135, 0.507);
        padding: 10px 20px;
    }
    
    .modalTitle h2{
        font-size: 16px;
    }

    .modalTitle p{
        transition: color 0.2s ease;
        cursor: pointer;
    }
    .modalTitle p:active{
        color: #3c00ff;
        transform: translate(-1px,1px);
    }
    
    .modalBody{
        display: flex;
        flex-direction: column;
        padding: 20px 30px;
    }
    
    .modalBody input{
        height: 40px;
        margin: 12px 0px;
        padding: 10px 10px;
        font-size: 12px;        
    }

    .contactInputfield label{
        left: 0;
        top: -10px;
        font-size: 10px;
    }

    .modalBody .countryCode{
        min-width: 80px;
        max-width: 80px;
    }
    
    .modalBody textarea{
        margin: 10px 0px;
        padding: 10px 15px;
        height: 120px;
        font-size: 12px;        
    }

    .modalBody button{
        width: 100%;
        height: 40px;
        margin: 10px 0px;
        padding: 10px 15px;
        font-size: 15px;
        background-color: #3c00ff;
        transition: none;
    }

    .modalBody button::before,
    .modalBody button::after {
        content: none;
        transition: none;
    }  
}


/* ======================Section two styling========================================== */
.sectionTwo{
    position: relative;
    padding: 40px 50px;
    min-height: 100vh;
    max-width: 100vw;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    background-color: #130951;
    /* overflow: hidden; */
}

.sectionTwoLeft{
    /* display: flex; */
    position: relative;
    overflow: hidden;
    flex-basis: 30%;
    height: 620px;
    margin-right: 10px;
    background-image: url(/images/gettyimages-2012746941-1000x1000.jpg);
    background-position: center;
    background-size: cover;
    opacity: 0;
}

.sectionTwoLeft.animateSection2-1{
    animation: section2Anim-1 0.5s linear 0s 1 normal forwards;
    opacity: 0;
}

@keyframes section2Anim-1 {
    0%{
        opacity: 0;
        transform: translateY(50px);
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 100;
        transform: translateY(0px);
    }
    
}

.sectionTwoLeft img{
    display: none;
}

.sectionTwoRight{
    /* position: relative; */
    flex-basis: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* justify-content: center; */
}

.servicesFirstTwo, .servicesLastTwo{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.servicesFirstTwo.animateSection2-2{
    opacity: 0;
    animation: section2Anim-2 0.3s linear 0.4s 1 normal forwards;
}
@keyframes section2Anim-2 {
    0%{
        opacity: 0;
        transform: translateX(40px);
    }
    100%{
        opacity: 100;
        transform: translateY(0px);
    }
    
}

.servicesFirstTwo, .servicesThree, .servicesFour{
    opacity: 0;
}

.servicesThree.animateSection2-3{
    opacity: 0;
    animation: section2Anim-3 0.3s linear 0.6s 1 normal forwards;
}
@keyframes section2Anim-3 {
    0%{
        opacity: 0;
        transform: translateX(40px);
    }
    100%{
        opacity: 100;
        transform: translateY(0px);
    }
    
}

.servicesFour.animateSection2-4{
    opacity: 0;
    animation: section2Anim-4 0.3s linear 0.8s 1 normal forwards;
}
@keyframes section2Anim-4 {
    0%{
        opacity: 0;
        transform: translateX(40px);
    }
    100%{
        opacity: 100;
        transform: translateY(0px);
    }
    
}



@media (max-width:1057px) {
    .sectionTwo{
        justify-content: center;
        padding: 0px 50px;

    }
    .sectionTwoLeft{
        flex-basis: 90%;
        margin-right: 0px;
        flex-shrink: 1;

    }
    .sectionTwoRight{
        flex-basis: 100%;
        justify-content: center;
        margin-top: 20px;
    }
}


@media (max-width:800px) {
    .sectionTwo{
        justify-content: center;
        padding: 50px 20px;
        min-height: 150vh
    }

    .sectionTwoLeft{
        flex-basis: 100%;
        margin-right: 0px;
        flex-shrink: 0;
        height: 300px;
    }

    .services{
        flex-grow: 1;
    }

    .sectionTwoRight{
        flex-wrap: wrap;
        flex-basis: 100%;
        justify-content: center;
        margin: 20px 0px;
    }

    .servicesFirstTwo,.servicesLastTwo{
        display: flex;
        flex-basis: 100%;
        justify-content: center;
        /* flex-direction: column; */
        flex-wrap: wrap;
        
    }
}
@media (max-width:679px) {
    .sectionTwoLeft{
        flex-basis: 100%;
    }

    .services{
        max-height: 400px;
        padding: 20px;
        flex-grow: 1;
        margin: 0;
    }
}
   
@media (max-width:400px) {
    .sectionTwoLeft{
        flex-basis: none;
        width: 300px;
    }
    
    .services{
        max-width: 280px;
        max-height: 300px;
        padding: 20px;
    }
}

.services{
    display: flex;
    /* float: left; */
    position: relative;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    background-color: #1E0683;
    padding: 50px 20px;
    width: 300px;
    height: 300px;
    margin: 0px 10px 20px 10px;
    box-shadow: 1px 1px 20px 1px rgba(0, 0, 0, 0.397);
    transition: 0.3s;
}

.servicesOne{
    justify-content: center;
}
.servicesOne h2{
    font-family: 'Poppins', sans-serif;
    position: relative;
    margin-bottom: 40px;
}

.viewServiceLink{
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-self: center;
    background-color: #3c00ff;
    color: white;
    padding: 15px 20px;
    width: 200px;
    font-size: 17px;
    text-decoration: none;
    text-align: center;
    border: 2px solid #00000000;
    transition: border 0.3s ease ;
}

.viewServiceLink:hover{
    border: 2px solid #000000;
}

.viewServiceLink span{
    width: 100%;
    z-index: 5;
}

.viewServiceLink::before{
    content: '';
    width: 0;
    height: 90%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    background: #000000;
    transition: width 0.5s, opacity 0.5s linear, height 0.3s linear;
}

.viewServiceLink:hover::before{
    width: 100%;
    opacity: 1;
    height: 100%;
}


.services h2{
    position: relative;
    display: flex;
    justify-content: center;
    font-size: 23px;
    width: 100%;
    font-weight: bolder;
    color: white;
    text-align: center;
    transition: 0.2s;
    letter-spacing: 0.05em;
}

.servicesTwoHeader h2::before,
.servicesOne h2:before{
    content: '';
    width: 50px;
    height: 2px;
    position: absolute;
    border-radius: 5px;
    bottom: -15px;
    /* left: 40%; */
    /* transform: translateX(-50%); */
    transform: scaleX(100%);
    background: #fff;
    transition:0.2s;
}

.services p{
    font-size: 16px;
    text-align: center;
    color: white;
}

.servicesTwoHeader{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.servicesTwoHeader h2{
    color: white;
    margin: 25px;
    font-size: 18px;
}

.servicesTwoHeader .servicesIcon {
    width: 50px;
    z-index: 1;
    color: white;
}
.triIcon{
    top: 20px;
    color: #ffffff41;
    position: absolute;
    width: 80px;
    transform: rotate(15deg);
    transition: transform 0.2s;
}

.services:hover{
    box-shadow: 1px 1px 20px 1px rgb(0, 0, 0);
}.services h2:hover{
    color: #3c00ff;
}
.services:hover h2{
    letter-spacing: 0.15em;
}.services:hover h2::before,
.services:hover h2::before{
    background-color: #3c00ff;
    width: 100px;
    transform: scaleX(-100%);
}
.services:hover .triIcon{
    transform: rotate(0deg);
}
/* ================================ END OF SECTION TWO STYLING ============================== */

/* ==========================START OF SECTION THREE STYLING================================== */
/* Section styling */
.sectionThree{
    position: relative;
    display: flex;
    align-self: flex-start;
    justify-content: space-between;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
    max-width: 100vw;
    width: 100%;
    padding: 20px;
    background-color: #160844;
}

/* Section three top styling */
.sectionThreeTop{
    position: relative;
    display: flex;
    color: white;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: flex-start;
    /* min-height: 50vw; */
    padding: 50px 0px;
}

/* Section three left */
.sectionThreeLeft{
    display: flex;
    position: relative;
    flex-basis: 40%;
    margin-left: 20px;
    flex-shrink: 1;
}

/* h2 for the years of experience text  */
h2.experienceNo{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-weight: bold;
    padding: 0px 20px;
    background: linear-gradient(90deg, rgb(0,153,255) 0%, rgb(0,43,228) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    z-index: 5;
    /* transform: translateY(20px); */
    animation: experienceNoAnim 5s ease-in-out 0s infinite normal forwards;
}

/* Bounce animation of the experience text */
@keyframes experienceNoAnim{
    0%{
        transform: translateY(20px);
    }
    50%{
        transform: translateY(0px);
    }
    100%{
        transform: translateY(20px);
    }
}

/* experienceNum Div to match the font size and height to the experience text to the ghost text */
.experienceNum{
    font-size: 450px;
    height: 350px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* styling for the ghost text */
h2.slinky1, h2.slinky2, h2.slinky3{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-weight: bold;

}

/* Seperate unique styling for the ghost text */
h2.slinky1{
    top: 0px;
    left: 19px;
    background: linear-gradient(90deg, rgba(0,153,255,0.6) 0%, rgb(0,43,228,0.6) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    z-index: 3;
}

h2.slinky2{
    top: 0px;
    left: 19px;
    background: linear-gradient(90deg, rgba(0,153,255,0.3) 0%, rgb(0,43,228,0.3) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    z-index: 2;
}

h2.slinky3{
    top: 0px;
    left: 19px;
    background: linear-gradient(90deg, rgba(0,153,255,0.15) 0%, rgb(0,43,228,0.15) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    z-index: 2;
}



/* Experience details styling */
.experienceContent{
    display: flex;
    flex-direction: column;
}
.experienceTitle{
    font-size: 40px;
    padding: 0px 30px;
    font-weight: bold;
    letter-spacing: 0.1em;
    border-left: 5px solid #1E0683;
    color: #3c00ff;
    font-family: 'Montserrat', sans-serif;
}

.experienceDetails{
    margin: 30px 0px;
    display: flex;
    width: 350px;
    font-size: 18px;
    text-align: justify;
    flex-wrap: wrap;
}

/* Section three right styling */
.sectionThreeRight{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    max-width: 400px;
    flex-basis: 40%;
    overflow: hidden;
    flex-grow: 1;
}

/* Styling of the table housing the work details */
.sectionThreeTable{
    border-collapse: collapse;
}
.sectionThreeTable tr{
    width: 100%;
    height: 200px;
}
.sectionThreeTable td{
    text-align: center;
    border: 1px solid #2a01b1;
    padding: 20px;
}
/* Inner border effect for the table */
.sectionThreeTable tr td:first-child {
    border-left: none; /* Remove left border for the first column */
}
.sectionThreeTable tr td:last-child {
    border-right: none; /* Remove right border for the last column */
}
.sectionThreeTable tr:first-child td {
    border-top: none; /* Remove top border for the first row */
}
.sectionThreeTable tr:last-child td {
    border-bottom: none; /* Remove bottom border for the last row */
}
/* Table h2 styling */
.sectionThreeTable td h2{
    font-size: 70px;
    font-family: 'Lato';
}

/*sectionThreeBottom Styling*/
.sectionThreeBottom{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 60px;
    min-height: 20vh;
    max-width: 100vw;
}

/* techWeUseImgsContainer container styling */
.techWeUSeImgsContainer{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    cursor: pointer;
    height: 90px;
    border: 2px solid #000;
    background-color: #130951;
    margin: 0px 10px;
    transition: 0.3s;
    flex-shrink: 1;
    opacity: 0;
    z-index: 10;

}

.techWeUSeImgsContainer:hover{
    border: 2px solid #00000000;
}

/* techWeUse images styling */
.techWeUSeImgs{
    position: relative;
    width: 80px;
}

/* Hover Effect transition */
.techWeUSeImgsContainer::after{
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    transform: scale(110%, 115%);
    border: 2px solid #2a01b100;
    width: inherit;
    height: inherit;
    transition: 0.5s;
}

.techWeUSeImgsContainer:hover::after{
    transform: scale(100%, 100%);
    border: 2px solid #2a01b1;
}

/* Silde in animation for the section three bottom images */
.techWeUSeImgsContainer.section3BottomAnim{
    opacity: 0;
    animation: section3AnimBtm 0.3s linear 0.8s 1 normal forwards;
}
.techWeUSeImgsContainer.section3BottomAnim:nth-child(1) {
    animation-delay: 0.2s;
 }
 .techWeUSeImgsContainer.section3BottomAnim:nth-child(2) {
    animation-delay: 0.4s;
 }
 .techWeUSeImgsContainer.section3BottomAnim:nth-child(3) {
    animation-delay: 0.6s;
 }
 .techWeUSeImgsContainer.section3BottomAnim:nth-child(4) {
    animation-delay: 0.8s;
 }
 .techWeUSeImgsContainer.section3BottomAnim:nth-child(5) {
    animation-delay: 1.0s;
 }
@keyframes section3AnimBtm{
    0%{
        opacity: 0;
        transform: translateX(40px);
    }
    100%{
        opacity: 100;
        transform: translateX(0px);
    }
    
}



/* ==========================END OF SECTION THREE STYLING================================== */


/* ==========================START OF SECTION FOUR STYLING================================== */
/* Section Four styling */
.sectionFour{
    position: relative;
    display: flex;
    font-family: sans-serif;
    align-self: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: space-around;
    min-height: 100vh;
    height: 100%;
    max-width: 100vw;
    width: 100%;
    padding: 20px 20px;
    background-color: #001b48;
    color: white;
}

/* Section Four Left */
.sectionFourLeft{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 450px;
    flex-basis: 35%;
    opacity: 0;
    /* flex-grow: 1; */
}

/* Slide in animation for the section four left */
.sectionFourLeft.section4LeftAnim{
    opacity: 0;
    animation: section4AnimLeft 0.3s linear 0s 1 normal forwards;
 }
@keyframes section4AnimLeft{
    0%{
        opacity: 0;
        transform: translateX(-40px);
    }
    100%{
        opacity: 100;
        transform: translateX(0px);
    }
    
}

/* Section four left header */
.sectionFourLeft>h2{
    font-size: 40px;
    font-family: 'Montserrat', sans-serif;
}

/* Section for left pagination container*/
.section4leftPagination{
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-basis: 100%;
    /* background-color: #3c00ff; */
    gap: 40px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.section4leftPagination div{
    max-height: 50px;
}

/* This is for the underline effect underneath the pagination in section four */
.section4leftPagination::before{
    content: '';
    position: absolute;
    width: 100%;
    top: 55px;
    height: 4px;
    background-color: #354f7d;
    border-radius: 5px;
    /* overflow: hidden; */
}
/* This is for the effect to underlines which one is active in the section four*/
.sect4Pgn1::before, .sect4Pgn2::before, 
.sect4Pgn3::before, .sect4Pgn4::before{
    content: '';
    position: absolute;
    left: 0;
    top: 55px;
    width: 0px;
    height: 4px;
    border-radius: 5px;
    background-color: #3c00ff;
    transition: width 0.5s ;
}

/* This is to underline the pagination that was clicked */
.sect4Pgn1.sec4PagnActive::before,.sect4Pgn2.sec4PagnActive::before,
.sect4Pgn3.sec4PagnActive::before, .sect4Pgn4.sec4PagnActive::before{
    width: 50px;
  }
  .sect4Pgn1.sec4PagnActive,.sect4Pgn2.sec4PagnActive,
  .sect4Pgn3.sec4PagnActive, .sect4Pgn4.sec4PagnActive{
      color: #3c00ff;
    }


/* Individual Pagination styling */
.section4leftPagination div{
    position: relative;
    font-size: 30px;
    font-family: 'Poppins',sans-serif;
    cursor: pointer;
    height: inherit;
    transition: color 0.2s ease;
}
/* Hover effect */
.section4leftPagination div:hover{
    color: #3c00ff;
}
/* The section four Pagination content */
.sect4LeftPgnContent{
    position:absolute;
    /* height: 0px; */
    /* inset: 0; */
    flex-direction: column;
    text-align: justify;
    flex-grow: 0;
    width: 34vw;
    margin-top: 30px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* This is to transition the pagination*/
.sect4LeftPgnContent.sec4PagnActive {
    opacity: 1;
}

/* This is for the Section Four section header */
.sect4LeftPgnHeader{
    position: relative;
    font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
    margin-bottom: 10px;
}

/* This is for the section four section detail */
.sect4LeftPgnDetail{
    position: relative;
    font-size: 20px;
}

/* This is for the button */
.sect4LftPgnButton{
    display: flex;
    gap: 20px;
    margin-top: 30px;
    justify-content: space-between;
    align-items: center;
}
.learnmore-btn{
    margin-left: 20px;
    text-decoration: none;
}


/* Style of the button on the button 3 style */
.buttonStyle3{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin: 10px 0px;
    padding: 10px 15px;
    color: white;
    outline: none;
    border: none;
    border: 2px solid white;
    background-color: #3c00ff00;
    font-size: 17px;
    cursor: pointer;
    /* overflow: hidden; */
    transition: border 0.2s linear 0.1s, 0.5s color ease;
}

/* Hover effect */
    .buttonStyle3:hover{
        border: 2px solid rgba(255, 255, 255, 0);
        color: #3c00ff;
    }

    .buttonStyle3::before{
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 50%;
        border: 2px solid #3c00ff00;
        transform: translate(-40%, -50%);
        transition: 0.5s ease;
        pointer-events: none;
    }

    .buttonStyle3:hover::before{
        transform: translate(-50%, -0%);
        border: 2px solid #3c00ff;
    }

    /* Sectoin Four Right */
    .sectionFourRight{
        flex-basis: 40%;
        display: flex;
        align-items: center;
        gap: 15px;
        opacity: 0;
    }

    /* slide in animation for the section four right */
    .sectionFourRight.section4RightAnim{
        opacity: 0;
        animation: section4AnimRight 0.3s linear 0s 1 normal forwards;
    }
    @keyframes section4AnimRight{
        0%{
            opacity: 0;
            transform: translateX(40px);
        }
        100%{
            opacity: 100;
            transform: translateX(0px);
        }
        
    }


.sectionFourRight img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 6px; */
}
  .sect4SliderImg{
    width: 100px;
    /* border-radius: 6px; */
    cursor: pointer;
    position: relative;
    transition: 0.7s ease;
    overflow: hidden;
  }

  .sect4SliderImg.active {
    width: 300px !important;
    height: 400px !important;
    /* Other styles */
  }

  .sectionFourRight .sect4SliderImg:first-child, .sectionFourRight .sect4SliderImg:last-child{
    height: 300px;
  }
  .sectionFourRight .sect4SliderImg:nth-child(2), .sectionFourRight .sect4SliderImg:nth-child(6){
    height: 350px;
  }
  .sectionFourRight .sect4SliderImg:nth-child(3), .sectionFourRight .sect4SliderImg:nth-child(4), 
  .sectionFourRight .sect4SliderImg:nth-child(5){
    height: 400px;
  }
  .sect4SliderImg h1{
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    color: #fff;
    position: absolute;
    top: 50%;
    left: -10%;
    transform: rotate(270deg);
    transition: 0.7s ease;
  }
  .sect4SliderImgDetails{
    position: absolute;
    bottom: 20px;
    left: 0px;
    min-width: 250px;
    width: 200px;
    background-color: #0000008f;
    backdrop-filter: blur(5px);
    padding: 0 10px;
  }
  .sect4SliderImgDetails h2{
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-align: left;
    line-height: 44px;
    text-align: left;
    color: #fff;
    text-transform: uppercase;
    transition: 0.7s ease;
    display: none;
  }
  .sect4SliderImgDetails p{
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    line-height: 33px;
    text-align: left;
    color: #fff;
    text-transform: uppercase;
    transition: 0.7s ease;
    display: none;
  }
  .sect4SliderImg.active{
    width: 300px !important;
    height: 400px !important;
  }
  .sect4SliderImg.active h1{
     display: none;
  }
  .sect4SliderImg.active .sect4SliderImgDetails p, .sect4SliderImg.active .sect4SliderImgDetails h2{
    display: block;
  }

/* ==========================END OF SECTION FOUR STYLING================================== */


/* ==========================START OF SECTION FIVE STYLING================================== */
.sectionFive{
    position: relative;
    min-height: 100vh;
    height: 100%;
    max-width: 100vw;
    width: 100%;
    background-color: #130951;
    color: white;
    display: flex;
    align-items: center;
    padding: 20px 30px;
    flex-direction: column;
}

.sectionFiveFlexContainer{
    display: flex;
    flex-direction: column;
    width: inherit;
}

.sectionFiveHeader{
    font-size: 40px;
    font-family: 'Poppins', sans-serif;
    text-align: center;

}

.sectionFiveTop{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    gap: 20px;
    padding: 20px;
    overflow: hidden;
    max-width: 100%;
    min-height: 60vh;
    scroll-behavior: smooth; /* add this line for smooth scrolling */
    /* background-color: red; */
}

.clientReviews{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 400px;
    width: 400px;
    min-height: 300px;
    max-height: 330px;
    background-color: #0000004b;
    padding: 50px 20px;
    filter: saturate(0%);
    transition: 0.4s ease;
}

.clientReviews.clReviewInFocus{
    min-height: 400px;
    filter: saturate(100%);
}

.clientDetails{
    display: flex;
    align-items: center;
    gap: 30px;
}

.clientName{
    color: #677eff;
}

.clientImageContainer{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    background-color: grey;
    
}

.clientImage{
    width: 70px;
    color: white;

}

.clientReview{
    text-align: justify;
}

.clientRatingContainer{
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 5px;
    /* background-color: red; */
}

.rating{
    width: 18px !important; 
    color: #e4ce00;
}

.clientReviewPrevBtn, .clientReviewNxtBtn{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffffa0;
    color: white;
    font-family: monospace;
    font-weight: bold;
    font-size: 16px;
    padding: 20px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: none;
    box-shadow: 2px 2px 5px 3px black;
    top: 400px;
}
.clientReviewPrevBtn{
    left: 20px;
}

.clientReviewNxtBtn{
    right: 20px;
}

.sectionFiveBottom{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.contactDetails, .addressDetails, .emailDetails{
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 350px;
    gap: 10px;
    text-align: center;
    height: 350px;
    border: 2px solid black;
    transition: 0.5s;
}
.contactDetails:hover, .addressDetails:hover, .emailDetails:hover{
    box-shadow: 1px 1px 10px 1px black;
    border: 2px solid #2a01b100;
}
.phoneIconContainer,.addressIconContainer,.emailIconContainer{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    padding: 10px;
}
.phoneIconContainer::before,.addressIconContainer::before,.emailIconContainer::before{
    position: absolute;
    content: '';
    width: 0px;
    height: 2px;
    bottom: 0;
    background-color: #3c00ff;
    transition: 0.5s ease;
}

.contactDetails:hover .phoneIconContainer::before,
.addressDetails:hover .addressIconContainer::before,
.emailDetails:hover .emailIconContainer::before{
    width: 90px;
}



.phoneIcon,.addressIcon,.emailIcon{
    width: inherit;
    margin-bottom: 20px;
    color: #3c00ff;
}

.contactDetails p, .addressDetails p, .emailDetails p{
    font-size: 20px;
    font-family: 'Montserrat',sans-serif;
}
/* ==========================END OF SECTION FIVE STYLING================================== */

/* ==========================START OF SECTION SIX STYLING================================== */
.sectionSix{
    position: relative;
    min-height: 50vh;
    height: 100%;
    max-width: 100vw;
    width: 100%;
    /* overflow: hidden; */
    background-color: #1E0683;
    padding: 30px 80px;
    color: white;
}

.contactTitle{
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 30px;
    min-height: 20vh;
    height: 80px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.contactTitle h2{
    font-size: 30px;
    min-width: 150px;
}

.contactTitle p{
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    min-width: 400px;
    padding: 0px 20px;
    border-left: 1px solid #001b48;
}

.contactInputTopContainer{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: red; */
    gap: 20px;
    flex-wrap: wrap;
}
.contactFormInputfield{
    display: flex;
    flex-grow: 1;
    position: relative;
}

.contactFormInputfield input{
    flex-grow: 1;
    min-width: 300px;
    height: 50px;
    margin: 10px 0px;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.305);
    color: white;
    outline: none;
    border: 1px solid #cb373700;
    font-weight: bold;
}

.phoneAndCountryCode .countryCode{
    max-width: 110px;
    min-width: 80px;
}

.contactFormInputfield label{
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 12px;
    color: #cb3737;
}

.contactFormInputfield textarea{
    position: relative;
    width: 100%;
    margin: 10px 0px;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.305);
    border: 1px solid #cb373700;
    color: white;
    outline: none;
    border: none;
    height: 150px;
    resize: none;
    font-weight: bold;
    flex-grow: 1;
}

.contactFormInputfield input::placeholder,
.contactFormInputfield textarea::placeholder{
    color: #40457d;
    font-weight: bold;
}
.contactFormInputfield textarea::-webkit-scrollbar {
    position: relative;
    width: 7px;
    /* padding: 25px; */
} 
.contactFormInputfield textarea::-webkit-scrollbar-track {
    background-color: none;
    border-radius: 10px;
}
.contactFormInputfield textarea::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 10px;

}
.contactFormInputfield textarea::-webkit-scrollbar-thumb:hover {
    background: #989898;
}

.contactFormBody button{
    max-width: 400px;
}


.contactFormInputfield input:-webkit-autofill,
.contactFormInputfield input:-webkit-autofill:hover, 
.contactFormInputfield input:-webkit-autofill:focus,
.contactFormInputfield textarea:-webkit-autofill,
.contactFormInputfield textarea:-webkit-autofill:hover,
.contactFormInputfield textarea:-webkit-autofill:focus,
.contactFormInputfield select:-webkit-autofill,
.contactFormInputfield select:-webkit-autofill:hover,
.contactFormInputfield select:-webkit-autofill:focus {
  /* border: 1px solid #43434600; */
  -webkit-text-fill-color: #F1F1F1;
  -webkit-box-shadow: 0 0 0px 1000px  #15045B inset;
  background-clip: padding-box; /* Ensures background color does not bleed */
  background-color:  rgba(0, 0, 0, 0.305);
  transition: background-color 5000s ease-in-out 0s;
}

footer{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 30vh;
    height: 100%;
    max-width: 100vw;
    padding: 40px 60px;
    background-color: #041420;
    color: white;
}

.footerTop{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
    justify-content: space-between;
}
.footerTop a{
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    /* background-color: red; */
    min-width: 120px;
    flex-grow: 1;
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    font-weight: bold;
    margin-bottom: 40px;
    transition: 0.3s;
}

.footerTop a:hover{
    color: #2a01b1;
}

.footerTop a:nth-child(1), .footerTop a:nth-child(2),
.footerTop a:nth-child(3), .footerTop a:nth-child(4),
.footerTop a:nth-child(5){
    border-right: 1px solid white;
}

.footerMiddle{
    padding: 20px 0px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    justify-content: right;
    margin-bottom: 40px;
    width: 100%;
    border-bottom: 1px solid grey;
}

.footerMiddle h2{
    font-family: Impact;
    letter-spacing: 1px;
    margin-right: 20px;
}

.footerMiddle .footerIcons{
    width: 20px;
    color: white;
    transition: 0.3s;
}

.footerMiddle .footerIcons:hover{
    color: #3c00ff;
}


.footerBottom{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    /* background-color: red; */
}
.footerBottom .Copyright{
    border-right: 1px solid white;
    padding: 0px 20px;
}
.footerBottom p{
    display: flex;
    align-items: center;
    justify-content: center;
}

.footerBottom p span{
    margin-left: 5px;
    font-family: 'Open-Sans', sans-serif;
    font-weight: bolder;
    background: linear-gradient(90deg, rgba(31,173,184,1) 0%, rgba(63,84,145,1) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

/* ==================== RESPONSIVE STYLES HERE ========================= */
@media (max-width:1100px) {
    .sectionThree{
        min-height: 1000px;
    }
    .sectionFourLeft>h2{
        font-size: 30px;
        font-family: sans-serif;
    }
    .view-contact-form-btn, .learnmore-btn{
        font-size: 16px;
    }

    .contactTitle p{
        padding: 0px;
        border-left: 1px solid #001a4800;
    }
    
}

@media (max-width:1000px) {
    .sectionThreeBottom{
        padding: 0px 10px;
        flex-wrap: wrap;
        gap: 10px;
        min-height: 30vh;
        /* background-color: red; */

    }
}

@media (max-width:1108px) {
    .sectionFour{
        padding: 20px 60px;
    }
    .sectionFourLeft{
        flex-basis: 100%;
        flex-grow: 1;
    }
    .sect4LeftPgnContent{
        flex-grow: 1;
        width: 85vw;

    }
}

@media (max-width:800px) {
    .sectionThreeBottom{
        flex-wrap: wrap;
        gap: 10px;
        min-height: 0vh;
        /* background-color: red; */
    }

    .techWeUSeImgsContainer{
        width: 100px;
        height: 80px;
        border: 1px solid #000;
    }

    .techWeUSeImgsContainer::after{
        border: 2px solid rgba(0, 0, 0, 0);
    }

     .section4leftPagination div{
        transition: none;
    }
    .sectionFourRight{
        flex-basis: 90%;
        flex-grow: 1;
        justify-content: center;
      }

    .section4leftPagination div{
        font-size: 23px;
    }

      .sect4SliderImg{
        width: 60px;
      }
      .sectionFourRight .sect4SliderImg:first-child, .sectionFourRight .sect4SliderImg:last-child{
        height: 250px;
      }
      .sectionFourRight .sect4SliderImg:nth-child(2), .sectionFourRight .sect4SliderImg:nth-child(6){
        height: 300px;
      }
      .sectionFourRight .sect4SliderImg:nth-child(3), .sectionFourRight .sect4SliderImg:nth-child(4), 
      .sectionFourRight .sect4SliderImg:nth-child(5){
        height: 400px;
      }
      .sect4SliderImg h1{
        font-size: 30px;
      }
      .sect4SliderImgDetails{
        position: absolute;
        bottom: 10px;
        left: 4px;
      }
      .sect4SliderImgDetails h2{
        font-size: 18px;
      }
      .sect4SliderImgDetails p{
        font-size: 10px;
        letter-spacing: 1px;
      }
      .sect4SliderImg.active{
        width: 250px !important;
        height: 400px !important;
      }

    footer{
        padding: 30px;
    }

    .footerBottom{
        margin-bottom: 90px;
    }

    .footerTop a:nth-child(1), .footerTop a:nth-child(2),
    .footerTop a:nth-child(3), .footerTop a:nth-child(4),
    .footerTop a:nth-child(5){
    border-right: none;
}
}

@media (max-width:700px) {
    .sectionThree{
        min-height: 1200px;
    }

    .sectionThreeTop{
        justify-content: center;
        flex-basis: 100%;
    }
    
    .sectionThreeLeft{
        margin-left: 0px;
        justify-content: center;
    }

    .experienceNum{
        position: relative;
        font-size: 300px;
        height: 350px;
    }
    
    h2.slinky1, h2.slinky2, h2.slinky3{
        display: none;
    }

    .experienceTitle{
        font-size: 30px;
    }
    
    .experienceDetails{
        max-width: 250px;
        font-size: 18px;
        text-align: justify;
        flex-wrap: wrap;
    }

    .sectionThreeRight{
        flex-basis: 100%;
    }
    
    .sectionThreeTable tr{
        width: 100%;
        height: 200px;
    }
    .sectionThreeTable td{
        text-align: center;
        border: 1px solid #2a01b1;
        padding: 20px;
    }
    .sectionThreeTable td h2{
        font-size: 70px;
    }

    .sectionFour{
        padding: 20px 30px;
    }

    .sectionFourLeft{
        flex-basis: 90%;
    }

    .learnmore-btn{
        height: 40px;
    }

    .learnmore-btn:hover{
        border: 2px solid white;
    }

    .buttonStyle3::before{
        content: none;
        transition: none;
    }

    .section4leftPagination div{
        transition: none;
    }
    .sectionFourRight{
        flex-basis: 90%;
        flex-grow: 1;
        justify-content: center;
      }

    .section4leftPagination div{
        font-size: 23px;
    }

      .sect4SliderImg{
        width: 50px;
      }
      .sectionFourRight .sect4SliderImg:first-child, .sectionFourRight .sect4SliderImg:last-child{
        height: 250px;
      }
      .sectionFourRight .sect4SliderImg:nth-child(2), .sectionFourRight .sect4SliderImg:nth-child(6){
        height: 300px;
      }
      .sectionFourRight .sect4SliderImg:nth-child(3), .sectionFourRight .sect4SliderImg:nth-child(4), 
      .sectionFourRight .sect4SliderImg:nth-child(5){
        height: 400px;
      }
      .sect4SliderImg h1{
        font-size: 30px;
      }
      .sect4SliderImgDetails{
        position: absolute;
        bottom: 20px;
        left: 0px;
      }
      .sect4SliderImgDetails h2{
        font-size: 18px;
      }
      .sect4SliderImgDetails p{
        font-size: 10px;
        letter-spacing: 1px;
      }
      .sect4SliderImg.active{
        width: 250px !important;
        height: 400px !important;
      }

    .contactFormInputfield .phoneNo{
        min-width: 100px;
    }
    .contactFormInputfield .countryCode{
        max-width: 80px;
        min-width: 80px;
    }

      .footerBottom .Copyright{
        border-right: none;
        padding: 0px 20px;
    }
    
}

@media (max-width:520px) {
    .sectionThree{
        min-height: 900px;
        padding: 20px 0px;
    }

    .sectionThreeTop{
        justify-content: center;
        flex-basis: 100%;
        margin-top: 30px;
        padding: 10px 40px;

    }
    
    .sectionThreeLeft{
        display: flex;
        flex-basis: 100%;
        justify-content: center;
        flex-grow: 1;
    }

    h2.experienceNum{
        position: absolute;
        top: 0;
        left: 0;
        font-size: 60px;
        height: 60px;
    }
    
    h2.slinky1, h2.slinky2, h2.slinky3{
        display: none;
    }

    .experienceTitle{
        font-size: 20px;
        width: 80%;
        /* background-color: red; */
        margin-left: 80px;
    }

    .experienceContent{
        max-width: 90%;
        flex-grow: 1;

    }
    
    .experienceDetails{
        max-width: 100%;
        font-size: 18px;
        text-align: justify;
        flex-wrap: wrap;
        flex-grow: 1;
    }

    .buttonStyle2{
        width: 100%;
        height: 40px;
        margin: 10px 0px;
        padding: 10px 15px;
        font-size: 15px;
        background-color: #3c00ff;
        transition: none;
    }

    .buttonStyle2:hover{
        background-color: #3c00ff;
    }

    .buttonStyle2::before,
    .buttonStyle2::after {
        content: none;
        transition: none;
    }  

    .sectionThreeRight{
        flex-direction: row;
        flex-basis: 60%;
        flex-grow: 1;
        justify-content: right;
        padding: 20px;
    }

    .sectionThreeTable{
        display: flex;
        justify-content: center;
        align-items: baseline;
        max-width: 300px;
        flex-grow: 1;
    }
    
    .sectionThreeTable tr{
        height: 100px;
        flex-grow: 1;
    }
    .sectionThreeTable td{
        border: 1px solid #2a01b1;
        padding: 20px;
    }
    .sectionThreeTable td h2{
        font-size: 30px;
    }

    .sectionThreeBottom{
        flex-wrap: nowrap;
        justify-content: center;
    }
    
    .techWeUSeImgsContainer{
        width: 40px;
        height: 25px;
        border: 1px solid #000;
        margin: 0;
    }

    .techWeUSeImgs{
        width: inherit;
    }

    .techWeUSeImgsContainer::after{
        border: 2px solid rgba(0, 0, 0, 0);
    }

    .sectionFour{
        padding: 50px 30px;
    }

    .sectionFourLeft{
        height: 350px;
    }

    .sect4LeftPgnContent{
        margin-top: 40px;
    }

    .sect4LeftPgnHeader{
        font-size: 20px;
    }

    .sect4LeftPgnDetail{
        font-size: 16px;
    }

    .section4leftPagination::before{
        content: '';
        width: 100%;
    }

    .sect4Pgn1.sec4PagnActive::before,.sect4Pgn2.sec4PagnActive::before,
    .sect4Pgn3.sec4PagnActive::before, .sect4Pgn4.sec4PagnActive::before{
        width: 30px;
    }

    .sect4LftPgnButton button, .sect4LftPgnButton a{
        height: 40px;
        font-size: 12px;
        transition: none;
    }
    .sect4LftPgnButton button:hover{
        border: 2px solid white;
        color: white;
    }
    .sect4LftPgnButton button:before{
        content: none;
        transition: none;
    }
    .sect4LftPgnButton button::after{
        content: none;
        transition: none;
    }

    .sectionFourRight{
        flex-basis: 100%;
        flex-grow: 1;
        justify-content: left;
      }

    .section4leftPagination div{
        font-size: 23px;
    }

      .sect4SliderImg{
        width: 100px;
      }
      .sectionFourRight .sect4SliderImg:first-child, .sectionFourRight .sect4SliderImg:last-child{
        width: 10vw;
        height: 250px;
      }
      .sectionFourRight .sect4SliderImg:nth-child(2), .sectionFourRight .sect4SliderImg:nth-child(6){
        width: 10vw;
        height: 300px;

      }
      .sectionFourRight .sect4SliderImg:nth-child(3), .sectionFourRight .sect4SliderImg:nth-child(4), .sectionFourRight .sect4SliderImg:nth-child(5){
        width: 10vw;
        height: 200px;

      }
      .sect4SliderImg h1{
        font-size: 20px;
        font-family: 'Montserrat', sans-serif;
        letter-spacing: 2px;
      }
      .sect4SliderImgDetails{
        position: absolute;
        padding: 0 10px;
        width: 40vw;
        bottom: 0px;
        left: 0px;
        /* line-height: 0.1px; */
      }
      .sect4SliderImgDetails h2{
        margin-top: 7px;
        font-size: 13px;
        width: 150px;
        line-height: 25px;
      }
      .sect4SliderImgDetails p{
        font-size: 10px;
        letter-spacing: 1px;
        width: 150px;
        line-height: 16px;
        font-weight: lighter;
        margin-bottom: 7px;
      }
      .sect4SliderImg.active{
        height: 300px !important;
        width: 40vw !important;
      }
    
    .sectionFive{
        flex-direction: column-reverse;
        gap: 60px;
    }

    .sectionFiveFlexContainer{
        flex-direction: column;
    }
    
    .sectionFiveHeader{
        font-size: 25px;
        float: top;
        font-family: 'Montserrat', sans-serif;
    }
    
    .sectionFiveTop{
        max-width: 100%;
        min-height: 70vh;
    }
    
    .clientReviews{
        gap: 10px;
        min-width: 300px;
        min-height: 400px;
    }

    .clientReviewPrevBtn, .clientReviewNxtBtn{
        top: 1500px;
    }
    
    .clientReviews.clReviewInFocus{
        min-height: 500px;
    }
    
    .clientName{
        color: #677eff;
    }

    .contactDetails, .addressDetails, .emailDetails{
        width: 300px;
        transition: none;
        border: 2px solid #000000;
    }
    .contactDetails:hover, .addressDetails:hover, .emailDetails:hover{
        box-shadow: none;
        border: 2px solid black;
    }
    .phoneIconContainer,.addressIconContainer,.emailIconContainer{
        width: 70px;
        height: 70px;
    }

    .phoneIconContainer::before,.addressIconContainer::before,.emailIconContainer::before{
        content: none;
    }
    
    .contactDetails:hover .phoneIconContainer::before,
    .addressDetails:hover .addressIconContainer::before,
    .emailDetails:hover .emailIconContainer::before{
        width: 0px;
    }
    
    .contactDetails p, .addressDetails p, .emailDetails p{
        font-size: 16px;
    }
    

    .contactTitle{
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 30px;
    height: 80px;
    flex-wrap: wrap;
    margin-bottom: 80px;
}

.contactTitle h2{
    font-size: 30px;
    min-width: 150px;
}

.contactTitle p{
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    min-width: 400px;
    padding: 0px 20px;
    border-left: 1px solid #001b48;
}

.contactInputTopContainer{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: red; */
    gap: 20px;
    flex-wrap: wrap;
}
.contactFormInputfield{
    display: flex;
    flex-grow: 1;
    position: relative;
}

.contactFormInputfield input{
    flex-grow: 1;
    min-width: 300px;
    height: 50px;
    margin: 10px 0px;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.305);
    color: white;
    outline: none;
    border: 1px solid #cb373700;
    font-weight: bold;
}

.contactFormInputfield label{
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 12px;
    color: #cb3737;
}

.contactFormInputfield textarea{
    position: relative;
    width: 100%;
    margin: 10px 0px;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.305);
    border: 1px solid #cb373700;
    color: white;
    outline: none;
    border: none;
    height: 150px;
    resize: none;
    font-weight: bold;
    flex-grow: 1;
}
.contactFormInputfield .phoneNo{
    min-width: 100px;
}
.contactFormInputfield .countryCode{
    max-width: 80px;
    min-width: 80px;
}

.contactFormInputfield input::placeholder,
.contactFormInputfield textarea::placeholder{
    color: #40457d;
    font-weight: bold;
}
.contactFormInputfield textarea::-webkit-scrollbar {
    position: relative;
    width: 7px;
    /* padding: 25px; */
} 
.contactFormInputfield textarea::-webkit-scrollbar-track {
    background-color: none;
    border-radius: 10px;
}
.contactFormInputfield textarea::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 10px;

}
.contactFormInputfield textarea::-webkit-scrollbar-thumb:hover {
    background: #989898;
}

.contactFormBody button{
    max-width: 400px;
}

.sectionSix{
    position: relative;
    padding: 30px 30px;
}
.contactTitle{
    gap: 10px;
    height: 100px;
    margin-bottom: 20px;
}

.contactTitle h2{
    font-size: 25px;
    min-width: 150px;
}

.contactTitle p{
    font-size: 14px;
    min-width: 250px;
    padding: 0px;
    border-left: 1px solid #001a4800;
}

.contactInputTopContainer{
    gap: 0px;
}

.contactFormInputfield input{
    min-width: 250px;
}

.contactFormBody button{
    max-width: 100%;
}

footer{
    padding: 20px 0px;
}

.footerMiddle{
    border-bottom: none;
    background-color: #0000003c;
    justify-content: center;
}

.footerMiddle h2{
    letter-spacing: 1px;
    margin-right: 10px;
    font-size: 18px;
}

.footerBottom{
    justify-content: center;
    gap: 20px;
}
}


/* ----NESTED RESPONSIVE STYLING HERE */
@media (max-width:800px) {
    /* Styling for the first section to make it occupy the screen */
    .sectionOne{
        position: relative;
        max-width: 100vw;
        width: 100%;
        max-height: 100vh;
        height: 100%;
        overflow: hidden;
    }


    /* Nav bar styling */
    nav.navBar{
        position: relative;
        background-color: #00000000;
        bottom: 0; 
        display: flex;
        width: 100vw;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        z-index: 100;
        /* background-color:rgba(0, 0, 0, 0.122) ; */

    }

    nav.navBar img.logo{
        width: 150px; /* To adjust the logo Size*/
        margin-right: 20px;
    }

    .navItems{
        position: fixed;
        bottom: 0;
        left: 0;
        margin: auto;
        max-width: 100%;
        background-color: rgba(0, 0, 0, 0.603);
        backdrop-filter: blur(10px);
        padding: 10px 5px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 70px;
    }


    nav.navBar ul{
        position: relative;
        padding: 10px 0px;
        display: flex;
        justify-content: space-between;
        min-width: 310px; /*Adjust nav bar links spacing*/
        width: 100%;
        margin-right: 20px;
    }

    /* navbar links styling */
    nav.navBar ul li{
        display: block;
        flex-direction: column;
        flex-wrap: wrap;
        text-align: center;
        align-content: center;
        justify-content: center;
        list-style: none;
        font-weight: bold;
        width: 50px;
        font-size: 12px;
    }

    .mobNavIcons{
        display: flex;
        justify-self: center;
        color: #ffffff;
        width: 20px;
        transition: 0.5s ease;
    }
    nav.navBar ul li:has(> a.navActive) .mobNavIcons{
        color: #3c00ff;
      }

    nav.navBar ul li a{
        text-decoration: none;
        color: #ffffff;
        transition: 0.5s ease;
    }
    nav.navBar ul li a.navActive{
        color: #3c00ff;
}

    nav.navBar ul li:hover .mobNavIcons,
    nav.navBar ul li:hover .nav.navBar ul li a{
        color: #3c00ff;
    }
    
    .share-icon{
        position: absolute;
        color: #ffffff;
        width: 25px;
        cursor: pointer;
        transition: color 0.2s;
    }

    .share-icon:hover{
        color: #3c00ff;
    }

    .svgIcons{
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 80px;
        right: 25px;
        padding: 5px;
        width: 40px;
        height: 40px;
        border-radius: 5px;
        background-color: #00000088;
        backdrop-filter: blur(10px);
    }

    .navShareExpanded{
        position: absolute;
        display: none;
        align-items: center;
        justify-content: space-between;
        width: 140px;
        padding: 20px 10px;
        border-radius: 5px;
        right: 0;
        bottom: 50px;
        height: 100%;
        background-color: #220d679c;
        box-shadow: 1px 1px 5px black;
        cursor:default;
    }

    .navSocialsLink{
        opacity: 0;
    }

    .navSocialsLink:nth-child(1).shareIconsAnimate{
        animation: SocialsSlideInAnim 0.2s linear 0.1s 1 normal forwards;
    }.navSocialsLink:nth-child(2).shareIconsAnimate{
        animation: SocialsSlideInAnim 0.2s linear 0.3s 1 normal forwards;
    }.navSocialsLink:nth-child(3).shareIconsAnimate{
        animation: SocialsSlideInAnim 0.2s linear 0.5s 1 normal forwards;
    }

    @keyframes SocialsSlideInAnim {
        0%{
            opacity: 0;
            transform: translateX(20px);
        }
        100%{
            opacity: 100;
            transform: translateX(0px);
        }
        
    }


    .navSocialsIcon{
        position: relative;;
        width: 25px;
        color: #fff;
        margin: 4px 5px 0px 5px;
        transition: 0.2s ease-in-out;
    }

    .navSocialsIcon:hover{
        color: #3c00ff;
    }


    /* Section slider styling */
    .sectOnePageSlider{
        position: relative;
        width: 100vw;
        height: 100vh;
        display: block;
        text-align: center;
        top: -5px;
    }

    .pageSliderItem h1{
        display: flex;
        flex-wrap: wrap;
        max-width: 100vw;
        font-family: 'Orbitron', monospace;
        font-size: 8vw;
        color: white;
    }

    .pageSliderItem p{
        display: flex;
        flex-wrap: wrap;
        width: 80vw;
        font-size: 16px;
        max-width: 800px;
        margin: 20px 0px 60px 0px;
        color: white;
    }


    .pageSliderButton{
        position: relative;
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-self: center;
        background-color: #3c00ff;
        color: white;
        padding: 10px 20px;
        width: 140px;
        text-decoration: none;
        border: 2px solid #00000000;
        transition: border 0.3s ease ;
    }

    .pageSliderItem.animate h1{
        animation: headSlidein 0.4s linear 0.6s 1 normal forwards;
    }

    .pageSliderItem.animate p{
        animation: pSlideIn 0.4s linear 0.4s 1 normal forwards;
    }

    .pageSliderButton.animate{
        animation: ButtonSlideIn 0.4s linear 0.6s 1 normal forwards;
    }

    @keyframes headSlidein {
        0%{
            opacity: 0;
            transform: translate(20px, -20px);
        }
        100%{
            opacity: 100;
            transform: translate(0px, 0px);
        }
        
    }


    @keyframes pSlideIn {
        0%{
            opacity: 0;
            transform: translateX(-40px);
        }
        100%{
            opacity: 100;
            transform: translateX(0px);
        }
        
    }


    @keyframes ButtonSlideIn {
        0%{
            opacity: 0;
            transform: translateY(30px);
        }
        100%{
            opacity: 100;
            transform: translateX(0px);
        }
        
    }

    .pageSliderButton:hover{
        border: 2px solid #000000;
    }

    .pageSliderButton span{
        width: 100%;
        z-index: 5;
    }

    .pageSliderButton::before{
        content: none;
        width: 0;
        height: 90%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        background: #000000;
        transition: width 0.5s, opacity 0.5s linear, height 0.3s linear;
    }

    .pageSliderButton:hover::before{
        width: 100%;
        opacity: 1;
        height: 100%;
    }


    .slider{
        width: 800px;
        height: 100vh;
        margin: auto;
        position: absolute;
        /* top: -100px; */
        /* overflow: hidden; */
        top: -250px;
    }
    .slider .list{
        position: absolute;
        width: 100%;
        min-height: 100vh;
        left: 0;
        display: flex;
        flex-direction: column;
        transition: 1s;
    }
    .slider .list img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .Pc-SectionOneBG{
        display: none;
    }

    .slider .item{
        position: relative;
        width: inherit;
        height: inherit;
    }

    .slider .pageSliderItem {
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 40%;
        left: 50vw;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .slider .buttons{
        position: absolute;
        top: 80%;
        left: 5vw;
        width: 90vw;
        display: flex;
        justify-content: space-between;
    }
    .slider .buttons button{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #220d67;
        color: #fff;
        border: none;
        font-family: monospace;
        font-weight: bold;
    }
    .slider .dots{
        position: absolute;
        bottom: -50px;
        left: 0;
        color: #fff;
        width: 100vw;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
    }
    .slider .dots li{
        list-style: none;
        width: 10px;
        height: 10px;
        background-color: #fff;
        margin: 10px;
        border-radius: 20px;
        transition: 0.5s;
    }
    .slider .dots li.active{
        width: 30px;
    }
}