@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    min-height: 100vh;
}


.mainimg{
    clip-path: url(#image);
    width: 100%;
    
}

.hero{
    position: absolute;
    top: 0;
    bottom: 25%;
    transform:rotate(180deg);
    background-color:#010101;
    height:410px;
    flex-grow: 1;
    width: 100%;
    

}

.hero .lady{
    position: absolute;
    top: 0;
    right: -8vw;
    transform: rotate(180deg);
    width: 49.89vw;
    height:min( 95.65vh, 500px); 
    
}

.hero .writeup{
    position: absolute;
    top: 50px;
    margin-left:clamp(10vw, 60px, 20vw);
    transform: rotate(180deg);
    color: aliceblue;
    height:269px;
    font-family: "Poppins", sans-serif;
   /*  background-color: #18e856; */
    width: 60vw;
    font-size: clamp(2vw, 20px, 5vw);
    line-height: min(6vw, 40px);
    height: 280px;
    backdrop-filter: blur(15px);
    background: rgba(255, 255, 255, 0.2);
}

.hero .shades-of-beauty{
    color: #000000 ;
    font-weight: bold;
}
@supports (background-clip: text) {
    .hero .shades-of-beauty {
      background-image:radial-gradient(circle at bottom left, #e87918, #030a01 ) ;
      background-clip: text;
      color:transparent ;
    }
  }

.hero .knowledge{
    color: #000000 ;
    font-weight: bold;  
}

@supports (background-clip: text) {
    .hero .knowledge{
        background-image:repeating-radial-gradient(circle at bottom left,#0b0b0b 60%, #0A62C9);
        background-clip: text;
        color:transparent ;
        font-weight: bold;
    }
  }


.info{
    height:1200px;
    width: 100%;
    /* background-color: #e09719; */
    margin-top: 420px;
   
    
}
.info .pitch{
    font-family:serif;
    color: #010101;
    line-height: 30px;
    font-size: clamp(3vw, 22px,8vw);;
    font-weight: 200;
}
h1{
    font-size: 22px;
    padding: 50px;
}
.info .offerings .writeup2{
    color: #9E19C0;
    text-align: center;
    font-size: 28px;
    margin-top: 50px; 
    margin-right: 16vw;
    margin-left: 10VW;
}


.info .offerings .course{
    display: grid;
     grid-template-columns: 40vw 40vw;
     column-gap: 5vw;
     row-gap: calc(5vw + 0.6rem);
 margin-top: 60px;
     width: 85vw;
     height: 80vw; 
     
       
 }
 .info .offerings .box{
    width: 100%;
    height: fit-content;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 60px;
    align-items: center;
    margin-bottom: 60px;
   
 }
.info .offerings .course .ai{
    box-shadow: 10px 11px 15px #333333;
    border: orange 2px solid;
    color: aliceblue;
    background-color: #010101;
    border-radius: 25px;
    z-index: -0.5;
    position: relative;
}

.info .offerings .course .ai::before{
    content: "";
    width:min(4vw, 30px);
    height: 88vw;
    background-color: rgb(90, 1, 90);
    position: absolute;
    top: -35px;
     left: 18vw; 
    border-radius: 15px;
    z-index:-1 ;

}

.info .offerings .course .cyber-security{
    box-shadow: 10px 11px 15px #333333;
    border: orange 2px solid;
    color: aliceblue;
    background-color: #010101;
    border-radius: 25px;
    position: relative;
}

.info .offerings .course .cyber-security::before{
    content: "";
    width:min(4vw, 30px);
    height: 88vw;
    background-color: rgb(90, 1, 90);
    position: absolute;
    top: -35px;
    left:18vw;
    border-radius: 15px;
    z-index:-1 ;

}

.info .offerings .course .cloud-computing{
    box-shadow: 10px 11px 15px #333333;
    border: orange 2px solid;
    color: aliceblue;
    background-color: #010101;
    border-radius: 25px;
    position: relative;
}
.info .offerings .course .data-science{
    box-shadow: 10px 11px 15px #333333;
    border: orange 2px solid; 
    color: aliceblue;
    background-color: #010101;
    border-radius: 25px;
    position: relative;
}

.info .offerings .course .ai .aiwrite{
    margin-left: 0px;
    padding-left: 20px;
   
}

.info .offerings .course .ai img{
    position: absolute;
   border-radius: 50%;
}

.info .offerings .course .cyber-security-write{
    margin-top: 20px;
    margin-left: 20px;
    line-height: 20px;
   /*  width: 250px; */
   /*  height: 150px; */
}

.info .offerings .course .cyber-security img{
    position: relative;
    top: -169px;
    right: -290px;
    border-radius: 0;
}

.info .offerings .course .cloud-computing img{
    position: relative;
    top: -154px;
    right: -287px;
    border-radius: 25px;
}

.info .offerings .course .cloud-computing-write{
    margin-top: -1px;
    margin-left: 10px;
    line-height: 20px;
    /* width: 400px; */
   /*  height: 155px; */
}

.info .offerings .course .data-science img{
    position: relative;
    top: -154px;
    right: -246px;
    border-radius: 25px;
}

.info .offerings .course .data-science-write{
    margin-top: 0px;
    margin-left: 12px;
    line-height: 20px;
}

.info .offerings .course .digital-marketing{
    box-shadow: 10px 11px 15px #333333;
    border: orange 2px solid;
    color: aliceblue;
    background-color: #010101;
    border-radius: 25px;
    position: relative;
}

.info .offerings .course .digital-marketing img{
    position: relative;
    top: -154px;
    right: -258px;
    border-radius: 25px;
}

.info .offerings .course .digital-marketing-write{
    margin-left: 10px;
    line-height: 20px;
}
.info .offerings .course .web-development{
    box-shadow: 10px 11px 15px #333333;
    border: orange 2px solid;
    color: aliceblue;
    background-color: #010101;
    border-radius: 25px;
    position: relative;
}

.info .offerings .course .web-development img{
    position: relative;
   display: flex;
   flex-direction: row;
   justify-content: center;
    border-radius: 25px;
}

.info .offerings .course .web-development-write{
    margin-left: 12px;
    line-height: 16px;
}

.info .offerings .course :is(.digital-marketing, .web-development){
    margin-bottom: 80px;
}
.info .offerings .course :is(.ai .title, .data-science .title, .cloud-computing .title, .digital-marketing .title, .web-development .title, .cyber-security .title){
   color: #086de8fa;
   position: absolute;
   top: -35px;
   font-family: "Poppins", sans-serif;
   font-weight: bold;
   font-size: clamp(calc(1vw + 0.5rem), 100px, calc(3vw - 1rem));
}
.info .offerings .course :is(.ai, .cloud-computing, .digital-marketing, .cyber-security, .data-science, .web-development){
  height: 20vw;
  margin-bottom: 10px;

}


.info .offerings .course :is(.ai img, .cloud-computing img, .digital-marketing img, .cyber-security img, .data-science img, .web-development img){
   position: absolute;
   display: inline;
   width: 30vw;
   border-radius: 0;
    right: 0;
   top: 0;
   width:20vw;
   height: 19.5vw;
   border-radius: 25px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}


.info .offerings .course :is(.aiwrite, .cloud-computing-write, .digital-marketing-write, .cyber-security-write, .data-science-write, .web-development-write){
   margin-top: 0;
   padding-bottom: 5px;
   font-size: 1.5vw;
   line-height: clamp(1.8vw, 26px, 2.3vw);
   padding-right: 0;
   width: 18vw;
   height: 19vw;
   overflow: scroll;
   -webkit-overflow-scrolling: touch; 
scrollbar-width: none;
} 


.info .call-to-action{  
    color:  #ffff;
    font-size: /* 3vw */  clamp(1.7vw, 20px, calc(2.1vw - 1rem)) ;
    line-height: /* 18px */  28px ;
    width:50vw; /* 50vw */
    height: /* 120vw  */ 440px ;
    background-color: #060606;
    box-shadow: 10px 11px 15px #191717;
    border-radius: 30px;
   padding: 10px;
    margin-top: 20px;
    border:  2px solid #c602c6;
}

.paynow{
    margin-left: 32px;
   width: clamp(12vw, 90px, 9.4vw );
    height: min(40px, 8vw);
    border-radius: 15px;
    background-image: linear-gradient(to right, #192E5B,  #00B2A9);
    border: #3e3d3d 2px solid;
    animation-name: flow;
    animation-duration:  5s;
    animation-delay: 0.5ms;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-timing-function:ease;
    color: aliceblue;
    font-weight: bold;
    font-size: 1.5vw;
}
.lastSection{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
    width: 100%;
    height:fit-content ;
  
}
 

 @keyframes flow {
    0%{
        background-image: linear-gradient(to right,   #192E5B, #00B2A9 0%,    #192E5B);
    }
    10%{
        background-image: linear-gradient(to right, #192E5B, #00B2A9 10%, #192E5B);
    }
    20%{
        background-image: linear-gradient(to right, #192E5B, #00B2A9 20%, #192E5B);
    }
    30%{
        background-image:linear-gradient(to right, #192E5B, #00B2A9 30% , #192E5B);
    }
40%{
    background-image: linear-gradient(to right, #192E5B, #00B2A9 40%, #192E5B);
    } 

    50%{
        background-image: linear-gradient(to right, #192E5B, #00B2A9 50%, #192E5B);
    }
    60%{
        background-image: linear-gradient(to right, #192E5B, #00B2A9 60%, #192E5B);
    }
    70%{
        background-image: linear-gradient(to right, #192E5B, #00B2A9 70%, #192E5B);
    }
    80%{
        background-image: linear-gradient(to right, #192E5B, #00B2A9 80%, #192E5B);
    }
    90%{
        background-image: linear-gradient(to right, #192E5B, #00B2A9 90%, #192E5B);
    }
    100%{
        background-image: linear-gradient(to right, #192E5B, #00B2A9 100%, #192E5B);
    }
    
}

footer{
  
    width:100%;
     height:100px; 
    background-color: #050606;
    font-size: 100px;
    text-align: center;
    padding-bottom: 10%;
   margin-top:50px ;
}


.footer{
   color: #f8f1f1;
    width: min(80vw, 400px) ;
    background-repeat: no-repeat;
    margin: auto;
    /* font-size:clamp(5vh, 80px, 6vw) ; */
    font-size: clamp(3vh, 60px, 4vw);

}

@supports (background-clip: text) {
    .footer{
        background-image:url(./image/lucas-k-wQLAGv4_OYs-unsplash.jpg) ;
        background-clip: text;
        background-size: cover; 
        color: transparent;
    }
  }

footer .contact{
    font-size: 16px;
    color: aliceblue;
    
}

.contact img{
     position: relative;
    left: 0px;
    top: 8px;
} 


 @media  screen and (max-width:580px){
    .info .offerings .box{
        width: 100%;
        height:  fit-content;
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .info .offerings .course {
        grid-template-columns: 60vw;
        place-content: center;
    margin-top: 20px;
        width: 85vw;
        height: fit-content;
    }

    .info .offerings .course :is(.ai .title, .data-science .title, .cloud-computing .title, .digital-marketing .title, .web-development .title, .cyber-security .title){
        top: -30px;
     }
     .info .offerings .course :is(.ai, .cloud-computing, .digital-marketing, .cyber-security, .data-science, .web-development){
       height:max(40vw, 140px);
       
     
     }
     
     
     .info .offerings .course :is(.ai img, .cloud-computing img, .digital-marketing img, .cyber-security img, .data-science img, .web-development img){
        width: 30vw;
        border-radius: 25px;
        width:30vw;
        height: max(39vw, 135px);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
     }
     
     
     .info .offerings .course :is(.aiwrite, .cloud-computing-write, .digital-marketing-write, .cyber-security-write, .data-science-write, .web-development-write){
        margin-top: 10px;
        font-size: 2.5vw;
        line-height: clamp(3vw, 26px, 2.3vw);
        width: 27vw;
        height:max(35vw, 120px);
     padding-left: 20px;
     margin-left: 0;
     } 
     
     .info .offerings .course .ai::before{
        height: min(310vw, 1470px);
     }
     .lastSection{
        margin-top: 50px;
     }
.info .call-to-action{
    font-size:  3vw ;
     line-height: 18px;
     width:clamp(50vw, 500px, 70vw);
     height: clamp(70vw, 390px, 120vw);
     margin-bottom: 30px;
}


footer{
  /*   margin-top:10em; */
    flex-shrink: 0;
    background-color: #000000;
    color: white;
    text-align: center;
    padding: 20px;
}
}