portfolio.scss

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .main-grid1-section-2 {
    display: flex;
    height: 485px;
    width: 1440px;
    padding: 0;
    margin: auto;
    justify-content: center;
    align-items: center;
    gap: 30px;
    font-size: 24px;
    font-weight: 400;
    font-family: DM Serif Display;
    line-height: 32px;
  
    .main-grid1 h5 {
      color: var(--Text_Black, #000);
      font-family: DM Sans;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 4.8px;
      text-transform: uppercase;
    }
  
    .main-grid1 h4 {
      color: var(--Text_Black, #000);
      font-family: DM Serif Display;
      font-size: 24px;
      font-style: normal;
      font-weight: 400;
      line-height: 32px;
      padding-top: 33px;
    }
  
    .design_team {
      display: flex;
      gap: 14px;
      padding-top: 40px;
    }
  
    .design_team .insta {
      width: 48px;
      height: 48px;
      border: 1px solid rgb(218, 207, 207);
      margin: 0px 10px 10px 0px;
      background-color: white;
      border-radius: 5px;
    }
  
    .design_team p {
      color: var(--text-black-50, rgba(62, 60, 60, 0.5));
      font-family: DM Sans;
      font-size: 26px;
      font-style: normal;
      font-weight: 400;
      width: 114px;
      height: 24px;
      padding-top: 10px;
    }
    
  }
  .main-grid2-section-2 {
    background-color: #ffdd78;
    color: black;
    height: 352px;
    width: 1440px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: center;
    gap: 80px;
    margin: auto;
    padding:79px 135px 79px 135px;
  
    #main1-grid-section-2 {
      display: grid;
      gap: 30px;
      justify-content: center;
  
      h5 {
        font-family: DM Sans;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 5px;
      }
  
      h2 {
        font-weight: 400;
        font-family: DM Serif Display;
        font-size: 56px;
      }
    }
  
    #main2-grid-section-2 {
      display: flex;
      gap: 30px;
      align-items: center;
  
      input {
        height: 48px;
        width: 370px;
        border: none;
        outline: none;
  
        &::placeholder {
          font-size: 20px;
          padding-left: 10px;
        }
      }
  
      button {
        background-color: #434ccc;
        color: white;
        width: 170px;
        height: 48px;
        border-radius: 10px;
        border: none;
        text-align: center;
        font-size: 20px;
        cursor: pointer;
  
        &:hover {
          background-color: #0f1de5;
        }
      }
    }
  }
  
  @media screen and (max-width:600px) {
    .main-grid1-section-2 {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      height: max-content;
      width: 90%;
      padding-top: 62px;
      padding-bottom: 62px;
      justify-content: center;
      align-items: center;
      .ph1 ,.ph2 ,.ph3 {
        img{
            width:346px ;
        }
    }

    }
  
    .main-grid2-section-2 {
      width: 100%;
      height:400px;
      gap:50px;
      grid-template-columns: repeat(1, 1fr);
      padding: 50px 0px 50px 0px;
      #main1-grid-section-2 {
        width: 80%;
        margin-left:14px;
        margin-right: 15px;
  
        h2 {
          font-size: 35px;
        }
      }
  
      #main2-grid-section-2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        width: 90%;
        margin-left:14px;
  
        input {
          height: 30px;
          width: 100%;
  
          &::placeholder {
            font-size: 15px;
            padding-left: 10px;
          }
        }
  
        button {
          height: 30px;
          border-radius: 5px;
          font-size: 15px;
        }
      }
    }
  }

