.fade-in{
    opacity:0;
    transition: opacity 250ms ease-in;

}
.fade-in.appear{
    opacity:1;
}
.from-left{
    transform: translateX(-60%);
}
.from-right{
    transform: translateX(60%);
}
.from-left, .from-right{
    transition:opacity 400ms ease-in 300ms, transform 600ms ease-in;
    
    opacity:0;
}
.from-left.appear, .from-right.appear {
    transform: translateX(0);
    opacity:1;
}

.red{
    color:rgb(129, 15, 15);
}
.btn{
    display:none;
}
/* ----------------------------------------header----------------------------------------------------------------------- */
.header-btn{display: none;}
.header{
    background-image: url('../image/header.jpg');
    height:600px;
    

    background-attachment: fixed;
    background-position: top;    
    background-repeat: no-repeat;
    background-size:cover; 
    background-color: #fff;    
}
@media screen and (min-width:1600px){
    .header{

    background-size:1600px; 

    }
}
.header-left{
    position: absolute;
    top:150px;
    max-width:1125px;
    padding-left:10px;

    background-color:rgba(255, 255, 255, 0.3);
}
.header-left h1{     
    color:white;
    font-size: 3rem;
    font-weight: 650;
   
    width:462px;
}
.header-right{
    position: absolute;

    top:320px;
    
    
    max-width:762px;
       
    background-color:rgb(129, 15, 15);

    color:white;
    font-size:2rem;
    font-weight: 600;
    padding-left:20px;
    margin-left:34%;

}
.header-right p{
    margin:10px;
    min-width:470px;

}
@media screen and (min-width:890px){
    .header{
        height:650px;
    }
    .header-right{
        font-size:2.5rem;
        top:350px;
    }
    .header-left h1{
        font-size:3.5rem;
        width:540px;
    }
}
@media screen and (min-width:1180px){
    .header{
        height:800px;
    }
    .header-right{
        font-size:3rem;
        top:510px;
    }
    .header-left h1{
        font-size:4rem;
        padding-left:20px;
        width:80%;
    }
    .header-left{
        top:300px;
        width:60%;
    }
}

/* -------------------------------------------end----------------------------------------------- */
/* -----------------------------section-one------------------------------------------------------- */
.section-one{
    display:inline-block;
    text-align: center;
    background-image:linear-gradient(rgb(235, 235, 235), rgb(202, 202, 202)); 
    color:rgb(83, 83, 83);   
}
.section-one a{
    color:#7c0000df;
    text-decoration:none;
    font-weight:bolder;
}
.section-one-header{ 
    padding:40px;  
}
.section-one h1{
    font-size: 2rem;
    margin:0px auto;
    width:90%;
}
.section-one-header p{  
    padding:40px 0px 20px 0px;
    margin:0px auto;
    width:70%;
}
.section-one-grid{
    display:grid;  
    grid-template-columns: repeat(3, 30%);
    grid-template-rows: 150px;
    justify-content:space-evenly;
    margin-top:40px;
    margin-bottom:40px;
}
.section-one-acc{
    display:grid;
    grid-template-columns: 30% 70%;  
}

