@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap");

/* HOW TO MAKE A COMMENT IN VSCODE---CTRL-> / */
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
/* css variables */
/* gloabal styles starts here */
:root {
--primary: #ddd;
--dark: #333;
--darkorange: darkorange; /*main color*/
--white: #fff;
--darkgodenrod: darkgoldenrod;
--fadedwhite: #bbbbbb;
--blue: #047aed;
--backgroundd: #2c3e50;
--blackish: #131313;
--pureblack: #000000;
--gradient1: linear-gradient(to right, rgba(8, 97, 138, 0.267), #575154);
--backgroundgrad1: -webkit-linear-gradient(to right, #fcb045, #790824d0, #0d72c5);
--backgroundgrad2: linear-gradient(to right, #fcb045, #e61616, #e9c70a);
--colorgradient: linear-gradient(to top, #ff0844 0%, #ee410c 100%);
--colorgradient3: linear-gradient(to top, #ff087b 0%, #ed1a52 100%)
--grdnt: linear-gradient(to right, rgba(153, 49, 153, 0.267), #a0477b);
--formshadow: 0 3px 10px rgba(0, 0, 0, 0.7); /*0 horizontal offset, 3px vertical offset, 10px blur,color :rgba() */
--gridshadow: 0 1px 5px rgba(104, 104, 104, 0.8);
--box-shadow1: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.9);
--box-shadow2: 0 4px 8px 0 rgba(167, 78, 140, 0.9),
    0 6px 20px 0 rgba(0, 0, 0, 0.9);

}

 #container{
    margin: auto;
 }

 .row{
    margin: 15px auto;
}
 .grid-cont{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(400px, 1fr));
    gap: 20px;
 }
      /* -------coming sooon section */
.comingsoon{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
    font-weight: 500;
    font-size: 30px;
    /* margin: auto; */
}
 .accordion{
    width: 100%;
    /* max-width: 570px; */
    background-color: white;
    margin: 0 15px;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
 }
 .accordion h4{
    font-size: 25px;
    text-transform: capitalize;
    color: slateblue;
 }
 .accordion .accordion-content{
    border-radius: 5px;
    margin: 10px 0;
    padding: 10px auto;
    background-color: hsl(212, 100%, 97%);
    border: 1px solid hsl(251, 100%, 85%);
    overflow: hidden;
 }
 .accordion-content .accordion-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    padding: 0 15px;
    min-height: 50px;
    transition: all 0.2s linear;
    /* background-color: orangered; */
    text-align: left;
 }

 .activee, .accordion-header:hover {
    /* background-color: #f0faff; */
    background-color: slateblue;
    color: white;
 }
 .accordion-header:after {
    content: '\002B';
    color: #333;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    font-size: 25px;
    }
    .activee:after {
    content: "\2212";
    }
    .panel {
    font-size: 16px;
    font-weight: 400;
    color: #333;
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    /* min-height: 100px; */
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    /* transition: all 0.2s linear; */
    }

 .accordion-content:nth-child(odd){
    background-color: #f0faff;
    border-color: #cceeff;
 }

 /* responsiveness */
 @media screen and (max-width: 800px) and  (min-width: 599px){
 .comingsoon{
    font-size: 22px;
    font-weight: 600;
}
.accordion{
    width: 100%;
    /* max-width: 500px; */
    background-color: white;
    margin: auto;
    min-width: 500px;
    padding: 15px;
    overflow-x: hidden;
 }
}
@media screen and (max-width: 600px) and (min-width: 400px) {

   .accordion{
       margin-top: auto;
       margin-bottom: auto;
       margin-left: -20px;
       margin-right: -70px;
       max-width: 330px;
       /* min-width: 350px; */
    }
   }
   
@media screen and (max-width: 400px) and (min-width: 300px)  {
 .comingsoon{
    font-size: 20px;
    font-weight: 600;
}
.accordion{
    margin-top: auto;
    margin-bottom: auto;
    margin-left: -30px;
    margin-right: -70px;
    /* margin-left: -30px;
    margin-right: -70px; */
    max-width: 300px;
    /* min-width: 200px; */
 }
 #container{
    margin: auto;
 }
}

 /* ---------WHATSUP ICON ANIMATION */
 .whatsup{
   color: rgb(18, 236, 109);
   background: transparent;
   padding: 12px;
   text-align: center;
   border-radius: 50%; 
   position: fixed;
   left: 40px;
   bottom: 5px;
   cursor: pointer;
   transition: opacity 0.5s;

   animation: scaleup 4s ease-in-out infinite;
}
    @keyframes scaleup {
   0%{
       transform: scale(1.3);
   }
   50%{
       transform: scale(1);
   }
   100%{
       transform: scale(1.3);
   }
}
.proj1{
   font-size: 20px;
   text-align: right;
}
.proj2{
   font-size: 20px;
   margin-top: 60px;
   margin-bottom: -40px;
   /* margin: auto; */
   text-align: center;
}