*{
    padding: 0;
    margin: 0;
    
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
    box-sizing: border-box;
    overflow-x: hidden;
}
i , .un-sc{
    overflow-y: hidden;
}
header{
    position: sticky;
    top: 0;
    background-image: url("assets/cta-bg.jpg");
}
body{
    background-image: url("assets/cta-bg.jpg");
}
header nav{
    display: flex;
    justify-content: space-between;
    background-color: skyblue;
    background-image: url("assets/cta-bg.jpg");
    padding: 1.5rem 7rem;
    font-weight: 700;
    font-size: 1.25rem;
}
header nav a{
    text-decoration: none;
    color: white;
}
header nav select{
    outline: none;
    border: none;
    background-color: skyblue;
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
}
header nav .left a{
    color: blue;
}
header nav .right {
    display: flex;
    justify-content: space-between;
    width: 70%;
}
header nav .right select , header nav .right button{
    transition: color 0.5s ease-in;
}
header nav .right a:hover , header nav .right select:hover , header nav .right button:hover{
  color: blue;
}

header nav .right a:hover{
    /* transform: scale(1.2); */
    color: blue;
}
#home-page{
    position: relative;
    bottom: 7rem;
}
main>section{
    height: 94vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#text-1{
    font-size: 5rem;
    font-weight: bolder;
    color: white;
}
#text-2{
    text-align: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
}

#scroll-down{
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
    
}
#scroll-down a i{
    font-size: 5rem;
    transition: font-size 1s ease;
    /* transition: color 0.5s ease; */
}
#scroll-down a i:hover{
    font-size: 7rem;
}
#about-us{
    background-image: url("assets/about-bg.jpg");
    height: 70vh;
    display: flex;
    gap: 5rem;
}
#about-us .about-left button{
    background-color: skyblue;
    padding: 0.75rem;
    width: 12rem;
    border-radius: 1.5rem;
    color: white;
    font-size: 1.25rem;
    transition: transform 2s ease;
}
#about-us .about-left button:hover{
    animation: anim-about-us 0.5s linear 0s infinite alternate-reverse;
    cursor: pointer;
}
@keyframes anim-about-us{
   from{transform: scale(1);}
   to{transform: scale(1.2);}

}
.about-left{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    width: 40rem;
    flex: 2;
    padding: 3rem;
    padding-left: 4rem;
}
.about-right{
    flex: 3;
    padding: 2rem;
}
#about-us .about-left h1{
    font-size: 3rem;
}
#about-us .about-left p{
    font-size: 1rem;
}
.about-right .b-box i{
    font-size: 3rem;
}
.about-right .b-box h2{
    font-size: 1.5rem;
}
.about-right .b-box p{
    color: gray;
    font-weight: bold;
}

