* {

    margin: 0px;
    padding: 0px;
    font-family: 'Segoe UI', serif;

}

/** TOP BAR **/

.top-bar {

    height: 40px;
    width: 100%;
    background-color: #161616;
    display: flex;
    flex-direction: row-reverse;

}

.top1 {

    height: 40px;
    width: 40px;
    cursor: pointer;

}

.ea-logo {

    background-image: url("Logo-2.png");
    margin: 0px 35px 0px 20px;

}

.ea-logo:hover {

    transition: 150ms;
    background-image: url('Logo-3.png');

}

.symbol {

    display: flex;
    justify-content: center;
    align-items: center;
    color: #B2B2B2;
    font-size: 1.2em;
    margin-left: 20px;

}

.symbol:hover {

    color: white;

}

/** NAVIGATION BAR **/

.navbar {

    height: 56px;
    width: auto;
    display: flex;
    align-items: center;
    background-color: white;
    padding: 0px 0px 0px 24px;

}

.top2 {

    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

}

.list-icon {

    font-size: 24px;
    height: 56px;
    width: 5px;
    transition: 200ms;

}

.list-icon:hover {

    transition: 200ms;
    color:#fe4948;
    font-size: 30px;

}

.ea-wordmark {

    background-image: url("EA\ Wordmark.svg");
    height: 23px;
    width: 194px;
    background-size: contain;
    margin: 0px 48px 0px 40px;

}

.dropdown {

    margin: 0px 4px 0px 8px;
    border: 0px;
    font-size: 18px;
    color: rgb(22, 22, 22);
    cursor: pointer;
    padding-right: 8px;

}

.top2:hover .dropdown {

    color: #fe4948;

}

.top2:hover .drop {

    display: block;
    
}

.flex {

    display: flex;
    padding: 30px 0px;

}

.drop2 {

    margin-left: -30px;

}

.drop {

    display: none;
    margin: 10px 0px 25px -35px;
    padding: 10px 0px;
    position: absolute;
    max-height: fit-content;
    max-width: fit-content;
    line-height: 18px;
    color: #161616;
    background-color: rgba(248, 244, 252, 0.95);
    border-radius: 7px; 

}

.option {

    color: gray;
    font-size: 15px;
    padding: 10px 30px;
    margin-right: 20px;

}

.option:hover {

    color: #fe4948;

}

.heading {

    color: #393939; 
    font-size: 16px;
    text-decoration: underline;
    text-decoration-color: gray;
    text-underline-offset: 20px;

}

.heading:hover {

    color: #393939;     

}

.img-sec {

    background-image: url('Main\ Img.jpg');
    height: 585px;
    width: auto;
    background-size: cover;
    display: flex;
    
}

.img-subsec {

    height: 585px;
    width: 36%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 130px;

}

.img1 {

    height: 297px; 
    width: 280px;

}

