* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: sans-serif;
    background: #E6F7FF;
}

/************* Make the scrolling smooth when click on a link ***********************/
html {
    scroll-behavior: smooth;
}

/********** Add some spacing to some of the texts *************/
.changesonview {
    margin-left: 20px;
    margin-right: 20px;
}

/****************** Changing the font color, size, etc. in all files **************************/
h1 {
    font-size: 70px;
    color: #212121;
    margin-bottom: 20px;
}

h2 {
    font-size: 40px;
    color: #212121;
}

h3 {
    font-size: 30px;
}

p {
    color: #606163;
    line-height: 22px;
}

li {
    color: #606163;
    line-height: 22px;
}

#span {
    color: #ff4321;
}

/************* Creating the top navigation bar for all files ******************/
#navigationbar {
    width: 95%;
    margin: auto;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#nav-top {
    flex: 1;
    text-align: right;
}

/*************** Decorating the top navigation bar for index.html ***************/
.blacklogo {
    width: 100px;
    height: fit-content;
}

.nav {
    display: inline-block;
    list-style: none;
    margin: 10px 15px;
}

.nav a {
    text-decoration: none;
    color: #606163;
}

.nav a:hover {
    color: #ff4321;
}

/************* Decorating the top navigation bar for other files besides index.html ****************/
.whitelogo {
    margin-left: 20px;
    width: 60px;
    height: fit-content;
}

.top-page2 nav {
    display: inline-block;
    list-style: none;
    margin: 10px 15px;
}

.top-page2 nav a {
    text-decoration: none;
    color: #F5F5F5;
}

.top-page2 nav a:hover {
    color: #B80F0A;
}


/*************************************************** index.html *******************************************************************************/
/*** Adding a background image ***/
.background-image-index {
    background-image: url("img/homebackindex.jpg");
    background-color: #f0f0f0;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    height: 100vh;
    width: 100%;
    filter: brightness(95%);
    ;
}

/***** Decorating the navigation *****/
.nav-index a:link,
.nav-index a:visited {
    color: #606163;
    text-decoration: none;
    list-style-type: circle;
}

.nav-index a:hover {
    color: #ff4321;
}


/**** Add some spacing to texts and images ****/
.info-home1 {
    width: 650px;
    margin-left: 160px;
    margin-top: 170px;
}

.info-home2,
.info-home3,
.info-home4 {
    margin-left: 120px;
    margin-top: 100px;
    width: 80%;
}

.img-box {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 245px;
    right: 100px;
}

.img-box img {
    height: 300px;
    width: 500px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 50px;
}

.methodology1 {
    margin-top: 50px;
    margin-bottom: 150px;
}

/****** Decorating the fonts *******/
.info-home1 p {
    color: #663300;
}

.info-home3 h2 {
    margin-top: 180px;
    width: 98%;
}

/***** Decorating the slideshow *******/
.slider-container1,
.slider-container2,
.slider-container3 {
    padding: 2rem;
}

