/* ----GLOBAL VARIABLES ------ */
*{
    font-family:'Poppins',sans-serif;
    margin:0;
    padding:0;
    box-sizing:border-box;
    text-decoration:none;
    scroll-behavior:smooth;
}


body{
    overflow-x:hidden;
    min-height:1000px;
} 



p{
    font-weight:300;
    color:#111;
}



/* -----CSS RESET ------------ */

:root{
  --primary-color:#ff0157;
  --color-blue: hsl(236, 57%, 28%);
  --color-purple: hsl(275, 54%, 33%);
  --pink-purple: hsl(335, 88%, 38%);
  --black: hsla(0, 0%, 0%, 0.7);
  --rajah: hsl(29, 99%, 67%);
  --chrome-yellow: hsl(39, 100%, 52%);
  --white: hsl(0, 0%, 100%);
}



/* ------HEADER SECTION ------- */

header{
    position:fixed;
    height:90px;
    top:0;
    left:0;
    width:100%;
    padding:40px 100px;  
    z-index:10000;
    display:flex;
    justify-content:space-between;
    align-items:center;
    transition:0.5s;
    background:#fff;
   
}


/*--------HEADER SCROLL EFFECTS-------*/
header.sticky{
    background:#fff;
    padding:10px 100px;
    box-shadow:0 5px 20px rgba(0,0,0,0.5);
}

header.sticky .logo{
  color:#000;
}

header.sticky .navigation li a{
    color:#000;
    font-size:15px;
}

header.sticky .navigation li a:hover{
    color:#ff0157;
}

/*--------END OF HEADER SCROLL EFFECTS-------*/


/*--------HEADER SECTION-------*/


header .logo img{
    color:#fff;
    font-weight:700;
    width:120px;
}


header .logo span{
    color:#ff0157;
}


header .navigation{
    position:relative;
    display:flex;
   
}

header .navigation li{
    list-style:none;
    margin:10px 20px;
}

header .navigation li a{
    color:#000;
    font-size:15px;
    font-weight:500;
    text-transform:uppercase;
}

header .navigation li a:hover{
    color:#ff0157; 
}

.banner{
    position:relative;
    width:100%;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(../images/hero-bg.jpg); 
    background-size:cover;
    background-position:center;
    animation:slider 20s infinite;
  
}





@keyframes slider {
    25%{   
        background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../images/hero-bg.jpg);
    }



    50%{
        background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../images/pic-2.png);
    }

    75%{
        background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../images/pic-4.jpg);
    }



    100%{
        background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../images/pic-3.jpg);
    }
    
}


.banner .content{
    text-align:center;
    max-width:900px;
   
}

.banner .content h2{
    color:#fff;
    font-size:3.5em;
}


.banner .content h3{
    color:#0ea2f1;
}

.banner .content p{
    color:#fff;
    font-size:1em;
}

.btn{
    font-size:1em;
    color:#fff;
    background:#ff0157;
    padding:16px 30px;
    margin-top:20px;
    border:none;
    border-radius:50px;
    text-transform:uppercase;
    text-decoration:none;
    letter-spacing:2px;
    display:inline-block;
    cursor:pointer;
    transition:0.5s;
}

.btn:hover{
   background: #b8466c;
}

/*--------END OF HEADER SECTION-------*/




/* -------------ABOUT SECTION-------------- */
.about-us{
    background: #f7f5f6;
    padding:100px 0;
}



.about-img{
    width:100%;
    min-height:400px;
    background-image:linear-gradient(rgba(33, 59, 146, 0.6),rgba(67, 235, 25, 0.6)),url(../images/pic.jpg); 
    background-size:cover;
    background-position:center;
    position: relative;
}


.about-img h1{
    font-size:4em;
    color:#fff;
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%)
}


.about-img h1:after{
    content:'';
    width:50px;
    height:5px;
    background:#ff0157;
    display:block;
    border-radius:5px;
    margin:auto;
}

.about-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    padding:0 8%;
    gap:3rem;
}



.about-us h2{
    font-size:2rem;
    text-align:center;
    margin:50px 0;
}


