index.css

/*============================================== custom properties========================================= */

:root{
--st-patricks-blue: hsl(236, 57%, 28%);
--amaranth-purple: hsl(335, 88%, 38%);
--royal-blue-dark: hsl(231, 68%, 21%);
--chrome-yellow: hsl(39, 100%, 52%);
--space-cadet-1: hsl(230, 41%, 25%);
--space-cadet-2: hsl(230, 59%, 16%);
--winter-sky_50: hsla(335, 87%, 53%, 0.5);
--purple-navy: hsl(236, 26%, 43%);
--ksu-purple: hsl(275, 54%, 33%);
--winter-sky: hsl(335, 87%, 53%);
--razzmatazz: hsl(335, 87%, 51%);
--platinum: hsl(0, 0%, 90%);
--black_70: hsla(0, 0%, 0%, 0.7);
--rajah: hsl(29, 99%, 67%);
--white: hsl(0, 0%, 100%);

--gradient-1: linear-gradient(90deg,var(--royal-blue-dark) 0,var(--ksu-purple) 51%,var(--royal-blue-dark));
--gradient-2: linear-gradient(90deg,var(--razzmatazz) ,var(--rajah));


    /* =====typography======= */
--ff-source-sans-pro: 'Source Sans Pro', sans-serif;
--ff-poppins: 'Poppins', sans-serif;

--fs-1: 4.2rem;
--fs-2: 3.8rem;
--fs-3: 3.2rem;
--fs-4: 2.5rem;
--fs-5: 2.4rem;
--fs-6: 2rem;
--fs-7: 1.8rem;
--fs-8: 1.5rem;

--fw-500: 500;
--fw-600: 600;
--fw-700: 700;

    /* =====Border radius======== */
   
--radius-4: 4px;
--radius-12: 12px;

    /*======= spacing======== */
 --section-padding: 60px;
    /*===== transition======== */
 --transition-1: 0.15s ease;
--transition-2: 0.35s ease;
--cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
--cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02);

    /* ========shadow======== */
 --shadow: 0 5px 20px 1px hsla(220, 63%, 33%, 0.1);

}


/*=========== Reset=========================== */
*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.container{
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}
a,
img,
span,
input,
button,
ion-icon{
    display: block;
}
button,
input{
    background: none;
    border: none;
    font: inherit;
}
button{
    cursor:pointer;
}
input{
    width: 100%;
}
ion-icon{
    pointer-events: none;
}
img{
    height:auto;
}
address{
    font-style: normal;
}
html{
    font-family: var(--ff-poppins);
    font-size: 10px;
    scroll-behavior: smooth;
}
body{
    background-color:var(--body-bg);
    color: var(--purple-navy);
    font-size: 1.6rem;

}

::-webkit-scrollbar{width: 10px;}
::-webkit-scrollbar-track{background-color: hsl(0,0%,95%);}
::-webkit-scrollbar-thumb{background-color: hsl(0,0%,80%);}
::-webkit-scrollbar-thumb:hover{background-color:hsl(0,0%,70%);}

/*=========== Reused style===== */
.container{
    padding-inline: 15px;
}
h3,
h2{
    font-family: var(--ff-source-sans-pro);
}
.btn{
    background-image: var(--gradient-2);
    /* background-color: var(--btn-primary-bg); */
    background-size: 200%;
    color: var(--white);
    padding: 12px 35px;
    font-size: var(--fs-8);
    font-weight: var(--fw-500);
    border-radius: 0 35px;
    transition: var(--transition-2);
}
.padd-15
{
    padding-left: 15px;
    padding-right: 15px;


}
.btn:is(:hover, :focus) {
    background-position:right ;
}
.w-100{
    width: 100%;
}
.banner-animation{
    animation:waveAnim 2s linear infinite alternate;
}
@keyframes waveAnim {
    0% {
        transform: translate(0,0) rotate(0);
    }
    100%{
        transform: translate(2px, 2px) rotate(1deg);
    }
}
.section{
    padding-block: var(--section-padding);
}
.section-title{
    color: var(--st-patricks-blue);
    font-size: var(--fs-3);
    margin-block-end: 60px;
    max-width: max-content;
    margin-inline: auto;
}
.underline{
    position: relative;
}
.underline::before{
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 6px;
    background-image: var(--gradient-2);
    /* background-color: var(--btn-primary-bg); */
    border-radius: 10px;
}
:is(.service-card,.features-card) .title{
    color: var(--st-patricks-blue);
    font-size: var(--fs-4);
    font-weight: var(--fw-700);
}
.service-card .text{
    font-size: var(--fs-8);
}

:is(.service-card,.features-card).text{
    font-size: var(--fs-8);
}