.section-one-acc i{
    padding-top:50px;
    
    font-size:3rem; 
    
}
.section-one-acc p{
     color:grey;
    max-width:250px;
    font-style:italic;
    font-size:0.9rem;

    margin-top:10px;
}
.section-one-acc h3{
     color:rgb(80, 80, 80);
    max-width:250px;

    margin-top:40px;
    margin-bottom:0;
}
.elecsa{
    font-style: italic;
    font-weight:normal;
    font-stretch: ultra-expanded;
    font-size:1.7rem;

     color:rgba(122, 1, 1, 0.486);

    vertical-align: -10% ;
}
.green{
    color:rgba(0, 128, 0, 0.726);
}
.orange{
    color:rgba(255, 166, 0, 0.726);
}
.blue{
    color:rgba(0, 132, 255, 0.726)!important;
}
/* -------------------------------------------end----------------------------------------------- */
/* -----------------------------section-two------------------------------------------------------- */
.section-two{
    display:grid;
    grid-template-columns: 50% 50%;

    text-align: center; 
    color:rgb(83, 83, 83);

}
.section-two img{
    width:100%;
    margin:auto auto;

}
.img-effect{
    transition:all 250ms ease-in;   
}
.img-effect:hover{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);

    transition:all 250ms ease-in;
}
.section-two-inner{
   
    padding:5%;
}
.new{
    color:rgb(129, 15, 15);
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
     font-size: 3rem;
}
.section-two h3{
    font-size:1rem;
}
@media screen and (min-width:1024px){
    .new{
        font-size:4rem;
    }
    .section-two h3{
    font-size:1.17rem;
}
}
.section-two-inner h2{
    font-size: 3rem;   
}
.section-two-inner a{
    color:rgb(129, 15, 15);
    text-decoration: none;
}
.section-two-btn{

    border-radius:5px;
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.3);
    
    background:rgb(129, 15, 15);

    margin-left:auto;
    margin-right:auto;
    margin-top:20px;

    width:200px;
    height:30px;

    padding-top:10px;

    transition: 250ms ease-in;
}
.section-two-btn a{
    color:#fff;
    text-decoration: none;
    font-weight:bold;

}
.section-two-btn:hover{
     background:rgb(214, 28, 28);
     box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
     
     transition: 250ms ease-in;
}

/* -------------------------------------------end----------------------------------------------- */
/* ---------------------------------------banner----------------------------------------- */
.slide{display:none;}
.banner{    
    background-color: rgb(129, 15, 15); 
    text-align: center;  
}
.banner h1{
    margin:0;
    color:white;

    font-size:1.5rem;

    padding:30px;
}
.banner a{
    text-decoration: none;
    color:rgb(251, 146, 146);
    transition: all 250ms ease-in;
}
.banner a:hover{
    color:rgb(172, 56, 56);
    transition: all 250ms ease-in;
}
.banner-reverse{
     background-color:#CACACA; 
    text-align: center;  
}
.banner-reverse h1{
    margin:0;
    color:rgb(59, 59, 59);

    font-size:1.5rem;

    padding:30px;
}
.banner-reverse a{
    text-decoration: none;
    color: rgb(129, 15, 15);
    transition: all 250ms ease-in;
}
@media screen and (min-width:1024px){
    .banner h1{
    font-size:1.8rem;   
    }
    .banner-reverse h1{
    font-size:1.8rem;   
    }
}

/* -------------------------------------------end----------------------------------------------- */
/* -------------------------------------section three-------------------------------------------- */

.section-three{

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

    background-attachment: fixed;
    background-position: top;    
    background-repeat: no-repeat;
    background-size:cover; 
    background-color: #fff;  

    color:rgb(83, 83, 83);
}
.article-one-new{
    display:grid;
    grid-template-columns: 50% 50% ;

    text-align:center; 
    
   
}
.article-one-new img{
    grid-area:1/1/1/1;
    width:100%;
    max-width:505px;

    margin: auto 0px;


}
.article-one-content{
    grid-area:1/2/1/2;
    padding:6%;
    
}
.article-one-content h1{
    font-size: 2rem;
}

@media screen and (min-width:1200px){
   
    .article-one-new img{
    grid-area:1/1/span 2/1; 
        max-width:none;

    }
    .article-one-content{
        padding:2%;
    }
}


/* -------------------------------------------end----------------------------------------------- */
/* ---------------------------------------section-four------------------------------------------ */
.section-four{

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

    background-attachment: fixed;
    background-position: top;    
    background-repeat: no-repeat;
    background-size:cover; 
    background-color: #fff;  

    color:rgb(83, 83, 83);
}
.section-items{
    grid-area:3/1/2/3 ;
    padding-top:30px;



    display:grid;
    grid-template-columns: repeat(5, 150px);
    grid-column-gap: 20px ;
    justify-content: center;

   
}
.article-two-new{
    display:grid;
    grid-template-columns: 50% 50% ;

    text-align:center; 
    
   
}
.article-two-new img{
    grid-area:1/2/1/2;
    width:100%;
    max-width:505px;

    margin: auto 0px;


}
.article-two-content{
    grid-area:1/1/1/1;
    padding:6%;
    
}
.article-two-content h1{
    font-size: 2rem;
}