.about-us h2:after{
    content:'';
    width:50px;
    height:5px;
    background:#ff0157;
    display:block;
    border-radius:5px;
    margin:auto;
}



.about-info img{
    max-width:100%;
    border-radius:15px;
    
}



.about-info h1{
    text-transform: uppercase;
}

.about-info p{
   padding:15px 0 25px;
   text-align:justify;
   line-height:1.7;
}



/*----------- END OF ABOUT US PAGE---------*/




/* -------------END OF ABOUT SECTION-------------- */




/* -------SERVICES SECTION------ */

.services, .service{
    padding:100px 0;
}


.service .title{
    text-align:center;
    font-size:1.2rem;
    font-weight:600;
    color:#26014b
}


.service .head-title{
    text-align:center;
    font-size:3rem;
    margin-bottom:1%;
}

.service .head-title::after{
    content:'';
    width:100px;
    height:5px;
    background:#ff0157;
    display:block;
    border-radius:5px;
    margin:auto;
}


.service .para{
    width:50%;
    margin:50px auto;
    text-align:center;
    line-height:1.7;
}


.service-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    grid-gap:50px;
    padding:0 8%;
}


.service-info-card{
    width:100%;
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    padding:20px;
    border-radius:15px;
    text-align:center;
}



.service-info-card img{
    width:100%;
    height:30vh;
    object-fit:cover;
}


.services-img{
    width:100%;
    min-height:400px;
    background-image:linear-gradient(rgba(33, 59, 146, 0.6),rgba(67, 235, 25, 0.6)),url(../images/services-2.jpg); 
    background-size:cover;
    background-position:center right;
    position: relative;
}


.services-img h1{
    font-size:4em;
    color:#fff;
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%)
}


.services-img h1:after{
    content:'';
    width:50px;
    height:5px;
    background:#ff0157;
    display:block;
    border-radius:5px;
    margin:auto;
}








.service-info-card h3{
    font-size:24px;
    line-height:30px;
    margin:30px 0;
}



.service-info-card p{
    font-size:14px;
    line-height:26px;
    margin-bottom:20px;
    color:gray;
}




/* -------END OF SERVICES SECTION------ */






/* -------SERVICES SECTION------ */

.contact{
    padding:100px 0;
}



.contact-img{
    width:100%;
    min-height:370px;
    background-image:linear-gradient(rgba(33, 59, 146, 0.6),rgba(67, 235, 25, 0.6)),url(../images/contac-2.jpg); 
    background-size:cover;
    background-position:center right;
    position: relative;
}


.contact-img h1{
    font-size:4em;
    color:#fff;
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    text-shadow:0px 0px 10px rgba(0,0,0,0.2);
}


.contact-img h1:after{
    content:'';
    width:50px;
    height:5px;
    background:#ff0157;
    display:block;
    border-radius:5px;
    margin:auto;
}


.contact-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    padding:0 8%;
    gap:2rem;
}


.contact-info{
    width:100%;
    text-align:center;
    padding:20px;
    margin-top:20%;
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    border-radius:15px;
}


.contact-info .fa-solid{
    font-size:2.5rem;
    padding:20px;
    color:#ff0157;
    transition:.3s;
    margin-bottom:30px;
}





.contact-info .fa-solid:hover{
    transform:scale(1.1);
    width:80px;
    height:80px;
    border:2px solid #ff0157;
    border-radius:50%;
   
    text-align:center;
}




.contact-info h2{
    font-size:20px;
    margin-bottom:20px;
}

.contact-info .phone, .phone1{
    font-size:18px;
    color:#ff0157;
    display: block;
    font-weight:700;

}







.contact-info p{
    margin-bottom: 30px;
}

.contact-info p a{
    color:#777;
}




.contact-info strong{
    color:#777;
}


.contact-info .email-btn{
    width:100%;
    display:inline-block;
    background:#ff0157;
    padding:12px 30px;
    color:#fff;
    border-radius:8px;
    margin-bottom:30px;
}

