@font-face {
    font-family: 'Intro Rust';
    src: url('fonts/Intro Rust Free-Desktop/Fonts/introrustg-base2line.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Kollektif';
    src: url('fonts/kollektif/Kollektif.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


.intro {
    text-align: center;
    background-image: url('assets/4.png');
    background-repeat: no-repeat;
    background-size:cover;
    
    padding: 20px;
  
    position: relative; /* Makes it a reference for absolute children */
}

/* Left Image */
.img-left {
    position: absolute;
    top: 50px; /* Aligns to the top */
    left: 380px; /* Aligns to the left */
    height: 80px;
    width: 75px;
    border-radius: 50%;
    z-index: 1000;
}

/* Text container remains centered */
.text-container {
    position: relative;
    text-align: center;
    max-width: 60%;
    margin: auto; /* Ensures centering */
    padding: 20px;
    
    background: rgba(255, 255, 255, 0.2); /* Transparent White */
    backdrop-filter: blur(10px); /* Frosted Glass Effect */
    -webkit-backdrop-filter: blur(10px); /* Safari Support */
    
    border-radius: 15px; /* Smooth Rounded Corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft Shadow */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Slight Border */
}

/* Right Images */
.img-right {
    position: absolute;
    top: 55px;
    right: 80px; /* Aligns to the right */
    display: flex;
    gap: 10px; /* Spacing between images */
    z-index: 1000;
}

.img-right img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
}

.logo100 {
    width: 55px !important;
    height: 55px !important;
    margin-top: 10px;
   
    
}


/* Font Styles */
.font1 {
    font-family: 'Intro Rust', sans-serif;
    font-size: 35px;
    color: #002147;
    font-weight: bold;
    letter-spacing: 3px;
}

.font2 {
    font-family: 'Intro Rust', sans-serif;
    font-size: 15px;
    color: #002147;
    font-weight: bold;
}

.font3 {
    font-family: 'Kollektif', sans-serif;
    font-size: 14px;
    color: black;
}

hr {
    width: 70%;
    margin: 10px auto;
    background-color: black; /* Set the background color */
    border-color: black;
    height: 1px;
}

.font4 {
    font-family: 'Intro Rust', sans-serif;
    font-size: 20px;
    color: #002147;
    font-weight: bold;
    letter-spacing: 2px;
}

.font5 {
    font-family: 'Kollektif', sans-serif;
    font-size: 20px;
    color: #002147;
}

.font6 {
    font-family: 'Kollektif', sans-serif;
    font-size: 24px;
    color: #002147;
}

.font7 {
    font-family: 'Intro Rust', sans-serif;
    font-size: 20px;
    color: #002147;
    font-weight: bold;
    letter-spacing: 3px;
}

.font9 {
    font-family: 'Intro Rust', sans-serif;
    font-size: 25px;
    color: #002147;
    font-weight: bold;
    letter-spacing: 3px;
   
    padding: 5px; /* Add some space around text */
    display: inline; /* Ensures it only highlights the text, not the full line */
}

.qrClass{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top:20px;
}

.qrClass1{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
}

.qrClass img{
    height: 100px;
    width: 100px;
}

.callPapersSection{
    display: flex;
    flex-direction: column;
    background-color: #830c4f;
    flex-wrap: wrap;
}

.callPapersSection1{
    display: flex;
    flex-direction: row;
    gap: 70px;
    margin: 20px;
}

.callPapersSectionTitle{
    color: #fdf3c1;
    font-family: 'Intro Rust', sans-serif;
    letter-spacing: 2px;
    font-size: 18px;
}

.callPapersSectionContent{
    color: white;
    font-family: 'Kollektif', sans-serif;
    font-size: 16px;
    line-height: 22px;
}

.callPapersSectionContent.highlight{
    color: yellow;
    font-size: 20px;
}

.subSection{
    display: flex;
    flex-direction: column;
}

.importantDates{
    justify-content: center;
    text-align: center;
}

.aboutTheConference {
    display: flex;
    flex-direction: column;
    justify-content: center;  
    align-items: center;      
    position: relative;
    padding: 20px;
    text-align: center;
    gap: 30px;
    width: 100%;          /* Ensures it spans the full width */
    max-width: 1200px;    /* Restricts size on larger screens */
    margin: 0 auto;       /* Centers on large screens */
}

.aboutTheConference::before {
    content: "";
    position: absolute;
    top: 10;
    left: 100;
    width:70%;
    height: 70%;
    background-image: url('assets/100thYr.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Apply opacity only to background */
    z-index: -1;
}
.aboutTheConferenceTitle{
    color:#830c4f;
    font-family: 'Intro Rust',sans-serif;
    letter-spacing: 2px;
    font-size: 18px;
    font-weight: bold;
    
}

.highlight1{
    color: #830c4f;
    font-weight: bold;
}


.aboutTheConferenceContent{
 
    font-family: 'Kollektif', sans-serif;
    font-size: 16px;
    line-height: 22px;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.aboutTheConferenceContent1 {
    font-family: 'Kollektif', sans-serif;
    font-size: 16px;
    line-height: 22px;
    text-align: justify; /* Keeps text justified */
    width: 70%; /* Controls content width */
    margin: 0 auto; /* Centers the block horizontally */
    
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers child elements horizontally */
    justify-content: center; /* Centers content inside */
}

a{
    color: black;
}

table {
    border-collapse: collapse;
    background-color: #830c4f;
    color: white;
}

th, td {
    border: 3px solid white;
    padding: 10px;
    text-align: center;
    font-family: 'Kollektif', sans-serif;
    letter-spacing: 2px;
    font-size: 14px;
}

th {
    background-color: #9a0d5d; /* Slightly lighter shade for headers */
}

.icon{
    height: 25px;
    width:25px;
    margin-top: 12px;
}

.contactDetails{
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-left: 40px;
}

.keynoteSpeakersParent{
    background-color: #830c4f;
    padding: 20px;
}

.keynoteSpeakers {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 items in the first row */
    gap: 20px; /* Adjusts space between grid items */
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.keynoteSpeakers div {
    display: flex;
    align-items: center; /* Aligns image and box vertically */
    gap: 15px; /* Space between image and box */
}

.box {
    width: 250px;
    height: 160px;
    background: white;
    position: relative;
    clip-path: polygon(
        30px 0%, 0% 50%, 30px 100%, /* Left cut forming < shape */
        100% 100%, 100% 0% /* Right side remains normal */
    );
    display: flex;
    flex-direction: column;
    gap: 0;
    
}

.speakerName{
    font-family:  'Kollektif', sans-serif;
    font-weight: bold;
    margin: 0;
    margin-top: 10px;
    transform: translateX(-30px);
}

.speakerName1{
    font-family:  'Kollektif', sans-serif;
    font-weight: bold;
    margin: 0;
    margin-top: 10px;
    transform: translateX(-5px);
}


.speakerDesc{
    font-family:  'Kollektif', sans-serif;
    font-size: 12px;
    margin: 0;
    margin-right: 50px;
    padding: 0;
    transform: translate(40px,-10px);
}
.speakerTitle{
    font-size: 14px;
    transform: translate(-65px,-24px);
    font-weight: bold;
}

.speakerTopic{
    font-size: 12px;
    transform: translate(20px,-60px);
    width: 200px;
    text-align: justify;
    padding-right: 10px;
    color: #9a0d5d;
    font-weight: 600;
}

.speakerImage {
    height: 120px;
    width: 120px;
    border-radius: 50%;
    border: 5px solid white;

}

.keynoteSpeakerTitle{
    color:white;
    font-family: 'Intro Rust',sans-serif;
    letter-spacing: 2px;
    font-size: 18px;
    text-align: center;
}

.aboutTheCollege {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    width: 100%;
    margin: 0 auto;
    position: relative; /* Change from absolute to relative */
    margin-bottom: 40px; /* Add space between sections */
}

.aboutTheCollege::before {
    content: "";
    position: absolute;
    top: 10;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/100thYr.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Apply opacity only to background */
    z-index: -1;
}

.aboutTheCollege div {
    width: 100%;
    max-width: 900px;
}

.aboutTheCollegeTitle {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: 'Intro Rust', sans-serif;
    letter-spacing: 2px;
    color: #830c4f;
}

.aboutTheCollegeContent {
    text-align: justify;
    font-family: 'Kollektif', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

.organizers {
    display: flex;
    flex-direction: row;
    justify-content: center; /* Centers items horizontally */
    align-items: flex-start; /* Align items at the top */
    gap: 40px;               /* Optional: Adds space between sections */
    flex-wrap: wrap;         /* Ensures items wrap to the next line if needed */
    margin-top: 0;           /* Remove any top margin */
    padding-top: 20px;          /* Ensure there's no padding at the top */
    background-color:#830c4f;
    font-family: 'Kollektif', sans-serif;
    color: white;
    font-size: 12px;
}

.committeeTitle{
    font-family: 'Intro Rust',sans-serif;
    font-weight: 450;
    letter-spacing: 3px;
    color:  #fdf3c1;
    font-size: 14px;
}

.profNames{
    font-weight: bold;
    letter-spacing: 2px;
}


@media screen and (max-width: 768px) {
    .intro {
        padding: 10px;
    }

    /* Centering left image on mobile */
    .img-left {
        position: relative;
        left: auto;
        top: auto;
        display: block;
        margin: 10px auto;
        height: 80px;
        width: 80px;
    }

    /* Adjusting text container for smaller screens */
    .text-container {
        max-width: 90%;
    }

    /* Stack right images below text on mobile */
    .img-right {
        position: relative;
        top: auto;
        right: auto;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 15px;
    }

    .img-right img {
        height: 90px;
        width: 90px;
    }
    
    .logo100{
        margin-top: 15px;
    }

    /* Font size adjustments for mobile */
    .font1 {
        font-size: 24px;
    }

    .font2, .font3, .font4, .font5, .font6, .font7 {
        font-size: 14px;
    }

    hr {
        width: 90%;
    }
    .keynoteSpeakers {
        grid-template-columns: repeat(1, 1fr);
    }

    .callPapersSection1{
        display: flex;
        flex-direction: column;
    }

    .aboutTheConferenceContent1{
        max-width: 100%;  /* Ensures full width */
        width: 100vw;     /* Takes up full viewport width */
        padding: 15px;    /* Adjust spacing */
        gap: 20px;

    }

    .aboutTheConference::before {
        height: 100%; /* Ensure background covers the full height */
    }

    .importantDates{
        text-align: left;
        padding-left: 20px;
    }

    
    .organizers {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center-align items */
        gap: 20px; /* Reduce space between sections */
        padding: 10px; /* Adjust padding */
        width: 100%; /* Ensure full width */
    }

    .organizers div {
        width: 90%; /* Ensure divs take most of the screen */
        text-align: left; /* Center text in mobile view */
    }

}