.circle:hover .bell{
    --fa-primary-color:red;
    --fa-secondary-color:black;
   animation: shake 0.5s;
   animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.circle:hover .spin{ 
    color:black;
    animation: rotate 1.8s infinite linear;
    
}
@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(359deg);}
}

/* -------------------------------------------shared between section 4&5------------------------ */
.section-three-items, .section-four-items{
    grid-area: 3/1/3/span 2;


    display: grid;
    grid-template-columns: repeat(5, 150px);
    justify-content: space-around;

    padding:20px 0px;
    
}
.item{
    
    text-align: center;
}
.item a{
    font-size:0.9rem;
    text-align:center;
    text-decoration:none;
    color:rgb(83, 83, 83);
}
.item h3{
    font-size:1rem;
    width:90%;
    margin:auto auto;
    transition:all 250ms ease-in;
}
.item h3:hover{
    color:rgb(129, 15, 15);
    transition:all 250ms ease-in;
}
.circle{
    display:grid;
    align-items: center;
    text-align: center;
    width:80px; 
    height:80px;
    font-size:2.5rem;
    
    border:2px solid rgb(83, 83, 83);
    border-radius:50%;

    margin:10px auto;
    
    transition:all 250ms ease-in;
}
.circle:hover{
    background:rgba(255, 255, 255, 0.226);
    transition: 250ms ease-in;
    border-color:rgb(255, 255, 255);

    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.7);      
}



@media screen and (min-width:1200px){
    .section-four-items{
        grid-area:2/1/2/1 ;
        padding-top:0px;
        display:grid;
        grid-template-columns: repeat(5, 120px);
        justify-content:center;
    }
    .section-three-items{
        grid-area:2/2/2/2 ;
        padding-top:0px;
        display:grid;
        grid-template-columns: repeat(5, 120px);
        justify-content:center;
    }
    
    .article-one-new img{
        grid-area:1/1/span 2/1; 
        max-width:none;
    }
   
    .article-two-new img{
        grid-area:1/2/span 2/2; 
        max-width:none;
    }
    .article-two-content, .article-one-content{
        padding:2%;
    }   
    .item h3{
        font-size:0.8rem;
    }
    .item{
        padding:0px;
    }
    
}
@media screen and (min-width:1530px){
    .section-four-items, .section-three-items{
        grid-template-columns: repeat(5, 150px);
    }
     .article-two-content{
        padding:6%;
        padding-bottom:0px;
    }
    .item h3{
        font-size:1rem;
    }
    .section-two-inner{
        padding:8%;
    }
    .section-two-inner h2{
        margin-top:10%;
    }
}
/* -------------------------------------------end----------------------------------------------- */
/* ------------------------------------------section-five--------------------------------------- */
.section-five{
     background-color: rgb(129, 15, 15); 
}
.section-five h1{
    text-align:center;
    color:#fff;
    margin:0;
    padding:20px;
    font-size:1.5rem;
}
.section-five a{
    text-decoration: none;
    color:rgb(251, 146, 146);
    transition: all 250ms ease-in;
}
.section-five a:hover{
    color:rgb(172, 56, 56);
    transition: all 250ms ease-in;
}
.name, .telephone, .email, .submit{
    display:block;
   
    height:45px;
    border-width:0;
    border-style:none;
}
.note{
    display:block;
    margin:20px 0px;
    
    border-width:0;
    border-style:none;

    min-width:350px;
    max-width:350px;
    min-height:150px;
    max-height:150px;
}
.submit{
    display:inline-block;
    cursor:pointer;
    font-size:1.2rem;
    color:#fff;
    border:2px solid #fff;
    background:rgba(0,0,0,0);
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.3);
    margin: 20px auto;

    width:130px;
    height:50px;
    transition: all 250ms ease-in;
}
.submit:hover{
    background-color:rgb(214, 28, 28);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    transition: all 250ms ease-in;
}
.disabled{
    display:inline-block;
    cursor:initial;
    font-size:1.2rem;
    color:#fff;
    border:2px solid #fff;
    background:rgb(214, 28, 28);
    margin: 20px auto;

    width:130px;
    height:50px;
    transition: all 250ms ease-in;
}

