/* Reset default margin and padding */
/* COLORS: blue, white, red, green, white, green */
/* VARIABLES */
:root {
    --border-width: clamp(0.01px, 2px, 2px);
}
/* VARIABLES */
body {
    margin: 0;
    padding: 0;
    background-color: whitesmoke;
}
.hide {
    display: none;
}
/* Basic styles */
body {
    font-family: Arial, sans-serif;
}

header {
    background-color: #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    position: fixed;
    z-index: 1;
}

.logo {
    color: #333;
    font-size: 24px;
    /* position: absolute; */
}

nav {
    display: flex;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    margin-right: 20px;
}

nav ul li:last-child {
    margin-right: 0;
}

nav ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 10px 15px;
}

nav ul li a:hover {
    border: none;
    border-bottom: 2px solid lightgreen;
}
.headlist.active {
    background-color: green;
    border-radius: 5px;
    box-shadow: 4px 3px rgb(52, 35, 35);
}
.headlista {
    /* background-color: darkblue; */
    border-radius: 5px;
    box-shadow: 4px 3px lightgreen;
    position: relative; /* Needed for dropdown positioning */
}

nav ul li a:hover {
    background-color: #ddd;
    border-radius: 5px;
}
nav ul li a.active {
    background-color: #333;
    color: #fff;
    border-radius: 5px;
}

/* INDEX PAGE */
main {
    margin: 0px;
    padding: 0px;
    /* background-image: url("../images/raisehands.jpg"); */
    /* background-color: tomato; */
}

.hero {
    background-image:url("../images/smalltree.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position: fixed; */
    background-position-y:bottom ;
    /* background-color: #007bff; */
    color: black;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    padding-top: 70px;
    height: fit-content;
    /* height: clamp(300px, 400px, 800px); */
}

.hero h2 {
    font-size: 36px;
    margin-top: 20px;
}

.hero p {
    font-size: 18px;
    margin-top: 30px;
}

.hero button {
    background-color: green;
    color: white;
    text-align: center;
    align-self: center;
    border: none;
    margin-top: 7%;
    margin-right: 15%;
    margin-left: 15%;
    padding: 15px 30px;
    font-size: 18px;
    cursor: pointer;
    font-weight: bolder;
    border-radius: 5px;
}

.hero button:hover {
    background-color: #e0a800;
}

section {
    padding: 20px;
    margin: 20px 0;
}

section h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

section a {
    color: #007bff;
}
.programs {
    /* background-color: #ffc107; */
    display: grid;
    /* grid-template-columns: auto; */
    grid-template-columns: repeat(auto-fill, minmax(200px, 350px));
    font-size: clamp(17px, 50%, 20px);
    grid-auto-rows: auto;
    grid-template-rows: 100px;
    gap:20px;
    column-gap: 50px;
    justify-content: center;
    min-width: 150px;
}
.h1program {
    grid-column-start: 1;
    grid-column-end: -1;
    justify-self: center;
}
.newsevents {
    /* background-color: #2b2b2b; */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 600px));
    justify-content: center;
    gap: 20px;
    grid-template-rows: auto;
}
.news {
    /* background-color: blueviolet; */
    /* border-right: 2px solid; */
    border-right: var(--border-width) solid black;
    display: grid;
}
.events {
    /* background-color: #e0a800; */
    display: grid;
    /* border: 2px solid; */
}
.impact {
    /* background-color: #0056b3; */
    justify-content: center;
    display: grid;
    gap: 7px;
    grid-auto-rows: 400px;
    grid-template-rows: 100px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 400px));
    margin: 0 10em 0 10em;
}
.impacth2 {
    /* justify-self: center; */
    grid-column-start: 1;
    grid-column-end:-1;
}
.story {
    border: 1px solid ;
    background-color: #5b9ce0;
    color: white;
    padding: 7.5em;
}
/* section div h3 {
    background-color: yellowgreen;
} */
.partners{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 30px));
    /* grid-template-columns: 300px 300px 300px; */
    margin-left: 0px;
    grid-auto-rows: 200px;
    grid-template-rows: 100px;
    /* background-color: darkblue; */
    gap: 10px;
    justify-content: center;
}
.partner{
    /* border: 1px solid; */
    background-color: black;
    border-radius: 10px;
    color: white;
    text-align: center;
}
.patnerh1{
    display: block;
    grid-column-start: 1;
    grid-column-end: -1;
    /* background-color: #333; */
}
.partimg {
    border-radius: 5px;
    width: 150px;
    align-self: center;
    margin: 20px 80px;

}


