/* @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto+Slab:wght@300;400;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: bcontact-box;
}
:root{
    --green:#27ae60;
    --black:#192a56;
    --light-color:#666;
    --box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
}
html{
    font-size: 62.5%;
}


body{   
    /* font-family: 'Poppins', sans-serif; */
    font-family: 'Roboto Slab', serif;
    
    /* font-family: 'Merriweather', serif!important; */
}
header .anjali_logo{
    background: linear-gradient(rgba(189, 225, 8, 0.448),rgb(251, 249, 249));
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
}
header .anjali_logo{
    line-height: 3rem;
    padding: 1rem 0;
    /* bcontact: 5px solid rgb(232, 16, 16); */
    font-size: 3.5rem;
    font-weight: 700;
    text-align: center;
    /* text-shadow: 2px 2px 20px rgb(73, 77, 52); */
}
header .anjali_logo a{
    
    text-decoration: none;
    color: rgb(4, 5, 5);
   
}
header .anjali_logo .marquee{
    font-size: 2rem;
    margin-bottom: 0!important;
}

/* header .address{
    color: rgb(13, 9, 231);
} */
header .address .mob_email{
    font-size: 2rem;
    font-family: 'Poppins', sans-serif;
    background-color: rgb(122, 240, 202);
    text-decoration: none;
    color: black;
    display: flex;
    /* width: 100%; */
    align-items: center;
    padding: 0.3rem 0;
    /* justify-content: space-between; */
    /* text-align: center; */
}
header .address .mob_email .mob{
    display: flex;
    flex-direction: row;
    align-items: center;
}
header .address .mob_email i{
    color: rgb(0, 149, 79);
    background-color: rgb(255, 255, 255);
    /* bcontact: 1px solid rgb(224, 161, 161); */
    height: 35px;
    width: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
    
header .address .mob_email .eml a{
    text-decoration: none;
    color: black;
    /* bcontact: 1px solid black; */
    display:flex;
    align-items: center;
}
header .address .mob_email .contact{
    color: rgb(3, 3, 93);
}

.address p .contact{
    font-weight: 700;
}

header .address p, .log_reg{
    font-size: 1.5rem;
    margin-bottom: 0;
    padding-bottom: 0;
}
header .address p span{
    margin-inline: 1rem;
}
header .address p span i,header .address .log_reg i{
    margin-right:0.5rem ;
}
header .address .log_reg a{
    padding-inline: 1rem;
    text-decoration: none;
    color: black;
}


header nav .nav-item .nav-link{
    font-size: 2rem!important;
    margin-inline: 1rem;

}

header nav ul a{
    border-radius: 0.5rem;
}
header nav ul a:hover{
    border-radius: 0.5rem;
    background-color: rgb(227, 227, 47);
    color:rgb(3, 3, 3)!important;
    font-weight: bold;
    transition:.5s;
}
header nav img{
    border-radius: 1rem;
    box-shadow: 0 0 0.2rem 0.3rem rgb(190, 233, 15);
    height: 3rem;
}
header nav .search input, .searchBtn{
    font-size: 2rem;
}

/* CSS For carousel  */

#main .home img{
    width: 100%;
    height: 75.6vh;
    background-size: cover;
    /* overflow: hidden; */
}
#main .home .carousel-indicators button{
    border-radius: 50%;
    height: 15px;
    width: 15px;
    /* color: blue; */
    background-color:rgb(208, 6, 235) ;
}


/*================= caption 1 ================== */
#main .home .caption-text-1{
    /* bcontact: 1px solid black; */
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%);
    
    /* display: flex;
    justify-content: center; */
    /* align-items: center; */
    width: 100%;
    height: 71vh;
}



#main .home .text-caption .carousel-1-p-1{
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    font-weight: bold;
    
}


#main .home .caption-text-1 .text-caption .desc{
    position: relative;
    /* left: 10rem; */
    font-size: 3rem;
    color: rgb(13, 14, 15);
    font-weight: bold;
    
}
#main .home .text-caption .carBtn-1{
    position: relative;
    /* bottom: 30rem; left: 10rem; */
    font-size: 2rem;
    color: rgb(13, 14, 15);
    font-weight: bold;
    color: white;
    border-radius: 1rem;
    border: none;
    padding: 0.5rem 1.5rem;

}