.play-now {

    margin: 10px 0px;
    height: 33px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.play-button {

    color: rgb(243, 243, 243);
    background-color: #FF4747;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    font-weight: 500;
    border-radius: 3px;
    padding: 12px 24px;
    margin: 5px 0px 0px 0px;
    cursor: pointer;
    transition: 100ms;
    
}

.play-button:hover {

    padding: 15px 27px;
    transition: 100ms;

}

/** MAIN PAGE-1 **/

.featured {

    height: fit-content;

}

.title {

    display: flex;
    justify-content: center;
    font-size: 42px;
    font-weight: 650;
    color: #161616;
    padding: 50px 0px 30px 0px;

}

.image {

    display: flex;
    justify-content: center;
    width: auto;

}

.img {

    height: 360px;
    width: 360px;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;

}

.effect {

    height: 40px;
    width: auto;
    z-index: 2;
    transition: 500ms;

}

.img:hover  .effect {

    transition: 500ms;
    translate: 0px -55px;

}

.dragonage {

    background-image: url("Dragon\ Age.jpg"); 

}

.fc25 {

    background-image: url("FC25.png");
    margin: 0px 27px;

}

.m25 {

    background-image: url("M25.jpg");

}

.fi24 {

    background-image: url("FI24.jpg");
    margin-top: 27px;

}

.sims4 {

    background-image: url("SIMS4.jpg");
    margin: 27px 27px;

}

.apex {

    background-image: url("Apex.jpg");
    margin-top: 27px;

}

.browse {

    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;

}

.browse-button {

    height: 25px;
    width: 110px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    color: #393939;
    border: 2px solid black;
    border-radius: 3px;
    cursor: pointer;
    transition: 80ms;

}

.browse-button:hover {

    padding: 14px 28px;
    transition: 80ms;

}

/** MAIN PAGE-2 **/

.update-block {

    margin: 20px 0px 5px 0px;

}

.update-navbar {

    height: 60px;
    margin: -30px 0px 10px 0px;
    padding: 0px 60px;
    display: flex;
    align-items: center;
    border-bottom: 3px solid #dedede;
    

}

.updates {

    height: 60px;
    max-width:fit-content;
    display: flex;
    align-items: center;
    padding: 0px 20px;
    justify-content: center;
    font-size: 16.5px;
    font-weight: 500;
    color: #3e3e3e;
    cursor: pointer;

}

.updates:hover {

    background-color: #dedede;
    color: #6a6b6a;
    

}

.divide {

    padding: 0px;
    margin: 0px;
    height: 30px;
    width: 3px;
    background-color: #dedede;

}

.update-content {

    margin-bottom: 20px;
    height: 1050px;
    width: 100%;
    display: flex;
    flex-direction: column;

}

.updated {

    margin: 40px 0px 0px 0px;
    height: 480px;
    width: 100%;
    display: flex;
    justify-content: center;
    
}



.sec {

    margin: 0px 15px 15px 0px;
    width: 360px;
    height: 500px;
    display: flex;
    flex-flow: column;
    background-color: white;
    cursor: pointer;
    box-shadow: 0px 2px 12px rgb(158, 156, 156);
    transition: 400ms;
    z-index: 1;

}

.sec:hover {

    transition: 400ms;
    translate: 0px -10px;
    box-shadow: 0px 22px 15px 6px rgb(158, 156, 156);
    z-index: 0;

}

.sec1 {

    height: 460px;

}

.sec1:hover {

    transition: 400ms;
    translate: 0px -10px;
    box-shadow: 0px 24px 15px 4px rgb(158, 156, 156);
    z-index: 0;

}

.img-up {

    height: 220px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;

}

.creator-hub {

    background-image: url(Apex\ Creator\ Hub.jpg);

}

.rift {

    background-image: url(Rift.jpg);

}

.techno-terror {

    background-image: url(Techno\ Terror.jpg);

}

.global-drop {

    background-image: url(Apex\ Creator\ Hub.jpg);

}

.spacehunt {

    background-image: url(Space\ Hunt\ Knockout.jpg);

}

.anti-cheat {

    background-image: url(Apex\ Creator\ Hub.jpg);

}

.sub {

    font-size: 13px;
    font-weight: 700;
    font-stretch: expanded;
    display: inline-block;

}

.content-up {

    padding: 0px 0px 0px 25px;
    margin: 10px 0px;


}

.content-down {

    padding: 0px 30px 10px 25px;


}

.content1 {

    color: rgb(255, 71, 71);

}

.content2 {

    padding-left: 12px;
    color: #383838;

}

.content3 {

    color: #151515;
    font-size: 23px;
    font-weight: 650;
    letter-spacing: -1px;
    margin: 0px 0px 10px 0px;

}

.content4 {

    font-size: 17px;
    font-weight: 500;
    color:#4c4c4c;
    letter-spacing: 0.5px;

}

.button1 {

    padding: 10px 10px;

}

.button1:hover {

    padding: 13px 13px;

}

/** MAIN PAGE-3 **/

.ea-play {

    margin-top: 30px;
    height: 444px;
    width: 100%;

}

.parent-control {

    height: 98px;
    width: 100%;
    display: flex;
    background-color: #6fb1d7;
    align-items: center;

}

.description1 {

    height: 98px;
    width: 580px;
    line-height: 32.4px;
    font-size: 24px;
    font-weight: 700;
    color: #1e252a;
    padding: 0px 90px;
    align-content: center;

}

.last {

    height: 98px;
    width: 150px;
    display: flex;
    justify-content: center;

}

.blank1 {

    height: 98px;
    width: 350px;

}

.report {

    height: auto;
    width: 100%;
    display: flex;

}

.impact {

    height: 450px;
    width: 50%;
    background-image: url(Impact\ Report.png);
    background-size: cover;
    background-repeat: no-repeat;

}

.description2 {

    height: 450px;
    width: 50%;
    background-color:#141454;
    color:#e9e9eb;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.b {

    padding: 0px 100px;

}

.buttons1 {

    display: flex;
    align-items: center;
    height: 58px;
    margin: 15px 0px 0px -5px;


}

.b1 {

    width: 145px;    
    margin-right: 15px; 

}

.b2 {

    width: 185px;

}

.sub-button {

    display: flex;
    justify-content: center;
    align-items: center;
    height: 46px;
    width: fit-content;
    border: 2px solid #e9e9eb;
    border-radius: 3px;
    padding: 0px 18px;
    cursor: pointer;
    transition: 75ms;

}

.sub-button:hover {

    padding: 2px 21px;
    transition: 75ms;

}

.buttons {

    display: flex;
    justify-content: center;
    align-items: center;

}

/** FOOTER SECTION **/

.foot-div1 {

    width: 100%;
    height: auto;

}

.foot-up {

    padding-top: 40px;
    display: flex;
    justify-content: center;
    font-size: 14.5px;

}

.foot1 {
   
    height: 38px;
    width: 1130px;
    border-bottom: 1px solid #969797;

}

.foot-mid {

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 35px 0px;
    height: 70px;
    color: #292928;

}

.footnav {

    height: 24px;
    width: 1130px;
    display: flex;

}

.same {

    font-size: 15.5px;
    padding: 0px 20px;
    cursor: pointer;

}

.same:hover {

    color: #ff4646;

}

.blank2 {

    width: 30%;

}

.conversation {

    margin-left: 23.5px;
    font-size: 14px;
    font-weight: 700;


}

.foot-icons {

    height: 45px;
    width: 1150px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;

}

.icon {

    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 45px;
    cursor: pointer;

}

.on {
 
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 90ms;

}

.on:hover {

    transition: 90ms;

}

.triple {

    height: 25px;
    width: 25px;

}

.triple:hover {

    height: 30px;
    width: 30px;

}


.youtube {

    height: 21px;
    width: 21px;

}

.youtube:hover {

    height: 26px;
    width: 26px;

}

.twitter {

    height: 27px;
    width: 27px;

}

.twitter:hover {

    height: 33px;
    width: 33px;

}

.facebook {

    height: 15px;
    width: 15px;

}

.facebook:hover {

    height: 19px;
    width: 19px;

}

.foot-div2 {

    height: auto;
    width: 100%;
    padding-top: 12px;
    display: flex;

}

.norm {

    font-size: 15.5px;
    padding: 0px 27px;
    color: #292928;
    cursor: pointer;
    font-weight: 500;

}

.ealogo {

    height: 49px;
    width: 49px;
    background-image: url(Logo.png);
    background-size: contain;
    margin-left: 110px;

}

.foot-div3 {

    color: #292928;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;

}

.extras {

    width: 1010px;
    line-height: 24px;

}

.row1 {

    display: flex;

}

.row2 {

    display: flex;

}

.row3 {

    margin-top: 12px;

}

.box {

    font-size: 15px;
    padding: 0px 18px;
    cursor: pointer;

}