*{
    padding: 0;
    margin: 0;
    }
/*----------------------------------------------------------------------------------------------
 תהיה באמצע בצורה ממורכזת בצבע כחול ובכתב יפה top security גורם לקח שהכותרת

*/



.home{
    font-size:70px;
    text-align: center;
    line-height: 0%; /* גובה קו*/
    color:rgb(0, 70,145);
    font-family: Georgia, 'Times New Roman', Times, serif;
    }
/*---------------------------------------------------------------------------------------------------------
אז הוא ממרכז את עצמו לאמצע הדף divCenter גורם לכך שאיפה שרשום  
*/

.divCenter{
    text-align:center;
    }
/*-------------------------------------------------------------------------------------------------------- 
גורם לכך שהכיתוב כל פתרונות האבטחה במקום אחד היה ממורכז לדף ובגודל קצת יותר גדול ממה שהוא צריך להיות
*/
.title{
    text-align: center;
    font-size:35px;
    color: rgb(228, 0, 0);
    }
/*-------------------------------------------------------------------------------------------------------- */

/*.smail{
    width: 60px;
    height: 60px;
    margin-left: 10000;
    }
*/

/*-------------------------------------------------------------------------------------------------------- 
גורם לכך שאיפה שרשום אודות החברה אז הכתב יהיה יותר גדול וממורכז לדף
*/
.d{
    text-align: center;
    font-size:65px;
    }
    
/*----------------------------------------------------------------------------------------------------------
גורם לכך שמה שרשום בתוך אודות החברה אז הכתב יהיה יותר גדול וממורכז לדף

*/

.y{
    text-align: center;
    font-size:28px;
    }
/*----------------------------------------------------------------------------------------------------------

*/

/*.z{
    text-align: center;
    font-size:10px;
    text-align: auto;
    height: 50px;
    width: 50px;
    }
/*----------------------------------------------------------------------------------------------------------

*/
/*----------------------------------------------------------------------------------------------------------



.a{
    text-align: center;
    font-size:27px;
    margin-left: -300px;
    }
/*----------------------------------------------------------------------------------------------------------

*/

/*  ? */


/*---------------------------------------------------------------------------------------------------------- */


/*------------------------------------------------------------------------------------------
  גורם לכך שבדף של האימיל שברגע שעומדים על המילה שלך אז הכיתוב נהיה בצסע כחול והמלבן שמיסביבו בצבע שחור
*/

.riboa{
    background-color: white;
    margin-left: -370px;
    font-size: 20px;
    }

.riboa:hover{
    background-color:black;
    color:rgb(0, 70,145);
    }
/*----------------------------------------------------------------------

נותן לי את השורה למעלה מעל אה כותרת של המילה    
top-securety 

*/
.dive{
    margin-left: 100%;  /* שולים שמאלים */
    margin-right: 100%; /* שולים ימיין */
    }

.amodot{
    padding: 0; /*ריפוד*/
    margin: 0; /*שולים*/
    font-family: monospace;
    }

ul{
    list-style: none;  /*סגנון רשימה*/
    background: #14446c;
 
    }

ul li{    
    display: inline-block; /*להציג בלוק מוטבע*/
    position: relative;/*עמדה יחסית*/
    }

ul li a{
    display: block; /*בלוק תצוגה*/
    padding: 20px 25px;/*ריפוד*/
    color: #fff;
    text-align: none;/* יישור טקסט ריק*/
    text-align: center;/*יישור טקסט מֶרְכָּז*/
    font-size: 20px; /*מגדיל את הדופן*/
    }

ul li ul.dropdown li{
    display: block; /*לְהַצִיג */
 
    }

ul li ul.dropdown {
    width: 100%;/*רוֹחַב*/
    background-color: #14446c;
    position: absolute;/* עמדה מוּחלָטת*/
    z-index: 999;
    display: none;
    } 

/* 
ul li:hover{
background-color: #14445c;  גורם לכך שברגע שעומידים עם העכבר על הכיתוב אז הרקע נהיה כחול  
*/

ul li:hover ul.dropdown{
display: block;
    }


.simle{
    background-color: #112c66;
    width: 150px;    
    }
    


    /*----------------------------------------------------------------------------------------- 
     נותן לי שברגע שאני מגלגל את העכבר למעלה או למטה אז השורה הראשונה (טופס) זאז  עם הגלגת של העכבר
  
    */
/*
.shora{
    width: 100%;/* רוֹחַב */
   /* position: fixed; /* מיקום קבוע 
    }
    */
/* מצב רגיל */
.shora {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    background-color: #14446c; /* צבע רגיל */
}

/* מצב אפור/נגישות */
body.gray-mode .shora {
    background-color: #6e6e6e; /* צבע הסרגל באפור */
}

/*-------------------------------------------------------------------------------------------------
גורם לכך שבדף פרויקטים יהיה גודל בדף 
*/


.sdar{
    width: 300px; /*רוֹחַב*/
    height: 280px; /*גוֹבַה*/
    text-align:center; /*ממרכז לי את הדף*/
    }
/*-----------------------------------------------------------------------------------------------
גורם לכך שבדף מערכות כריזה ושמע יהיה גודל מסוים ומקום מסוים בדף 
*/
.sdar1{
    width: 200px;
    height: 230px;
    margin-left: 30px; /* שוליים-שמאליים */
    text-align: center;
    }
    /*----------------------------------------------------------------------------------------------*/

    /* גורם לכך שלא יהיה לי פס בקישורים מתחת לשורה הראשונה*/

