* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
    

}
::selection{
    background-color: #FFD230;
}
body {
    border: 2px black solid
}

section.header {
    background-color: #fff085;
    padding-top: 10px;


}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    margin: auto;
    width: 90%;
    position: relative;
}

.navbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    border-radius: 10px;
    border: 2px black solid;
    background-color: white;
    color: black;
    width: 90%;
    margin: auto;
    /* justify-content: space-around; */
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 40px;
    z-index: 999;
    position: fixed;

    left: 0;
    right: 0;

}

.btn {
    display: none;
    width: 7%;



    background-color: #FAF5FF;
}

h1 {
    font-weight: 900;

}

h1 span {
    color: #FF6900;
}

ul {

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

li {
    padding: 15px;
}

.navbar a {
    color: black;

}

.navbar a:hover {
    color: #FF6900;
}

.nav {
    background-color: #FFD15B;
    color: black;
    border-radius: 20px;
    padding: 10px;
    border: 2px solid black;
    transition: all 5ms;


}

.nav:hover {
    transform: translate(4px);

}

.trading {
    border: 2px black solid;
    background-color: black;
    width: fit-content;
    color: white;
    padding: 10px 8px;
    rotate: -3deg;
    box-shadow: 3px 3px black;
    position: absolute;
    top: 130px;
    left: 10px;
    font-weight: 900;


}

.block {
    background-color: rgba(0, 0, 0, 0.142);
    width: 120px;
    height: 120px;
    rotate: 15deg;
    position: absolute;
    top: 15px;
    left: 0px;


}

.header-contant {

    padding-top: 200px;
    font-weight: 900;
    text-shadow: 3px 3px 4px #000000;
    font-size: 80px;

}

.color-one {
    color: #E7000B
}

.color-two {
    color: #155DFC
}

.header-p {
    border: 3px black solid;
    background-color: white;
    width: fit-content;
    padding: 10px 20px 10px 10px;
    font-weight: 800;
    font-size: 30px;
    box-shadow: 3px 3px black;
    margin-top: 30px;



}

.header-img {
    border: 4px solid black;
    width: 45%;
    height: 400px;
    position: absolute;
    right: 20px;
    bottom: 150px;
    box-shadow: 3px 3px black;
    overflow: hidden;
    rotate: 3deg;
    transition: all 5ms;
    z-index: 5;


}

.header-img:hover {
    transform: translate(-4px);
}

.header-img img {
    width: 100%;
    display: block;

}

.featured {
    border: 2px #FB2C36 solid;
    background-color: #FB2C36;
    width: fit-content;
    color: white;
    padding: 10px 8px;
    rotate: 7deg;
    box-shadow: 3px 3px black;
    position: absolute;
    top: 280px;
    right: 10px;
    font-weight: 900;
    z-index: 89;
    border: #000000 3px solid;

}

.red-block {
    background-color: rgba(255, 0, 0, 0.142);
    width: 10%;
    height: 100px;
    rotate: 30deg;
    position: absolute;
    top: 250px;
    right: 0px;

}

.button-one {
    background-color: #000000;
    margin-top: 30px;
    width: 45%;
    padding: 20px;
    color: white;
    box-shadow: 4px 4px black;
    border: none;
    border: 3px solid black;

}

.button-two:hover,
.button-one:hover {
    transform: translate(-4px);
}

.button-two {
    background-color: white;
    margin-top: 30px;
    width: 45%;
    padding: 20px;
    color: black;
    box-shadow: 4px 4px black;
    border: 3px solid black;
}

.buttons {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding-bottom: 30px;
}

.left {
    width: 50%;
}

.right {
    width: 50%;
}

.ju-sp-bet {
    justify-content: space-between;
}



/* section latest articles */

.latest-articles {
    padding-top: 60px;
    padding-bottom: 30px;
    border: #000000 2px solid;
    background-color: #F5F5F5;
    position: relative;
}

.latest-articles-left {
    width: 65%;
    position: relative;

}

.first {
    display: flex;
    justify-content: space-between;
}

.h2-fresh h2 {
    font-size: 30px;
    font-weight: 800;
    font-family: Georgia, 'Times New Roman', Times, serif;


}

.fresh-contant {
    border: 2px black solid;
    background-color: black;
    width: fit-content;
    color: white;
    padding: 10px 8px;
    rotate: 5deg;
    box-shadow: 3px 3px black;


    font-weight: 900;


}

.card {

    border: 2px black solid;
    padding: 20px;
    margin-top: 30px;
    background-color: #ffffff;
    box-shadow: 4px 4px black;
    display: flex;
    justify-content: space-between;
}

.card:hover {
    transform: translate(4px);





}

.card:hover .one {
    color: #E7000B;
}

.card-one {
    width: 30%;
    position: relative;
}

.card-one img {
    width: 100%;
    border: #000000 solid 2px;


}

.new {
    /* border: 2px #FB2C36 solid; */
    background-color: #FB2C36;
    width: fit-content;
    color: white;
    padding: 5px;
    rotate: 7deg;
    box-shadow: 1px 1px black;
    position: absolute;
    top: 0px;
    left: 160px;
    font-weight: 900;
    z-index: 89;
    border: #000000 2px solid;
}

.card-one-right span.one {
    font-size: 20px;
    font-weight: 900;



}

.card-one-right span.two {
    font-weight: 300;


}

.card-one-right {
    width: 65%;
    position: relative;
    padding: 10px;
    margin-top: 20px;


}

.tech {
    /* border: 2px #FB2C36 solid; */
    background-color: #FFDF20;
    width: fit-content;
    color: rgb(0, 0, 0);
    padding: 5px;
    rotate: -2deg;
    box-shadow: 2px 2px black;
    position: absolute;
    top: -30px;
    left: 0px;
    font-weight: 900;
    z-index: 89;
    border: #000000 2px solid;
}

.x {
    display: flex;
    flex-wrap: wrap;

    justify-content: space-between;


}

.s {
    width: 25%;
}

.culture {
    /* border: 2px #FB2C36 solid; */
    background-color: #FDA5D5;
    width: fit-content;
    color: rgb(0, 0, 0);
    padding: 5px;
    rotate: -2deg;
    box-shadow: 2px 2px black;
    position: absolute;
    top: -30px;
    left: 0px;
    font-weight: 900;
    z-index: 89;
    border: #000000 2px solid;
}

.viral {
    /* border: 2px #FB2C36 solid; */
    background-color: #AD46FF;
    width: fit-content;
    color: white;
    padding: 5px;
    rotate: 7deg;
    box-shadow: 1px 1px black;
    position: absolute;
    top: 0px;
    left: 170px;
    font-weight: 900;
    z-index: 89;
    border: #000000 2px solid;
}

.card:hover .oneplusplus {
    color: #cc00ff;
}

.card-one-right span.oneplusplus {
    font-size: 20px;
    font-weight: 900;



}

.design {
    background-color: #7BF1A8;
    width: fit-content;
    color: rgb(0, 0, 0);
    padding: 5px;
    rotate: 4deg;
    box-shadow: 2px 2px black;
    position: absolute;
    top: -30px;
    left: 0px;
    font-weight: 900;
    z-index: 89;
    border: #000000 2px solid;
}

.hot {
    background-color: #2B7FFF;
    width: fit-content;
    color: white;
    padding: 5px;
    rotate: -4deg;
    box-shadow: 1px 1px black;
    position: absolute;
    top: 0px;
    left: 180px;
    font-weight: 900;
    z-index: 89;
    border: #000000 2px solid;

}

.card-one-right span.oneplus {
    font-size: 20px;
    font-weight: 900;



}

.card:hover .oneplus {
    color: #0088ff;
}

.c-r {
    color: #E7000B;
}

.more-art {
    background-color: #000000;
    border: none;
    width: fit-content;
    color: white;
    padding: 20px 40px;
    margin-top: 30px;
    box-shadow: 4px 4px black;
}

.mb {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;

}

.more-art:hover {
    transform: translate(4px);
    box-shadow: none;
}

.latest-articles-right {

    width: 30%;
    padding-top: 10px;
    position: sticky;
    align-self: flex-start;
    top: 0;


}

.trending-now {
    border: 2px solid black;
    padding: 20px 30px;
    background-color: #ffffff;
    box-shadow: 4px 4px black;

    top: 0;
}

.display {
    display: flex;
    justify-content: space-between;
}

.trending-span {
    font-size: 30px;
    font-weight: 800;
    padding: 5px 10px;

}

.trending-one-span-one {
    font-size: 30px;
    font-weight: 800;
    color: #E7000B;
}

.trending-one-span-two {
    font-weight: 600;
}

.trending-one {
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0px;
}

.all-plus {

    display: flex;
    flex-wrap: wrap;
    /* flex-direction: column;
    align-content: space-between; */
}

.trending-one-span-one-plus {
    font-size: 30px;
    font-weight: 800;
    color: #0088ff;
}

.trending-one-span-one-plusplus {
    font-size: 30px;
    font-weight: 800;
    color: #AD46FF;
}

.hover-one:hover {
    color: #E7000B;
}

.hover-two:hover {
    color: #0088ff;
}

.hover-three:hover {
    color: #AD46FF;
}

.categories {
    margin-top: 20px;
    border: #000000 2px solid;
    background-color: white;
    padding-top: 30px;

    box-shadow: 5px 5px black;
}

.row {
    border: #000000 2px solid;
    width: 80%;
    margin: 5px 0px;
    padding: 10px 0px 10px 10px;


}

.rows {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.row1 {
    background-color: oklch(97.3% .071 103.193);
}

.row1:hover {
    background-color: #FFDF20;
    box-shadow: 4px 4px black;

}

.row2 {
    background-color: oklch(96.2% .044 156.743);
    ;
}

.row2:hover {
    background-color: #7BF1A8;
    box-shadow: 4px 4px black;

}

.row3 {
    background-color: oklch(94.8% .028 342.258);
}

.row3:hover {
    background-color: #FDA5D5;
    box-shadow: 4px 4px black;

}

.row4 {
    background-color: oklch(93.2% .032 255.585);
}

.row4:hover {
    background-color: #2B7FFF;
    box-shadow: 4px 4px black;

}

.row5 {
    background-color: oklch(94.6% .033 307.174);
    ;
}

.row5:hover {
    background-color: #AD46FF;
    box-shadow: 4px 4px black;

}

/* meet the authors section */
.meet-the-authors {
    background-color: #FFD230;
    padding-bottom: 50px;
    border: #000000 solid 3px;
    padding-top: 50px;
    position: relative;
}

.meet-the-authors h3 {
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    padding-bottom: 20px;
}

.meet-the-authors p {
    text-align: center;
    font-size: 18px;

}

.meet-the-authors p::after {
    content: "";
    width: 190px;
    height: 10px;
    background-color: #000000;
    position: absolute;
    top: 150px;
    left: 550px;
}

.authors {
    margin-top: 60px;
    width: 100%;

    display: flex;
    justify-content: space-between;

}



.author-one {
    width: 32%;
    border: #000000 2px solid;

    padding-left: 10px;
    transition: all .25s;

}

.author-one:hover .author-one-span-one {
    color: #E7000B;


}

.author-one:hover .spical {
    color: #AD46FF;


}

.author-one:hover .spical-more {
    color: #2B7FFF;


}

.author-one:hover {
    box-shadow: #000000 5px 5px;
    transform: translate(-4px);



}

.inner {

    padding: 50px;


}

.author-img {
    width: 50%;
    margin-bottom: 20px;
    margin: auto;
    border: #000000 4px solid;

}

.author-img img {
    width: 100%;
    display: block;
}

.author-name {
    text-align: center;

    padding: 10px 0px;
    position: relative;
}

.author-one-span-one {
    font-size: 25px;
    font-weight: 700;

}

.founder::after {
    content: "founder";
    background-color: #E7000B;
    position: absolute;
    top: -170px;
    right: -30px;
    width: fit-content;
    border: #000000 2px solid;
    rotate: 15deg;
    color: white;
    padding: 0 3px;



}

.lead::after {
    content: "lead";
    background-color: #2B7FFF;
    position: absolute;
    top: -170px;
    right: -30px;
    width: fit-content;
    border: #000000 1px solid;
    rotate: -15deg;
    color: white;
    padding: 0 3px;

}

.special-viral::after {

    content: "viral";
    background-color: #AD46FF;
    position: absolute;
    top: -170px;
    right: -30px;
    width: fit-content;
    border: #000000 1px solid;
    rotate: 30deg;
    color: white;
    padding: 0 3px;



}

.author-one-span-two {
    font-size: 18px;
    color: #525264;

}

.logos {
    width: 40%;
    margin: auto;
    display: flex;
    justify-content: space-between;


}

.logos a {
    width: 30%;

}

.logos img {
    width: 100%;
    background-color: #000000;
    transition: all .10s;
}

.logo-one:hover {
    box-shadow: 3px 3px black;
    transform: translate(-2px);
    background-color: #2B7FFF;
    border: #000000 solid 1px;

}

.logo-two:hover {
    box-shadow: 3px 3px black;
    transform: translate(-2px);
    background-color: #155DFC;
    border: #000000 solid 1px;

}

.logo-three:hover {
    box-shadow: 3px 3px black;
    transform: translate(-2px);
    background-color: #AD46FF;
    border: #000000 solid 1px;

}

.first-plus {
    background-color: #FEF9C2;
}

.first-plus-plus {
    background-color: #DBFCE7;
}

.first-plus-plus-plus {
    background-color: #FCE7F3;
}

/* join section */
.join {
    background-color: #F5F5F5;
    padding-bottom: 50px;
    border: #000000 solid 3px;
    padding-top: 50px;
    position: relative;

}

.join h3 {
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    padding-bottom: 20px;
}

.join p {
    text-align: center;
    font-size: 18px;
    padding-bottom: 60px;

}

.join p::after {
    content: "";
    width: 190px;
    height: 10px;
    background-color: #000000;
    position: absolute;
    top: 150px;
    left: 550px;
}

.join-left {
    width: 50%;


}

.join-left-h4 {
    font-size: 30px;
    padding-top: 50px;
    padding-bottom: 30px;
}

.join-left-span-main {
    border: 2px black solid;
    background-color: white;
    padding: 30px;
    font-size: 20px;
    box-shadow: #000000 4px 4px;
    padding-bottom: 30px;
    ;
}

.join-left-slides {
    width: 100%;



    padding-top: 50px;
    padding-bottom: 20px;
    position: relative;

}

.slide-one {
    font-size: 18px;






}

.correct {
    border: #000000 2px solid;
    background-color: #E7000B;
    width: 50px;
    font-weight: 900;
    font-size: 30px;
    color: white;
    margin-right: 10px;
    padding: 5px 10px;

}

.first-slide {
    display: flex;
    width: 100%;
    padding-bottom: 10px;
}

.color-bl {
    background-color: #0088ff;
}

.color-pu {
    background-color: #AD46FF;
}

.color-gr {
    background-color: #00C950;
}

.slide-lift {
    margin: auto;
    width: 60%;
    padding: 20px 30px;
    margin-top: 20px;
    background-color: #000000;
    color: white;
    font-size: 20px;
    border: none;
    box-shadow: 5px 5px black;
    transition: all .3s;

}

.slide-lift:hover {
    transform: translate(4px);
    box-shadow: none;
}

.join-right {
    width: 50%;

    border: #000000 4px solid;
    background-color: white;
    box-shadow: #000000 4px 4px;
}

.rebels-one {
    background-color: #FCE7F3;
    width: 100%;

    border: #000000 3px solid;
    padding: 20px 20px;
    font-weight: 600;
    margin-bottom: 20px;

}

.rebels-one-img {
    width: 20%;

    border: #000000 2px solid;
}

.rebels-one-img img {
    width: 100%;
    height: 100%;
    display: block;
}

.kl {

    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    width: 60%;
    justify-content: space-between;
}

.q {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

.p {
    font-weight: 100;
    color: #525264;
}

.color-light {
    background-color: #EFF6FF;

}

.color-z {
    background-color: #FAF5FF;
}


/* section footer */
.footer {
    background-color: #000000;
   

    padding-top: 60px;
    color: white;

}

.main-footer {
    border-bottom: white solid 4px;

    width: 100%;
    display: flex;
    padding: 20px 10px;

}

.main-footer-left {
    width: 32%;
    
}

.pin {
   
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.pin-one {
    color: rgb(0, 0, 0);
    background-color: white;
    width: 20%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 800;


}

.pin-span {
    color: white;
    font-size: 20px;
    width: 70%;
}

.pin-p {
    font-size: 20px;
    margin-top: 20px;
}

.pin-ul {
    display: block;
}


.pin-a:hover {
    color: #FFD230;
}

.email {
    width: 100%;
    margin-top: 10px;

    padding: 15px 5px;
    background-color: #000000;
    border: white 2px solid;
    color: white;
}



.subscribe {
    width: 100%;
    background-color: #FFDF20;
    padding: 20px 5px;
    box-shadow: -4px -4px rgba(0, 0, 0, 0.2) inset;
}

.subscribe:hover {
    transform: translate(4px);
}
.end{
    display: flex;
    justify-content: flex-end;
}
.bottom-footer{
    width: 100%;
    display: flex;
    justify-content: baseline;
    padding: 30px 0;
}
.end-a{
    width: 25%;
    padding: 0;
}
.end-a:hover{
    color: #FFDF20;
}
.bottom-footer-left {
    width: 50%;
    font-size: 18px;
}
.bottom-footer-right{
    width: 50%;
}























































































/* media for section header */



@media screen and (max-width:768px) {
    .navbar {
        width: 100%;

        position: relative;
        display: flex;
        justify-content: space-between;

        padding-left: 10px;
        padding-right: 10px;


    }

    .btn {
        display: block;
    }

    .navbutt {
        display: none;
    }

    ul {
        display: none;


    }

    .featured {
        top: 40px;
        left: 60px;
    }

    .ju-sp-bet {
        display: inline-block;
        width: 100%;
    }

    .header-contant {
        display: inline-block;
        width: fit-content;
    }

    .left {
        width: 100%;
    }


    .header-img {
        border: 4px solid black;
        width: 30%;
        height: fit-content;
        position: absolute;
        right: 20px;
        bottom: 700px;
        box-shadow: 3px 3px black;
        overflow: hidden;
        rotate: 3deg;
        transition: all 5ms;
        z-index: 5;


    }

    .display {
        display: block;
    }

    .latest-articles-left {
        width: 100%;
    }

    .latest-articles-right {
        width: 100%;
    }

    .tech {
        right: 20px;
        left: inherit;
    }

    .design {
        right: 20px;
        left: inherit;
    }

    .culture {
        right: 20px;
        left: inherit;

    }

    .meet-the-authors p::after {
        display: none;
    }

    .authors {
        display: block;
    }

    .author-one {
        width: 100%;
        margin-bottom: 10px;
    }

    .join p::after {
        display: none;
    }

    .join-left {
        width: 100%;
    }

    .join-right {
        width: 100%;
    }

    .red-block {
        right: 20px;
    }
    .main-footer{
        display: block;
    }
    .main-footer-left{
        width: 100%;
    }
    .end{
        justify-content: space-between;
    }
}

@media screen and (max-width:992px) {
    .navbar {
        width: 100%;

        position: relative;
        display: flex;
        justify-content: space-between;

        padding-left: 10px;
        padding-right: 10px;


    }

    .btn {
        display: block;
    }

    .navbutt {
        display: none;
    }

    ul {
        display: none;


    }

    .featured {
        top: 40px;
        left: 60px;
    }

    .ju-sp-bet {
        display: inline-block;
        width: 100%;
    }

    .header-contant {
        display: inline-block;
        width: fit-content;
    }

    .left {
        width: 100%;
    }


    .header-img {
        border: 4px solid black;
        width: 30%;
        height: fit-content;
        position: absolute;
        right: 20px;
        bottom: 600px;
        box-shadow: 3px 3px black;
        overflow: hidden;
        rotate: 3deg;
        transition: all 5ms;
        z-index: 5;


    }

    .display {
        display: block;
    }

    .latest-articles-left {
        width: 100%;
    }

    .latest-articles-right {
        width: 100%;
    }

    .tech {
        right: 20px;
        left: inherit;
    }

    .design {
        right: 20px;
        left: inherit;
    }

    .culture {
        right: 20px;
        left: inherit;

    }

    .meet-the-authors p::after {
        display: none;
    }

    .authors {
        display: block;
    }

    .author-one {
        width: 100%;
        margin-bottom: 10px;
    }

    .join p::after {
        display: none;
    }

    .join-left {
        width: 100%;
    }

    .join-right {
        width: 100%;
    }

    .red-block {
        right: 20px;
    }
    .main-footer{
        display: block;
    }
    .main-footer-left{
        width: 100%;
    }
    .end{
        justify-content: space-between;
    }
    .founder::after {
    
    top: -300px;
    right: 110px;
    



}

.lead::after {
   
    top: -300px;
    right: 110px;
  
}
.special-viral::after {

    
    top: -300px;
    right: 110px;
  
}

}