.slider-wrapper1,
.slider-wrapper2,
.slider-wrapper3 {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.slider1,
.slider2,
.slider3 {
    display: flex;
    aspect-ratio: 16/9;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    box-shadow: 0 1.3rem 2rem -0.55rem hsla(0, 0%, 0%, 0.25);
    border-radius: 0.5rem;
    -ms-overflow-style: none;
    /* Hide scrollbar IE and Edge */
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.slider1::-webkit-scrollbar,
.slider2::-webkit-scrollbar,
.slider3::-webkit-scrollbar {
    display: none;
}

.slider1 img,
.slider2 img,
.slider3 img {
    flex: 1 0 100%;
    scroll-snap-align: start;
    object-fit: cover;
}

.slider-nav1,
.slider-nav2,
.slider-nav3 {
    display: flex;
    column-gap: 1rem;
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.slider-nav1 a,
.slider-nav2 a,
.slider-nav3 a {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.75;
    transition: opacity ease 250ms;
}

.slider-nav1 a:hover,
.slider-nav2 a:hover,
.slider-nav3 a:hover {
    opacity: 1;
}

/****** Decorating the table *******/
th, td, table {
    border: 1px solid #99CCFF;
    border-collapse: collapse;
}

table {
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}

th {
    font-size: 20px;
    background-color: #0099CC;
    color: #FFFFFF;
    padding: 20px;
}

td {
    background-color: #F0FAFF;
    color: #333333;
    padding: 20px;
}
/******************************************************* explanation.html ********************************************************/
/************** Adding a background image ********************/
.background-image-explanation {
    background-image: url("img/homebackexplanation.jpg");
    background-color: #f0f0f0;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    height: 100vh;
    width: 100%;
}

/***************** Decorating the top page font *****************/
.headexplanation h1 {
    text-align: center;
    color: #FAF3E0;
    padding-top: 160px;
}

/******************** Add some spacing to texts **********************/
.what-malware-is {
    padding-top: 50px;
}

.how-malware-works {
    padding-top: 100px;
    padding-bottom: 100px;
}

.info-exp1,
.info-exp2 {
    padding-left: 20px;
    padding-right: 20px;
}

/******************************************************* types.html ******************************************************/
/********* Adding background image ***********/
.background-image-type {
    background-image: url("img/homebacktypes.jpg");
    background-color: #f0f0f0;

    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    height: 100vh;
    width: 100%;
}

/***** Decorating the top page font *****/
.headtype {
    position: absolute;
    display: inline-block;
    text-align: center;
}

.headtype h1 {
    color: #E0E0E0;
    text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black;
}

/***** Decorating the navigation *****/
.nav-type a:link,
.nav-type a:visited {
    color: #F5F5F5;
    text-decoration: none;
    list-style-type: circle;
    text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black;
}

.nav-type a:hover {
    color: #ff4321;
}

#nav-type-top {
    margin-bottom: 10px;
}
/****** Make the images border round ******/
.typeall img {
    border-radius: 30px;
}

/****** Adding the columns ******/
.column-type1 {
    float: left;
    width: 67%;
    height: 300px;
    text-align: left;
    padding-left: 10px;
}

.column-type2 {
    float: left;
    width: 33%;
    height: 300px;
    text-align: right;
}

.column-type3 {
    float: left;
    width: 33%;
    height: 300px;
    text-align: left;
}

.column-type4 {
    float: left;
    width: 67%;
    height: 300px;
    text-align: right;
    padding-right: 10px;
}

.column-type5 {
    width: 50%;
    float: left;
    text-align: left;
    padding-left: 500px;
}

.column-type6 {
    width: 50%;
    float: left;
    text-align: left;
}

/* Clear floats after the columns */
.row-type:after {
    content: "";
    display: table;
    clear: both;
}

.row-type2:after {
    content: "";
    display: table;
    clear: both;
}

/********* Adding background color for the columns ***********/
.column-type1,
.column-type1 h2,
.column-type1 p,
.column-type2 {
    background-color: #56677B;
}

.column-type3,
.column-type4,
.column-type4 h2,
.column-type4 p {
    background-color: #989898;
}

/*************** Decorating the font for the columns ***********/
.column-type1 h2,
.column-type4 h2 {
    color: beige;
}

.column-type1 p,
.column-type4 p {
    color: white;
}

/**************************************************** signs.html *******************************************************/
/****************** Adding background image ***************************/
.background-image-sign {
    background-image: url("img/homebacksign2.jpg");
    background-color: #f0f0f0;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    height: 100vh;
    width: 100%;
    filter: brightness(90%);

}


/****************** Decorating the top page font ******************/
.headsign h1 {
    color: #E0E0E0;
    text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black;
}

.headsign p {
    color: #FAF3E0;
    text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black;
}

/****** Decorating the navigation ******/
.nav-sign a:link,
.nav-sign a:visited {
    color: #F5F5F5;
    text-decoration: none;
    list-style-type: circle;
}

.nav-sign a:hover {
    color: #ff4321;
}

#nav-sign-top {
    margin-bottom: 10px;
}

/****************** Decorating the point part ***************/
.signdownpart {
    padding-top: 20px;
}

.signlist {
    margin-top: 80px;
    margin-bottom: 120px;
}

.signlist img {
    border-radius: 20px;
    margin-left: 30px;
    aspect-ratio: 16/9;
    width: 300px;
    height: fit-content;
    margin-top: 10px;
    margin-bottom: 10px;
}



/****************** Adding the columns *****************/
.column-signs1 {
    float: left;
    width: 55%;
    text-align: left;
    padding-left: 260px;
    text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black;
}

.column-signs2 {
    float: left;
    width: 45%;
    text-align: left;
    text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black;
}

.column-signs3 {
    width: 100%;
    text-align: center;
    padding-right: 20px;
    text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black;
}

/* Clear floats after the columns */
.row-signs:after {
    content: "";
    display: table;
    clear: both;
}

/*********************************************** defend.html *****************************************************/
/**************** Adding a background image ********************/
.background-image-defends {
    background-image: url("img/homebackdefend3.jpg");
    background-color: #f0f0f0;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    height: 100vh;
    width: 100%;
}

/**************** Decorating the font *****************/
.headdefend p {
    color: #FFFFE0;
}

/************************ Add some spacing to texts *********************/
.headdefend {
    margin-left: 100px;
    margin-top: 180px;
    width: 650px;
}

.defendbefore {
    margin-top: 100px;
    width: 90%;
}

.defendafter {
    margin-top: 200px;
    width: 90%;
}

.defendh2 {
    margin-left: 4%;
}

.defendlist {
    margin-left: 6%;
    margin-top: 80px;
}

/********************* Decorating the images ********************/
.defendlist img {
    border-radius: 20px;
    margin-left: 30px;
    aspect-ratio: 16/9;
    width: 300px;
    height: fit-content;
}

/************** Change the bullet shape in defend.html file ****************/
.bul-type {
    list-style-image: url('img/warning.png');
}

/****************************************************** creation.html ********************************************************/
/**************** Adding a background image *******************/
.background-image-creation {
    background-image: url("img/homebackcreation.jpg");
    background-color: #f0f0f0;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    height: 100vh;
    width: 100%;
}

/*********************** Add some spacing to texts ************************/
.headcreate {
    margin-left: 120px;
    margin-top: 200px;
    width: 700px;
}

/******* Make the embedded videos and images center ***********/

.video-align {
    text-align: center;
}

.image-align {
    text-align: center;
}

.image-align img{
    width: 70%;
    height: fit-content;
}

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

/************* Decorating top page font *****************/
.headcreate h1 {
    color: #E0E0E0;
    text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black;
}

.headcreate p {
    color: #FAF3E0;
    text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black;
}

.creationlist {
    margin-top: 150px;
    margin-bottom: 150px;
}

.creation-code-list{
    margin-top: 150px;
    margin-bottom: 150px;
    margin-left: 20px;
}



/*************************************************** Making Contact Us ***************************************************/
/* Create four equal columns that floats next to each other */
.contacts-column {
    float: left;
    width: 25%;
    padding: 10px;
    height: 180px;
    background-color: #212121;
}

.contacts-row h3,
.contacts-column p,
.contacts-column b {
    color: #edf2fc;
    background-color: #212121;
}

/* Clear floats after the columns */
.contacts-row:after {
    content: "";
    display: table;
    clear: both;
}

/************************************************* Decorating the footer ***********************************************************/
footer {
    padding-left: 10px;
    padding-bottom: 1px;
    color: #edf2fc;
    background-color: #212121;
    border-top: solid;
    border-color: #edf2fc;
}

footer h5 {
    color: #edf2fc;
    background-color: #212121;
}