/*========== Global Variables ==========*/
:root {
	--theme-yellow: #ffdd00;
	--theme-yellow-tr: rgba(255, 221, 0, 0.678);
    --theme-red: #520103;
	--theme-red-tr: rgba(147, 6, 25, 0.644);
	--theme-red-light: #c21e56;
    --theme-dark-blue: #000055;
	--theme-dark-blue-tr: rgba(0, 0, 85, 0.644);
    --theme-black: #333;
    --theme-hard-black: #000;
	--theme-gray: #666;
	--theme-gray-bg: #f7f7f7;
	--theme-gray-line: #e4e4e4;
    --theme-white: #f3f3f3;
    --theme-white-tr: rgba(243, 243, 243, 0.884);
}

/* =============================
------------ Mobile ------------
============================= */

/* iPhone 6, 6s, 7, 8 */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

    /* Common Styles */
    .section-title-line{
        width: 20%;
        margin: 15px auto;
    }
    .section-content > p{
        font-size: 18px;
        text-align: justify;
        padding: 8px;
    }

    /* Navigation Bar */
    .navbar-toggler > span{
        color: var(--theme-red);
    }
    .navbar-collapse{
        margin: 10px 0;
        padding: 10px 20px;
        border-radius: 13px;
        background: var(--theme-white);
    }
    .navbar-collapse > ul > li{
        margin-right: 0;
        text-align: center;
        border-bottom: 1px solid var(--theme-gray-line);
    }
    .navbar-collapse > ul > li:last-child{
        border-bottom: none;
    }
    .navbar-brand{
        width: 10%;
        transition: 0.3s all;
        margin-left: 10px;
    }
    .navbar-scroll-img{
        width: 8%;
        margin-top: -5px;
    }

    /* Home Page Header Section */
    .header-content > .header-title{
        font-size: 3em;
    }
    .header-content > .header-sub-title{
        font-size: 1.4em;
    }
    .address-div .theme-title{
        font-size: 1.1em;
    }
    .address-div .date, .address-div .place{
        font-size: 1.3em;
    }

    /* Count-down */
    .countdown{
        width: 90%;
        background: var(--theme-white);
        border-radius: 20px;
        bottom: -140px;
    }
    .countdown > .time-element{
        margin-right: 33px;
    }
    .countdown > .time-element:last-child{
        margin-right: 0px;
    }
    .days, .hours, .minutes, .seconds{
        font-size: 2em;
        line-height: 45px;
    }
    .smalltext{
        font-size: 0.8em;
    }

    /* About section */
    .about-sec-img{
        width: 60%;
        margin-top: 30px;
    }

    /* Tracks section  */
    .tracks-sec-list{
        width: 95%;
        padding: 1rem 0.25rem;
    }
    .tracks-sec-list > ul > li{
        font-size: 16px;
    }

    /* Timeline section */
    .timeline-v-line{
        left: 12.5%;
    }
    .timeline-element{
        width: 90%;
        margin: auto;
    }
    .timeline-divs > p{
        font-size: 16.5px;
    }

    /* Keynote Speaker section */
    .speaker-img-div{
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
    }
    .keynote-desc{
        width: 95%;
        margin: -85px auto auto auto;
        padding-top: 90px;
    }
    .keynote-desc > h1{
        font-family: font_4;
        font-size: 20px;
    }

    /* Sponsor section */
    .sponsor-img-div{
        margin-bottom: 25px;
        padding: 0 40px;
    }
    .sponsor-img-div > img{
        filter: grayscale(0);
    }

    /* Footer */
    .footer-sub-content {
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 30px;
    }
    .footer-sub-content:last-child{
        margin-bottom: 0 !important;
    }

    /* Subpages Common Styles */
    .subpage-paragraph{
        font-size: 18px;
        text-align: justify;
        padding: 10px;
    }
    .section-btn-area > div{
        margin: 10px 10px 45px 10px;
    }
    .section-btn-area > div:last-child{
        margin-bottom: 0;
    }

    /* Registration Page */
    .reg-packages-details > div > div{
        margin-bottom: 25px;
    }
    .reg-packages-details > div > div:last-child{
        margin-bottom: 0;
    }
    .reg-guidelines{
        padding-left: 10px;
        padding-right: 10px;
    }
    .reg-guidelines > table{
        width: 100%;
    }
    .reg-guidelines .notice-para{
        padding: 1rem;
    }
    .reg-guidelines .notice-para > ol{
        padding-left: 17px;
    }
    .reg-guidelines .notice-para > ol > li{
        margin-bottom: 10px;
    }
    .reg-guidelines .notice-para > ol > li:last-child{
        margin-bottom: 0;
    }

    /* Speakers Page */
    .speaker-details{
        padding-top: 100px;
        margin-top: -100px;
    }

    /* Gallery Box */
    .main-box{
        width: 50%;
        height: auto;
    }
}

/* =============================
-------- iPad Pro 10.5" --------
============================= */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {

    /* Common Styles */
    .section-content > p{
        font-size: 18px;
        text-align: justify;
    }
    
    /* Navigation Bar */
    .navbar-toggler > span{
        color: var(--theme-red);
    }
    .navbar-collapse{
        margin: 10px 0;
        padding: 10px 20px;
        border-radius: 13px;
        background: var(--theme-white);
    }
    .navbar-collapse > ul > li{
        margin-right: 0;
        text-align: center;
        border-bottom: 1px solid var(--theme-gray-line);
    }
    .navbar-collapse > ul > li:last-child{
        border-bottom: none;
    }

    /* About Section */
    .about-sec-img{
        margin-top: 20px;
        width: 30%;
    }

    /* Tracks Section */
    .tracks-sec-list{
        width: 70%;
        margin: auto;
    }

    /* Timeline Section */
    .timeline-v-line{
        left: 28.3%;
        top: 0;
    }
    .timeline-element{
        width: 50%;
        margin: auto;
    }

    /* Keynote Speaker Section */
    .keynote-desc{
        width: 100%;
        margin: -90px auto auto auto;
        border-radius: 20px;
        padding-top: 90px;
    }
    .keynote-desc > h1{
        font-size: 28px;
    }

    /* Submission Page */
    .section-btn-area > div > a{
        padding: 15px 18px;
    }

    /* Registration Page */
    .reg-packages-details > div > div{
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .card-header{
        font-size: 17px;
    }
    .card-title{
        font-size: 17px;
    }
    .card-text{
        font-family: font_1;
        font-size: 15.5px;
    }

    /* Speakers Page */
    .speaker-details{
        border-radius: 20px;
        padding-top: 95px;
        margin-top: -95px;
    }
}

/* =============================
------------- Laptop -----------
================================ */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
    .keynote-desc{
        width: 70%;
        margin: -140px auto auto auto;
        padding-top: 150px;
    }
    .speaker-details{
        border-radius: 20px;
        padding-top: 100px;
        margin-top: -100px;
    }
}