.about-right .b-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    overflow: auto;
    transition: transform 0.5s ease ;
}
.about-right .b-box:hover{
    transform: translateY(10px);
    .title {
        color: blue;
    }
}
.about-right{
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 3rem;
}
#services{
    height: 40rem;
    background: none;
    background-color: white;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0rem 5rem;
}
#services>h1{
    color: darkblue;
    font-size: 4rem;
    font-weight: bolder;
}
#services>p{
    color: gray;
    font-weight: 700;
    font-size: 1.2rem;
    text-align: center;
}
#services .services-box-container{
    display: flex;
    gap: 2rem;
}
.s-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 18rem;
    background-color: whitesmoke;
    padding: 3rem;
    overflow: auto;
    transition: transform 0.5s ease;
}
.s-box:hover{
    transform: scale(0.8);
    .title-2{
        color: blue;
    }
    background-color: rgba(22, 242, 235,0.5);
}
#services .services-box-container .s-box i{
    font-size: 3rem;

}
#stats{
    background-color: whitesmoke;
    height: 20rem;
    display: flex;
    /* padding: 0 5rem; */
    justify-content: space-evenly;
}
#stats .st-box{
    display: flex;
    gap: 2rem;
    transition: transform 0.5s ease;
}
#stats .st-box:hover{
    transform: scale(0.8);
}
#stats .st-box i{
    font-size: 4rem;
}
#stats .st-box .st-min-box{
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
#stats .st-box .st-min-box h1{
    font-size: 4rem;
}
#call{
    background-color: rgba(135,206,235,0.8);
    height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 2rem;
    gap: 1rem;
    color: white;
}
#call h1{
    font-size: 3rem;
}
#call p{
    font-size: 1.5rem;
    text-align: center;
}
#call button{
    outline: none;
    border-radius: 1.5rem;
    width: 15rem;
    height: 3rem;
    background-color: rgba(135,206,235,0.5);
    margin-top: 1rem;
    border: solid 2px white;
    transition: transform 0.5s ease;
}
#call button:hover{
    transform: scale(1.2);
    font-size: 1.2rem;
    background-color: green;
    color: white;
}
#portfolio{
    height: 105rem;
    background: none;
    background-color: white;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem 5rem;
}
#portfolio .port-box{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 3rem;
}
#portfolio .port-box img{
    height: 25rem;
    width: 25rem;
}
#portfolio h1{
    font-size: 3rem;
    font-weight: bolder;
}
#portfolio p{
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
}
#portfolio button{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 25rem;
    height: 3rem;
    outline: none;
    border: none;
    border-radius: 2rem;
    background-color: rgba(0,255,255,0.25);
}
#testimonial{
    height: 40rem;
    background-color: whitesmoke;
    padding: 1rem 5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
#testimonial .review .r-box img{
    height: 8rem;
    width: 8rem;
    border-radius: 50%;
}
#testimonial .review .r-box .r-text{
    background-color: white;
}
#testimonial .review{
    display: flex;
    gap: 4rem;
}
#testimonial h1{
    font-size: 3rem;
}
#testimonial>p{
    font-size: 1.2rem;
    text-align: center;
}
.super-text{
    font-size: 3rem;
    color: grey;
}
#testimonial .review .r-box .r-text p{
    text-align: center;
}
/* #testimonial .review .r-box img{
    text-align: center;
} */
#testimonial .review .r-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.circle{
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.s-circle{
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    border: 1px solid black;
}
.circle  .blue{
    background-color: blue;
}
#team{
    height: 60rem;
    padding: 0rem 5rem;
    display: flex;
    flex-direction: column;
    /* justify-content: space-evenly; */
    gap: 2rem;
    background-color: white;
    text-align: center;
}
#team h1{
    font-size: 4rem;
    /* margin-top: -10rem; */
    color: #22244f;
}
#team>p{
    color: gray;
    font-weight: 500;
    font-size: 1.2rem;
}
#team .team-img-box{
    display: flex;
    gap: 2.5rem;
    height: 40rem;
}
#team .team-img-box .t-image img{
    height: 35rem;
    width: 30rem;
}
#team .team-img-box .t-image{
    position: relative;
}
#team .team-img-box .t-image .t-image-text{
    height: 5rem;
    width: 25rem;
    /* background-color: rgba(245,222,179,1); */
    background-color: skyblue;
    /* background-color: white; */
    text-align: center;
    margin-left: 2.5rem;
    position: absolute;
    top: 32.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    transition: transform 0.2s ease;
    
}
#team .team-img-box .t-image .t-image-text:hover{
    transform: scale(0.8);
}
#contact-form{
    /* background-color: rgba(235, 227, 21);
     */
     background-color: wheat;
    height: 60rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0rem 5rem;
}
#contact-form h2{
    font-size: 3rem;
    color: #22244f;
}
#contact-form p{
    font-size: 1.2rem;
    color: gray;
    font-weight: 500;
    text-align: center;
}
.contact-1-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    height: 40rem;
    width: 100%;
    gap: 1rem;
}
.contact-1-grid .contact-min-box-1{
    grid-area: 1/1/2/3;
}
.contact-1-grid .contact-min-box-2{
    grid-area: 1/3/2/4;
}
.contact-1-grid .contact-min-box-3{
    grid-area: 1/4/2/5;
}
.contact-1-grid .contact-min-box-4{
    grid-area: 2/1/4/3;
}
.contact-1-grid .contact-min-box-5{
   grid-area: 2/3/4/5; 
}
.contact-1-grid i{
    font-size: 3rem;
}
.contact-1-grid .row-1{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 1rem;
    text-align: center;
    padding: 1.5rem 0rem;
}
.contact-1-grid .grid-item{
    background-color: white;
    border-radius: 1rem;
    transition: transform 0.2s ease;
}
.contact-1-grid .grid-item:hover{
    transform: scale(0.8);
    background-color: rgba(96, 240, 53,0.8);
}
.contact-1-grid .row-2-1{
    background-image: url("assets/map.png");
    background-size: cover;
}
.contact-1-grid .row-2-2{
    display: flex;
    flex-direction: column;
    padding: 2rem;
    gap: 1rem;
}
.name-email label input{
    /* padding: 0.25rem; */
    /* height: 4rem; */
    width: 49%;
    height: 3rem;
    padding: 0.75rem;
    /* margin: 0.75rem; */
}