::-webkit-input-placeholder { /* Edge */
    color:rgba(0,0,0,0.5);
}

:-ms-input-placeholder { /* Internet Explorer */
    color:rgba(0,0,0,0.5);
}

::placeholder {
  color:rgba(0,0,0,0.5);
  padding-left:5px;
   font-family:montserrat, sans-serif; 
  font-weight:600;
}

label{
    padding:12%;
    padding-left:20%;
    margin:auto 0;
    
    color:#fff;
    font-weight:600;
    
}

.form-grid{
  display:grid;
  justify-items: center;
  
}
.grid-left, .grid-right{
    display: grid;
    grid-template-columns: 124px 350px;
}
.grid-left{
    grid-template-rows:45px 45px 45px;
    grid-row-gap:60px;
    margin-top:25px;
}
.disclaimer{
    
    font-size:0.6rem;
    font-style:italic;
    grid-area:2/2/2/2;
    color:#fff;

    display:grid;
    grid-template-columns: 10% 90%;

}
.check{
    display:inline-block;

    margin: auto auto;
}
.reCaptcha{
    grid-area: 3/2/3/2;
    color:#fff;
    padding-left:35px;
     font-size:0.6rem;
    font-style:italic;
}
.grecaptcha-badge { visibility: hidden; }
@media screen and (min-width:998px){
    .form-grid{
        display:grid;
        grid-template-columns:auto;
        justify-content:center;
    }
    .submit{
        grid-area:2/1/2/span 2;
    }
     .disabled{
        grid-area:2/1/2/span 2;
    }
}

/* -------------------------------------------end------------------------------------------------*/
/* -------------------------------------------------section-six-------------------------------- */
.mob-img{display: none;}
.section-six{
    background-image:url("../image/background.jpg");
    background-attachment: fixed;
    background-position: top;    
    background-repeat: no-repeat;
    background-size:cover; 
    background-color: #fff;  

    color:rgb(83, 83, 83);
    padding-bottom:20px;
   
}
.section-six h1{
    text-align: center;
    padding:30px;   
    margin:0;
    font-size:1.5rem;
}
.section-six img{
    width:100%;
}
/* -------------------------------------------end--------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
.section-seven{
    background-image:url("../image/background.jpg");
   

    background-attachment: fixed;
    background-position: top;    
    background-repeat: no-repeat;
    background-size:cover; 
    background-color: #fff;  

    color:rgb(83, 83, 83);
    
}
.section-seven h1{
   background-color:rgb(129, 15, 15);
    text-align:center;
    padding:40px;
    margin:0;
    color:rgb(255, 255, 255);

   
}
.section-seven-inner{   
    grid-template-columns:50% 50%;   
    color:rgb(88, 88, 88);
  
}
.template-text{
    display:grid;
    grid-template-columns: 70%;
    grid-template-rows: 40px 190px 20px;
    align-content:space-evenly;
    justify-content: center;
    order:2;
    
}

.template-text h3{ 
    border-bottom:solid 1px grey;
    margin:10px 0px 0px 0px;
}

@media screen and (max-width:900px){
  .template-text h3{
      font-size:1rem;
  }
  .template-text p{
  	font-size:0.8rem;
  }
}
.work-image{
    width:100%; 
    max-width:800px; 
    max-height:500px;
}
.date{
    font-size:0.8rem;
    font-weight: 400;
    color:rgb(155, 155, 155);
     
}
.date p{ 
    border-top: solid 1px grey;
    margin:0;
}
.date i{
    margin-left:5px;
    margin-right:5px;
}

/* -------------------------------------------end----------------------------------------------- */
/* -------------------------------------------acc-----------------------------------------------------*/
.acc{
    display: grid;
    grid-template-columns: repeat(3, 33%);

    padding:40px;

    text-align: center;

    background-color:#fff;
}
.acc img{
    width:40%;
   
    margin:auto; 
    
    
}

/* -------------------------------------------end----------------------------------------------- */