/*==================================================== Header============================================== */
 .header .btn{
    display: none;
} 
.header{
    --color:var(--white);

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-block: 14px;
    z-index: 4;
    transition: var(--transition-1);
}
.header .active{
    --color:var(--st-patricks-blue);
    position:fixed;
    background-color: var(white);
    box-shadow: 0 2px 30px hsla (0,0%,0%,0.1);
}
.header .container{
    display: flex;
    position: fixed;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    
    
    
}
.logo{
    color: var(--color);
    font-family: var(--ff-source-sans-pro);
    font-size: var(--fs-3);
}
.nav-open-btn{
    color: var(--color);
    font-size: 32px;
    padding: 4px;
}
.navbar{
    background-color: var(--white);
    position:fixed;
    top: o;
    left: -280px;
    width: 100%;
    max-width: 200px;
    min-height: 100%;
    padding: 20px;
    visibility: hidden;
    z-index: 2;
    transition: 0.25s var(--cubic-in);
    justify-content: space-between;

    /* display:flex;
    justify-content: space-between; */
    

}
.navbar-item{
     display: flex;
    justify-content: space-between; 
}
.navbar-list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block:10px 30px;

}

.navbar.active{
    transform: translateX(280px);
    visibility: visible;
    transition: 0.5s var(--cubic-out);
}
.navbar-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block:10px 30px;
}
.navbar-top .logo{
    color: var(--st-patricks-blue);
    font-size: 4.2rem;
    font-weight: var(--fw-700);
}
.nav-close-btn{
    color: var(--space-cadet-1);
    font-size: 2.8rem;
    padding: 4px;
}

.navbar-item:not(:last-child){
    border-bottom: 1px solid var(--platinum);

}
.navbar-link{
    color: var(--space-cadet-1);
    font-size: var(--fs-8);
    font-weight: var(--fw-600);
    padding-block: 12px;
    display: flex;
    justify-content: space-between;

}
.overlay{
    position: fixed;
    inset: 0;
    border-color: var(--black-70);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-2);
}
.overlay.active{
    opacity: 1;
    pointer-events: all;
}


/*============================================= Hero=============================================== */
.hero{
    background-image: url('images/hero-bg-bottom.png'),
                      url('images/hero-bg.png'),
                      var(--gradient-1);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: -280px bottom, center,center;
    background-size:auto, cover, auto ;
    padding-block-start: 120px;
    padding-block-end: var(--section-padding);

}
.hero-content{
    margin-block-end: 50px;
}
.hero-subtitle{
    color:var(--chrome-yellow);
    font-family: var(--ff-source-sans-pro);
    font-size: var(--fs-7);
    margin-block-end: 15px;
}
.hero-title{
    color: var(--white);
    font-size: var(--fs-3);
    margin-block-end: 15px;
}
.hero-text{
    color: var(--white);
    font-size: var(--fs-8);
    margin-block-end: 30px;
}

/*======================================================== About ===================================*/
.about-banner{
    margin-bottom: 30px;
}
.about .section-title{
    margin-inline: 0;
}

.about .underline::before{
    left: 0;
    transform: translateX(0);
}