.row-2-2 .mes input{
    height: 8rem;
    width: 100%;
    padding: 0.75rem;
}
.sub {
    width: 80%;
    padding: 0.75rem;
}
.mes{
    display: flex;
    align-items: start;
    justify-content: start;
}
.row-2-2 .sub{
    width: 100%;
    height: 3rem;
}
.row-2-2 button{
    outline: none;
    border: none;
    background-color: skyblue;
    height: 3rem;
    width: 20rem;
    border-radius: 1rem;
    text-align: center;
    margin: auto;

}

footer{
    height: 35.5rem;
    background-color: #22244f;
}
.foot-1{
    display: flex;
}
footer .f-1{
    display: flex;
    flex-direction: column;

    background-color: white;
    height: 25rem;
    width: 50rem;
    border-top: solid 3px blue;
    
    margin-left: 5rem;

    justify-content: space-around;
    text-align: center;
    padding: 1rem;
    /* margin-top: -3rem; */
    z-index: 1000; 
    /* position: relative;
    top: -1rem; */
    
}
.line-h{ 
    line-height: 1.5;
}
.f-icons i{
    margin: 0.4rem ;
}
.f-1 i{
    font-size: 2rem;
}
.f-1 h1{
    font-size: 2rem;
}
.f-text{
    color: white;
}

footer .footer-1-2{
    display: flex;
    
    margin: 4rem;
    width: 100%;
    justify-content: space-around;
}
footer .footer-1-2 .list-1 ,footer .footer-1-2 .list-2{
    flex: 1;
}
footer .footer-1-2 .list-3{
    flex: 2;
}
footer .footer-1-2 .f-list{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

footer .footer-1-2 .input-field .in{
   height: 2.75rem; 
}

footer .footer-1-2 .input-field {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1;
    /* transition: transform 0.2s ease; */
    animation: subscribe 0.5s linear 0s infinite alternate-reverse;
}
footer .footer-1-2 .input-field:hover{
    animation: subscribe-stop 0.5s linear 0s infinite alternate-reverse;
}
@keyframes subscribe{
    from{}
    to{transform: scale(0.8);}
}
@keyframes subscribe-stop{
    from{}
    to{transform: scale(1);}
}

footer .footer-1-2 .input-field input{
    grid-area: 1/1/2/3;
}
footer .footer-1-2 .input-field button{
    grid-area: 1/3/2/4;
    background-color: skyblue;
    border: none;
    outline: none;
    margin-left:-0.2rem;
    font-size: 1.4rem;
    color: white;
}
footer #footer-line{
    margin: 2rem 0rem;
    border: none;
    border-top: 1px solid gray ;
}
footer .foot-2{
    margin: auto 0rem;
    color: white;
}
footer .foot-2 p{
    line-height: 2rem;
    text-align: center;
}