#main .home .text-caption .carousel-1-p-1 .custom{
    /* font-size: 4rem; */
    color: rgb(165, 2, 13);
    text-shadow: 1px 1px 5px rgb(218, 121, 11);
}
#main .home .text-caption .carousel-1-p-1 .soft{
    /* font-size: 4rem; */
    color: rgb(37, 10, 188);
    text-shadow: 1px 1px 4px rgb(80, 80, 89);
}
#main .home .text-caption .carousel-1-p-1 .develop{
    text-shadow: 1px 1px 4px rgb(90, 84, 84);
    /* font-size: 4rem; */
    color: rgb(14, 51, 2);
}


#main .home .caption-text-2{
    /* bcontact: 1px solid black; */
    position: absolute;
    top:0;
    width: 100%;
    height: 71vh;
    padding: 2rem 3rem; 
}

#main .home .caption-text-2 .text-caption .carousel-2-p-1{
    display: flex;
    flex-wrap: wrap;
    color: rgb(5, 9, 236);
    font-size: 4em;
    font-weight: bold;
}

#main .home .text-caption .carousel-2-p-2{
    
    color: rgb(49, 4, 230);
    font-size: 3rem;
    font-weight: 300;
    text-transform: uppercase;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#main .home .text-caption h3{
   
    line-height: 2rem;
    color: rgb(0, 0, 0);
    font-size:2rem;
    text-shadow: 1px 1px 3px rgb(167, 155, 232);

}

#main .home .text-caption .carousel-2-p-3{
    color: rgb(46, 2, 2);
    font-size: 2rem;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#main .home .text-caption .carousel-2-p-3 .btn{
    font-size: 2.5rem;
    position: relative;
    margin-top:1rem ;
    padding:0 1rem; 
    border-radius: 2rem;
}


#main .home .caption-text-3{
    position: absolute;
    top:0;
    width: 100%;
    height: 71vh;
  
    padding: 2rem;
    display: flex;
}
#main .home .text-caption .exp{

    font-size: 3.5rem;
    font-weight: bold;
    color: rgb(6, 6, 165);
    text-align: center;
    text-transform: uppercase;

}
#main .home .text-caption ul li{

    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: bold;
    color: rgb(214, 20, 20);
}
#main .home .text-caption .work_strategy{

    font-size: 2rem;
    font-weight: bold;
    color: rgb(236, 50, 50);
    text-align: center;
}

/* =================== About Section CSS ================ */

#about{
    border-bottom: 1px solid rgb(199, 166, 166);
    
    background-image: linear-gradient(to right, rgb(193, 231, 185), rgb(242, 243, 170));    
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 1rem 0;
    padding: 2rem 0;
}
#about .aboutus h1{
    text-align: center;
    font-size: 4rem;
    font-weight: bold;
    text-decoration: underline;
}
#about .aboutus .text-1{
    margin-top: 2rem;
    font-size: 2rem;
}
#about .aboutus .text-2{
    margin-top: 3rem;
    font-size: 2rem;
}
#about .aboutus ul li{
    margin-left: 8rem;
    /* margin-top: 3rem; */
    font-size: 2rem;
    font-weight: bold;
}
#about .aboutus .text-3{
    color: rgb(54, 113, 233);
    font-weight: bold;
    /* margin-top: 3rem; */
    font-size: 2rem;
}
#about .aboutus .text-4{
    /* margin-top: 3rem; */
    font-size: 2rem;
}

/* ============= Our Product Section CSS ================ */

.product{
    /* bcontact: 1px solid black; */
    padding: 3rem 0;
    /* bcontact: 1px solid black; */
    background-color: rgb(255, 241, 241);
    /* margin-top: 5rem; */
}

.product h1{
    /* bcontact: 1px solid black; */
    margin-bottom: 6rem;
    text-align: center;
    font-size: 4rem;
    font-weight: bold;
    text-decoration: underline;
}

.product .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap: 2.5rem;
  
  }
  .product .box-container .box{
    padding: 1rem;
    background: #fff;
    border-radius: .5rem;
    border: .1rem solid rgba(0,0,0,.2);
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: hidden;
    text-align: center;
    transition: all 0.5s;
  }
  .product .box-container .box:hover{
    /* top: -1rem; */
    box-shadow: 0 0 1rem 1rem rgb(148, 148, 166);
    
  }