.kisor li a{
    text-decoration: none; /* גורם לכך שבקישורים לא יהיה קו מתחת לקישור*/
    
}


    /*-----------------------------------------------------------------------------------------------*/



.aaaa{
    text-align: center;
    width: 150px; /*רוֹחַב*/
    float: right;
    height: 100px;
    }

.wwww{
    text-align: center;
    width: 10px;
    height: 10px;
    position: absolute;
    float: right;
    margin-left:450px;    
    }

.describe{
    width:350px;
    text-align:justify;
    color:darkblue;
    }

.imageWithin{
    margin-right:20px;
    }

.price{
    text-align: center;
    }

.hrW{
    width:720px;
    margin-left:0px;
    }

.total{
    text-align:right;
    }


.vidIo{
    margin-left: -470px;
    }

.azza{
    margin-left: 50px;
    }


.market{
    background-color: #112c66;
    }

.class{
    background-color: #112c66;
    }
/*------------------------------------------------------------------
קשור לכרטיס האשראי

.chava1[type="submit"]:hover {
    cursor: pointer;
    background-color: darkblue;
    }


.chava1[type="submit"]{
    width: 60%;
    font-weight: bold;
    border: 1px;
    border-radius: 4px;
    background-color:blue;    
    width: 450px;
    height: 40px;
    font-size: 20px;
    margin-left: 100px;
    }
/*---------------------------------------------------------------------------------------------*/



/*מסדר לי את המילים שרשום בשורה הראשונה */
.argon{
    margin-left: 900px;


    }
/*-----------------------------------------------------------------------------*/



.mchlma{
    margin-left: -2px;
    width: 200px;
    height: 200px;
    
    }

.mchlma1{
    margin-left: 15px;
    width: 200px;
    height: 200px;
    }

.mchlma2{
    margin-left: 40px;
    width: 200px;
    height: 200px;
    }

.intrakom{
    margin-left: -60px;
    height: 330px;
    }

.intrakom1{
    margin-left: 10px;
    height: 330px;  
    }


.marhoatazak{
    width:300px;
    height:350px;
    margin-left: -10px;
    }

.marhoatazak1{
    width: 300px;
    height: 350px;
    margin-left: 10px;
    }

/*----------------------------------------------------------------------------------
מסדר לי את הכפתור שמחליף צבעים 
*/

.caftora{
    margin-left: -2180px;
    width: 50px;
    height: 50px;


}

/*-------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------------
דואג לכך שכל מה שאני רושם בדף שנקרא חנות יהיו בצד שמאל  
*/

    
.price{
    text-align: center;
    }
    

    
.total{
    text-align:right; /*ממרכז לצד ימין*/
    }
/*---------------------------------------------------------------------------------------------------*/


.topi{



    width: 47px;
    height: 50px;
    margin-left: -2000px;
}


.picksirwon{

margin-right: 800px;


}

.arg{


margin-left: 200px;

}

/* הגדר את הצבעים לאפור */
body {
    background-color: #f0f0f0; /* רקע אפור בהיר */
    color: #333333; /* טקסט אפור כהה */
}

/* כותרות */
h1, h2, h3, h4, h5, h6 {
    color: #2c2c2c; /* כותרות בגוון אפור כהה */
}

/* כפתורים */
button {
    background-color: #8c8c8c; /* צבע רקע אפור לכפתור */
    color: white; /* טקסט לבן */
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
}

button:hover {
    background-color: #6e6e6e; /* צבע רקע כהה יותר בהעכבר על כפתור */
}

/* קישורים */
a {
    color: #555555; /* קישורים בגוון אפור כהה */
    text-decoration: none;
}

a:hover {
    color: #333333; /* קישור הופך כהה יותר בהעכבר */
}
/* ברירת מחדל - אתר רגיל */
body {
    background-color: white;
    color: black;
}

/* הגדרת צבעים למצב אפור */

body.gray-mode h1, body.gray-mode h2, body.gray-mode h3, body.gray-mode h4, body.gray-mode h5, body.gray-mode h6 {
    color: #2c2c2c;
}

body.gray-mode button {
    background-color: #8c8c8c;
    color: white;
}

body.gray-mode button:hover {
    background-color: #6e6e6e;
}

body.gray-mode a {
    color: #555555;
}

body.gray-mode a:hover {
    color: #333333;
}




.gray {
    filter: grayscale(100%);
}


/* תפריט במצב אפור */
body.gray-mode .shora {
    background-color: #6e6e6e;
}

body.gray-mode .shora ul {
    background-color: #6e6e6e;
}

body.gray-mode .shora ul li a {
    color: #f1f1f1;
}

body.gray-mode .shora ul li a:hover {
    background-color: #555555;
    color: white;
}

body.gray-mode .shora img {
    filter: grayscale(100%);
}

/* אודות החברה – לבן במצב אפור */
body.gray-mode .d,
body.gray-mode .y {
    color: white;
}

/* ===== אפור גלובלי לאתר ===== */
body.gray-mode {
    filter: grayscale(100%) !important;
}

.socialIcons {
    text-align: center; /* מרכז את כל האייקונים */
    margin: 20px 0;     /* רווח עליון ותחתון */
}

.socialIcons img {
    margin: 0 15px;     /* רווח בין האייקונים */
    vertical-align: middle;
    cursor: pointer;
}