.contact-info .chat{
    color:#ff0157;
}


.contact-info h3{
    font-size:16px;
    color:#ff0157;
    font-weight:700;
}


/* -------END OF SERVICES SECTION------ */








/* -------------OUR SOLUTION SECTION-------------- */

.our-solution{
    background:#26014b;
    padding:100px 0;
}


.our-solution h1{
    color:#fff;
    text-align:center;
    font-size:2rem;
}


.our-solution h1:after{
    content:'';
    width:120px;
    height:5px;
    display:block;
    background:#ff0157;
    border-radius: 5px;
    margin:auto;
}


.solution-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    padding:0 8%;
    gap:2rem;
   
   
}


.solution-info{
    margin-top:15%;
    background:#ffffff;
    padding:35px;
    text-align:center;
    line-height:1.7;
    border-radius:10px;

}





.solution-info i{
    width:80px;
    height:80px;
    background:#ff0157;
    border-radius:50%;
    font-size:40px;
    color:#fff;
    padding:16px;
    transition:.3s;
}

.solution-info i:hover{
    transform: scale(1.1);
    background: #26014b;
}

.solution-info h2{
    margin:10px 0;
}

.solution-info p{
    font-size:16px;
}

/* -------------END OF OUR SOLUTION SECTION-------------- */






/*-------- COURSE SECTION-------*/

.offering{
    width:80%;
    margin:auto;
    text-align:center;
    padding-top:100px;
}

.offering h1{
    font-size:36px;
    font-weight:bold;
}

.offering h1:after{
    content:'';
    width:120px;
    height:5px;
    display:block;
    background:#ff0157;
    border-radius: 5px;
    margin:auto;
}



.offering .p-title{
    color:#777;
    font-size:1.5rem;
    font-weight:300;
    line-height:22px;
    padding:10px;
    margin-top:20px;
}

.offering p{
    color:#777;
    font-size:14px;
    font-weight:300;
    line-height:22px;
    padding:10px;
}

.offer-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px, 1fr));
    grid-gap:30px;
    margin:5%;
}

.offer-info{
     background:#ffffff;
     border-radius:10px;
     padding:20px;
     box-shadow:0px 0px 10px rgba(0,0,0,0.2);
}

h3{
    text-align:center;
    font-weight:600;
    margin:10px 0;
}

.offer-info:hover{
    box-shadow:0 0 20px 0px rgba(0,0,0,0.2);
    transform:scale(1.1);
}




/* -----PARTNERS SECTION ------ */

.partners{
    padding:100px 0;
    background-image:linear-gradient(rgba(27, 20, 228, 0.7),rgba(16, 184, 199, 0.7)),url(../images/page.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}


.partners h1{
    text-align:center;
    font-size:2rem;
    color:#fff;
}


.partners h1:after{
    content:'';
    width:120px;
    height:5px;
    display:block;
    background:#ff0157;
    border-radius: 5px;
    margin:auto;
}


.partners-container{
    padding:0 8%;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px, 1fr));
    text-align:center;
}


.partners-info{
    margin-top:7%;
}





/* -----END OF PARTNERS SECTION ------ */

















/* -------------CALL TO ACTION-------------- */

.cta{
    width:100%;
    min-height:50vh;
    padding:100px 0;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    background-attachment:fixed;
    background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(../images/cta.png);
}


.cta .cta-info{
    min-height:20vh;
    display:flex;
    align-items:center;
    flex-direction:column;
    text-align:center;
    
}


.cta-info h1{
    font-size:3rem;
    color:#fff;
    margin-bottom:15px;
}

.cta-info p{
    color:#d5d2d7;
    font-size:18px;
    font-weight:400;
    margin-bottom:15px;
}





/* -------------END OF CALL TO ACTION-------------- */







/* ------GALLERY SECTION----- */

.gallery-page{
    background:#f3f3f3;
    padding:100px 0;
}

.gallery-page h2{
    margin-top:5%;
    text-align:center;
}


.gallery-page  h2::after{
    content:'';
    width:100px;
    height:4px;
    border-radius:5px;
    background:#ff0157;
    display:block;
    margin:5px auto;
}