.product .box-container .box h3{
  color: var(--black);
  font-size: 2.7rem;
  text-transform: uppercase;
}

.product .box-container .box img{
    height: 25rem;
    width: 40rem;
    padding: 1.5rem;
    /* box-shadow: 0 0 1rem .1rem rgb(67, 49, 49); */
    /* margin: 1rem ; */
}
.product .box-container .box p{
    color: black;
    font-weight: bolder;
    margin-right: 1rem;
    font-size: 2rem;
    text-transform: capitalize;
}
    
.product .box-container .box span{
    color: rgb(29, 55, 46);
    font-weight: bolder;
    margin-right: 1rem;
    font-size: 2rem;
    text-shadow: 0 .1rem .5rem rgb(214, 214, 243);
}
.product .box-container .box a{
    display: block;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 1.5rem;
    background-color: rgb(8, 26, 72);
    margin: 1rem 0;

    

}
.product .box-container .box a:hover{
   
    color: rgb(29, 25, 245);
    background-color: rgb(206, 237, 7);
    font-weight: bold;
    
}



/* =========== Our Product CSS End============= */

.contact .sub-heading{
text-align: center;
font-size: 4rem;
margin: 2rem 0;
text-decoration: underline;
font-weight: bold;
text-transform: uppercase;
}
.contact .heading {
    text-align: center;
    font-size: 3rem;
    color: green;
    margin-bottom: 2rem;
    text-transform: capitalize;
}



.contact form{
    max-width: 90rem;
    border-radius: .5rem;
    box-shadow: var(--box-shadow);
    border: .1rem solid rgba(0,0,0,.2);
    background: #fff;
    padding: 1.5rem;
    margin: auto;
  }
  
  .contact form .inputBox{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  
  .contact form .inputBox .input{
    width: 49%;
  }
  .contact form .inputBox .input span{
    display: block;
    padding: .5rem 0;
    font-size: 2rem;
    color: rgb(12, 148, 222);
  }
  
  .contact form .inputBox .input input,
  .contact form .inputBox .input textarea,
  .contact form .inputBox .input select{
    background: #f5eded;
    border-radius: .5rem;
    padding: 1rem;
    font-size: 1.6rem;
    color: black;
    text-transform: none;
    margin-bottom: 1rem;
    width: 100%;
  }
  
  .contact form .inputBox .input input:focus,
  .contact form .inputBox .input textarea:focus{
    background: white;
  }
  
  .contact form .inputBox .input textarea{
    height: 20rem;
    resize: none;
  }
  
  .contact form .btn{
    font-size: 2.5rem;
    text-align: center;
    display: flex;
    margin: auto;
  }


  /* =================== Footer Section Start ==================== */
   .footer{
      background-color: aquamarine;
    /* margin: 2rem 0; */
  }
  .footer .box-container{
    margin-top:5rem ;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1.5rem;
  }
  .footer .box-container .box h3{
    text-align: center;
    text-decoration: underline;
    padding: .5rem 0;
    font-size: 2.5rem;
    color: var(--black);
  }
  .footer .box-container .box a{
    display: block;
    text-align: center;
    padding: .5rem 0;
    font-size: 1.5rem;
    color: var(--light-color);
  }
  .footer .box-container .box a:hover{
    font-weight: bold;
    color: black;
    text-decoration: underline;
  }
  
  .footer .credit{
    background-color: rgb(2, 2, 20);
    text-align: center;
    border-top: .1rem solid rgba(0,0,0,.1);
    font-size: 2rem;
    color: red;
    padding:1rem .5rem;
    /* padding-top: 1.5rem; */
    margin-top: 1.5rem;
    
  }
  .footer .credit span{
    color: white;
  }
  














/* media Query For Making Responsive */

@media (max-width:1149px){
    
    header .address p, .log_reg{
        font-size: 1.2rem;
    }
    header nav .nav-item .nav-link{
        /* font-size: 2rem!important; */
        margin-inline: 0.5rem; 
    }
    header nav .search input, .searchBtn{
        font-size: 1.5rem;
    }
}

@media (max-width:1020px){
    
    header nav .search input, .searchBtn{
        font-size: 1.3rem;
    }
        header nav .navbar-brand{
            font-size: 0.5rem!important;
        }
        header nav .nav-item .nav-link{
            font-size: 0.5rem!important;
            margin-inline: 0.2rem; 
            
        }
    }



@media (max-width:1204px){
    
    header nav .navbar-brand{
        font-size: 1.1rem!important;
    }
    header nav .nav-item .nav-link{
        font-size: 2rem!important;
        
    }
    header nav form input, button{
        font-size: 1rem;
    }
    #main .home .text-caption h3{
   
      
        color: rgb(248, 245, 245);
       
    }

}
    
        