$color: var(--Text_White, #FFF);
$font-family: DM Serif Display;
$font-style: normal;
$font-weight: 400;

@mixin header {
   width: 1440px;
    flex-shrink: 0;
    display: flex;
    background: #434CCC;
}

.header1 {
    @include header;
    height: 80px;
    box-sizing: border-box;
    padding-left: 135px;
    padding-right: 135px;
    justify-content: space-between;
    margin: auto;

    .navbar {
        display: flex;
        margin-top: 28px;
        margin-left: 534px;
        margin-right: 40px;
        width: 324px;
        height: 24px;
        justify-content: space-between;
    }

    a {
        color: var(--Text_White, #FFF);
        text-align: right;
        text-decoration: none;

        /* Text */
        font-family: DM Sans;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        /* 150% */
    }
    a:hover{
        transform:scale(1.2);
        cursor: pointer;
    }
    h3 {
        margin-top: 16px;
        color: $color;
        /* H3 */
        font-family: $font-family;
        font-size: 40px;
        font-style: $font-style;
        font-weight: $font-weight;
        line-height: 48px;
        /* 120% */
    }

    button {
        margin-top: 16px;
        width: 170px;
        height: 48px;
        flex-shrink: 0;
        border-color: rgba(255, 255, 255, 0.3);
        background-color: transparent;
        border-radius: 5px;
        // text
        color: #FFF;
        text-align: center;
        font-family: DM Sans;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
    }
    button:hover{
        transform:scale(1.1);
        cursor: pointer;
    }
    svg{
        display: none;
    }
}

.header2 {
    @include header;
    height: 224px;
    flex-direction: column;
    align-items: center;
    margin: auto;
    box-sizing: border-box;
    h1 {
        margin-top: 47px;
        color: var(--Text_White, #FFF);
        text-align: center;
        /* H1 */
        font-family: $font-family;
        font-size: 72px;
        font-style: $font-style;
        font-weight: $font-weight;
        line-height: 80px;
        /* 111.111% */
    }

    p {
        margin-top: 10px;
        color: var(--Text_White, #FFF);
        text-align: center;

        /* Text_Big */
        font-family: DM Sans;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 32px;
        /* 160% */
    }
}

@media all and (max-width:600px) {
    .header1 {
        padding: 0;
        max-width: 375px;

        .navbar,
        button {
            display: none;
        }

        h3 {
            color: #FFF;
            font-size: 24px;
            line-height: 32px;
            margin-left: 14px;
        }
        svg{
            display: block;
            margin-top: 24px;
            margin-right:26px;
        }

    }

    .header2 {
        padding: 0;
        max-width: 375px;

        h1{
            font-size: 56px;
            line-height: 64px;
        }

        p{
            font-size: 20px;
            line-height: 32px;
        }
    }
}

// for removing the default stylings
*{
    margin: 0;
    padding: 0;
}



.div{
background-color: red;
color: blue;
}


// second section vishnuraj scss start========================================================================================================

@mixin smallgrids_p($wd,$hei,$fs,$fw,$col){
    
    width: $wd;
    height: $hei;
    font-size: $fs;
    font-weight: $fw;
    color: $col;
    padding-top: 12%;
}
@mixin smallgrid_h1($wd,$hei,$fs,$lh,$col){
    width: $wd;
    height: $hei;
    font-size: $fs;
    line-height: $lh;      
    color:$col ;
    margin-top: 25px;
    margin-bottom: 28px;
}
@mixin smallgrid_b($col,$bgc,$bor,$br,$fs,$wd,$hei){
    color: $col;
    background-color: $bgc;
    border:$bor;
    
    border-radius: $br;
    font-size: $fs;
    width: $wd;
    height: $hei;
}
.second-section-main{
    width: 1170px;
    height: auto;
    margin: auto;
    // background-color: rgb(16, 196, 82);
    // padding: 0 9.375%;
    .second-section-main1{
        width: 100%;
        height: 100px;
        
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: sans-serif;
        .second-section-navbar{
            display: flex;
            width:520px ;
            
            align-items: center;
            justify-content: space-evenly;
            #navbar-heading{
                width: 92px;
                
                font-size: 16px;
                font-weight: 700;
            }
            #navbar-heading:hover{
                scale: 1.1;
            }
            .navbat-cont{
                color: #7a7b7e;
                font-size: 16px;
                font-size: 400;
                
            }
            .navbar-cont:hover{
                color: #7a7b7e;
                scale: 1.05;
                cursor:pointer;
            }
        }
        
    }
    .second-section-main2{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: auto;
        gap: 30px;
        .section-section-grid1{
            grid-area: 1/1/2/3;
            height: 512px;
            
            background-image: url("images/img 1.png");
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 5px;
            background-color: #f1b505;
            padding-left: 10%;
            
            p{
                
                width: 78px;
                height: 24px;
                font-size: 16px;
                font-weight: 400;
                color: #f8da82;
                padding-top: 12%;
            }
            h1{
                
                width: 370px;
                height: 128px;
                font-size: 56px;
                line-height: 64px;      
                color:#ffffff ;
                margin-top: 25px;
                margin-bottom: 28px;
            }
            button{
                color: white;
                background-color: #f1b505;
                border: 1px solid #f8da82;
                border-radius: 8px;
                width: 170px;
                height: 48px;
            }
            button:hover{
                background-color: #fdbf04;
                font-weight: 600;
                scale: 1.1;
                font-size: 1rem;
                cursor: pointer;
                
            }
            
        }
        .section-section-grid1:hover{
            scale: 1.02;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        }
        // small divs
        .section-section-grid2{
            height: 512px;
            
            background-image: url("images/img 2.png");
            background-position: center;
            background-color: #e94a47;
            padding-left: 10%;
            background-size: cover;
            border-radius: 5px;
            background-repeat: no-repeat;
            p{
                @include smallgrids_p(67px,24px,16px,400,#f0807e) ;
                
            }
            h1{
                @include smallgrid_h1(161px,96px,24px,32px,white) ;
                
            }
            button{
                @include smallgrid_b(white,#e94a47,1px solid #f0807e,8px,20px,48px,48px);
                
            }
            button:hover{
                scale: 1.1;
                background-color:#d42c29 ;
                font-size: 2rem;
                cursor: pointer;
                transform: rotate(90deg);
                transition: transform 1s;
            }
        }
        .section-section-grid2:hover{
            scale: 1.02;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        }
        .section-section-grid3{
            height: 512px;
            
            background-image: url("images/img 3.png");
            // background-position-x: right;
            padding-left: 10%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background-color: #428dfc;
            border-radius: 5px;
            p{
                @include smallgrids_p(71px,24px,16px,400,#a0c6fe) ;
                
            }
            h1{
                @include smallgrid_h1(161px,96px,24px,32px,#ffffff ) ;
                
            }
            button{
                @include smallgrid_b(white,#428dfc,1px solid #a0c6fe,8px,20px,48px,48px);
                
            }
            button:hover{
                scale: 1.1;
                background-color:#347ce8 ;
                font-size: 2rem;
                cursor: pointer;
                transform: rotate(90deg);
                transition: transform 1s;
            }
        }
        .section-section-grid3:hover{
            scale: 1.02;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            
        }
        .section-section-grid4{
            height: 512px;
            border-radius: 5px;
            background-image: url("images/img 4.png");
            // background-position-x: right;
            background-repeat: no-repeat;
            background-position: center;
            background-color: #f1b505;
            padding-left: 10%;
            background-size: cover;
            p{
                @include smallgrids_p(60px,24px,16px,400,#f8da82) ;
                
            }
            h1{
                @include smallgrid_h1(111px,96px,24px,32px,#ffffff ) ;
                
            }
            button{
                @include smallgrid_b(white,#f1b505,1px solid #f8da82,8px,20px,48px,48px);
                
            }
            button:hover{
                scale: 1.1;
                background-color:#ffbf00 ;
                font-size: 2rem;
                cursor: pointer;
                transform: rotate(90deg);
                transition: transform 1s;
            }
        }
        .section-section-grid4:hover{
            scale: 1.02;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            
        }
        .section-section-grid5{
            height: 512px;
            border-radius: 5px;
            background-image: url("images/img 5.png");
            // background-position-x: right;
            background-repeat: no-repeat;
            background-position: center;
            background-color: #434ccc;
            padding-left: 10%;
            background-size: cover;
            p{
                @include smallgrids_p(79px,24px,16px,400,#a1a6e6) ;
                
            }
            h1{
                @include smallgrid_h1(129px,96px,24px,32px,#ffffff ) ;
                
            }
            button{
                @include smallgrid_b(white,#434ccc,1px solid #a1a6e6,8px,20px,48px,48px);
                
            }
            button:hover{
                scale: 1.1;
                background-color:#343fd5 ;
                font-size: 2rem;
                cursor: pointer;
                transform: rotate(90deg);
                transition: transform 1s;
            }
        }
        .section-section-grid5:hover{
            scale: 1.02;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        }

    }
    .second-section-main3{
        width: 40%;
        height: 100px;
        margin: auto;
        
        display: flex;
        align-items: center;
        justify-content: space-between;
        button{
            width:48px ;
            height: 48px;
            border: 1px solid #bcc0ed;
            border-radius: 5px;
            color: #434ccc;
            font-size:16px ;
            font-weight: 700;
            

            
            
        }
        button:hover{
            scale: 1.1;
            cursor: pointer;
        }
        
    }
}
@media screen and (max-width:600px){
    .second-section-main{
        width: 90%;
        #navbar-heading{
            width: 92px !important;
        }
        // temporarily changed
        margin-left:0px;
        // till here
    }

    
    .second-section-main2{
        display: grid;
        flex-direction: column;
        grid-template-columns: repeat(1,1fr) !important;
        
        // gap: 30px;
        .section-section-grid1{
            grid-area: 1/span 1 !important;
            height: 512px;
        }

    }
    .second-section-main3{
        width: 80% !important;
        
        text-align: center;
        
    }


}



// second section vishnuraj scss end=========================================================================================================

// footer by Deepak
*{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
}
h4,p,h5{
    margin: 0;
    padding: 0;
}
 
footer{
    width: 1440px;
    height: 319px;
    background-color: rgb(245,246,252);
    padding: 0px 135px ;
    margin: auto;
    
    &>.footer-container {
        padding-top: 79px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;

        &>div{
            flex-grow: 1;
        }
    }
    li:hover{
        color: #000;
        transition: 0.3s;
    }
}

#footer-top-logo{
    flex-basis: 33.32%;
    display: flex;
    flex-direction: column;

    h4{
        margin-top: -7px;
        margin-bottom: 23px;
        color: #000;
        font-family: "DM Serif Display";
        font-size: 24px;
        font-weight: bolder;
        line-height: 32px; 

        &+ div{
            width: 270px;
            height: 79px;
            flex-shrink: 0;
            margin-bottom: 16px;
            font-family: "DM Sans";
            color: rgba(0, 0, 0, 0.5);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;   
        }
    }
    
    #social{
        display: flex;
        flex-shrink: 0;
        gap:13px;
        &>img:nth-child(1){
            width: 9px;
            height: 18px;
            flex-shrink: 0;
            margin-right: 13px;
        }
        &>img:nth-child(2){
            width: 18px;
            height: 15px;
            flex-shrink: 0;
            margin-right: 10px;
        }
        &>img:nth-child(3){
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }
    }
    img:hover{
        color: #000;
    }
}

#causae{
    flex-basis: 16.66%;
}

#aperiri{
    flex-basis: 16.66%;
}
.foot-h4{
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; 
    margin-bottom: 24px;
}

.foot-ul{
    padding: 0;
    margin: 0;

    &>li{
        list-style: none;
        margin-bottom: 8px;
        color: rgba(0, 0, 0, 0.50);
        font-family: "DM Sans";
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }
}
#latestPosts{
    flex-basis: 33.32%;
    display: flex;
    flex-direction: column;
    gap:39px;
}
.footer-post{
    display: flex;
    gap: 30px;   
}

.post-description{
    div{
        color: rgba(0, 0, 0, 0.50);
        font-family: "DM Sans", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; 
    }
    p{
        color: #000;
        font-family: "DM Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; 
    }
}

.footer-img{
    width: 71px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 6px;
}

#footer-line{
    height:81px;
    width: 1440px;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    background-color: rgb(245,246,252);
    padding: 0 135px;
    margin: auto;
    
    &>.footer-line-container{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-top: 27px ;
        justify-content: space-between;

        .p1 , .p2{
            color: rgba(0, 0, 0, 0.50);
            font-family: "DM Sans";
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
        }
    } 
}

@media all and (min-width:660px) and (max-width:800px) {
    footer-top-logo{
        h4{
            &+ div{
                width: 480px;
            }
        }
    }
    footer {
      max-width: 100%;
      height: 500px;
      
    }
    #latestPosts {
      margin-top: 32px;
    }
    #footer-line{
        max-width: 100%;
    }
  }
  @media all and (min-width:367px) and (max-width: 675px) {
    #footer-top-logo{
        h4{
            &+ div{
                width: 346px;
            }
        }
    }
    footer {
    //   height: 783px;
    height:844px;
    max-width: 100%;
      padding: 0px 15px 0px 14px;

      &>.footer-container {
        gap: 72px;
        }
    }
    #footer-line{
        height:112px;
        padding: 0px 15px 0px 14px; 
        max-width: 100%;
    }
}
@media all and (max-width: 366px){
    footer {
        max-width: 100%;
        height: 844px;
    }
    #footer-line{
        max-width: 100%;
    }
}