@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap'); /*== Additional Info ==*/

body::before {
    display: block;
    content: '';
    height: 56px;
}

@media(min-width: 768px) {
    .news-input {
        max-width: 50%; /*== max-width is used insted of width because it's values are not applying ==*/
    }
}

/*===== navbar search =====*/

.logo{
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img{
    width: 27px;
    height: 27px;
    margin-left: 10px;

}

.logo a{
    font-size: 18px;
}

.search input{
    width: 280px;
    max-width: 280px;
    height: 30px;
    
}

.search button{
    height: 32px;
    width: 32px;
    border-radius: 50%;
}

.search img{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.9px 0 0 -1px;
}

.col{
    margin-bottom: 30px;
}

.col .tp{
    margin: 0px;
}

.dropstart > li > a{
    color: black;
    transition: all 0.5s ease;
}

.dropstart > li > a:hover{
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
}

.dropstart > li > a.active{
    color: grey;
}

.navbar-collapse{
    margin-top: 10px;
}

/*----- maps, tools, softwares, devices, labs, documentation, browsers, courses, internships, resources, "youtube"----*/

.documentation,
.documentation img,
.resource,
.resource img,
.software,
.software img,
.tools,
.tools img,
.internships,
.internships img,
.course,
.course img,
.browsers,
.browsers img,
.devices,
.devices img,
.maps,
.maps img,
.labs,
.labs img,
.pers,
.pers img{
    width: 200px;
    height: 200px;
    border-radius: 10px 0px 10px 10px;
    box-shadow: 0 6px 11px rgba(0,0,0,.2);
    cursor: pointer;
}

/*-- youtube --*/

.youtube img{
    width: 350px;
    height: 200px;
    border-radius: 10px 0px 10px 10px;
    box-shadow: 0 6px 11px rgba(0,0,0,.2);
    cursor: pointer;
}

.box-doc:hover,
.counseling:hover,
.documentation:hover,
.youtube:hover,
.resource:hover,
.software:hover,
.tools:hover,
.internships:hover,
.course:hover,
.browsers:hover,
.devices:hover,
.maps:hover,
.labs:hover,
.pers:hover{
    transform: scale(1.03);
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
}

/*---- college counseling ----*/

.counseling{
    width: 300px;
    height: 130px;
    border-radius: 10px 0px 10px 10px;
    box-shadow: 0 6px 11px rgba(0,0,0,.2);
    cursor: pointer;
}

.sode{
    width: 170px;
    height: 40px;
}

.sode-rating{
    width: 90px;
    height: 40px;
}

.logos,
.counselor{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.counselor img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: solid grey 1px;
}

/*== present applied to colleges ==*/

.per{
    width: 200px;
    height: 240px;
    border-radius: 10px 0px 10px 10px;
    box-shadow: 0 6px 11px rgba(0,0,0,.2);
    cursor: pointer;
}

.per img{
    width: 200px;
    height: 150px;
    border-radius: 10px 0px 0px 0px;
    border-bottom: 0.2px solid gray;
    cursor: pointer;
    margin-bottom: 30px;
}

/*================ Colleges ===============*/

.college,
.college img{
    width: 200px;
    height: 240px;
    border-radius: 10px 0px 10px 10px;
    box-shadow: 0 6px 11px rgba(0,0,0,.2);
    cursor: pointer;
}

.college:hover{
    transform: scale(1.03);
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
}

/*--- model ( college popup's ) ---*/

.modal-dialog {
    width: 60vw;
    height: 40vh; 
    max-width: none; /* To ensure the width is not limited by Bootstrap's default max-width */
} 

.modal-header, 
.modal-footer { 
    border: none; /* Remove the horizontal */
}

.modal-header h5 { 
    margin-bottom: 0; /* Ensure no extra spacing below the title */ 
}

.modal-footer { 
    margin-top: 0; /* Ensure no extra spacing above the footer */ 
}

.college_logo{
    display: flex;
    align-items: center;
    gap: 10px;
}

.college_logo img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: bold black 1px;
}

.modal-body .programs{
    font-size: 16.5px;
}

.courses{
    display: flex;
    gap: 30px;
}

.courses p{
    line-height: 16px;
}

.bold{
    color: black;
    font-weight: 500;
    font-size: 14px;
}

/*=====Youtube channels =====*/

.assignment{
    margin-top: -18px;
}

.container .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 15px;
}

.container .box-container .box,
.container .box-container .doxs,
.container .box-container .box-doc,
.container .box-container .youtube{
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    border-radius: 5px;
    background: #fff;
}   

.container .box,
.container .youtube{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 0px 10px 10px;
}

.container .box a{
    text-decoration: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 20px 10px 20px;
}

.container .doxs:hover,
.container .box:hover{
    transform: scale(1.03);
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
}

/*===== Documentation =====*/

.additional a{
    text-decoration: none;
}

.box-doc .image{
    display: flex;
    gap: 20px;
}

.box-doc img{
    width: 40px;
    height: 40px;
}

.image h6{
    margin-top: 20px;
    color: #000;
}

.box-doc p{
    font-size: small;
    margin-top: 10px;
    color: #000;
}

.doxs{
    color: #000;
    text-align: center;
}

/*====== Footer =====*/

.footer-hr{
    width: 60%;
    margin-left: 20%;
}

.addi-info{
    font-weight: lighter;
    margin-top: -10px;
    font-size: 13px;
}

.search-1 input{
    width: 300px;
    max-width: 300px;
    height: 30px;
}

.search-1 button{
    height: 32px;
    width: 32px;
    border-radius: 50%;
}

.subscription img{
    width: 25px;
    height: 25px;
    margin-left: -7.5px;
    margin-top: -10px;
}

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

/*=====  =====*/

.newsletter-boxbox{
    margin: 0 auto;
}

.row h6{
    font-size: 14px;
}

.row p{
    font-size: 13px;
    font-weight: lighter;
    margin-bottom: 8px;
    margin-left: 0;
    margin-top: -4px;
}

.row a{
    color: #fff;
    margin-top: -10px;
    font-size: 13px;
}

.ul .btn{
    font-size: 18px;
}

/*===== About =====*/
.about a{
    font-size: 15px;
    margin-bottom: 30px;
    text-decoration: none;
}