* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;}


/* ............... Start Of Header ...............*/
.header{
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100px;
}
.headerContent{
    background-color: rgb(255, 255, 255);
    margin: auto;
    width: 90%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.headerList{
    list-style: none;
}
.headerList li {
    position: relative;
    padding: 5px;
    background-color: transparent;
}
.headerList li::after , .headerList li::before {
    content: "";
    position: absolute;
    border: 2px solid #00296b;
    border-radius: 3px;
    visibility: hidden;
}
.headerList li::after {
    border-width: 0 2px;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition: 0.2s;
    transform: scaleY(0);
}
.headerList li::before {
    border-width: 2px 0;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition: 0.2s;
    transition-delay: 0s;
    transform: scaleX(0);
    transform-origin: left;
}
.headerList li:hover::after {
    visibility: visible;
    transform: scaleY(1);
}
.headerList li:hover::before {
    visibility: visible;
    transform: scaleX(1);
    transition-delay: 0.2s;
}
.headerList li a {
    color: #00296b;
    font-size: 20px;
    position: relative;
    z-index: 1;
}
a{
    text-decoration: none;
}
.FirstIcon a{
    font-size: 30px;
    color: #00296b;
}
.MiddleIcon a{
    font-size: 30px;
    color: #00296b;
}
.lastIcon a{
    display: flex;
}
.shopCart{
    font-size: 30px;
    color: #00296b;
}
.headerNotify{
    color: white;
    margin-top: 15px;
    margin-left: 2px;
    background-color: #00296b;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
}
.headerText{
    color: #00296b;
    font-size: 20px;
    margin-top: 5px;
    margin-left: 10px;
}
.headerLogo{
    width: 230px;
    height: 60px;
}

.headerListHome{
    position: absolute;
    top: 12%;
    z-index: 2;
    width: 65%;
    background-color: #ffffff;
    border: 2px solid #00296b;
    border-radius: 3px;
    display: grid;
    grid-template-columns: repeat(4,25%);
    grid-template-rows:80px 60px 60px 60px ;
    visibility: hidden;
    transform: scale(0);
    transition-delay: 0.1s;

}
.headerListHome h2{
    font-size: 20px;
    padding-left: 10px;
    padding-top: 10px;
    position: relative;
}
.headerListHome h2::after{
    content: "";
    position: absolute;
    height: 3px;
    background-color: #00296b;
    border-radius: 25px;    
    width: 70%;
    left: 0;
    margin-left: 10px;
    bottom: 30px;
}

.headerListHome p{
    padding-left: 10px;
    font-size: 20px;
    transition: 0.3s;
}

.headerListHome a{
    text-decoration: none;
    color: #00296b;
    transition: 0.3s;

}
.headerListHome a:hover{
    color: #2252a5;
    font-size: 23px;
}
.lines{
    height: 2px;
    background-color: #00296b;
    position: absolute;

}
.headerList:hover .headerListHome {
    visibility: visible;
    transform: scale(1);
    transition: 0.3s;


}
*::selection{
    background-color: aqua;
}
/* $$$$$$$$$$$$$$$ End Of Header   $$$$$$$$$$$$$$$*/





/* ............... Start Of s1 ...............*/
.s1{
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 500px;
}
.s1Image{
    width: 90%;
    height: 450px;
    margin: auto;
    position: relative;
    margin-top: 20px;
    display: flex;

}
.s1Realimage {
    width: 100%;
    height: 450px;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
}
.s1Title1 , .s1Title2{
    position: absolute;
    z-index: 1;
    color: white;
    font-size: 50px;
    left: 10%;
}
.s1Title1{
    top: 20%;

}
.s1Title2{
    top: 35%;

}
.s1Button{
    position: absolute;
    z-index: 1;
    width: 20%;
    height: 10%;
    top: 300px;
    left: 10%;
    border-radius: 10px;
    border: none;
    color: #00296b;
    font-size: 20px;
}

/* $$$$$$$$$$$$$$$ End Of s1  $$$$$$$$$$$$$$$*/







/* ............... Start Of s2 ...............*/
.s2{
    width: 100%;
    height: 550px;
    background-color: rgb(255, 255, 255);
    position: relative;
}
.s2Container{
    width: 80%;
    height: 350px;
    background-color: rgb(255, 255, 255);
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    
}
.s2Title{
    text-align: center;
    font-size: 40px;
    position: relative;
    color: #00296b;
}
.s2TitleDIV{
    background-color: rgb(255, 255, 255);
    width: 230px;
    height: 40px;
    margin: auto;
    padding-top: 30px;
}
.s2TitleLine{
    width: 150px;
    height: 3px;
    background-color: #00296b;
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translate(-50%,0%);
    transition: 0.5s;

}
.s2TitleDIV:hover .s2TitleLine {
    width: 300px;
}
.s2div1{
    width: 25%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    margin-right: 20px;
    position: relative;
}
.s2div1RealDivImage{
    width: 100%;
    background-color: rgb(203, 225, 255);
    margin: auto;
}
.s2div1Image{

    width: 100%;
    height: 85%;
}
.s2div1Title1{
    position: absolute;
    bottom: 25px;
    opacity: 0.7;
    color: #00296b;
    font-size: 20px;
}
.s2div1Title2{
    display: inline;
    position: absolute;
    bottom: 0;
    color: #00296b;
    font-size: 22px;
}
.s2div1Icon{
    position: absolute;
    font-size: 40px;
    color: #00296b;
    bottom: 0;
    right: 0;
    visibility: hidden;
}
.s2div1:hover .s2div1Icon{
    visibility: visible;
}

/* $$$$$$$$$$$$$$$ End Of s2   $$$$$$$$$$$$$$$*/







/* ............... Start Of s3 ...............*/
.s3Container {
    width: 90%;
    height: 400px;
    background-color: rgb(255, 255, 255);
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.s3Div1 {
    width: 45%;
    height: 350px;
    background-color:#bcd6ff ;
    color: #00163a;
    position: relative;
}
.s3Div1 h2 {
    font-size:30px;
}
.s3Div1 h3 {
    font-size: 20px;
    color: #2c518d;
}
.s3Div1 p {
    font-size: 20px;
    position: absolute;
    top: 50px;
    left: 25px;

}
.s3Div1Lines{
    width: 200px;
    height: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    right: 0;
    bottom: 0;


}
.s3Div1Lines hr {
    background-color: #00163a;
    width: 50px;
    height: 3px;
    border-radius: 5px;
    border: none;
}

.s3Div2 {
    width: 25%;
    height: 350px;
    background-image: url(../images/aaaa.jpg);
    background-size: cover;
    transition: 0.5s;
    color: #00163a;
}
.s3Div2 h3 , .s3Div3 h3{
    margin-top: 10px;
    margin-left: 10px;
}
.s3Div2 h2 , .s3Div3 h2 {
    margin-left: 10px;
    font-size: 28px;
}
.s3Div3 {
    width: 25%;
    height: 350px;
    background-image: url(../images/aaaa111.jpg);
    transition: 0.5s;
    color:#00163a ;

}

.s3Div3:hover , .s3Div2:hover{
    transform: scale(1.1);
}
.s3Titles{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 75px;
}

.s3Div1 i {
    font-size: 50px;
    color: #ffd900;
    position: absolute;
    top: 10px;
    left: 10px;
    /* text-shadow: 3 0.2 0.3 black; */
}

.s3Div1P{
    margin-top: 50px;
}







/* $$$$$$$$$$$$$$$ End Of s3   $$$$$$$$$$$$$$$*/







/* ............... Start Of s4 ...............*/
.s4Container{
    width: 90%;
    height: 180px;
    background-color: rgb(255, 255, 255);
    margin: auto;

    border-bottom: 1px solid #00163a;
    
}
.s4Content{
    width: 100%;
    height: 80%;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.s4Div1{
    width: 20%;
    height: 70%;
    background-color: #ffffff;
    border-right: 1px solid  #00163a;
}
.s4Div1Last{
    border: none;
}
.s4Div1 h2 , .s4Div1 p {
    text-align: center;
    color: #00163a;
} 
.s4Div1 h2{
    font-size: 20px;

}
.s4Div1 p{
    font-size: 17px;
    opacity: 0.9;

}
.s4Image{
    width: 60px;
    height: 60px;
    background-image: url(../images/hhh.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: top;
    transition: 0.3s;
    margin: auto;
}
.s4Div1:hover .s4Image{
    background-position-y: bottom;

}
.s4Image2{
    background-image: url(../images/hhh2.jpg);

}
.s4Image3{
    background-image: url(../images/hhh3.jpg);

}
.s4Image4{
    background-image: url(../images/hhh4.jpg);

}
.s4Image5{
    background-image: url(../images/hhh5.jpg);

}
/* $$$$$$$$$$$$$$$ End Of s4   $$$$$$$$$$$$$$$*/







/* ............... Start Of s5 ...............*/
.s5Container{
    width: 90%;
    height: 600px;
    background-color: rgb(255, 255, 255);
    margin: auto;
    margin-top: 100px;
    position: relative;
}
.s5Title{
    text-align: center;
    font-size: 40px;
    position: relative;
    color: #00296b;
}
.s5TitleDIV{
    width: 300px;
    height: 50px;
    margin: auto;
}
.s5TitleLine{
    width: 150px;
    height: 3px;
    background-color: #00296b;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%,0%);
    transition: 0.5s;

}
.s5TitleDIV:hover .s5TitleLine {
    width: 300px;
}
.s5TextsDiv{
    width: 50%;
    background-color: rgb(255, 255, 255);
    margin:50px auto ;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    font-size: 20px;
    color: #00163a;
}


.s512DivsContainer{
    width: 90%;
    height: 410px;
    background-color: rgb(255, 255, 255);
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.s512DivsContainer2{
    width: 90%;
    height: 150px;
    background-color: rgb(255, 255, 255);
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
}



.s5Big6Divs{
    width: 31%;
    height: 400px;
    background-color: #0a5200;
    margin-right: 5px;
    position: relative;
    transition: 1s;
}
.front{
    background-color: rgb(163, 94, 4);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    z-index: 2;
    transition: 0.25s;
    transform: scaleX(0);
}
.s5Big6Divs:hover .front{
    transform: scaleX(1);
}
.front .i1 {
    color: #ffffff;
    background-color: #00163a;
    width: 40px;
    height: 40px;
    margin-right: 5px;
    font-size: 25px;
    margin-right: 5px;
    text-align: center;
    line-height: 40px;

}


.s5Small6Divs{
    width: 31%;
    height: 100px;
    background-color: #ffffff;
    margin-right: 5px;
    font-size: 20px;
    color: #00163a;
}

.s5Small6Divs p{
    font-size: 24px;
}
.s5Small6Divs i{
    color: #ffd900;
}

.s5Small6Divs h2{
    font-size: 26px;
}

.s5Small6Divs .blackBorder{
    color: black;
}

.s5Big6Divs1 {
    background-image: url(../images/a1yes.jpg);
}
.f1 {
    background-image: url(../images/a1yesf.jpg);
    /* background-color: rgba(255, 255, 255, 0.5); */

}
.s5Big6Divs2{

    background-image: url(../images/a2yes.jpg);
}
.f2 {
    background-image: url(../images/a2yesf.jpg);
}
.s5Big6Divs3{

    background-image: url(../images/a3yes.jpg);
}
.f3 {
    background-image: url(../images/a3yesf.jpg);
}
.s5Big6Divs4{

    background-image: url(../images/a6yes.jpg);
}
.f4 {
    background-image: url(../images/a6yesf.jpg);
}
.s5Big6Divs5{

    background-image: url(../images/a5yes.jpg);
}
.f5 {
    background-image: url(../images/a5yesf.jpg);
}
.s5Big6Divs6{

    background-image: url(../images/a4yes.jpg);
}
.f6 {
    background-image: url(../images/a4yesf.jpg);
}
/* $$$$$$$$$$$$$$$ End Of s5   $$$$$$$$$$$$$$$*/



/* $$$$$$$$$$$$$$$ Start Of Footer   $$$$$$$$$$$$$$$*/
.footer{
    width: 100%;
    height: 250px;
    background-color: #00296b;
    margin-top: 700px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.footerLogo{
    width: 250px;
    height: 60px;
    background-image: url(../images/a7.jpg);
    margin-top: 20px;
}

.footerIcons a{
    color: white;
    font-size: 35px;
    margin-right: 10px;
    transition: 0.2s;
}
.footerIcons a:hover{
    color: white;
    font-size: 45px;

}
.footerSpan{
    margin-bottom: 30px;
    color: white;
    font-size: 18px;
}
/* $$$$$$$$$$$$$$$ End Of Footer   $$$$$$$$$$$$$$$*/