@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&family=Quicksand:wght@300..700&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Quicksand", sans-serif;
}

html{
    /* font-size: 62.5%; */
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body{
    background-color: black;
    color: white;
}

/* header section design starts here  */


/* General styles for the header and navbar */
.header {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #0c0909; /* Background color of the navbar */
    z-index: 1000; /* Ensures the navbar stays on top of other content */
    box-shadow: 0 3px 16px rgba(255, 255, 255, 0.1); /* Optional: Add a shadow for better visibility */
}

/* Flexbox layout for the navbar */
.navbar {
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px; /* Adjust padding as needed */
}

/* Styling the links */
.links {
    display: flex;
    list-style: none;
}

.links li {
    margin-right: 20px; /* Space between the links */
    cursor: pointer;
    font-size: 2rem;
}
.links li a{
    text-decoration: none;
    color: white;
    padding: 0px 12px;
}

/* Styling the right icons */
.right-icons {
    display: flex;
    align-items: center;
}

#menu-bars {
    font-size: 24px; /* Adjust icon size as needed */
    margin-right: 20px; /* Space between the icon and the button */
    cursor: pointer;
}

.btn {
    padding: 8px 16px; /* Adjust padding as needed */
    background-color: rgb(199, 156, 13);
    color: #fff; /* Button text color */
    border: none;
    border-radius: 4px; /* Rounded corners */
    cursor: pointer;
    font-size: 1.3rem;
}
 a{
    text-decoration: none;
}

.btn:hover {
    background-color: #eac566; /* Darker shade for hover effect */
}

/* testing  */

.home {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch; /* Align items to stretch to the same height */
    padding: 20px;
    gap: 20px;
    
}


.left-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.images-logo {
    margin-bottom: 20px;
    position: relative;
    top: 15px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.images-logo img {
    height: 150px;
    width: auto;
    border-radius: 50%;
    border: 5px solid rgb(199, 156, 13);
    box-shadow: 0px 0px 4px 8px rgb(199, 156, 13);
}


.details {
    text-align: center;
}

.details h2 {
    margin: 10px 0;
    font-size: 2.8rem;
    /* color: #333; */
}

.details h3 {
    margin: 5px 0;
    font-size: 1.8rem;
    /* color: #555; */
}

.details p {
    font-size: 1.3rem;
    line-height: 1.5;
    /* color: #666; */
    padding: 0 10px;
    text-align: center;
}

.icons #main {
    margin-top: 20px;
    margin-left: 15px;
}

.icons a i{
    text-decoration: none;
    color: #fff;
    font-size: 2.5rem;
    margin-right: 10px;
    /* color: #333; */
    padding: 0px 10px;
    transition: color 0.3s;
}

.icons i:hover {
    color:  rgb(199, 156, 13);
    cursor: pointer;
}

.home-side-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}


.home {
    display: flex;
    align-items: stretch; /* Ensure both columns have the same height */
    padding: 20px;
    gap: 20px;
}

.left-column,
.right-column {
    flex: 1; /* Allow both columns to take equal space */
    /* box-shadow: 0 4px 8px  rgb(199, 156, 13); */
    /* background: white; */
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column; /* Stack children vertically */
}



.right-column {
    display: flex;
    align-items: center; /* Center the content vertically */
}

.home-side-image {
    flex: 1; /* Allow image container to take full height */
}

.home-side-image img {
    width: 100%;
    height: 100%; /* Ensures the image fills the container */
    object-fit: cover; /* Cover ensures the image maintains aspect ratio */
    border-radius: 10px;
    box-shadow: 0 14px 18px  rgb(199, 156, 13);
}

/* module section design  */


.heading {
    margin-top: 15px;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
    /* box-shadow: 0 4px 8px rgb(199, 156, 13); */
}


.container {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr;
    gap: 10px;
    align-items: start;
}

.left-section img {
    margin-left: 5px;
    width: 100%;
    height: auto;
    border-radius: 15px ;
    box-shadow: 0 10px 15px rgb(199, 156, 13);
}

.details {
    margin-bottom: 20px;
}

.details h2{
    font-size: 2rem;
}

.points1 ul, .points2 ul {
    list-style: none;
    padding: 0;
    margin-left: 20px;
}

.points1 ul li, .points2 ul li {
    margin-bottom: 10px;
    list-style-type: circle;
}

/* project section animation  */
.projects{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .outer-circle {
    position: relative;
    width: 60vw;
    height: 60vw;
    max-width: 600px;
    max-height: 600px;
    border-radius: 50%;
    background-color: rgb(199, 156, 13);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
   
    overflow: hidden;
}

.center-circle {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.center-text {
    position: absolute;
    z-index: 2;
}

#center-logo {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, outline 0.3s ease;
}

.logo {
    position: absolute;
    width: 70px;
    
    height: 70px;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, outline 0.3s ease;
}

.highlight {
    transform: scale(1.2);
    outline: 3px solid yellow;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
} */


/* testing  */
.projects{
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}
.container-project{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 40%;
    max-width: 1200px;
    margin-bottom: 20px;
    border: 2px solid rgba(255, 255, 0, 0.8);
    box-shadow: 0px 5px 10px rgba(255, 255, 0, 0.8) ;
    border-radius: 15px;
}


.all-logos img {
    width: 70px; 
    height: 70px;
    margin: 10px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.all-logos img:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
}

.selected-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px;
    width: 40%;
    border: 2px solid rgba(255, 255, 0, 0.8);
    box-shadow: 0px 5px 10px rgba(255, 255, 0, 0.8) ;
    border-radius: 15px;
}