.gallery-img{
    width:100%;
    min-height:370px;
    background-image:linear-gradient(rgba(33, 59, 146, 0.6),rgba(40, 148, 13, 0.6)),url(../images/galla-img.jpg); 
    background-size:cover;
    background-position:center right;
    position: relative;
}


.gallery-img h1{
    font-size:4em;
    color:#fff;
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    text-shadow:0px 0px 10px rgba(0,0,0,0.2);
}


.gallery-img h1:after{
    content:'';
    width:50px;
    height:5px;
    background:#ff0157;
    display:block;
    border-radius:5px;
    margin:auto;
}








.container{
    width:100%;
    min-height:50vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:50px 8%;
} 

.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px, 1fr));
    grid-gap:30px;
}

.gallery img{
    max-width:100%;
    border-radius:20px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    
}

/* ------END OF GALLERY SECTION */


/* -----WHY CHOOSE US---------- */
.why-choose{
    padding:100px 0;
}

.why-choose-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    padding:0 8%;
    gap:5rem;
}

.why-choose-info img{
    max-width: 100%;
    background:#fff;
    border-radius:15px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
}

.why-choose-info h2{
    font-size:30px;
    margin-bottom:20px;
}

.why-choose-info p{
    font-size:16px;
}


.why-choose-info h2::after{
    content:'';
    width:100px;
    height:4px;
    border-radius:5px;
    background:#ff0157;
    display:block;
    margin:5px  0;
}


.why-choose-info .tel-con{
    margin-top:50px;
}



/* -----END OF WHY CHOOSE US---------- */



/* ------TESTIMONIALS */
.testimonials{
    padding:100px 0;
    background: #f4f0f1;
}


.testimonials h1{
    text-align:center;
    font-size:1.2rem;
}

.testimonials h2::after{
    content:'';
    width:100px;
    height:4px;
    border-radius:5px;
    background:#ff0157;
    display:block;
    margin:auto;
}

.testimonials h2{
    font-size:1.7rem;
    text-align:center;
    font-weight:300;
    margin:20px 0;
}


.testimonial-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    padding:0 8%;
    justify-content:center;
}

.testimonial-info{
    width:200px;
    height:200px;
    padding:50px;
    background-color:#fff;
    margin-top:15%;
    border-radius:10px;
    transition:background .3s;
    
}


.testimonial-info:hover{
    background: #0ea2f1;
}


.testimonial-info img{
    width:100px;
    height:100px;
    border-radius:50%;
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    transition:.3s;
  
}

.testimonial-info img:hover{
    transform:scale(1.1);
}

/* ------END OF TESTIMONIALS */






/* --------FOOTER SECTION  ---------- */
.footer{
    padding:50px 0;
    background:var(--color-blue);
    background-size: cover;
    background-repeat:no-repeat;
    background-position:center;
    background-image:url(../images/footer-bg.png);
}


.footer-details img{
    width:100px;
    background:#fff;
    border-radius:5px;
}


.footer-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    padding:0 8%;
}


.footer-details ul{
    list-style:none;
}


.footer-details li{
    margin:5px 0;
}


.footer-details li a{
    color:#fff;
    font-weight:300;
}



.footer-details li a:hover{
    color:#ff0157;
}


.copyright{
    text-align:center;
    color:#fff;
    margin-top:50px;
}

strong{
    color:var(--chrome-yellow);
}



.footer-details p{
    color:#fff;
    font-size:16px;
    margin-top:20px;
    width:80%;
}

.footer-details h2{
    color:#fff;
    margin-top:20px;
    font-size:20px;
}


.social-media{
    margin:40px 0;
}



.social-media i{
    color:var(--primary-color);
    width:40px;
    height:40px;
    border-radius:50%;
    background:#fff;
    text-align:center;
    padding:10px;
    margin:0 8px;
    font-size: 20px;
    transition:background.5s;
}


.social-media i:hover{
    background:linear-gradient(hsl(335, 88%, 38%),hsl(39, 100%, 52%));
    color:#fff;
}