.about-text{
    font-size: var(--fs-8);
    margin-block-end: 20px;
}
.stats-list{
    display: grid;
    gap: 30px;
}
.stats-card{
    text-align: center;
    padding: 15px;
    box-shadow: var(--shadow);
    border-radius: var(--radius-12);
}
.stats-title{
    color: var(--st-patricks-blue);
    font-size: var(--fs-2);
    font-weight: var(--fw-700);
}
.stats.text{
    font-size: var(--fs-8);
}
/*============================================= service section================================= */
.service-list{
    display: grid;
    gap: 30px;
}
.service-card{
    padding: 30px;
    box-shadow: var(--shadow);
    border-radius: var(--radius-12);
    background-color:var(--team-card-bg);
}
 .service-card .card-icon{
    background-image: url(images/service-banner-pattern.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: var(--icon-bg);
    aspect-ratio: 1/1;
    max-width: 165px;
    display: grid;
    place-content: center;
    margin-inline: auto;
    transition: var(--transition-1);

}
.service-card:hover .card-icon ion-icon {
    background-color:var(--primary-color);
}
.service-card .title{
    text-align: center;
    margin-block-end: 15px;
    color: var(--counter-color);
}
.service-card .text{
    text-align: center;
    margin-block-end: 20px;
}
.service-card .card-btn{
    margin-inline: auto;
    padding: 15px;
    border: 1px solid var(--btn-secondary-bg);
    border-radius: 50%;
    color: var(--btn-primary-bg);
    transition: var(--transition-1);

}
.service-card .card-btn:is(:hover, :focus){
    color: var(--btn-primary-bg);
    background-color: var(--btn-secondary-bg);
}

/* ===============================================Features section================================ */
.features-list li:first-child{
    margin-block-end: 30px;
     
}

.features-card{
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.features-card .icon{
    background-image:  var(--gradient-1);
    background-size:200% ;
    color: var(--white);
    min-width: max-content;
    max-width: max-content;
    font-size: 36px;
    padding: 22px;
    border-radius: 50%;
}
.features-card .icon ion-icon{
    --ionicon-stroke-width:20px;


}
.features-card .title{
    margin-block-end: 10px;
}
.features-banner{
    margin-block:40px ;
}

.features-banner img{
    max-width: max-content;
    margin-inline:auto;
}






/* ===============================================project section================================ */


/* ===============================================Testimonial section================================ */
@media screen and(min-width:992px) {
    .testimonials-container{
        width: 750px;
        margin-left: auto !important;
        margin-right:auto !important;
    }
    
}
.testimonial-card{
    background-color: var(--ksu-purple);
    padding: 1.8rem 2rem;
    border-radius: .5rem;
    margin-bottom: 3rem;


}
.testimonials-quote{
    display: inline-flex;
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: 1rem;

}
.testimonial-description{
    margin-bottom: 1rem;
    font-size: .875rem;
}
.testimonial-date{
    font-size: 1rem;
    margin-bottom: 2rem;
}
.testimonial-profile{
    display: flex;
    align-items: center;
    column-gap: 1rem;
}
.testimonial-profile-img{
    width: 60px;
    height: 60px;
    border-radius: 3rem;
}
.testimonial-profile-name{
    font-size: 1.25rem;
    font-weight: 500;
    color: white ;
}
.testimonial-profile-detail{
    font-size: .875rem;
}



/* ===============================================Team section================================ */





/* ===============================================  Blog section================================ */


/* =========================================Contact============================================== */
.contact-title{
    color: var(--skin-color);
    text-align: center;
    font-size:25px ;
    margin-bottom: 20px;
}
.ping{
    text-align: center;
    margin-bottom: 20px;
}
.contact-sub-title{
    color:var(--text-black-900);
    text-align: center;
    font-size: 15px;
    margin-bottom: 60px;
}
.contact .contact-info-item{
    flex: 0 0 25%;
    max-width: 25%;
    text-align: center;
    margin-bottom: 60px;
}

.contact .contact-info-item .icon{
    display: inline-block;
}
.contact .contact-info-item .icon .fa{
    font-size: 25px;
    color: var(--skin-color);

}

.contact .contact-info-item h4{
    font-size: 18px;
    font-weight: 700;
    color: var(--text-black-900);
    text-transform: capitalize;
    margin: 15px 0 5px;
}
.contact .contact-info-item p{
    font-size: 16px;
    line-height: 25px;
    color: var(--text-black-700);
    font-weight: 400;
}
.contact .contact-form{
    flex:0 0 100%;
    max-width: 100%;
}
.contact .contact-form .col-6{
    flex: 0 0 50%;
    max-width: 50%;
}

.contact .contact-form .col-12{
    flex: 0 0 100%;
    max-width: 100%;
}
.contact .contact-form .form-item{
    margin-bottom: 30px;
}

.contact .contact-form .form-item .form-control{
    width: 100%;
    height: 50px;
    border-radius: 25px;
    background: var(--bg-black-100);
    border: 1px solid var(--bg-black-50);
    padding: 10px 25px;
    font-size: 16px;
    color: var(--text-black-700);
    transition: all 0.3s ease;
}

.contact .contact-form .form-item .form-control:focus{
    box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
}
 textarea{
    height: 140px;
    width: 100%;
    border-radius: 25px;
    background: var(--bg-black-100);
    border: 1px solid var(--bg-black-50);
    padding: 10px 25px;
    font-size: 16px;
    color: var(--text-black-700);
    transition: all 0.3s ease;
}
.contact-form .btn{
    height: 50px;
    padding: 0 50px;
    border: none;
}






/* ===============================================footer section================================ */
.footer{
    font-size:var(--fs-8);
}
.footer a{
    color: inherit;
}
.footer-top{
    background-image: url(images/footer-bg.png), var(--gradient-1);
    background-repeat: no-repeat;
    background-size: auto,200%;
    background-position: center, center;
    color: var(--white);
}

.footer-brand{
    margin-block-end: 30px;
}
.footer-brand .logo{
    font-weight: var(--fw-700);
    margin-block-end: 15px;
}
.footer-brand .text{
    font-size: var(--fs-8);
    margin-block-end: 20px;
}
.social-list{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.footer-top .social-link{
    background-color:white;
    color: var(--winter-sky);
    font-size: 18px;
    padding: 8px;
    border-radius: 50%;
}
.footer-top .social-link:is(:hover, :focus){
    border-image: var(--gradient-2);
    color: var(--white);
}
.footer-list:not(:last-child){
    margin-block-end: 25px;
}
.footer-list-title{
    font-family:var(--ff-source-sans-pro);
    font-size: var(--fs-5);
    font-weight: var(--fw-700);
    margin-block-end: 15px;
}
.footer-link{
    padding-block: 5px;
}
:is(.footer-link, .footer-item-link):not(address):is(:hover, :focus){
    text-decoration: underline;
}
.footer-item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.footer-item-icon{
    background-image: var(--gradient-2);
    padding: 13px;
    border-radius: 50%;
}
.footer-bottom{
    background-color:var(--space-cadet-2);
    padding: 20px;
    text-align: center;
    color: var(--white);
}
.copyright-link:is(:hover, :focus){
    text-decoration: none;

}


/* ==================go to top======================= */
.go-top{
    position: fixed;
    bottom:0;
    right: 15px;
    background-color:var(--winter-sky);
    color: var(--white);
    font-size: 2rem;
    padding:14px ;
    border-radius: var(--radius-4);
    box-shadow: -3px 3px 15px var(--winter-sky_50);
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    transition: var(--transition-1);
}
.go-top.active{
    visibility: visible;
    opacity: 1;
    transform: translateY(-15px);



}


/*========================================== Media query========================================= */
/* =====larger than 550px=============== */
@media (min-width:550px){
    /*==== reused style==== */

    .container{
        max-width: 550px;
        margin-inline: auto;
    }

    .section-title{
        --fs-3:3.6rem;
    }

    /*=== Header======= */
    .header .btn{
        display: flex;
        align-items: center;
        gap: 5px;
        margin-inline-start: auto;
    }

    /* =======about=========== */
    .stats-list{
        grid-template-columns: repeat(3,1fr);
    }

    /* ========blog======= */
    .blog-card{
        display: grid;
        grid-template-columns: 0.75fr 1fr;
        gap: 20px;
        padding: 30px;

    }
    .blog-card .banner{
        margin-block-end: 0;
    }
    .blog-card .banner{
        height: 100%;
    }

    /* ======footer=========== */
    .footer-brand,
    .footer-list:not(:last-child){
        margin-block-end: 0;
    }
    .footer-top .container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 50px;
    }
   
}


/*====== responsive for larger than 768px====== */
@media (min-width:768px) {
    /*===== reused style==== */
    .container{
        max-width: 720px;
    }

    /*========== her0====== */
    .hero{
        min-height: 600px;
        display: grid;
        place-items:center;
    }

    .hero-content{
        margin-block-end: 0;
    }

    .hero .container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 30px;

    }
}
/*====== responsive for larger than 992px====== */
@media (min-width:992px) {

    /*==== custom property=== */
    :root{
        /*== typography====== */

        --fs-1:5.4rem;
    }

    /*======= reused style==== */
    .container{max-width: 950px;}

    /*======= header===== */
    .header{
        padding-block: 20px;
    }
    .overlay,
    .nav-open-btn,
    .navbar-top{
        display: none;
    }
    .navbar,
    .navbar.active{
        all: unset;
        margin-inline-start: auto;
    }

    .header .btn{
        margin-inline-start: 0;
    }
    .nav-bar-list{
        display: flex;
        gap: 25px;
    }
    .navbar-item:not(:last-child){
      border-bottom: none;  
    }
    .navbar-link{
        color: var(--color);
    }
    
    /*======= her0====== */
    .hero{
        min-height: 700px;
    }

    /* ======about===== */
    .about .container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    /* =====service===== */
    .service-list{
        grid-template-columns: repeat(3,1fr);
    }

    /* ========features========= */
    .feature-list{
        grid-template-columns: repeat(3,1fr);
    }
    .features-list{
        grid-template-columns: 1fr;

    }
    .features .container{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 30px;
    }

    .features .section-title{
        grid-column:1/4 ;
    }
    .features-banner{
        margin-block:0 ;
        display: grid;
        place-items: center;
    }

    /* ===footer==== */
    .footer-top .container{
        grid-template-columns: repeat(4,1fr);

    }

    .footer-brand{
        grid-column: 1/5;
    }
    .footer-brand .text{
        max-width: 45ch;
    }



}
/*====== responsive for larger than 1200px====== */


@media (min-width:1200px) {
    /* ====reused===== */
    .container{
        max-width: 1200px;
    }
    .section-title{
        --fs-3:4.6rem;
    }

    /* =====hero===== */
    .her0{
        min-height: 800px;

        
        
    }
    /*=== blog==== */
    .blog-list{
        grid-template-columns: 1fr,1fr;
    }
    .blog-card{
        height: 100%;
    }

    .blog-card .content{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* ====footer==== */
    .footer-top .container{
        grid-template-columns: 1fr 0.5fr 0.7fr 0.5fr 1fr;
    }
    .footer-brand{
        grid-column: auto;
    }
    
}