/* FOOTER PAGE */

footer {
    background-color: rgb(0, 40, 54);
    padding: 20px;
    text-align: center;
    color: white;
}

footer p {
    margin: 5px 0;
}

footer a {
    color: #007bff;
    margin: 0 5px;
}

/* LOGIN PAGE############################################### */
.login {
    height: 700px;
    /* background-color: #e0a800; */
    background-image: url('../images/qwerty.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
/* LOGIN PAGE############################################### */








/* LIVE-TV############################################# */
/* main {
    padding: 20px;
} */
.upcoming-events{
    display: grid;
    /* background-color: #0056b3; */
    grid-template-columns: repeat(auto-fill,minmax(300px, 300px));
    column-gap: 5%;
    /* grid-template-columns: 300px 300px 300px; */
    /* grid-auto-rows: auto; */
    /* grid-template-rows: 100px; */
}
.upcoming-events ul li div {
    margin-bottom: 2%;
    border: 2px solid red; 
}
.upcoming-events h2 {
    /* border: 2px solid darkred;  */
    /* width: fit-content ; */
    grid-column-start: 1;
    grid-column-end: -1;
}
.live-stream, .interaction, .donate, .related-content {
    margin-bottom: 40px;
}

.live-stream .video-player {
    text-align: center;
    margin-bottom: 20px;
}

.live-stream .video-player iframe {
    width: 100%;
    height: 480px;
}

section h2 {
    font-size: 28px;
    color: green;
}

section ul {
    list-style-type: none;
    padding: 0;
}


section a {
    color: #007bff;
    text-decoration: none;
}

section a:hover {
    text-decoration: underline;
}
.donate button {
    background-color: #ffc107;
    color: #333;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    cursor: pointer;
}

.donate button:hover {
    background-color: #e0a800;
}

/* LIVE-TV############################################## */




/* PROGRAMS############################################# */
.intro {
    text-align: center;
    margin-bottom: 40px;
    background-image: url("../images/worldinstrument.jpg");
    background-repeat: no-repeat;   
    background-size: cover;
    background-position: left;
    padding-top: 5%;
    padding-bottom: 5%;
    color: #f0f0f0;
    /* height: 700px; */
}
.program-list .program img {
    width: 100%;
    height: 200px;
}

.search {
    text-align: center;
    margin-bottom: 40px;
}

.search input {
    padding: 10px;
    width: 50%;
    font-size: 16px;
}

.program-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    justify-content: space-around;
}

.program {
    /* width: 45%; */
    /* margin-bottom: 40px; */
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.program img {
    width: 100%;
    height: auto;
}

.program-info {
    padding: 20px;
}

.program-info h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.program-info p {
    margin-bottom: 10px;
}

.program-info a {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}

.program-info a:hover {
    text-decoration: underline;
}
/* PROGRAMS############################################# */


/*LIVE-TV############################################## */
.login-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.login-form h2 {
    text-align: center;
    margin-bottom: 20px;
}

.login-form form {
    display: flex;
    flex-direction: column;
}

.login-form label {
    margin-bottom: 5px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.login-form .remember-me {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.login-form .remember-me input {
    margin-right: 5px;
}
/*LIVE-TV############################################## */



/*service############################################## */
.introservice{
    text-align: center;
    padding-top: 10%;
    height: 400px;
    background-color: #0056b3;
    background-image: url("../images/human.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: fixed;
}
.service-list .service img {
    width: 100%;
    height: 200px;
}
.service-list {
    /* background-color: #0056b3; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 40px;
}
/* .testimonials { */
    /* background-color: #ffc107; */
/* } */
/* SERVICE TESTIMONIAL DIVS */
.carousel-container {
    margin-right: minmax(0%, 25%);
    margin-left: minmax(0%, 25%);
    width: 80%;
    /* margin: 25%; */
    /* max-width: 600px; */
    overflow: hidden;
    z-index: 0;
    position: relative;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    height: 200px;
  }
  
  .testimonial {
    display: none;
    text-align: center;
    transition: opacity 0.5s ease-in-out;
  }
  
  .testimonial h3 {
    margin-bottom: 10px;
  }
  
  .testimonial p {
    font-size: 1rem;
    color: #333;
  }
  
  .testimonial.active {
    display: block;
    opacity: 1;
  }

/* SERVICE TESTIMONIAL DIVS */

.service {
    width: fit-content;
    margin-bottom: 40px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service img {
    width: 100%;
    height: auto;
}

.service-info {
    padding: 20px;
    text-align: center;
}

.service-info h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.service-info p {
    margin-bottom: 10px;
}

.impact {
    text-align: center;
    margin-bottom: 40px;
}

.impact ul {
    list-style-type: none;
    padding: 0;
}

.impact ul li {
    font-size: 18px;
    margin-bottom: 10px;
}

.testimonials {
    text-align: center;
    margin-bottom: 40px;
    /* background-color: rebeccapurple; */
}

.testimonials blockquote {
    font-size: 18px;
    margin-bottom: 10px;
}

.testimonials cite {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    font-style: normal;
}

.call-to-action {
    text-align: center;
    margin-bottom: 40px;
}

.call-to-action .btn {
    padding: 10px 15px;
    border: none;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
    margin: 5px;
}

.call-to-action .btn:hover {
    background-color: #0056b3;
}

/*service############################################## */




/*contact############################################## */

/* CONTACT PAGE STYLE */
.tbox {
    padding-top: 10%;
    /* background-color: #007bff; */
    /* float: right; */
    /* margin: 10%; */
}
.boxes {
     /* width: 55vw; */
    /*height: fit-content;*/
    /* background-color: burlywood; */
    padding: 1%;
    text-align: center;
  } 
  .box1 { 
  height: 45px;
  width: 70%;
  margin: 10px;
  border-radius: 10px;
  }
  .box2 {
    /* display: block; */
    border-radius: 10px;
    height: 45px;
    width: 70%;
    margin-left: 4%;
    margin: 10px;
  }
  .box3 {
    
    border-radius: 10px;
    height: 45px;
    width: 70%;
    margin: 10px;
  }
  .box4 {
    width: 70%;
    margin: 10px;
    /* margin-left: 4%; */
    border-radius: 10px;
  }
  .box5 {
    height: 45px;
    width: 200px;
    border-radius: 10px;
    font-size: 150%;
    /* color: aquamarine; */
    /* position: absolute; */
    background-color: rgb(17, 17, 78);
    color: rgb(255, 132, 87);
    font-weight: bolder;
  }
  .box5:hover {
    font-weight: bolder;
    color:white;
    background-color: rgb(255, 132, 87);  
  }
.contact-info, .contact-form, .social-media, .faqs {
    margin-bottom: 40px;
}
.contact {
    /* border: 2px solid darkred; */
    margin-top: 5%;
    display: grid;
    /* background-color: rebeccapurple; */
    /* grid-template-columns: 300px 300px; */
    grid-template-columns: 2fr, 1fr;
    /* grid-template-rows: 300px; */
    gap: 10px;
    /* column-gap: 20px; */
    /* justify-content: center; */
}
.hov {
    margin-bottom: 2%;
}
.boxes {
    text-align: center;
    /* grid-column: 1 /3; */
} 
#locator {
    margin-bottom: 5%;

}
/* .conbox{ */
    /* width: 600px; */
    /* border: 1.5px solid red; */
    /* background-color: green; */
/* } */

.contact-info h2, .contact-form h2, .social-media h2, .faqs h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.contact-details {
    margin-bottom: 20px;
}

.contact-details p {
    margin-bottom: 10px;
}

.contact-map iframe {
    width: 100%;
    height: 450px;
    border: none;
    margin-bottom: 20px;
}

.contact-form form {
    display: flex;
    flex-direction: column;
}

.contact-form label {
    margin-bottom: 5px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.contact-form button {
    padding: 10px 15px;
    border: none;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

.contact-form button:hover {
    background-color: #0056b3;
}

.social-media {
    text-align: center;
}

.social-media p {
    margin-bottom: 10px;
}

.social-media a {
    text-decoration: none;
    color: #007bff;
    margin: 0 10px;
}

.social-media a:hover {
    text-decoration: underline;
}

.faqs .faq {
    margin-bottom: 20px;
}

.faqs .faq h3 {
    font-size: 18px;
    margin-bottom: 5px;
}
/*contact############################################## */






/*about############################################## */


.intro, .mission-vision, .history, .values, .team, .programs-impact, .partners, .testimonials, .call-to-action {
    margin-bottom: 40px;
}

.intro h2, .mission-vision h2, .history h2, .values h2, .team h2, .programs-impact h2, .partners h2, .testimonials h2, .call-to-action h2 {
    font-size: 24px;
    margin-bottom: 10px;
}
.values ul{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 200px));
    gap: 70px;
    grid-auto-rows: 100px;
    justify-content: center;
}
.values ul li {
    /* margin-left: 10%; */
    /* display: inline; */
    font-size: clamp(15px, 20px, 25px);
    border: 1px solid brown;
}

.team {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    gap: 10px;
    /* flex-wrap: wrap; */
    justify-content: center;
    /* background-color: lawngreen; */
    /* text-align: center; */
}
.team h2 {
    width: fit-content;
    text-align: center;
    /* position: absolute; */
    justify-self:center;
    grid-column: 1/-1;
    color: brown;
    /* background-color: #0056b3; */
    /* display: block; */
}

.team-member {
    justify-content: center;
    justify-self: center;
    text-align: center;
    min-width: 150px;
    width: 350px;
    max-width: 350px;
    margin-bottom: 40px;
    text-align: center;
    /* border: 2px solid red; */
    display: inline-block;
}

.team-member img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 10px;
}

.team-member h3 {
    font-size: 20px;
    margin-bottom: 5px;
}

.team-member p {
    margin-bottom: 5px;
}
.values ul {
    list-style-type: none;
    padding: 0;
    /* background-color: #007bff; */
}
/* .values {
    background-color: #0056b3;
} */
/* .history {
    background-color: yellowgreen;
} */

.values ul li {
    margin-bottom: 10px;
}

.programs-impact ul {
    list-style-type: none;
    padding: 0;
}

.programs-impact ul li {
    margin-bottom: 10px;
}

.testimonials blockquote {
    font-size: 18px;
    margin-bottom: 10px;
    text-align: center;
}

.testimonials cite {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    font-style: normal;
    text-align: center;
}

.call-to-action .btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px 0;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
}

.call-to-action .btn:hover {
    background-color: #0056b3;
}

/* about the vision and vision############################################## */
/* about the vision and vision############################################## */
.mission-vision {
    /* background-color: rgba(1, 184, 1, 0.1); */
    /* padding: 40px;uzxc */
    margin-top: 150px; 
    /* border-radius: 20px; */
    /* max-width: fit-content; */
    /* height: fit-content; */
    /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); */
    /* margin-left: 0px; */
    padding-left:0px;
    display: grid;
    gap: 10px;
    /* width: fit-content; */
    grid-template-columns: repeat(auto-fill);
}

#mission-vision-heading {
    color: #fbbf24;
    font-size: clamp(2rem, 2.5vw, 3rem);
    /* margin-bottom: 50px; */
    transition: color 0.5s ease-in-out;
    /* margin-left: 0px; */
    /* text-align: left; */
    /* float: left; */
    /* background-color: #000000; */
    width: fit-content;
    height: fit-content;
    grid-column-start: 1;
    grid-column-end:3;
    /* display: block; */
    /* position: absolute;  */ 
}

.text-container {
    /* display: block; */
    /* text-align: center; */
    /* position: relative; */
    /* margin: 0px; */
    overflow: hidden;
    /* float: left; */
    /* background-color: #110d06; */
    width: fit-content;
}

.mission-vision p {
    /* background-color: #b69254; */
    font-size: clamp(1rem, 1.5vw, 2rem);
    /* color: #ffffff; */
    /* line-height: 1.8; */
    /* margin: 20px 0; */
    /* display: none; */
    white-space:nowrap;
    overflow: hidden;
    /* margin-left: 0px; */
    border-right: .15em solid orange;
    /* width: fit-content; */
}

.mission-vision p.animated {
    margin-left: 0px;
    display: block;
    animation: typing 5s steps(40, end) 0s forwards, pauseText 2s steps(1, end) 5s forwards, hideText 5s steps(40, end) 7s forwards;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes pauseText {
    from {
        width: 100%;
    }
    to {
        width: 100%;
    }
}

@keyframes hideText {
    from {
        width: 100%;
    }
    to {
        width: 0;
    }
}
.mission-visionsmall {
    display: none;
}

.mission-vision strong {
    /* margin-left: 0px; */
    font-size: 1.5em;
    color: #f59e0b;
}
@media (max-width: 700px) {
    .mission-vision {
        display: none;
    }
    .mission-visionsmall {
        display: block;
        margin-top: 25vw;
        justify-self: self-end;
    }
    
    .mission-visionsmall {
        /* background-color: rgba(255, 255, 255, 0.1); */
        /* padding: 40px; */
        /* margin: 50px auto; */
        border-radius: 20px;
        width: fit-content;
        text-align: left;
        /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); */
    }
    
    .mission-visionsmall h2 {
        color: #fbbf24;
        font-size: clamp(2rem, 2.5vw, 3rem);
        margin-bottom: 30px;
        transition: color 0.5s ease-in-out;
    }
    
    .text-containersmall {
        position: relative;
    }
    
    .mission-visionsmall p {
        font-size: clamp(1.2rem, 1.5vw, 1.5rem);
        color: #ffffff;
        line-height: 1.8;
        margin: 20px 0;
        display: none; /* Initially hidden */
        transition: opacity 0.5s ease-in-out;
    }
    
    .mission-visionsmall p.active {
        display: block;
    }    
}


/* about the vision and vision############################################## */
/* about the vision and vision############################################## */
/* about############################################## */


/*signup############################################## */

/* main {
    padding: 20px;
} */

.signup-form {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.signup-form h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.signup-form p {
    margin-bottom: 20px;
}

.signup-form form {
    display: flex;
    flex-direction: column;
}

.signup-form label {
    margin-bottom: 5px;
}

.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form input[type="password"],
.signup-form input[type="text"],
.signup-form input[type="password"],
.signup-form select {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.signup-form .captcha {
    margin-bottom: 15px;
}

.signup-form button {
    padding: 10px 15px;
    border: none;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

.signup-form button:hover {
    background-color: #0056b3;
}

.signup-form p a {
    color: #007bff;
    text-decoration: none;
}

.signup-form p a:hover {
    text-decoration: underline;
}
/*signup############################################## */
/* ########LOGO STYLE -----LOGO STYLE########################### */
/* ########LOGO STYLE -----LOGO STYLE########################### */
/* ########LOGO STYLE -----LOGO STYLE########################### */
/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Header styling */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 1px;
    background-color: #677da9;
     /* Change as needed */
}

/* Logo styling */
.logo a {
    font-size: 24px;
    color: green;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    /* background-color: #e0a800; */
}
/* .logo {
    display: block;
} */

/* Navigation container styling */
nav {
    position: relative;
}

/* Dropdown button styling */
.dropbtn {
    /* display: none; */
    color: white;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bolder;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
}


/* Dropdown content container */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0; /* Aligns the dropdown to the right */
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
    /* color: black; */
}

/* Dropdown content items */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

/* Hover effects */
.dropdown-content a:hover {
    background-color: rgb(0, 40, 54);
    color: whitesmoke;
    font-weight: bold;
}

/* Show the dropdown when hovered */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Dropdown container hover effect */
/* .dropdown:hover .dropbtn {
    background-color: #0052cc;
} */


/* Responsive adjustments */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* .dropdown-content {
        right: auto;
        left: 0;
    } */
    .hide {
        display: flex;
        /* direction: row; */
        justify-content: space-between;
        /* padding-right: 1%; */
        /* background-color: tomato; */
        /* width: 95vw; */
        /* width: fit-content; */
        margin-left: 0;
    }
    header {
        position: fixed;
    }
}
/* .hide {
    display: flex;
    justify-content: space-evenly;
} */
/* ########LOGO STYLE -----LOGO STYLE########################### */
/* MEDIA QUERIS.....MEDIA QUERIS.....MEDIA QUERIS */
/* MEDIA QUERIS.....MEDIA QUERIS.....MEDIA QUERIS */
@media (max-width: 850px) {
    header nav{
        display: none;
    }
    .logo1 {
        display: none;
    }
    .hide {
        display: flex;
        /* direction: row; */
        justify-content: space-between;
        padding-right: 1%;
        /* background-color: tomato; */
        width: 95vw;
    }

}
@media (max-width: 1240px) {
    .news {
        border-right: 0px solid black;
    }
}
/* MEDIA QUERIS.....MEDIA QUERIS.....MEDIA QUERIS */
/* MEDIA QUERIS.....MEDIA QUERIS.....MEDIA QUERIS */