@media (max-width:991px){
    
    header .address p, .log_reg{
        font-size: 1rem;
    }

    header .anjali_logo{
        font-size: 3rem;
    }
    #main .home .text-caption .carousel-1-p-1 .develop{
      
        color: rgb(243, 247, 241);
    }


    #main .home .text-caption .desc{
        color: rgb(219, 3, 3)!important;
        /* bottom: 42rem; */
        font-size: 2rem;
    }
  
}
@media (max-width:841px){
    
    header .address p, .log_reg{
        font-size: 0.9rem;
    }
    header .address p span i,
    header .address .log_reg i{
        margin-right:0.1rem;
    }
    header .address p span{
        margin-inline: 0.3rem;
    }
    header .address .log_reg a{
        padding-inline: 0.5rem;
    }
}

@media (max-width:768px){
    
    #main .home .text-caption .carousel-1-p-1{
        
        gap: 0.8rem;
      
    }
    #main .home .text-caption .desc{
        /* bottom: 42rem; left: 3rem; */
        font-size: 2rem;
    }
    #main .home .caption-text-2 .text-caption .carousel-2-p-1{  
        font-size: 3rem;
    }
    #main .home .text-caption .carousel-2-p-2{
        font-size: 2rem;
    }

}

@media (max-width:780px){
    
    #main .home .text-caption .carousel-1-p-1{
        bottom: 47rem;
        gap: 0.5rem;
        
      
    }
    #main .home .text-caption .desc{
        /* bottom: 42rem; left: 3rem; */
        font-size: 1.5rem;
    }

}


@media (max-width:644px){
    
    header .address .mob_email{
        margin-left: 0.5rem;
        /* bcontact: 1px solid black; */
        display: flex;
        flex-direction: column;
        justify-content: center;
      
    }
    header .address .log_reg{
        margin-left: 0.5rem;
        /* bcontact: 1px solid black; */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #main .home .text-caption .carousel-1-p-1{
        line-height: 4rem;
        gap: 0.5rem;
        font-size: 4rem;
      
    }
    #main .home .text-caption .desc{
        /* bottom: 40rem; left: 3rem; */
        /* font-size: 2rem!important; */
        color: rgb(255, 255, 255);
    }
    #main .home .text-caption .carousel-2-p-3{
        font-size: 1.5rem ;
    }

}

@media (max-width:576px){

  
    #main .home .caption-text-2 .text-caption .carousel-2-p-1{  
        font-size: 2.5rem;
    }
    #main .home .text-caption .carousel-2-p-2{
        font-size: 2rem;
    }
    #main .home .caption-text-3 .text-caption .exp{
        font-size: 2.5rem;
    }
    #main .home .caption-text-3 .text-caption ul li{
        font-size: 1.7rem;  
    }
    #main .home .caption-text-3 .text-caption .work_strategy{
        font-size: 1.7rem;  
    }
}
@media (max-width:352px){

  
    #main .home .caption-text-2 .text-caption .carousel-2-p-1{  
        font-size: 2rem;
    }
    #main .home .text-caption .carousel-2-p-2{
        font-size: 1.5rem;
    }
    #main .home .text-caption h3{
        font-size: 1.5rem;
        margin-top: -1rem;
    }
    #main .home .text-caption .desc{
        
        font-size: 1.5rem;
        
    }
    #main .home .caption-text-3 .text-caption .exp{
        font-size: 2.2rem;
    }
    #main .home .caption-text-3 .text-caption ul li{
        font-size: 1.5rem;  
    }
    #main .home .caption-text-3 .text-caption .work_strategy{
        font-size: 1.5rem;  
    }
}