.selected-container .select-logo img {
    width: 150px;
    height: 150px;
    margin: 5px;
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0px 5px 10px rgba(255, 255, 0, 0.8) ;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.selected-container .details h2,
.selected-container .details p {
    margin: 0;
}

.selected-container .details {
    max-width: 400px;
}
.highlight {
    transform: scale(1.2);
    outline: 3px solid yellow;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
} 




/* specturm introduction starts from here   */
.intro-spec {
    
    border-radius: 8px;              /* Rounded corners */
    padding: 20px;                   /* Padding inside the box */
    margin: 20px 0;                 /* Space above and below */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    text-align: center;              /* Center the text */
}

.intro-spec h2 {
    font-size: 24px;                 /* Font size for the heading */
    text-transform: uppercase;
    line-height: 1.4;                /* Spacing between lines */
    margin: 0;                       /* Remove default margin */
}
.intro-spec span{
    font-style: italic;
    font-weight: 800;
    font-size: 2rem;
    text-shadow: 2px 5px 10px rgba(255, 255, 0, 0.8);

}
.intro{
    margin: 20px;
    padding: 5px 10px;
    border: 2px solid  rgba(255, 255, 0, 0.8);
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
    border-radius: 25px;
/*     animation: bounce 2s infinite; */
    text-align: center;
}

.intro p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 800;

    /* color: #666666; */
}


/* specturm design ends here  */

/* assistants cards design starts from here  */
.assistants {
    text-align: center;
}

p {
    font-size: 14px;
    margin: 0 0 15px;
    color:white;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

.card {
    /* background-color: white; */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
    width: calc(33.333% - 20px); /* Three cards per row on larger screens */
    box-sizing: border-box;     /* Ensure padding and border are included in width */
}

.circle-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0px 0px 4px 8px rgb(199, 156, 13);
    margin-bottom: 7px;
}

.assistants .icons {
    display: flex;               
    justify-content: center;     
    margin-top: 10px;           
}

.assistants .icon {
    text-decoration: none;       
    margin: 0 15px;             
    font-size: 24px;          
    transition: color 0.3s;    
}



/* Additional space below the card to prevent overlap */
.assistants .card {
    margin-bottom: 20px;        /* Space below each card */
}

/* Additional space below the card to prevent overlap */
.card {
    margin-bottom: 20px;        /* Space below each card */
}
/* assistants cards design ends  here  */
.quality{
    display: flex;
    text-align: left;
    justify-content: center;
    text-transform: capitalize;
}



/* footer section design starts from here  */
.styled-hr {
    border: none;                      /* Remove default border */
    height: 2px;                      /* Set height for the line */
    background-color: #0077b5;       /* Change to desired color */
    margin: 20px 0;                   /* Space above and below the line */
    border-radius: 5px;               /* Rounded edges */
}

.footer {
    display: flex;                    
    justify-content: space-between;  
    align-items: center;              
    padding: 20px;                    
    /* background-color: #f9f9f9;         */
}

.left, .mid, .right {
    flex: 1;  
    display: flex;                     /* Use flexbox for centering */
    flex-direction: column;            /* Stack items vertically */
    align-items: center;               /* Center items horizontally */
    text-align: center;                   
}

.icons {
    display: flex;                     
    justify-content: center;        
}
.left{
    text-align: left;
}
.icons a {
    /* text-align: left; */
    text-decoration: none;             
    margin: 0 10px;                  
    font-size: 24px;                
    color: #333;                   
    transition: color 0.3s;           
}



.mid {
    text-align: center;                
}

.right {
    text-align: right;                 
}

.right h2 {
    margin-bottom: 10px;               
}

.right a {
    display: block;                   
    margin: 5px 0;                    
    text-decoration: none;            
    color: white;                   
    transition: color 0.3s;           
}

.right a:hover {
    text-decoration: underline;        
}

/* footer section design ends here  */

/* own descrtiption  */
.my-desc{
    text-align: center;
}
.my-desc a{
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    padding: 5px;
}



/* Animation Keyframes */
@keyframes slide-up {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}


@keyframes slide {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes slideReverse {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes appear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.1);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}



/* Responsive Styles */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
    
    .details h2 {
        font-size: 1.5rem;
    }
    
    .left-section img {
        
        
        width: 90%;
        border-radius: 10px;
    }
    
    .points1 ul, .points2 ul {
        margin-left: 20px;
    }
    
    .points1 ul li, .points2 ul li {
        margin-bottom: 5px;
    }
    .new-project img {
        height: 150px; /* Adjust height for smaller screens */
    }
}