.tel-con{
    display: flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
}


.tel-con i{
    width:50px;
    height:50px;
    background:linear-gradient(hsl(335, 88%, 38%),hsl(39, 100%, 52%));
    border-radius:50%;
    text-align:center;
    color:#fff;
    padding:15px;
    font-size:18px;
}


.tel{
    width:100%;
   
}

.tel p{
    font-weight:400;
}

/* --------END OF FOOTER SECTION  ---------- */






/*--------RESPONSIVE SECTION-------*/


@media(max-width:991px){

    header,header.sticky{
        padding:10px 20px;
    }

    section{
        padding:20px;
    }


    .banner {
        height:70vh;
        overflow:hidden;
        background-position:center;
        background-repeat:no-repeat;
    }


    .banner .content{
        margin-top:80px;
    }





    .banner .content h2{
        font-size:2em;
        color:#fff;
    }


    
    header .navigation{
        display:none;
    }


    header .navigation.active{
        width:100%;
        height:calc(100% - 68px);
        position:fixed;
        top:68px;
        left:0;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-direction:column;
        background:#fff;
    }


    header .navigation li{
        margin-left:0;
    }


    header .navigation li a{
        color:#111;
        font-size:1.6em;
        font-weight:300;
    }



    .menuToggle{
        position:relative;
        width:40px; 
        height:40px;
        background-size:30px;
        background:url(../images/menu.png);
        background-repeat:no-repeat;
        background-position:center;
        cursor:pointer;
        z-index:1;
    }

     
    .menuToggle.active{
        background:url(../images/close.png);
        background-repeat:no-repeat;
        background-size:25px;
        background-position:center;
        cursor:pointer;
    }


    header.sticky .menuToggle{
        filter:invert(1);
    }

/* -----END OF HEADER SECTION ------ */



    .about-img, .services-img,.contact-img{
        background-position:center;
    }

    .about-img h1{
        font-size:2em;
    }


    .about-info h1{
        text-align:center;
        font-size:1.2rem;
    }


    .offering h1{
        font-size:1.5rem;
    }


    .offering h1::after{
        width:70px;
    }

    .offering .p-title{
        font-size:1rem;
    }


    .about-us h2{
        font-size:1.2rem;
    }



    .partners{
        height:70vh;
        overflow:hidden;
        background-position:center;
        background-repeat:no-repeat;
    }


    .services-img h1{
        font-size:1.6em;
    }

    .service .head-title{
        font-size:2rem;
        margin-top:20px;
    }

    .service  .para{
        width:75%;
    }



    .contact-img h1{
        font-size:2em;
    }




    .testimonial-info{
        width:100%;
      
    }

    .testimonial-info img{
         width:100px;
         height:100px;
         margin:auto 50px ;
         border-radius:50%;
    }



    .footer{
        text-align:center;
    }


    .copyright{
        width:80%;
        margin:50px auto;
    }


    .tel-con{
        flex-direction:column;
    }

    .tel p{
        margin:15px auto;
    }



    .why-choose-info h2{
        text-align:center;
        font-size:18px;
    }


.why-choose-info h2::after{
    width:80px;
    margin:5px auto;
}


    .why-choose-info p{
        text-align:center;
    }



    .our-solution h1{
        margin-bottom:80px;
    }



    .solution-info{
        width:100%;
        margin-top:50px;
    }


    .solution-info h2{
        font-size:18px;
    }
    

    .cta{
        height:70vh;
        overflow:hidden;
        background-position:center;
        background-repeat:no-repeat;
    }


    .cta-info h1{
        font-size:1.5rem;
      
    }
    
    .cta-info p{
        color:#d5d2d7;
        font-size:15px;
       
    }


    .about-container, .why-choose-container{
       grid-template-columns:1fr;

    }

  
    .testimonial-container{
        grid-template-columns:1fr;
        margin:auto 170px;
    }

}







@media(max-width:480px){
    .banner .content h2{
        font-size:2.2em;
        color:#fff;
    }
}