@media (max-width: 768px) {
    .logos {
        margin: 0 5px;
    }

    .project-logos {
        max-width: 90%;
        padding: 5px;
    }

    .logos img {
        height: 80px; /* Adjust height for smaller screens */
    }
}

@media (max-width: 480px) {
    .logos {
        margin: 0 3px;
    }

    .project-logos {
        padding: 2px;
    }

    .logos img {
        height: 60px; /* Adjust height for smaller screens */
    }
}

@media (max-width: 768px) {
    .heading{
        font-size: 1.8rem;
        padding: 5px;
    }
    .outer-circle {
        width: 80vw;
        height: 80vw;
    }

    .logo {
        width: 30px;
        height: 30px;
    }

    .center-circle {
        width: 150px;
        height: 150px;
    }

    #center-logo {
        width: 100px;
        height: 100px;
    }
    
}


@media (max-width: 768px) {
    .card {
        margin: 15px;
        width: 100%;               /* Full width on medium screens */
    }
}

@media (max-width: 480px) {
    .card {
        margin: 10px;
        width: 100%;               /* Full width on small screens */
    }
}

@media (max-width: 768px) {
    .intro-spec h2 {
        font-size: 20px;             /* Slightly smaller font on mobile */
    }
}













/* for mobile responsiveness  */

@media screen and (max-width: 768px) {
    .home {
        flex-direction: column;
        align-items: center;
    }

    .left-column,
    .right-column {
        max-width: 100%;
        padding: 10px;
    }

    .details {
        text-align: center;
    }
}



@media screen and (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .links {
        justify-content: center;
        flex-wrap: wrap; /* Ensure links wrap if needed */
        width: 100%; /* Full width to ensure space for wrapping */
    }

    .links li {
        margin: 10px 5px;
    }

    .right-icons {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }

    .btn {
        width: fit-content; /* Adjust width to fit content */
        text-align: center;
        margin-left: 0;
        padding: 10px;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 480px) {
    .navbar {
        padding: 0 10px;
    }

    .links a {
        font-size: 14px;
    }

    .btn {
        font-size: 14px;
        padding: 8px;
    }
}

@media screen and (max-width: 768px) {
    .module {
        flex-direction: column;
        align-items: center;
    }

    .left-section,
    .right-section {
        width: 100%;
        align-items: center;
    }

    .left-section img {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .right-section {
        align-items: center;
        text-align: center;
    }

    .details h2 {
        font-size: 2rem;
        text-align: center;
    }

    .points ul {
        padding-left: 5px;
        font-size: 1rem;
    }
}





/* Slide-Up Animation */
@keyframes slide-up {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}



@media (max-width: 768px) {
    .footer {
        flex-direction: column;        /* Stack footer items vertically */
        align-items: center;           /* Center align all items */
        text-align: center;            /* Center text for all sections */
    }

    .left, .mid, .right {
        flex: none;                    /* Remove flex-grow */
        width: 100%;                   /* Full width for each section */
        margin-bottom: 20px;           /* Space below each section */
    }

    .icons {
        justify-content: center;        /* Center icons on mobile */
    }

    .right a {
        color: #0077b5;                /* Change link color for visibility on light backgrounds */
    }
}

@media (max-width: 480px) {
    .icons a {
        font-size: 20px;               /* Reduce icon size on small screens */
    }

    .right h2 {
        font-size: 18px;               /* Slightly smaller heading */
    }

    .right a {
        font-size: 16px;               /* Reduce font size for links */
    }
}

@media (max-width: 710px) {
    .projects {
        flex-direction: column-reverse; /* Stack selected-container on top */
    }


    .container-project {
        height: 300px; /* Set height to show three rows */
        overflow-y: auto; /* Enable vertical scrolling */
        width: 90%;
    }

    .all-logos {
        display: flex; /* Use flexbox for side-by-side logos */
        flex-wrap: wrap; /* Allow logos to wrap to the next line */
        align-items: center;
        justify-content: center;
    }

    .all-logos img {
        height: auto;
        width: 10px; /* Three logos per row with spacing */
        margin: 5px; /* Spacing between logos */
    }

    .selected-container {
        margin-top: 10px; 
        width: 90%;
    }

    .select-logo img {
        width: 80px; /* Smaller size for selected logo on small screens */
        height: 80px; /* Smaller size for selected logo on small screens */
    }

    /* .details h2 {
        font-size: 1.2rem; /* Smaller heading size 
    } 
    */

    .details p {
        font-size: 0.9rem; /* Smaller paragraph size */
    }
}

@media (max-width: 400px) {
    .all-logos img {
        width: 50%; /* One logo per row on very small screens */
    }

    .select-logo img {
        width: 50px; /* Even smaller size for selected logo on very small screens */
        height: 50px; /* Even smaller size for selected logo on very small screens */
    }

    

    .details p {
        font-size: 0.8rem; /* Even smaller paragraph size */
    }
}